Connect tailwind tokens
This commit is contained in:
adilallo
@@ -1,5 +1,6 @@
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import "./tailwind.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
|
||||
@@ -0,0 +1,264 @@
|
||||
/**
|
||||
* This file was generated by Supernova.io and should not be changed manually.
|
||||
* To modify the format or content of this file, please contact your design system team.
|
||||
*/
|
||||
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme inline {
|
||||
|
||||
/* Reset default Tailwind configuration */
|
||||
--color-*: initial;
|
||||
|
||||
/* Dimension */
|
||||
--spacing-scale-000: 0px;
|
||||
--spacing-scale-001: 1px;
|
||||
--spacing-scale-002: 2px;
|
||||
--spacing-scale-003: 3px;
|
||||
--spacing-scale-004: 4px;
|
||||
--spacing-scale-005: 5px;
|
||||
--spacing-scale-006: 6px;
|
||||
--spacing-scale-008: 8px;
|
||||
--spacing-scale-010: 10px;
|
||||
--spacing-scale-012: 12px;
|
||||
--spacing-scale-016: 16px;
|
||||
--spacing-scale-020: 20px;
|
||||
--spacing-scale-024: 24px;
|
||||
--spacing-scale-032: 32px;
|
||||
--spacing-scale-040: 40px;
|
||||
--spacing-scale-048: 48px;
|
||||
--spacing-scale-056: 56px;
|
||||
--spacing-scale-060: 60px;
|
||||
--spacing-scale-064: 64px;
|
||||
--spacing-scale-076: 76px;
|
||||
--spacing-scale-096: 96px;
|
||||
--spacing-scale-120: 120px;
|
||||
--spacing-scale-260: 260px;
|
||||
--spacing-scale-290: 290px;
|
||||
--spacing-measures-sizing-008: var(--spacing-scale-008);
|
||||
--spacing-measures-sizing-010: var(--spacing-scale-010);
|
||||
--spacing-measures-sizing-012: var(--spacing-scale-012);
|
||||
--spacing-measures-sizing-016: var(--spacing-scale-016);
|
||||
--spacing-measures-sizing-020: var(--spacing-scale-020);
|
||||
--spacing-measures-sizing-024: var(--spacing-scale-024);
|
||||
--spacing-measures-sizing-032: var(--spacing-scale-032);
|
||||
--spacing-measures-sizing-040: var(--spacing-scale-040);
|
||||
--spacing-measures-sizing-048: var(--spacing-scale-048);
|
||||
--spacing-measures-sizing-056: var(--spacing-scale-056);
|
||||
--spacing-measures-sizing-060: var(--spacing-scale-060);
|
||||
--spacing-measures-sizing-064: var(--spacing-scale-064);
|
||||
--spacing-measures-sizing-076: var(--spacing-scale-076);
|
||||
--spacing-measures-sizing-096: var(--spacing-scale-096);
|
||||
--spacing-measures-spacing-000: var(--spacing-scale-000);
|
||||
--spacing-measures-sizing-120: var(--spacing-scale-120);
|
||||
--spacing-measures-spacing-001: var(--spacing-scale-001);
|
||||
--spacing-measures-spacing-002: var(--spacing-scale-002);
|
||||
--spacing-measures-spacing-004: var(--spacing-scale-004);
|
||||
--spacing-measures-spacing-008: var(--spacing-scale-008);
|
||||
--spacing-measures-spacing-010: var(--spacing-scale-010);
|
||||
--spacing-measures-spacing-012: var(--spacing-scale-012);
|
||||
--spacing-measures-spacing-016: var(--spacing-scale-016);
|
||||
--spacing-measures-spacing-020: var(--spacing-scale-020);
|
||||
--spacing-measures-spacing-024: var(--spacing-scale-024);
|
||||
--spacing-measures-spacing-032: var(--spacing-scale-032);
|
||||
--spacing-measures-spacing-040: var(--spacing-scale-040);
|
||||
--spacing-measures-spacing-048: var(--spacing-scale-048);
|
||||
--spacing-measures-spacing-056: var(--spacing-scale-056);
|
||||
--spacing-measures-spacing-060: var(--spacing-scale-060);
|
||||
--spacing-measures-spacing-064: var(--spacing-scale-064);
|
||||
--spacing-measures-spacing-076: var(--spacing-scale-076);
|
||||
--spacing-measures-spacing-096: var(--spacing-scale-096);
|
||||
--spacing-measures-spacing-120: var(--spacing-scale-120);
|
||||
|
||||
/* BorderRadius */
|
||||
--radius-measures-radius-none: var(--spacing-scale-000);
|
||||
--radius-measures-radius-small: var(--spacing-scale-002);
|
||||
--radius-measures-radius-medium: var(--spacing-scale-004);
|
||||
--radius-measures-radius-large: var(--spacing-scale-008);
|
||||
--radius-measures-radius-xlarge: var(--spacing-scale-012);
|
||||
--radius-measures-radius-full: var(--spacing-scale-120);
|
||||
|
||||
/* BorderWidth */
|
||||
--border-measures-stroke-large: var(--spacing-scale-003);
|
||||
--border-measures-stroke-medium: var(--spacing-scale-002);
|
||||
--border-measures-stroke-small: var(--spacing-scale-001);
|
||||
|
||||
/* Color */
|
||||
--color-community-yellow-100: oklch(98.48% 0.055 105.21);
|
||||
--color-community-yellow-200: oklch(94.76% 0.083 103.43);
|
||||
--color-community-yellow-300: oklch(90.22% 0.095 102.92);
|
||||
--color-community-yellow-400: oklch(84.34% 0.097 101.09);
|
||||
--color-community-yellow-500: oklch(76.71% 0.094 100.01);
|
||||
--color-community-yellow-600: oklch(66.85% 0.083 99.46);
|
||||
--color-community-yellow-700: oklch(55.29% 0.069 98.1);
|
||||
--color-community-yellow-800: oklch(42.89% 0.054 98.59);
|
||||
--color-community-yellow-900: oklch(30.32% 0.036 99.23);
|
||||
--color-community-teal-050: oklch(95.63% 0.022 13.86);
|
||||
--color-community-orange-050: oklch(98.55% 0.017 201.66);
|
||||
--color-community-mauve-050: oklch(98.1% 0.009 100.14);
|
||||
--color-community-orange-100: oklch(95.43% 0.06 198.83);
|
||||
--color-community-orange-200: oklch(83.58% 0.121 198.44);
|
||||
--color-community-orange-300: oklch(69.29% 0.124 217.83);
|
||||
--color-community-orange-400: oklch(50.04% 0.102 233.41);
|
||||
--color-community-orange-500: oklch(39.59% 0.091 242.29);
|
||||
--color-community-orange-600: oklch(31.94% 0.096 255.01);
|
||||
--color-community-orange-700: oklch(20.28% 0.053 252.69);
|
||||
--color-community-blue-050: oklch(39.46% 0.149 259.87);
|
||||
--color-community-kiwi-050: oklch(97.77% 0.031 127.13);
|
||||
--color-community-pink-050: oklch(95.93% 0.032 321.01);
|
||||
--color-community-pink-100: oklch(90.78% 0.072 319.41);
|
||||
--color-community-pink-200: oklch(85.82% 0.091 318.38);
|
||||
--color-community-pink-300: oklch(81.18% 0.096 318.17);
|
||||
--color-community-pink-400: oklch(75.77% 0.097 317.51);
|
||||
--color-community-pink-500: oklch(68.84% 0.092 316.79);
|
||||
--color-community-pink-600: oklch(60.22% 0.08 316.45);
|
||||
--color-community-pink-700: oklch(50.08% 0.065 315.63);
|
||||
--color-community-pink-800: oklch(38.98% 0.049 315.23);
|
||||
--color-community-pink-900: oklch(27.83% 0.03 314.26);
|
||||
--color-community-red-050: oklch(96.51% 0.014 22.47);
|
||||
--color-yellow-opacity-000: oklch(30.32% 0.036 99.23 / 0%);
|
||||
--color-yellow-opacity-001: oklch(30.32% 0.036 99.23 / 1%);
|
||||
--color-yellow-opacity-050: oklch(30.32% 0.036 99.23 / 5%);
|
||||
--color-yellow-opacity-100: oklch(30.32% 0.036 99.23 / 10%);
|
||||
--color-yellow-opacity-200: oklch(42.89% 0.054 98.59 / 20%);
|
||||
--color-yellow-opacity-300: oklch(55.29% 0.069 98.1 / 30%);
|
||||
--color-yellow-opacity-400: oklch(66.85% 0.083 99.46 / 40%);
|
||||
--color-yellow-opacity-500: oklch(76.71% 0.094 100.01 / 50%);
|
||||
--color-yellow-opacity-600: oklch(84.34% 0.097 101.09 / 60%);
|
||||
--color-yellow-opacity-700: oklch(90.22% 0.095 102.92 / 70%);
|
||||
--color-yellow-opacity-800: oklch(94.76% 0.083 103.43 / 80%);
|
||||
--color-yellow-opacity-900: oklch(98.48% 0.055 105.21 / 90%);
|
||||
--color-opacity-000: oklch(97.31% 0 263.28 / 0%);
|
||||
--color-opacity-001: oklch(97.31% 0 263.28 / 1%);
|
||||
--color-opacity-050: oklch(97.31% 0 263.28 / 50%);
|
||||
--color-opacity-100: oklch(94.91% 0 263.28 / 50%);
|
||||
--color-opacity-200: oklch(91.28% 0 263.28 / 50%);
|
||||
--color-opacity-300: oklch(84.21% 0 263.28 / 50%);
|
||||
--color-opacity-400: oklch(75.4% 0 263.28 / 50%);
|
||||
--color-opacity-500: oklch(56.24% 0 263.28 / 50%);
|
||||
--color-opacity-600: oklch(44.59% 0 263.28 / 50%);
|
||||
--color-opacity-700: oklch(32.11% 0 263.28 / 50%);
|
||||
--color-opacity-800: oklch(23.93% 0 263.28 / 50%);
|
||||
--color-opacity-900: oklch(19.13% 0 263.28 / 50%);
|
||||
--color-gray-000: oklch(100% 0 263.28);
|
||||
--color-gray-050: oklch(97.31% 0 263.28);
|
||||
--color-gray-100: oklch(92.19% 0 263.28);
|
||||
--color-gray-200: oklch(86.38% 0 263.28);
|
||||
--color-gray-300: oklch(76.99% 0 263.28);
|
||||
--color-gray-400: oklch(65% 0 263.28);
|
||||
--color-gray-500: oklch(51.03% 0 263.28);
|
||||
--color-gray-600: oklch(39.42% 0 263.28);
|
||||
--color-gray-700: oklch(29.72% 0 263.28);
|
||||
--color-gray-800: oklch(23.93% 0 263.28);
|
||||
--color-gray-900: oklch(19.13% 0 263.28);
|
||||
--color-gray-1000: oklch(0% 0 0);
|
||||
--color-community-blue-100: oklch(94.43% 0.038 211.19);
|
||||
--color-community-blue-200: oklch(91.44% 0.048 211.24);
|
||||
--color-community-blue-300: oklch(87.85% 0.052 210.11);
|
||||
--color-community-blue-400: oklch(82.74% 0.054 206.72);
|
||||
--color-community-blue-500: oklch(75.92% 0.052 204.06);
|
||||
--color-community-blue-600: oklch(66.92% 0.047 201.57);
|
||||
--color-community-blue-700: oklch(55.72% 0.04 200.59);
|
||||
--color-community-blue-800: oklch(43.34% 0.03 199.27);
|
||||
--color-community-blue-900: oklch(30.78% 0.02 196.24);
|
||||
--color-community-red-100: oklch(86.1% 0.051 359.55);
|
||||
--color-community-red-200: oklch(82% 0.065 0.21);
|
||||
--color-community-red-300: oklch(77.79% 0.072 359.58);
|
||||
--color-community-red-400: oklch(73.06% 0.073 359.79);
|
||||
--color-community-red-500: oklch(66.82% 0.07 359.71);
|
||||
--color-community-red-600: oklch(58.65% 0.062 357.88);
|
||||
--color-community-red-700: oklch(49.14% 0.05 359.07);
|
||||
--color-community-red-800: oklch(38.48% 0.039 356.54);
|
||||
--color-community-red-900: oklch(28.01% 0.024 356.91);
|
||||
--color-community-orange-800: oklch(40.58% 0.027 46.54);
|
||||
--color-community-orange-900: oklch(29.05% 0.017 48.05);
|
||||
--color-community-mauve-100: oklch(88.23% 0.059 282.99);
|
||||
--color-community-mauve-200: oklch(82.9% 0.074 281.26);
|
||||
--color-community-mauve-300: oklch(78.02% 0.08 281.18);
|
||||
--color-community-mauve-400: oklch(72.83% 0.08 280.17);
|
||||
--color-community-mauve-500: oklch(66.39% 0.075 278.85);
|
||||
--color-community-mauve-600: oklch(58.34% 0.063 277.78);
|
||||
--color-community-mauve-700: oklch(48.68% 0.052 277.4);
|
||||
--color-community-mauve-800: oklch(38.09% 0.038 276.43);
|
||||
--color-community-mauve-900: oklch(27.24% 0.024 277.83);
|
||||
--color-green0: oklch(98.15% 0.028 155.49);
|
||||
--color-community-teal-100: oklch(96.1% 0.059 157.85);
|
||||
--color-community-teal-200: oklch(92.78% 0.075 157.69);
|
||||
--color-community-teal-300: oklch(88.65% 0.079 158.06);
|
||||
--color-community-teal-400: oklch(83.47% 0.079 158.61);
|
||||
--color-community-teal-500: oklch(76.31% 0.074 159.02);
|
||||
--color-community-teal-600: oklch(66.77% 0.064 159.89);
|
||||
--color-community-teal-700: oklch(55.57% 0.052 160.52);
|
||||
--color-community-teal-800: oklch(43.12% 0.039 160.72);
|
||||
--color-community-teal-900: oklch(30.48% 0.025 161.27);
|
||||
--color-community-kiwi-100: oklch(92.3% 0.055 122.16);
|
||||
--color-community-kiwi-200: oklch(89.94% 0.07 122.82);
|
||||
--color-community-kiwi-300: oklch(86.7% 0.077 122.51);
|
||||
--color-community-kiwi-400: oklch(81.99% 0.078 123.36);
|
||||
--color-community-kiwi-500: oklch(75.31% 0.074 122.9);
|
||||
--color-community-kiwi-600: oklch(66.25% 0.066 123.19);
|
||||
--color-community-kiwi-700: oklch(55.28% 0.055 123.2);
|
||||
--color-community-kiwi-800: oklch(43.14% 0.041 122.55);
|
||||
--color-community-kiwi-900: oklch(31.14% 0.027 122.95);
|
||||
--color-content-default-utility-positive: oklch(55.09% 0.151 143.2);
|
||||
--color-content-default-utility-negative: oklch(58.87% 0.184 29.83);
|
||||
--color-content-default-utility-info: oklch(55.14% 0.217 260.1);
|
||||
--color-content-inverse-utility-positive: oklch(70.5% 0.146 138.3);
|
||||
--color-content-inverse-utility-warning: oklch(79.77% 0.155 89.66);
|
||||
--color-content-inverse-utility-negative: oklch(69.63% 0.149 28.39);
|
||||
--color-content-inverse-utility-info: oklch(61.97% 0.194 258.88);
|
||||
--color-surface-default-utility-info: oklch(55.14% 0.217 260.1);
|
||||
--color-surface-default-utility-negative: oklch(58.87% 0.184 29.83);
|
||||
--color-surface-default-utility-warning: oklch(57.3% 0.12 74.7);
|
||||
--color-surface-default-utility-positive: oklch(55.09% 0.151 143.2);
|
||||
--color-surface-default-brand-accent: oklch(79.17% 0.121 16.33);
|
||||
--color-surface-inverse-utility-info: oklch(61.97% 0.194 258.88);
|
||||
--color-surface-inverse-utility-negative: oklch(69.63% 0.149 28.39);
|
||||
--color-surface-inverse-utility-warning: oklch(79.77% 0.155 89.66);
|
||||
--color-surface-inverse-utility-positive: oklch(70.5% 0.146 138.3);
|
||||
--border-color-default-utility-info: oklch(61.97% 0.194 258.88);
|
||||
--border-color-default-utility-negative: oklch(69.63% 0.149 28.39);
|
||||
--border-color-default-utility-warning: oklch(79.77% 0.155 89.66);
|
||||
--border-color-default-utility-positive: oklch(70.5% 0.146 138.3);
|
||||
--border-color-inverse-brandaccent: oklch(62.78% 0.234 25.05);
|
||||
--color-content-default-utility-warning: var(--color-community-yellow-500);
|
||||
--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-brand-primary: var(--color-community-yellow-100);
|
||||
--color-content-default-brand-secondary: var(--color-community-orange-400);
|
||||
--color-content-default-brand-accent: var(--color-yellow-opacity-700);
|
||||
--color-content-inverse-primary: var(--color-gray-1000);
|
||||
--color-content-inverse-secondary: var(--color-gray-800);
|
||||
--color-content-inverse-tertiary: var(--color-gray-700);
|
||||
--color-content-inverse-brand-primary: var(--color-community-yellow-900);
|
||||
--color-content-inverse-brand-secondary: var(--color-community-orange-300);
|
||||
--color-content-inverse-brand-accent: var(--color-yellow-opacity-400);
|
||||
--color-surface-default-brand-primary: var(--color-community-yellow-100);
|
||||
--color-surface-default-brand-secondary: var(--color-community-yellow-900);
|
||||
--color-surface-default-primary: var(--color-gray-1000);
|
||||
--color-surface-default-secondary: var(--color-gray-900);
|
||||
--color-surface-inverse-primary: var(--color-gray-000);
|
||||
--color-surface-default-tertiary: var(--color-gray-800);
|
||||
--color-surface-inverse-secondary: var(--color-gray-100);
|
||||
--color-surface-inverse-tertiary: var(--color-gray-200);
|
||||
--color-surface-inverse-brand-primary: var(--color-community-yellow-100);
|
||||
--color-surface-inverse-brand-secondary: var(--color-community-orange-300);
|
||||
--color-surface-inverse-brand-accent: var(--color-yellow-opacity-100);
|
||||
--border-color-default-primary: var(--color-gray-900);
|
||||
--border-color-inverse-utility-info: var(--color-community-blue-300);
|
||||
--border-color-inverse-primary: var(--color-gray-000);
|
||||
--border-color-default-secondary: var(--color-gray-800);
|
||||
--border-color-inverse-secondary: var(--color-opacity-200);
|
||||
--border-color-inverse-tertiary: var(--color-opacity-300);
|
||||
--border-color-default-tertiary: var(--color-gray-600);
|
||||
--border-color-inverse-utility-negative: var(--color-community-red-300);
|
||||
--border-color-default-brandprimary: var(--color-community-yellow-100);
|
||||
--border-color-inverse-utility-warning: var(--color-community-yellow-400);
|
||||
--border-color-inverse-utility-positive: var(--color-community-kiwi-400);
|
||||
--border-color-default-brandsecondary: var(--color-community-orange-400);
|
||||
--border-color-default-brandaccent: var(--color-yellow-opacity-300);
|
||||
--border-color-inverse-brandprimary: var(--color-community-yellow-800);
|
||||
--border-color-inverse-brandsecondary: var(--color-community-orange-300);
|
||||
--color-surface-default-transparent: var(--color-opacity-000);
|
||||
}
|
||||
Reference in New Issue
Block a user