357 lines
10 KiB
CSS
357 lines
10 KiB
CSS
/**
|
|
* Copyright 2025 LY Corporation
|
|
*
|
|
* LY Corporation licenses this file to you under the Apache License,
|
|
* version 2.0 (the "License"); you may not use this file except in compliance
|
|
* with the License. You may obtain a copy of the License at:
|
|
*
|
|
* https://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
|
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
|
* License for the specific language governing permissions and limitations
|
|
* under the License.
|
|
*/
|
|
|
|
@layer {
|
|
:root {
|
|
/* primitives */
|
|
--base-black: #000;
|
|
--base-white: #fff;
|
|
--base-transparent: transparent;
|
|
--neutral50: #fafafa;
|
|
--neutral100: #f5f5f5;
|
|
--neutral200: #efefef;
|
|
--neutral300: #dddcdc;
|
|
--neutral400: #a3a3a3;
|
|
--neutral500: #737373;
|
|
--neutral600: #525252;
|
|
--neutral700: #404040;
|
|
--neutral800: #262626;
|
|
--neutral900: #202020;
|
|
--neutral950: #1c1c1c;
|
|
--alpha-black50: rgb(0 0 0 / 8%);
|
|
--alpha-black100: rgb(0 0 0 / 12%);
|
|
--alpha-black200: rgb(0 0 0 / 16%);
|
|
--alpha-black300: rgb(0 0 0 / 20%);
|
|
--alpha-black400: rgb(0 0 0 / 24%);
|
|
--alpha-black500: rgb(0 0 0 / 32%);
|
|
--alpha-black600: rgb(0 0 0 / 46%);
|
|
--alpha-black700: rgb(0 0 0 / 62%);
|
|
--alpha-black800: rgb(0 0 0 / 71%);
|
|
--alpha-black900: rgb(0 0 0 / 81%);
|
|
--alpha-black950: rgb(0 0 0 / 90%);
|
|
--alpha-white50: rgb(255 255 255 / 8%);
|
|
--alpha-white100: rgb(255 255 255 / 12%);
|
|
--alpha-white200: rgb(255 255 255 / 16%);
|
|
--alpha-white300: rgb(255 255 255 / 20%);
|
|
--alpha-white400: rgb(255 255 255 / 24%);
|
|
--alpha-white500: rgb(255 255 255 / 32%);
|
|
--alpha-white600: rgb(255 255 255 / 46%);
|
|
--alpha-white700: rgb(255 255 255 / 62%);
|
|
--alpha-white800: rgb(255 255 255 / 71%);
|
|
--alpha-white900: rgb(255 255 255 / 81%);
|
|
--alpha-white950: rgb(255 255 255 / 90%);
|
|
--slate50: #f8fafc;
|
|
--slate100: #f1f5f9;
|
|
--slate200: #e2e8f0;
|
|
--slate300: #cbd5e1;
|
|
--slate400: #94a3b8;
|
|
--slate500: #64748b;
|
|
--slate600: #475569;
|
|
--slate700: #334155;
|
|
--slate800: #1e293b;
|
|
--slate900: #0f172a;
|
|
--slate950: #020617;
|
|
--gray50: #f9fafb;
|
|
--gray100: #f3f4f6;
|
|
--gray200: #e5e7eb;
|
|
--gray300: #d1d5db;
|
|
--gray400: #9ca3af;
|
|
--gray500: #6b7280;
|
|
--gray600: #4b5563;
|
|
--gray700: #374151;
|
|
--gray800: #1f2937;
|
|
--gray900: #111827;
|
|
--gray950: #030712;
|
|
--zinc50: #fafafa;
|
|
--zinc100: #f4f4f5;
|
|
--zinc200: #e4e4e7;
|
|
--zinc300: #d4d4d8;
|
|
--zinc400: #a1a1aa;
|
|
--zinc500: #71717a;
|
|
--zinc600: #52525b;
|
|
--zinc700: #3f3f46;
|
|
--zinc800: #27272a;
|
|
--zinc900: #18181b;
|
|
--zinc950: #09090b;
|
|
--stone50: #fafaf9;
|
|
--stone100: #f5f5f4;
|
|
--stone200: #e7e5e4;
|
|
--stone300: #d6d3d1;
|
|
--stone400: #a8a29e;
|
|
--stone500: #78716c;
|
|
--stone600: #57534e;
|
|
--stone700: #44403c;
|
|
--stone800: #292524;
|
|
--stone900: #1c1917;
|
|
--stone950: #0c0a09;
|
|
--red50: #fef2f2;
|
|
--red100: #fee2e2;
|
|
--red200: #fecaca;
|
|
--red300: #fca5a5;
|
|
--red400: #f87171;
|
|
--red500: #ef4444;
|
|
--red600: #dc2626;
|
|
--red700: #b91c1c;
|
|
--red800: #991b1b;
|
|
--red900: #7f1d1d;
|
|
--red950: #450a0a;
|
|
--orange50: #fff7ed;
|
|
--orange100: #ffedd5;
|
|
--orange200: #fed7aa;
|
|
--orange300: #fdba74;
|
|
--orange400: #fb923c;
|
|
--orange500: #f97316;
|
|
--orange600: #ea580c;
|
|
--orange700: #c2410c;
|
|
--orange800: #9a3412;
|
|
--orange900: #7c2d12;
|
|
--orange950: #431407;
|
|
--amber50: #fffbeb;
|
|
--amber100: #fef3c7;
|
|
--amber200: #fde68a;
|
|
--amber300: #fcd34d;
|
|
--amber400: #fbbf24;
|
|
--amber500: #f59e0b;
|
|
--amber600: #d97706;
|
|
--amber700: #b45309;
|
|
--amber800: #92400e;
|
|
--amber900: #78350f;
|
|
--amber950: #451a03;
|
|
--yellow50: #fefce8;
|
|
--yellow100: #fef9c3;
|
|
--yellow200: #fef08a;
|
|
--yellow300: #fde047;
|
|
--yellow400: #facc15;
|
|
--yellow500: #eab308;
|
|
--yellow600: #ca8a04;
|
|
--yellow700: #a16207;
|
|
--yellow800: #854d0e;
|
|
--yellow900: #713f12;
|
|
--yellow950: #422006;
|
|
--lime50: #f7fee7;
|
|
--lime100: #ecfccb;
|
|
--lime200: #d9f99d;
|
|
--lime300: #bef264;
|
|
--lime400: #a3e635;
|
|
--lime500: #84cc16;
|
|
--lime600: #65a30d;
|
|
--lime700: #4d7c0f;
|
|
--lime800: #3f6212;
|
|
--lime900: #365314;
|
|
--lime950: #1a2e05;
|
|
--green50: #f0fdf4;
|
|
--green100: #dcfce7;
|
|
--green200: #bbf7d0;
|
|
--green300: #86efac;
|
|
--green400: #4ade80;
|
|
--green500: #22c55e;
|
|
--green600: #16a34a;
|
|
--green700: #15803d;
|
|
--green800: #166534;
|
|
--green900: #14532d;
|
|
--green950: #052e16;
|
|
--emerald50: #ecfdf5;
|
|
--emerald100: #d1fae5;
|
|
--emerald200: #a7f3d0;
|
|
--emerald300: #6ee7b7;
|
|
--emerald400: #34d399;
|
|
--emerald500: #10b981;
|
|
--emerald600: #059669;
|
|
--emerald700: #047857;
|
|
--emerald800: #065f46;
|
|
--emerald900: #064e3b;
|
|
--emerald950: #022c22;
|
|
--teal50: #f0fdfa;
|
|
--teal100: #ccfbf1;
|
|
--teal200: #99f6e4;
|
|
--teal300: #5eead4;
|
|
--teal400: #2dd4bf;
|
|
--teal500: #14b8a6;
|
|
--teal600: #0d9488;
|
|
--teal700: #0f766e;
|
|
--teal800: #115e59;
|
|
--teal900: #134e4a;
|
|
--teal950: #042f2e;
|
|
--cyan50: #ecfeff;
|
|
--cyan100: #cffafe;
|
|
--cyan200: #a5f3fc;
|
|
--cyan300: #67e8f9;
|
|
--cyan400: #22d3ee;
|
|
--cyan500: #06b6d4;
|
|
--cyan600: #0891b2;
|
|
--cyan700: #0e7490;
|
|
--cyan800: #155e75;
|
|
--cyan900: #164e63;
|
|
--cyan950: #083344;
|
|
--sky50: #f0f9ff;
|
|
--sky100: #e0f2fe;
|
|
--sky200: #bae6fd;
|
|
--sky300: #7dd3fc;
|
|
--sky400: #38bdf8;
|
|
--sky500: #0ea5e9;
|
|
--sky600: #0284c7;
|
|
--sky700: #0369a1;
|
|
--sky800: #075985;
|
|
--sky900: #0c4a6e;
|
|
--sky950: #082f49;
|
|
--blue50: #eff6ff;
|
|
--blue100: #dbeafe;
|
|
--blue200: #bfdbfe;
|
|
--blue300: #93c5fd;
|
|
--blue400: #60a5fa;
|
|
--blue500: #3b82f6;
|
|
--blue600: #2563eb;
|
|
--blue700: #1d4ed8;
|
|
--blue800: #1e40af;
|
|
--blue900: #1e3a8a;
|
|
--blue950: #172554;
|
|
--indigo50: #eef2ff;
|
|
--indigo100: #e0e7ff;
|
|
--indigo200: #c7d2fe;
|
|
--indigo300: #a5b4fc;
|
|
--indigo400: #818cf8;
|
|
--indigo500: #6366f1;
|
|
--indigo600: #4f46e5;
|
|
--indigo700: #4338ca;
|
|
--indigo800: #3730a3;
|
|
--indigo900: #312e81;
|
|
--indigo950: #1e1b4b;
|
|
--violet50: #f5f3ff;
|
|
--violet100: #ede9fe;
|
|
--violet200: #ddd6fe;
|
|
--violet300: #c4b5fd;
|
|
--violet400: #a78bfa;
|
|
--violet500: #8b5cf6;
|
|
--violet600: #7c3aed;
|
|
--violet700: #6d28d9;
|
|
--violet800: #5b21b6;
|
|
--violet900: #4c1d95;
|
|
--violet950: #2e1065;
|
|
--purple50: #faf5ff;
|
|
--purple100: #f3e8ff;
|
|
--purple200: #e9d5ff;
|
|
--purple300: #d8b4fe;
|
|
--purple400: #c084fc;
|
|
--purple500: #a855f7;
|
|
--purple600: #9333ea;
|
|
--purple700: #7e22ce;
|
|
--purple800: #6b21a8;
|
|
--purple900: #581c87;
|
|
--purple950: #3b0764;
|
|
--fuchsia50: #fdf4ff;
|
|
--fuchsia100: #fae8ff;
|
|
--fuchsia200: #f5d0fe;
|
|
--fuchsia300: #f0abfc;
|
|
--fuchsia400: #e879f9;
|
|
--fuchsia500: #d946ef;
|
|
--fuchsia600: #c026d3;
|
|
--fuchsia700: #a21caf;
|
|
--fuchsia800: #86198f;
|
|
--fuchsia900: #701a75;
|
|
--fuchsia950: #4a044e;
|
|
--pink50: #fdf2f8;
|
|
--pink100: #fce7f3;
|
|
--pink200: #fbcfe8;
|
|
--pink300: #f9a8d4;
|
|
--pink400: #f472b6;
|
|
--pink500: #ec4899;
|
|
--pink600: #db2777;
|
|
--pink700: #be185d;
|
|
--pink800: #9d174d;
|
|
--pink900: #831843;
|
|
--pink950: #500724;
|
|
--rose50: #fff1f2;
|
|
--rose100: #ffe4e6;
|
|
--rose200: #fecdd3;
|
|
--rose300: #fda4af;
|
|
--rose400: #fb7185;
|
|
--rose500: #f43f5e;
|
|
--rose600: #e11d48;
|
|
--rose700: #be123c;
|
|
--rose800: #9f1239;
|
|
--rose900: #881337;
|
|
--rose950: #4c0519;
|
|
|
|
/* semantics */
|
|
--fg-neutral-primary: var(--base-black);
|
|
--fg-neutral-secondary: var(--neutral600);
|
|
--fg-neutral-tertiary: var(--neutral500);
|
|
--fg-neutral-inverse: var(--base-white);
|
|
--fg-neutral-static: var(--base-white);
|
|
--fg-tint-red: var(--red600);
|
|
--fg-tint-orange: var(--amber600);
|
|
--fg-tint-green: var(--green600);
|
|
--fg-tint-blue: var(--blue600);
|
|
--border-neutral-primary: var(--neutral950);
|
|
--border-neutral-secondary: var(--neutral500);
|
|
--border-neutral-tertiary: var(--neutral300);
|
|
--border-neutral-transparent: var(--base-transparent);
|
|
--border-tint-red: var(--red600);
|
|
--border-tint-orange: var(--amber600);
|
|
--border-tint-green: var(--green600);
|
|
--border-tint-blue: var(--blue600);
|
|
--bg-primary: var(--base-white);
|
|
--bg-secondary: var(--neutral100);
|
|
--bg-tertiary: var(--neutral200);
|
|
--bg-dim: var(--alpha-black600);
|
|
--bg-neutral-primary: var(--base-white);
|
|
--bg-neutral-secondary: var(--neutral300);
|
|
--bg-neutral-tertiary: var(--neutral200);
|
|
--bg-neutral-inverse: var(--neutral950);
|
|
--bg-neutral-hover: var(--alpha-black50);
|
|
--bg-neutral-transparent: var(--base-transparent);
|
|
--bg-tint-red-bold: var(--red600);
|
|
--bg-tint-red-subtle: var(--red100);
|
|
--bg-tint-red-hover: var(--red400);
|
|
--bg-tint-orange-bold: var(--amber600);
|
|
--bg-tint-orange-subtle: var(--amber100);
|
|
--bg-tint-orange-hover: var(--amber400);
|
|
--bg-tint-green-bold: var(--green600);
|
|
--bg-tint-green-subtle: var(--green100);
|
|
--bg-tint-green-hover: var(--green400);
|
|
--bg-tint-blue-bold: var(--blue600);
|
|
--bg-tint-blue-subtle: var(--blue100);
|
|
--bg-tint-blue-hover: var(--blue400);
|
|
}
|
|
|
|
.dark {
|
|
--fg-neutral-primary: var(--base-white);
|
|
--fg-neutral-secondary: var(--neutral300);
|
|
--fg-neutral-tertiary: var(--neutral400);
|
|
--fg-neutral-inverse: var(--base-black);
|
|
--fg-tint-red: var(--red500);
|
|
--fg-tint-orange: var(--amber500);
|
|
--fg-tint-green: var(--green500);
|
|
--fg-tint-blue: var(--blue500);
|
|
--border-neutral-primary: var(--neutral50);
|
|
--border-neutral-secondary: var(--neutral500);
|
|
--border-neutral-tertiary: var(--neutral600);
|
|
--border-tint-red: var(--red500);
|
|
--border-tint-orange: var(--amber500);
|
|
--border-tint-green: var(--green500);
|
|
--border-tint-blue: var(--blue500);
|
|
--bg-primary: var(--neutral950);
|
|
--bg-secondary: var(--neutral900);
|
|
--bg-tertiary: var(--neutral800);
|
|
--bg-dim: var(--alpha-black600);
|
|
--bg-neutral-primary: var(--neutral800);
|
|
--bg-neutral-secondary: var(--neutral700);
|
|
--bg-neutral-tertiary: var(--neutral600);
|
|
--bg-neutral-inverse: var(--neutral50);
|
|
--bg-neutral-hover: var(--alpha-white50);
|
|
}
|
|
}
|