1425 lines
56 KiB
CSS
1425 lines
56 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* Make sure Tailwind scans stories and .storybook files */
|
|
@source "../stories/**/*";
|
|
@source "../app/**/*";
|
|
@source "../.storybook/**/*";
|
|
@source "./**/*";
|
|
|
|
/* Hide scrollbar utility */
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none; /* Safari and Chrome */
|
|
}
|
|
|
|
/* Design system scrollbar (Figma node 20612-36521): dark track + thumb with states */
|
|
.scrollbar-design {
|
|
scrollbar-width: thin; /* Firefox: narrow scrollbar */
|
|
scrollbar-color: var(--color-gray-500) var(--color-gray-700);
|
|
}
|
|
.scrollbar-design::-webkit-scrollbar {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
.scrollbar-design::-webkit-scrollbar-track {
|
|
background: var(--color-gray-700);
|
|
}
|
|
.scrollbar-design::-webkit-scrollbar-thumb {
|
|
background: var(--color-gray-500);
|
|
border-radius: 4px;
|
|
border: 4px solid var(--color-gray-700); /* visual padding: thumb appears 8px within 16px track */
|
|
background-clip: padding-box;
|
|
}
|
|
.scrollbar-design::-webkit-scrollbar-thumb:hover {
|
|
background: var(--color-gray-400);
|
|
border-width: 2px; /* hover: thumb expands to 12px */
|
|
}
|
|
.scrollbar-design::-webkit-scrollbar-thumb:active {
|
|
background: var(--color-gray-600);
|
|
border-width: 2px;
|
|
}
|
|
.scrollbar-design::-webkit-scrollbar-corner {
|
|
background: var(--color-gray-700);
|
|
}
|
|
|
|
/*
|
|
* Must live in this file (same sheet as `@import "tailwindcss"`). Rules in
|
|
* `globals.css` after that import never reach the browser.
|
|
* Parked above the viewport until focused so it does not add header offset.
|
|
*/
|
|
.skip-to-content {
|
|
position: absolute;
|
|
left: var(--space-400);
|
|
top: var(--space-400);
|
|
z-index: 100;
|
|
padding: var(--space-300) var(--space-400);
|
|
border-radius: var(--radius-full);
|
|
background-color: var(--color-surface-invert-primary);
|
|
color: var(--color-content-invert-primary);
|
|
text-decoration: none;
|
|
outline: none;
|
|
cursor: pointer;
|
|
box-shadow: var(--shadow-focus-default);
|
|
transform: translateY(-200%);
|
|
}
|
|
.skip-to-content:focus,
|
|
.skip-to-content:focus-visible {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
@theme inline {
|
|
/* Custom breakpoints */
|
|
--breakpoint-xsm: 429px;
|
|
--breakpoint-sm: 430px;
|
|
--breakpoint-sm2: 440px;
|
|
--breakpoint-smd: 530px;
|
|
--breakpoint-md: 640px;
|
|
--breakpoint-xmd: 768px;
|
|
--breakpoint-lg: 1024px;
|
|
--breakpoint-lg2: 1150px;
|
|
--breakpoint-xl: 1440px;
|
|
|
|
/* Reset Tailwind color defaults to avoid collisions */
|
|
--color-*: initial;
|
|
|
|
/* Font families */
|
|
--font-sans:
|
|
var(--font-inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI",
|
|
Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
--font-display:
|
|
var(--font-bricolage-grotesque), ui-sans-serif, system-ui, -apple-system,
|
|
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
|
|
/* Typography weight tokens */
|
|
--typography-thin: 100;
|
|
--typography-extralight: 200;
|
|
--typography-light: 300;
|
|
--typography-regular: 400;
|
|
--typography-medium: 500;
|
|
--typography-semibold: 600;
|
|
--typography-bold: 700;
|
|
--typography-extrabold: 800;
|
|
--typography-black: 900;
|
|
|
|
/* Space, radius, sizing, border, and icon — one name per Figma variable.
|
|
Scale/022 stays because Spacing has no 22px step. Scale/072 and Scale/104
|
|
back Typography/Line Height/1800 and /2600. */
|
|
--space-0: 0px;
|
|
--space-025: 1px;
|
|
--space-050: 2px;
|
|
--space-100: 4px;
|
|
--space-150: 6px;
|
|
--space-200: 8px;
|
|
--space-250: 10px;
|
|
--space-300: 12px;
|
|
--space-400: 16px;
|
|
--space-500: 20px;
|
|
--space-600: 24px;
|
|
--space-800: 32px;
|
|
--space-1000: 40px;
|
|
--space-1200: 48px;
|
|
--space-1400: 56px;
|
|
--space-1500: 60px;
|
|
--space-1800: 64px;
|
|
--space-2100: 76px;
|
|
--space-2400: 96px;
|
|
--space-3000: 120px;
|
|
--space-4000: 160px;
|
|
--space-6500: 260px;
|
|
|
|
--space-negative-100: -4px;
|
|
--space-negative-200: -8px;
|
|
--space-negative-300: -12px;
|
|
--space-negative-400: -16px;
|
|
--space-negative-600: -24px;
|
|
|
|
--radius-0: 0px;
|
|
--radius-100: 4px;
|
|
--radius-200: 8px;
|
|
--radius-300: 12px;
|
|
--radius-400: 16px;
|
|
--radius-500: 24px;
|
|
--radius-full: 9999px;
|
|
|
|
--sizing-200: 8px;
|
|
--sizing-250: 10px;
|
|
--sizing-300: 12px;
|
|
--sizing-350: 14px;
|
|
--sizing-400: 16px;
|
|
--sizing-450: 18px;
|
|
--sizing-500: 20px;
|
|
--sizing-600: 24px;
|
|
--sizing-700: 28px;
|
|
--sizing-800: 32px;
|
|
--sizing-900: 36px;
|
|
--sizing-1000: 40px;
|
|
--sizing-1100: 44px;
|
|
--sizing-1200: 48px;
|
|
--sizing-1300: 52px;
|
|
--sizing-1400: 56px;
|
|
--sizing-1500: 60px;
|
|
--sizing-1600: 64px;
|
|
--sizing-2400: 96px;
|
|
--sizing-3000: 120px;
|
|
--sizing-6500: 260px;
|
|
|
|
--border-x-small: 1px;
|
|
--border-small: 2px;
|
|
--border-medium: 4px;
|
|
--border-large: 8px;
|
|
|
|
--icon-xsmall: 12px;
|
|
--icon-small: 16px;
|
|
--icon-medium: 24px;
|
|
--icon-large: 32px;
|
|
--icon-xlarge: 40px;
|
|
|
|
--scale-022: 22px;
|
|
--scale-072: 72px;
|
|
--scale-104: 104px;
|
|
|
|
--typography-line-height-300: 12px;
|
|
--typography-line-height-350: 14px;
|
|
--typography-line-height-400: 16px;
|
|
--typography-line-height-450: 18px;
|
|
--typography-line-height-500: 20px;
|
|
--typography-line-height-550: var(--scale-022);
|
|
--typography-line-height-600: 24px;
|
|
--typography-line-height-700: 28px;
|
|
--typography-line-height-800: 32px;
|
|
--typography-line-height-900: 36px;
|
|
--typography-line-height-1000: 40px;
|
|
--typography-line-height-1100: 44px;
|
|
--typography-line-height-1200: 48px;
|
|
--typography-line-height-1300: 52px;
|
|
--typography-line-height-1400: 56px;
|
|
--typography-line-height-1800: var(--scale-072);
|
|
--typography-line-height-2600: var(--scale-104);
|
|
|
|
/* Grays & alpha */
|
|
--color-gray-000: #ffffff;
|
|
--color-gray-050: #f6f6f6;
|
|
--color-gray-100: #e5e5e5;
|
|
--color-gray-200: #d2d2d2;
|
|
--color-gray-300: #b4b4b4;
|
|
--color-gray-400: #8f8f8f;
|
|
--color-gray-500: #666666;
|
|
--color-gray-600: #464646;
|
|
--color-gray-700: #2d2d2d;
|
|
--color-gray-800: #1f1f1f;
|
|
--color-gray-900: #141414;
|
|
--color-gray-1000: #000000;
|
|
|
|
--color-opacity-000: #00000000;
|
|
--color-opacity-001: #00000003;
|
|
--color-opacity-050: #0000000d;
|
|
--color-opacity-100: #0000001a;
|
|
--color-opacity-200: #00000033;
|
|
--color-opacity-300: #0000004d;
|
|
--color-opacity-400: #00000066;
|
|
--color-opacity-500: #00000080;
|
|
--color-opacity-600: #00000099;
|
|
--color-opacity-700: #000000b2;
|
|
--color-opacity-800: #000000cc;
|
|
--color-opacity-900: #000000e5;
|
|
|
|
/* Kiwi */
|
|
--color-kiwi-kiwi0: #ebfff2;
|
|
--color-kiwi-kiwi50: #c9fedf;
|
|
--color-kiwi-kiwi100: #a8fdcd;
|
|
--color-kiwi-kiwi150: #8cf9bd;
|
|
--color-kiwi-kiwi200: #6ff6ae;
|
|
--color-kiwi-kiwi300: #45ea97;
|
|
--color-kiwi-kiwi400: #29d984;
|
|
--color-kiwi-kiwi500: #16c472;
|
|
--color-kiwi-kiwi600: #0ba960;
|
|
--color-kiwi-kiwi700: #058c4e;
|
|
--color-kiwi-kiwi800: #016c3c;
|
|
--color-kiwi-kiwi900: #004d2b;
|
|
--color-kiwi-kiwi1000: #00331c;
|
|
|
|
/* Lavender */
|
|
--color-lavender-lavender0: #f0ebff;
|
|
--color-lavender-lavender50: #e8defe;
|
|
--color-lavender-lavender100: #e0d1fd;
|
|
--color-lavender-lavender150: #d7c3f9;
|
|
--color-lavender-lavender200: #ceb5f6;
|
|
--color-lavender-lavender300: #bb97ea;
|
|
--color-lavender-lavender400: #a578d9;
|
|
--color-lavender-lavender500: #8d5ac4;
|
|
--color-lavender-lavender600: #743ea9;
|
|
--color-lavender-lavender700: #5a278c;
|
|
--color-lavender-lavender800: #41146c;
|
|
--color-lavender-lavender900: #2b074d;
|
|
--color-lavender-lavender1000: #1a0033;
|
|
|
|
/* Lime */
|
|
--color-lime-lime0: #fbffeb;
|
|
--color-lime-lime50: #f2fec9;
|
|
--color-lime-lime100: #e7fda8;
|
|
--color-lime-lime150: #daf98c;
|
|
--color-lime-lime200: #ccf66f;
|
|
--color-lime-lime300: #b1ea45;
|
|
--color-lime-lime400: #98d929;
|
|
--color-lime-lime500: #80c416;
|
|
--color-lime-lime600: #6aa90b;
|
|
--color-lime-lime700: #548c05;
|
|
--color-lime-lime800: #406c01;
|
|
--color-lime-lime900: #2d4d00;
|
|
--color-lime-lime1000: #1e3300;
|
|
|
|
/* Magenta */
|
|
--color-magenta-magenta0: #ffebf0;
|
|
--color-magenta-magenta50: #fedee7;
|
|
--color-magenta-magenta100: #fdd1dd;
|
|
--color-magenta-magenta150: #f9c3d2;
|
|
--color-magenta-magenta200: #f6b5c7;
|
|
--color-magenta-magenta300: #ea97ad;
|
|
--color-magenta-magenta400: #d97892;
|
|
--color-magenta-magenta500: #c45a76;
|
|
--color-magenta-magenta600: #a93e5b;
|
|
--color-magenta-magenta700: #8c2742;
|
|
--color-magenta-magenta800: #6c142b;
|
|
--color-magenta-magenta900: #4d071a;
|
|
--color-magenta-magenta1000: #33000e;
|
|
|
|
/* Red */
|
|
--color-red-red0: #ffebf1;
|
|
--color-red-red50: #fec9d6;
|
|
--color-red-red100: #fda8b7;
|
|
--color-red-red150: #f98c98;
|
|
--color-red-red200: #f66f78;
|
|
--color-red-red300: #ea4845;
|
|
--color-red-red400: #d93529;
|
|
--color-red-red500: #c42916;
|
|
--color-red-red600: #a9200b;
|
|
--color-red-red700: #8c1905;
|
|
--color-red-red800: #6c1301;
|
|
--color-red-red900: #4d0d00;
|
|
--color-red-red1000: #330800;
|
|
|
|
/* Royal Blue */
|
|
--color-royal-blue-royal-blue0: #ebecff;
|
|
--color-royal-blue-royal-blue50: #c9cdfe;
|
|
--color-royal-blue-royal-blue100: #a8adfd;
|
|
--color-royal-blue-royal-blue150: #8c91f9;
|
|
--color-royal-blue-royal-blue200: #6f74f6;
|
|
--color-royal-blue-royal-blue300: #4548ea;
|
|
--color-royal-blue-royal-blue400: #2b29d9;
|
|
--color-royal-blue-royal-blue500: #1c16c4;
|
|
--color-royal-blue-royal-blue600: #140ba9;
|
|
--color-royal-blue-royal-blue700: #0f058c;
|
|
--color-royal-blue-royal-blue800: #0c016c;
|
|
--color-royal-blue-royal-blue900: #0a004d;
|
|
--color-royal-blue-royal-blue1000: #080033;
|
|
|
|
/* Rust */
|
|
--color-rust-rust0: #ffedeb;
|
|
--color-rust-rust50: #fed8d4;
|
|
--color-rust-rust100: #fdc4bd;
|
|
--color-rust-rust150: #f9b0a6;
|
|
--color-rust-rust200: #f69c8f;
|
|
--color-rust-rust300: #ea7a65;
|
|
--color-rust-rust400: #d96043;
|
|
--color-rust-rust500: #c44e29;
|
|
--color-rust-rust600: #a94417;
|
|
--color-rust-rust700: #8c3d0b;
|
|
--color-rust-rust800: #6c3604;
|
|
--color-rust-rust900: #4d2c01;
|
|
--color-rust-rust1000: #332100;
|
|
|
|
/* Teal */
|
|
--color-teal-teal0: #ebfffc;
|
|
--color-teal-teal50: #c9fef9;
|
|
--color-teal-teal100: #a8fdf8;
|
|
--color-teal-teal150: #8cf9f8;
|
|
--color-teal-teal200: #6ff2f6;
|
|
--color-teal-teal300: #45dcea;
|
|
--color-teal-teal400: #29c3d9;
|
|
--color-teal-teal500: #16a9c4;
|
|
--color-teal-teal600: #0b8ea9;
|
|
--color-teal-teal700: #05728c;
|
|
--color-teal-teal800: #01576c;
|
|
--color-teal-teal900: #003e4d;
|
|
--color-teal-teal1000: #002933;
|
|
|
|
/* Yellow */
|
|
--color-yellow-yellow0: #fffeeb;
|
|
--color-yellow-yellow50: #fefcc9;
|
|
--color-yellow-yellow100: #fdfaa8;
|
|
--color-yellow-yellow150: #f9f58c;
|
|
--color-yellow-yellow200: #f6f06f;
|
|
--color-yellow-yellow300: #eae345;
|
|
--color-yellow-yellow400: #d9d129;
|
|
--color-yellow-yellow500: #c4bb16;
|
|
--color-yellow-yellow600: #a9a20b;
|
|
--color-yellow-yellow700: #8c8505;
|
|
--color-yellow-yellow800: #6c6701;
|
|
--color-yellow-yellow900: #4d4a00;
|
|
--color-yellow-yellow1000: #333000;
|
|
|
|
/* Border */
|
|
--color-border-default-brand-accent: var(--color-yellow-yellow300);
|
|
--color-border-default-brand-primary: var(--color-yellow-yellow100);
|
|
--color-border-default-brand-secondary: var(--color-rust-rust100);
|
|
--color-border-default-primary: var(--color-gray-900);
|
|
--color-border-default-secondary: var(--color-gray-800);
|
|
--color-border-default-tertiary: var(--color-gray-600);
|
|
--color-border-default-control: var(--color-gray-400);
|
|
--color-border-default-utility-info: var(--color-royal-blue-royal-blue300);
|
|
--color-border-default-utility-negative: var(--color-red-red300);
|
|
--color-border-default-utility-positive: var(--color-kiwi-kiwi300);
|
|
--color-border-default-utility-warning: var(--color-yellow-yellow300);
|
|
--color-border-default-negative-primary: var(
|
|
--color-border-default-utility-negative
|
|
);
|
|
--color-border-default-warning-primary: var(
|
|
--color-border-default-utility-warning
|
|
);
|
|
--color-border-default-positive-primary: var(
|
|
--color-border-default-utility-positive
|
|
);
|
|
|
|
--color-border-invert-primary: var(--color-gray-000);
|
|
--color-border-invert-secondary: var(--color-gray-100);
|
|
--color-border-invert-tertiary: var(--color-gray-300);
|
|
--color-border-invert-brand-primary: var(--color-yellow-yellow800);
|
|
--color-border-invert-brand-accent: var(--color-yellow-yellow600);
|
|
--color-border-invert-positive-primary: var(--color-kiwi-kiwi500);
|
|
--color-border-invert-warning-primary: var(--color-yellow-yellow600);
|
|
--color-border-invert-negative-primary: var(--color-red-red300);
|
|
|
|
/* Link — nearest palette step for each off-ramp hex */
|
|
--color-link-primary: var(--color-gray-1000);
|
|
--color-link-primary-hover: var(--color-gray-500);
|
|
--color-link-primary-focus: var(--color-gray-500);
|
|
--color-link-primary-active: var(--color-gray-500);
|
|
--color-link-secondary: var(--color-gray-500);
|
|
--color-link-secondary-hover: var(--color-gray-700);
|
|
--color-link-secondary-focus: var(--color-gray-700);
|
|
--color-link-secondary-active: var(--color-gray-700);
|
|
--color-link-invert-primary: var(--color-gray-000);
|
|
--color-link-invert-primary-hover: var(--color-gray-300);
|
|
--color-link-invert-primary-focus: var(--color-gray-300);
|
|
--color-link-invert-primary-active: var(--color-gray-300);
|
|
--color-link-invert-secondary: var(--color-gray-300);
|
|
--color-link-invert-secondary-hover: var(--color-gray-050);
|
|
--color-link-invert-secondary-focus: var(--color-gray-050);
|
|
--color-link-invert-secondary-active: var(--color-gray-050);
|
|
--color-border-link-focus: var(--color-gray-1000);
|
|
--color-border-link-invert-focus: var(--color-gray-000);
|
|
|
|
/* Content */
|
|
--color-content-default-brand-accent: var(--color-opacity-700);
|
|
--color-content-default-brand-primary: var(--color-yellow-yellow50);
|
|
--color-content-default-brand-secondary: var(--color-yellow-yellow200);
|
|
--color-content-default-brand-lime: var(--color-lime-lime200);
|
|
--color-content-default-brand-rust: var(--color-rust-rust100);
|
|
--color-content-default-brand-royal: var(--color-royal-blue-royal-blue100);
|
|
--color-content-default-brand-red: var(--color-red-red100);
|
|
--color-content-default-brand-teal: var(--color-teal-teal100);
|
|
--color-content-default-brand-kiwi: var(--color-kiwi-kiwi150);
|
|
--color-content-default-brand-lavender: var(--color-lavender-lavender150);
|
|
--color-content-default-primary: var(--color-gray-000);
|
|
--color-content-default-secondary: var(--color-gray-200);
|
|
--color-content-default-tertiary: var(--color-gray-300);
|
|
--color-content-default-utility-info: var(--color-royal-blue-royal-blue500);
|
|
--color-content-default-utility-negative: var(--color-red-red300);
|
|
--color-content-default-utility-positive: var(--color-kiwi-kiwi300);
|
|
--color-content-default-utility-warning: var(--color-yellow-yellow300);
|
|
--color-content-default-negative-primary: var(
|
|
--color-content-default-utility-negative
|
|
);
|
|
--color-content-default-warning-primary: var(
|
|
--color-content-default-utility-warning
|
|
);
|
|
--color-content-default-positive-primary: var(
|
|
--color-content-default-utility-positive
|
|
);
|
|
|
|
--color-content-invert-primary: var(--color-gray-1000);
|
|
--color-content-invert-secondary: var(--color-gray-800);
|
|
--color-content-invert-tertiary: var(--color-gray-700);
|
|
--color-content-invert-brand-primary: var(--color-yellow-yellow900);
|
|
--color-content-invert-brand-secondary: var(--color-yellow-yellow800);
|
|
--color-content-invert-brand-lime: var(--color-lime-lime800);
|
|
--color-content-invert-brand-royal: var(--color-royal-blue-royal-blue400);
|
|
--color-content-invert-brand-teal: var(--color-teal-teal700);
|
|
--color-content-invert-brand-rust: var(--color-rust-rust700);
|
|
--color-content-invert-brand-lavender: var(--color-lavender-lavender700);
|
|
--color-content-invert-brand-kiwi: var(--color-kiwi-kiwi800);
|
|
--color-content-invert-brand-red: var(--color-red-red700);
|
|
--color-content-invert-positive-primary: var(--color-kiwi-kiwi800);
|
|
--color-content-invert-warning-primary: var(--color-yellow-yellow800);
|
|
--color-content-invert-negative-primary: var(--color-red-red500);
|
|
|
|
/* Surface */
|
|
--color-surface-default-brand-red: var(--color-red-red700);
|
|
--color-surface-default-brand-kiwi: var(--color-kiwi-kiwi800);
|
|
--color-surface-default-brand-lavender: var(--color-lavender-lavender700);
|
|
--color-surface-default-brand-lime: var(--color-lime-lime800);
|
|
--color-surface-default-brand-primary: var(--color-yellow-yellow1000);
|
|
--color-surface-default-brand-secondary: var(--color-yellow-yellow800);
|
|
--color-surface-default-brand-royal: var(--color-royal-blue-royal-blue600);
|
|
--color-surface-default-brand-rust: var(--color-rust-rust700);
|
|
--color-surface-default-brand-teal: var(--color-teal-teal700);
|
|
--color-surface-default-positive-secondary: var(--color-kiwi-kiwi1000);
|
|
--color-surface-default-warning-secondary: var(--color-yellow-yellow1000);
|
|
--color-surface-default-negative-secondary: var(--color-red-red1000);
|
|
--color-surface-default-primary: var(--color-gray-1000);
|
|
--color-surface-default-secondary: var(--color-gray-900);
|
|
--color-surface-default-semi-opaque: var(--color-opacity-050);
|
|
--color-surface-default-tertiary: var(--color-gray-800);
|
|
--color-surface-default-transparent: var(--color-opacity-000);
|
|
--color-surface-default-utility-info: var(--color-royal-blue-royal-blue400);
|
|
--color-surface-default-utility-negative: var(--color-red-red400);
|
|
--color-surface-default-utility-positive: var(--color-kiwi-kiwi500);
|
|
--color-surface-default-utility-warning: var(--color-yellow-yellow500);
|
|
--color-surface-default-negative-primary: var(
|
|
--color-surface-default-utility-negative
|
|
);
|
|
--color-surface-default-warning-primary: var(
|
|
--color-surface-default-utility-warning
|
|
);
|
|
--color-surface-default-positive-primary: var(
|
|
--color-surface-default-utility-positive
|
|
);
|
|
|
|
--color-surface-invert-primary: var(--color-gray-000);
|
|
--color-surface-invert-secondary: var(--color-gray-100);
|
|
--color-surface-invert-tertiary: var(--color-gray-200);
|
|
--color-surface-invert-brand-primary: var(--color-yellow-yellow50);
|
|
--color-surface-invert-brand-secondary: var(--color-yellow-yellow200);
|
|
--color-surface-invert-brand-accent: var(--color-yellow-yellow100);
|
|
--color-surface-invert-brand-lime: var(--color-lime-lime100);
|
|
--color-surface-invert-brand-royal: var(--color-royal-blue-royal-blue50);
|
|
--color-surface-invert-brand-teal: var(--color-teal-teal50);
|
|
--color-surface-invert-brand-rust: var(--color-rust-rust100);
|
|
--color-surface-invert-brand-lavender: var(--color-lavender-lavender150);
|
|
--color-surface-invert-brand-kiwi: var(--color-kiwi-kiwi200);
|
|
--color-surface-invert-brand-red: var(--color-red-red100);
|
|
--color-surface-invert-negative-primary: var(--color-red-red200);
|
|
--color-surface-invert-negative-secondary: var(--color-red-red0);
|
|
--color-surface-invert-warning-primary: var(--color-yellow-yellow300);
|
|
--color-surface-invert-warning-secondary: var(--color-yellow-yellow0);
|
|
--color-surface-invert-positive-primary: var(--color-kiwi-kiwi300);
|
|
--color-surface-invert-positive-secondary: var(--color-kiwi-kiwi0);
|
|
|
|
/* Shadow. Focus rings are 2px gray-900 inside 4px white, and the reverse. */
|
|
--shadow-focus-default: 0 0 0 2px var(--color-gray-900), 0 0 0 4px var(--color-gray-000);
|
|
--shadow-focus-invert: 0 0 0 2px var(--color-gray-000), 0 0 0 4px var(--color-gray-900);
|
|
--shadow-subtle: 0px 0px 48px 0px oklch(0% 0 0 / 10%);
|
|
--shadow-minimal-shadow: 0px 0px 8px 0px oklch(0% 0 0 / 15%);
|
|
--shadow-shallow-below: 0px 4px 16px 0px oklch(0% 0 0 / 12%);
|
|
--shadow-default: 0px 4px 6px 0px oklch(0% 0 0 / 9%);
|
|
|
|
/* Typography. Line heights read from Typography/Line Height variables.
|
|
Older class names alias the role-first tokens. */
|
|
--text-display-xxl: 96px;
|
|
--text-display-xxl--line-height: var(--typography-line-height-2600);
|
|
--text-display-xxl--letter-spacing: 0px;
|
|
--text-display-xxl--font-weight: 500;
|
|
|
|
--text-display-xl: 64px;
|
|
--text-display-xl--line-height: var(--typography-line-height-1800);
|
|
--text-display-xl--letter-spacing: 0px;
|
|
--text-display-xl--font-weight: 500;
|
|
|
|
--text-display-l: 52px;
|
|
--text-display-l--line-height: var(--typography-line-height-1400);
|
|
--text-display-l--letter-spacing: 0px;
|
|
--text-display-l--font-weight: 500;
|
|
|
|
--text-display-m: 44px;
|
|
--text-display-m--line-height: var(--typography-line-height-1200);
|
|
--text-display-m--letter-spacing: 0px;
|
|
--text-display-m--font-weight: 500;
|
|
|
|
--text-display-s: 32px;
|
|
--text-display-s--line-height: var(--typography-line-height-900);
|
|
--text-display-s--letter-spacing: 0px;
|
|
--text-display-s--font-weight: 500;
|
|
|
|
--text-display-xs: 24px;
|
|
--text-display-xs--line-height: var(--typography-line-height-800);
|
|
--text-display-xs--letter-spacing: 0px;
|
|
--text-display-xs--font-weight: 500;
|
|
|
|
--text-display-xxs: 18px;
|
|
--text-display-xxs--line-height: var(--typography-line-height-550);
|
|
--text-display-xxs--letter-spacing: 0px;
|
|
--text-display-xxs--font-weight: 500;
|
|
|
|
--text-heading-xxl: 40px;
|
|
--text-heading-xxl--line-height: var(--typography-line-height-1300);
|
|
--text-heading-xxl--letter-spacing: 0px;
|
|
--text-heading-xxl--font-weight: 700;
|
|
|
|
--text-heading-xl: 36px;
|
|
--text-heading-xl--line-height: var(--typography-line-height-1100);
|
|
--text-heading-xl--letter-spacing: 0px;
|
|
--text-heading-xl--font-weight: 700;
|
|
|
|
--text-heading-l: 32px;
|
|
--text-heading-l--line-height: var(--typography-line-height-1000);
|
|
--text-heading-l--letter-spacing: 0px;
|
|
--text-heading-l--font-weight: 700;
|
|
|
|
--text-heading-m: 28px;
|
|
--text-heading-m--line-height: var(--typography-line-height-900);
|
|
--text-heading-m--letter-spacing: 0px;
|
|
--text-heading-m--font-weight: 700;
|
|
|
|
--text-heading-s: 24px;
|
|
--text-heading-s--line-height: var(--typography-line-height-800);
|
|
--text-heading-s--letter-spacing: 0px;
|
|
--text-heading-s--font-weight: 700;
|
|
|
|
--text-heading-xs: 20px;
|
|
--text-heading-xs--line-height: var(--typography-line-height-700);
|
|
--text-heading-xs--letter-spacing: 0px;
|
|
--text-heading-xs--font-weight: 700;
|
|
|
|
--text-heading-xxs: 16px;
|
|
--text-heading-xxs--line-height: var(--typography-line-height-550);
|
|
--text-heading-xxs--letter-spacing: 0px;
|
|
--text-heading-xxs--font-weight: 700;
|
|
|
|
--text-label-xxl: 32px;
|
|
--text-label-xxl--line-height: var(--typography-line-height-900);
|
|
--text-label-xxl--letter-spacing: 0px;
|
|
--text-label-xxl--font-weight: 500;
|
|
|
|
--text-label-xl: 24px;
|
|
--text-label-xl--line-height: var(--typography-line-height-700);
|
|
--text-label-xl--letter-spacing: 0px;
|
|
--text-label-xl--font-weight: 500;
|
|
|
|
--text-label-l: 18px;
|
|
--text-label-l--line-height: var(--typography-line-height-600);
|
|
--text-label-l--letter-spacing: 0px;
|
|
--text-label-l--font-weight: 500;
|
|
|
|
--text-label-m: 16px;
|
|
--text-label-m--line-height: var(--typography-line-height-500);
|
|
--text-label-m--letter-spacing: 0px;
|
|
--text-label-m--font-weight: 500;
|
|
|
|
--text-label-s: 14px;
|
|
--text-label-s--line-height: var(--typography-line-height-450);
|
|
--text-label-s--letter-spacing: 0px;
|
|
--text-label-s--font-weight: 500;
|
|
|
|
--text-label-xs: 12px;
|
|
--text-label-xs--line-height: var(--typography-line-height-350);
|
|
--text-label-xs--letter-spacing: 0px;
|
|
--text-label-xs--font-weight: 500;
|
|
|
|
--text-label-xxs: 10px;
|
|
--text-label-xxs--line-height: var(--typography-line-height-300);
|
|
--text-label-xxs--letter-spacing: 0px;
|
|
--text-label-xxs--font-weight: 500;
|
|
|
|
--text-label-caps-xxs: 10px;
|
|
--text-label-caps-xxs--line-height: var(--typography-line-height-300);
|
|
--text-label-caps-xxs--letter-spacing: 0.2px;
|
|
--text-label-caps-xxs--font-weight: 500;
|
|
|
|
--text-label-caps-xs: 12px;
|
|
--text-label-caps-xs--line-height: var(--typography-line-height-350);
|
|
--text-label-caps-xs--letter-spacing: 0.24px;
|
|
--text-label-caps-xs--font-weight: 500;
|
|
|
|
--text-label-caps-l: 18px;
|
|
--text-label-caps-l--line-height: var(--typography-line-height-600);
|
|
--text-label-caps-l--letter-spacing: 0.36px;
|
|
--text-label-caps-l--font-weight: 500;
|
|
|
|
--text-label-caps-xl: 24px;
|
|
--text-label-caps-xl--line-height: var(--typography-line-height-700);
|
|
--text-label-caps-xl--letter-spacing: 0.48px;
|
|
--text-label-caps-xl--font-weight: 500;
|
|
|
|
--text-label-caps-xxl: 32px;
|
|
--text-label-caps-xxl--line-height: var(--typography-line-height-900);
|
|
--text-label-caps-xxl--letter-spacing: 0.64px;
|
|
--text-label-caps-xxl--font-weight: 500;
|
|
|
|
--text-paragraph-xxl: 32px;
|
|
--text-paragraph-xxl--line-height: var(--typography-line-height-1000);
|
|
--text-paragraph-xxl--letter-spacing: 0px;
|
|
--text-paragraph-xxl--font-weight: 400;
|
|
|
|
--text-paragraph-xl: 24px;
|
|
--text-paragraph-xl--line-height: var(--typography-line-height-800);
|
|
--text-paragraph-xl--letter-spacing: 0px;
|
|
--text-paragraph-xl--font-weight: 400;
|
|
|
|
--text-paragraph-l: 18px;
|
|
--text-paragraph-l--line-height: var(--typography-line-height-600);
|
|
--text-paragraph-l--letter-spacing: 0px;
|
|
--text-paragraph-l--font-weight: 400;
|
|
|
|
--text-paragraph-m: 16px;
|
|
--text-paragraph-m--line-height: var(--typography-line-height-600);
|
|
--text-paragraph-m--letter-spacing: 0px;
|
|
--text-paragraph-m--font-weight: 400;
|
|
|
|
--text-paragraph-s: 14px;
|
|
--text-paragraph-s--line-height: var(--typography-line-height-500);
|
|
--text-paragraph-s--letter-spacing: 0px;
|
|
--text-paragraph-s--font-weight: 400;
|
|
|
|
--text-paragraph-xs: 12px;
|
|
--text-paragraph-xs--line-height: var(--typography-line-height-400);
|
|
--text-paragraph-xs--letter-spacing: 0px;
|
|
--text-paragraph-xs--font-weight: 400;
|
|
|
|
--text-paragraph-xxs: 10px;
|
|
--text-paragraph-xxs--line-height: var(--typography-line-height-350);
|
|
--text-paragraph-xxs--letter-spacing: 0px;
|
|
--text-paragraph-xxs--font-weight: 400;
|
|
|
|
--text-paragraph-strong-xxl: 32px;
|
|
--text-paragraph-strong-xxl--line-height: var(--typography-line-height-1000);
|
|
--text-paragraph-strong-xxl--letter-spacing: 0px;
|
|
--text-paragraph-strong-xxl--font-weight: 700;
|
|
|
|
--text-paragraph-strong-xl: 24px;
|
|
--text-paragraph-strong-xl--line-height: var(--typography-line-height-800);
|
|
--text-paragraph-strong-xl--letter-spacing: 0px;
|
|
--text-paragraph-strong-xl--font-weight: 700;
|
|
|
|
--text-paragraph-strong-l: 18px;
|
|
--text-paragraph-strong-l--line-height: var(--typography-line-height-600);
|
|
--text-paragraph-strong-l--letter-spacing: 0px;
|
|
--text-paragraph-strong-l--font-weight: 700;
|
|
|
|
--text-paragraph-strong-m: 16px;
|
|
--text-paragraph-strong-m--line-height: var(--typography-line-height-600);
|
|
--text-paragraph-strong-m--letter-spacing: 0px;
|
|
--text-paragraph-strong-m--font-weight: 700;
|
|
|
|
--text-paragraph-strong-s: 14px;
|
|
--text-paragraph-strong-s--line-height: var(--typography-line-height-500);
|
|
--text-paragraph-strong-s--letter-spacing: 0px;
|
|
--text-paragraph-strong-s--font-weight: 700;
|
|
|
|
--text-paragraph-strong-xs: 12px;
|
|
--text-paragraph-strong-xs--line-height: var(--typography-line-height-400);
|
|
--text-paragraph-strong-xs--letter-spacing: 0px;
|
|
--text-paragraph-strong-xs--font-weight: 700;
|
|
|
|
--text-paragraph-strong-xxs: 10px;
|
|
--text-paragraph-strong-xxs--line-height: var(--typography-line-height-350);
|
|
--text-paragraph-strong-xxs--letter-spacing: 0px;
|
|
--text-paragraph-strong-xxs--font-weight: 700;
|
|
|
|
--text-paragraph-em-xxs: 10px;
|
|
--text-paragraph-em-xxs--line-height: var(--typography-line-height-350);
|
|
--text-paragraph-em-xxs--letter-spacing: 0px;
|
|
--text-paragraph-em-xxs--font-weight: 400;
|
|
|
|
--text-paragraph-em-m: 16px;
|
|
--text-paragraph-em-m--line-height: var(--typography-line-height-600);
|
|
--text-paragraph-em-m--letter-spacing: 0px;
|
|
--text-paragraph-em-m--font-weight: 400;
|
|
|
|
--text-link-xs: 12px;
|
|
--text-link-xs--line-height: var(--typography-line-height-400);
|
|
--text-link-xs--letter-spacing: 0px;
|
|
--text-link-xs--font-weight: 400;
|
|
|
|
--text-link-s: 14px;
|
|
--text-link-s--line-height: var(--typography-line-height-500);
|
|
--text-link-s--letter-spacing: 0px;
|
|
--text-link-s--font-weight: 400;
|
|
|
|
--text-link-m: 16px;
|
|
--text-link-m--line-height: var(--typography-line-height-600);
|
|
--text-link-m--letter-spacing: 0px;
|
|
--text-link-m--font-weight: 400;
|
|
|
|
--text-link-l: 18px;
|
|
--text-link-l--line-height: var(--typography-line-height-600);
|
|
--text-link-l--letter-spacing: 0px;
|
|
--text-link-l--font-weight: 400;
|
|
|
|
--text-link-xl: 24px;
|
|
--text-link-xl--line-height: var(--typography-line-height-800);
|
|
--text-link-xl--letter-spacing: 0px;
|
|
--text-link-xl--font-weight: 400;
|
|
|
|
--text-xx-large-display: var(--text-display-xxl);
|
|
--text-xx-large-display--line-height: var(--text-display-xxl--line-height);
|
|
--text-xx-large-display--letter-spacing: var(--text-display-xxl--letter-spacing);
|
|
--text-xx-large-display--font-weight: var(--text-display-xxl--font-weight);
|
|
--text-x-large-display: var(--text-display-xl);
|
|
--text-x-large-display--line-height: var(--text-display-xl--line-height);
|
|
--text-x-large-display--letter-spacing: var(--text-display-xl--letter-spacing);
|
|
--text-x-large-display--font-weight: var(--text-display-xl--font-weight);
|
|
--text-large-display: var(--text-display-l);
|
|
--text-large-display--line-height: var(--text-display-l--line-height);
|
|
--text-large-display--letter-spacing: var(--text-display-l--letter-spacing);
|
|
--text-large-display--font-weight: var(--text-display-l--font-weight);
|
|
--text-medium-display: var(--text-display-m);
|
|
--text-medium-display--line-height: var(--text-display-m--line-height);
|
|
--text-medium-display--letter-spacing: var(--text-display-m--letter-spacing);
|
|
--text-medium-display--font-weight: var(--text-display-m--font-weight);
|
|
--text-small-display: var(--text-display-s);
|
|
--text-small-display--line-height: var(--text-display-s--line-height);
|
|
--text-small-display--letter-spacing: var(--text-display-s--letter-spacing);
|
|
--text-small-display--font-weight: var(--text-display-s--font-weight);
|
|
--text-x-small-display: var(--text-display-xs);
|
|
--text-x-small-display--line-height: var(--text-display-xs--line-height);
|
|
--text-x-small-display--letter-spacing: var(--text-display-xs--letter-spacing);
|
|
--text-x-small-display--font-weight: var(--text-display-xs--font-weight);
|
|
--text-xx-small-display: var(--text-display-xxs);
|
|
--text-xx-small-display--line-height: var(--text-display-xxs--line-height);
|
|
--text-xx-small-display--letter-spacing: var(--text-display-xxs--letter-spacing);
|
|
--text-xx-small-display--font-weight: var(--text-display-xxs--font-weight);
|
|
--text-xx-large-heading: var(--text-heading-xxl);
|
|
--text-xx-large-heading--line-height: var(--text-heading-xxl--line-height);
|
|
--text-xx-large-heading--letter-spacing: var(--text-heading-xxl--letter-spacing);
|
|
--text-xx-large-heading--font-weight: var(--text-heading-xxl--font-weight);
|
|
--text-x-large-heading: var(--text-heading-xl);
|
|
--text-x-large-heading--line-height: var(--text-heading-xl--line-height);
|
|
--text-x-large-heading--letter-spacing: var(--text-heading-xl--letter-spacing);
|
|
--text-x-large-heading--font-weight: var(--text-heading-xl--font-weight);
|
|
--text-large-heading: var(--text-heading-l);
|
|
--text-large-heading--line-height: var(--text-heading-l--line-height);
|
|
--text-large-heading--letter-spacing: var(--text-heading-l--letter-spacing);
|
|
--text-large-heading--font-weight: var(--text-heading-l--font-weight);
|
|
--text-medium-heading: var(--text-heading-m);
|
|
--text-medium-heading--line-height: var(--text-heading-m--line-height);
|
|
--text-medium-heading--letter-spacing: var(--text-heading-m--letter-spacing);
|
|
--text-medium-heading--font-weight: var(--text-heading-m--font-weight);
|
|
--text-small-heading: var(--text-heading-s);
|
|
--text-small-heading--line-height: var(--text-heading-s--line-height);
|
|
--text-small-heading--letter-spacing: var(--text-heading-s--letter-spacing);
|
|
--text-small-heading--font-weight: var(--text-heading-s--font-weight);
|
|
--text-x-small-heading: var(--text-heading-xs);
|
|
--text-x-small-heading--line-height: var(--text-heading-xs--line-height);
|
|
--text-x-small-heading--letter-spacing: var(--text-heading-xs--letter-spacing);
|
|
--text-x-small-heading--font-weight: var(--text-heading-xs--font-weight);
|
|
--text-xx-small-heading: var(--text-heading-xxs);
|
|
--text-xx-small-heading--line-height: var(--text-heading-xxs--line-height);
|
|
--text-xx-small-heading--letter-spacing: var(--text-heading-xxs--letter-spacing);
|
|
--text-xx-small-heading--font-weight: var(--text-heading-xxs--font-weight);
|
|
--text-xx-large-label: var(--text-label-xxl);
|
|
--text-xx-large-label--line-height: var(--text-label-xxl--line-height);
|
|
--text-xx-large-label--letter-spacing: var(--text-label-xxl--letter-spacing);
|
|
--text-xx-large-label--font-weight: var(--text-label-xxl--font-weight);
|
|
--text-x-large-label: var(--text-label-xl);
|
|
--text-x-large-label--line-height: var(--text-label-xl--line-height);
|
|
--text-x-large-label--letter-spacing: var(--text-label-xl--letter-spacing);
|
|
--text-x-large-label--font-weight: var(--text-label-xl--font-weight);
|
|
--text-large-label: var(--text-label-l);
|
|
--text-large-label--line-height: var(--text-label-l--line-height);
|
|
--text-large-label--letter-spacing: var(--text-label-l--letter-spacing);
|
|
--text-large-label--font-weight: var(--text-label-l--font-weight);
|
|
--text-medium-label: var(--text-label-m);
|
|
--text-medium-label--line-height: var(--text-label-m--line-height);
|
|
--text-medium-label--letter-spacing: var(--text-label-m--letter-spacing);
|
|
--text-medium-label--font-weight: var(--text-label-m--font-weight);
|
|
--text-small-label: var(--text-label-s);
|
|
--text-small-label--line-height: var(--text-label-s--line-height);
|
|
--text-small-label--letter-spacing: var(--text-label-s--letter-spacing);
|
|
--text-small-label--font-weight: var(--text-label-s--font-weight);
|
|
--text-x-small-label: var(--text-label-xs);
|
|
--text-x-small-label--line-height: var(--text-label-xs--line-height);
|
|
--text-x-small-label--letter-spacing: var(--text-label-xs--letter-spacing);
|
|
--text-x-small-label--font-weight: var(--text-label-xs--font-weight);
|
|
--text-xx-small-label: var(--text-label-xxs);
|
|
--text-xx-small-label--line-height: var(--text-label-xxs--line-height);
|
|
--text-xx-small-label--letter-spacing: var(--text-label-xxs--letter-spacing);
|
|
--text-xx-small-label--font-weight: var(--text-label-xxs--font-weight);
|
|
--text-x-small-label-caps: var(--text-label-caps-xxs);
|
|
--text-x-small-label-caps--line-height: var(--text-label-caps-xxs--line-height);
|
|
--text-x-small-label-caps--letter-spacing: var(--text-label-caps-xxs--letter-spacing);
|
|
--text-x-small-label-caps--font-weight: var(--text-label-caps-xxs--font-weight);
|
|
--text-x-small-uppercase: var(--text-label-caps-xs);
|
|
--text-x-small-uppercase--line-height: var(--text-label-caps-xs--line-height);
|
|
--text-x-small-uppercase--letter-spacing: var(--text-label-caps-xs--letter-spacing);
|
|
--text-x-small-uppercase--font-weight: var(--text-label-caps-xs--font-weight);
|
|
--text-large-uppercase: var(--text-label-caps-l);
|
|
--text-large-uppercase--line-height: var(--text-label-caps-l--line-height);
|
|
--text-large-uppercase--letter-spacing: var(--text-label-caps-l--letter-spacing);
|
|
--text-large-uppercase--font-weight: var(--text-label-caps-l--font-weight);
|
|
--text-x-large-uppercase: var(--text-label-caps-xl);
|
|
--text-x-large-uppercase--line-height: var(--text-label-caps-xl--line-height);
|
|
--text-x-large-uppercase--letter-spacing: var(--text-label-caps-xl--letter-spacing);
|
|
--text-x-large-uppercase--font-weight: var(--text-label-caps-xl--font-weight);
|
|
--text-xx-large-uppercase: var(--text-label-caps-xxl);
|
|
--text-xx-large-uppercase--line-height: var(--text-label-caps-xxl--line-height);
|
|
--text-xx-large-uppercase--letter-spacing: var(--text-label-caps-xxl--letter-spacing);
|
|
--text-xx-large-uppercase--font-weight: var(--text-label-caps-xxl--font-weight);
|
|
--text-xx-large-paragraph: var(--text-paragraph-xxl);
|
|
--text-xx-large-paragraph--line-height: var(--text-paragraph-xxl--line-height);
|
|
--text-xx-large-paragraph--letter-spacing: var(--text-paragraph-xxl--letter-spacing);
|
|
--text-xx-large-paragraph--font-weight: var(--text-paragraph-xxl--font-weight);
|
|
--text-x-large-paragraph: var(--text-paragraph-xl);
|
|
--text-x-large-paragraph--line-height: var(--text-paragraph-xl--line-height);
|
|
--text-x-large-paragraph--letter-spacing: var(--text-paragraph-xl--letter-spacing);
|
|
--text-x-large-paragraph--font-weight: var(--text-paragraph-xl--font-weight);
|
|
--text-large-paragraph: var(--text-paragraph-l);
|
|
--text-large-paragraph--line-height: var(--text-paragraph-l--line-height);
|
|
--text-large-paragraph--letter-spacing: var(--text-paragraph-l--letter-spacing);
|
|
--text-large-paragraph--font-weight: var(--text-paragraph-l--font-weight);
|
|
--text-medium-paragraph: var(--text-paragraph-m);
|
|
--text-medium-paragraph--line-height: var(--text-paragraph-m--line-height);
|
|
--text-medium-paragraph--letter-spacing: var(--text-paragraph-m--letter-spacing);
|
|
--text-medium-paragraph--font-weight: var(--text-paragraph-m--font-weight);
|
|
--text-small-paragraph: var(--text-paragraph-s);
|
|
--text-small-paragraph--line-height: var(--text-paragraph-s--line-height);
|
|
--text-small-paragraph--letter-spacing: var(--text-paragraph-s--letter-spacing);
|
|
--text-small-paragraph--font-weight: var(--text-paragraph-s--font-weight);
|
|
--text-x-small-paragraph: var(--text-paragraph-xs);
|
|
--text-x-small-paragraph--line-height: var(--text-paragraph-xs--line-height);
|
|
--text-x-small-paragraph--letter-spacing: var(--text-paragraph-xs--letter-spacing);
|
|
--text-x-small-paragraph--font-weight: var(--text-paragraph-xs--font-weight);
|
|
--text-xx-small-paragraph: var(--text-paragraph-xxs);
|
|
--text-xx-small-paragraph--line-height: var(--text-paragraph-xxs--line-height);
|
|
--text-xx-small-paragraph--letter-spacing: var(--text-paragraph-xxs--letter-spacing);
|
|
--text-xx-small-paragraph--font-weight: var(--text-paragraph-xxs--font-weight);
|
|
--text-xx-small-italic: var(--text-paragraph-em-xxs);
|
|
--text-xx-small-italic--line-height: var(--text-paragraph-em-xxs--line-height);
|
|
--text-xx-small-italic--letter-spacing: var(--text-paragraph-em-xxs--letter-spacing);
|
|
--text-xx-small-italic--font-weight: var(--text-paragraph-em-xxs--font-weight);
|
|
--text-x-small-underline: var(--text-link-xs);
|
|
--text-x-small-underline--line-height: var(--text-link-xs--line-height);
|
|
--text-x-small-underline--letter-spacing: var(--text-link-xs--letter-spacing);
|
|
--text-x-small-underline--font-weight: var(--text-link-xs--font-weight);
|
|
--text-small-underline: var(--text-link-s);
|
|
--text-small-underline--line-height: var(--text-link-s--line-height);
|
|
--text-small-underline--letter-spacing: var(--text-link-s--letter-spacing);
|
|
--text-small-underline--font-weight: var(--text-link-s--font-weight);
|
|
--text-medium-underline: var(--text-link-m);
|
|
--text-medium-underline--line-height: var(--text-link-m--line-height);
|
|
--text-medium-underline--letter-spacing: var(--text-link-m--letter-spacing);
|
|
--text-medium-underline--font-weight: var(--text-link-m--font-weight);
|
|
--text-large-underline: var(--text-link-l);
|
|
--text-large-underline--line-height: var(--text-link-l--line-height);
|
|
--text-large-underline--letter-spacing: var(--text-link-l--letter-spacing);
|
|
--text-large-underline--font-weight: var(--text-link-l--font-weight);
|
|
--text-x-large-underline: var(--text-link-xl);
|
|
--text-x-large-underline--line-height: var(--text-link-xl--line-height);
|
|
--text-x-large-underline--letter-spacing: var(--text-link-xl--letter-spacing);
|
|
--text-x-large-underline--font-weight: var(--text-link-xl--font-weight);
|
|
|
|
}
|
|
|
|
@layer utilities {
|
|
.text-x-small-heading {
|
|
font-size: var(--text-x-small-heading);
|
|
line-height: var(--text-x-small-heading--line-height);
|
|
font-weight: var(--text-x-small-heading--font-weight);
|
|
letter-spacing: var(--text-x-small-heading--letter-spacing);
|
|
}
|
|
.text-x-small-paragraph {
|
|
font-size: var(--text-x-small-paragraph);
|
|
line-height: var(--text-x-small-paragraph--line-height);
|
|
font-weight: var(--text-x-small-paragraph--font-weight);
|
|
letter-spacing: var(--text-x-small-paragraph--letter-spacing);
|
|
}
|
|
.text-paragraph-em-m,
|
|
.text-paragraph-em-xxs,
|
|
.paragraph-em-xxs {
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.xx-large-display {
|
|
font-family: var(--font-bricolage-grotesque);
|
|
font-size: var(--text-xx-large-display);
|
|
font-weight: var(--text-xx-large-display--font-weight);
|
|
line-height: var(--text-xx-large-display--line-height);
|
|
letter-spacing: var(--text-xx-large-display--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.xx-large-heading {
|
|
font-family: var(--font-bricolage-grotesque);
|
|
font-size: var(--text-xx-large-heading);
|
|
font-weight: var(--text-xx-large-heading--font-weight);
|
|
line-height: var(--text-xx-large-heading--line-height);
|
|
letter-spacing: var(--text-xx-large-heading--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.x-large-heading {
|
|
font-family: var(--font-bricolage-grotesque);
|
|
font-size: var(--text-x-large-heading);
|
|
font-weight: var(--text-x-large-heading--font-weight);
|
|
line-height: var(--text-x-large-heading--line-height);
|
|
letter-spacing: var(--text-x-large-heading--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.large-heading {
|
|
font-family: var(--font-bricolage-grotesque);
|
|
font-size: var(--text-large-heading);
|
|
font-weight: var(--text-large-heading--font-weight);
|
|
line-height: var(--text-large-heading--line-height);
|
|
letter-spacing: var(--text-large-heading--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.medium-heading {
|
|
font-family: var(--font-bricolage-grotesque);
|
|
font-size: var(--text-medium-heading);
|
|
font-weight: var(--text-medium-heading--font-weight);
|
|
line-height: var(--text-medium-heading--line-height);
|
|
letter-spacing: var(--text-medium-heading--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.small-heading {
|
|
font-family: var(--font-bricolage-grotesque);
|
|
font-size: var(--text-small-heading);
|
|
font-weight: var(--text-small-heading--font-weight);
|
|
line-height: var(--text-small-heading--line-height);
|
|
letter-spacing: var(--text-small-heading--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.x-small-heading {
|
|
font-family: var(--font-bricolage-grotesque);
|
|
font-size: var(--text-x-small-heading);
|
|
font-weight: var(--text-x-small-heading--font-weight);
|
|
line-height: var(--text-x-small-heading--line-height);
|
|
letter-spacing: var(--text-x-small-heading--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.large-label {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-large-label);
|
|
font-weight: var(--text-large-label--font-weight);
|
|
line-height: var(--text-large-label--line-height);
|
|
letter-spacing: var(--text-large-label--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.medium-label {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-medium-label);
|
|
font-weight: var(--text-medium-label--font-weight);
|
|
line-height: var(--text-medium-label--line-height);
|
|
letter-spacing: var(--text-medium-label--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.small-label {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-small-label);
|
|
font-weight: var(--text-small-label--font-weight);
|
|
line-height: var(--text-small-label--line-height);
|
|
letter-spacing: var(--text-small-label--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
/* Regular 400 */
|
|
.large-paragraph {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-large-paragraph);
|
|
font-weight: var(--text-large-paragraph--font-weight);
|
|
line-height: var(--text-large-paragraph--line-height);
|
|
letter-spacing: var(--text-large-paragraph--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.medium-paragraph {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-medium-paragraph);
|
|
font-weight: var(--text-medium-paragraph--font-weight);
|
|
line-height: var(--text-medium-paragraph--line-height);
|
|
letter-spacing: var(--text-medium-paragraph--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.small-paragraph {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-small-paragraph);
|
|
font-weight: var(--text-small-paragraph--font-weight);
|
|
line-height: var(--text-small-paragraph--line-height);
|
|
letter-spacing: var(--text-small-paragraph--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.x-small-paragraph {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-x-small-paragraph);
|
|
font-weight: var(--text-x-small-paragraph--font-weight);
|
|
line-height: var(--text-x-small-paragraph--line-height);
|
|
letter-spacing: var(--text-x-small-paragraph--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.xx-small-label {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-xx-small-label);
|
|
font-weight: var(--text-xx-small-label--font-weight);
|
|
line-height: var(--text-xx-small-label--line-height);
|
|
letter-spacing: var(--text-xx-small-label--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.xx-small-paragraph {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-xx-small-paragraph);
|
|
font-weight: var(--text-xx-small-paragraph--font-weight);
|
|
line-height: var(--text-xx-small-paragraph--line-height);
|
|
letter-spacing: var(--text-xx-small-paragraph--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.xx-small-italic {
|
|
font-family: var(--font-inter);
|
|
font-style: italic;
|
|
font-size: var(--text-xx-small-italic);
|
|
font-weight: var(--text-xx-small-italic--font-weight);
|
|
line-height: var(--text-xx-small-italic--line-height);
|
|
letter-spacing: var(--text-xx-small-italic--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.x-large-label {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-x-large-label);
|
|
font-weight: var(--text-x-large-label--font-weight);
|
|
line-height: var(--text-x-large-label--line-height);
|
|
letter-spacing: var(--text-x-large-label--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.x-large-paragraph {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-x-large-paragraph);
|
|
font-weight: var(--text-x-large-paragraph--font-weight);
|
|
line-height: var(--text-x-large-paragraph--line-height);
|
|
letter-spacing: var(--text-x-large-paragraph--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.xx-large-paragraph {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-xx-large-paragraph);
|
|
font-weight: var(--text-xx-large-paragraph--font-weight);
|
|
line-height: var(--text-xx-large-paragraph--line-height);
|
|
letter-spacing: var(--text-xx-large-paragraph--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.xx-large-label {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-xx-large-label);
|
|
font-weight: var(--text-xx-large-label--font-weight);
|
|
line-height: var(--text-xx-large-label--line-height);
|
|
letter-spacing: var(--text-xx-large-label--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.x-small-underline {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-x-small-underline);
|
|
font-weight: var(--text-x-small-underline--font-weight);
|
|
line-height: var(--text-x-small-underline--line-height);
|
|
letter-spacing: var(--text-x-small-underline--letter-spacing);
|
|
text-decoration: underline;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.small-underline {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-small-underline);
|
|
font-weight: var(--text-small-underline--font-weight);
|
|
line-height: var(--text-small-underline--line-height);
|
|
letter-spacing: var(--text-small-underline--letter-spacing);
|
|
text-decoration: underline;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.medium-underline {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-medium-underline);
|
|
font-weight: var(--text-medium-underline--font-weight);
|
|
line-height: var(--text-medium-underline--line-height);
|
|
letter-spacing: var(--text-medium-underline--letter-spacing);
|
|
text-decoration: underline;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.large-underline {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-large-underline);
|
|
font-weight: var(--text-large-underline--font-weight);
|
|
line-height: var(--text-large-underline--line-height);
|
|
letter-spacing: var(--text-large-underline--letter-spacing);
|
|
text-decoration: underline;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.x-large-underline {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-x-large-underline);
|
|
font-weight: var(--text-x-large-underline--font-weight);
|
|
line-height: var(--text-x-large-underline--line-height);
|
|
letter-spacing: var(--text-x-large-underline--letter-spacing);
|
|
text-decoration: underline;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.x-small-label {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-x-small-label);
|
|
font-weight: var(--text-x-small-label--font-weight);
|
|
line-height: var(--text-x-small-label--line-height);
|
|
letter-spacing: var(--text-x-small-label--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.x-small-label-caps {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-x-small-label-caps);
|
|
font-weight: var(--text-x-small-label-caps--font-weight);
|
|
line-height: var(--text-x-small-label-caps--line-height);
|
|
letter-spacing: var(--text-x-small-label-caps--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.xx-small-heading {
|
|
font-family: var(--font-bricolage-grotesque);
|
|
font-size: var(--text-xx-small-heading);
|
|
font-weight: var(--text-xx-small-heading--font-weight);
|
|
line-height: var(--text-xx-small-heading--line-height);
|
|
letter-spacing: var(--text-xx-small-heading--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.x-small-display {
|
|
font-family: var(--font-bricolage-grotesque);
|
|
font-size: var(--text-x-small-display);
|
|
font-weight: var(--text-x-small-display--font-weight);
|
|
line-height: var(--text-x-small-display--line-height);
|
|
letter-spacing: var(--text-x-small-display--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.x-large-uppercase {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-x-large-uppercase);
|
|
font-weight: var(--text-x-large-uppercase--font-weight);
|
|
line-height: var(--text-x-large-uppercase--line-height);
|
|
letter-spacing: var(--text-x-large-uppercase--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.xx-large-uppercase {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-xx-large-uppercase);
|
|
font-weight: var(--text-xx-large-uppercase--font-weight);
|
|
line-height: var(--text-xx-large-uppercase--line-height);
|
|
letter-spacing: var(--text-xx-large-uppercase--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.x-large-display {
|
|
font-family: var(--font-bricolage-grotesque);
|
|
font-size: var(--text-x-large-display);
|
|
font-weight: var(--text-x-large-display--font-weight);
|
|
line-height: var(--text-x-large-display--line-height);
|
|
letter-spacing: var(--text-x-large-display--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.large-display {
|
|
font-family: var(--font-bricolage-grotesque);
|
|
font-size: var(--text-large-display);
|
|
font-weight: var(--text-large-display--font-weight);
|
|
line-height: var(--text-large-display--line-height);
|
|
letter-spacing: var(--text-large-display--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.medium-display {
|
|
font-family: var(--font-bricolage-grotesque);
|
|
font-size: var(--text-medium-display);
|
|
font-weight: var(--text-medium-display--font-weight);
|
|
line-height: var(--text-medium-display--line-height);
|
|
letter-spacing: var(--text-medium-display--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.xx-small-display {
|
|
font-family: var(--font-bricolage-grotesque);
|
|
font-size: var(--text-xx-small-display);
|
|
font-weight: var(--text-xx-small-display--font-weight);
|
|
line-height: var(--text-xx-small-display--line-height);
|
|
letter-spacing: var(--text-xx-small-display--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.x-small-uppercase {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-x-small-uppercase);
|
|
font-weight: var(--text-x-small-uppercase--font-weight);
|
|
line-height: var(--text-x-small-uppercase--line-height);
|
|
letter-spacing: var(--text-x-small-uppercase--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.large-uppercase {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-large-uppercase);
|
|
font-weight: var(--text-large-uppercase--font-weight);
|
|
line-height: var(--text-large-uppercase--line-height);
|
|
letter-spacing: var(--text-large-uppercase--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.small-display {
|
|
font-family: var(--font-bricolage-grotesque);
|
|
font-size: var(--text-small-display);
|
|
font-weight: var(--text-small-display--font-weight);
|
|
line-height: var(--text-small-display--line-height);
|
|
letter-spacing: var(--text-small-display--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.paragraph-strong-xxl {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-paragraph-strong-xxl);
|
|
font-weight: var(--text-paragraph-strong-xxl--font-weight);
|
|
line-height: var(--text-paragraph-strong-xxl--line-height);
|
|
letter-spacing: var(--text-paragraph-strong-xxl--letter-spacing);
|
|
}
|
|
.paragraph-strong-xl {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-paragraph-strong-xl);
|
|
font-weight: var(--text-paragraph-strong-xl--font-weight);
|
|
line-height: var(--text-paragraph-strong-xl--line-height);
|
|
letter-spacing: var(--text-paragraph-strong-xl--letter-spacing);
|
|
}
|
|
.paragraph-strong-l {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-paragraph-strong-l);
|
|
font-weight: var(--text-paragraph-strong-l--font-weight);
|
|
line-height: var(--text-paragraph-strong-l--line-height);
|
|
letter-spacing: var(--text-paragraph-strong-l--letter-spacing);
|
|
}
|
|
.paragraph-strong-m {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-paragraph-strong-m);
|
|
font-weight: var(--text-paragraph-strong-m--font-weight);
|
|
line-height: var(--text-paragraph-strong-m--line-height);
|
|
letter-spacing: var(--text-paragraph-strong-m--letter-spacing);
|
|
}
|
|
.paragraph-strong-s {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-paragraph-strong-s);
|
|
font-weight: var(--text-paragraph-strong-s--font-weight);
|
|
line-height: var(--text-paragraph-strong-s--line-height);
|
|
letter-spacing: var(--text-paragraph-strong-s--letter-spacing);
|
|
}
|
|
.paragraph-strong-xs {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-paragraph-strong-xs);
|
|
font-weight: var(--text-paragraph-strong-xs--font-weight);
|
|
line-height: var(--text-paragraph-strong-xs--line-height);
|
|
letter-spacing: var(--text-paragraph-strong-xs--letter-spacing);
|
|
}
|
|
.paragraph-strong-xxs {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-paragraph-strong-xxs);
|
|
font-weight: var(--text-paragraph-strong-xxs--font-weight);
|
|
line-height: var(--text-paragraph-strong-xxs--line-height);
|
|
letter-spacing: var(--text-paragraph-strong-xxs--letter-spacing);
|
|
}
|
|
.paragraph-em-m {
|
|
font-family: var(--font-inter);
|
|
font-style: italic;
|
|
font-size: var(--text-paragraph-em-m);
|
|
font-weight: var(--text-paragraph-em-m--font-weight);
|
|
line-height: var(--text-paragraph-em-m--line-height);
|
|
letter-spacing: var(--text-paragraph-em-m--letter-spacing);
|
|
}
|
|
}
|