diff --git a/app/layout.js b/app/layout.js index 7bf337d..60e4878 100644 --- a/app/layout.js +++ b/app/layout.js @@ -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", diff --git a/app/tailwind.css b/app/tailwind.css new file mode 100644 index 0000000..07a9575 --- /dev/null +++ b/app/tailwind.css @@ -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); +}