-
+
You're about to send tokens from your shielded account to a public account.
It will originate from the shielded pool, leaving your old transfer history behind.
@@ -93,7 +93,7 @@ const SelectAccountPage = ({ addressTo, setAddressTo, onConfirmClick }: Props) =
initial={{ rotateZ: -90 }}
animate={{ rotateZ: isExpanded ? -270 : -90 }}
>
-
+
@@ -130,7 +130,7 @@ const Container = styled.div`
gap: ${vars('--spacing-xl')};
`;
-const Content = styled(DoubleBorderBox.Content)`
+const Content = styled(ContentBox)`
display: flex;
flex-direction: column;
@@ -161,7 +161,7 @@ const AccordionHeader = styled.div`
`;
const AccordionTitle = styled.p`
- ${typography.web.caption1Strong};
+ ${typography.caption1Strong};
`;
const AccordionContent = styled(motion.ul)`
@@ -177,7 +177,7 @@ const AccordionItem = styled.li`
display: flex;
gap: ${vars('--spacing-s')};
align-items: start;
- ${typography.web.caption1};
+ ${typography.caption1};
&::before {
content: '•';
@@ -192,7 +192,7 @@ const InfoContainer = styled.div`
gap: ${vars('--spacing-xs')};
padding: ${vars('--spacing-m')} ${vars('--spacing-l')} ${vars('--spacing-l')};
color: ${vars('--color-neutral-foreground-2-rest')};
- ${typography.web.caption1};
+ ${typography.caption1};
`;
const ShieldImage = styled.img`
@@ -206,7 +206,7 @@ const ShieldImage = styled.img`
const Label = styled.div`
display: flex;
justify-content: space-between;
- ${typography.web.body1};
+ ${typography.body1};
`;
const MessageContainer = styled(motion.div)`
@@ -221,13 +221,13 @@ const MessageContent = styled.div<{ $status: MessageStatus }>`
warning: vars('--color-status-warning-foreground-1-rest'),
})({ $status: props.$status })};
- & > ${CIcon} {
+ & > ${BIcon} {
margin-top: ${vars('--spacing-xs-nudge')};
}
`;
const MessageText = styled.p`
- ${typography.web.caption1};
+ ${typography.caption1};
`;
const ChevronIconWrapper = styled(motion.div)`
@@ -241,5 +241,5 @@ const Link = styled.a`
color: ${vars('--color-brand-foreground-link-rest')};
text-decoration: none;
- ${typography.web.body1}
+ ${typography.body1}
`;
diff --git a/src/domains/shielder/components/TokenList/Modals/SendModal/SelectAmountPage.tsx b/src/domains/shielder/components/TokenList/Modals/SendModal/SelectAmountPage.tsx
index fca13e4..57ad7a2 100644
--- a/src/domains/shielder/components/TokenList/Modals/SendModal/SelectAmountPage.tsx
+++ b/src/domains/shielder/components/TokenList/Modals/SendModal/SelectAmountPage.tsx
@@ -4,9 +4,9 @@ import { isNullish } from 'utility-types';
import { useWallet } from 'src/domains/chains/components/WalletProvider';
import useChain from 'src/domains/chains/utils/useChain';
+import BIcon from 'src/domains/misc/components/BIcon';
import Button from 'src/domains/misc/components/Button';
-import CIcon from 'src/domains/misc/components/CIcon';
-import DoubleBorderBox from 'src/domains/misc/components/DoubleBorderBox';
+import ContentBox from 'src/domains/misc/components/ContentBox';
import InfoPair from 'src/domains/misc/components/InfoPair';
import Skeleton from 'src/domains/misc/components/Skeleton';
import TokenIcon from 'src/domains/misc/components/TokenIcon';
@@ -88,7 +88,7 @@ const SelectAmountPage = ({ onContinue, token, hasInsufficientFees, value, onVal
/>
-
+
You’re about to send tokens from your shielded account to a public account.
It will originate from the shielded pool, leaving your old transfer history behind.
@@ -102,7 +102,7 @@ const SelectAmountPage = ({ onContinue, token, hasInsufficientFees, value, onVal
Est. Total fee
}
@@ -139,7 +139,7 @@ const Container = styled.div`
gap: ${vars('--spacing-xl')};
`;
-const Content = styled(DoubleBorderBox.Content)`
+const Content = styled(ContentBox)`
display: flex;
flex-direction: column;
@@ -163,7 +163,7 @@ const InfoContainer = styled.div`
gap: ${vars('--spacing-xs')};
padding: ${vars('--spacing-m')} ${vars('--spacing-l')} ${vars('--spacing-l')};
color: ${vars('--color-neutral-foreground-2-rest')};
- ${typography.web.caption1};
+ ${typography.caption1};
`;
const ShieldImage = styled.img`
@@ -192,7 +192,7 @@ const TotalFeeLabel = styled.div`
align-items: center;
gap: ${vars('--spacing-xs')};
color: ${vars('--color-neutral-foreground-2-rest')};
- ${typography.web.body1};
+ ${typography.body1};
& > button {
display: flex;
diff --git a/src/domains/shielder/components/TokenList/Modals/ShieldModal/SelectAmountPage.tsx b/src/domains/shielder/components/TokenList/Modals/ShieldModal/SelectAmountPage.tsx
index 2410907..34e7ceb 100644
--- a/src/domains/shielder/components/TokenList/Modals/ShieldModal/SelectAmountPage.tsx
+++ b/src/domains/shielder/components/TokenList/Modals/ShieldModal/SelectAmountPage.tsx
@@ -4,9 +4,9 @@ import { isNullish } from 'utility-types';
import { useWallet } from 'src/domains/chains/components/WalletProvider';
import useChain from 'src/domains/chains/utils/useChain';
+import BIcon from 'src/domains/misc/components/BIcon';
import Button from 'src/domains/misc/components/Button';
-import CIcon from 'src/domains/misc/components/CIcon';
-import DoubleBorderBox from 'src/domains/misc/components/DoubleBorderBox';
+import ContentBox from 'src/domains/misc/components/ContentBox';
import InfoPair from 'src/domains/misc/components/InfoPair';
import Skeleton from 'src/domains/misc/components/Skeleton';
import TokenIcon from 'src/domains/misc/components/TokenIcon';
@@ -92,7 +92,7 @@ const SelectAmountPage = ({ onContinue, token, hasInsufficientFees, value, onVal
/>
-
+
You're about to shield your tokens.
Your shielded account balance and actions will be private and secured.
@@ -106,7 +106,7 @@ const SelectAmountPage = ({ onContinue, token, hasInsufficientFees, value, onVal
Est. Total fee
}
@@ -143,11 +143,16 @@ const Container = styled.div`
gap: ${vars('--spacing-xl')};
`;
-const Disclaimer = styled(DoubleBorderBox.Content)`
+const Disclaimer = styled(ContentBox)`
display: flex;
+
+ flex-direction: row;
justify-content: space-between;
+ gap: ${vars('--spacing-m')};
+
margin: ${vars('--spacing-none')};
padding: ${vars('--spacing-s')} 0 0 0;
+
background: ${vars('--color-neutral-background-4a-rest')};
`;
@@ -157,7 +162,7 @@ const InfoContainer = styled.div`
gap: ${vars('--spacing-xs')};
padding: ${vars('--spacing-m')} ${vars('--spacing-l')} ${vars('--spacing-l')};
color: ${vars('--color-neutral-foreground-2-rest')};
- ${typography.web.caption1};
+ ${typography.caption1};
`;
const ShieldImage = styled.img`
@@ -186,7 +191,7 @@ const TotalFeeLabel = styled.div`
align-items: center;
gap: ${vars('--spacing-xs')};
color: ${vars('--color-neutral-foreground-2-rest')};
- ${typography.web.body1};
+ ${typography.body1};
& > button {
display: flex;
diff --git a/src/domains/shielder/components/TokenList/TokenListItem.tsx b/src/domains/shielder/components/TokenList/TokenListItem.tsx
index fbed681..808f231 100644
--- a/src/domains/shielder/components/TokenList/TokenListItem.tsx
+++ b/src/domains/shielder/components/TokenList/TokenListItem.tsx
@@ -139,7 +139,7 @@ const Column = styled.div`
`;
const Title = styled.p`
- ${typography.decorative.subtitle2};
+ ${typography.subtitle2};
`;
const Subtitle = styled.div`
@@ -147,5 +147,5 @@ const Subtitle = styled.div`
align-items: center;
gap: ${vars('--spacing-xs')};
color: ${vars('--color-neutral-foreground-4-rest')};
- ${typography.web.caption1};
+ ${typography.caption1};
`;
diff --git a/src/domains/shielder/components/TransactionDetailsModal/ActivityDetailsModal.tsx b/src/domains/shielder/components/TransactionDetailsModal/ActivityDetailsModal.tsx
index 850a772..8465283 100644
--- a/src/domains/shielder/components/TransactionDetailsModal/ActivityDetailsModal.tsx
+++ b/src/domains/shielder/components/TransactionDetailsModal/ActivityDetailsModal.tsx
@@ -6,7 +6,7 @@ import ChainIcon from 'src/domains/chains/components/ChainIcon';
import { useWallet } from 'src/domains/chains/components/WalletProvider';
import useChain from 'src/domains/chains/utils/useChain';
import AccountTypeIcon from 'src/domains/misc/components/AccountTypeIcon';
-import CIcon from 'src/domains/misc/components/CIcon';
+import BIcon from 'src/domains/misc/components/BIcon';
import InfoPair from 'src/domains/misc/components/InfoPair';
import Modal from 'src/domains/misc/components/Modal';
import Skeleton from 'src/domains/misc/components/Skeleton.tsx';
@@ -224,7 +224,7 @@ const ActivityDetailsModal = (props: Props) => {
target="_blank"
rel="noopener noreferrer"
>
-
+
)}
@@ -237,7 +237,7 @@ const ActivityDetailsModal = (props: Props) => {
Est. Total fee
)}
@@ -297,12 +297,12 @@ const Header = styled.header`
`;
const TokenName = styled.h2`
- ${typography.decorative.subtitle1}
+ ${typography.subtitle1}
`;
const Balance = styled.p<{ $isPositive: boolean, $status: Status }>`
margin-left: auto;
- ${typography.decorative.subtitle1};
+ ${typography.subtitle1};
${({ $isPositive, $status }) => {
if ($isPositive) {
if ($status === 'completed') {
@@ -359,14 +359,14 @@ const RowValue = styled.div`
display: flex;
align-items: center;
gap: ${vars('--spacing-s')};
- ${typography.web.body1};
+ ${typography.body1};
`;
const TransactionId = styled.div`
display: flex;
align-items: center;
color: ${vars('--color-brand-foreground-1-rest')};
- ${typography.web.body1};
+ ${typography.body1};
& > a {
display: flex;
@@ -393,7 +393,7 @@ const TotalFee = styled.div`
display: flex;
align-items: center;
gap: ${vars('--spacing-xs')};
- ${typography.web.body1};
+ ${typography.body1};
& > button {
display: flex;
diff --git a/src/domains/shielder/components/TransactionDetailsModal/Steps.tsx b/src/domains/shielder/components/TransactionDetailsModal/Steps.tsx
index 8e18108..d4c7d7c 100644
--- a/src/domains/shielder/components/TransactionDetailsModal/Steps.tsx
+++ b/src/domains/shielder/components/TransactionDetailsModal/Steps.tsx
@@ -1,7 +1,7 @@
import dayjs from 'dayjs';
import styled, { css, RuleSet } from 'styled-components';
-import CIcon from 'src/domains/misc/components/CIcon';
+import BIcon from 'src/domains/misc/components/BIcon';
import { typography } from 'src/domains/styling/utils/tokens';
import vars from 'src/domains/styling/utils/vars';
@@ -30,7 +30,7 @@ const Steps = ({ steps }: { steps: StepData[] }) => {
{icon === 'Spinner' ? : icon && (
- `
`;
const Name = styled.p`
- ${typography.web.body1}
+ ${typography.body1}
`;
const Timestamp = styled.p`
color: ${vars('--color-neutral-foreground-3-rest')};
- ${typography.web.caption2}
+ ${typography.caption2}
`;
-const LoadingIcon = styled(CIcon)`
+const LoadingIcon = styled(BIcon)`
animation: spin 1.4s linear infinite;
& *:first-of-type {
diff --git a/src/domains/shielder/components/TransactionDetailsModal/Title.tsx b/src/domains/shielder/components/TransactionDetailsModal/Title.tsx
index d5e0f21..17cdc77 100644
--- a/src/domains/shielder/components/TransactionDetailsModal/Title.tsx
+++ b/src/domains/shielder/components/TransactionDetailsModal/Title.tsx
@@ -62,11 +62,11 @@ const Container = styled.div`
flex-direction: column;
& > :first-of-type {
- ${typography.decorative.subtitle2};
+ ${typography.subtitle2};
};
& > :last-of-type {
- ${typography.web.caption2};
+ ${typography.caption2};
color:${vars('--color-neutral-foreground-3-rest')}
};
`;
diff --git a/src/domains/shielder/components/Welcome/Welcome.tsx b/src/domains/shielder/components/Welcome/Welcome.tsx
index 95737a7..e3280dc 100644
--- a/src/domains/shielder/components/Welcome/Welcome.tsx
+++ b/src/domains/shielder/components/Welcome/Welcome.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
import ConnectModal from 'src/domains/chains/components/ConnectModal';
import Button from 'src/domains/misc/components/Button';
-import DoubleBorderBox from 'src/domains/misc/components/DoubleBorderBox';
+import ContentBox from 'src/domains/misc/components/ContentBox';
import { useModal } from 'src/domains/misc/components/Modal';
import { typography } from 'src/domains/styling/utils/tokens';
import vars from 'src/domains/styling/utils/vars';
@@ -15,29 +15,27 @@ const Welcome = () => {
const { open } = useModal();
return (
-
-
-
-
- Make your onchain actions private and secure with shielding.
-
- {STEPS.map((step, index) => (
-
- {index + 1}
- {step}
-
- ))}
-
-
- void open()}
- >
- Connect Wallet
-
-
-
+
+
+
+ Make your onchain actions private and secure with shielding.
+
+ {STEPS.map((step, index) => (
+
+ {index + 1}
+ {step}
+
+ ))}
+
+
+ void open()}
+ >
+ Connect Wallet
+
+
);
};
@@ -51,7 +49,7 @@ const BreakTheTrace = styled.img`
user-select: none;
`;
-const Content = styled(DoubleBorderBox.Content)`
+const Content = styled(ContentBox)`
display: flex;
flex-direction: column;
@@ -83,7 +81,7 @@ const Steps = styled.li`
const Title = styled.h2`
max-width: 308px;
text-align: center;
- ${typography.web.body1Strong};
+ ${typography.body1Strong};
`;
const Step = styled.div`
@@ -91,7 +89,7 @@ const Step = styled.div`
align-items: center;
gap: ${vars('--spacing-s')};
color: ${vars('--color-neutral-foreground-2-rest')};
- ${typography.web.body1};
+ ${typography.body1};
`;
const StepNumber = styled.div`
@@ -107,5 +105,5 @@ const StepNumber = styled.div`
flex-shrink: 0;
- ${typography.decorative.body1};
+ ${typography.body1};
`;
diff --git a/src/domains/shielder/consts/consts.ts b/src/domains/shielder/consts/consts.ts
index 2646be6..8dce832 100644
--- a/src/domains/shielder/consts/consts.ts
+++ b/src/domains/shielder/consts/consts.ts
@@ -5,13 +5,13 @@
* Changing it will break compatibility for all users relying on the current message.
*/
export const MAINNET_SHIELDER_PRIVATE_KEY_SIGNING_MESSAGE = `
-Sign this message to enter the Common Web App and start shielding your assets.
+Sign this message to enter the BlankSquare Web App and start shielding your assets.
-SECURITY WARNING: Always ensure the website address is actually common.fi. If it's not, do not proceed! You may be at risk of losing your funds.
+SECURITY WARNING: Always ensure the website address is actually blanksquare.io. If it's not, do not proceed! You may be at risk of losing your funds.
`;
export const TESTNET_SHIELDER_PRIVATE_KEY_SIGNING_MESSAGE = `
-Sign this message to enter the Common Web App and start shielding your assets on testnets.
+Sign this message to enter the BlankSquare Web App and start shielding your assets on testnets.
-SECURITY WARNING: Always ensure the website address is actually common.fi. If it's not, do not proceed! You may be at risk of losing your funds.
+SECURITY WARNING: Always ensure the website address is actually blanksquare.io. If it's not, do not proceed! You may be at risk of losing your funds.
`;
diff --git a/src/domains/shielder/utils/useFeeBreakdownModal.tsx b/src/domains/shielder/utils/useFeeBreakdownModal.tsx
index 47c2f9a..19f18ef 100644
--- a/src/domains/shielder/utils/useFeeBreakdownModal.tsx
+++ b/src/domains/shielder/utils/useFeeBreakdownModal.tsx
@@ -134,7 +134,7 @@ const Container = styled.div`
display: flex;
flex-direction: column;
gap: ${vars('--spacing-l')};
- ${typography.web.body1};
+ ${typography.body1};
`;
const FeeBreakdown = styled.div`
diff --git a/src/domains/styling/components/GlobalStyles.tsx b/src/domains/styling/components/GlobalStyles.tsx
index 5e7662f..bf61b1a 100644
--- a/src/domains/styling/components/GlobalStyles.tsx
+++ b/src/domains/styling/components/GlobalStyles.tsx
@@ -3,6 +3,7 @@ import cssReset from 'styled-reset';
import { primitives, themes } from '../utils/tokens';
import vars from '../utils/vars';
+import '../fonts.css';
const primitivesString = Object.entries(primitives)
.map(([property, value]) => `${property}: ${value};`).join('\n');
diff --git a/src/domains/styling/fonts.css b/src/domains/styling/fonts.css
new file mode 100644
index 0000000..9dac1e9
--- /dev/null
+++ b/src/domains/styling/fonts.css
@@ -0,0 +1,41 @@
+/* Innovator Grotesk Font Family */
+
+@font-face {
+ font-family: 'Innovator Grotesk';
+ src: url('/fonts/Innovator Grotesk/InnovatorGrotesk-Light.woff2') format('woff2');
+ font-weight: 300;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Innovator Grotesk';
+ src: url('/fonts/Innovator Grotesk/InnovatorGrotesk-Regular.woff2') format('woff2');
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Innovator Grotesk';
+ src: url('/fonts/Innovator Grotesk/InnovatorGrotesk-Medium.woff2') format('woff2');
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Innovator Grotesk';
+ src: url('/fonts/Innovator Grotesk/InnovatorGrotesk-SemiBold.woff2') format('woff2');
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Innovator Grotesk';
+ src: url('/fonts/Innovator Grotesk/InnovatorGrotesk-Bold.woff2') format('woff2');
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
\ No newline at end of file
diff --git a/src/domains/styling/utils/tokens.ts b/src/domains/styling/utils/tokens.ts
index 7a3efde..677cb37 100644
--- a/src/domains/styling/utils/tokens.ts
+++ b/src/domains/styling/utils/tokens.ts
@@ -6,143 +6,150 @@ import { css } from 'styled-components';
import vars from'./vars';
export const primitives = {
- '--colors-brand-primary-10': 'rgb(13, 22, 36)',
- '--colors-brand-primary-100': 'rgb(130, 178, 250)',
- '--colors-brand-primary-110': 'rgb(148, 191, 255)',
- '--colors-brand-primary-120': 'rgb(170, 204, 255)',
- '--colors-brand-primary-130': 'rgb(189, 215, 255)',
- '--colors-brand-primary-140': 'rgb(204, 224, 255)',
- '--colors-brand-primary-150': 'rgb(229, 239, 255)',
- '--colors-brand-primary-160': 'rgb(242, 247, 255)',
- '--colors-brand-primary-20': 'rgb(21, 37, 60)',
- '--colors-brand-primary-30': 'rgb(29, 49, 80)',
- '--colors-brand-primary-40': 'rgb(36, 61, 99)',
- '--colors-brand-primary-50': 'rgb(44, 75, 122)',
- '--colors-brand-primary-60': 'rgb(51, 88, 143)',
- '--colors-brand-primary-70': 'rgb(64, 110, 178)',
- '--colors-brand-primary-80': 'rgb(84, 134, 209)',
- '--colors-brand-primary-90': 'rgb(111, 161, 235)',
- '--colors-brand-secondary-10': 'rgb(41, 23, 10)',
- '--colors-brand-secondary-100': 'rgb(250, 158, 92)',
- '--colors-brand-secondary-110': 'rgb(250, 174, 120)',
- '--colors-brand-secondary-120': 'rgb(252, 189, 144)',
- '--colors-brand-secondary-130': 'rgb(255, 215, 186)',
- '--colors-brand-secondary-140': 'rgb(255, 225, 204)',
- '--colors-brand-secondary-150': 'rgb(255, 241, 232)',
- '--colors-brand-secondary-160': 'rgb(255, 252, 250)',
- '--colors-brand-secondary-20': 'rgb(61, 33, 13)',
- '--colors-brand-secondary-30': 'rgb(79, 43, 17)',
- '--colors-brand-secondary-40': 'rgb(99, 54, 22)',
- '--colors-brand-secondary-50': 'rgb(122, 65, 24)',
- '--colors-brand-secondary-60': 'rgb(145, 77, 28)',
- '--colors-brand-secondary-70': 'rgb(168, 88, 30)',
- '--colors-brand-secondary-80': 'rgb(194, 106, 43)',
- '--colors-brand-secondary-90': 'rgb(227, 129, 59)',
- '--colors-grey-10': 'rgb(21, 25, 31)',
- '--colors-grey-12': 'rgb(25, 29, 36)',
- '--colors-grey-14': 'rgb(30, 35, 43)',
- '--colors-grey-16': 'rgb(35, 41, 51)',
- '--colors-grey-18': 'rgb(41, 47, 59)',
- '--colors-grey-2': 'rgb(7, 8, 10)',
- '--colors-grey-20': 'rgb(44, 51, 64)',
- '--colors-grey-22': 'rgb(49, 57, 71)',
- '--colors-grey-24': 'rgb(55, 63, 79)',
- '--colors-grey-26': 'rgb(60, 70, 87)',
- '--colors-grey-28': 'rgb(65, 76, 94)',
- '--colors-grey-30': 'rgb(70, 82, 102)',
- '--colors-grey-32': 'rgb(77, 89, 110)',
- '--colors-grey-34': 'rgb(84, 97, 120)',
- '--colors-grey-36': 'rgb(91, 105, 128)',
- '--colors-grey-38': 'rgb(94, 108, 133)',
- '--colors-grey-4': 'rgb(11, 12, 15)',
- '--colors-grey-40': 'rgb(97, 111, 135)',
- '--colors-grey-42': 'rgb(101, 115, 140)',
- '--colors-grey-44': 'rgb(105, 120, 145)',
- '--colors-grey-46': 'rgb(108, 123, 150)',
- '--colors-grey-48': 'rgb(112, 128, 156)',
- '--colors-grey-50': 'rgb(116, 132, 161)',
- '--colors-grey-52': 'rgb(119, 136, 166)',
- '--colors-grey-54': 'rgb(123, 141, 171)',
- '--colors-grey-56': 'rgb(126, 144, 176)',
- '--colors-grey-58': 'rgb(130, 149, 181)',
- '--colors-grey-6': 'rgb(14, 16, 20)',
- '--colors-grey-60': 'rgb(134, 153, 186)',
- '--colors-grey-62': 'rgb(138, 157, 189)',
- '--colors-grey-64': 'rgb(143, 162, 194)',
- '--colors-grey-66': 'rgb(149, 167, 199)',
- '--colors-grey-68': 'rgb(155, 173, 204)',
- '--colors-grey-70': 'rgb(161, 179, 209)',
- '--colors-grey-72': 'rgb(167, 184, 214)',
- '--colors-grey-74': 'rgb(171, 189, 219)',
- '--colors-grey-76': 'rgb(180, 196, 224)',
- '--colors-grey-78': 'rgb(184, 201, 229)',
- '--colors-grey-8': 'rgb(18, 20, 26)',
- '--colors-grey-80': 'rgb(190, 205, 232)',
- '--colors-grey-82': 'rgb(197, 211, 235)',
- '--colors-grey-84': 'rgb(204, 216, 237)',
- '--colors-grey-86': 'rgb(213, 224, 242)',
- '--colors-grey-88': 'rgb(220, 229, 245)',
- '--colors-grey-90': 'rgb(227, 234, 247)',
- '--colors-grey-92': 'rgb(235, 240, 250)',
- '--colors-grey-94': 'rgb(240, 244, 250)',
- '--colors-grey-96': 'rgb(245, 248, 252)',
- '--colors-grey-98': 'rgb(249, 250, 252)',
- '--colors-grey-black': 'rgb(0, 0, 0)',
- '--colors-grey-white': 'rgb(255, 255, 255)',
- '--colors-grey-alpha-alpha-0': 'rgb(255, 255, 255, 0)',
- '--colors-grey-alpha-grey-14-alpha-0': 'rgb(30, 35, 43, 0)',
- '--colors-grey-alpha-grey-14-alpha-50': 'rgb(30, 35, 43, 0.5)',
- '--colors-grey-alpha-grey-14-alpha-80': 'rgb(30, 35, 43, 0.8)',
- '--colors-grey-alpha-grey-2-alpha-10': 'rgb(7, 8, 10, 0.1)',
- '--colors-grey-alpha-grey-2-alpha-15': 'rgb(7, 8, 10, 0.15)',
- '--colors-grey-alpha-grey-2-alpha-20': 'rgb(7, 8, 10, 0.2)',
- '--colors-grey-alpha-grey-2-alpha-25': 'rgb(7, 8, 10, 0.25)',
- '--colors-grey-alpha-grey-2-alpha-30': 'rgb(7, 8, 10, 0.3)',
- '--colors-grey-alpha-grey-2-alpha-40': 'rgb(7, 8, 10, 0.4)',
- '--colors-grey-alpha-grey-2-alpha-5': 'rgb(7, 8, 10, 0.05)',
- '--colors-grey-alpha-grey-2-alpha-50': 'rgb(7, 8, 10, 0.5)',
- '--colors-grey-alpha-grey-2-alpha-90': 'rgb(7, 8, 10, 0.9)',
- '--colors-grey-alpha-grey-30-alpha-0': 'rgb(70, 82, 102, 0)',
- '--colors-grey-alpha-grey-30-alpha-10': 'rgb(70, 82, 102, 0.1)',
- '--colors-grey-alpha-grey-30-alpha-15': 'rgb(70, 82, 102, 0.15)',
- '--colors-grey-alpha-grey-30-alpha-20': 'rgb(70, 82, 102, 0.2)',
- '--colors-grey-alpha-grey-30-alpha-25': 'rgb(70, 82, 102, 0.25)',
- '--colors-grey-alpha-grey-30-alpha-5': 'rgb(70, 82, 102, 0.05)',
- '--colors-grey-alpha-grey-50-alpha-0': 'rgb(116, 132, 161, 0)',
- '--colors-grey-alpha-grey-50-alpha-50': 'rgb(116, 132, 161, 0.5)',
- '--colors-grey-alpha-grey-88-alpha-25': 'rgb(220, 229, 245, 0.25)',
- '--colors-grey-alpha-grey-88-alpha-50': 'rgb(220, 229, 245, 0.5)',
- '--colors-grey-alpha-grey-88-alpha-90': 'rgb(220, 229, 245, 0.9)',
- '--colors-grey-alpha-white-alpha-0': 'rgb(255, 255, 255, 0)',
- '--colors-grey-alpha-white-alpha-10': 'rgb(255, 255, 255, 0.1)',
- '--colors-grey-alpha-white-alpha-30': 'rgb(255, 255, 255, 0.3)',
- '--colors-grey-alpha-white-alpha-50': 'rgb(255, 255, 255, 0.5)',
- '--colors-grey-alpha-white-alpha-80': 'rgb(255, 255, 255, 0.8)',
- '--colors-shared-dark-orange-default': 'rgb(230, 93, 25)',
- '--colors-shared-dark-orange-shade-10': 'rgb(173, 58, 0)',
- '--colors-shared-dark-orange-shade-40': 'rgb(71, 24, 0)',
- '--colors-shared-dark-orange-tint-30': 'rgb(237, 142, 94)',
- '--colors-shared-dark-orange-tint-40': 'rgb(245, 190, 163)',
- '--colors-shared-dark-orange-tint-60': 'rgb(252, 239, 232)',
- '--colors-shared-green-default': 'rgb(0, 153, 92)',
- '--colors-shared-green-shade-10': 'rgb(0, 128, 77)',
- '--colors-shared-green-shade-40': 'rgb(0, 38, 23)',
- '--colors-shared-green-tint-30': 'rgb(82, 204, 155)',
- '--colors-shared-green-tint-40': 'rgb(138, 229, 193)',
- '--colors-shared-green-tint-60': 'rgb(229, 255, 245)',
- '--colors-shared-red-default': 'rgb(229, 64, 87)',
- '--colors-shared-red-shade-10': 'rgb(204, 57, 77)',
- '--colors-shared-red-shade-20': 'rgb(182, 47, 65)',
- '--colors-shared-red-shade-40': 'rgb(63, 16, 22)',
- '--colors-shared-red-tint-30': 'rgb(236, 116, 132)',
- '--colors-shared-red-tint-40': 'rgb(245, 183, 191)',
- '--colors-shared-red-tint-60': 'rgb(253, 237, 239)',
- '--colors-shared-yellow-default': 'rgb(240, 183, 13)',
- '--colors-shared-yellow-shade-30': 'rgb(143, 107, 0)',
- '--colors-shared-yellow-shade-40': 'rgb(77, 57, 0)',
- '--colors-shared-yellow-tint-30': 'rgb(254, 216, 102)',
- '--colors-shared-yellow-tint-40': 'rgb(254, 235, 178)',
- '--colors-shared-yellow-tint-60': 'rgb(255, 250, 235)',
+ '--colors-brand-primary-10': 'rgb(13 19 36)',
+ '--colors-brand-primary-100': 'rgb(130 162 250)',
+ '--colors-brand-primary-110': 'rgb(148 177 255)',
+ '--colors-brand-primary-120': 'rgb(170 193 255)',
+ '--colors-brand-primary-130': 'rgb(189 207 255)',
+ '--colors-brand-primary-140': 'rgb(204 218 255)',
+ '--colors-brand-primary-150': 'rgb(229 236 255)',
+ '--colors-brand-primary-160': 'rgb(242 247 255)',
+ '--colors-brand-primary-20': 'rgb(21 31 60)',
+ '--colors-brand-primary-30': 'rgb(29 43 80)',
+ '--colors-brand-primary-40': 'rgb(36 53 99)',
+ '--colors-brand-primary-50': 'rgb(44 65 122)',
+ '--colors-brand-primary-60': 'rgb(51 76 143)',
+ '--colors-brand-primary-70': 'rgb(64 94 178)',
+ '--colors-brand-primary-80': 'rgb(84 117 209)',
+ '--colors-brand-primary-90': 'rgb(111 144 235)',
+ '--colors-brand-secondary-10': 'rgb(41 23 10)',
+ '--colors-brand-secondary-100': 'rgb(250 158 92)',
+ '--colors-brand-secondary-110': 'rgb(250 174 120)',
+ '--colors-brand-secondary-120': 'rgb(252 189 144)',
+ '--colors-brand-secondary-130': 'rgb(255 215 186)',
+ '--colors-brand-secondary-140': 'rgb(255 225 204)',
+ '--colors-brand-secondary-150': 'rgb(255 241 232)',
+ '--colors-brand-secondary-160': 'rgb(255 252 250)',
+ '--colors-brand-secondary-20': 'rgb(61 33 13)',
+ '--colors-brand-secondary-30': 'rgb(79 43 17)',
+ '--colors-brand-secondary-40': 'rgb(99 54 22)',
+ '--colors-brand-secondary-50': 'rgb(122 65 24)',
+ '--colors-brand-secondary-60': 'rgb(145 77 28)',
+ '--colors-brand-secondary-70': 'rgb(168 88 30)',
+ '--colors-brand-secondary-80': 'rgb(194 106 43)',
+ '--colors-brand-secondary-90': 'rgb(227 129 59)',
+ '--colors-grey-10': 'rgb(22 22 23)',
+ '--colors-grey-12': 'rgb(25 25 26)',
+ '--colors-grey-14': 'rgb(27 27 28)',
+ '--colors-grey-16': 'rgb(30 30 31)',
+ '--colors-grey-18': 'rgb(32 32 33)',
+ '--colors-grey-2': 'rgb(5 5 5)',
+ '--colors-grey-20': 'rgb(36 35 35)',
+ '--colors-grey-22': 'rgb(37 37 38)',
+ '--colors-grey-24': 'rgb(40 40 41)',
+ '--colors-grey-26': 'rgb(42 42 43)',
+ '--colors-grey-28': 'rgb(45 45 46)',
+ '--colors-grey-30': 'rgb(47 47 48)',
+ '--colors-grey-32': 'rgb(49 50 51)',
+ '--colors-grey-34': 'rgb(52 53 54)',
+ '--colors-grey-36': 'rgb(54 55 56)',
+ '--colors-grey-38': 'rgb(57 58 59)',
+ '--colors-grey-4': 'rgb(13 13 13)',
+ '--colors-grey-40': 'rgb(59 60 61)',
+ '--colors-grey-42': 'rgb(62 63 64)',
+ '--colors-grey-44': 'rgb(64 65 66)',
+ '--colors-grey-46': 'rgb(67 68 69)',
+ '--colors-grey-48': 'rgb(69 70 71)',
+ '--colors-grey-50': 'rgb(188 190 194)',
+ '--colors-grey-52': 'rgb(190 192 196)',
+ '--colors-grey-54': 'rgb(193 195 199)',
+ '--colors-grey-56': 'rgb(195 197 201)',
+ '--colors-grey-58': 'rgb(198 200 204)',
+ '--colors-grey-6': 'rgb(17 18 18)',
+ '--colors-grey-60': 'rgb(200 202 207)',
+ '--colors-grey-62': 'rgb(203 205 209)',
+ '--colors-grey-64': 'rgb(205 207 212)',
+ '--colors-grey-66': 'rgb(208 210 214)',
+ '--colors-grey-68': 'rgb(210 212 217)',
+ '--colors-grey-70': 'rgb(213 215 219)',
+ '--colors-grey-72': 'rgb(215 217 222)',
+ '--colors-grey-74': 'rgb(218 220 224)',
+ '--colors-grey-76': 'rgb(220 222 227)',
+ '--colors-grey-78': 'rgb(223 225 229)',
+ '--colors-grey-8': 'rgb(19 20 20)',
+ '--colors-grey-80': 'rgb(225 227 232)',
+ '--colors-grey-82': 'rgb(228 230 235)',
+ '--colors-grey-84': 'rgb(230 232 237)',
+ '--colors-grey-86': 'rgb(233 235 240)',
+ '--colors-grey-88': 'rgb(235 237 242)',
+ '--colors-grey-90': 'rgb(237 239 245)',
+ '--colors-grey-92': 'rgb(240 242 247)',
+ '--colors-grey-94': 'rgb(242 244 250)',
+ '--colors-grey-96': 'rgb(247 248 252)',
+ '--colors-grey-98': 'rgb(250 251 252)',
+ '--colors-grey-black': 'rgb(0 0 0)',
+ '--colors-grey-white': 'rgb(255 255 255)',
+ '--colors-grey-alpha-0': 'rgb(255 255 255 / 0)',
+ '--colors-grey-alpha-black-18': 'rgb(0 0 0 / 0.18)',
+ '--colors-grey-alpha-black-25': 'rgb(0 0 0 / 0.25)',
+ '--colors-grey-alpha-black-30': 'rgb(0 0 0 / 0.3)',
+ '--colors-grey-alpha-black-60': 'rgb(0 0 0 / 0.6)',
+ '--colors-grey-alpha-black-87': 'rgb(0 0 0 / 0.87)',
+ '--colors-grey-alpha-grey-14-0': 'rgb(30 35 43 / 0)',
+ '--colors-grey-alpha-grey-14-50': 'rgb(27 27 28 / 0.5)',
+ '--colors-grey-alpha-grey-14-80': 'rgb(27 27 28 / 0.8)',
+ '--colors-grey-alpha-grey-2-10': 'rgb(5 5 5 / 0.1)',
+ '--colors-grey-alpha-grey-2-15': 'rgb(5 5 5 / 0.15)',
+ '--colors-grey-alpha-grey-2-20': 'rgb(5 5 5 / 0.2)',
+ '--colors-grey-alpha-grey-2-25': 'rgb(5 5 5 / 0.25)',
+ '--colors-grey-alpha-grey-2-30': 'rgb(5 5 5 / 0.3)',
+ '--colors-grey-alpha-grey-2-40': 'rgb(5 5 5 / 0.4)',
+ '--colors-grey-alpha-grey-2-5': 'rgb(5 5 5 / 0.05)',
+ '--colors-grey-alpha-grey-2-50': 'rgb(5 5 5 / 0.5)',
+ '--colors-grey-alpha-grey-2-90': 'rgb(7 8 10 / 0.9)',
+ '--colors-grey-alpha-grey-30-0': 'rgb(47 47 48 / 0)',
+ '--colors-grey-alpha-grey-30-10': 'rgb(47 47 48 / 0.1)',
+ '--colors-grey-alpha-grey-30-15': 'rgb(47 47 48 / 0.15)',
+ '--colors-grey-alpha-grey-30-20': 'rgb(47 47 48 / 0.2)',
+ '--colors-grey-alpha-grey-30-25': 'rgb(70 82 102 / 0.25)',
+ '--colors-grey-alpha-grey-30-5': 'rgb(47 47 48 / 0.05)',
+ '--colors-grey-alpha-grey-50-0': 'rgb(188 190 194 / 0)',
+ '--colors-grey-alpha-grey-50-50': 'rgb(188 190 194 / 0.5)',
+ '--colors-grey-alpha-grey-88-25': 'rgb(235 237 242 / 0.25)',
+ '--colors-grey-alpha-grey-88-50': 'rgb(235 237 242 / 0.5)',
+ '--colors-grey-alpha-grey-88-90': 'rgb(235 237 242 / 0.9)',
+ '--colors-grey-alpha-white-0': 'rgb(255 255 255 / 0)',
+ '--colors-grey-alpha-white-10': 'rgb(255 255 255 / 0.1)',
+ '--colors-grey-alpha-white-25': 'rgb(255 255 255 / 0.25)',
+ '--colors-grey-alpha-white-30': 'rgb(255 255 255 / 0.3)',
+ '--colors-grey-alpha-white-50': 'rgb(255 255 255 / 0.5)',
+ '--colors-grey-alpha-white-70': 'rgb(255 255 255 / 0.7)',
+ '--colors-grey-alpha-white-80': 'rgb(255 255 255 / 0.8)',
+ '--colors-shared-dark-orange-default': 'rgb(230 100 25)',
+ '--colors-shared-dark-orange-shade-10': 'rgb(173 64 0)',
+ '--colors-shared-dark-orange-shade-40': 'rgb(71 26 0)',
+ '--colors-shared-dark-orange-tint-30': 'rgb(237 146 94)',
+ '--colors-shared-dark-orange-tint-40': 'rgb(245 193 163)',
+ '--colors-shared-dark-orange-tint-60': 'rgb(252 239 232)',
+ '--colors-shared-green-default': 'rgb(0 153 99)',
+ '--colors-shared-green-shade-10': 'rgb(0 128 83)',
+ '--colors-shared-green-shade-40': 'rgb(0 38 25)',
+ '--colors-shared-green-tint-30': 'rgb(82 204 161)',
+ '--colors-shared-green-tint-40': 'rgb(138 229 197)',
+ '--colors-shared-green-tint-60': 'rgb(229 255 245)',
+ '--colors-shared-red-default': 'rgb(229 64 81)',
+ '--colors-shared-red-shade-10': 'rgb(204 57 72)',
+ '--colors-shared-red-shade-20': 'rgb(182 47 61)',
+ '--colors-shared-red-shade-40': 'rgb(63 16 21)',
+ '--colors-shared-red-tint-30': 'rgb(236 116 128)',
+ '--colors-shared-red-tint-40': 'rgb(245 183 189)',
+ '--colors-shared-red-tint-60': 'rgb(253 237 239)',
+ '--colors-shared-yellow-default': 'rgb(240 191 13)',
+ '--colors-shared-yellow-shade-30': 'rgb(143 112 0)',
+ '--colors-shared-yellow-shade-40': 'rgb(77 60 0)',
+ '--colors-shared-yellow-tint-30': 'rgb(254 221 102)',
+ '--colors-shared-yellow-tint-40': 'rgb(254 238 178)',
+ '--colors-shared-yellow-tint-60': 'rgb(255 251 235)',
'--number-values-0': '0px',
'--number-values-1': '1px',
'--number-values-2': '2px',
@@ -192,7 +199,7 @@ export const themes = {
'--color-brand-background-compound-pressed': '--colors-brand-primary-70',
'--color-brand-background-compound-rest': '--colors-brand-primary-110',
'--color-brand-background-glow-a': '--colors-brand-primary-130',
- '--color-brand-background-glow-b': '--colors-grey-alpha-alpha-0',
+ '--color-brand-background-glow-b': '--colors-grey-alpha-0',
'--color-brand-background-inverted-hover': '--colors-brand-primary-160',
'--color-brand-background-inverted-pressed': '--colors-brand-primary-140',
'--color-brand-background-inverted-rest': '--colors-grey-white',
@@ -266,45 +273,45 @@ export const themes = {
'--color-neutral-background-5a-selected': '--colors-grey-80',
'--color-neutral-background-6-rest': '--colors-grey-90',
'--color-neutral-background-6a-rest': '--colors-grey-82',
- '--color-neutral-background-alpha-1-rest': '--colors-grey-alpha-grey-88-alpha-90',
- '--color-neutral-background-alpha-2-rest': '--colors-grey-alpha-grey-88-alpha-50',
- '--color-neutral-background-alpha-3-rest': '--colors-grey-alpha-grey-88-alpha-25',
- '--color-neutral-background-alpha-4-rest': '--colors-grey-alpha-white-alpha-30',
- '--color-neutral-background-canvas-rest': '--colors-grey-92',
+ '--color-neutral-background-alpha-1-rest': '--colors-grey-alpha-grey-88-90',
+ '--color-neutral-background-alpha-2-rest': '--colors-grey-alpha-grey-88-50',
+ '--color-neutral-background-alpha-3-rest': '--colors-grey-alpha-grey-88-25',
+ '--color-neutral-background-alpha-4-rest': '--colors-grey-alpha-white-30',
+ '--color-neutral-background-canvas-rest': '--colors-grey-96',
'--color-neutral-background-disabled-rest': '--colors-grey-88',
'--color-neutral-background-gradient-color-a': '--colors-grey-90',
'--color-neutral-background-gradient-color-b': '--colors-grey-96',
'--color-neutral-background-inverted-rest': '--colors-grey-14',
- '--color-neutral-background-inverted-disabled-rest': '--colors-grey-alpha-white-alpha-10',
- '--color-neutral-background-overlay-rest': '--colors-grey-alpha-white-alpha-50',
- '--color-neutral-background-scrollbar-overlay-rest': '--colors-grey-alpha-grey-88-alpha-50',
+ '--color-neutral-background-inverted-disabled-rest': '--colors-grey-alpha-white-10',
+ '--color-neutral-background-overlay-rest': '--colors-grey-alpha-white-50',
+ '--color-neutral-background-scrollbar-overlay-rest': '--colors-grey-alpha-grey-88-50',
'--color-neutral-background-static-dark-rest': '--colors-grey-10',
'--color-neutral-background-static-light-rest': '--colors-grey-white',
'--color-neutral-background-stencil-1-rest': '--colors-grey-92',
'--color-neutral-background-stencil-2-rest': '--colors-grey-96',
- '--color-neutral-background-stencil-3-rest': '--colors-grey-alpha-grey-88-alpha-50',
+ '--color-neutral-background-stencil-3-rest': '--colors-grey-alpha-grey-88-50',
'--color-neutral-background-subtle-hover': '--colors-grey-94',
'--color-neutral-background-subtle-pressed': '--colors-grey-88',
- '--color-neutral-background-subtle-rest': '--colors-grey-alpha-alpha-0',
+ '--color-neutral-background-subtle-rest': '--colors-grey-alpha-0',
'--color-neutral-background-subtle-selected': '--colors-grey-90',
- '--color-neutral-background-subtle-inverted-hover': '--colors-grey-alpha-grey-2-alpha-10',
- '--color-neutral-background-subtle-inverted-pressed': '--colors-grey-alpha-grey-2-alpha-30',
- '--color-neutral-background-subtle-inverted-rest': '--colors-grey-alpha-alpha-0',
- '--color-neutral-background-subtle-inverted-selected': '--colors-grey-alpha-grey-2-alpha-20',
- '--color-neutral-background-subtle-light-alpha-hover': '--colors-grey-alpha-white-alpha-80',
- '--color-neutral-background-subtle-light-alpha-pressed': '--colors-grey-alpha-white-alpha-50',
- '--color-neutral-background-subtle-light-alpha-selected': '--colors-grey-alpha-alpha-0',
- '--color-neutral-background-transparent-hover': '--colors-grey-alpha-alpha-0',
- '--color-neutral-background-transparent-pressed': '--colors-grey-alpha-alpha-0',
- '--color-neutral-background-transparent-rest': '--colors-grey-alpha-alpha-0',
- '--color-neutral-background-transparent-selected': '--colors-grey-alpha-alpha-0',
+ '--color-neutral-background-subtle-inverted-hover': '--colors-grey-alpha-grey-2-10',
+ '--color-neutral-background-subtle-inverted-pressed': '--colors-grey-alpha-grey-2-30',
+ '--color-neutral-background-subtle-inverted-rest': '--colors-grey-alpha-0',
+ '--color-neutral-background-subtle-inverted-selected': '--colors-grey-alpha-grey-2-20',
+ '--color-neutral-background-subtle-light-alpha-hover': '--colors-grey-alpha-white-80',
+ '--color-neutral-background-subtle-light-alpha-pressed': '--colors-grey-alpha-white-50',
+ '--color-neutral-background-subtle-light-alpha-selected': '--colors-grey-alpha-0',
+ '--color-neutral-background-transparent-hover': '--colors-grey-alpha-0',
+ '--color-neutral-background-transparent-pressed': '--colors-grey-alpha-0',
+ '--color-neutral-background-transparent-rest': '--colors-grey-alpha-0',
+ '--color-neutral-background-transparent-selected': '--colors-grey-alpha-0',
'--color-neutral-foreground-1-hover': '--colors-grey-14',
'--color-neutral-foreground-1-pressed': '--colors-grey-14',
- '--color-neutral-foreground-1-rest': '--colors-grey-14',
+ '--color-neutral-foreground-1-rest': '--colors-grey-alpha-black-87',
'--color-neutral-foreground-1-selected': '--colors-grey-14',
'--color-neutral-foreground-2-hover': '--colors-grey-14',
'--color-neutral-foreground-2-pressed': '--colors-grey-14',
- '--color-neutral-foreground-2-rest': '--colors-grey-26',
+ '--color-neutral-foreground-2-rest': '--colors-grey-alpha-black-60',
'--color-neutral-foreground-2-selected': '--colors-grey-14',
'--color-neutral-foreground-2-brand-hover': '--colors-brand-primary-90',
'--color-neutral-foreground-2-brand-pressed': '--colors-brand-primary-80',
@@ -315,19 +322,19 @@ export const themes = {
'--color-neutral-foreground-2-link-selected': '--colors-grey-14',
'--color-neutral-foreground-3-hover': '--colors-grey-26',
'--color-neutral-foreground-3-pressed': '--colors-grey-26',
- '--color-neutral-foreground-3-rest': '--colors-grey-38',
+ '--color-neutral-foreground-3-rest': '--colors-grey-alpha-black-30',
'--color-neutral-foreground-3-selected': '--colors-grey-26',
'--color-neutral-foreground-3-brand-hover': '--colors-brand-primary-80',
'--color-neutral-foreground-3-brand-pressed': '--colors-brand-primary-70',
'--color-neutral-foreground-3-brand-selected': '--colors-brand-primary-80',
- '--color-neutral-foreground-4-rest': '--colors-grey-46',
- '--color-neutral-foreground-disabled-rest': '--colors-grey-74',
+ '--color-neutral-foreground-4-rest': '--colors-grey-alpha-black-18',
+ '--color-neutral-foreground-disabled-rest': '--colors-grey-alpha-black-25',
'--color-neutral-foreground-inverted-1-hover': '--colors-grey-white',
'--color-neutral-foreground-inverted-1-pressed': '--colors-grey-white',
'--color-neutral-foreground-inverted-1-rest': '--colors-grey-white',
'--color-neutral-foreground-inverted-1-selected': '--colors-grey-white',
'--color-neutral-foreground-inverted-2-rest': '--colors-grey-white',
- '--color-neutral-foreground-inverted-disabled-rest': '--colors-grey-alpha-white-alpha-50',
+ '--color-neutral-foreground-inverted-disabled-rest': '--colors-grey-alpha-white-50',
'--color-neutral-foreground-inverted-link-hover': '--colors-grey-white',
'--color-neutral-foreground-inverted-link-pressed': '--colors-grey-white',
'--color-neutral-foreground-inverted-link-rest': '--colors-grey-white',
@@ -345,22 +352,22 @@ export const themes = {
'--color-neutral-stroke-accessible-pressed': '--colors-grey-32',
'--color-neutral-stroke-accessible-rest': '--colors-grey-40',
'--color-neutral-stroke-accessible-selected': '--colors-brand-primary-130',
- '--color-neutral-stroke-alpha-rest': '--colors-grey-alpha-grey-2-alpha-5',
+ '--color-neutral-stroke-alpha-rest': '--colors-grey-alpha-grey-2-5',
'--color-neutral-stroke-disabled-rest': '--colors-grey-88',
- '--color-neutral-stroke-disabled-inverted-rest': '--colors-grey-alpha-white-alpha-50',
+ '--color-neutral-stroke-disabled-inverted-rest': '--colors-grey-alpha-white-50',
'--color-neutral-stroke-focus-1-rest': '--colors-grey-white',
'--color-neutral-stroke-focus-2-rest': '--colors-grey-black',
'--color-neutral-stroke-gradient-color-a': '--colors-grey-white',
- '--color-neutral-stroke-gradient-color-b': '--colors-grey-alpha-alpha-0',
+ '--color-neutral-stroke-gradient-color-b': '--colors-grey-alpha-0',
'--color-neutral-stroke-on-brand-1-rest': '--colors-grey-white',
'--color-neutral-stroke-on-brand-2-hover': '--colors-grey-white',
'--color-neutral-stroke-on-brand-2-pressed': '--colors-grey-white',
'--color-neutral-stroke-on-brand-2-rest': '--colors-grey-white',
'--color-neutral-stroke-on-brand-2-selected': '--colors-grey-white',
'--color-neutral-stroke-subtle-rest': '--colors-grey-94',
- '--color-neutral-stroke-transparent-rest': '--colors-grey-alpha-alpha-0',
- '--color-neutral-stroke-transparent-disabled-rest': '--colors-grey-alpha-alpha-0',
- '--color-neutral-stroke-transparent-interactive-rest': '--colors-grey-alpha-alpha-0',
+ '--color-neutral-stroke-transparent-rest': '--colors-grey-alpha-0',
+ '--color-neutral-stroke-transparent-disabled-rest': '--colors-grey-alpha-0',
+ '--color-neutral-stroke-transparent-interactive-rest': '--colors-grey-alpha-0',
'--color-status-danger-background-1-rest': '--colors-shared-red-tint-60',
'--color-status-danger-background-3-hover': '--colors-shared-red-shade-10',
'--color-status-danger-background-3-pressed': '--colors-shared-red-shade-20',
@@ -383,7 +390,7 @@ export const themes = {
'--color-status-success-background-3-rest': '--colors-shared-green-default',
'--color-status-success-foreground-1-rest': '--colors-shared-green-shade-10',
'--color-status-success-foreground-3-rest': '--colors-shared-green-default',
- '--color-status-success-stroke-1-rest': '--colors-shared-green-tint-40',
+ '--color-status-success-stroke-1-rest': '--colors-shared-green-tint-30',
'--color-status-success-stroke-2-rest': '--colors-shared-green-default',
'--color-status-warning-background-1-rest': '--colors-shared-yellow-tint-60',
'--color-status-warning-background-3-rest': '--colors-shared-yellow-default',
@@ -391,14 +398,14 @@ export const themes = {
'--color-status-warning-foreground-2-rest': '--colors-shared-yellow-shade-30',
'--color-status-warning-stroke-1-rest': '--colors-shared-yellow-tint-40',
'--color-status-warning-stroke-2-rest': '--colors-shared-yellow-default',
- '--shadow-ambient': '--colors-grey-alpha-grey-30-alpha-15',
+ '--shadow-ambient': '--colors-grey-alpha-grey-30-15',
'--shadow-ambient-brand': '--colors-brand-primary-80',
- '--shadow-ambient-darker': '--colors-grey-alpha-grey-30-alpha-20',
- '--shadow-ambient-lighter': '--colors-grey-alpha-grey-30-alpha-5',
- '--shadow-key': '--colors-grey-alpha-grey-30-alpha-15',
+ '--shadow-ambient-darker': '--colors-grey-alpha-grey-30-20',
+ '--shadow-ambient-lighter': '--colors-grey-alpha-grey-30-5',
+ '--shadow-key': '--colors-grey-alpha-grey-30-15',
'--shadow-key-brand': '--colors-brand-primary-80',
- '--shadow-key-darker': '--colors-grey-alpha-grey-30-alpha-25',
- '--shadow-key-lighter': '--colors-grey-alpha-grey-30-alpha-10',
+ '--shadow-key-darker': '--colors-grey-alpha-grey-30-25',
+ '--shadow-key-lighter': '--colors-grey-alpha-grey-30-10',
'--border-radius-none': '--number-values-0',
'--border-radius-xxs-nudge': '--number-values-1',
'--border-radius-xxs': '--number-values-2',
@@ -497,7 +504,7 @@ export const themes = {
'--color-brand-background-compound-pressed': '--colors-brand-primary-80',
'--color-brand-background-compound-rest': '--colors-brand-primary-120',
'--color-brand-background-glow-a': '--colors-brand-primary-40',
- '--color-brand-background-glow-b': '--colors-grey-alpha-grey-14-alpha-0',
+ '--color-brand-background-glow-b': '--colors-grey-alpha-grey-14-0',
'--color-brand-background-inverted-hover': '--colors-brand-primary-160',
'--color-brand-background-inverted-pressed': '--colors-brand-primary-140',
'--color-brand-background-inverted-rest': '--colors-grey-white',
@@ -571,45 +578,45 @@ export const themes = {
'--color-neutral-background-5a-selected': '--colors-grey-30',
'--color-neutral-background-6-rest': '--colors-grey-20',
'--color-neutral-background-6a-rest': '--colors-grey-36',
- '--color-neutral-background-alpha-1-rest': '--colors-grey-alpha-grey-2-alpha-90',
- '--color-neutral-background-alpha-2-rest': '--colors-grey-alpha-grey-2-alpha-50',
- '--color-neutral-background-alpha-3-rest': '--colors-grey-alpha-grey-2-alpha-25',
- '--color-neutral-background-alpha-4-rest': '--colors-grey-alpha-grey-30-alpha-5',
- '--color-neutral-background-canvas-rest': '--colors-grey-4',
+ '--color-neutral-background-alpha-1-rest': '--colors-grey-alpha-grey-2-90',
+ '--color-neutral-background-alpha-2-rest': '--colors-grey-alpha-grey-2-50',
+ '--color-neutral-background-alpha-3-rest': '--colors-grey-alpha-grey-2-25',
+ '--color-neutral-background-alpha-4-rest': '--colors-grey-alpha-grey-30-5',
+ '--color-neutral-background-canvas-rest': '--colors-grey-2',
'--color-neutral-background-disabled-rest': '--colors-grey-12',
'--color-neutral-background-gradient-color-a': '--colors-grey-2',
'--color-neutral-background-gradient-color-b': '--colors-grey-6',
'--color-neutral-background-inverted-rest': '--colors-grey-white',
- '--color-neutral-background-inverted-disabled-rest': '--colors-grey-alpha-white-alpha-10',
- '--color-neutral-background-overlay-rest': '--colors-grey-alpha-grey-2-alpha-50',
- '--color-neutral-background-scrollbar-overlay-rest': '--colors-grey-alpha-grey-50-alpha-50',
+ '--color-neutral-background-inverted-disabled-rest': '--colors-grey-alpha-white-10',
+ '--color-neutral-background-overlay-rest': '--colors-grey-alpha-grey-2-50',
+ '--color-neutral-background-scrollbar-overlay-rest': '--colors-grey-alpha-grey-50-50',
'--color-neutral-background-static-dark-rest': '--colors-grey-10',
'--color-neutral-background-static-light-rest': '--colors-grey-white',
'--color-neutral-background-stencil-1-rest': '--colors-grey-18',
'--color-neutral-background-stencil-2-rest': '--colors-grey-14',
- '--color-neutral-background-stencil-3-rest': '--colors-grey-alpha-grey-30-alpha-10',
+ '--color-neutral-background-stencil-3-rest': '--colors-grey-alpha-grey-30-10',
'--color-neutral-background-subtle-hover': '--colors-grey-16',
'--color-neutral-background-subtle-pressed': '--colors-grey-14',
- '--color-neutral-background-subtle-rest': '--colors-grey-alpha-alpha-0',
+ '--color-neutral-background-subtle-rest': '--colors-grey-alpha-0',
'--color-neutral-background-subtle-selected': '--colors-grey-12',
- '--color-neutral-background-subtle-inverted-hover': '--colors-grey-alpha-grey-2-alpha-10',
- '--color-neutral-background-subtle-inverted-pressed': '--colors-grey-alpha-grey-2-alpha-30',
- '--color-neutral-background-subtle-inverted-rest': '--colors-grey-alpha-alpha-0',
- '--color-neutral-background-subtle-inverted-selected': '--colors-grey-alpha-grey-2-alpha-20',
- '--color-neutral-background-subtle-light-alpha-hover': '--colors-grey-alpha-grey-14-alpha-80',
- '--color-neutral-background-subtle-light-alpha-pressed': '--colors-grey-alpha-grey-14-alpha-50',
- '--color-neutral-background-subtle-light-alpha-selected': '--colors-grey-alpha-alpha-0',
- '--color-neutral-background-transparent-hover': '--colors-grey-alpha-alpha-0',
- '--color-neutral-background-transparent-pressed': '--colors-grey-alpha-alpha-0',
- '--color-neutral-background-transparent-rest': '--colors-grey-alpha-alpha-0',
- '--color-neutral-background-transparent-selected': '--colors-grey-alpha-alpha-0',
+ '--color-neutral-background-subtle-inverted-hover': '--colors-grey-alpha-grey-2-10',
+ '--color-neutral-background-subtle-inverted-pressed': '--colors-grey-alpha-grey-2-30',
+ '--color-neutral-background-subtle-inverted-rest': '--colors-grey-alpha-0',
+ '--color-neutral-background-subtle-inverted-selected': '--colors-grey-alpha-grey-2-20',
+ '--color-neutral-background-subtle-light-alpha-hover': '--colors-grey-alpha-grey-14-80',
+ '--color-neutral-background-subtle-light-alpha-pressed': '--colors-grey-alpha-grey-14-50',
+ '--color-neutral-background-subtle-light-alpha-selected': '--colors-grey-alpha-0',
+ '--color-neutral-background-transparent-hover': '--colors-grey-alpha-0',
+ '--color-neutral-background-transparent-pressed': '--colors-grey-alpha-0',
+ '--color-neutral-background-transparent-rest': '--colors-grey-alpha-0',
+ '--color-neutral-background-transparent-selected': '--colors-grey-alpha-0',
'--color-neutral-foreground-1-hover': '--colors-grey-white',
'--color-neutral-foreground-1-pressed': '--colors-grey-white',
'--color-neutral-foreground-1-rest': '--colors-grey-white',
'--color-neutral-foreground-1-selected': '--colors-grey-white',
'--color-neutral-foreground-2-hover': '--colors-grey-white',
'--color-neutral-foreground-2-pressed': '--colors-grey-white',
- '--color-neutral-foreground-2-rest': '--colors-grey-84',
+ '--color-neutral-foreground-2-rest': '--colors-grey-alpha-white-70',
'--color-neutral-foreground-2-selected': '--colors-grey-white',
'--color-neutral-foreground-2-brand-hover': '--colors-brand-primary-140',
'--color-neutral-foreground-2-brand-pressed': '--colors-brand-primary-130',
@@ -620,7 +627,7 @@ export const themes = {
'--color-neutral-foreground-2-link-selected': '--colors-grey-white',
'--color-neutral-foreground-3-hover': '--colors-grey-84',
'--color-neutral-foreground-3-pressed': '--colors-grey-84',
- '--color-neutral-foreground-3-rest': '--colors-grey-68',
+ '--color-neutral-foreground-3-rest': '--colors-grey-alpha-white-50',
'--color-neutral-foreground-3-selected': '--colors-grey-84',
'--color-neutral-foreground-3-brand-hover': '--colors-brand-primary-100',
'--color-neutral-foreground-3-brand-pressed': '--colors-brand-primary-90',
@@ -632,7 +639,7 @@ export const themes = {
'--color-neutral-foreground-inverted-1-rest': '--colors-grey-14',
'--color-neutral-foreground-inverted-1-selected': '--colors-grey-14',
'--color-neutral-foreground-inverted-2-rest': '--colors-grey-20',
- '--color-neutral-foreground-inverted-disabled-rest': '--colors-grey-alpha-white-alpha-50',
+ '--color-neutral-foreground-inverted-disabled-rest': '--colors-grey-alpha-white-50',
'--color-neutral-foreground-inverted-link-hover': '--colors-grey-white',
'--color-neutral-foreground-inverted-link-pressed': '--colors-grey-white',
'--color-neutral-foreground-inverted-link-rest': '--colors-grey-white',
@@ -650,22 +657,22 @@ export const themes = {
'--color-neutral-stroke-accessible-pressed': '--colors-grey-70',
'--color-neutral-stroke-accessible-rest': '--colors-grey-68',
'--color-neutral-stroke-accessible-selected': '--colors-brand-primary-140',
- '--color-neutral-stroke-alpha-rest': '--colors-grey-alpha-white-alpha-10',
+ '--color-neutral-stroke-alpha-rest': '--colors-grey-alpha-white-10',
'--color-neutral-stroke-disabled-rest': '--colors-grey-26',
- '--color-neutral-stroke-disabled-inverted-rest': '--colors-grey-alpha-white-alpha-50',
+ '--color-neutral-stroke-disabled-inverted-rest': '--colors-grey-alpha-white-50',
'--color-neutral-stroke-focus-1-rest': '--colors-grey-black',
'--color-neutral-stroke-focus-2-rest': '--colors-grey-white',
'--color-neutral-stroke-gradient-color-a': '--colors-grey-16',
- '--color-neutral-stroke-gradient-color-b': '--colors-grey-alpha-alpha-0',
+ '--color-neutral-stroke-gradient-color-b': '--colors-grey-alpha-0',
'--color-neutral-stroke-on-brand-1-rest': '--colors-grey-16',
'--color-neutral-stroke-on-brand-2-hover': '--colors-grey-white',
'--color-neutral-stroke-on-brand-2-pressed': '--colors-grey-white',
'--color-neutral-stroke-on-brand-2-rest': '--colors-grey-white',
'--color-neutral-stroke-on-brand-2-selected': '--colors-grey-white',
'--color-neutral-stroke-subtle-rest': '--colors-grey-16',
- '--color-neutral-stroke-transparent-rest': '--colors-grey-alpha-alpha-0',
- '--color-neutral-stroke-transparent-disabled-rest': '--colors-grey-alpha-alpha-0',
- '--color-neutral-stroke-transparent-interactive-rest': '--colors-grey-alpha-alpha-0',
+ '--color-neutral-stroke-transparent-rest': '--colors-grey-alpha-0',
+ '--color-neutral-stroke-transparent-disabled-rest': '--colors-grey-alpha-0',
+ '--color-neutral-stroke-transparent-interactive-rest': '--colors-grey-alpha-0',
'--color-status-danger-background-1-rest': '--colors-shared-red-shade-40',
'--color-status-danger-background-3-hover': '--colors-shared-red-shade-10',
'--color-status-danger-background-3-pressed': '--colors-shared-red-shade-20',
@@ -688,7 +695,7 @@ export const themes = {
'--color-status-success-background-3-rest': '--colors-shared-green-default',
'--color-status-success-foreground-1-rest': '--colors-shared-green-tint-30',
'--color-status-success-foreground-3-rest': '--colors-shared-green-tint-40',
- '--color-status-success-stroke-1-rest': '--colors-shared-green-default',
+ '--color-status-success-stroke-1-rest': '--colors-shared-green-tint-30',
'--color-status-success-stroke-2-rest': '--colors-shared-green-tint-40',
'--color-status-warning-background-1-rest': '--colors-shared-yellow-shade-40',
'--color-status-warning-background-3-rest': '--colors-shared-yellow-default',
@@ -696,14 +703,14 @@ export const themes = {
'--color-status-warning-foreground-2-rest': '--colors-shared-yellow-tint-40',
'--color-status-warning-stroke-1-rest': '--colors-shared-yellow-default',
'--color-status-warning-stroke-2-rest': '--colors-shared-yellow-tint-40',
- '--shadow-ambient': '--colors-grey-alpha-grey-2-alpha-30',
+ '--shadow-ambient': '--colors-grey-alpha-grey-2-30',
'--shadow-ambient-brand': '--colors-brand-primary-80',
- '--shadow-ambient-darker': '--colors-grey-alpha-grey-2-alpha-40',
- '--shadow-ambient-lighter': '--colors-grey-alpha-grey-2-alpha-15',
- '--shadow-key': '--colors-grey-alpha-grey-2-alpha-30',
+ '--shadow-ambient-darker': '--colors-grey-alpha-grey-2-40',
+ '--shadow-ambient-lighter': '--colors-grey-alpha-grey-2-15',
+ '--shadow-key': '--colors-grey-alpha-grey-2-30',
'--shadow-key-brand': '--colors-brand-primary-80',
- '--shadow-key-darker': '--colors-grey-alpha-grey-2-alpha-50',
- '--shadow-key-lighter': '--colors-grey-alpha-grey-2-alpha-15',
+ '--shadow-key-darker': '--colors-grey-alpha-grey-2-50',
+ '--shadow-key-lighter': '--colors-grey-alpha-grey-2-15',
'--border-radius-none': '--number-values-0',
'--border-radius-xxs-nudge': '--number-values-1',
'--border-radius-xxs': '--number-values-2',
@@ -789,358 +796,194 @@ export const themes = {
} as const satisfies Record>;
export const typography = {
- web: {
- caption2: css`
- font-size: 11px;
- font-family: Inter, sans-serif;
- line-height: 16px; /* 145.455% */
- font-weight: 400;
- font-style: normal;
- letter-spacing: 0.25px;
+ caption2: css`
+ font-size: 11px;
+ font-family: "Innovator Grotesk", sans-serif;
+ line-height: 16px; /* 145.455% */
+ font-weight: 400;
+ font-style: normal;
+ letter-spacing: 0.24px;
- font-variant-numeric: lining-nums tabular-nums;
- font-feature-settings: 'cv01' on;
- `,
- caption2Strong: css`
- font-size: 11px;
- font-family: Inter, sans-serif;
- line-height: 16px; /* 145.455% */
- font-weight: 500;
- font-style: normal;
- letter-spacing: 0.25px;
-
- font-variant-numeric: lining-nums tabular-nums;
- font-feature-settings: 'cv01' on;
- `,
- caption1: css`
- font-size: 13px;
- font-family: Inter, sans-serif;
- line-height: 18px; /* 138.462% */
- font-weight: 400;
- font-style: normal;
- letter-spacing: 0.15px;
-
- font-variant-numeric: lining-nums tabular-nums;
- font-feature-settings: 'cv01' on;
- `,
- caption1Strong: css`
- font-size: 13px;
- font-family: Inter, sans-serif;
- line-height: 18px; /* 138.462% */
- font-weight: 600;
- font-style: normal;
- letter-spacing: 0.15px;
-
- font-variant-numeric: lining-nums tabular-nums;
- font-feature-settings: 'cv01' on;
- `,
- caption1Stronger: css`
- font-size: 13px;
- font-family: Inter, sans-serif;
- line-height: 18px; /* 138.462% */
- font-weight: 700;
- font-style: normal;
- letter-spacing: 0.15px;
-
- font-variant-numeric: lining-nums tabular-nums;
- font-feature-settings: 'cv01' on;
- `,
- body1: css`
- font-size: 14px;
- font-family: Inter, sans-serif;
- line-height: 20px; /* 142.857% */
- font-weight: 400;
- font-style: normal;
- letter-spacing: 0;
-
- font-variant-numeric: lining-nums tabular-nums;
- font-feature-settings: 'cv01' on;
- `,
- body1Strong: css`
- font-size: 14px;
- font-family: Inter, sans-serif;
- line-height: 20px; /* 142.857% */
- font-weight: 500;
- font-style: normal;
- letter-spacing: 0;
-
- font-variant-numeric: lining-nums tabular-nums;
- font-feature-settings: 'cv01' on;
- `,
- body1Stronger: css`
- font-size: 14px;
- font-family: Inter, sans-serif;
- line-height: 20px; /* 142.857% */
- font-weight: 700;
- font-style: normal;
- letter-spacing: 0;
-
- font-variant-numeric: lining-nums tabular-nums;
- font-feature-settings: 'cv01' on;
- `,
- body2: css`
- font-size: 16px;
- font-family: Inter, sans-serif;
- line-height: 24px; /* 150% */
- font-weight: 400;
- font-style: normal;
- letter-spacing: -0.15px;
-
- font-variant-numeric: lining-nums tabular-nums;
- font-feature-settings: 'cv01' on;
- `,
+ font-variant-numeric: lining-nums tabular-nums slashed-zero;
+ font-feature-settings: 'ss03' on;
+ `,
+ caption2Strong: css`
+ font-size: 11px;
+ font-family: "Innovator Grotesk", sans-serif;
+ line-height: 16px; /* 145.455% */
+ font-weight: 500;
+ font-style: normal;
+ letter-spacing: 0.24px;
- subtitle2: css`
- font-size: 16px;
- font-family: Inter, sans-serif;
- line-height: 24px; /* 150% */
- font-weight: 500;
- font-style: normal;
- letter-spacing: -0.15px;
+ font-variant-numeric: lining-nums tabular-nums slashed-zero;
+ font-feature-settings: 'ss03' on;
+ `,
+ caption1: css`
+ font-size: 13px;
+ font-family: "Innovator Grotesk", sans-serif;
+ line-height: 18px; /* 138.462% */
+ font-weight: 400;
+ font-style: normal;
+ letter-spacing: 0.2px;
- font-variant-numeric: lining-nums tabular-nums;
- font-feature-settings: 'cv01' on;
- `,
- subtitle2Stronger: css`
- font-size: 16px;
- font-family: Inter, sans-serif;
- line-height: 24px; /* 150% */
- font-weight: 700;
- font-style: normal;
- letter-spacing: -0.15px;
+ font-variant-numeric: lining-nums tabular-nums slashed-zero;
+ font-feature-settings: 'ss03' on;
+ `,
+ caption1Strong: css`
+ font-size: 13px;
+ font-family: "Innovator Grotesk", sans-serif;
+ line-height: 18px; /* 138.462% */
+ font-weight: 500;
+ font-style: normal;
+ letter-spacing: 0.2px;
- font-variant-numeric: lining-nums tabular-nums;
- font-feature-settings: 'cv01' on;
- `,
- subtitle1: css`
- font-size: 20px;
- font-family: Inter, sans-serif;
- line-height: 25px; /* 125% */
- font-weight: 500;
- font-style: normal;
- letter-spacing: -0.25px;
+ font-variant-numeric: lining-nums tabular-nums slashed-zero;
+ font-feature-settings: 'ss03' on;
+ `,
+ caption1Stronger: css`
+ font-size: 13px;
+ font-family: "Innovator Grotesk", sans-serif;
+ line-height: 18px; /* 138.462% */
+ font-weight: 600;
+ font-style: normal;
+ letter-spacing: 0.2px;
- font-variant-numeric: lining-nums tabular-nums;
- font-feature-settings: 'cv01' on;
- `,
- title3: css`
- font-size: 24px;
- font-family: Inter, sans-serif;
- line-height: 30px; /* 125% */
- font-weight: 500;
- font-style: normal;
- letter-spacing: -0.15px;
+ font-variant-numeric: lining-nums tabular-nums slashed-zero;
+ font-feature-settings: 'ss03' on;
+ `,
+ body1: css`
+ font-size: 14px;
+ font-family: "Innovator Grotesk", sans-serif;
+ line-height: 20px; /* 142.857% */
+ font-weight: 400;
+ font-style: normal;
+ letter-spacing: 0.16px;
- font-variant-numeric: lining-nums tabular-nums;
- font-feature-settings: 'cv01' on;
- `,
- title2: css`
- font-size: 28px;
- font-family: Inter, sans-serif;
- line-height: 34px; /* 121.429% */
- font-weight: 600;
- font-style: normal;
- letter-spacing: 0.4px;
+ font-variant-numeric: lining-nums tabular-nums slashed-zero;
+ font-feature-settings: 'ss03' on;
+ `,
+ body1Strong: css`
+ font-size: 14px;
+ font-family: "Innovator Grotesk", sans-serif;
+ line-height: 20px; /* 142.857% */
+ font-weight: 500;
+ font-style: normal;
+ letter-spacing: 0.16px;
- font-variant-numeric: lining-nums tabular-nums;
- font-feature-settings: 'cv01' on;
- `,
- title1: css`
- font-size: 32px;
- font-family: Inter, sans-serif;
- line-height: 38px; /* 118.75% */
- font-weight: 600;
- font-style: normal;
- letter-spacing: 0.4px;
+ font-variant-numeric: lining-nums tabular-nums slashed-zero;
+ font-feature-settings: 'ss03' on;
+ `,
+ body1Stronger: css`
+ font-size: 14px;
+ font-family: "Innovator Grotesk", sans-serif;
+ line-height: 20px; /* 142.857% */
+ font-weight: 600;
+ font-style: normal;
+ letter-spacing: 0.16px;
- font-variant-numeric: lining-nums tabular-nums;
- font-feature-settings: 'cv01' on;
- `,
- largeTitle: css`
- font-size: 40px;
- font-family: Inter, sans-serif;
- line-height: 48px; /* 120% */
- font-weight: 600;
- font-style: normal;
- letter-spacing: 0.4px;
+ font-variant-numeric: lining-nums tabular-nums slashed-zero;
+ font-feature-settings: 'ss03' on;
+ `,
+ body2: css`
+ font-size: 16px;
+ font-family: "Innovator Grotesk", sans-serif;
+ line-height: 24px; /* 150% */
+ font-weight: 400;
+ font-style: normal;
- font-variant-numeric: lining-nums tabular-nums;
- font-feature-settings: 'cv01' on;
- `,
- display: css`
- font-size: 68px;
- font-family: Inter, sans-serif;
- line-height: 82px; /* 120.588% */
- font-weight: 600;
- font-style: normal;
- letter-spacing: 0.25px;
+ font-variant-numeric: lining-nums tabular-nums slashed-zero;
+ font-feature-settings: 'ss03' on;
+ `,
+ body2Strong: css`
+ font-size: 16px;
+ font-family: "Innovator Grotesk", sans-serif;
+ line-height: 24px; /* 150% */
+ font-weight: 500;
+ font-style: normal;
- font-variant-numeric: lining-nums tabular-nums;
- font-feature-settings: 'cv01' on;
- `,
- },
- decorative: {
- caption2: css`
- font-size: 11px;
- font-family: Borna, sans-serif;
- line-height: 14px; /* 127.273% */
- font-weight: 400;
- font-style: normal;
- letter-spacing: 0.25px;
- `,
- caption2Strong: css`
- font-size: 11px;
- font-family: Borna, sans-serif;
- line-height: 16px; /* 145.455% */
- font-weight: 500;
- font-style: normal;
- letter-spacing: 0.25px;
- `,
- caption1: css`
- font-size: 13px;
- font-family: Borna, sans-serif;
- line-height: 18px; /* 138.462% */
- font-weight: 400;
- font-style: normal;
- letter-spacing: 0.25px;
- `,
- caption1Strong: css`
- font-size: 13px;
- font-family: Borna, sans-serif;
- line-height: 18px; /* 138.462% */
- font-weight: 500;
- font-style: normal;
- letter-spacing: 0.25px;
- `,
- caption1Stronger: css`
- font-size: 13px;
- font-family: Borna, sans-serif;
- line-height: 18px; /* 138.462% */
- font-weight: 400;
- font-style: normal;
- letter-spacing: 0.25px;
- `,
- body1: css`
- font-size: 14px;
- font-family: Borna, sans-serif;
- line-height: 20px; /* 142.857% */
- font-weight: 400;
- font-style: normal;
- letter-spacing: 0.25px;
- `,
- body1Strong: css`
- font-size: 14px;
- font-family: Borna, sans-serif;
- line-height: 20px; /* 142.857% */
- font-weight: 500;
- font-style: normal;
- letter-spacing: 0.25px;
- `,
- body1Stronger: css`
- font-size: 14px;
- font-family: Borna, sans-serif;
- line-height: 20px; /* 142.857% */
- font-weight: 600;
- font-style: normal;
- letter-spacing: 0.25px;
- `,
- body2: css`
- font-size: 16px;
- font-family: Borna, sans-serif;
- line-height: 22px; /* 137.5% */
- font-weight: 400;
- font-style: normal;
- letter-spacing: 0.25px;
- `,
- body2Strong: css`
- font-size: 16px;
- font-family: Borna, sans-serif;
- line-height: 22px; /* 137.5% */
- font-weight: 500;
- font-style: normal;
- letter-spacing: 0.25px;
- `,
- subtitle2: css`
- font-size: 16px;
- font-family: Borna, sans-serif;
- line-height: 20px; /* 125% */
- font-weight: 500;
- font-style: normal;
- letter-spacing: 0.25px;
+ font-variant-numeric: lining-nums tabular-nums slashed-zero;
+ font-feature-settings: 'ss03' on;
+ `,
+ subtitle2: css`
+ font-size: 16px;
+ font-family: "Innovator Grotesk", sans-serif;
+ line-height: 24px; /* 150% */
+ font-weight: 500;
+ font-style: normal;
- font-feature-settings: 'ss01' on;
- `,
- subtitle2Stronger: css`
- font-size: 16px;
- font-family: Borna, sans-serif;
- line-height: 20px; /* 125% */
- font-weight: 600;
- font-style: normal;
- letter-spacing: 0.25px;
+ font-variant-numeric: lining-nums tabular-nums slashed-zero;
+ font-feature-settings: 'ss03' on;
+ `,
+ subtitle2Stronger: css`
+ font-size: 16px;
+ font-family: "Innovator Grotesk", sans-serif;
+ line-height: 24px; /* 150% */
+ font-weight: 600;
+ font-style: normal;
- font-feature-settings: 'ss01' on;
- `,
- subtitle1: css`
- font-size: 20px;
- font-family: Borna, sans-serif;
- line-height: 24px; /* 120% */
- font-weight: 500;
- font-style: normal;
- letter-spacing: 0.15px;
+ font-variant-numeric: lining-nums tabular-nums slashed-zero;
+ font-feature-settings: 'ss03' on;
+ `,
+ subtitle1: css`
+ font-size: 20px;
+ font-family: "Innovator Grotesk", sans-serif;
+ line-height: 25px; /* 125% */
+ font-weight: 500;
+ font-style: normal;
- font-feature-settings: 'ss01' on;
- `,
- title3: css`
- font-size: 24px;
- font-family: Borna, sans-serif;
- line-height: 30px; /* 125% */
- font-weight: 500;
- font-style: normal;
- letter-spacing: 0;
+ font-variant-numeric: lining-nums tabular-nums slashed-zero;
+ font-feature-settings: 'ss03' on;
+ `,
+ title3: css`
+ font-size: 24px;
+ font-family: "Innovator Grotesk", sans-serif;
+ line-height: 30px; /* 125% */
+ font-weight: 500;
+ font-style: normal;
- font-feature-settings: 'ss01' on;
- `,
- title2: css`
- font-size: 28px;
- font-family: Borna, sans-serif;
- line-height: 34px; /* 121.429% */
- font-weight: 500;
- font-style: normal;
- letter-spacing: 0;
+ font-variant-numeric: lining-nums tabular-nums slashed-zero;
+ font-feature-settings: 'ss03' on;
+ `,
+ title2: css`
+ font-size: 28px;
+ font-family: "Innovator Grotesk", sans-serif;
+ line-height: 34px; /* 121.429% */
+ font-weight: 500;
+ font-style: normal;
- font-feature-settings: 'ss01' on;
- `,
- title1: css`
- font-size: 32px;
- font-family: Borna, sans-serif;
- line-height: 38px; /* 118.75% */
- font-weight: 500;
- font-style: normal;
- letter-spacing: 0;
+ font-variant-numeric: lining-nums tabular-nums slashed-zero;
+ font-feature-settings: 'ss03' on;
+ `,
+ title1: css`
+ font-size: 32px;
+ font-family: "Innovator Grotesk", sans-serif;
+ line-height: 38px; /* 118.75% */
+ font-weight: 500;
+ font-style: normal;
- font-feature-settings: 'ss01' on;
- `,
- largeTitle: css`
- font-size: 40px;
- font-family: Borna, sans-serif;
- line-height: 44px; /* 110% */
- font-weight: 500;
- font-style: normal;
- letter-spacing: 0;
+ font-variant-numeric: lining-nums tabular-nums slashed-zero;
+ font-feature-settings: 'ss03' on;
+ `,
+ largeTitle: css`
+ font-size: 40px;
+ font-family: "Innovator Grotesk", sans-serif;
+ line-height: 48px; /* 120% */
+ font-weight: 500;
+ font-style: normal;
- font-feature-settings: 'ss01' on;
- `,
- display: css`
- font-size: 68px;
- font-family: Borna, sans-serif;
- line-height: 80px; /* 117.647% */
- font-weight: 500;
- font-style: normal;
- letter-spacing: 0;
+ font-variant-numeric: lining-nums tabular-nums slashed-zero;
+ font-feature-settings: 'ss03' on;
+ `,
+ display: css`
+ font-size: 68px;
+ font-family: "Innovator Grotesk", sans-serif;
+ line-height: 82px; /* 120.588% */
+ font-weight: 500;
+ font-style: normal;
- font-feature-settings: 'ss01' on;
- `,
- },
+ font-variant-numeric: lining-nums tabular-nums slashed-zero;
+ font-feature-settings: 'ss03' on;
+ `,
};
export const backgroundFilters = {