mirror of
https://github.com/makeplane/plane.git
synced 2025-12-23 23:29:37 +01:00
22339b9786
* chore: init tailwind v4 * chore: update all configs * chore: add source to parse monorepo packages * chore: combine all css files * feat: added extended colors * chore: update typography * chore: update extended color var names * refactor: remove initial spacing variable and update dark mode selector * chore: update css files * chore: update animations * chore: remove spacing tokens * fix: external css files * chore: update tailwind-merge version * chore: update font family * chore: added brief agents.md and story for new design system * chore: enhance design system documentation with rare exceptions for visual separation * chore: add fontsource package for typography * chore: material symbols font added * chore: update shadow default * chore: add stroke and outline theme vars * chore: update ring and fill colors * chore: overwrite tailwind typography tokens * chore: add high contrast mode tokens * chore: update scrollbar colors * chore: backward compatibility for buttons and placeholders * chore: add priority colors * chore: update urgent priority color * chore: update plan colors * chore: add missing utility class * chore: update height and padding classes * chore: update label colors * chore: add missing utlity * chore: add typography plugin to space app * chore: replace existing classNames with new design system tokens #8244 (#8278) * chore: update border colors * chore: update all borders * chore: update text colors * chore: update css variables * chore: update font sizes and weights * chore: update bg colors * chore: sync changes * fix: uncomment spacing-1200 variable in variables.css * chore: update primary colors * refactor: updated border to border-subtle * refactor: update various components and improve UI consistency across the application * updated classnames * updated classnames * refactor: update color-related class names to use new design system variables for consistency * chore: default automations * chore: update text sizes * chore: home and power k * chore: home and power k * chore: replace ui package button components * chore: update text sizes * chore: updated issue identifier (#8275) * refactor: top navigation and sidebar design token (#8276) * chore: update all button components (#8277) * chore: new button component * chore: update existing buttons * chore: overwrite tailwind typography tokens * fix: twMerge config + fixed cn instances * refactor: toast design token updated (#8279) * chore: update existing buttons * chore: tooltip design token updatged (#8280) * chore: moved cn utility to propel (#8281) * chore: update space app UI (#8285) * chore; update space app filters component * fix: button whitespace wrap * chore: space app votes * chore: update dropdown components * refactor: auth, onboarding, sidebar, and common component design token migration (#8291) * chore: checkbox component design token updated * chore: indicator and oauth component design token updated * chore: sidebar design token updated * chore: auth and onboarding design token updated * chore: update divider color * style: update background colors and hover effects across list components * fix: tailwind merge * refactor: toggle switch design token migration and header utility classname added (#8295) * chore: toggle component design token updated * chore: h-header utility class added * chore: updated color tokens for work item detail page (#8296) * chore: update react-day-picker UI * refactor: update button sizes and styles in filters components * refactor: breadcrumbs design token updated (#8297) * chore: update priority icon colors * refactor: updated layout variables * chore: update plan card primary CTA * Chore update editor design system (#8299) * refactor: update styles for callout, color selector, logo selector, and image uploader * refactor:fix image * chore: update settings UI * chore: updated notifications color and size tokens (#8302) * chore: update sm button border radius * fix: logo renderer * chore: icon button component * chore: remove deprecated classes * chore: remove deprecated classes * chore: update editor list spacing * fix: icon button size * chore: improvements (#8309) * chore: update cycles and modules pages * refactor: update background styles across various components to use new design system colors * fix: button type errors * chore: update modals design system (#8310) * refactor: callout bg * refactor: code bg * refactor: modal size and variant --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com> * chore: update next-themes * design: update billing and plans component styles and remove unused utility functions (#8313) * refactor: empty state design token migration and improvements (#8315) * fix: profile page * refactor: tabs design token updated (#8316) * chore: updated buttons and tokens for work items (#8317) * fix: adjust trial button spacing in checkout modal * chore: update add button hover state * fix: type error (#8318) * fix: type error * chore: code refactor * refactor: update button sizes and background styles in rich filters components * refactor: update editor bg * refactor: enhance Gantt chart sidebar functionality and styling - Removed unused prop from . - Updated to include new props for better block management and scrolling behavior. - Improved auto-scroll functionality for Gantt chart items. - Adjusted styles in component for consistent design. * regression: gantt design * chore: new badge component * fix: favorite star * chore: update backgroung, typography and button sizes across workspace settings general and members pages * fix: header button sizes * fix: emoji icon logo (#8323) * more fixes * chore: update settings sidebar * refactor: avatar component * chore: updated work item detail sidebar (#8327) * refactor: update link preview * fix: work item property dropdowns * fix: dropdown buttons border radius * chore: update power k translation * chore: updated profile activity design (#8328) * chore: update settings pages * chore: update work item sidebar alignments (#8330) * refactor: admin design system * chore: update page header --------- Co-authored-by: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Co-authored-by: VipinDevelops <vipinchaudhary1809@gmail.com> Co-authored-by: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com> Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Co-authored-by: gakshita <akshitagoyal1516@gmail.com> Co-authored-by: Palanikannan M <akashmalinimurugu@gmail.com> Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com> Co-authored-by: b-saikrishnakanth <bsaikrishnakanth97@gmail.com> Co-authored-by: M. Palanikannan <73993394+Palanikannan1437@users.noreply.github.com> * fix: formatting * reexport types * fix: lint error --------- Co-authored-by: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Co-authored-by: VipinDevelops <vipinchaudhary1809@gmail.com> Co-authored-by: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com> Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Co-authored-by: gakshita <akshitagoyal1516@gmail.com> Co-authored-by: Palanikannan M <akashmalinimurugu@gmail.com> Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com> Co-authored-by: b-saikrishnakanth <bsaikrishnakanth97@gmail.com> Co-authored-by: M. Palanikannan <73993394+Palanikannan1437@users.noreply.github.com>
1186 lines
55 KiB
CSS
1186 lines
55 KiB
CSS
@import "@fontsource/inter/200.css";
|
|
@import "@fontsource/inter/300.css";
|
|
@import "@fontsource/inter/400.css";
|
|
@import "@fontsource/inter/500.css";
|
|
@import "@fontsource/inter/600.css";
|
|
@import "@fontsource/inter/700.css";
|
|
@import "@fontsource/inter/800.css";
|
|
@import "@fontsource/ibm-plex-mono/200.css";
|
|
@import "@fontsource/ibm-plex-mono/300.css";
|
|
@import "@fontsource/ibm-plex-mono/400.css";
|
|
@import "@fontsource/ibm-plex-mono/500.css";
|
|
@import "@fontsource/ibm-plex-mono/600.css";
|
|
@import "@fontsource/ibm-plex-mono/700.css";
|
|
@import "@fontsource/material-symbols-rounded/400.css";
|
|
|
|
@custom-variant dark (&:where([data-theme*="dark"], [data-theme*="dark"] *));
|
|
@custom-variant dark-high-contrast (&:where([data-theme="dark-contrast"], [data-theme="dark-contrast"] *));
|
|
@custom-variant light-high-contrast (&:where([data-theme="light-contrast"], [data-theme="light-contrast"] *));
|
|
|
|
@theme {
|
|
--color-*: initial;
|
|
|
|
/* ---------- Alpha colors ---------- */
|
|
/* White alpha */
|
|
--color-alpha-white-0: oklch(1 0 0 / 0%);
|
|
--color-alpha-white-100: oklch(1 0 0 / 5%);
|
|
--color-alpha-white-200: oklch(1 0 0 / 10%);
|
|
--color-alpha-white-300: oklch(1 0 0 / 15%);
|
|
--color-alpha-white-400: oklch(1 0 0 / 20%);
|
|
--color-alpha-white-500: oklch(1 0 0 / 30%);
|
|
--color-alpha-white-600: oklch(1 0 0 / 40%);
|
|
--color-alpha-white-700: oklch(1 0 0 / 50%);
|
|
--color-alpha-white-800: oklch(1 0 0 / 60%);
|
|
--color-alpha-white-900: oklch(1 0 0 / 70%);
|
|
--color-alpha-white-1000: oklch(1 0 0 / 80%);
|
|
--color-alpha-white-1100: oklch(1 0 0 / 90%);
|
|
--color-alpha-white-1200: oklch(1 0 0 / 95%);
|
|
|
|
/* Black alpha */
|
|
--color-alpha-black-0: oklch(0.1482 0.0034 196.79 / 0%);
|
|
--color-alpha-black-100: oklch(0.1482 0.0034 196.79 / 5%);
|
|
--color-alpha-black-200: oklch(0.1482 0.0034 196.79 / 10%);
|
|
--color-alpha-black-300: oklch(0.1482 0.0034 196.79 / 15%);
|
|
--color-alpha-black-400: oklch(0.1482 0.0034 196.79 / 20%);
|
|
--color-alpha-black-500: oklch(0.1482 0.0034 196.79 / 30%);
|
|
--color-alpha-black-600: oklch(0.1482 0.0034 196.79 / 40%);
|
|
--color-alpha-black-700: oklch(0.1482 0.0034 196.79 / 50%);
|
|
--color-alpha-black-800: oklch(0.1482 0.0034 196.79 / 60%);
|
|
--color-alpha-black-900: oklch(0.1482 0.0034 196.79 / 70%);
|
|
--color-alpha-black-1000: oklch(0.1482 0.0034 196.79 / 80%);
|
|
--color-alpha-black-1100: oklch(0.1482 0.0034 196.79 / 90%);
|
|
--color-alpha-black-1200: oklch(0.1482 0.0034 196.79 / 95%);
|
|
|
|
/* ---------- Border radius ---------- */
|
|
--radius-4xl: initial;
|
|
|
|
/* ---------- Border width ---------- */
|
|
--border-width-*: initial;
|
|
--border-width-sm: 1px;
|
|
--border-width-md: 1.5px;
|
|
--border-width-lg: 2px;
|
|
--border-width-xl: 2.5px;
|
|
--default-border-width: 1px;
|
|
|
|
/* ---------- Outline width ---------- */
|
|
--outline-width-*: initial;
|
|
--outline-width-sm: var(--border-width-sm);
|
|
--outline-width-md: var(--border-width-md);
|
|
--outline-width-lg: var(--border-width-lg);
|
|
--outline-width-xl: var(--border-width-xl);
|
|
--default-outline-width: var(--default-border-width);
|
|
|
|
/* ---------- Ring width ---------- */
|
|
--ring-width-*: initial;
|
|
--ring-width-sm: var(--border-width-sm);
|
|
--ring-width-md: var(--border-width-md);
|
|
--ring-width-lg: var(--border-width-lg);
|
|
--ring-width-xl: var(--border-width-xl);
|
|
--default-ring-width: var(--default-border-width);
|
|
|
|
/* ---------- Shadow ---------- */
|
|
--shadow-*: initial;
|
|
--shadow-raised-100: 0px 1px 6px -1px #292f3d08, 0px 1px 4px 0px #292f3d0a;
|
|
--shadow-raised-200: 0px 1px 2px -1px #292f3d0f, 0px 1px 3px 0px #292f3d0d;
|
|
--shadow-raised-300: 0px 2px 4px -1px #292f3d0a, 0px 4px 6px -1px #292f3d0d;
|
|
--shadow-overlay-100: 0px 10px 10px -5px #292f3d0a, 0px 10px 40px -5px #292f3d0a;
|
|
--shadow-overlay-200: 0px 10px 10px -10px #292f3d0a, 0px 30px 60px -12px #292f3d1a;
|
|
--shadow-direction-left: -10px 0px 30px -5px #292f3d05, -5px 0px 80px -5px #292f3d0a;
|
|
--shadow-direction-right: 10px 0px 30px -5px #0000000a, 5px 0px 80px -5px #0000000a;
|
|
|
|
/* --------- Height --------- */
|
|
--height-header: 3.25rem;
|
|
|
|
/* --------- Padding --------- */
|
|
--padding-page: 1.35rem;
|
|
|
|
/* --------- Priority colors --------- */
|
|
--color-priority-urgent: oklch(0.5798 0.1766 26.99);
|
|
--color-priority-high: oklch(0.6802 0.1633 50.67);
|
|
--color-priority-medium: oklch(0.79 0.1466 82.04);
|
|
--color-priority-low: oklch(0.579 0.1807 262.31);
|
|
--color-priority-none: oklch(0.6376 0.0129 231.77);
|
|
|
|
/* Priority text colors */
|
|
--text-color-priority-urgent: var(--color-priority-urgent);
|
|
--text-color-priority-high: var(--color-priority-high);
|
|
--text-color-priority-medium: var(--color-priority-medium);
|
|
--text-color-priority-low: var(--color-priority-low);
|
|
--text-color-priority-none: var(--color-priority-none);
|
|
|
|
/* Priority border colors */
|
|
--border-color-priority-urgent: var(--color-priority-urgent);
|
|
--border-color-priority-high: var(--color-priority-high);
|
|
--border-color-priority-medium: var(--color-priority-medium);
|
|
--border-color-priority-low: var(--color-priority-low);
|
|
--border-color-priority-none: var(--color-priority-none);
|
|
|
|
/* --------- Extended colors ---------- */
|
|
/* Purple colors */
|
|
--extended-color-purple-25: oklch(0.981 0.0054 297.73);
|
|
--extended-color-purple-50: oklch(0.9421 0.0162 293.74);
|
|
--extended-color-purple-100: oklch(0.8808 0.0343 293.03);
|
|
--extended-color-purple-200: oklch(0.779 0.0639 293.01);
|
|
--extended-color-purple-300: oklch(0.6978 0.0888 291.44);
|
|
--extended-color-purple-400: oklch(0.6139 0.1164 290.19);
|
|
--extended-color-purple-500: oklch(0.5527 0.1361 288.8);
|
|
--extended-color-purple-600: oklch(0.4895 0.157 286.65);
|
|
--extended-color-purple-700: oklch(0.42 0.1303 287.25);
|
|
--extended-color-purple-800: oklch(0.3617 0.1077 287.53);
|
|
--extended-color-purple-900: oklch(0.2861 0.0795 287.41);
|
|
--extended-color-purple-950: oklch(0.219 0.0552 288.93);
|
|
|
|
/* Orange colors */
|
|
--extended-color-orange-25: oklch(0.9856 0.0084 56.32);
|
|
--extended-color-orange-50: oklch(0.964 0.0219 58.79);
|
|
--extended-color-orange-100: oklch(0.9152 0.0522 56.77);
|
|
--extended-color-orange-200: oklch(0.8504 0.097 56.87);
|
|
--extended-color-orange-300: oklch(0.801 0.1323 55.27);
|
|
--extended-color-orange-400: oklch(0.7563 0.1644 52.56);
|
|
--extended-color-orange-500: oklch(0.7177 0.1905 47.86);
|
|
--extended-color-orange-600: oklch(0.6601 0.1884 45.09);
|
|
--extended-color-orange-700: oklch(0.5737 0.162 45.72);
|
|
--extended-color-orange-800: oklch(0.5059 0.141467 46.3267);
|
|
--extended-color-orange-900: oklch(0.3897 0.105571 48.3415);
|
|
--extended-color-orange-950: oklch(0.2896 0.0746 51.86);
|
|
|
|
/* Crimson colors */
|
|
--extended-color-crimson-25: oklch(0.9805 0.0066 28.83);
|
|
--extended-color-crimson-50: oklch(0.9503 0.0186 21.57);
|
|
--extended-color-crimson-100: oklch(0.8847 0.0455 23.1);
|
|
--extended-color-crimson-200: oklch(0.791 0.0874 23.59);
|
|
--extended-color-crimson-300: oklch(0.72 0.124 24.83);
|
|
--extended-color-crimson-400: oklch(0.6556 0.1604 26.47);
|
|
--extended-color-crimson-500: oklch(0.5954 0.1956 28.51);
|
|
--extended-color-crimson-600: oklch(0.5284 0.185 28.96);
|
|
--extended-color-crimson-700: oklch(0.4754 0.1647 28.98);
|
|
--extended-color-crimson-800: oklch(0.4209 0.1438 29.01);
|
|
--extended-color-crimson-900: oklch(0.3249 0.106 28.39);
|
|
--extended-color-crimson-950: oklch(0.2457 0.0742 27.56);
|
|
|
|
/* Emerald colors */
|
|
--extended-color-emerald-25: oklch(0.9884 0.0082 157.1);
|
|
--extended-color-emerald-50: oklch(0.9563 0.0256 154.47);
|
|
--extended-color-emerald-100: oklch(0.9153 0.0531 153.59);
|
|
--extended-color-emerald-200: oklch(0.8679 0.0829 153.02);
|
|
--extended-color-emerald-300: oklch(0.8221 0.1121 152.16);
|
|
--extended-color-emerald-400: oklch(0.7785 0.1398 151.07);
|
|
--extended-color-emerald-500: oklch(0.7401 0.166 149.61);
|
|
--extended-color-emerald-600: oklch(0.6567 0.1599 148.98);
|
|
--extended-color-emerald-700: oklch(0.5883 0.1413 149.06);
|
|
--extended-color-emerald-800: oklch(0.4965 0.1172 149.18);
|
|
--extended-color-emerald-900: oklch(0.4003 0.0918 149.37);
|
|
--extended-color-emerald-950: oklch(0.2982 0.0631 150.55);
|
|
|
|
/* Pink colors */
|
|
--extended-color-pink-25: oklch(0.9828 0.005 345.28);
|
|
--extended-color-pink-50: oklch(0.9394 0.0201 340.71);
|
|
--extended-color-pink-100: oklch(0.8759 0.0418 339.71);
|
|
--extended-color-pink-200: oklch(0.805 0.0664 341.18);
|
|
--extended-color-pink-300: oklch(0.736 0.0938 342.16);
|
|
--extended-color-pink-400: oklch(0.6673 0.1206 342.89);
|
|
--extended-color-pink-500: oklch(0.6185 0.1388 344.06);
|
|
--extended-color-pink-600: oklch(0.5704 0.1574 345.25);
|
|
--extended-color-pink-700: oklch(0.4947 0.1333 344.88);
|
|
--extended-color-pink-800: oklch(0.4162 0.1108 344.66);
|
|
--extended-color-pink-900: oklch(0.326 0.0807 344.57);
|
|
--extended-color-pink-950: oklch(0.2474 0.0553 344.95);
|
|
|
|
/* yellow colors */
|
|
--extended-color-yellow-25: oklch(0.989 0.0073 80.72);
|
|
--extended-color-yellow-50: oklch(0.9631 0.0268 85.66);
|
|
--extended-color-yellow-100: oklch(0.9297 0.0545 86.15);
|
|
--extended-color-yellow-200: oklch(0.8893 0.0843 85.3);
|
|
--extended-color-yellow-300: oklch(0.8522 0.1121 85.14);
|
|
--extended-color-yellow-400: oklch(0.8167 0.1342 83.9);
|
|
--extended-color-yellow-500: oklch(0.79 0.1466 82.04);
|
|
--extended-color-yellow-600: oklch(0.7399 0.1487 79.36);
|
|
--extended-color-yellow-700: oklch(0.683 0.1365 79.84);
|
|
--extended-color-yellow-800: oklch(0.5522 0.1093 80.44);
|
|
--extended-color-yellow-900: oklch(0.425 0.0824 81.46);
|
|
--extended-color-yellow-950: oklch(0.3142 0.0586 82.21);
|
|
|
|
/* indigo colors */
|
|
--extended-color-indigo-25: oklch(0.9813 0.0074 260.73);
|
|
--extended-color-indigo-50: oklch(0.9415 0.022 263.19);
|
|
--extended-color-indigo-100: oklch(0.8828 0.045 263.07);
|
|
--extended-color-indigo-200: oklch(0.7852 0.086 263.89);
|
|
--extended-color-indigo-300: oklch(0.7066 0.121 263.57);
|
|
--extended-color-indigo-400: oklch(0.6322 0.1556 262.59);
|
|
--extended-color-indigo-500: oklch(0.579 0.1807 262.31);
|
|
--extended-color-indigo-600: oklch(0.5291 0.2045 262.05);
|
|
--extended-color-indigo-700: oklch(0.458 0.1753 262.2);
|
|
--extended-color-indigo-800: oklch(0.3862 0.1436 262.12);
|
|
--extended-color-indigo-900: oklch(0.3019 0.1051 262.16);
|
|
--extended-color-indigo-950: oklch(0.2308 0.0713 261.96);
|
|
|
|
/* grey colors */
|
|
--extended-color-grey-25: oklch(0.9851 0 0);
|
|
--extended-color-grey-50: oklch(0.9461 0 0);
|
|
--extended-color-grey-100: oklch(0.9067 0 0);
|
|
--extended-color-grey-200: oklch(0.8297 0 0);
|
|
--extended-color-grey-300: oklch(0.7668 0 0);
|
|
--extended-color-grey-400: oklch(0.6993 0 0);
|
|
--extended-color-grey-500: oklch(0.65 0 0);
|
|
--extended-color-grey-600: oklch(0.5999 0 0);
|
|
--extended-color-grey-700: oklch(0.5208 0 0);
|
|
--extended-color-grey-800: oklch(0.4386 0 0);
|
|
--extended-color-grey-900: oklch(0.3407 0 0);
|
|
--extended-color-grey-950: oklch(0.2603 0 0);
|
|
}
|
|
|
|
/* -------------------- Light mode color tokens -------------------- */
|
|
@theme {
|
|
/* Neutral colors */
|
|
--color-neutral-white: oklch(1 0 0);
|
|
--color-neutral-100: oklch(0.9851 0 129.63);
|
|
--color-neutral-200: oklch(0.9694 0.0011 197.14);
|
|
--color-neutral-300: oklch(0.9544 0.0011 197.14);
|
|
--color-neutral-400: oklch(0.9393 0.0011 197.14);
|
|
--color-neutral-500: oklch(0.9237 0.0026 228.79);
|
|
--color-neutral-600: oklch(0.8932 0.0026 228.79);
|
|
--color-neutral-700: oklch(0.8617 0.0036 219.54);
|
|
--color-neutral-800: oklch(0.6994 0.0072 233.69);
|
|
--color-neutral-900: oklch(0.616 0.0084 228.93);
|
|
--color-neutral-1000: oklch(0.5279 0.0078 233.75);
|
|
--color-neutral-1100: oklch(0.4384 0.0072 223.57);
|
|
--color-neutral-1200: oklch(0.2376 0.0036 228.95);
|
|
--color-neutral-black: oklch(0.1472 0.0034 196.79);
|
|
|
|
/* Brand colors */
|
|
--color-brand-100: oklch(0.9847 0.0083 236.56);
|
|
--color-brand-200: oklch(0.9715 0.0167 230.9);
|
|
--color-brand-300: oklch(0.9428 0.0341 230.22);
|
|
--color-brand-400: oklch(0.9008 0.0587 232);
|
|
--color-brand-500: oklch(0.8414 0.0947 233.08);
|
|
--color-brand-600: oklch(0.7649 0.1392 236.3);
|
|
--color-brand-700: oklch(0.6766 0.1665 243.91);
|
|
--color-brand-900: oklch(0.4347 0.104093 242.4823);
|
|
--color-brand-1000: oklch(0.3399 0.0783 240.32);
|
|
--color-brand-1100: oklch(0.2626 0.0578 237.5);
|
|
--color-brand-1200: oklch(0.2093 0.0438 234.02);
|
|
--color-brand-default: oklch(0.4799 0.1158 242.91);
|
|
|
|
/* Green/Success colors */
|
|
--color-green-100: oklch(0.9819 0.0181 155.83);
|
|
--color-green-200: oklch(0.9624 0.0434 156.74);
|
|
--color-green-300: oklch(0.9258 0.0845 155.86);
|
|
--color-green-400: oklch(0.8704 0.149 154.62);
|
|
--color-green-500: oklch(0.7914 0.2091 151.66);
|
|
--color-green-600: oklch(0.7289 0.2119 147.82);
|
|
--color-green-700: oklch(0.632 0.185972 147.3695);
|
|
--color-green-800: oklch(0.5296 0.149485 148.9899);
|
|
--color-green-900: oklch(0.4468 0.1187 151.4);
|
|
--color-green-1000: oklch(0.3935 0.0957 152.28);
|
|
--color-green-1100: oklch(0.2654 0.0651 152.77);
|
|
|
|
/* Amber/Warning colors */
|
|
--color-amber-100: oklch(0.9869 0.0214 95.28);
|
|
--color-amber-200: oklch(0.9617 0.0592 95.89);
|
|
--color-amber-300: oklch(0.9244 0.1203 95.85);
|
|
--color-amber-400: oklch(0.8781 0.1688 91.86);
|
|
--color-amber-500: oklch(0.829 0.1712 81.04);
|
|
--color-amber-600: oklch(0.7724 0.172798 65.367);
|
|
--color-amber-700: oklch(0.6671 0.1685 53.38);
|
|
--color-amber-800: oklch(0.557 0.158291 45.3594);
|
|
--color-amber-900: oklch(0.4747 0.135757 44.9806);
|
|
--color-amber-1000: oklch(0.4149 0.1126 45.88);
|
|
--color-amber-1100: oklch(0.279 0.0773 45.6);
|
|
|
|
/* Red/Danger colors */
|
|
--color-red-100: oklch(0.9705 0.0129 17.38);
|
|
--color-red-200: oklch(0.9365 0.032 17.74);
|
|
--color-red-300: oklch(0.8834 0.0616 18.39);
|
|
--color-red-400: oklch(0.8053 0.1109 19.78);
|
|
--color-red-500: oklch(0.7022 0.1892 22.23);
|
|
--color-red-600: oklch(0.6378 0.2373 25.44);
|
|
--color-red-700: oklch(0.583 0.238666 28.4765);
|
|
--color-red-800: oklch(0.5095 0.208583 28.513);
|
|
--color-red-900: oklch(0.4446 0.1774 26.79);
|
|
--color-red-1000: oklch(0.3967 0.1408 25.71);
|
|
--color-red-1100: oklch(0.3493 0.1215 25.21);
|
|
|
|
/* Scrollbar colors */
|
|
--color-scrollbar-thumb: var(--color-alpha-black-200);
|
|
--color-scrollbar-thumb-surface-hover: var(--color-alpha-black-300);
|
|
--color-scrollbar-thumb-hover: var(--color-alpha-black-400);
|
|
--color-scrollbar-thumb-active: var(--color-alpha-black-500);
|
|
|
|
/* -------------------- Light mode custom(derived) colors -------------------- */
|
|
/* Background colors */
|
|
--background-color-canvas: var(--color-neutral-300);
|
|
--background-color-surface-1: var(--color-neutral-white);
|
|
--background-color-surface-2: var(--color-neutral-100);
|
|
--background-color-layer-1: var(--color-neutral-200);
|
|
--background-color-layer-1-hover: var(--color-alpha-black-100);
|
|
--background-color-layer-1-active: var(--color-alpha-black-200);
|
|
--background-color-layer-1-selected: var(--color-alpha-black-300);
|
|
--background-color-layer-2: var(--color-neutral-white);
|
|
--background-color-layer-2-hover: var(--color-alpha-black-100);
|
|
--background-color-layer-2-active: var(--color-alpha-black-200);
|
|
--background-color-layer-2-selected: var(--color-alpha-black-300);
|
|
--background-color-layer-3: var(--color-neutral-300);
|
|
--background-color-layer-3-hover: var(--color-alpha-black-100);
|
|
--background-color-layer-3-active: var(--color-alpha-black-200);
|
|
--background-color-layer-3-selected: var(--color-alpha-black-300);
|
|
--background-color-layer-transparent: var(--color-alpha-white-0);
|
|
--background-color-layer-transparent-hover: var(--color-alpha-black-100);
|
|
--background-color-layer-transparent-active: var(--color-alpha-black-200);
|
|
--background-color-layer-transparent-selected: var(--color-alpha-black-300);
|
|
--background-color-layer-disabled: var(--color-neutral-400);
|
|
--background-color-accent-primary: var(--color-brand-default);
|
|
--background-color-accent-primary-hover: var(--color-brand-900);
|
|
--background-color-accent-primary-active: var(--color-brand-1000);
|
|
--background-color-accent-subtle: var(--color-brand-100);
|
|
--background-color-accent-subtle-hover: var(--color-brand-200);
|
|
--background-color-accent-subtle-active: var(--color-brand-300);
|
|
--background-color-success-primary: var(--color-green-700);
|
|
--background-color-success-subtle: var(--color-green-100);
|
|
--background-color-success-subtle-1: var(--color-green-200);
|
|
--background-color-warning-primary: var(--color-amber-600);
|
|
--background-color-warning-subtle: var(--color-amber-100);
|
|
--background-color-danger-primary: var(--color-red-700);
|
|
--background-color-danger-primary-hover: var(--color-red-800);
|
|
--background-color-danger-primary-active: var(--color-red-900);
|
|
--background-color-danger-primary-selected: var(--color-red-900);
|
|
--background-color-danger-subtle: var(--color-red-100);
|
|
--background-color-danger-subtle-hover: var(--color-red-200);
|
|
--background-color-danger-subtle-active: var(--color-red-300);
|
|
--background-color-danger-subtle-selected: var(--color-red-300);
|
|
--background-color-danger-transparent: var(--color-red-100);
|
|
--background-color-danger-transparent-hover: var(--color-red-100);
|
|
--background-color-danger-transparent-active: var(--color-red-100);
|
|
--background-color-danger-transparent-selected: var(--color-red-100);
|
|
--background-color-backdrop: var(--color-alpha-black-400);
|
|
|
|
/* Border colors */
|
|
--border-color-subtle: var(--color-neutral-400);
|
|
--border-color-subtle-1: var(--color-neutral-500);
|
|
--border-color-strong: var(--color-neutral-600);
|
|
--border-color-strong-1: var(--color-neutral-700);
|
|
--border-color-inverse: var(--color-neutral-white);
|
|
--border-color-disabled: var(--color-neutral-300);
|
|
--border-color-accent-strong: var(--color-brand-default);
|
|
--border-color-accent-subtle: var(--color-brand-300);
|
|
--border-color-success-strong: var(--color-green-700);
|
|
--border-color-success-subtle: var(--color-green-300);
|
|
--border-color-warning-strong: var(--color-amber-700);
|
|
--border-color-warning-subtle: var(--color-amber-400);
|
|
--border-color-danger-strong: var(--color-red-700);
|
|
--border-color-danger-subtle: var(--color-red-400);
|
|
|
|
/* Outline colors */
|
|
--outline-color-subtle: var(--border-color-subtle);
|
|
--outline-color-subtle-1: var(--border-color-subtle-1);
|
|
--outline-color-strong: var(--border-color-strong);
|
|
--outline-color-strong-1: var(--border-color-strong-1);
|
|
--outline-color-inverse: var(--border-color-inverse);
|
|
--outline-color-disabled: var(--border-color-disabled);
|
|
--outline-color-accent-strong: var(--border-color-accent-strong);
|
|
--outline-color-accent-subtle: var(--border-color-accent-subtle);
|
|
--outline-color-success-strong: var(--border-color-success-strong);
|
|
--outline-color-success-subtle: var(--border-color-success-subtle);
|
|
--outline-color-warning-strong: var(--border-color-warning-strong);
|
|
--outline-color-warning-subtle: var(--border-color-warning-subtle);
|
|
--outline-color-danger-strong: var(--border-color-danger-strong);
|
|
--outline-color-danger-subtle: var(--border-color-danger-subtle);
|
|
|
|
/* Ring colors */
|
|
--ring-color-subtle: var(--border-color-subtle);
|
|
--ring-color-subtle-1: var(--border-color-subtle-1);
|
|
--ring-color-strong: var(--border-color-strong);
|
|
--ring-color-strong-1: var(--border-color-strong-1);
|
|
--ring-color-inverse: var(--border-color-inverse);
|
|
--ring-color-disabled: var(--border-color-disabled);
|
|
--ring-color-accent-strong: var(--border-color-accent-strong);
|
|
--ring-color-accent-subtle: var(--border-color-accent-subtle);
|
|
--ring-color-success-strong: var(--border-color-success-strong);
|
|
--ring-color-success-subtle: var(--border-color-success-subtle);
|
|
--ring-color-warning-strong: var(--border-color-warning-strong);
|
|
--ring-color-warning-subtle: var(--border-color-warning-subtle);
|
|
--ring-color-danger-strong: var(--border-color-danger-strong);
|
|
--ring-color-danger-subtle: var(--border-color-danger-subtle);
|
|
|
|
/* Text colors */
|
|
--text-color-primary: var(--color-neutral-1200);
|
|
--text-color-secondary: var(--color-neutral-1100);
|
|
--text-color-tertiary: var(--color-neutral-1000);
|
|
--text-color-placeholder: var(--color-neutral-900);
|
|
--text-color-disabled: var(--color-neutral-800);
|
|
--text-color-accent-primary: var(--color-brand-default);
|
|
--text-color-accent-secondary: var(--color-brand-700);
|
|
--text-color-on-color: var(--color-neutral-100);
|
|
--text-color-on-color-disabled: var(--color-alpha-black-400);
|
|
--text-color-inverse: var(--color-neutral-white);
|
|
--text-color-success: var(--color-green-700);
|
|
--text-color-success-primary: var(--color-green-900);
|
|
--text-color-success-secondary: var(--color-green-700);
|
|
--text-color-warning: var(--color-amber-700);
|
|
--text-color-warning-primary: var(--color-amber-900);
|
|
--text-color-warning-secondary: var(--color-amber-700);
|
|
--text-color-danger: var(--color-red-700);
|
|
--text-color-danger-primary: var(--color-red-900);
|
|
--text-color-danger-secondary: var(--color-red-700);
|
|
|
|
/* Stroke colors */
|
|
--stroke-primary: var(--text-color-primary);
|
|
--stroke-secondary: var(--text-color-secondary);
|
|
--stroke-tertiary: var(--text-color-tertiary);
|
|
--stroke-placeholder: var(--text-color-placeholder);
|
|
--stroke-disabled: var(--text-color-disabled);
|
|
--stroke-accent-primary: var(--text-color-accent-primary);
|
|
--stroke-accent-secondary: var(--text-color-accent-secondary);
|
|
--stroke-on-color: var(--text-color-on-color);
|
|
--stroke-on-color-disabled: var(--text-color-on-color-disabled);
|
|
--stroke-inverse: var(--text-color-inverse);
|
|
--stroke-success: var(--text-color-success);
|
|
--stroke-success-primary: var(--text-color-success-primary);
|
|
--stroke-success-secondary: var(--text-color-success-secondary);
|
|
--stroke-warning: var(--text-color-warning);
|
|
--stroke-warning-primary: var(--text-color-warning-primary);
|
|
--stroke-warning-secondary: var(--text-color-warning-secondary);
|
|
--stroke-danger: var(--text-color-danger);
|
|
--stroke-danger-primary: var(--text-color-danger-primary);
|
|
--stroke-danger-secondary: var(--text-color-danger-secondary);
|
|
|
|
/* Fill colors */
|
|
--fill-primary: var(--text-color-primary);
|
|
--fill-secondary: var(--text-color-secondary);
|
|
--fill-tertiary: var(--text-color-tertiary);
|
|
--fill-placeholder: var(--text-color-placeholder);
|
|
--fill-disabled: var(--text-color-disabled);
|
|
--fill-accent-primary: var(--text-color-accent-primary);
|
|
--fill-accent-secondary: var(--text-color-accent-secondary);
|
|
--fill-on-color: var(--text-color-on-color);
|
|
--fill-on-color-disabled: var(--text-color-on-color-disabled);
|
|
--fill-inverse: var(--text-color-inverse);
|
|
--fill-success: var(--text-color-success);
|
|
--fill-success-primary: var(--text-color-success-primary);
|
|
--fill-success-secondary: var(--text-color-success-secondary);
|
|
--fill-warning: var(--text-color-warning);
|
|
--fill-warning-primary: var(--text-color-warning-primary);
|
|
--fill-warning-secondary: var(--text-color-warning-secondary);
|
|
--fill-danger: var(--text-color-danger);
|
|
--fill-danger-primary: var(--text-color-danger-primary);
|
|
--fill-danger-secondary: var(--text-color-danger-secondary);
|
|
|
|
/* Icon colors */
|
|
--text-color-icon-primary: var(--color-neutral-1200);
|
|
--text-color-icon-accent-subtle: var(--color-brand-500);
|
|
--text-color-icon-accent-primary: var(--color-brand-default);
|
|
--text-color-icon-danger-primary: var(--color-red-900);
|
|
--text-color-icon-danger-secondary: var(--color-red-700);
|
|
--text-color-icon-success-primary: var(--color-green-900);
|
|
--text-color-icon-success-secondary: var(--color-green-700);
|
|
--text-color-icon-warning-primary: var(--color-amber-900);
|
|
--text-color-icon-warning-secondary: var(--color-amber-700);
|
|
--text-color-icon-accent-primary-inverse: var(--color-brand-900);
|
|
--text-color-icon-accent-secondary: var(--color-brand-1200);
|
|
--text-color-icon-secondary: var(--color-neutral-1100);
|
|
--text-color-icon-tertiary: var(--color-neutral-900);
|
|
--text-color-icon-placeholder: var(--color-neutral-800);
|
|
--text-color-icon-disabled: var(--color-neutral-700);
|
|
--text-color-icon-danger: var(--color-red-700);
|
|
--text-color-icon-on-color: var(--color-neutral-white);
|
|
--text-color-icon-on-color-disabled: var(--color-alpha-black-400);
|
|
--text-color-icon-inverse: var(--color-neutral-white);
|
|
|
|
/* Link colors */
|
|
--text-color-link-primary: var(--color-brand-default);
|
|
--text-color-link-primary-hover: var(--color-brand-900);
|
|
--text-color-link-secondary: var(--color-neutral-900);
|
|
|
|
/* Label colors */
|
|
--color-label-indigo-bg: var(--extended-color-indigo-100);
|
|
--color-label-indigo-bg-strong: var(--extended-color-indigo-700);
|
|
--color-label-indigo-hover: var(--extended-color-indigo-300);
|
|
--color-label-indigo-icon: var(--extended-color-indigo-700);
|
|
--color-label-indigo-text: var(--extended-color-indigo-700);
|
|
--color-label-indigo-border: var(--extended-color-indigo-700);
|
|
--color-label-indigo-focus: var(--extended-color-indigo-500);
|
|
--color-label-emerald-bg: var(--extended-color-emerald-50);
|
|
--color-label-emerald-bg-strong: var(--extended-color-emerald-600);
|
|
--color-label-emerald-hover: var(--extended-color-emerald-200);
|
|
--color-label-emerald-icon: var(--extended-color-emerald-600);
|
|
--color-label-emerald-text: var(--extended-color-emerald-800);
|
|
--color-label-emerald-border: var(--extended-color-emerald-800);
|
|
--color-label-emerald-focus: var(--extended-color-emerald-700);
|
|
--color-label-grey-bg: var(--extended-color-grey-50);
|
|
--color-label-grey-bg-strong: var(--extended-color-grey-700);
|
|
--color-label-grey-hover: var(--extended-color-grey-100);
|
|
--color-label-grey-icon: var(--extended-color-grey-700);
|
|
--color-label-grey-text: var(--extended-color-grey-700);
|
|
--color-label-grey-border: var(--extended-color-grey-700);
|
|
--color-label-grey-focus: var(--extended-color-grey-500);
|
|
--color-label-crimson-bg: var(--extended-color-crimson-50);
|
|
--color-label-crimson-bg-strong: var(--extended-color-crimson-700);
|
|
--color-label-crimson-hover: var(--extended-color-crimson-100);
|
|
--color-label-crimson-icon: var(--extended-color-crimson-700);
|
|
--color-label-crimson-text: var(--extended-color-crimson-700);
|
|
--color-label-crimson-border: var(--extended-color-crimson-700);
|
|
--color-label-crimson-focus: var(--extended-color-crimson-500);
|
|
--color-label-yellow-bg: var(--extended-color-yellow-50);
|
|
--color-label-yellow-bg-strong: var(--extended-color-yellow-600);
|
|
--color-label-yellow-hover: var(--extended-color-yellow-100);
|
|
--color-label-yellow-icon: var(--extended-color-yellow-600);
|
|
--color-label-yellow-text: var(--extended-color-yellow-600);
|
|
--color-label-yellow-border: var(--extended-color-yellow-600);
|
|
--color-label-yellow-focus: var(--extended-color-yellow-400);
|
|
|
|
/* Illustration colors */
|
|
--illustration-fill-primary: var(--color-neutral-white);
|
|
--illustration-fill-secondary: var(--color-neutral-200);
|
|
--illustration-fill-tertiary: var(--color-neutral-400);
|
|
--illustration-fill-quaternary: var(--color-neutral-700);
|
|
--illustration-stroke-primary: var(--color-neutral-700);
|
|
--illustration-stroke-secondary: var(--color-neutral-800);
|
|
--illustration-stroke-tertiary: var(--color-neutral-1200);
|
|
|
|
/* Neutral plan colors */
|
|
--text-color-plans-neutral-primary: var(--color-neutral-1000);
|
|
--text-color-plans-neutral-color: var(--color-neutral-100);
|
|
--background-color-plans-neutral-subtle: var(--color-neutral-400);
|
|
--background-color-plans-neutral-solid: var(--color-neutral-1200);
|
|
|
|
/* Brand plan colors */
|
|
--text-color-plans-brand-primary: var(--color-brand-1200);
|
|
--text-color-plans-brand-color: var(--color-neutral-100);
|
|
--background-color-plans-brand-subtle: var(--color-brand-200);
|
|
--background-color-plans-brand-solid: var(--color-brand-1200);
|
|
}
|
|
|
|
@layer theme {
|
|
:root,
|
|
:host {
|
|
/* ---------- Dark mode color tokens ---------- */
|
|
@variant dark {
|
|
/* Neutral colors */
|
|
--color-neutral-black: oklch(0.1689 0.0021 286.18);
|
|
--color-neutral-100: oklch(0.2039 0.0025 247.95);
|
|
--color-neutral-200: oklch(0.216 0.0037 228.98);
|
|
--color-neutral-300: oklch(0.2376 0.0036 228.95);
|
|
--color-neutral-400: oklch(0.2586 0.0035 228.93);
|
|
--color-neutral-500: oklch(0.302 0.0067 229.06);
|
|
--color-neutral-600: oklch(0.3421 0.0045 219.61);
|
|
--color-neutral-700: oklch(0.3996 0.0052 236.62);
|
|
--color-neutral-800: oklch(0.6994 0.0072 233.69);
|
|
--color-neutral-900: oklch(0.7485 0.0063 239.85);
|
|
--color-neutral-1000: oklch(0.7966 0.0044 236.51);
|
|
--color-neutral-1100: oklch(0.8463 0.0036 219.54);
|
|
--color-neutral-1200: oklch(0.9237 0.0026 228.79);
|
|
--color-neutral-white: oklch(0.9702 0 0);
|
|
|
|
/* Brand colors */
|
|
--color-brand-100: oklch(0.2029 0.03 232.24);
|
|
--color-brand-200: oklch(0.2513 0.0418 234.6);
|
|
--color-brand-300: oklch(0.3208 0.05806 236.44);
|
|
--color-brand-400: oklch(0.4088 0.077702 237.13);
|
|
--color-brand-500: oklch(0.4511 0.087024 237.37);
|
|
--color-brand-700: oklch(0.7408 0.100309 233.89);
|
|
--color-brand-800: oklch(0.8318 0.065614 232.07);
|
|
--color-brand-900: oklch(0.8969 0.040089 231.35);
|
|
--color-brand-1000: oklch(0.9409 0.022883 231.01);
|
|
--color-brand-1100: oklch(0.9704 0.011421 230.82);
|
|
--color-brand-1200: oklch(0.9856 0.005 228.82);
|
|
--color-brand-default: oklch(0.6311 0.126281 238.01);
|
|
|
|
/* Green colors */
|
|
--color-green-100: oklch(0.2721 0.067322 152.52);
|
|
--color-green-200: oklch(0.3935 0.0957 152.28);
|
|
--color-green-300: oklch(0.4468 0.1187 151.4);
|
|
--color-green-400: oklch(0.5296 0.149485 148.9899);
|
|
--color-green-500: oklch(0.632 0.185972 147.3695);
|
|
--color-green-600: oklch(0.7289 0.2119 147.82);
|
|
--color-green-700: oklch(0.7914 0.2091 151.66);
|
|
--color-green-800: oklch(0.8704 0.149 154.62);
|
|
--color-green-900: oklch(0.9258 0.0845 155.86);
|
|
--color-green-1000: oklch(0.9624 0.0434 156.74);
|
|
--color-green-1100: oklch(0.9819 0.0181 155.83);
|
|
|
|
/* Amber colors */
|
|
--color-amber-100: oklch(0.3042 0.0853 45.16);
|
|
--color-amber-200: oklch(0.4149 0.1126 45.88);
|
|
--color-amber-300: oklch(0.4747 0.135757 44.9806);
|
|
--color-amber-400: oklch(0.557 0.158291 45.3594);
|
|
--color-amber-500: oklch(0.6671 0.1685 53.38);
|
|
--color-amber-600: oklch(0.7724 0.172798 65.367);
|
|
--color-amber-700: oklch(0.829 0.1712 81.04);
|
|
--color-amber-800: oklch(0.8781 0.1688 91.86);
|
|
--color-amber-900: oklch(0.9244 0.1203 95.85);
|
|
--color-amber-1000: oklch(0.9617 0.0592 95.89);
|
|
--color-amber-1100: oklch(0.9869 0.0214 95.28);
|
|
|
|
/* Red colors */
|
|
--color-red-100: oklch(0.2615 0.085 24.41);
|
|
--color-red-200: oklch(0.3967 0.1408 25.71);
|
|
--color-red-300: oklch(0.4446 0.1774 26.79);
|
|
--color-red-400: oklch(0.5095 0.208583 28.513);
|
|
--color-red-500: oklch(0.583 0.238666 28.4765);
|
|
--color-red-600: oklch(0.6378 0.2373 25.44);
|
|
--color-red-700: oklch(0.7022 0.1892 22.23);
|
|
--color-red-800: oklch(0.8053 0.1109 19.78);
|
|
--color-red-900: oklch(0.8834 0.0616 18.39);
|
|
--color-red-1000: oklch(0.9365 0.032 17.74);
|
|
--color-red-1100: oklch(0.9705 0.0129 17.38);
|
|
|
|
/* Scrollbar colors */
|
|
--color-scrollbar-thumb: var(--color-alpha-white-200);
|
|
--color-scrollbar-thumb-surface-hover: var(--color-alpha-white-300);
|
|
--color-scrollbar-thumb-hover: var(--color-alpha-white-400);
|
|
--color-scrollbar-thumb-active: var(--color-alpha-white-500);
|
|
|
|
/* -------------------- Dark mode derived colors -------------------- */
|
|
/* Background colors */
|
|
--background-color-canvas: var(--color-neutral-black);
|
|
--background-color-surface-1: var(--color-neutral-100);
|
|
--background-color-surface-2: var(--color-neutral-100);
|
|
--background-color-layer-1: var(--color-neutral-200);
|
|
--background-color-layer-1-hover: var(--color-alpha-white-100);
|
|
--background-color-layer-1-active: var(--color-alpha-white-200);
|
|
--background-color-layer-1-selected: var(--color-alpha-white-300);
|
|
--background-color-layer-2: var(--color-neutral-300);
|
|
--background-color-layer-2-hover: var(--color-alpha-white-100);
|
|
--background-color-layer-2-active: var(--color-alpha-white-200);
|
|
--background-color-layer-2-selected: var(--color-alpha-white-300);
|
|
--background-color-layer-3: var(--color-neutral-400);
|
|
--background-color-layer-3-hover: var(--color-alpha-white-100);
|
|
--background-color-layer-3-active: var(--color-alpha-white-200);
|
|
--background-color-layer-3-selected: var(--color-alpha-white-300);
|
|
--background-color-layer-transparent: var(--color-alpha-black-0);
|
|
--background-color-layer-transparent-hover: var(--color-alpha-white-100);
|
|
--background-color-layer-transparent-active: var(--color-alpha-white-200);
|
|
--background-color-layer-transparent-selected: var(--color-alpha-white-300);
|
|
--background-color-layer-disabled: var(--color-neutral-700);
|
|
--background-color-accent-primary: var(--color-brand-default);
|
|
--background-color-accent-primary-hover: var(--color-brand-500);
|
|
--background-color-accent-primary-active: var(--color-brand-400);
|
|
--background-color-accent-subtle: var(--color-brand-100);
|
|
--background-color-accent-subtle-hover: var(--color-brand-200);
|
|
--background-color-accent-subtle-active: var(--color-brand-300);
|
|
--background-color-success-primary: var(--color-green-700);
|
|
--background-color-success-subtle: var(--color-green-100);
|
|
--background-color-success-subtle-1: var(--color-green-100);
|
|
--background-color-warning-primary: var(--color-amber-600);
|
|
--background-color-warning-subtle: var(--color-amber-100);
|
|
--background-color-danger-primary: var(--color-red-300);
|
|
--background-color-danger-primary-hover: var(--color-red-400);
|
|
--background-color-danger-primary-active: var(--color-red-500);
|
|
--background-color-danger-primary-selected: var(--color-red-500);
|
|
--background-color-danger-subtle: var(--color-red-100);
|
|
--background-color-danger-subtle-hover: var(--color-red-200);
|
|
--background-color-danger-subtle-active: var(--color-red-300);
|
|
--background-color-danger-subtle-selected: var(--color-red-300);
|
|
--background-color-danger-transparent: var(--color-red-100);
|
|
--background-color-danger-transparent-hover: var(--color-red-100);
|
|
--background-color-danger-transparent-active: var(--color-red-100);
|
|
--background-color-danger-transparent-selected: var(--color-red-100);
|
|
--background-color-backdrop: var(--color-alpha-white-200);
|
|
|
|
/* Border colors */
|
|
--border-color-subtle: var(--color-neutral-400);
|
|
--border-color-subtle-1: var(--color-neutral-500);
|
|
--border-color-strong: var(--color-neutral-600);
|
|
--border-color-strong-1: var(--color-neutral-700);
|
|
--border-color-inverse: var(--color-neutral-100);
|
|
--border-color-disabled: var(--color-neutral-300);
|
|
--border-color-accent-strong: var(--color-brand-default);
|
|
--border-color-accent-subtle: var(--color-brand-300);
|
|
--border-color-success-strong: var(--color-green-400);
|
|
--border-color-success-subtle: var(--color-green-200);
|
|
--border-color-warning-strong: var(--color-amber-400);
|
|
--border-color-warning-subtle: var(--color-amber-200);
|
|
--border-color-danger-strong: var(--color-red-400);
|
|
--border-color-danger-subtle: var(--color-red-200);
|
|
|
|
/* Text colors */
|
|
--text-color-primary: var(--color-neutral-1200);
|
|
--text-color-secondary: var(--color-neutral-1100);
|
|
--text-color-tertiary: var(--color-neutral-1000);
|
|
--text-color-placeholder: var(--color-neutral-900);
|
|
--text-color-disabled: var(--color-neutral-800);
|
|
--text-color-accent-primary: var(--color-brand-default);
|
|
--text-color-accent-secondary: var(--color-brand-700);
|
|
--text-color-on-color: var(--color-neutral-1200);
|
|
--text-color-on-color-disabled: var(--color-alpha-white-400);
|
|
--text-color-inverse: var(--color-neutral-black);
|
|
--text-color-success: var(--color-green-700);
|
|
--text-color-success-primary: var(--color-green-900);
|
|
--text-color-success-secondary: var(--color-green-700);
|
|
--text-color-warning: var(--color-amber-700);
|
|
--text-color-warning-primary: var(--color-amber-900);
|
|
--text-color-warning-secondary: var(--color-amber-700);
|
|
--text-color-danger: var(--color-red-700);
|
|
--text-color-danger-primary: var(--color-red-900);
|
|
--text-color-danger-secondary: var(--color-red-700);
|
|
|
|
/* Icon colors */
|
|
--text-color-icon-primary: var(--color-neutral-1200);
|
|
--text-color-icon-accent-subtle: var(--color-brand-700);
|
|
--text-color-icon-accent-primary: var(--color-brand-default);
|
|
--text-color-icon-accent-primary-inverse: var(--color-brand-900);
|
|
--text-color-icon-accent-secondary: var(--color-brand-1200);
|
|
--text-color-icon-danger-primary: var(--color-red-900);
|
|
--text-color-icon-danger-secondary: var(--color-red-700);
|
|
--text-color-icon-success-primary: var(--color-green-900);
|
|
--text-color-icon-success-secondary: var(--color-green-700);
|
|
--text-color-icon-warning-primary: var(--color-amber-900);
|
|
--text-color-icon-warning-secondary: var(--color-amber-700);
|
|
--text-color-icon-secondary: var(--color-neutral-1100);
|
|
--text-color-icon-tertiary: var(--color-neutral-1000);
|
|
--text-color-icon-placeholder: var(--color-neutral-800);
|
|
--text-color-icon-disabled: var(--color-neutral-700);
|
|
--text-color-icon-danger: var(--color-red-700);
|
|
--text-color-icon-on-color: var(--color-neutral-white);
|
|
--text-color-icon-on-color-disabled: var(--color-alpha-white-400);
|
|
--text-color-icon-inverse: var(--color-neutral-black);
|
|
|
|
/* Link colors */
|
|
--text-color-link-primary: var(--color-brand-default);
|
|
--text-color-link-primary-hover: var(--color-brand-700);
|
|
--text-color-link-secondary: var(--color-neutral-1100);
|
|
|
|
/* Label colors */
|
|
--color-label-indigo-bg: var(--extended-color-indigo-800);
|
|
--color-label-indigo-bg-strong: var(--extended-color-indigo-500);
|
|
--color-label-indigo-hover: var(--extended-color-indigo-700);
|
|
--color-label-indigo-icon: var(--extended-color-indigo-500);
|
|
--color-label-indigo-text: var(--extended-color-indigo-500);
|
|
--color-label-indigo-border: var(--extended-color-indigo-500);
|
|
--color-label-indigo-focus: var(--extended-color-indigo-400);
|
|
--color-label-emerald-bg: var(--extended-color-emerald-700);
|
|
--color-label-emerald-bg-strong: var(--extended-color-emerald-600);
|
|
--color-label-emerald-hover: var(--extended-color-emerald-800);
|
|
--color-label-emerald-icon: var(--extended-color-emerald-600);
|
|
--color-label-emerald-text: var(--extended-color-emerald-400);
|
|
--color-label-emerald-border: var(--extended-color-emerald-400);
|
|
--color-label-emerald-focus: var(--extended-color-emerald-700);
|
|
--color-label-grey-bg: var(--extended-color-grey-800);
|
|
--color-label-grey-bg-strong: var(--extended-color-grey-500);
|
|
--color-label-grey-hover: var(--extended-color-grey-700);
|
|
--color-label-grey-icon: var(--extended-color-grey-500);
|
|
--color-label-grey-text: var(--extended-color-grey-500);
|
|
--color-label-grey-border: var(--extended-color-grey-500);
|
|
--color-label-grey-focus: var(--extended-color-grey-400);
|
|
--color-label-crimson-bg: var(--extended-color-crimson-800);
|
|
--color-label-crimson-bg-strong: var(--extended-color-crimson-500);
|
|
--color-label-crimson-hover: var(--extended-color-crimson-700);
|
|
--color-label-crimson-icon: var(--extended-color-crimson-500);
|
|
--color-label-crimson-text: var(--extended-color-crimson-500);
|
|
--color-label-crimson-border: var(--extended-color-crimson-500);
|
|
--color-label-crimson-focus: var(--extended-color-crimson-400);
|
|
--color-label-yellow-bg: var(--extended-color-yellow-900);
|
|
--color-label-yellow-bg-strong: var(--extended-color-yellow-500);
|
|
--color-label-yellow-hover: var(--extended-color-yellow-800);
|
|
--color-label-yellow-icon: var(--extended-color-yellow-500);
|
|
--color-label-yellow-text: var(--extended-color-yellow-500);
|
|
--color-label-yellow-border: var(--extended-color-yellow-500);
|
|
--color-label-yellow-focus: var(--extended-color-yellow-400);
|
|
|
|
/* Illustration colors */
|
|
--illustration-fill-primary: var(--color-neutral-400);
|
|
--illustration-fill-secondary: var(--color-neutral-500);
|
|
--illustration-fill-tertiary: var(--color-neutral-700);
|
|
--illustration-fill-quaternary: var(--color-neutral-700);
|
|
--illustration-stroke-primary: var(--color-neutral-700);
|
|
--illustration-stroke-secondary: var(--color-neutral-800);
|
|
--illustration-stroke-tertiary: var(--color-neutral-1000);
|
|
|
|
/* Neutral plan colors */
|
|
--text-color-plans-neutral-primary: var(--color-neutral-1000);
|
|
--text-color-plans-neutral-color: var(--color-neutral-100);
|
|
--background-color-plans-neutral-subtle: var(--color-neutral-500);
|
|
--background-color-plans-neutral-solid: var(--color-neutral-1100);
|
|
|
|
/* Brand plan colors */
|
|
--text-color-plans-brand-primary: var(--color-brand-1000);
|
|
--text-color-plans-brand-color: var(--color-brand-100);
|
|
--background-color-plans-brand-subtle: var(--color-brand-200);
|
|
--background-color-plans-brand-solid: var(--colo-brand-1100);
|
|
}
|
|
|
|
/* -------------------- Dark high contrast mode derived colors -------------------- */
|
|
@variant dark-high-contrast {
|
|
/* Border colors */
|
|
--border-color-subtle: var(--color-neutral-1200);
|
|
--border-color-subtle-1: var(--color-neutral-1100);
|
|
--border-color-strong: var(--color-neutral-1000);
|
|
--border-color-strong-1: var(--color-neutral-900);
|
|
--border-color-inverse: var(--color-neutral-white);
|
|
--border-color-disabled: var(--color-neutral-700);
|
|
--border-color-accent-strong: var(--color-brand-default);
|
|
--border-color-accent-subtle: var(--color-brand-300);
|
|
--border-color-success-strong: var(--color-green-400);
|
|
--border-color-success-subtle: var(--color-green-200);
|
|
--border-color-warning-strong: var(--color-amber-400);
|
|
--border-color-warning-subtle: var(--color-amber-200);
|
|
--border-color-danger-strong: var(--color-red-400);
|
|
--border-color-danger-subtle: var(--color-red-200);
|
|
}
|
|
|
|
/* -------------------- Light high contrast mode derived colors -------------------- */
|
|
@variant light-high-contrast {
|
|
/* Border colors */
|
|
--border-color-subtle: var(--color-neutral-1200);
|
|
--border-color-subtle-1: var(--color-neutral-1100);
|
|
--border-color-strong: var(--color-neutral-1000);
|
|
--border-color-strong-1: var(--color-neutral-900);
|
|
--border-color-inverse: var(--color-neutral-black);
|
|
--border-color-disabled: var(--color-neutral-700);
|
|
--border-color-accent-strong: var(--color-brand-default);
|
|
--border-color-accent-subtle: var(--color-brand-300);
|
|
--border-color-success-strong: var(--color-green-700);
|
|
--border-color-success-subtle: var(--color-green-600);
|
|
--border-color-warning-strong: var(--color-amber-700);
|
|
--border-color-warning-subtle: var(--color-amber-400);
|
|
--border-color-danger-strong: var(--color-red-700);
|
|
--border-color-danger-subtle: var(--color-red-400);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ---------- Typography tokens ---------- */
|
|
@theme {
|
|
/* ---------- Font family ---------- */
|
|
--font-*: initial;
|
|
--font-heading:
|
|
"Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
|
"Noto Color Emoji";
|
|
--font-body:
|
|
"Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
|
"Noto Color Emoji";
|
|
--font-code:
|
|
"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
|
|
/* ---------- Font weight ---------- */
|
|
--font-weight-*: initial;
|
|
--font-weight-light: 300;
|
|
--font-weight-regular: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
--font-weight-heavy: 800;
|
|
|
|
/* ---------- Font size ---------- */
|
|
--text-*: initial;
|
|
--text-9: 0.5625rem;
|
|
--text-10: 0.625rem;
|
|
--text-11: 0.6875rem;
|
|
--text-12: 0.75rem;
|
|
--text-13: 0.8125rem;
|
|
--text-14: 0.875rem;
|
|
--text-16: 1rem;
|
|
--text-18: 1.125rem;
|
|
--text-20: 1.25rem;
|
|
--text-24: 1.5rem;
|
|
--text-28: 1.75rem;
|
|
--text-32: 2rem;
|
|
--text-40: 2.5rem;
|
|
|
|
/* ---------- Letter spacing ---------- */
|
|
--tracking-*: initial;
|
|
--tracking-extra-tight: -0.025rem;
|
|
--tracking-tight: -0.05rem;
|
|
--tracking-default: 0;
|
|
--tracking-wide: 0.05rem;
|
|
|
|
/* ---------- Heading text tokens ---------- */
|
|
--text-h1-regular: var(--text-32);
|
|
--text-h1-regular--line-height: 1.2;
|
|
--text-h1-regular--letter-spacing: var(--tracking-default);
|
|
--text-h1-regular--font-weight: var(--font-weight-regular);
|
|
|
|
--text-h1-medium: var(--text-32);
|
|
--text-h1-medium--line-height: 1.2;
|
|
--text-h1-medium--letter-spacing: var(--tracking-default);
|
|
--text-h1-medium--font-weight: var(--font-weight-medium);
|
|
|
|
--text-h1-semibold: var(--text-32);
|
|
--text-h1-semibold--line-height: 1.2;
|
|
--text-h1-semibold--letter-spacing: var(--tracking-default);
|
|
--text-h1-semibold--font-weight: var(--font-weight-semibold);
|
|
|
|
--text-h1-bold: var(--text-32);
|
|
--text-h1-bold--line-height: 1.2;
|
|
--text-h1-bold--letter-spacing: var(--tracking-default);
|
|
--text-h1-bold--font-weight: var(--font-weight-bold);
|
|
|
|
--text-h2-regular: var(--text-28);
|
|
--text-h2-regular--line-height: 1.2;
|
|
--text-h2-regular--letter-spacing: var(--tracking-default);
|
|
--text-h2-regular--font-weight: var(--font-weight-regular);
|
|
|
|
--text-h2-medium: var(--text-28);
|
|
--text-h2-medium--line-height: 1.2;
|
|
--text-h2-medium--letter-spacing: var(--tracking-default);
|
|
--text-h2-medium--font-weight: var(--font-weight-medium);
|
|
|
|
--text-h2-semibold: var(--text-28);
|
|
--text-h2-semibold--line-height: 1.2;
|
|
--text-h2-semibold--letter-spacing: var(--tracking-default);
|
|
--text-h2-semibold--font-weight: var(--font-weight-semibold);
|
|
|
|
--text-h2-bold: var(--text-28);
|
|
--text-h2-bold--line-height: 1.2;
|
|
--text-h2-bold--letter-spacing: var(--tracking-default);
|
|
--text-h2-bold--font-weight: var(--font-weight-bold);
|
|
|
|
--text-h3-regular: var(--text-24);
|
|
--text-h3-regular--line-height: 1.2;
|
|
--text-h3-regular--letter-spacing: var(--tracking-default);
|
|
--text-h3-regular--font-weight: var(--font-weight-regular);
|
|
|
|
--text-h3-medium: var(--text-24);
|
|
--text-h3-medium--line-height: 1.2;
|
|
--text-h3-medium--letter-spacing: var(--tracking-default);
|
|
--text-h3-medium--font-weight: var(--font-weight-medium);
|
|
|
|
--text-h3-semibold: var(--text-24);
|
|
--text-h3-semibold--line-height: 1.2;
|
|
--text-h3-semibold--letter-spacing: var(--tracking-default);
|
|
--text-h3-semibold--font-weight: var(--font-weight-semibold);
|
|
|
|
--text-h3-bold: var(--text-24);
|
|
--text-h3-bold--line-height: 1.2;
|
|
--text-h3-bold--letter-spacing: var(--tracking-default);
|
|
--text-h3-bold--font-weight: var(--font-weight-bold);
|
|
|
|
--text-h4-regular: var(--text-20);
|
|
--text-h4-regular--line-height: 1.2;
|
|
--text-h4-regular--letter-spacing: var(--tracking-default);
|
|
--text-h4-regular--font-weight: var(--font-weight-regular);
|
|
|
|
--text-h4-medium: var(--text-20);
|
|
--text-h4-medium--line-height: 1.2;
|
|
--text-h4-medium--letter-spacing: var(--tracking-default);
|
|
--text-h4-medium--font-weight: var(--font-weight-medium);
|
|
|
|
--text-h4-semibold: var(--text-20);
|
|
--text-h4-semibold--line-height: 1.2;
|
|
--text-h4-semibold--letter-spacing: var(--tracking-default);
|
|
--text-h4-semibold--font-weight: var(--font-weight-semibold);
|
|
|
|
--text-h4-bold: var(--text-20);
|
|
--text-h4-bold--line-height: 1.2;
|
|
--text-h4-bold--letter-spacing: var(--tracking-default);
|
|
--text-h4-bold--font-weight: var(--font-weight-bold);
|
|
|
|
--text-h5-regular: var(--text-16);
|
|
--text-h5-regular--line-height: 1.2;
|
|
--text-h5-regular--letter-spacing: var(--tracking-default);
|
|
--text-h5-regular--font-weight: var(--font-weight-regular);
|
|
|
|
--text-h5-medium: var(--text-16);
|
|
--text-h5-medium--line-height: 1.2;
|
|
--text-h5-medium--letter-spacing: var(--tracking-default);
|
|
--text-h5-medium--font-weight: var(--font-weight-medium);
|
|
|
|
--text-h5-semibold: var(--text-16);
|
|
--text-h5-semibold--line-height: 1.2;
|
|
--text-h5-semibold--letter-spacing: var(--tracking-default);
|
|
--text-h5-semibold--font-weight: var(--font-weight-semibold);
|
|
|
|
--text-h5-bold: var(--text-16);
|
|
--text-h5-bold--line-height: 1.2;
|
|
--text-h5-bold--letter-spacing: var(--tracking-default);
|
|
--text-h5-bold--font-weight: var(--font-weight-bold);
|
|
|
|
--text-h6-regular: var(--text-14);
|
|
--text-h6-regular--line-height: 1.2;
|
|
--text-h6-regular--letter-spacing: var(--tracking-default);
|
|
--text-h6-regular--font-weight: var(--font-weight-regular);
|
|
|
|
--text-h6-medium: var(--text-14);
|
|
--text-h6-medium--line-height: 1.2;
|
|
--text-h6-medium--letter-spacing: var(--tracking-default);
|
|
--text-h6-medium--font-weight: var(--font-weight-medium);
|
|
|
|
--text-h6-semibold: var(--text-14);
|
|
--text-h6-semibold--line-height: 1.2;
|
|
--text-h6-semibold--letter-spacing: var(--tracking-default);
|
|
--text-h6-semibold--font-weight: var(--font-weight-semibold);
|
|
|
|
--text-h6-bold: var(--text-14);
|
|
--text-h6-bold--line-height: 1.2;
|
|
--text-h6-bold--letter-spacing: var(--tracking-default);
|
|
--text-h6-bold--font-weight: var(--font-weight-bold);
|
|
|
|
/* ---------- Body text tokens ---------- */
|
|
--text-body-md-regular: var(--text-16);
|
|
--text-body-md-regular--line-height: 1.4;
|
|
--text-body-md-regular--letter-spacing: calc(0.01 * var(--text-16));
|
|
--text-body-md-regular--font-weight: var(--font-weight-regular);
|
|
|
|
--text-body-md-medium: var(--text-16);
|
|
--text-body-md-medium--line-height: 1.4;
|
|
--text-body-md-medium--letter-spacing: calc(0.01 * var(--text-16));
|
|
--text-body-md-medium--font-weight: var(--font-weight-medium);
|
|
|
|
--text-body-md-semibold: var(--text-16);
|
|
--text-body-md-semibold--line-height: 1.4;
|
|
--text-body-md-semibold--letter-spacing: calc(0.01 * var(--text-16));
|
|
--text-body-md-semibold--font-weight: var(--font-weight-semibold);
|
|
|
|
--text-body-md-bold: var(--text-16);
|
|
--text-body-md-bold--line-height: 1.4;
|
|
--text-body-md-bold--letter-spacing: calc(0.01 * var(--text-16));
|
|
--text-body-md-bold--font-weight: var(--font-weight-bold);
|
|
|
|
--text-body-sm-regular: var(--text-14);
|
|
--text-body-sm-regular--line-height: 1.4;
|
|
--text-body-sm-regular--letter-spacing: calc(0.01 * var(--text-14));
|
|
--text-body-sm-regular--font-weight: var(--font-weight-regular);
|
|
|
|
--text-body-sm-medium: var(--text-14);
|
|
--text-body-sm-medium--line-height: 1.4;
|
|
--text-body-sm-medium--letter-spacing: calc(0.01 * var(--text-14));
|
|
--text-body-sm-medium--font-weight: var(--font-weight-medium);
|
|
|
|
--text-body-sm-semibold: var(--text-14);
|
|
--text-body-sm-semibold--line-height: 1.4;
|
|
--text-body-sm-semibold--letter-spacing: calc(0.01 * var(--text-14));
|
|
--text-body-sm-semibold--font-weight: var(--font-weight-semibold);
|
|
|
|
--text-body-sm-bold: var(--text-14);
|
|
--text-body-sm-bold--line-height: 1.4;
|
|
--text-body-sm-bold--letter-spacing: calc(0.01 * var(--text-14));
|
|
--text-body-sm-bold--font-weight: var(--font-weight-bold);
|
|
|
|
--text-body-xs-regular: var(--text-13);
|
|
--text-body-xs-regular--line-height: 1.4;
|
|
--text-body-xs-regular--letter-spacing: calc(0.01 * var(--text-13));
|
|
--text-body-xs-regular--font-weight: var(--font-weight-regular);
|
|
|
|
--text-body-xs-medium: var(--text-13);
|
|
--text-body-xs-medium--line-height: 1.4;
|
|
--text-body-xs-medium--letter-spacing: calc(0.01 * var(--text-13));
|
|
--text-body-xs-medium--font-weight: var(--font-weight-medium);
|
|
|
|
--text-body-xs-semibold: var(--text-13);
|
|
--text-body-xs-semibold--line-height: 1.4;
|
|
--text-body-xs-semibold--letter-spacing: calc(0.01 * var(--text-13));
|
|
--text-body-xs-semibold--font-weight: var(--font-weight-semibold);
|
|
|
|
--text-body-xs-bold: var(--text-13);
|
|
--text-body-xs-bold--line-height: 1.4;
|
|
--text-body-xs-bold--letter-spacing: calc(0.01 * var(--text-13));
|
|
--text-body-xs-bold--font-weight: var(--font-weight-bold);
|
|
|
|
--text-caption-md-regular: var(--text-12);
|
|
--text-caption-md-regular--line-height: 1.1;
|
|
--text-caption-md-regular--letter-spacing: var(--tracking-default);
|
|
--text-caption-md-regular--font-weight: var(--font-weight-regular);
|
|
|
|
--text-caption-md-medium: var(--text-12);
|
|
--text-caption-md-medium--line-height: 1.1;
|
|
--text-caption-md-medium--letter-spacing: var(--tracking-default);
|
|
--text-caption-md-medium--font-weight: var(--font-weight-medium);
|
|
|
|
--text-caption-md-semibold: var(--text-12);
|
|
--text-caption-md-semibold--line-height: 1.1;
|
|
--text-caption-md-semibold--letter-spacing: var(--tracking-default);
|
|
--text-caption-md-semibold--font-weight: var(--font-weight-semibold);
|
|
|
|
--text-caption-md-bold: var(--text-12);
|
|
--text-caption-md-bold--line-height: 1.1;
|
|
--text-caption-md-bold--letter-spacing: var(--tracking-default);
|
|
--text-caption-md-bold--font-weight: var(--font-weight-bold);
|
|
|
|
--text-caption-sm-regular: var(--text-11);
|
|
--text-caption-sm-regular--line-height: 1.1;
|
|
--text-caption-sm-regular--letter-spacing: var(--tracking-default);
|
|
--text-caption-sm-regular--font-weight: var(--font-weight-regular);
|
|
|
|
--text-caption-sm-medium: var(--text-11);
|
|
--text-caption-sm-medium--line-height: 1.1;
|
|
--text-caption-sm-medium--letter-spacing: var(--tracking-default);
|
|
--text-caption-sm-medium--font-weight: var(--font-weight-medium);
|
|
|
|
--text-caption-sm-semibold: var(--text-11);
|
|
--text-caption-sm-semibold--line-height: 1.1;
|
|
--text-caption-sm-semibold--letter-spacing: var(--tracking-default);
|
|
--text-caption-sm-semibold--font-weight: var(--font-weight-semibold);
|
|
|
|
--text-caption-sm-bold: var(--text-11);
|
|
--text-caption-sm-bold--line-height: 1.1;
|
|
--text-caption-sm-bold--letter-spacing: var(--tracking-default);
|
|
--text-caption-sm-bold--font-weight: var(--font-weight-bold);
|
|
|
|
--text-caption-xs-regular: var(--text-10);
|
|
--text-caption-xs-regular--line-height: 1;
|
|
--text-caption-xs-regular--letter-spacing: calc(0.01 * var(--text-10));
|
|
--text-caption-xs-regular--font-weight: var(--font-weight-regular);
|
|
|
|
--text-caption-xs-medium: var(--text-10);
|
|
--text-caption-xs-medium--line-height: 1;
|
|
--text-caption-xs-medium--letter-spacing: calc(0.01 * var(--text-10));
|
|
--text-caption-xs-medium--font-weight: var(--font-weight-medium);
|
|
|
|
--text-caption-xs-semibold: var(--text-10);
|
|
--text-caption-xs-semibold--line-height: 1;
|
|
--text-caption-xs-semibold--letter-spacing: calc(0.01 * var(--text-10));
|
|
--text-caption-xs-semibold--font-weight: var(--font-weight-semibold);
|
|
|
|
--text-caption-xs-bold: var(--text-10);
|
|
--text-caption-xs-bold--line-height: 1;
|
|
--text-caption-xs-bold--letter-spacing: calc(0.01 * var(--text-10));
|
|
--text-caption-xs-bold--font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
@utility p-page-x {
|
|
padding: 1.35rem;
|
|
}
|
|
|
|
@utility px-page-x {
|
|
padding-left: 1.35rem;
|
|
padding-right: 1.35rem;
|
|
}
|
|
|
|
@utility py-page-y {
|
|
padding-top: 1.35rem;
|
|
padding-bottom: 1.35rem;
|
|
}
|
|
|
|
@utility scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
&::-webkit-scrollbar: {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@utility material-symbols-rounded {
|
|
font-family: "Material Symbols Rounded";
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-size: 1.5rem;
|
|
line-height: 1;
|
|
letter-spacing: normal;
|
|
text-transform: none;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
word-wrap: normal;
|
|
direction: ltr;
|
|
font-feature-settings: "liga";
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* Tailwind typography plugin overwrites */
|
|
@utility prose {
|
|
--tw-prose-body: var(--text-color-primary);
|
|
--tw-prose-p: var(--text-color-primary);
|
|
--tw-prose-headings: var(--text-color-primary);
|
|
--tw-prose-lead: var(--text-color-primary);
|
|
--tw-prose-links: var(--text-color-link-primary);
|
|
--tw-prose-bold: "inherit";
|
|
--tw-prose-counters: var(--text-color-primary);
|
|
--tw-prose-bullets: var(--text-color-primary);
|
|
--tw-prose-hr: var(--text-color-primary);
|
|
--tw-prose-quotes: var(--text-color-primary);
|
|
--tw-prose-quote-borders: var(--border-color-subtle);
|
|
--tw-prose-code: var(--text-color-primary);
|
|
--tw-prose-pre-code: var(--text-color-primary);
|
|
--tw-prose-pre-bg: var(--background-color-layer-1);
|
|
--tw-prose-th-borders: var(--border-color-subtle);
|
|
--tw-prose-td-borders: var(--border-color-subtle);
|
|
}
|