first commit
This commit is contained in:
SDI
@@ -0,0 +1,9 @@
|
||||
import baseConfig from "@ufb/eslint-config/base";
|
||||
|
||||
/** @type {import('typescript-eslint').Config} */
|
||||
export default [
|
||||
{
|
||||
ignores: [],
|
||||
},
|
||||
...baseConfig,
|
||||
];
|
||||
Vendored
+20
@@ -0,0 +1,20 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
import type plugin from "tailwindcss/plugin";
|
||||
|
||||
declare const tailwindcss: ReturnType<typeof plugin>;
|
||||
|
||||
export default tailwindcss;
|
||||
@@ -0,0 +1,22 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
import plugin from 'tailwindcss/plugin';
|
||||
|
||||
export default plugin(({ addBase, addComponents }) => {
|
||||
addBase(require('./dist/base.js'));
|
||||
addComponents(require('./dist/components.js'));
|
||||
addComponents(require('./dist/utilities.js'));
|
||||
});
|
||||
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"name": "@ufb/tailwindcss",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"main": "index.js",
|
||||
"types": "index.d.ts",
|
||||
"typings": "index.d.ts",
|
||||
"files": [
|
||||
"dist/*.js",
|
||||
"index.js",
|
||||
"index.d.ts"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "pnpm build",
|
||||
"build": "node src/build",
|
||||
"clean": "rm -rf .turbo node_modules dist .cache"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@ufb/eslint-config": "workspace:*",
|
||||
"@ufb/prettier-config": "workspace:*",
|
||||
"@ufb/tsconfig": "workspace:^",
|
||||
"autoprefixer": "^10.4.27",
|
||||
"eslint": "catalog:",
|
||||
"glob": "^13.0.6",
|
||||
"postcss": "^8.5.8",
|
||||
"postcss-import": "^16.1.1",
|
||||
"postcss-js": "^5.1.0",
|
||||
"postcss-nesting": "^14.0.0",
|
||||
"prettier": "catalog:",
|
||||
"tailwindcss": "catalog:"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,356 @@
|
||||
/**
|
||||
* 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);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
plugins: [require('postcss-import'), require('tailwindcss/nesting')],
|
||||
};
|
||||
@@ -0,0 +1,105 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.text {
|
||||
&-small {
|
||||
&-normal {
|
||||
font-weight: 400;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
&-strong {
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-base {
|
||||
&-normal {
|
||||
font-weight: 400;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.375rem;
|
||||
}
|
||||
|
||||
&-strong {
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-large {
|
||||
&-normal {
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
&-strong {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-xlarge {
|
||||
&-normal {
|
||||
font-weight: 400;
|
||||
font-size: 1.25rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
&-strong {
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
&-h1 {
|
||||
font-weight: 600;
|
||||
font-size: 2.375rem;
|
||||
line-height: 2.875rem;
|
||||
}
|
||||
|
||||
&-h2 {
|
||||
font-weight: 600;
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.375rem;
|
||||
}
|
||||
|
||||
&-h3 {
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
&-h4 {
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
&-h5 {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
module.exports = {
|
||||
0: "0",
|
||||
4: "calc(var(--rounded-base, 0px) + 0.25rem)",
|
||||
6: "calc(var(--rounded-base, 0px) + 0.375rem)",
|
||||
8: "calc(var(--rounded-base, 0px) + 0.5rem)",
|
||||
12: "calc(var(--rounded-base, 0px) + 0.75rem)",
|
||||
16: "calc(var(--rounded-base, 0px) + 1rem)",
|
||||
24: "calc(var(--rounded-base, 0px) + 1.5rem)",
|
||||
full: "62.4375rem",
|
||||
};
|
||||
@@ -0,0 +1,11 @@
|
||||
module.exports = {
|
||||
sm: "0px 1px 2px 0px rgba(0, 0, 0, 0.05)",
|
||||
default:
|
||||
"0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)",
|
||||
md: "0px 4px 6px -1px rgba(0, 0, 0, 0.10), 0px 2px 4px -1px rgba(0, 0, 0, 0.06)",
|
||||
lg: "0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.05)",
|
||||
xl: "0px 20px 25px -5px rgba(0, 0, 0, 0.10), 0px 10px 10px -5px rgba(0, 0, 0, 0.04)",
|
||||
"2xl": "0px 25px 50px -12px rgba(0, 0, 0, 0.25)",
|
||||
inner: "0px 2px 4px 0px rgba(0, 0, 0, 0.06) inset",
|
||||
none: "none",
|
||||
};
|
||||
@@ -0,0 +1,75 @@
|
||||
const fs = require("fs/promises");
|
||||
const path = require("path");
|
||||
const postcss = require("postcss");
|
||||
const postcssJs = require("postcss-js");
|
||||
|
||||
const camelToKebab = (str) => {
|
||||
return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
|
||||
};
|
||||
|
||||
const transformKeys = (obj) => {
|
||||
if (typeof obj !== "object" || obj === null) return obj;
|
||||
|
||||
if (Array.isArray(obj)) {
|
||||
return obj.map(transformKeys);
|
||||
}
|
||||
|
||||
return Object.fromEntries(
|
||||
Object.entries(obj).map(([key, value]) => {
|
||||
return [
|
||||
camelToKebab(key),
|
||||
typeof value === "object" ? transformKeys(value) : value,
|
||||
];
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
const replaceApplyTrueWithEmptyObject = (obj) => {
|
||||
const stack = [obj];
|
||||
|
||||
while (stack.length > 0) {
|
||||
const currentObj = stack.pop();
|
||||
for (const [key, value] of Object.entries(currentObj)) {
|
||||
if (typeof value === "object" && value !== null) {
|
||||
stack.push(value);
|
||||
}
|
||||
|
||||
if (key.startsWith("@apply") && value === true) {
|
||||
currentObj[key] = {};
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
async function convertCssToJs(type = "base") {
|
||||
try {
|
||||
const inputPath = path.resolve(process.cwd(), `dist/${type}.css`);
|
||||
const outputPath = path.resolve(process.cwd(), `dist/${type}.js`);
|
||||
|
||||
// Read the CSS file
|
||||
const cssContent = await fs.readFile(inputPath, "utf-8");
|
||||
|
||||
// Parse the CSS and convert to JS object
|
||||
const root = postcss.parse(cssContent);
|
||||
const jsContent = postcssJs.objectify(root);
|
||||
const kebabCaseContent = transformKeys(jsContent);
|
||||
replaceApplyTrueWithEmptyObject(kebabCaseContent);
|
||||
|
||||
// Convert JS object to string and format as a module
|
||||
const jsOutput = `module.exports = ${JSON.stringify(kebabCaseContent, null, 2)};\n`;
|
||||
|
||||
// Ensure output directory exists
|
||||
const outputDir = path.dirname(outputPath);
|
||||
await fs.mkdir(outputDir, { recursive: true });
|
||||
|
||||
// Write the JS file
|
||||
await fs.writeFile(outputPath, jsOutput);
|
||||
|
||||
// console.log(`Successfully converted ${inputPath} to ${outputPath}`);
|
||||
} catch (error) {
|
||||
console.error(`Error generating JS from CSS: ${error.message}`);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = convertCssToJs;
|
||||
@@ -0,0 +1,58 @@
|
||||
const fs = require("fs").promises;
|
||||
const path = require("path");
|
||||
const postcss = require("postcss");
|
||||
const glob = require("glob");
|
||||
/**
|
||||
* PostCSS를 사용하여 CSS 파일들을 처리하는 함수
|
||||
* 명령어 `postcss --config src/components src/components/*.css --base src --dir dist`와 동일한 기능을 수행합니다.
|
||||
*/
|
||||
async function generateCss(type) {
|
||||
try {
|
||||
// 설정 파일 로드
|
||||
const configPath = path.resolve(process.cwd(), `src/${type}`);
|
||||
const configFile = require(path.join(configPath, "postcss.config.js"));
|
||||
|
||||
// 플러그인 초기화
|
||||
const plugins = configFile.plugins || [];
|
||||
|
||||
// PostCSS 프로세서 생성
|
||||
const processor = postcss(plugins);
|
||||
const cssFiles = glob.sync(`src/${type}/*.css`);
|
||||
// 기본 경로
|
||||
const baseDir = path.resolve(process.cwd(), "src");
|
||||
const outputDir = path.resolve(process.cwd(), "dist");
|
||||
|
||||
// 디렉토리가 없으면 생성
|
||||
fs.mkdir(outputDir, { recursive: true });
|
||||
|
||||
// 각 파일 처리
|
||||
for (const file of cssFiles) {
|
||||
const css = await fs.readFile(file, "utf8");
|
||||
|
||||
const relativePath = path.relative(baseDir, file);
|
||||
const outputPath = path.join(outputDir, relativePath);
|
||||
|
||||
// 출력 디렉토리 확인
|
||||
const outputFileDir = path.dirname(outputPath);
|
||||
fs.mkdir(outputFileDir, { recursive: true });
|
||||
|
||||
// PostCSS 처리
|
||||
const result = await processor.process(css, {
|
||||
from: file,
|
||||
to: outputPath,
|
||||
map: { inline: false },
|
||||
});
|
||||
|
||||
// 처리된 CSS 저장
|
||||
await fs.writeFile(outputPath, result.css);
|
||||
// console.log(`Generated: ${outputPath}`);
|
||||
}
|
||||
|
||||
// console.log("CSS generation completed successfully.");
|
||||
} catch (error) {
|
||||
console.error("CSS generation failed:", error);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = generateCss;
|
||||
@@ -0,0 +1,17 @@
|
||||
const log = {
|
||||
info: (message) =>
|
||||
console.log(
|
||||
`\x1b[36m[INFO]\x1b[0m ${new Date().toLocaleTimeString()} - ${message}`,
|
||||
),
|
||||
success: (message) =>
|
||||
console.log(
|
||||
`\x1b[32m[SUCCESS]\x1b[0m ${new Date().toLocaleTimeString()} - ${message}`,
|
||||
),
|
||||
error: (error) =>
|
||||
console.error(
|
||||
`\x1b[31m[ERROR]\x1b[0m ${new Date().toLocaleTimeString()} - ${error}`,
|
||||
),
|
||||
step: (step, total, message) =>
|
||||
console.log(`\x1b[35m[${step}/${total}]\x1b[0m \x1b[33m${message}\x1b[0m`),
|
||||
};
|
||||
module.exports = log;
|
||||
@@ -0,0 +1,45 @@
|
||||
const fs = require("fs").promises;
|
||||
const path = require("path");
|
||||
const glob = require("glob");
|
||||
|
||||
async function mergeCss(type = "base") {
|
||||
try {
|
||||
const sourcePath = path.resolve(process.cwd(), `dist/${type}`);
|
||||
const outputPath = path.resolve(process.cwd(), `dist/${type}.css`);
|
||||
|
||||
// 출력 디렉토리 확인 및 생성
|
||||
const outputDir = path.dirname(outputPath);
|
||||
await fs.mkdir(outputDir, { recursive: true });
|
||||
|
||||
// CSS 파일 검색
|
||||
const cssFiles = glob.sync(path.join(sourcePath, "*.css"));
|
||||
|
||||
if (cssFiles.length === 0) {
|
||||
console.log(`No CSS files found in ${sourcePath} with pattern *.css`);
|
||||
return;
|
||||
}
|
||||
|
||||
// 모든 CSS 내용을 담을 배열
|
||||
const cssContents = [];
|
||||
|
||||
// 각 파일의 내용 읽기
|
||||
for (const file of cssFiles) {
|
||||
const content = await fs.readFile(file, "utf8");
|
||||
cssContents.push(`/* ${path.basename(file)} */`);
|
||||
cssContents.push(content);
|
||||
}
|
||||
|
||||
// CSS 내용 병합
|
||||
const mergedCss = cssContents.join("\n\n");
|
||||
|
||||
// 병합된 CSS 저장
|
||||
await fs.writeFile(outputPath, mergedCss);
|
||||
|
||||
// console.log(`Merged CSS saved to: ${outputPath}`);
|
||||
} catch (error) {
|
||||
console.error("CSS merging failed:", error);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = mergeCss;
|
||||
@@ -0,0 +1,52 @@
|
||||
const generateCss = require("./build-functions/generate-css");
|
||||
const mergeCss = require("./build-functions/merge-css");
|
||||
const convertCssToJs = require("./build-functions/convert-css-to-js");
|
||||
const log = require("./build-functions/log");
|
||||
|
||||
async function executeCommands() {
|
||||
try {
|
||||
const totalSteps = 9;
|
||||
let currentStep = 0;
|
||||
|
||||
log.info("Starting CSS build process...");
|
||||
|
||||
// Base CSS processing
|
||||
log.step(++currentStep, totalSteps, "Generating base CSS files");
|
||||
await generateCss("base");
|
||||
|
||||
log.step(++currentStep, totalSteps, "Merging base CSS files");
|
||||
await mergeCss("base");
|
||||
|
||||
log.step(++currentStep, totalSteps, "Converting base CSS to JS");
|
||||
await convertCssToJs("base");
|
||||
log.success("Base CSS processing completed");
|
||||
|
||||
// Utilities CSS processing
|
||||
log.step(++currentStep, totalSteps, "Generating utilities CSS files");
|
||||
await generateCss("utilities");
|
||||
|
||||
log.step(++currentStep, totalSteps, "Merging utilities CSS files");
|
||||
await mergeCss("utilities");
|
||||
|
||||
log.step(++currentStep, totalSteps, "Converting utilities CSS to JS");
|
||||
await convertCssToJs("utilities");
|
||||
log.success("Utilities CSS processing completed");
|
||||
|
||||
// Components CSS processing
|
||||
log.step(++currentStep, totalSteps, "Generating components CSS files");
|
||||
await generateCss("components");
|
||||
|
||||
log.step(++currentStep, totalSteps, "Merging components CSS files");
|
||||
await mergeCss("components");
|
||||
|
||||
log.step(++currentStep, totalSteps, "Converting components CSS to JS");
|
||||
await convertCssToJs("components");
|
||||
log.success("Components CSS processing completed");
|
||||
|
||||
log.success("All CSS files built successfully!");
|
||||
} catch (error) {
|
||||
log.error(`Error executing commands: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
executeCommands();
|
||||
@@ -0,0 +1,50 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.accordion {
|
||||
--accordion-fg: var(--fg-neutral-primary);
|
||||
--accordion-border: var(--border-neutral-tertiary);
|
||||
--accordion-bg: var(--bg-primary);
|
||||
|
||||
@apply h-fit overflow-hidden bg-[var(--accordion-bg)] text-[var(--accordion-fg)];
|
||||
}
|
||||
|
||||
.accordion-border {
|
||||
@apply border border-[var(--accordion-border)] [&>div:last-of-type]:border-b-0;
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
@apply border-neutral-transparent;
|
||||
}
|
||||
|
||||
.accordion-item-border {
|
||||
@apply border-b border-[var(--accordion-border)];
|
||||
}
|
||||
|
||||
.accordion-trigger {
|
||||
@apply text-base-strong flex w-full items-center justify-between p-4 text-left transition-all [&>svg]:shrink-0 [&>svg]:transition-transform [&>svg]:duration-75 [&[data-state=open]>svg]:rotate-180;
|
||||
}
|
||||
|
||||
.accordion-trigger-align-left {
|
||||
@apply justify-start [&>svg:first-of-type]:mr-2;
|
||||
}
|
||||
|
||||
.accordion-content-box {
|
||||
@apply data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down text-base-normal overflow-hidden transition-all;
|
||||
}
|
||||
|
||||
.accordion-content {
|
||||
@apply p-4;
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.alert {
|
||||
--alert-fg: var(--fg-neutral-primary);
|
||||
--alert-description-fg: var(--fg-neutral-secondary);
|
||||
--alert-fg-warning: var(--fg-tint-orange);
|
||||
--alert-fg-success: var(--fg-tint-green);
|
||||
--alert-fg-error: var(--fg-tint-red);
|
||||
--alert-fg-informative: var(--fg-tint-blue);
|
||||
--alert-border: var(--border-neutral-tertiary);
|
||||
--alert-border-warning: var(--border-tint-orange);
|
||||
--alert-border-success: var(--border-tint-green);
|
||||
--alert-border-error: var(--border-tint-red);
|
||||
--alert-border-informative: var(--border-tint-blue);
|
||||
--alert-bg: var(--bg-neutral-primary);
|
||||
|
||||
@apply relative inline-flex min-w-[356px] items-center space-x-2 border bg-[var(--alert-bg)] px-5 py-4;
|
||||
|
||||
/* default */
|
||||
@apply alert-radius-medium alert-default;
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
@apply relative mb-auto box-content w-5 flex-shrink-0 p-1;
|
||||
|
||||
/* default */
|
||||
@apply alert-icon-default;
|
||||
}
|
||||
|
||||
.alert-loader {
|
||||
@apply flex scale-100;
|
||||
}
|
||||
|
||||
.alert-content {
|
||||
@apply flex flex-1 items-center space-x-2;
|
||||
}
|
||||
|
||||
.alert-text-container {
|
||||
@apply flex flex-1 flex-col items-start justify-center;
|
||||
}
|
||||
|
||||
.alert-title {
|
||||
@apply text-title-h5 flex flex-1 flex-col text-[var(--alert-fg)];
|
||||
}
|
||||
|
||||
.alert-description {
|
||||
@apply text-base-normal text-[var(--alert-description-fg)];
|
||||
}
|
||||
|
||||
.alert-button {
|
||||
@apply flex-shrink-0;
|
||||
}
|
||||
|
||||
.alert-close {
|
||||
@apply flex-shrink-0;
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.badge {
|
||||
--badge-bold-fg: var(--fg-neutral-inverse);
|
||||
--badge-bold-fg-blue: var(--fg-neutral-inverse);
|
||||
--badge-bold-fg-orange: var(--fg-neutral-inverse);
|
||||
--badge-bold-fg-red: var(--fg-neutral-inverse);
|
||||
--badge-bold-fg-green: var(--fg-neutral-inverse);
|
||||
--badge-bold-border: var(--border-neutral-transparent);
|
||||
--badge-bold-border-blue: var(--border-neutral-transparent);
|
||||
--badge-bold-border-orange: var(--border-neutral-transparent);
|
||||
--badge-bold-border-red: var(--border-neutral-transparent);
|
||||
--badge-bold-border-green: var(--border-neutral-transparent);
|
||||
--badge-bold-bg: var(--bg-neutral-inverse);
|
||||
--badge-bold-bg-blue: var(--bg-tint-blue-bold);
|
||||
--badge-bold-bg-orange: var(--bg-tint-orange-bold);
|
||||
--badge-bold-bg-red: var(--bg-tint-red-bold);
|
||||
--badge-bold-bg-green: var(--bg-tint-green-bold);
|
||||
--badge-subtle-fg: var(--fg-neutral-primary);
|
||||
--badge-subtle-fg-blue: var(--fg-tint-blue);
|
||||
--badge-subtle-fg-orange: var(--fg-tint-orange);
|
||||
--badge-subtle-fg-red: var(--fg-tint-red);
|
||||
--badge-subtle-fg-green: var(--fg-tint-green);
|
||||
--badge-subtle-border: var(--border-neutral-transparent);
|
||||
--badge-subtle-border-blue: var(--border-neutral-transparent);
|
||||
--badge-subtle-border-orange: var(--border-neutral-transparent);
|
||||
--badge-subtle-border-red: var(--border-neutral-transparent);
|
||||
--badge-subtle-border-green: var(--border-neutral-transparent);
|
||||
--badge-subtle-bg: var(--bg-neutral-tertiary);
|
||||
--badge-subtle-bg-blue: var(--bg-tint-blue-subtle);
|
||||
--badge-subtle-bg-orange: var(--bg-tint-orange-subtle);
|
||||
--badge-subtle-bg-red: var(--bg-tint-red-subtle);
|
||||
--badge-subtle-bg-green: var(--bg-tint-green-subtle);
|
||||
--badge-outline-fg: var(--fg-neutral-primary);
|
||||
--badge-outline-fg-blue: var(--fg-tint-blue);
|
||||
--badge-outline-fg-orange: var(--fg-tint-orange);
|
||||
--badge-outline-fg-red: var(--fg-tint-red);
|
||||
--badge-outline-fg-green: var(--fg-tint-green);
|
||||
--badge-outline-border: var(--border-neutral-tertiary);
|
||||
--badge-outline-border-blue: var(--border-tint-blue);
|
||||
--badge-outline-border-orange: var(--border-tint-orange);
|
||||
--badge-outline-border-red: var(--border-tint-red);
|
||||
--badge-outline-border-green: var(--border-tint-green);
|
||||
--badge-outline-bg: var(--bg-neutral-primary);
|
||||
--badge-outline-bg-blue: var(--bg-neutral-primary);
|
||||
--badge-outline-bg-orange: var(--bg-neutral-primary);
|
||||
--badge-outline-bg-red: var(--bg-neutral-primary);
|
||||
--badge-outline-bg-green: var(--bg-neutral-primary);
|
||||
|
||||
@apply text-small-strong inline-flex whitespace-nowrap px-2 py-0.5;
|
||||
|
||||
/* default */
|
||||
@apply badge-bold-default badge-radius-medium;
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.button {
|
||||
--button-primary-fg: var(--fg-neutral-inverse);
|
||||
--button-secondary-fg: var(--fg-neutral-primary);
|
||||
--button-destructive-fg: var(--fg-neutral-inverse);
|
||||
--button-ghost-fg: var(--fg-neutral-primary);
|
||||
--button-outline-fg: var(--tint, var(--fg-neutral-primary));
|
||||
--button-primary-border: var(--border-neutral-transparent);
|
||||
--button-secondary-border: var(--border-neutral-transparent);
|
||||
--button-destructive-border: var(--border-neutral-transparent);
|
||||
--button-ghost-border: var(--border-neutral-transparent);
|
||||
--button-outline-border: var(--border-neutral-tertiary);
|
||||
--button-primary-bg: var(--tint, var(--bg-neutral-inverse));
|
||||
--button-secondary-bg: var(--bg-neutral-tertiary);
|
||||
--button-destructive-bg: var(--bg-tint-red-bold);
|
||||
--button-ghost-bg: var(--bg-neutral-transparent);
|
||||
--button-ghost-bg-hover: var(--bg-neutral-secondary);
|
||||
--button-outline-bg: var(--bg-neutral-transparent);
|
||||
--button-outline-bg-hover: var(--tint-subtle, var(--bg-neutral-secondary));
|
||||
|
||||
@apply relative inline-flex h-fit cursor-pointer items-center justify-center transition-opacity disabled:cursor-not-allowed disabled:opacity-50 [&:not(:disabled)]:hover:opacity-80;
|
||||
|
||||
/* default */
|
||||
@apply button-small button-radius-medium button-primary;
|
||||
}
|
||||
|
||||
.button-loading {
|
||||
@apply absolute-center pointer-events-none flex shadow-none;
|
||||
|
||||
/* default */
|
||||
@apply button-loading-primary;
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.calendar {
|
||||
--calendar-fg-default: var(--fg-neutral-primary);
|
||||
--calendar-fg-pressed: var(--fg-neutral-inverse);
|
||||
--calendar-week-fg: var(--fg-neutral-tertiary);
|
||||
--calendar-border: var(--border-neutral-tertiary);
|
||||
--calendar-bg: var(--bg-neutral-primary);
|
||||
--calendar-bg-pressed: var(--tint, var(--bg-neutral-inverse));
|
||||
--calendar-bg-hover: var(--bg-neutral-tertiary);
|
||||
--calendar-bg-range: var(--bg-neutral-tertiary);
|
||||
|
||||
@apply rounded-8 relative box-content w-fit border border-[var(--calendar-border)] bg-[var(--calendar-bg)] p-2 shadow-sm;
|
||||
}
|
||||
|
||||
.calendar-months {
|
||||
@apply flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0;
|
||||
}
|
||||
|
||||
.calendar-month {
|
||||
@apply min-w-[15.75rem] space-y-4;
|
||||
}
|
||||
|
||||
.calendar-caption {
|
||||
@apply relative flex items-center justify-center pt-1;
|
||||
}
|
||||
|
||||
.calendar-caption-label {
|
||||
@apply text-base-strong text-[var(--calendar-fg-default)];
|
||||
}
|
||||
|
||||
.calendar-nav {
|
||||
@apply flex items-center;
|
||||
}
|
||||
|
||||
.calendar-nav-button {
|
||||
@apply flex p-2.5 hover:opacity-50;
|
||||
}
|
||||
|
||||
.calendar-nav-button-previous {
|
||||
@apply absolute left-0;
|
||||
}
|
||||
|
||||
.calendar-nav-button-next {
|
||||
@apply absolute right-0;
|
||||
}
|
||||
|
||||
.calendar-table {
|
||||
@apply !mt-4 w-full border-collapse;
|
||||
}
|
||||
|
||||
.calendar-head-row {
|
||||
@apply flex;
|
||||
}
|
||||
|
||||
.calendar-head-cell {
|
||||
@apply text-small-normal flex-1 px-2 py-0.5 font-normal text-[var(--calendar-week-fg)];
|
||||
}
|
||||
|
||||
.calendar-row {
|
||||
@apply mt-0.5 flex w-full;
|
||||
}
|
||||
|
||||
.calendar-cell {
|
||||
@apply [&:has([aria-selected].day-range-end)]:rounded-r-8 first:[&:has([aria-selected])]:rounded-l-8 last:[&:has([aria-selected])]:rounded-r-8 [&:has(.calendar-day-range-start)]:rounded-l-8 [&:has(.calendar-day-range-end)]:rounded-r-8 text-base-normal relative aspect-square flex-1 p-0 text-center focus-within:relative focus-within:z-20 [&:has(.calendar-day-range-end)]:bg-[var(--calendar-bg-hover)] [&:has(.calendar-day-range-start)]:bg-[var(--calendar-bg-hover)];
|
||||
}
|
||||
|
||||
.calendar-day {
|
||||
@apply rounded-8 text-base-normal relative flex h-full w-full items-center justify-center overflow-hidden p-0 transition-colors aria-selected:opacity-100 [&:not(.calendar-day-selected)]:hover:bg-[var(--calendar-bg-hover)];
|
||||
}
|
||||
|
||||
.calendar-day-selected:not(.calendar-day-outside) {
|
||||
@apply bg-[var(--calendar-bg-pressed)] text-[--calendar-fg-pressed];
|
||||
}
|
||||
|
||||
.calendar-day-today {
|
||||
@apply before:absolute before:left-1/2 before:top-0 before:flex before:h-1 before:w-1 before:-translate-x-1/2 before:rounded-full before:bg-[var(--calendar-bg-pressed)];
|
||||
}
|
||||
|
||||
.calendar-day-outside {
|
||||
@apply pointer-events-none !opacity-50;
|
||||
}
|
||||
|
||||
.calendar-day-disabled {
|
||||
@apply opacity-50;
|
||||
}
|
||||
|
||||
.calendar-day-range-middle {
|
||||
@apply rounded-0 aria-selected:bg-[var(--calendar-bg-hover)] aria-selected:text-[var(--calendar-fg-default)];
|
||||
}
|
||||
|
||||
.calendar-day-hidden {
|
||||
@apply invisible;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.caption {
|
||||
--caption-fg: var(--fg-neutral-tertiary);
|
||||
--caption-fg-success: var(--fg-tint-green);
|
||||
--caption-fg-error: var(--fg-tint-red);
|
||||
|
||||
@apply text-base-normal flex items-center gap-1;
|
||||
|
||||
/* default */
|
||||
@apply caption-default;
|
||||
}
|
||||
|
||||
.caption-icon {
|
||||
@apply flex-shrink-0;
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.checkbox {
|
||||
--checkbox-fg: var(--fg-neutral-primary);
|
||||
--checkbox-fg-checked: var(--fg-neutral-primary);
|
||||
--checkbox-fg-indeterminate: var(--fg-neutral-primary);
|
||||
--checkbox-icon: var(--fg-neutral-inverse);
|
||||
--checkbox-icon-checked: var(--fg-neutral-inverse);
|
||||
--checkbox-border-default: var(--border-neutral-secondary);
|
||||
--checkbox-bg: var(--bg-neutral-primary);
|
||||
--checkbox-bg-checked: var(--tint, var(--bg-neutral-inverse));
|
||||
|
||||
@apply inline-flex cursor-pointer items-center text-[var(--checkbox-fg)] transition-opacity disabled:cursor-not-allowed disabled:opacity-50 [&:not(:disabled)]:hover:opacity-80;
|
||||
|
||||
/* default */
|
||||
@apply checkbox-small;
|
||||
}
|
||||
|
||||
.check {
|
||||
@apply before:rounded-4 relative mr-2 flex items-center justify-center text-[var(--checkbox-icon)] before:absolute before:inset-0 before:flex before:border before:border-[var(--checkbox-border-default)];
|
||||
|
||||
/* default */
|
||||
@apply check-small;
|
||||
}
|
||||
|
||||
.checkbox-icon {
|
||||
@apply rounded-4 absolute left-0 top-0 flex h-full w-full items-center justify-center bg-[var(--checkbox-bg-checked)] text-[var(--checkbox-icon-checked)];
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.combobox-content {
|
||||
--combobox-fg: var(--fg-neutral-primary);
|
||||
--combobox-fg-empty: var(--fg-neutral-secondary);
|
||||
--combobox-fg-placeholder: var(--fg-neutral-tertiary);
|
||||
--combobox-shortcut-fg: var(--fg-neutral-tertiary);
|
||||
--combobox-bg: var(--bg-neutral-primary);
|
||||
--combobox-bg-hover: var(--bg-neutral-tertiary);
|
||||
--combobox-border: var(--border-neutral-tertiary);
|
||||
|
||||
@apply flex h-full min-w-[--radix-popover-trigger-width] flex-col overflow-hidden p-1 text-[var(--combobox-fg)];
|
||||
}
|
||||
|
||||
.combobox-empty {
|
||||
@apply text-base-normal flex items-center justify-center p-6 text-center text-[var(--combobox-fg-empty)];
|
||||
}
|
||||
|
||||
.combobox-item {
|
||||
@apply rounded-6 text-base-normal relative flex cursor-pointer select-none items-center p-2 outline-none transition-colors hover:bg-[var(--combobox-bg-hover)] data-[selected=true]:bg-[var(--combobox-bg-hover)];
|
||||
}
|
||||
|
||||
.combobox-item ~ .combobox-item {
|
||||
@apply mt-1;
|
||||
}
|
||||
|
||||
.combobox-check {
|
||||
@apply mr-2;
|
||||
}
|
||||
|
||||
.combobox-caption {
|
||||
@apply text-small-normal ml-auto tracking-widest text-[var(--combobox-shortcut-fg)];
|
||||
}
|
||||
|
||||
.combobox-separator {
|
||||
@apply -mx-1 my-1 h-px bg-[var(--combobox-border)];
|
||||
}
|
||||
|
||||
.combobox-group {
|
||||
@apply [&_[cmdk-group-heading]]:text-base-strong overflow-hidden p-[1px] text-[var(--combobox-fg)] [&_[cmdk-group-heading]]:p-2;
|
||||
}
|
||||
|
||||
.combobox-list {
|
||||
@apply pt-1;
|
||||
}
|
||||
|
||||
.combobox-input-box {
|
||||
@apply relative flex items-center justify-center border-b border-b-[var(--combobox-border)] bg-[var(--combobox-bg)] [&>svg]:ml-2 [&>svg]:shrink-0 [&>svg]:opacity-50;
|
||||
}
|
||||
|
||||
.combobox-input {
|
||||
@apply text-base-normal min-w-0 flex-1 bg-[transparent] p-2 text-[var(--combobox-fg)] outline-none placeholder:text-[var(--combobox-fg-placeholder)];
|
||||
}
|
||||
|
||||
.combobox-trigger {
|
||||
--combobox-border-error: var(--border-tint-red);
|
||||
|
||||
@apply [&>svg:last-of-type]:!ml-auto;
|
||||
}
|
||||
|
||||
.combobox-trigger[aria-invalid='true'] {
|
||||
@apply !border-2 !border-[var(--combobox-border-error)];
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.dialog {
|
||||
--dialog-bg: var(--bg-neutral-primary);
|
||||
--dialog-border: var(--border-neutral-tertiary);
|
||||
|
||||
@apply data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-[var(--alpha-black800)];
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
--dialog-bg: var(--bg-neutral-primary);
|
||||
--dialog-border: var(--border-neutral-tertiary);
|
||||
|
||||
@apply data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-sm translate-x-[-50%] translate-y-[-50%] gap-y-5 space-y-2 border border-[var(--dialog-border)] bg-[var(--dialog-bg)] p-5 duration-200;
|
||||
|
||||
/* default */
|
||||
@apply dialog-content-radius-medium;
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
@apply flex flex-col gap-1 text-left;
|
||||
}
|
||||
|
||||
.dialog-icon {
|
||||
@apply p-1;
|
||||
|
||||
/* default */
|
||||
@apply dialog-icon-default;
|
||||
}
|
||||
|
||||
.dialog-title {
|
||||
@apply text-title-h4 text-[var(--fg-neutral-primary)];
|
||||
}
|
||||
|
||||
.dialog-description {
|
||||
@apply text-base-normal text-[var(--fg-neutral-secondary)];
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
@apply space-y-3;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
@apply flex flex-wrap gap-2;
|
||||
|
||||
/* default */
|
||||
@apply dialog-footer-right;
|
||||
}
|
||||
|
||||
.dialog-close {
|
||||
@apply !absolute right-2 top-2 !m-0;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.divider {
|
||||
--divider-border-bold: var(--border-neutral-primary);
|
||||
--divider-border-subtle: var(--border-neutral-tertiary);
|
||||
|
||||
@apply shrink-0;
|
||||
|
||||
/* default */
|
||||
@apply [&:not(.divider-vertical)]:divider-horizontal divider-bold;
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.dropdown-content {
|
||||
--dropdown-fg: var(--fg-neutral-primary);
|
||||
--dropdown-fg-pressed: var(--tint, var(--fg-neutral-primary));
|
||||
--dropdown-fg-empty: var(--fg-neutral-secondary);
|
||||
--dropdown-shortcut-fg: var(--fg-neutral-tertiary);
|
||||
--dropdown-bg: var(--bg-neutral-primary);
|
||||
--dropdown-bg-hover: var(--bg-neutral-tertiary);
|
||||
--dropdown-bg-pressed: var(--bg-neutral-tertiary);
|
||||
--dropdown-border: var(--border-neutral-tertiary);
|
||||
|
||||
@apply data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95;
|
||||
@apply data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95;
|
||||
@apply data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2;
|
||||
@apply rounded-8 z-50 min-w-[--radix-dropdown-menu-trigger-width] overflow-hidden border p-1 shadow-md;
|
||||
@apply border-[var(--dropdown-border)] bg-[var(--dropdown-bg)] text-[var(--dropdown-fg)];
|
||||
}
|
||||
|
||||
.dropdown-sub-trigger {
|
||||
@apply rounded-6 text-base-normal flex cursor-pointer select-none items-center p-2 outline-none focus:bg-[var(--dropdown-bg-hover)] data-[state=open]:bg-[var(--dropdown-bg-pressed)] data-[state=open]:text-[var(--dropdown-fg-pressed)];
|
||||
}
|
||||
|
||||
.dropdown-sub-content {
|
||||
--dropdown-fg: var(--fg-neutral-primary);
|
||||
--dropdown-fg-pressed: var(--tint, var(--fg-neutral-primary));
|
||||
--dropdown-fg-empty: var(--fg-neutral-secondary);
|
||||
--dropdown-shortcut-fg: var(--fg-neutral-tertiary);
|
||||
--dropdown-bg: var(--bg-neutral-primary);
|
||||
--dropdown-bg-hover: var(--bg-neutral-tertiary);
|
||||
--dropdown-bg-pressed: var(--bg-neutral-tertiary);
|
||||
--dropdown-border: var(--border-neutral-tertiary);
|
||||
|
||||
@apply data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95;
|
||||
@apply data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95;
|
||||
@apply data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2;
|
||||
@apply data-[side=bottom]:mt-1 data-[side=left]:mr-1 data-[side=right]:ml-1 data-[side=top]:mb-1;
|
||||
@apply rounded-8 z-50 min-w-[--radix-dropdown-menu-trigger-width] overflow-hidden border p-1 shadow-lg;
|
||||
@apply border-[var(--dropdown-border)] bg-[var(--dropdown-bg)] text-[var(--dropdown-fg)];
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
@apply rounded-6 text-base-normal relative flex cursor-pointer select-none items-center p-2 outline-none transition-colors focus:bg-[var(--dropdown-bg-hover)] data-[disabled]:pointer-events-none data-[state=on]:bg-[var(--dropdown-bg-pressed)] data-[state=on]:text-[var(--dropdown-fg-pressed)] data-[disabled]:opacity-50;
|
||||
@apply [&>svg]:h-4 [&>svg]:w-4;
|
||||
}
|
||||
|
||||
.dropdown-checkbox {
|
||||
@apply rounded-8 text-base-normal relative flex cursor-pointer select-none items-center py-2 pl-8 outline-none transition-colors focus:bg-[var(--dropdown-bg-hover)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
|
||||
}
|
||||
|
||||
.dropdown-checkbox-icon {
|
||||
@apply absolute left-2 flex h-4 w-4 items-center justify-center;
|
||||
}
|
||||
|
||||
.dropdown-radio {
|
||||
@apply rounded-8 text-base-normal relative flex cursor-pointer select-none items-center py-2 pl-8 outline-none transition-colors focus:bg-[var(--dropdown-bg-hover)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
|
||||
}
|
||||
|
||||
.dropdown-radio-icon {
|
||||
@apply absolute left-3.5 flex h-2 w-2 items-center justify-center;
|
||||
}
|
||||
|
||||
.dropdown-item ~ .dropdown-item {
|
||||
@apply mt-1;
|
||||
}
|
||||
|
||||
.dropdown-label {
|
||||
@apply text-base-strong space-x-2 p-2;
|
||||
}
|
||||
|
||||
.dropdown-caption {
|
||||
@apply text-small-normal ml-auto tracking-widest text-[var(--dropdown-shortcut-fg)];
|
||||
}
|
||||
|
||||
.dropdown-separator {
|
||||
@apply -mx-1 my-1 h-px bg-[var(--dropdown-border)];
|
||||
}
|
||||
|
||||
.dropdown-empty {
|
||||
@apply text-base-normal flex items-center justify-center p-6 text-[var(--dropdown-fg-empty)];
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.icon {
|
||||
@apply pointer-events-none inline-flex text-inherit;
|
||||
}
|
||||
|
||||
.icon-clickable {
|
||||
@apply pointer-events-auto cursor-pointer;
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.input-field {
|
||||
--input-fg: var(--fg-neutral-tertiary);
|
||||
--input-fg-typing: var(--fg-neutral-primary);
|
||||
--input-fg-filled: var(--fg-neutral-primary);
|
||||
--input-border: var(--border-neutral-tertiary);
|
||||
--input-border-typing: var(--tint, var(--border-neutral-primary));
|
||||
--input-border-filled: var(--border-neutral-tertiary);
|
||||
--input-border-error: var(--border-tint-red);
|
||||
--input-bg: var(--bg-neutral-primary);
|
||||
--input-bg-typing: var(--bg-neutral-tertiary);
|
||||
--input-bg-filled: var(--bg-neutral-primary);
|
||||
|
||||
@apply flex flex-col gap-1.5;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
@apply relative;
|
||||
@apply [&:has(.input-button)>.input-large]:!pr-12 [&:has(.input-button)>.input-medium]:!pr-10 [&:has(.input-button)>.input-small]:!pr-8;
|
||||
@apply [&:has(.input-icon)>.input-large]:!pl-12 [&:has(.input-icon)>.input-medium]:!pl-10 [&:has(.input-icon)>.input-small]:!pl-8;
|
||||
}
|
||||
|
||||
.input {
|
||||
@apply text-[var(--input-fg-filled)] placeholder:text-[var(--input-fg)] placeholder-shown:text-[var(--input-fg)] focus-visible:text-[var(--input-fg-typing)];
|
||||
@apply border border-[var(--input-border-filled)] placeholder-shown:border placeholder-shown:border-[var(--input-border)] focus-visible:border-2 focus-visible:border-[var(--input-border-typing)];
|
||||
@apply bg-[var(--input-bg-filled)] placeholder-shown:bg-[var(--input-bg)] focus-visible:bg-[var(--input-bg-typing)];
|
||||
|
||||
@apply w-full outline-none;
|
||||
@apply disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-search-cancel-button]:hidden;
|
||||
|
||||
/* default */
|
||||
@apply input-small input-radius-medium;
|
||||
}
|
||||
.input[aria-invalid='true'] {
|
||||
@apply !border-2 !border-[var(--input-border-error)] !bg-[var(--input-bg-error)];
|
||||
}
|
||||
|
||||
.input-button {
|
||||
@apply absolute-y-center flex flex-shrink-0 items-center justify-center disabled:cursor-not-allowed disabled:opacity-50;
|
||||
|
||||
/* default */
|
||||
@apply input-button-small;
|
||||
}
|
||||
|
||||
.input-button.show-only-on-focus-and-has-value {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.input-box:focus-within
|
||||
.input:not(:placeholder-shown)
|
||||
~ .input-button.show-only-on-focus-and-has-value {
|
||||
@apply flex;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
@apply absolute-y-center flex;
|
||||
|
||||
/* default */
|
||||
@apply input-icon-small;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.label {
|
||||
--label-fg: var(--fg-neutral-primary);
|
||||
--label-fg-error: var(--fg-tint-red);
|
||||
|
||||
@apply text-base-normal font-normal text-[var(--label-fg)] data-[error=true]:text-[var(--label-fg-error)];
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.menu {
|
||||
--menu-fg: var(--fg-neutral-tertiary);
|
||||
--menu-fg-hover: var(--fg-neutral-tertiary);
|
||||
--menu-fg-pressed: var(--fg-neutral-primary);
|
||||
--menu-bg-hover: var(--bg-neutral-tertiary);
|
||||
--menu-bg-pressed: var(--bg-neutral-tertiary);
|
||||
|
||||
@apply rounded-8 inline-flex px-2 py-3;
|
||||
|
||||
/* default */
|
||||
@apply [&:not(.menu-vertical)]:menu-horizontal;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
@apply rounded-8 relative flex w-full cursor-pointer select-none items-center gap-2 text-left text-[var(--menu-fg)] outline-none hover:bg-[var(--menu-bg-hover)] hover:text-[var(--menu-fg-hover)] hover:opacity-100 data-[disabled]:pointer-events-none data-[state=on]:bg-[var(--menu-bg-pressed)] data-[state=open]:!bg-[var(--menu-bg-pressed)] data-[state=on]:text-[var(--menu-fg-pressed)] data-[state=open]:text-[var(--menu-fg-pressed)] data-[disabled]:opacity-50 [&>svg]:flex-shrink-0;
|
||||
|
||||
/* default */
|
||||
@apply menu-item-small;
|
||||
}
|
||||
|
||||
.menu-dropdown-item {
|
||||
@apply !p-0;
|
||||
}
|
||||
|
||||
.menu-dropdown-item ~ .menu-dropdown-item {
|
||||
@apply mt-1;
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
/* todo remove */
|
||||
.navbar {
|
||||
@apply border-b-neutral-tertiary bg-neutral-primary flex h-14 items-center border-b px-6 py-2.5;
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
@apply !p-0;
|
||||
}
|
||||
|
||||
.navbar-logo {
|
||||
@apply flex p-1.5;
|
||||
}
|
||||
|
||||
.navbar-divider {
|
||||
@apply mx-1;
|
||||
}
|
||||
|
||||
.navbar-dropdown {
|
||||
@apply ml-auto;
|
||||
}
|
||||
|
||||
.navbar-dropdown ~ .navbar-button {
|
||||
@apply ml-3;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.pagination {
|
||||
@apply mx-auto flex w-full justify-center;
|
||||
}
|
||||
|
||||
.pagination-content {
|
||||
@apply flex flex-row items-center space-x-1;
|
||||
}
|
||||
|
||||
.pagination-item {
|
||||
@apply flex-shrink-0;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.popover {
|
||||
@apply data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95;
|
||||
@apply data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95;
|
||||
@apply data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2;
|
||||
@apply rounded-8 z-50 min-w-32 overflow-hidden border border-[var(--border-neutral-tertiary)] bg-[var(--bg-neutral-primary)] shadow-md;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
plugins: [
|
||||
require('postcss-import'),
|
||||
require('tailwindcss/nesting'),
|
||||
require('tailwindcss')('./src/components/tailwind.config.js'),
|
||||
],
|
||||
};
|
||||
@@ -0,0 +1,47 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.radio-card-group {
|
||||
--radio-card-text-title: var(--fg-neutral-primary);
|
||||
--radio-card-text-description: var(--fg-neutral-tertiary);
|
||||
--radio-card-border-default: var(--border-neutral-tertiary);
|
||||
--radio-card-border-selected: var(--tint, var(--border-neutral-primary));
|
||||
--radio-card-fg-default: var(--bg-neutral-primary);
|
||||
--radio-card-fg-hover: var(--bg-neutral-tertiary);
|
||||
|
||||
@apply inline-flex;
|
||||
|
||||
/* default */
|
||||
@apply [&:not(.radio-card-group-vertical)]:radio-card-group-horizontal;
|
||||
}
|
||||
|
||||
.radio-card {
|
||||
@apply relative inline-flex border border-[var(--radio-card-border-default)] bg-[var(--radio-card-fg-default)] transition-colors disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-2 data-[state=checked]:border-[var(--radio-card-border-selected)] [&:not(:disabled)]:hover:bg-[var(--radio-card-fg-hover)];
|
||||
|
||||
/* default */
|
||||
@apply [&:not(.radio-card-horizontal)]:radio-card-vertical radio-card-radius-medium;
|
||||
}
|
||||
|
||||
.radio-card-text {
|
||||
@apply block text-inherit;
|
||||
}
|
||||
|
||||
.radio-card-title {
|
||||
@apply text-base-strong block text-[var(--radio-card-text-title)];
|
||||
}
|
||||
|
||||
.radio-card-description {
|
||||
@apply text-base-normal block text-[var(--radio-card-text-description)];
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.radio-group {
|
||||
--radio-fg: var(--fg-neutral-primary);
|
||||
--radio-border: var(--border-neutral-tertiary);
|
||||
--radio-bg: var(--bg-neutral-primary);
|
||||
--radio-bg-select: var(--tint, var(--bg-neutral-inverse));
|
||||
|
||||
@apply flex;
|
||||
|
||||
/* default */
|
||||
@apply [&:not(.radio-group-vertical)]:radio-group-horizontal;
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
@apply text-base-normal flex items-center py-2 text-[var(--radio-fg)] disabled:cursor-not-allowed disabled:opacity-50;
|
||||
}
|
||||
|
||||
.radio {
|
||||
@apply relative mr-2 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-[var(--radio-bg)] before:absolute before:inset-0 before:flex before:rounded-full before:border before:border-[var(--radio-border)];
|
||||
}
|
||||
|
||||
.radio-indicator {
|
||||
@apply absolute left-0 top-0 flex h-full w-full items-center justify-center rounded-full bg-[var(--radio-bg-select)] text-[var(--radio-bg)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.scroll-area {
|
||||
--scroll-area-bg: var(--bg-neutral-transparent);
|
||||
--scroll-area-thumb-bg: var(--bg-neutral-tertiary);
|
||||
|
||||
@apply relative overflow-hidden bg-[var(--scroll-area-bg)];
|
||||
}
|
||||
|
||||
.scroll-area-viewport {
|
||||
@apply h-full w-full rounded-[inherit] has-[.scroll-bar-horizontal]:pb-2 has-[.scroll-bar-vertical]:pr-2;
|
||||
}
|
||||
|
||||
.scroll-bar {
|
||||
@apply flex touch-none select-none transition-colors;
|
||||
|
||||
/* default */
|
||||
@apply [&:not(.scroll-bar-horizontal)]:scroll-bar-vertical;
|
||||
}
|
||||
|
||||
.scroll-thumb {
|
||||
@apply relative flex-1 rounded-full bg-[var(--scroll-area-thumb-bg)];
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.select {
|
||||
/* default */
|
||||
@apply select-small;
|
||||
}
|
||||
|
||||
.select-trigger {
|
||||
--select-fg: var(--fg-neutral-tertiary);
|
||||
--select-fg-pressed: var(--fg-neutral-primary);
|
||||
--select-fg-filled: var(--fg-neutral-primary);
|
||||
--select-border: var(--border-neutral-tertiary);
|
||||
--select-border-pressed: var(--tint, var(--border-neutral-primary));
|
||||
--select-border-error: var(--border-tint-red);
|
||||
--select-bg: var(--bg-neutral-primary);
|
||||
--select-bg-pressed: var(--bg-neutral-tertiary);
|
||||
|
||||
@apply relative flex w-full items-center justify-start bg-[var(--select-bg)] text-left text-[var(--select-fg-filled)] transition-transform before:absolute before:inset-0 before:flex before:border before:border-[var(--select-border)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-[var(--select-fg)] data-[state=open]:text-[var(--select-fg-pressed)] data-[state=open]:before:border-2 data-[state=open]:before:border-[var(--select-border-pressed)] [&>span]:flex [&>span]:flex-1 [&>span]:items-center [&>span]:overflow-hidden [&>svg:last-of-type]:data-[state=open]:rotate-180;
|
||||
|
||||
/* default */
|
||||
@apply select-trigger-medium select-trigger-radius-medium;
|
||||
}
|
||||
|
||||
.select-trigger[aria-invalid='true'] {
|
||||
@apply before:!border-2 before:!border-[var(--select-border-error)];
|
||||
}
|
||||
|
||||
.select-content {
|
||||
--select-fg: var(--fg-neutral-tertiary);
|
||||
--select-fg-pressed: var(--fg-neutral-primary);
|
||||
--select-fg-filled: var(--fg-neutral-primary);
|
||||
--select-border: var(--border-neutral-tertiary);
|
||||
--select-border-pressed: var(--tint, var(--border-neutral-primary));
|
||||
--select-border-error: var(--border-tint-red);
|
||||
--select-bg: var(--bg-neutral-primary);
|
||||
--select-bg-pressed: var(--bg-neutral-tertiary);
|
||||
|
||||
@apply data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95;
|
||||
@apply data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95;
|
||||
@apply data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:mt-1 data-[side=top]:mb-1;
|
||||
@apply rounded-8 relative z-50 !min-w-[var(--radix-select-trigger-width,_var(--radix-popper-anchor-width))] overflow-hidden border border-[var(--select-border)] bg-[var(--select-bg)] p-1 text-[var(--select-fg-filled)] shadow-md;
|
||||
}
|
||||
|
||||
.select-viewport {
|
||||
@apply p-px;
|
||||
}
|
||||
|
||||
.select-group-label {
|
||||
@apply text-base-strong p-2;
|
||||
}
|
||||
|
||||
.select-item {
|
||||
@apply rounded-6 text-base-normal relative flex cursor-pointer select-none items-center py-2 outline-none transition-colors hover:bg-[var(--select-bg-pressed)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
|
||||
|
||||
/* default */
|
||||
@apply [&:not(.select-item-right)]:select-item-left;
|
||||
}
|
||||
|
||||
.select-item-check {
|
||||
@apply absolute flex h-4 w-4 items-center justify-center;
|
||||
|
||||
/* default */
|
||||
@apply [&:not(.select-item-check-right)]:select-item-check-left;
|
||||
}
|
||||
|
||||
.select-separator {
|
||||
@apply -mx-1 my-1 h-px bg-[var(--select-border)];
|
||||
}
|
||||
|
||||
.select-tag {
|
||||
@apply mr-2.5 !gap-0;
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.sheet-overlay {
|
||||
@apply data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-dim fixed inset-0 z-50;
|
||||
}
|
||||
|
||||
.sheet {
|
||||
--sheet-border: var(--border-neutral-tertiary);
|
||||
|
||||
@apply data-[state=open]:animate-in data-[state=closed]:animate-out bg-neutral-primary text-neutral-primary fixed z-50 flex flex-col space-y-5 border-[var(--sheet-border)] p-5 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500;
|
||||
|
||||
/* default */
|
||||
@apply sheet-radius-small [&:not([class*=sheet-side])]:sheet-side-right;
|
||||
}
|
||||
|
||||
.sheet-close {
|
||||
@apply !absolute right-2 top-2 !m-0;
|
||||
}
|
||||
|
||||
.sheet-header {
|
||||
@apply flex flex-shrink-0 flex-col gap-1 text-left;
|
||||
}
|
||||
|
||||
.sheet-footer {
|
||||
@apply flex flex-shrink-0 justify-end gap-2;
|
||||
}
|
||||
|
||||
.sheet-icon {
|
||||
@apply flex p-1;
|
||||
}
|
||||
|
||||
.sheet-title {
|
||||
@apply text-xlarge-strong;
|
||||
}
|
||||
|
||||
.sheet-description {
|
||||
@apply text-neutral-secondary text-base-normal;
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.spinner {
|
||||
@apply inline-flex animate-[spin_1s_cubic-bezier(0.4,0,0.2,1)_infinite];
|
||||
}
|
||||
|
||||
.spinner-small {
|
||||
@apply w-4 h-4;
|
||||
}
|
||||
|
||||
.spinner-medium {
|
||||
@apply w-5 h-5;
|
||||
}
|
||||
|
||||
.spinner-large {
|
||||
@apply w-6 h-6;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.25' fill-rule='evenodd' clip-rule='evenodd' d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.47715 2 2 6.47715 2 12C2 12.5523 1.55228 13 1 13C0.447715 13 0 12.5523 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 12.5523 23.5523 13 23 13C22.4477 13 22 12.5523 22 12C22 6.47715 17.5228 2 12 2Z' fill='black'/%3E%3C/svg%3E%0A");
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 100%;
|
||||
background-color: currentcolor;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.switch {
|
||||
--switch-fg: var(--fg-neutral-primary);
|
||||
--switch-handle-bg: var(--bg-neutral-primary);
|
||||
--switch-bg: var(--bg-neutral-inverse);
|
||||
--switch-bg-blue: var(--bg-tint-blue-bold);
|
||||
--switch-bg-orange: var(--bg-tint-orange-bold);
|
||||
--switch-bg-red: var(--bg-tint-red-bold);
|
||||
--switch-bg-green: var(--bg-tint-green-bold);
|
||||
--switch-bg-off: var(--bg-neutral-secondary);
|
||||
|
||||
@apply text-base-normal relative inline-flex h-6 cursor-pointer items-center gap-2 text-[var(--switch-fg)] before:box-content before:flex before:h-5 before:w-10 before:rounded-full before:p-0.5 before:transition-colors disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:before:bg-[var(--switch-bg-off)];
|
||||
|
||||
/* default */
|
||||
@apply switch-default;
|
||||
}
|
||||
|
||||
.switch-thumb {
|
||||
@apply absolute left-0.5 top-0.5 flex h-5 w-5 translate-x-0 rounded-full bg-[var(--switch-handle-bg)] transition-transform data-[state=checked]:translate-x-full;
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.table {
|
||||
--table-header-fg: var(--fg-neutral-tertiary);
|
||||
--table-cell-fg: var(--fg-neutral-primary);
|
||||
--table-border: var(--border-neutral-tertiary);
|
||||
--table-bg: var(--bg-neutral-primary);
|
||||
--table-bg-hover: var(--bg-neutral-tertiary);
|
||||
|
||||
@apply w-full caption-bottom border-[var(--table-border)];
|
||||
}
|
||||
|
||||
.table-header {
|
||||
@apply [&_th]:border-b [&_th]:border-b-[var(--table-border)];
|
||||
}
|
||||
|
||||
.table-body {
|
||||
@apply [&_td]:border-b [&_td]:border-b-[var(--table-border)] [&_tr:last-child_td]:border-0;
|
||||
}
|
||||
|
||||
.table-footer {
|
||||
@apply border-t border-t-[var(--table-border)] bg-[var(--table-bg-hover)] [&>tr]:last:border-b-0;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
@apply border-b border-b-[var(--table-border)] transition-colors hover:bg-[var(--table-bg-hover)] data-[state=selected]:bg-[var(--table-bg-hover)];
|
||||
}
|
||||
|
||||
.table-head {
|
||||
@apply text-base-normal h-12 px-4 align-middle font-normal text-[var(--table-header-fg)] [&:has([role=checkbox])]:pr-0 [&>.badge]:mr-1 [&>svg]:mr-1 [&>svg]:text-[var(--table-header-fg)];
|
||||
|
||||
/* default */
|
||||
@apply table-head-left;
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
@apply text-base-normal px-4 py-3 align-middle text-[var(--table-cell-fg)] [&:has([role=checkbox])]:pr-0 [&>.badge]:mr-1 [&>svg]:text-[var(--table-cell-fg)];
|
||||
|
||||
/* default */
|
||||
@apply table-cell-left;
|
||||
}
|
||||
|
||||
.table-caption {
|
||||
@apply text-small-normal mt-1 text-[--table-header-fg];
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.tabs {
|
||||
--tabs-fg-unselected: var(--fg-neutral-tertiary);
|
||||
--tabs-fg-selected: var(--fg-neutral-primary);
|
||||
--tabs-bg-unselected: var(--bg-neutral-tertiary);
|
||||
--tabs-bg-selected: var(--bg-neutral-primary);
|
||||
}
|
||||
|
||||
.tabs-list {
|
||||
@apply rounded-8 h-9.5 inline-flex items-center justify-center bg-[var(--tabs-bg-unselected)] p-1 text-[var(--tabs-fg-selected)];
|
||||
}
|
||||
|
||||
.tabs-trigger {
|
||||
@apply rounded-6 data-[state=active]:shadow-default text-base-normal inline-flex items-center justify-center whitespace-nowrap px-3 py-1 font-medium text-[var(--tabs-fg-unselected)] transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[var(--tabs-bg-selected)] data-[state=active]:text-[var(--tabs-fg-selected)] [&>svg]:h-4 [&>svg]:w-4;
|
||||
}
|
||||
|
||||
.tabs-content {
|
||||
@apply mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.tag {
|
||||
--tag-primary-fg: var(--fg-neutral-inverse);
|
||||
--tag-secondary-fg: var(--fg-neutral-primary);
|
||||
--tag-destructive-fg: var(--fg-neutral-inverse);
|
||||
--tag-outline-fg: var(--tint, var(--fg-neutral-primary));
|
||||
--tag-outline-border: var(--border-neutral-tertiary);
|
||||
--tag-primary-bg: var(--tint, var(--bg-neutral-inverse));
|
||||
--tag-secondary-bg: var(--bg-neutral-tertiary);
|
||||
--tag-destructive-bg: var(--bg-tint-red-bold);
|
||||
--tag-outline-bg: var(--bg-neutral-transparent);
|
||||
--tag-outline-bg-hover: var(--tint-subtle, var(--bg-neutral-secondary));
|
||||
|
||||
@apply inline-flex items-center whitespace-nowrap hover:opacity-80 [&>svg]:flex-shrink-0;
|
||||
|
||||
/* default */
|
||||
@apply tag-small tag-radius-medium tag-primary;
|
||||
}
|
||||
@@ -0,0 +1,213 @@
|
||||
const plugin = require("tailwindcss/plugin");
|
||||
|
||||
function filterDefault(values) {
|
||||
return Object.fromEntries(
|
||||
Object.entries(values).filter(([key]) => key !== "DEFAULT"),
|
||||
);
|
||||
}
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: "class",
|
||||
content: [{ raw: "" }],
|
||||
theme: require("../theme"),
|
||||
plugins: [
|
||||
plugin(
|
||||
({ addUtilities, matchUtilities, theme }) => {
|
||||
addUtilities({
|
||||
"@keyframes enter": theme("keyframes.enter"),
|
||||
"@keyframes exit": theme("keyframes.exit"),
|
||||
".animate-in": {
|
||||
animationName: "enter",
|
||||
animationDuration: theme("animationDuration.DEFAULT"),
|
||||
"--tw-enter-opacity": "initial",
|
||||
"--tw-enter-scale": "initial",
|
||||
"--tw-enter-rotate": "initial",
|
||||
"--tw-enter-translate-x": "initial",
|
||||
"--tw-enter-translate-y": "initial",
|
||||
},
|
||||
".animate-out": {
|
||||
animationName: "exit",
|
||||
animationDuration: theme("animationDuration.DEFAULT"),
|
||||
"--tw-exit-opacity": "initial",
|
||||
"--tw-exit-scale": "initial",
|
||||
"--tw-exit-rotate": "initial",
|
||||
"--tw-exit-translate-x": "initial",
|
||||
"--tw-exit-translate-y": "initial",
|
||||
},
|
||||
});
|
||||
|
||||
matchUtilities(
|
||||
{
|
||||
"fade-in": (value) => ({ "--tw-enter-opacity": value }),
|
||||
"fade-out": (value) => ({ "--tw-exit-opacity": value }),
|
||||
},
|
||||
{ values: theme("animationOpacity") },
|
||||
);
|
||||
|
||||
matchUtilities(
|
||||
{
|
||||
"zoom-in": (value) => ({ "--tw-enter-scale": value }),
|
||||
"zoom-out": (value) => ({ "--tw-exit-scale": value }),
|
||||
},
|
||||
{ values: theme("animationScale") },
|
||||
);
|
||||
|
||||
matchUtilities(
|
||||
{
|
||||
"spin-in": (value) => ({ "--tw-enter-rotate": value }),
|
||||
"spin-out": (value) => ({ "--tw-exit-rotate": value }),
|
||||
},
|
||||
{ values: theme("animationRotate") },
|
||||
);
|
||||
|
||||
matchUtilities(
|
||||
{
|
||||
"slide-in-from-top": (value) => ({
|
||||
"--tw-enter-translate-y": `-${value}`,
|
||||
}),
|
||||
"slide-in-from-bottom": (value) => ({
|
||||
"--tw-enter-translate-y": value,
|
||||
}),
|
||||
"slide-in-from-left": (value) => ({
|
||||
"--tw-enter-translate-x": `-${value}`,
|
||||
}),
|
||||
"slide-in-from-right": (value) => ({
|
||||
"--tw-enter-translate-x": value,
|
||||
}),
|
||||
"slide-out-to-top": (value) => ({
|
||||
"--tw-exit-translate-y": `-${value}`,
|
||||
}),
|
||||
"slide-out-to-bottom": (value) => ({
|
||||
"--tw-exit-translate-y": value,
|
||||
}),
|
||||
"slide-out-to-left": (value) => ({
|
||||
"--tw-exit-translate-x": `-${value}`,
|
||||
}),
|
||||
"slide-out-to-right": (value) => ({
|
||||
"--tw-exit-translate-x": value,
|
||||
}),
|
||||
},
|
||||
{ values: theme("animationTranslate") },
|
||||
);
|
||||
|
||||
matchUtilities(
|
||||
{ duration: (value) => ({ animationDuration: value }) },
|
||||
{ values: filterDefault(theme("animationDuration")) },
|
||||
);
|
||||
|
||||
matchUtilities(
|
||||
{ delay: (value) => ({ animationDelay: value }) },
|
||||
{ values: theme("animationDelay") },
|
||||
);
|
||||
|
||||
matchUtilities(
|
||||
{ ease: (value) => ({ animationTimingFunction: value }) },
|
||||
{ values: filterDefault(theme("animationTimingFunction")) },
|
||||
);
|
||||
|
||||
addUtilities({
|
||||
".running": { animationPlayState: "running" },
|
||||
".paused": { animationPlayState: "paused" },
|
||||
});
|
||||
|
||||
matchUtilities(
|
||||
{ "fill-mode": (value) => ({ animationFillMode: value }) },
|
||||
{ values: theme("animationFillMode") },
|
||||
);
|
||||
|
||||
matchUtilities(
|
||||
{ direction: (value) => ({ animationDirection: value }) },
|
||||
{ values: theme("animationDirection") },
|
||||
);
|
||||
|
||||
matchUtilities(
|
||||
{ repeat: (value) => ({ animationIterationCount: value }) },
|
||||
{ values: theme("animationRepeat") },
|
||||
);
|
||||
},
|
||||
{
|
||||
theme: {
|
||||
extend: {
|
||||
animationDelay: ({ theme }) => ({
|
||||
...theme("transitionDelay"),
|
||||
}),
|
||||
animationDuration: ({ theme }) => ({
|
||||
0: "0ms",
|
||||
...theme("transitionDuration"),
|
||||
}),
|
||||
animationTimingFunction: ({ theme }) => ({
|
||||
...theme("transitionTimingFunction"),
|
||||
}),
|
||||
animationFillMode: {
|
||||
none: "none",
|
||||
forwards: "forwards",
|
||||
backwards: "backwards",
|
||||
both: "both",
|
||||
},
|
||||
animationDirection: {
|
||||
normal: "normal",
|
||||
reverse: "reverse",
|
||||
alternate: "alternate",
|
||||
"alternate-reverse": "alternate-reverse",
|
||||
},
|
||||
animationOpacity: ({ theme }) => ({
|
||||
DEFAULT: 0,
|
||||
...theme("opacity"),
|
||||
}),
|
||||
animationTranslate: ({ theme }) => ({
|
||||
DEFAULT: "100%",
|
||||
...theme("translate"),
|
||||
}),
|
||||
animationScale: ({ theme }) => ({
|
||||
DEFAULT: 0,
|
||||
...theme("scale"),
|
||||
}),
|
||||
animationRotate: ({ theme }) => ({
|
||||
DEFAULT: "30deg",
|
||||
...theme("rotate"),
|
||||
}),
|
||||
animationRepeat: {
|
||||
0: "0",
|
||||
1: "1",
|
||||
infinite: "infinite",
|
||||
},
|
||||
animation: {
|
||||
in: "enter 0.15s ease-in-out",
|
||||
out: "exit 0.15s ease-in-out",
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
},
|
||||
keyframes: {
|
||||
enter: {
|
||||
from: {
|
||||
opacity: "var(--tw-enter-opacity, 1)",
|
||||
transform:
|
||||
"translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))",
|
||||
},
|
||||
},
|
||||
exit: {
|
||||
to: {
|
||||
opacity: "var(--tw-exit-opacity, 1)",
|
||||
transform:
|
||||
"translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))",
|
||||
},
|
||||
},
|
||||
"accordion-down": {
|
||||
from: { height: "0" },
|
||||
to: { height: "var(--radix-accordion-content-height)" },
|
||||
},
|
||||
"accordion-up": {
|
||||
from: { height: "var(--radix-accordion-content-height)" },
|
||||
to: { height: "0" },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
),
|
||||
plugin(({ addBase, addUtilities }) => {
|
||||
addBase(require("../../dist/base"));
|
||||
addUtilities(require("../../dist/utilities"));
|
||||
}),
|
||||
],
|
||||
};
|
||||
@@ -0,0 +1,33 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.textarea {
|
||||
--textarea-fg: var(--fg-neutral-tertiary);
|
||||
--textarea-fg-typing: var(--fg-neutral-primary);
|
||||
--textarea-fg-filled: var(--fg-neutral-primary);
|
||||
--textarea-border: var(--border-neutral-tertiary);
|
||||
--textarea-border-typing: var(--tint, var(--border-neutral-primary));
|
||||
--textarea-border-filled: var(--border-neutral-tertiary);
|
||||
--textarea-bg: var(--bg-neutral-primary);
|
||||
--textarea-bg-typing: var(--bg-neutral-primary);
|
||||
--textarea-bg-filled: var(--bg-neutral-primary);
|
||||
|
||||
@apply text-[var(--textarea-fg-filled)] placeholder:text-[var(--textarea-fg)] placeholder-shown:text-[var(--textarea-fg)] focus-visible:text-[var(--textarea-fg-typing)];
|
||||
@apply border-[var(--textarea-border-filled)] placeholder-shown:border-[var(--textarea-border)] focus-visible:border-[var(--textarea-border-typing)];
|
||||
@apply bg-[var(--textarea-bg-filled)] placeholder-shown:bg-[var(--textarea-bg)] focus-visible:bg-[var(--textarea-bg-typing)];
|
||||
|
||||
@apply rounded-8 text-base-normal flex min-h-20 w-full border px-3 py-2 outline-none;
|
||||
@apply disabled:cursor-not-allowed disabled:opacity-50;
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.toaster {
|
||||
}
|
||||
|
||||
.toast {
|
||||
--toast-fg: var(--fg-neutral-primary);
|
||||
--toast-fg-secondary: var(--fg-neutral-secondary);
|
||||
--toast-fg-warning: var(--fg-tint-orange);
|
||||
--toast-fg-success: var(--fg-tint-green);
|
||||
--toast-fg-error: var(--fg-tint-red);
|
||||
--toast-fg-informative: var(--fg-tint-blue);
|
||||
--toast-border: var(--border-neutral-tertiary);
|
||||
--toast-border-warning: var(--border-tint-orange);
|
||||
--toast-border-success: var(--border-tint-green);
|
||||
--toast-border-error: var(--border-tint-red);
|
||||
--toast-border-informative: var(--border-tint-blue);
|
||||
--toast-bg: var(--bg-neutral-primary);
|
||||
|
||||
@apply !absolute !left-0 inline-flex min-w-[356px] items-center space-x-2 border bg-[var(--toast-bg)] px-5 py-4;
|
||||
|
||||
/* default */
|
||||
@apply toast-radius-medium toast-default;
|
||||
}
|
||||
|
||||
.toast-content {
|
||||
@apply flex flex-1 flex-col items-start justify-center;
|
||||
}
|
||||
|
||||
.toast-title {
|
||||
@apply text-title-h5 flex flex-1 flex-col text-[var(--toast-fg)];
|
||||
}
|
||||
|
||||
.toast-description {
|
||||
@apply text-base-normal text-[var(--toast-fg-secondary)];
|
||||
}
|
||||
|
||||
.toast-button {
|
||||
@apply flex-shrink-0;
|
||||
}
|
||||
|
||||
.toast-close {
|
||||
@apply order-1 flex-shrink-0 !px-0;
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
@apply relative mb-auto box-content flex h-5 w-5 flex-shrink-0 p-1;
|
||||
|
||||
/* default */
|
||||
@apply toast-icon-default;
|
||||
}
|
||||
|
||||
.toast-loader {
|
||||
@apply flex scale-100;
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.toggle-group {
|
||||
--toggle-group-fg: var(--fg-neutral-primary);
|
||||
--toggle-group-fg-hover: var(--fg-neutral-primary);
|
||||
--toggle-group-fg-pressed: var(--tint, var(--fg-neutral-primary));
|
||||
--toggle-group-border: var(--border-neutral-tertiary);
|
||||
--toggle-group-border-hover: var(--border-neutral-tertiary);
|
||||
--toggle-group-border-pressed: var(--border-neutral-tertiary);
|
||||
--toggle-group-bg: var(--bg-neutral-primary);
|
||||
--toggle-group-bg-hover: var(--bg-neutral-tertiary);
|
||||
--toggle-group-bg-pressed: var(--bg-neutral-tertiary);
|
||||
|
||||
@apply relative inline-flex items-center justify-center;
|
||||
}
|
||||
|
||||
.toggle-group-item {
|
||||
@apply inline-flex cursor-pointer items-center justify-center gap-1 border border-[var(--toggle-group-border)] bg-[var(--toggle-group-bg)] text-[var(--toggle-group-fg)] transition-colors disabled:cursor-not-allowed disabled:opacity-50 data-[state=on]:border-[var(--toggle-group-border-pressed)] data-[state=on]:bg-[var(--toggle-group-bg-pressed)] data-[state=on]:text-[var(--toggle-group-fg-pressed)] [&:not(:disabled)]:hover:border-[var(--toggle-group-border-hover)] [&:not(:disabled)]:hover:bg-[var(--toggle-group-bg-hover)] [&:not(:disabled)]:hover:text-[var(--toggle-group-fg-hover)] data-[state=on]:[&:not(:disabled)]:hover:border-[var(--toggle-group-border-hover)] data-[state=on]:[&:not(:disabled)]:hover:bg-[var(--toggle-group-bg-hover)] data-[state=on]:[&:not(:disabled)]:hover:text-[var(--toggle-group-fg-hover)];
|
||||
|
||||
/* default */
|
||||
@apply toggle-group-item-small toggle-group-item-radius-medium;
|
||||
|
||||
~ .toggle-group-item {
|
||||
@apply -ml-px;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-group-icon {
|
||||
@apply pointer-events-none;
|
||||
}
|
||||
|
||||
.toggle-group-input {
|
||||
@apply absolute m-0 block h-0 w-0 overflow-hidden p-0;
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.tooltip {
|
||||
--tooltip-fg: var(--fg-neutral-primary);
|
||||
--tooltip-border: var(--border-neutral-tertiary);
|
||||
--tooltip-bg: var(--bg-neutral-primary);
|
||||
|
||||
@apply rounded-8 animate-in fade-in-0 zoom-in-95;
|
||||
@apply data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95;
|
||||
@apply data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2;
|
||||
@apply text-base-normal z-50 flex flex-col overflow-hidden whitespace-pre-wrap border border-[var(--tooltip-border)] bg-[var(--tooltip-bg)] px-3 py-1 text-[var(--tooltip-fg)] shadow-md;
|
||||
|
||||
/* default */
|
||||
@apply tooltip-text-center;
|
||||
}
|
||||
|
||||
.tooltip-arrow-border {
|
||||
@apply fill-current text-[var(--tooltip-border)];
|
||||
}
|
||||
|
||||
.tooltip-arrow {
|
||||
@apply fill-current text-[var(--tooltip-bg)];
|
||||
}
|
||||
|
||||
[data-side="top"].tooltip .tooltip-arrow {
|
||||
@apply -translate-y-px translate-x-px;
|
||||
}
|
||||
|
||||
[data-side="right"].tooltip .tooltip-arrow {
|
||||
@apply -translate-y-px translate-x-[0.5px];
|
||||
}
|
||||
|
||||
[data-side="bottom"].tooltip .tooltip-arrow {
|
||||
@apply -translate-x-px -translate-y-px;
|
||||
}
|
||||
|
||||
[data-side="left"].tooltip .tooltip-arrow {
|
||||
@apply -translate-x-[0.5px] -translate-y-px;
|
||||
}
|
||||
|
||||
.tooltip-title {
|
||||
@apply text-base-strong mb-1;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
5.5: "1.375rem",
|
||||
9.5: "2.375rem",
|
||||
13: "3.25rem",
|
||||
};
|
||||
@@ -0,0 +1,99 @@
|
||||
const theme = require("tailwindcss/defaultTheme");
|
||||
const borderRadius = require("./borderRadius");
|
||||
const boxShadow = require("./boxShadow");
|
||||
const spacing = require("./spacing");
|
||||
|
||||
const colors = {
|
||||
inherit: "inherit",
|
||||
current: "currentColor",
|
||||
};
|
||||
|
||||
/** @type {import("tailwindcss").Config["theme"]} */
|
||||
module.exports = {
|
||||
...theme,
|
||||
colors,
|
||||
fill: {
|
||||
...colors,
|
||||
neutral: {
|
||||
primary: "var(--fg-neutral-primary)",
|
||||
secondary: "var(--fg-neutral-secondary)",
|
||||
tertiary: "var(--fg-neutral-tertiary)",
|
||||
inverse: "var(--fg-neutral-inverse)",
|
||||
static: "var(--fg-neutral-static)",
|
||||
},
|
||||
tint: {
|
||||
red: "var(--fg-tint-red)",
|
||||
orange: "var(--fg-tint-orange)",
|
||||
green: "var(--fg-tint-green)",
|
||||
blue: "var(--fg-tint-blue)",
|
||||
},
|
||||
},
|
||||
textColor: {
|
||||
...colors,
|
||||
neutral: {
|
||||
primary: "var(--fg-neutral-primary)",
|
||||
secondary: "var(--fg-neutral-secondary)",
|
||||
tertiary: "var(--fg-neutral-tertiary)",
|
||||
inverse: "var(--fg-neutral-inverse)",
|
||||
static: "var(--fg-neutral-static)",
|
||||
},
|
||||
tint: {
|
||||
red: "var(--fg-tint-red)",
|
||||
orange: "var(--fg-tint-orange)",
|
||||
green: "var(--fg-tint-green)",
|
||||
blue: "var(--fg-tint-blue)",
|
||||
},
|
||||
},
|
||||
borderColor: {
|
||||
neutral: {
|
||||
primary: "var(--border-neutral-primary)",
|
||||
secondary: "var(--border-neutral-secondary)",
|
||||
tertiary: "var(--border-neutral-tertiary)",
|
||||
transparent: "var(--border-neutral-transparent)",
|
||||
},
|
||||
tint: {
|
||||
red: "var(--border-tint-red)",
|
||||
orange: "var(--border-tint-orange)",
|
||||
green: "var(--border-tint-green)",
|
||||
blue: "var(--border-tint-blue)",
|
||||
},
|
||||
},
|
||||
backgroundColor: {
|
||||
...colors,
|
||||
primary: "var(--bg-primary)",
|
||||
secondary: "var(--bg-secondary)",
|
||||
tertiary: "var(--bg-tertiary)",
|
||||
dim: "var(--bg-dim)",
|
||||
neutral: {
|
||||
primary: "var(--bg-neutral-primary)",
|
||||
secondary: "var(--bg-neutral-secondary)",
|
||||
tertiary: "var(--bg-neutral-tertiary)",
|
||||
inverse: "var(--bg-neutral-inverse)",
|
||||
hover: "var(--bg-neutral-hover)",
|
||||
transparent: "var(--base-transparent)",
|
||||
},
|
||||
tint: {
|
||||
red: {
|
||||
bold: "var(--bg-tint-red-bold)",
|
||||
subtle: "var(--bg-tint-red-subtle)",
|
||||
},
|
||||
orange: {
|
||||
bold: "var(--bg-tint-orange-bold)",
|
||||
subtle: "var(--bg-tint-orange-subtle)",
|
||||
},
|
||||
green: {
|
||||
bold: "var(--bg-tint-green-bold)",
|
||||
subtle: "var(--bg-tint-green-subtle)",
|
||||
},
|
||||
blue: {
|
||||
bold: "var(--bg-tint-blue-bold)",
|
||||
subtle: "var(--bg-tint-blue-subtle)",
|
||||
},
|
||||
},
|
||||
},
|
||||
borderRadius,
|
||||
boxShadow,
|
||||
extend: {
|
||||
spacing,
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.accordion-content-inset-small {
|
||||
@apply pl-10;
|
||||
}
|
||||
|
||||
.accordion-content-inset-medium {
|
||||
@apply pl-11;
|
||||
}
|
||||
|
||||
.accordion-content-inset-large {
|
||||
@apply pl-12;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.alert-radius-large {
|
||||
@apply rounded-24;
|
||||
}
|
||||
|
||||
.alert-radius-medium {
|
||||
@apply rounded-8;
|
||||
}
|
||||
|
||||
.alert-radius-small {
|
||||
@apply rounded-0;
|
||||
}
|
||||
|
||||
.alert-default {
|
||||
@apply border-[var(--alert-border)];
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
@apply border-[var(--alert-border-warning)];
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
@apply border-[var(--alert-border-success)];
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
@apply border-[var(--alert-border-error)];
|
||||
}
|
||||
|
||||
.alert-informative {
|
||||
@apply border-[var(--alert-border-informative)];
|
||||
}
|
||||
|
||||
.alert-icon-default {
|
||||
@apply text-[var(--alert-fg)];
|
||||
}
|
||||
|
||||
.alert-icon-warning {
|
||||
@apply text-[var(--alert-fg-warning)];
|
||||
}
|
||||
|
||||
.alert-icon-success {
|
||||
@apply text-[var(--alert-fg-success)];
|
||||
}
|
||||
|
||||
.alert-icon-error {
|
||||
@apply text-[var(--alert-fg-error)];
|
||||
}
|
||||
|
||||
.alert-icon-informative {
|
||||
@apply text-[var(--alert-fg-informative)];
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.badge-bold-default {
|
||||
@apply border border-[var(--badge-bold-border)] bg-[var(--badge-bold-bg)] text-[var(--badge-bold-fg)];
|
||||
}
|
||||
|
||||
.badge-bold-blue {
|
||||
@apply border border-[var(--badge-bold-border-blue)] bg-[var(--badge-bold-bg-blue)] text-[var(--badge-bold-fg-blue)];
|
||||
}
|
||||
|
||||
.badge-bold-orange {
|
||||
@apply border border-[var(--badge-bold-border-orange)] bg-[var(--badge-bold-bg-orange)] text-[var(--badge-bold-fg-orange)];
|
||||
}
|
||||
|
||||
.badge-bold-red {
|
||||
@apply border border-[var(--badge-bold-border-red)] bg-[var(--badge-bold-bg-red)] text-[var(--badge-bold-fg-red)];
|
||||
}
|
||||
|
||||
.badge-bold-green {
|
||||
@apply border border-[var(--badge-bold-border-green)] bg-[var(--badge-bold-bg-green)] text-[var(--badge-bold-fg-green)];
|
||||
}
|
||||
|
||||
.badge-subtle-default {
|
||||
@apply border border-[var(--badge-subtle-border)] bg-[var(--badge-subtle-bg)] text-[var(--badge-subtle-fg)];
|
||||
}
|
||||
|
||||
.badge-subtle-blue {
|
||||
@apply border border-[var(--badge-subtle-border-blue)] bg-[var(--badge-subtle-bg-blue)] text-[var(--badge-subtle-fg-blue)];
|
||||
}
|
||||
|
||||
.badge-subtle-orange {
|
||||
@apply border border-[var(--badge-subtle-border-orange)] bg-[var(--badge-subtle-bg-orange)] text-[var(--badge-subtle-fg-orange)];
|
||||
}
|
||||
|
||||
.badge-subtle-red {
|
||||
@apply border border-[var(--badge-subtle-border-red)] bg-[var(--badge-subtle-bg-red)] text-[var(--badge-subtle-fg-red)];
|
||||
}
|
||||
|
||||
.badge-subtle-green {
|
||||
@apply border border-[var(--badge-subtle-border-green)] bg-[var(--badge-subtle-bg-green)] text-[var(--badge-subtle-fg-green)];
|
||||
}
|
||||
|
||||
.badge-outline-default {
|
||||
@apply border border-[var(--badge-outline-border)] bg-[var(--badge-outline-bg)] text-[var(--badge-outline-fg)];
|
||||
}
|
||||
|
||||
.badge-outline-blue {
|
||||
@apply border border-[var(--badge-outline-border-blue)] bg-[var(--badge-outline-bg-blue)] text-[var(--badge-outline-fg-blue)];
|
||||
}
|
||||
|
||||
.badge-outline-orange {
|
||||
@apply border border-[var(--badge-outline-border-orange)] bg-[var(--badge-outline-bg-orange)] text-[var(--badge-outline-fg-orange)];
|
||||
}
|
||||
|
||||
.badge-outline-red {
|
||||
@apply border border-[var(--badge-outline-border-red)] bg-[var(--badge-outline-bg-red)] text-[var(--badge-outline-fg-red)];
|
||||
}
|
||||
|
||||
.badge-outline-green {
|
||||
@apply border border-[var(--badge-outline-border-green)] bg-[var(--badge-outline-bg-green)] text-[var(--badge-outline-fg-green)];
|
||||
}
|
||||
|
||||
.badge-radius-small {
|
||||
@apply rounded-0;
|
||||
}
|
||||
|
||||
.badge-radius-medium {
|
||||
@apply rounded-6;
|
||||
}
|
||||
|
||||
.badge-radius-large {
|
||||
@apply rounded-full;
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.button-large {
|
||||
@apply text-xlarge-strong h-13 min-w-13 gap-2 px-5 [&.svg-only]:px-3 [&>svg]:h-6 [&>svg]:w-6;
|
||||
}
|
||||
|
||||
.button-medium {
|
||||
@apply text-large-strong h-11 min-w-11 gap-2 px-4 [&.svg-only]:px-3 [&>svg]:h-5 [&>svg]:w-5;
|
||||
}
|
||||
|
||||
.button-small {
|
||||
@apply text-base-strong h-9 min-w-9 gap-1 px-3 [&.svg-only]:px-2.5 [&>svg]:h-4 [&>svg]:w-4;
|
||||
}
|
||||
|
||||
.button-radius-large {
|
||||
@apply rounded-full;
|
||||
}
|
||||
|
||||
.button-radius-medium {
|
||||
@apply rounded-8;
|
||||
}
|
||||
|
||||
.button-radius-small {
|
||||
@apply rounded-0;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
@apply bg-[var(--button-primary-bg)] text-[var(--button-primary-fg)];
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
@apply bg-[var(--button-secondary-bg)] text-[var(--button-secondary-fg)];
|
||||
}
|
||||
|
||||
.button-destructive {
|
||||
@apply bg-[var(--button-destructive-bg)] text-[var(--button-destructive-fg)];
|
||||
}
|
||||
|
||||
.button-ghost {
|
||||
@apply bg-[var(--button-ghost-bg)] text-[var(--button-ghost-fg)] transition-colors data-[state=open]:bg-[var(--button-ghost-bg-hover)] [&:not(:disabled)]:hover:bg-[var(--button-ghost-bg-hover)];
|
||||
}
|
||||
|
||||
.button-outline {
|
||||
@apply border border-[var(--button-outline-border)] bg-[var(--button-outline-bg)] text-[var(--button-outline-fg)] transition-colors data-[state=open]:bg-[var(--button-outline-bg-hover)] [&:not(:disabled)]:hover:bg-[var(--button-outline-bg-hover)];
|
||||
}
|
||||
|
||||
.button-loading-primary {
|
||||
@apply text-[var(--button-primary-fg)];
|
||||
}
|
||||
|
||||
.button-loading-secondary {
|
||||
@apply text-[var(--button-secondary-fg)];
|
||||
}
|
||||
|
||||
.button-loading-destructive {
|
||||
@apply text-[var(--button-destructive-fg)];
|
||||
}
|
||||
|
||||
.button-loading-ghost {
|
||||
@apply text-[var(--button-ghost-fg)];
|
||||
}
|
||||
|
||||
.button-loading-outline {
|
||||
@apply text-[var(--button-outline-fg)];
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.caption-default {
|
||||
@apply [&:not([data-error="true"])]:text-[var(--caption-fg)];
|
||||
}
|
||||
|
||||
.caption-success {
|
||||
@apply [&:not([data-error="true"])]:text-[var(--caption-fg-success)];
|
||||
}
|
||||
|
||||
.caption-info {
|
||||
@apply [&:not([data-error="true"])]:text-[var(--caption-fg)];
|
||||
}
|
||||
|
||||
.caption[data-error="true"] {
|
||||
@apply text-[var(--caption-fg-error)];
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.checkbox-small {
|
||||
@apply text-small-normal;
|
||||
}
|
||||
|
||||
.checkbox-medium {
|
||||
@apply text-base-normal;
|
||||
}
|
||||
|
||||
.checkbox-large {
|
||||
@apply text-large-normal;
|
||||
}
|
||||
|
||||
.check-small {
|
||||
@apply h-3.5 w-3.5;
|
||||
}
|
||||
|
||||
.check-medium {
|
||||
@apply h-4 w-4;
|
||||
}
|
||||
|
||||
.check-large {
|
||||
@apply h-5 w-5;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.absolute-y-center {
|
||||
@apply absolute top-1/2 -translate-y-1/2 transform;
|
||||
}
|
||||
|
||||
.absolute-x-center {
|
||||
@apply absolute left-1/2 -translate-x-1/2 transform;
|
||||
}
|
||||
|
||||
.absolute-center {
|
||||
@apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform;
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.dialog-content-radius-large {
|
||||
@apply rounded-24;
|
||||
}
|
||||
|
||||
.dialog-content-radius-medium {
|
||||
@apply rounded-8;
|
||||
}
|
||||
|
||||
.dialog-content-radius-small {
|
||||
@apply rounded-0;
|
||||
}
|
||||
|
||||
.dialog-icon-default {
|
||||
@apply text-[var(--fg-neutral-primary)];
|
||||
}
|
||||
|
||||
.dialog-icon-warning {
|
||||
@apply text-[var(--fg-tint-orange)];
|
||||
}
|
||||
|
||||
.dialog-icon-informative {
|
||||
@apply text-[var(--fg-tint-blue)];
|
||||
}
|
||||
|
||||
.dialog-icon-success {
|
||||
@apply text-[var(--fg-tint-green)];
|
||||
}
|
||||
|
||||
.dialog-icon-error {
|
||||
@apply text-[var(--fg-tint-red)];
|
||||
}
|
||||
|
||||
.dialog-footer-left {
|
||||
@apply justify-start;
|
||||
}
|
||||
|
||||
.dialog-footer-center {
|
||||
@apply justify-center;
|
||||
}
|
||||
|
||||
.dialog-footer-right {
|
||||
@apply justify-end;
|
||||
}
|
||||
|
||||
.dialog-footer-between {
|
||||
@apply justify-between;
|
||||
}
|
||||
|
||||
.dialog-footer-full {
|
||||
@apply justify-start;
|
||||
|
||||
> * {
|
||||
@apply flex-1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.divider-bold {
|
||||
@apply bg-[var(--divider-border-bold)];
|
||||
}
|
||||
|
||||
.divider-subtle {
|
||||
@apply bg-[var(--divider-border-subtle)];
|
||||
}
|
||||
|
||||
.divider-horizontal {
|
||||
@apply mx-auto h-px w-full;
|
||||
}
|
||||
|
||||
.divider-vertical {
|
||||
@apply my-auto h-full w-px;
|
||||
}
|
||||
|
||||
.divider.divider-horizontal-indent-8 {
|
||||
@apply w-[calc(100%_-_16px)];
|
||||
}
|
||||
|
||||
.divider.divider-horizontal-indent-16 {
|
||||
@apply w-[calc(100%_-_32px)];
|
||||
}
|
||||
|
||||
.divider.divider-horizontal-indent-24 {
|
||||
@apply w-[calc(100%_-_48px)];
|
||||
}
|
||||
|
||||
.divider-vertical-indent-8 {
|
||||
@apply h-[calc(100%_-_16px)];
|
||||
}
|
||||
|
||||
.divider-vertical-indent-16 {
|
||||
@apply h-[calc(100%_-_32px)];
|
||||
}
|
||||
|
||||
.divider-vertical-indent-24 {
|
||||
@apply h-[calc(100%_-_48px)];
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.input-large {
|
||||
@apply text-xlarge-normal h-13 px-5 py-2.5;
|
||||
}
|
||||
|
||||
.input-medium {
|
||||
@apply text-large-normal h-11 px-4 py-2.5;
|
||||
}
|
||||
|
||||
.input-small {
|
||||
@apply text-base-normal h-9 px-3 py-2;
|
||||
}
|
||||
|
||||
.input-radius-large {
|
||||
@apply rounded-full;
|
||||
}
|
||||
|
||||
.input-radius-medium {
|
||||
@apply rounded-8;
|
||||
}
|
||||
|
||||
.input-radius-small {
|
||||
@apply rounded-0;
|
||||
}
|
||||
|
||||
.input-icon-large {
|
||||
@apply left-4;
|
||||
}
|
||||
|
||||
.input-icon-medium {
|
||||
@apply left-3.5;
|
||||
}
|
||||
|
||||
.input-icon-small {
|
||||
@apply left-3;
|
||||
}
|
||||
|
||||
.input-button-large {
|
||||
@apply right-4;
|
||||
}
|
||||
|
||||
.input-button-medium {
|
||||
@apply right-3.5;
|
||||
}
|
||||
|
||||
.input-button-small {
|
||||
@apply right-3;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.menu-horizontal {
|
||||
@apply flex-row gap-3;
|
||||
}
|
||||
|
||||
.menu-vertical {
|
||||
@apply min-w-[10rem] flex-col gap-3;
|
||||
}
|
||||
|
||||
.menu-item-large {
|
||||
@apply text-xlarge-normal px-3.5 py-2.5 [&>svg]:h-6 [&>svg]:w-6;
|
||||
}
|
||||
|
||||
.menu-item-medium {
|
||||
@apply text-large-normal px-3 py-2.5 [&>svg]:h-5 [&>svg]:w-5;
|
||||
}
|
||||
|
||||
.menu-item-small {
|
||||
@apply text-base-normal p-2 [&>svg]:h-4 [&>svg]:w-4;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
plugins: [
|
||||
require('postcss-import'),
|
||||
require('tailwindcss/nesting'),
|
||||
require('tailwindcss')('./src/utilities/tailwind.config.js'),
|
||||
],
|
||||
};
|
||||
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.radio-card-group-horizontal {
|
||||
@apply flex-row space-x-2;
|
||||
}
|
||||
|
||||
.radio-card-group-vertical {
|
||||
@apply flex-col space-y-2;
|
||||
}
|
||||
|
||||
.radio-card-horizontal {
|
||||
@apply min-w-40 flex-row items-center space-x-2 px-4 py-3 text-left;
|
||||
}
|
||||
|
||||
.radio-card-vertical {
|
||||
@apply min-h-28 min-w-40 flex-col items-center justify-center space-y-2 px-6 py-3 text-center;
|
||||
}
|
||||
|
||||
.radio-card-radius-small {
|
||||
@apply rounded-0;
|
||||
}
|
||||
|
||||
.radio-card-radius-medium {
|
||||
@apply rounded-8;
|
||||
}
|
||||
|
||||
.radio-card-radius-large {
|
||||
@apply rounded-24;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.radio-group-horizontal {
|
||||
@apply flex-row gap-4;
|
||||
}
|
||||
|
||||
.radio-group-vertical {
|
||||
@apply flex-col gap-1;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.scroll-bar-vertical {
|
||||
@apply h-full w-2 border-l border-l-[transparent] py-1 pr-0.5;
|
||||
}
|
||||
|
||||
.scroll-bar-horizontal {
|
||||
@apply h-2 w-full flex-col border-t border-t-[transparent] px-1 pb-0.5;
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.select-small {
|
||||
@apply space-y-1;
|
||||
}
|
||||
|
||||
.select-medium {
|
||||
@apply space-y-1.5;
|
||||
}
|
||||
|
||||
.select-large {
|
||||
@apply space-y-2;
|
||||
}
|
||||
.select-trigger-small {
|
||||
@apply text-base-normal min-h-9 space-x-2 px-3;
|
||||
}
|
||||
|
||||
.select-trigger-medium {
|
||||
@apply text-large-normal min-h-11 space-x-2.5 px-3.5;
|
||||
}
|
||||
|
||||
.select-trigger-large {
|
||||
@apply text-xlarge-normal min-h-13 space-x-3 px-4;
|
||||
}
|
||||
|
||||
.select-trigger-radius-small {
|
||||
@apply rounded-0 before:rounded-0;
|
||||
}
|
||||
|
||||
.select-trigger-radius-medium {
|
||||
@apply rounded-8 before:rounded-8;
|
||||
}
|
||||
|
||||
.select-trigger-radius-large {
|
||||
@apply rounded-full before:rounded-full;
|
||||
}
|
||||
|
||||
.select-item-left {
|
||||
@apply pl-8 pr-2;
|
||||
}
|
||||
|
||||
.select-item-right {
|
||||
@apply pl-2 pr-8;
|
||||
}
|
||||
|
||||
.select-item-check-left {
|
||||
@apply left-2;
|
||||
}
|
||||
|
||||
.select-item-check-right {
|
||||
@apply right-2;
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.sheet-side-top {
|
||||
@apply data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top !rounded-t-0 inset-x-0 top-0 max-h-[75%] border-b;
|
||||
}
|
||||
|
||||
.sheet-side-bottom {
|
||||
@apply data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom !rounded-b-0 inset-x-0 bottom-0 max-h-[75%] border-t;
|
||||
}
|
||||
|
||||
.sheet-side-left {
|
||||
@apply data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left !rounded-l-0 inset-y-0 left-0 h-full w-3/4 max-w-[504px] border-r;
|
||||
}
|
||||
|
||||
.sheet-side-right {
|
||||
@apply data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right !rounded-r-0 inset-y-0 right-0 h-full w-3/4 max-w-[504px] border-l;
|
||||
}
|
||||
|
||||
.sheet-radius-small {
|
||||
@apply rounded-0;
|
||||
}
|
||||
|
||||
.sheet-radius-medium {
|
||||
@apply rounded-8;
|
||||
}
|
||||
|
||||
.sheet-radius-large {
|
||||
@apply rounded-24;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.switch-default {
|
||||
@apply data-[state=checked]:before:bg-[var(--switch-bg)];
|
||||
}
|
||||
|
||||
.switch-blue {
|
||||
@apply data-[state=checked]:before:bg-[var(--switch-bg-blue)];
|
||||
}
|
||||
|
||||
.switch-orange {
|
||||
@apply data-[state=checked]:before:bg-[var(--switch-bg-orange)];
|
||||
}
|
||||
|
||||
.switch-red {
|
||||
@apply data-[state=checked]:before:bg-[var(--switch-bg-red)];
|
||||
}
|
||||
|
||||
.switch-green {
|
||||
@apply data-[state=checked]:before:bg-[var(--switch-bg-green)];
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.table-head-left {
|
||||
@apply text-left;
|
||||
}
|
||||
|
||||
.table-head-center {
|
||||
@apply text-center;
|
||||
}
|
||||
|
||||
.table-head-right {
|
||||
@apply text-right;
|
||||
}
|
||||
|
||||
.table-cell-left {
|
||||
@apply text-left;
|
||||
}
|
||||
|
||||
.table-cell-center {
|
||||
@apply text-center;
|
||||
}
|
||||
|
||||
.table-cell-right {
|
||||
@apply text-right;
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.tag-small {
|
||||
@apply text-small-strong h-5.5 gap-1 px-2 [&>svg]:h-3 [&>svg]:w-3;
|
||||
}
|
||||
|
||||
.tag-medium {
|
||||
@apply text-base-strong h-7 gap-1.5 px-2.5 [&>svg]:h-4 [&>svg]:w-4;
|
||||
}
|
||||
|
||||
.tag-large {
|
||||
@apply text-large-strong h-8 gap-2 px-3 [&>svg]:h-4 [&>svg]:w-4;
|
||||
}
|
||||
|
||||
.tag-radius-small {
|
||||
@apply rounded-0;
|
||||
}
|
||||
|
||||
.tag-radius-medium {
|
||||
@apply rounded-6;
|
||||
}
|
||||
|
||||
.tag-radius-large {
|
||||
@apply rounded-full;
|
||||
}
|
||||
|
||||
.tag-primary {
|
||||
@apply bg-[var(--tag-primary-bg)] text-[var(--tag-primary-fg)];
|
||||
}
|
||||
|
||||
.tag-secondary {
|
||||
@apply bg-[var(--tag-secondary-bg)] text-[var(--tag-secondary-fg)];
|
||||
}
|
||||
|
||||
.tag-destructive {
|
||||
@apply bg-[var(--tag-destructive-bg)] text-[var(--tag-destructive-fg)];
|
||||
}
|
||||
|
||||
.tag-outline {
|
||||
@apply border border-[var(--tag-outline-border)] bg-[var(--tag-outline-bg)] text-[var(--tag-outline-fg)] hover:bg-[var(--tag-outline-bg-hover)];
|
||||
}
|
||||
@@ -0,0 +1,240 @@
|
||||
const plugin = require("tailwindcss/plugin");
|
||||
const theme = require("../theme");
|
||||
|
||||
function filterDefault(values) {
|
||||
return Object.fromEntries(
|
||||
Object.entries(values).filter(([key]) => key !== "DEFAULT"),
|
||||
);
|
||||
}
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: "class",
|
||||
content: [{ raw: "" }],
|
||||
safelist: [
|
||||
{
|
||||
pattern:
|
||||
/(fill|text|bg|border|text-above)-neutral-(primary|secondary|tertiary|inverse|disabled|static|hover|transparent|dim)/,
|
||||
},
|
||||
{
|
||||
pattern: /bg-(primary|secondary|tertiary|dim)/,
|
||||
},
|
||||
{
|
||||
pattern: /(fill|text|border)-tint-(red|orange|green|blue)/,
|
||||
},
|
||||
{
|
||||
pattern: /bg-tint-(red|orange|green|blue)-(bold|subtle|hover|)/,
|
||||
},
|
||||
{
|
||||
pattern: /rounded(-|)(0|4|6|8|12|16|24|full|)/,
|
||||
},
|
||||
{
|
||||
pattern: /shadow(-|)(sm|md|lg|xl|2xl|inner|none|)/,
|
||||
},
|
||||
],
|
||||
theme,
|
||||
plugins: [
|
||||
plugin(
|
||||
({ addUtilities, matchUtilities, theme }) => {
|
||||
addUtilities({
|
||||
"@keyframes enter": theme("keyframes.enter"),
|
||||
"@keyframes exit": theme("keyframes.exit"),
|
||||
".animate-in": {
|
||||
animationName: "enter",
|
||||
animationDuration: theme("animationDuration.DEFAULT"),
|
||||
"--tw-enter-opacity": "initial",
|
||||
"--tw-enter-scale": "initial",
|
||||
"--tw-enter-rotate": "initial",
|
||||
"--tw-enter-translate-x": "initial",
|
||||
"--tw-enter-translate-y": "initial",
|
||||
},
|
||||
".animate-out": {
|
||||
animationName: "exit",
|
||||
animationDuration: theme("animationDuration.DEFAULT"),
|
||||
"--tw-exit-opacity": "initial",
|
||||
"--tw-exit-scale": "initial",
|
||||
"--tw-exit-rotate": "initial",
|
||||
"--tw-exit-translate-x": "initial",
|
||||
"--tw-exit-translate-y": "initial",
|
||||
},
|
||||
});
|
||||
|
||||
matchUtilities(
|
||||
{
|
||||
"fade-in": (value) => ({ "--tw-enter-opacity": value }),
|
||||
"fade-out": (value) => ({ "--tw-exit-opacity": value }),
|
||||
},
|
||||
{ values: theme("animationOpacity") },
|
||||
);
|
||||
|
||||
matchUtilities(
|
||||
{
|
||||
"zoom-in": (value) => ({ "--tw-enter-scale": value }),
|
||||
"zoom-out": (value) => ({ "--tw-exit-scale": value }),
|
||||
},
|
||||
{ values: theme("animationScale") },
|
||||
);
|
||||
|
||||
matchUtilities(
|
||||
{
|
||||
"spin-in": (value) => ({ "--tw-enter-rotate": value }),
|
||||
"spin-out": (value) => ({ "--tw-exit-rotate": value }),
|
||||
},
|
||||
{ values: theme("animationRotate") },
|
||||
);
|
||||
|
||||
matchUtilities(
|
||||
{
|
||||
"slide-in-from-top": (value) => ({
|
||||
"--tw-enter-translate-y": `-${value}`,
|
||||
}),
|
||||
"slide-in-from-bottom": (value) => ({
|
||||
"--tw-enter-translate-y": value,
|
||||
}),
|
||||
"slide-in-from-left": (value) => ({
|
||||
"--tw-enter-translate-x": `-${value}`,
|
||||
}),
|
||||
"slide-in-from-right": (value) => ({
|
||||
"--tw-enter-translate-x": value,
|
||||
}),
|
||||
"slide-out-to-top": (value) => ({
|
||||
"--tw-exit-translate-y": `-${value}`,
|
||||
}),
|
||||
"slide-out-to-bottom": (value) => ({
|
||||
"--tw-exit-translate-y": value,
|
||||
}),
|
||||
"slide-out-to-left": (value) => ({
|
||||
"--tw-exit-translate-x": `-${value}`,
|
||||
}),
|
||||
"slide-out-to-right": (value) => ({
|
||||
"--tw-exit-translate-x": value,
|
||||
}),
|
||||
},
|
||||
{ values: theme("animationTranslate") },
|
||||
);
|
||||
|
||||
matchUtilities(
|
||||
{ duration: (value) => ({ animationDuration: value }) },
|
||||
{ values: filterDefault(theme("animationDuration")) },
|
||||
);
|
||||
|
||||
matchUtilities(
|
||||
{ delay: (value) => ({ animationDelay: value }) },
|
||||
{ values: theme("animationDelay") },
|
||||
);
|
||||
|
||||
matchUtilities(
|
||||
{ ease: (value) => ({ animationTimingFunction: value }) },
|
||||
{ values: filterDefault(theme("animationTimingFunction")) },
|
||||
);
|
||||
|
||||
addUtilities({
|
||||
".running": { animationPlayState: "running" },
|
||||
".paused": { animationPlayState: "paused" },
|
||||
});
|
||||
|
||||
matchUtilities(
|
||||
{ "fill-mode": (value) => ({ animationFillMode: value }) },
|
||||
{ values: theme("animationFillMode") },
|
||||
);
|
||||
|
||||
matchUtilities(
|
||||
{ direction: (value) => ({ animationDirection: value }) },
|
||||
{ values: theme("animationDirection") },
|
||||
);
|
||||
|
||||
matchUtilities(
|
||||
{ repeat: (value) => ({ animationIterationCount: value }) },
|
||||
{ values: theme("animationRepeat") },
|
||||
);
|
||||
},
|
||||
{
|
||||
theme: {
|
||||
extend: {
|
||||
animationDelay: ({ theme }) => ({
|
||||
...theme("transitionDelay"),
|
||||
}),
|
||||
animationDuration: ({ theme }) => ({
|
||||
0: "0ms",
|
||||
...theme("transitionDuration"),
|
||||
}),
|
||||
animationTimingFunction: ({ theme }) => ({
|
||||
...theme("transitionTimingFunction"),
|
||||
}),
|
||||
animationFillMode: {
|
||||
none: "none",
|
||||
forwards: "forwards",
|
||||
backwards: "backwards",
|
||||
both: "both",
|
||||
},
|
||||
animationDirection: {
|
||||
normal: "normal",
|
||||
reverse: "reverse",
|
||||
alternate: "alternate",
|
||||
"alternate-reverse": "alternate-reverse",
|
||||
},
|
||||
animationOpacity: ({ theme }) => ({
|
||||
DEFAULT: 0,
|
||||
...theme("opacity"),
|
||||
}),
|
||||
animationTranslate: ({ theme }) => ({
|
||||
DEFAULT: "100%",
|
||||
...theme("translate"),
|
||||
}),
|
||||
animationScale: ({ theme }) => ({
|
||||
DEFAULT: 0,
|
||||
...theme("scale"),
|
||||
}),
|
||||
animationRotate: ({ theme }) => ({
|
||||
DEFAULT: "30deg",
|
||||
...theme("rotate"),
|
||||
}),
|
||||
animationRepeat: {
|
||||
0: "0",
|
||||
1: "1",
|
||||
infinite: "infinite",
|
||||
},
|
||||
animation: {
|
||||
in: "enter 0.15s ease-in-out",
|
||||
out: "exit 0.15s ease-in-out",
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
},
|
||||
keyframes: {
|
||||
enter: {
|
||||
from: {
|
||||
opacity: "var(--tw-enter-opacity, 1)",
|
||||
transform:
|
||||
"translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))",
|
||||
},
|
||||
},
|
||||
exit: {
|
||||
to: {
|
||||
opacity: "var(--tw-exit-opacity, 1)",
|
||||
transform:
|
||||
"translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))",
|
||||
},
|
||||
},
|
||||
"accordion-down": {
|
||||
from: { height: "0" },
|
||||
to: { height: "var(--radix-accordion-content-height)" },
|
||||
},
|
||||
"accordion-up": {
|
||||
from: { height: "var(--radix-accordion-content-height)" },
|
||||
to: { height: "0" },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
),
|
||||
plugin(({ addBase }) => {
|
||||
addBase(require("../../dist/base"));
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
// {
|
||||
// pattern:
|
||||
// /(bg|text|fill|border|text-above)-neutral-(primary|secondary|tertiary|quaternary|dim|)/,
|
||||
// },
|
||||
@@ -0,0 +1,66 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.toast-radius-large {
|
||||
@apply rounded-24;
|
||||
}
|
||||
|
||||
.toast-radius-medium {
|
||||
@apply rounded-8;
|
||||
}
|
||||
|
||||
.toast-radius-small {
|
||||
@apply rounded-0;
|
||||
}
|
||||
|
||||
.toast-default {
|
||||
@apply border-[var(--toast-border)];
|
||||
}
|
||||
|
||||
.toast-warning {
|
||||
@apply border-[var(--toast-border-warning)];
|
||||
}
|
||||
|
||||
.toast-success {
|
||||
@apply border-[var(--toast-border-success)];
|
||||
}
|
||||
|
||||
.toast-error {
|
||||
@apply border-[var(--toast-border-error)];
|
||||
}
|
||||
|
||||
.toast-informative {
|
||||
@apply border-[var(--toast-border-informative)];
|
||||
}
|
||||
|
||||
.toast-icon-default {
|
||||
@apply text-[var(--toast-fg)];
|
||||
}
|
||||
|
||||
.toast-icon-warning {
|
||||
@apply text-[var(--toast-fg-warning)];
|
||||
}
|
||||
|
||||
.toast-icon-success {
|
||||
@apply text-[var(--toast-fg-success)];
|
||||
}
|
||||
|
||||
.toast-icon-error {
|
||||
@apply text-[var(--toast-fg-error)];
|
||||
}
|
||||
|
||||
.toast-icon-informative {
|
||||
@apply text-[var(--toast-fg-informative)];
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.toggle-group-item-large {
|
||||
@apply text-xlarge-strong min-h-13 px-6 py-2 [&>svg]:h-6 [&>svg]:w-6;
|
||||
}
|
||||
|
||||
.toggle-group-item-medium {
|
||||
@apply text-large-strong min-h-11 px-4 py-2 [&>svg]:h-5 [&>svg]:w-5;
|
||||
}
|
||||
|
||||
.toggle-group-item-small {
|
||||
@apply text-base-strong min-h-9 px-3 py-1.5 [&>svg]:h-4 [&>svg]:w-4;
|
||||
}
|
||||
|
||||
.toggle-group-item-radius-large {
|
||||
@apply first:rounded-l-full last:rounded-r-full;
|
||||
}
|
||||
|
||||
.toggle-group-item-radius-medium {
|
||||
@apply first:rounded-l-8 last:rounded-r-8;
|
||||
}
|
||||
|
||||
.toggle-group-item-radius-small {
|
||||
@apply first:rounded-l-0 last:rounded-r-0;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.tooltip-text-left {
|
||||
@apply text-left;
|
||||
}
|
||||
|
||||
.tooltip-text-center {
|
||||
@apply text-center;
|
||||
}
|
||||
|
||||
.tooltip-text-right {
|
||||
@apply text-right;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
@import url("tailwindcss/utilities");
|
||||
Reference in New Issue
Block a user