diff --git a/components.json b/components.json
new file mode 100644
index 00000000..f490f4da
--- /dev/null
+++ b/components.json
@@ -0,0 +1,21 @@
+{
+ "$schema": "https://ui.shadcn.com/schema.json",
+ "style": "new-york",
+ "rsc": false,
+ "tsx": true,
+ "tailwind": {
+ "config": "",
+ "css": "src/styles/global.css",
+ "baseColor": "neutral",
+ "cssVariables": true,
+ "prefix": ""
+ },
+ "aliases": {
+ "components": "@/components",
+ "utils": "@/lib/utils",
+ "ui": "@/components/ui",
+ "lib": "@/lib",
+ "hooks": "@/hooks"
+ },
+ "iconLibrary": "lucide"
+}
diff --git a/package.json b/package.json
index 2ee69924..7b89a49b 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
"test:components": "cypress run --component --browser chrome --headless",
"test:unit": "jest --coverage",
"test:cy": "cypress run",
- "coverage": "pnpm run test:unit && pnpm run test:components"
+ "coverage": "pnpm run test:unit && pnpm run test:components",
+ "generate-tokens": "node scripts/system-token/convert-tokens.cjs"
},
"dependencies": {
"@appflowyinc/ai-chat": "0.1.25",
@@ -30,11 +31,21 @@
"@mui/icons-material": "^5.11.11",
"@mui/material": "6.0.0-alpha.2",
"@mui/x-date-pickers-pro": "^6.18.2",
+ "@radix-ui/react-avatar": "^1.1.3",
+ "@radix-ui/react-dialog": "^1.1.6",
+ "@radix-ui/react-dropdown-menu": "^2.1.6",
+ "@radix-ui/react-label": "^2.1.2",
+ "@radix-ui/react-popover": "^1.1.6",
+ "@radix-ui/react-separator": "^1.1.2",
+ "@radix-ui/react-slot": "^1.1.2",
+ "@radix-ui/react-tooltip": "^1.1.8",
"@reduxjs/toolkit": "2.0.0",
"@slate-yjs/core": "^1.0.2",
"@types/react-swipeable-views": "^0.13.4",
"async-retry": "^1.3.3",
"axios": "^1.6.8",
+ "class-variance-authority": "^0.7.1",
+ "clsx": "^2.1.1",
"colorthief": "^2.4.0",
"dayjs": "^1.11.9",
"decimal.js": "^10.4.3",
@@ -59,8 +70,10 @@
"katex": "^0.16.7",
"lightgallery": "^2.7.2",
"lodash-es": "^4.17.21",
+ "lucide-react": "^0.485.0",
"mermaid": "^11.4.1",
"nanoid": "^4.0.0",
+ "next-themes": "^0.4.6",
"notistack": "^3.0.1",
"numeral": "^2.0.6",
"prismjs": "^1.29.0",
@@ -100,7 +113,10 @@
"slate-history": "^0.100.0",
"slate-react": "^0.101.3",
"smooth-scroll-into-view-if-needed": "^2.0.2",
+ "sonner": "^2.0.3",
+ "tailwind-merge": "^3.0.2",
"ts-results": "^3.3.0",
+ "tw-animate-css": "^1.2.5",
"unified": "^11.0.5",
"unist": "^0.0.1",
"unsplash-js": "^7.0.19",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1b363b4a..fadd0fe4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -37,6 +37,30 @@ dependencies:
'@mui/x-date-pickers-pro':
specifier: ^6.18.2
version: 6.20.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@6.0.0-alpha.2)(@mui/system@5.15.15)(@types/react@18.2.66)(dayjs@1.11.9)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-avatar':
+ specifier: ^1.1.3
+ version: 1.1.3(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-dialog':
+ specifier: ^1.1.6
+ version: 1.1.6(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-dropdown-menu':
+ specifier: ^2.1.6
+ version: 2.1.6(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-label':
+ specifier: ^2.1.2
+ version: 2.1.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-popover':
+ specifier: ^1.1.6
+ version: 1.1.6(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-separator':
+ specifier: ^1.1.2
+ version: 1.1.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-slot':
+ specifier: ^1.1.2
+ version: 1.1.2(@types/react@18.2.66)(react@18.2.0)
+ '@radix-ui/react-tooltip':
+ specifier: ^1.1.8
+ version: 1.1.8(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
'@reduxjs/toolkit':
specifier: 2.0.0
version: 2.0.0(react-redux@8.1.3)(react@18.2.0)
@@ -52,6 +76,12 @@ dependencies:
axios:
specifier: ^1.6.8
version: 1.7.2
+ class-variance-authority:
+ specifier: ^0.7.1
+ version: 0.7.1
+ clsx:
+ specifier: ^2.1.1
+ version: 2.1.1
colorthief:
specifier: ^2.4.0
version: 2.4.0
@@ -124,12 +154,18 @@ dependencies:
lodash-es:
specifier: ^4.17.21
version: 4.17.21
+ lucide-react:
+ specifier: ^0.485.0
+ version: 0.485.0(react@18.2.0)
mermaid:
specifier: ^11.4.1
version: 11.4.1
nanoid:
specifier: ^4.0.0
version: 4.0.2
+ next-themes:
+ specifier: ^0.4.6
+ version: 0.4.6(react-dom@18.2.0)(react@18.2.0)
notistack:
specifier: ^3.0.1
version: 3.0.1(csstype@3.1.3)(react-dom@18.2.0)(react@18.2.0)
@@ -247,9 +283,18 @@ dependencies:
smooth-scroll-into-view-if-needed:
specifier: ^2.0.2
version: 2.0.2
+ sonner:
+ specifier: ^2.0.3
+ version: 2.0.3(react-dom@18.2.0)(react@18.2.0)
+ tailwind-merge:
+ specifier: ^3.0.2
+ version: 3.0.2
ts-results:
specifier: ^3.3.0
version: 3.3.0
+ tw-animate-css:
+ specifier: ^1.2.5
+ version: 1.2.5
unified:
specifier: ^11.0.5
version: 11.0.5
@@ -551,15 +596,15 @@ packages:
'@jest/globals': 29.7.0
'@radix-ui/react-avatar': 1.1.3(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-dialog': 1.1.6(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
- '@radix-ui/react-label': 2.1.1(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
- '@radix-ui/react-popover': 1.1.4(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-label': 2.1.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-popover': 1.1.6(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-radio-group': 1.2.3(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-select': 2.1.4(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
- '@radix-ui/react-separator': 1.1.1(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-separator': 1.1.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-slot': 1.1.2(@types/react@18.2.66)(react@18.2.0)
'@radix-ui/react-switch': 1.1.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-toast': 1.2.6(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
- '@radix-ui/react-tooltip': 1.1.6(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-tooltip': 1.1.8(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
axios: 1.7.2
class-variance-authority: 0.7.1
clsx: 2.1.1
@@ -601,13 +646,13 @@ packages:
slate-history: ^0.110.3
slate-react: ^0.112.0
dependencies:
- '@radix-ui/react-label': 2.1.1(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
- '@radix-ui/react-popover': 1.1.4(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-label': 2.1.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-popover': 1.1.6(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-select': 2.1.4(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
- '@radix-ui/react-separator': 1.1.1(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-separator': 1.1.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-slot': 1.1.2(@types/react@18.2.66)(react@18.2.0)
'@radix-ui/react-switch': 1.1.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
- '@radix-ui/react-tooltip': 1.1.6(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-tooltip': 1.1.8(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
class-variance-authority: 0.7.1
clsx: 2.1.1
i18next: 22.5.1
@@ -3964,6 +4009,26 @@ packages:
react-dom: 18.2.0(react@18.2.0)
dev: false
+ /@radix-ui/react-arrow@1.1.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-G+KcpzXHq24iH0uGG/pF8LyzpFJYGD4RfLjCIBfGdSLXvjLHST31RUiRVrupIBMvIppMgSzQ6l66iAxl03tdlg==}
+ peerDependencies:
+ '@types/react': '*'
+ '@types/react-dom': '*'
+ react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+ react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ '@types/react-dom':
+ optional: true
+ dependencies:
+ '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@types/react': 18.2.66
+ '@types/react-dom': 18.2.22
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ dev: false
+
/@radix-ui/react-avatar@1.1.3(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-Paen00T4P8L8gd9bNsRMw7Cbaz85oxiv+hzomsRZgFm2byltPFDtfcoqlWJ8GyZlIBWgLssJlzLCnKU0G0302g==}
peerDependencies:
@@ -4153,6 +4218,32 @@ packages:
react-dom: 18.2.0(react@18.2.0)
dev: false
+ /@radix-ui/react-dropdown-menu@2.1.6(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-no3X7V5fD487wab/ZYSHXq3H37u4NVeLDKI/Ks724X/eEFSSEFYZxWgsIlr1UBeEyDaM29HM5x9p1Nv8DuTYPA==}
+ peerDependencies:
+ '@types/react': '*'
+ '@types/react-dom': '*'
+ react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+ react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ '@types/react-dom':
+ optional: true
+ dependencies:
+ '@radix-ui/primitive': 1.1.1
+ '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.2.66)(react@18.2.0)
+ '@radix-ui/react-context': 1.1.1(@types/react@18.2.66)(react@18.2.0)
+ '@radix-ui/react-id': 1.1.0(@types/react@18.2.66)(react@18.2.0)
+ '@radix-ui/react-menu': 2.1.6(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.66)(react@18.2.0)
+ '@types/react': 18.2.66
+ '@types/react-dom': 18.2.22
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ dev: false
+
/@radix-ui/react-focus-guards@1.1.1(@types/react@18.2.66)(react@18.2.0):
resolution: {integrity: sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==}
peerDependencies:
@@ -4224,8 +4315,8 @@ packages:
react: 18.2.0
dev: false
- /@radix-ui/react-label@2.1.1(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
- resolution: {integrity: sha512-UUw5E4e/2+4kFMH7+YxORXGWggtY6sM8WIwh5RZchhLuUg2H1hc98Py+pr8HMz6rdaYrK2t296ZEjYLOCO5uUw==}
+ /@radix-ui/react-label@2.1.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-zo1uGMTaNlHehDyFQcDZXRJhUPDuukcnHz0/jnrup0JA6qL+AFpAnty+7VKa9esuU5xTblAZzTGYJKSKaBxBhw==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
@@ -4237,15 +4328,52 @@ packages:
'@types/react-dom':
optional: true
dependencies:
- '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
'@types/react': 18.2.66
'@types/react-dom': 18.2.22
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
dev: false
- /@radix-ui/react-popover@1.1.4(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
- resolution: {integrity: sha512-aUACAkXx8LaFymDma+HQVji7WhvEhpFJ7+qPz17Nf4lLZqtreGOFRiNQWQmhzp7kEWg9cOyyQJpdIMUMPc/CPw==}
+ /@radix-ui/react-menu@2.1.6(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-tBBb5CXDJW3t2mo9WlO7r6GTmWV0F0uzHZVFmlRmYpiSK1CDU5IKojP1pm7oknpBOrFZx/YgBRW9oorPO2S/Lg==}
+ peerDependencies:
+ '@types/react': '*'
+ '@types/react-dom': '*'
+ react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+ react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ '@types/react-dom':
+ optional: true
+ dependencies:
+ '@radix-ui/primitive': 1.1.1
+ '@radix-ui/react-collection': 1.1.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.2.66)(react@18.2.0)
+ '@radix-ui/react-context': 1.1.1(@types/react@18.2.66)(react@18.2.0)
+ '@radix-ui/react-direction': 1.1.0(@types/react@18.2.66)(react@18.2.0)
+ '@radix-ui/react-dismissable-layer': 1.1.5(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.2.66)(react@18.2.0)
+ '@radix-ui/react-focus-scope': 1.1.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-id': 1.1.0(@types/react@18.2.66)(react@18.2.0)
+ '@radix-ui/react-popper': 1.2.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-portal': 1.1.4(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-roving-focus': 1.1.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-slot': 1.1.2(@types/react@18.2.66)(react@18.2.0)
+ '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.66)(react@18.2.0)
+ '@types/react': 18.2.66
+ '@types/react-dom': 18.2.22
+ aria-hidden: 1.2.4
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ react-remove-scroll: 2.6.3(@types/react@18.2.66)(react@18.2.0)
+ dev: false
+
+ /@radix-ui/react-popover@1.1.6(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-NQouW0x4/GnkFJ/pRqsIS3rM/k97VzKnVb2jB7Gq7VEGPy5g7uNV1ykySFt7eWSp3i2uSGFwaJcvIRJBAHmmFg==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
@@ -4260,15 +4388,15 @@ packages:
'@radix-ui/primitive': 1.1.1
'@radix-ui/react-compose-refs': 1.1.1(@types/react@18.2.66)(react@18.2.0)
'@radix-ui/react-context': 1.1.1(@types/react@18.2.66)(react@18.2.0)
- '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-dismissable-layer': 1.1.5(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-focus-guards': 1.1.1(@types/react@18.2.66)(react@18.2.0)
- '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-focus-scope': 1.1.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-id': 1.1.0(@types/react@18.2.66)(react@18.2.0)
- '@radix-ui/react-popper': 1.2.1(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
- '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-popper': 1.2.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-portal': 1.1.4(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-presence': 1.1.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
- '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
- '@radix-ui/react-slot': 1.1.1(@types/react@18.2.66)(react@18.2.0)
+ '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-slot': 1.1.2(@types/react@18.2.66)(react@18.2.0)
'@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.66)(react@18.2.0)
'@types/react': 18.2.66
'@types/react-dom': 18.2.22
@@ -4307,6 +4435,35 @@ packages:
react-dom: 18.2.0(react@18.2.0)
dev: false
+ /@radix-ui/react-popper@1.2.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-Rvqc3nOpwseCyj/rgjlJDYAgyfw7OC1tTkKn2ivhaMGcYt8FSBlahHOZak2i3QwkRXUXgGgzeEe2RuqeEHuHgA==}
+ peerDependencies:
+ '@types/react': '*'
+ '@types/react-dom': '*'
+ react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+ react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ '@types/react-dom':
+ optional: true
+ dependencies:
+ '@floating-ui/react-dom': 2.1.2(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-arrow': 1.1.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.2.66)(react@18.2.0)
+ '@radix-ui/react-context': 1.1.1(@types/react@18.2.66)(react@18.2.0)
+ '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.66)(react@18.2.0)
+ '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.66)(react@18.2.0)
+ '@radix-ui/react-use-rect': 1.1.0(@types/react@18.2.66)(react@18.2.0)
+ '@radix-ui/react-use-size': 1.1.0(@types/react@18.2.66)(react@18.2.0)
+ '@radix-ui/rect': 1.1.0
+ '@types/react': 18.2.66
+ '@types/react-dom': 18.2.22
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ dev: false
+
/@radix-ui/react-portal@1.1.3(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-NciRqhXnGojhT93RPyDaMPfLH3ZSl4jjIFbZQ1b/vxvZEdHsBZ49wP9w8L3HzUQwep01LcWtkUvm0OVB5JAHTw==}
peerDependencies:
@@ -4507,8 +4664,8 @@ packages:
react-remove-scroll: 2.6.3(@types/react@18.2.66)(react@18.2.0)
dev: false
- /@radix-ui/react-separator@1.1.1(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
- resolution: {integrity: sha512-RRiNRSrD8iUiXriq/Y5n4/3iE8HzqgLHsusUSg5jVpU2+3tqcUFPJXHDymwEypunc2sWxDUS3UC+rkZRlHedsw==}
+ /@radix-ui/react-separator@1.1.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-oZfHcaAp2Y6KFBX6I5P1u7CQoy4lheCGiYj+pGFrHy8E/VNRb5E39TkTr3JrV520csPBTZjkuKFdEsjS5EUNKQ==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
@@ -4520,7 +4677,7 @@ packages:
'@types/react-dom':
optional: true
dependencies:
- '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
'@types/react': 18.2.66
'@types/react-dom': 18.2.22
react: 18.2.0
@@ -4612,8 +4769,8 @@ packages:
react-dom: 18.2.0(react@18.2.0)
dev: false
- /@radix-ui/react-tooltip@1.1.6(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
- resolution: {integrity: sha512-TLB5D8QLExS1uDn7+wH/bjEmRurNMTzNrtq7IjaS4kjion9NtzsTGkvR5+i7yc9q01Pi2KMM2cN3f8UG4IvvXA==}
+ /@radix-ui/react-tooltip@1.1.8(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-YAA2cu48EkJZdAMHC0dqo9kialOcRStbtiY4nJPaht7Ptrhcvpo+eDChaM6BIs8kL6a8Z5l5poiqLnXcNduOkA==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
@@ -4628,15 +4785,15 @@ packages:
'@radix-ui/primitive': 1.1.1
'@radix-ui/react-compose-refs': 1.1.1(@types/react@18.2.66)(react@18.2.0)
'@radix-ui/react-context': 1.1.1(@types/react@18.2.66)(react@18.2.0)
- '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-dismissable-layer': 1.1.5(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-id': 1.1.0(@types/react@18.2.66)(react@18.2.0)
- '@radix-ui/react-popper': 1.2.1(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
- '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-popper': 1.2.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-portal': 1.1.4(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-presence': 1.1.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
- '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
- '@radix-ui/react-slot': 1.1.1(@types/react@18.2.66)(react@18.2.0)
+ '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-slot': 1.1.2(@types/react@18.2.66)(react@18.2.0)
'@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.66)(react@18.2.0)
- '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-visually-hidden': 1.1.2(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
'@types/react': 18.2.66
'@types/react-dom': 18.2.22
react: 18.2.0
@@ -10815,6 +10972,14 @@ packages:
react: 18.2.0
dev: false
+ /lucide-react@0.485.0(react@18.2.0):
+ resolution: {integrity: sha512-NvyQJ0LKyyCxL23nPKESlr/jmz8r7fJO1bkuptSNYSy0s8VVj4ojhX0YAgmE1e0ewfxUZjIlZpvH+otfTnla8Q==}
+ peerDependencies:
+ react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+ dependencies:
+ react: 18.2.0
+ dev: false
+
/luxon@3.4.4:
resolution: {integrity: sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==}
engines: {node: '>=12'}
@@ -11471,6 +11636,16 @@ packages:
resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
dev: true
+ /next-themes@0.4.6(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+ peerDependencies:
+ react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+ react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+ dependencies:
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ dev: false
+
/nice-try@1.0.5:
resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
dev: true
@@ -13674,6 +13849,16 @@ packages:
atomic-sleep: 1.0.0
dev: true
+ /sonner@2.0.3(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-njQ4Hht92m0sMqqHVDL32V2Oun9W1+PHO9NDv9FHfJjT3JT22IG4Jpo3FPQy+mouRKCXFWO+r67v6MrHX2zeIA==}
+ peerDependencies:
+ react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+ react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+ dependencies:
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ dev: false
+
/source-map-js@1.2.0:
resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
engines: {node: '>=0.10.0'}
@@ -14004,6 +14189,10 @@ packages:
resolution: {integrity: sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA==}
dev: false
+ /tailwind-merge@3.0.2:
+ resolution: {integrity: sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw==}
+ dev: false
+
/tailwindcss-animate@1.0.7(tailwindcss@3.4.17):
resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
peerDependencies:
@@ -14420,6 +14609,10 @@ packages:
dependencies:
safe-buffer: 5.1.2
+ /tw-animate-css@1.2.5:
+ resolution: {integrity: sha512-ABzjfgVo+fDbhRREGL4KQZUqqdPgvc5zVrLyeW9/6mVqvaDepXc7EvedA+pYmMnIOsUAQMwcWzNvom26J2qYvQ==}
+ dev: false
+
/tweetnacl@0.14.5:
resolution: {integrity: sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==}
diff --git a/scripts/system-token/convert-tokens.cjs b/scripts/system-token/convert-tokens.cjs
new file mode 100644
index 00000000..386c191c
--- /dev/null
+++ b/scripts/system-token/convert-tokens.cjs
@@ -0,0 +1,269 @@
+const fs = require('fs');
+const path = require('path');
+
+// Ensure target directory exists
+function ensureDirectoryExists (dirPath) {
+ if (!fs.existsSync(dirPath)) {
+ fs.mkdirSync(dirPath, { recursive: true });
+ console.log(`Created directory: ${dirPath}`);
+ }
+}
+
+// Read JSON file
+function readJsonFile (filePath) {
+ try {
+ const data = fs.readFileSync(filePath, 'utf8');
+ return JSON.parse(data);
+ } catch (error) {
+ console.error(`Error reading file ${filePath}:`, error);
+ process.exit(1);
+ }
+}
+
+// Resolve reference values
+function resolveReferences (tokens, primitiveTokens) {
+ const resolvedTokens = JSON.parse(JSON.stringify(tokens));
+
+ function resolveValue (value, visitedRefs = new Set()) {
+ if (typeof value !== 'string' || !value.startsWith('{') || !value.endsWith('}')) {
+ return value;
+ }
+
+ const reference = value.slice(1, -1);
+ if (visitedRefs.has(reference)) {
+ console.warn(`Circular reference detected: ${reference}`);
+ return value;
+ }
+
+ visitedRefs.add(reference);
+
+ // Split reference path
+ const parts = reference.split('.');
+ let current;
+
+ // First look in primitive tokens
+ if (primitiveTokens) {
+ current = primitiveTokens;
+ for (const part of parts) {
+ if (current && current[part]) {
+ current = current[part];
+ } else {
+ current = null;
+ break;
+ }
+ }
+ }
+
+ // If not found in primitives, look in current tokens
+ if (!current) {
+ current = resolvedTokens;
+ for (const part of parts) {
+ if (current && current[part]) {
+ current = current[part];
+ } else {
+ console.warn(`Reference not found: ${reference}`);
+ return value;
+ }
+ }
+ }
+
+ if (current && current.$value) {
+ return resolveValue(current.$value, visitedRefs);
+ }
+
+ return current;
+ }
+
+ function processObject (obj) {
+ for (const key in obj) {
+ if (typeof obj[key] === 'object' && obj[key] !== null) {
+ processObject(obj[key]);
+ } else if (key === '$value') {
+ obj.$value = resolveValue(obj.$value);
+ }
+ }
+ }
+
+ processObject(resolvedTokens);
+ return resolvedTokens;
+}
+
+// Convert to CSS variables
+function convertToCssVariables (tokens, prefix = '', isDarkTheme = false, sourceFile) {
+ let variableNames = []; // Store all generated variable names
+
+ // Create CSS file header with warning comments
+ let css = `/**
+ * Design system ${isDarkTheme ? 'dark' : 'light'} theme variables
+ * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+ *
+ * Generated from: ${sourceFile}
+ * Generated time: ${new Date().toISOString()}
+ *
+ * To modify these values, edit the source JSON files and run the token conversion script:
+ * node scripts/system-token/convert-tokens.cjs
+ */
+
+`;
+
+ // Select root selector based on theme
+ const rootSelector = isDarkTheme ? ':root[data-dark-mode=true]' : ':root';
+
+ function processTokens (obj, path = '') {
+ for (const key in obj) {
+ const newPath = path ? `${path}-${key}` : key;
+
+ // If object but not a value object (i.e., doesn't have $value)
+ if (typeof obj[key] === 'object' && obj[key] !== null && !obj[key].$value) {
+ processTokens(obj[key], newPath);
+ }
+ // If it's a value object (has $value)
+ else if (typeof obj[key] === 'object' && obj[key] !== null && obj[key].$value) {
+ const token = obj[key];
+ const variableName = `--${prefix}${newPath.toLowerCase().replace(/_/g, '-')}`;
+
+ let value = token.$value;
+
+ // Add to variable names list
+ variableNames.push(variableName.substring(2)); // Remove leading --
+
+ // Format value based on type
+ if (token.$type === 'dimension') {
+ // Keep dimension values as is, they already include units like px
+ css += ` ${variableName}: ${value};\n`;
+ } else if (token.$type === 'color') {
+ css += ` ${variableName}: ${value};\n`;
+ } else {
+ css += ` ${variableName}: ${value};\n`;
+ }
+ }
+ }
+ }
+
+ css += `${rootSelector} {\n`;
+ processTokens(tokens);
+ css += '}\n';
+
+ return { css, variableNames };
+}
+
+// Generate Tailwind color config from CSS variable names
+function createTailwindColorsFromVariables (variableNames) {
+ const colors = {};
+
+ // Group by prefix
+ variableNames.forEach(varName => {
+ const parts = varName.split('-');
+ const mainCategory = parts[0];
+
+ // Handle main category
+ if (!colors[mainCategory]) {
+ colors[mainCategory] = {};
+ }
+
+ // Generate key without main category
+ const subKey = parts.slice(1).join('-');
+
+ // Use 'DEFAULT' if empty
+ const finalKey = subKey || 'DEFAULT';
+
+ // Set CSS variable reference
+ colors[mainCategory][finalKey] = `var(--${varName})`;
+ });
+
+ // Fix special categories to match Tailwind conventions
+ delete colors['spacing'];
+ delete colors['border-radius'];
+ delete colors['shadow'];
+
+ // Generate CommonJS module code
+ const tailwindCode = `/**
+ * TailwindCSS color configuration
+ * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+ *
+ * This file is auto-generated by convert-tokens.cjs script
+ * Generation time: ${new Date().toISOString()}
+ *
+ * To modify these colors, edit the source JSON files and run the token conversion script:
+ * node scripts/system-token/convert-tokens.cjs
+ *
+ * These colors reference CSS variables, ensure the corresponding CSS files are loaded
+ */
+
+module.exports = ${JSON.stringify(colors, null, 2)};
+`;
+
+ return tailwindCode;
+}
+
+// Main function
+function convertDesignTokens (primitiveFilePath, semanticFilePath, outputFilePath, isDarkTheme = false) {
+ // Read files
+ const primitiveTokens = readJsonFile(primitiveFilePath);
+ const semanticTokens = readJsonFile(semanticFilePath);
+
+ // Resolve references
+ const resolvedTokens = resolveReferences(semanticTokens, primitiveTokens);
+
+ // Convert to CSS with source file information
+ const { css, variableNames } = convertToCssVariables(
+ resolvedTokens,
+ '',
+ isDarkTheme,
+ path.basename(semanticFilePath),
+ );
+
+ // Ensure output directory exists
+ const outputDir = path.dirname(outputFilePath);
+ ensureDirectoryExists(outputDir);
+
+ // Write file
+ fs.writeFileSync(outputFilePath, css, 'utf8');
+ console.log(`CSS variables written to ${outputFilePath}`);
+
+ return { variableNames };
+}
+
+// Define project root directory
+const projectRoot = path.resolve(__dirname, '../..'); // Go up two levels from scripts/system-token to project root
+
+// Define input and output paths
+const inputDir = path.join(__dirname); // Current script directory
+const cssOutputDir = path.join(projectRoot, 'src/styles/variables');
+const tailwindOutputDir = path.join(projectRoot, 'tailwind');
+
+// Ensure output directories exist
+ensureDirectoryExists(cssOutputDir);
+ensureDirectoryExists(tailwindOutputDir);
+
+// Execute conversion
+console.log('Converting design tokens to CSS variables...');
+
+// Collect all variable names
+let allVariableNames = [];
+
+// Convert light theme (default theme)
+const lightResult = convertDesignTokens(
+ path.join(inputDir, 'primitive.json'),
+ path.join(inputDir, 'semantic.light.json'),
+ path.join(cssOutputDir, 'semantic.light.css'),
+ false, // Light theme
+);
+allVariableNames = allVariableNames.concat(lightResult.variableNames);
+
+// Convert dark theme (using data-dark-mode attribute)
+const darkResult = convertDesignTokens(
+ path.join(inputDir, 'primitive.json'),
+ path.join(inputDir, 'semantic.dark.json'),
+ path.join(cssOutputDir, 'semantic.dark.css'),
+ true, // Dark theme
+);
+// Dark theme variables are the same as light theme, no need to merge
+
+// Generate Tailwind color configuration
+console.log('Generating Tailwind color configuration with CSS variable references...');
+const tailwindColors = createTailwindColorsFromVariables(allVariableNames);
+fs.writeFileSync(path.join(tailwindOutputDir, 'new-colors.cjs'), tailwindColors);
+console.log(`Tailwind colors written to ${path.join(tailwindOutputDir, 'new-colors.cjs')}`);
+
+console.log('Conversion completed successfully!');
\ No newline at end of file
diff --git a/scripts/system-token/primitive.json b/scripts/system-token/primitive.json
new file mode 100644
index 00000000..c46354b5
--- /dev/null
+++ b/scripts/system-token/primitive.json
@@ -0,0 +1,984 @@
+{
+ "Neutral": {
+ "100": {
+ "$type": "color",
+ "$value": "#f8faff"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#e4e8f5"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#ced3e6"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#b5bbd3"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#989eb7"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#6f748c"
+ },
+ "700": {
+ "$type": "color",
+ "$value": "#54596e"
+ },
+ "800": {
+ "$type": "color",
+ "$value": "#3c3f4e"
+ },
+ "900": {
+ "$type": "color",
+ "$value": "#272930"
+ },
+ "1000": {
+ "$type": "color",
+ "$value": "#21232a"
+ },
+ "black": {
+ "$type": "color",
+ "$value": "#000000"
+ },
+ "alpha-black-60": {
+ "$type": "color",
+ "$value": "#00000099"
+ },
+ "white": {
+ "$type": "color",
+ "$value": "#ffffff"
+ },
+ "alpha-white-0": {
+ "$type": "color",
+ "$value": "#ffffff00"
+ },
+ "alpha-white-20": {
+ "$type": "color",
+ "$value": "#ffffff33"
+ },
+ "alpha-white-30": {
+ "$type": "color",
+ "$value": "#ffffff4d"
+ },
+ "alpha-grey-100-05": {
+ "$type": "color",
+ "$value": "#f9fafd0d"
+ },
+ "alpha-grey-100-10": {
+ "$type": "color",
+ "$value": "#f9fafd1a"
+ },
+ "alpha-grey-1000-05": {
+ "$type": "color",
+ "$value": "#1f23290d"
+ },
+ "alpha-grey-1000-10": {
+ "$type": "color",
+ "$value": "#1f23291a"
+ },
+ "alpha-grey-1000-70": {
+ "$type": "color",
+ "$value": "#1f2329b2"
+ },
+ "alpha-grey-1000-80": {
+ "$type": "color",
+ "$value": "#1f2329cc"
+ }
+ },
+ "Blue": {
+ "100": {
+ "$type": "color",
+ "$value": "#e3f6ff"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#a9e2ff"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#80d2ff"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#4ec1ff"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#00b5ff"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#0092d6"
+ },
+ "700": {
+ "$type": "color",
+ "$value": "#0078c0"
+ },
+ "800": {
+ "$type": "color",
+ "$value": "#0065a9"
+ },
+ "900": {
+ "$type": "color",
+ "$value": "#00508f"
+ },
+ "1000": {
+ "$type": "color",
+ "$value": "#003c77"
+ },
+ "alpha-blue-500-15": {
+ "$type": "color",
+ "$value": "#00b5ff26"
+ }
+ },
+ "Green": {
+ "100": {
+ "$type": "color",
+ "$value": "#ecf9f5"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#c3e5d8"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#9ad1bc"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#71bd9f"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#48a982"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#248569"
+ },
+ "700": {
+ "$type": "color",
+ "$value": "#29725d"
+ },
+ "800": {
+ "$type": "color",
+ "$value": "#2e6050"
+ },
+ "900": {
+ "$type": "color",
+ "$value": "#305548"
+ },
+ "1000": {
+ "$type": "color",
+ "$value": "#305244"
+ }
+ },
+ "Purple": {
+ "100": {
+ "$type": "color",
+ "$value": "#f1e0ff"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#e1b3ff"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#d185ff"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#bc58ff"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#9327ff"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#7a1dcc"
+ },
+ "700": {
+ "$type": "color",
+ "$value": "#6617b3"
+ },
+ "800": {
+ "$type": "color",
+ "$value": "#55138f"
+ },
+ "900": {
+ "$type": "color",
+ "$value": "#470c72"
+ },
+ "1000": {
+ "$type": "color",
+ "$value": "#380758"
+ }
+ },
+ "Magenta": {
+ "100": {
+ "$type": "color",
+ "$value": "#ffe5ef"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#ffb8d1"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#ff8ab2"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#ff5c93"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#fb006d"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#d2005f"
+ },
+ "700": {
+ "$type": "color",
+ "$value": "#d2005f"
+ },
+ "800": {
+ "$type": "color",
+ "$value": "#850040"
+ },
+ "900": {
+ "$type": "color",
+ "$value": "#610031"
+ },
+ "1000": {
+ "$type": "color",
+ "$value": "#400022"
+ }
+ },
+ "Red": {
+ "100": {
+ "$type": "color",
+ "$value": "#ffd2dd"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#ffa5b4"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#ff7d87"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#ff5050"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#f33641"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#e71d32"
+ },
+ "700": {
+ "$type": "color",
+ "$value": "#ad1625"
+ },
+ "800": {
+ "$type": "color",
+ "$value": "#8c101c"
+ },
+ "900": {
+ "$type": "color",
+ "$value": "#6e0a1e"
+ },
+ "1000": {
+ "$type": "color",
+ "$value": "#4c0a17"
+ },
+ "alpha-red-500-10": {
+ "$type": "color",
+ "$value": "#f336411a"
+ }
+ },
+ "Orange": {
+ "100": {
+ "$type": "color",
+ "$value": "#fff3d5"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#ffe4ab"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#ffd181"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#ffbe62"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#ffa02e"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#db7e21"
+ },
+ "700": {
+ "$type": "color",
+ "$value": "#b75f17"
+ },
+ "800": {
+ "$type": "color",
+ "$value": "#93450e"
+ },
+ "900": {
+ "$type": "color",
+ "$value": "#7a3108"
+ },
+ "1000": {
+ "$type": "color",
+ "$value": "#602706"
+ }
+ },
+ "Yellow": {
+ "100": {
+ "$type": "color",
+ "$value": "#fff9b2"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#ffec66"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#ffdf1a"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#ffcc00"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#ffce00"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#e6b800"
+ },
+ "700": {
+ "$type": "color",
+ "$value": "#cc9f00"
+ },
+ "800": {
+ "$type": "color",
+ "$value": "#b38a00"
+ },
+ "900": {
+ "$type": "color",
+ "$value": "#9a7500"
+ },
+ "1000": {
+ "$type": "color",
+ "$value": "#7f6200"
+ }
+ },
+ "Subtle_Color": {
+ "Rose": {
+ "100": {
+ "$type": "color",
+ "$value": "#fcf2f2"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#fae3e3"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#fad9d9"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#edadad"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#cc4e4e"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#702828"
+ }
+ },
+ "Papaya": {
+ "100": {
+ "$type": "color",
+ "$value": "#fcf4f0"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#fae8de"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#fadfd2"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#f0bda3"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#d67240"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#6b3215"
+ }
+ },
+ "Tangerine": {
+ "100": {
+ "$type": "color",
+ "$value": "#fff7ed"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#fcedd9"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#fae5ca"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#f2cb99"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#db8f2c"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#613b0a"
+ }
+ },
+ "Mango": {
+ "100": {
+ "$type": "color",
+ "$value": "#fff9ec"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#fcf1d7"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#fae9c3"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#f5d68e"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#e0a416"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#5c4102"
+ }
+ },
+ "Lemon": {
+ "100": {
+ "$type": "color",
+ "$value": "#fffbe8"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#fcf5cf"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#faefb9"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#f5e282"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#e0bb00"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#574800"
+ }
+ },
+ "Olive": {
+ "100": {
+ "$type": "color",
+ "$value": "#f9fae6"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#f6f7d0"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#f0f2b3"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#dbde83"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#adb204"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#4a4c03"
+ }
+ },
+ "Lime": {
+ "100": {
+ "$type": "color",
+ "$value": "#f6f9e6"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#eef5ce"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#e7f0bb"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#cfdb91"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#92a822"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#414d05"
+ }
+ },
+ "Grass": {
+ "100": {
+ "$type": "color",
+ "$value": "#f4faeb"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#e9f5d7"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#def0c5"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#bfd998"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#75a828"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#334d0c"
+ }
+ },
+ "Forest": {
+ "100": {
+ "$type": "color",
+ "$value": "#f1faf0"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#e2f5df"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#d7f0d3"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#a8d6a1"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#49a33b"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#1e4f16"
+ }
+ },
+ "Jade": {
+ "100": {
+ "$type": "color",
+ "$value": "#f0faf6"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#dff5eb"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#cef0e1"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#90d1b5"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#1c9963"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#075231"
+ }
+ },
+ "Aqua": {
+ "100": {
+ "$type": "color",
+ "$value": "#f0f9fa"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#dff3f5"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#ccecf0"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#83ccd4"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#008e9e"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#004e57"
+ }
+ },
+ "Azure": {
+ "100": {
+ "$type": "color",
+ "$value": "#f0f6fa"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#e1eef7"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#d3e6f5"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#88c0eb"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#0877cc"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#154469"
+ }
+ },
+ "Denim": {
+ "100": {
+ "$type": "color",
+ "$value": "#f0f3fa"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#e3ebfa"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#d7e2f7"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#9ab6ed"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#3267d1"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#223c70"
+ }
+ },
+ "Mauve": {
+ "100": {
+ "$type": "color",
+ "$value": "#f2f2fc"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#e6e6fa"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#dcdcf7"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#aeaef5"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#5555e0"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#36366b"
+ }
+ },
+ "Lavender": {
+ "100": {
+ "$type": "color",
+ "$value": "#f6f3fc"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#ebe3fa"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#e4daf7"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#c1aaf0"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#8153db"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#462f75"
+ }
+ },
+ "Lilac": {
+ "100": {
+ "$type": "color",
+ "$value": "#f7f0fa"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#f0e1f7"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#edd7f7"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#d3a9e8"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#9e4cc7"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#562d6b"
+ }
+ },
+ "Mallow": {
+ "100": {
+ "$type": "color",
+ "$value": "#faf0fa"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#f5e1f4"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#f5d7f4"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#dea4dc"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#b240af"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#632861"
+ }
+ },
+ "Camellia": {
+ "100": {
+ "$type": "color",
+ "$value": "#f9eff3"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#f7e1eb"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#f7d7e5"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#e5a3c0"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#c24279"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#6e2343"
+ }
+ },
+ "Smoke": {
+ "100": {
+ "$type": "color",
+ "$value": "#f5f5f5"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#e8e8e8"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#dedede"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#b8b8b8"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#6e6e6e"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#404040"
+ }
+ },
+ "Iron": {
+ "100": {
+ "$type": "color",
+ "$value": "#f2f4f7"
+ },
+ "200": {
+ "$type": "color",
+ "$value": "#e6e9f0"
+ },
+ "300": {
+ "$type": "color",
+ "$value": "#dadee5"
+ },
+ "400": {
+ "$type": "color",
+ "$value": "#b0b5bf"
+ },
+ "500": {
+ "$type": "color",
+ "$value": "#666f80"
+ },
+ "600": {
+ "$type": "color",
+ "$value": "#394152"
+ }
+ }
+ },
+ "Spacing": {
+ "0": {
+ "$type": "dimension",
+ "$value": "0px"
+ },
+ "100": {
+ "$type": "dimension",
+ "$value": "4px"
+ },
+ "200": {
+ "$type": "dimension",
+ "$value": "6px"
+ },
+ "300": {
+ "$type": "dimension",
+ "$value": "8px"
+ },
+ "400": {
+ "$type": "dimension",
+ "$value": "12px"
+ },
+ "500": {
+ "$type": "dimension",
+ "$value": "16px"
+ },
+ "600": {
+ "$type": "dimension",
+ "$value": "20px"
+ },
+ "1000": {
+ "$type": "dimension",
+ "$value": "1000px"
+ }
+ },
+ "Border-Radius": {
+ "0": {
+ "$type": "dimension",
+ "$value": "0px"
+ },
+ "100": {
+ "$type": "dimension",
+ "$value": "4px"
+ },
+ "200": {
+ "$type": "dimension",
+ "$value": "6px"
+ },
+ "300": {
+ "$type": "dimension",
+ "$value": "8px"
+ },
+ "400": {
+ "$type": "dimension",
+ "$value": "12px"
+ },
+ "500": {
+ "$type": "dimension",
+ "$value": "16px"
+ },
+ "600": {
+ "$type": "dimension",
+ "$value": "20px"
+ },
+ "1000": {
+ "$type": "dimension",
+ "$value": "1000px"
+ }
+ }
+}
\ No newline at end of file
diff --git a/scripts/system-token/semantic.dark.json b/scripts/system-token/semantic.dark.json
new file mode 100644
index 00000000..99d266c0
--- /dev/null
+++ b/scripts/system-token/semantic.dark.json
@@ -0,0 +1,1039 @@
+{
+ "Text": {
+ "primary": {
+ "$type": "color",
+ "$value": "{Neutral.200}"
+ },
+ "secondary": {
+ "$type": "color",
+ "$value": "{Neutral.400}"
+ },
+ "tertiary": {
+ "$type": "color",
+ "$value": "{Neutral.600}"
+ },
+ "quaternary": {
+ "$type": "color",
+ "$value": "{Neutral.1000}"
+ },
+ "inverse": {
+ "$type": "color",
+ "$value": "{Neutral.1000}"
+ },
+ "on-fill": {
+ "$type": "color",
+ "$value": "{Neutral.white}"
+ },
+ "theme": {
+ "$type": "color",
+ "$value": "{Blue.500}"
+ },
+ "theme-hover": {
+ "$type": "color",
+ "$value": "{Blue.600}"
+ },
+ "action": {
+ "$type": "color",
+ "$value": "{Blue.500}"
+ },
+ "action-hover": {
+ "$type": "color",
+ "$value": "{Blue.600}"
+ },
+ "info": {
+ "$type": "color",
+ "$value": "{Blue.500}"
+ },
+ "info-hover": {
+ "$type": "color",
+ "$value": "{Blue.600}"
+ },
+ "success": {
+ "$type": "color",
+ "$value": "{Green.600}"
+ },
+ "success-hover": {
+ "$type": "color",
+ "$value": "{Green.700}"
+ },
+ "warning": {
+ "$type": "color",
+ "$value": "{Orange.600}"
+ },
+ "warning-hover": {
+ "$type": "color",
+ "$value": "{Orange.700}"
+ },
+ "error": {
+ "$type": "color",
+ "$value": "{Red.500}"
+ },
+ "error-hover": {
+ "$type": "color",
+ "$value": "{Red.400}"
+ },
+ "purple": {
+ "$type": "color",
+ "$value": "{Purple.500}"
+ },
+ "purple-hover": {
+ "$type": "color",
+ "$value": "{Purple.600}"
+ }
+ },
+ "Icon": {
+ "primary": {
+ "$type": "color",
+ "$value": "{Neutral.200}"
+ },
+ "secondary": {
+ "$type": "color",
+ "$value": "{Neutral.400}"
+ },
+ "tertiary": {
+ "$type": "color",
+ "$value": "{Neutral.600}"
+ },
+ "quaternary": {
+ "$type": "color",
+ "$value": "{Neutral.1000}"
+ },
+ "white": {
+ "$type": "color",
+ "$value": "{Neutral.white}"
+ },
+ "purple-thick": {
+ "$type": "color",
+ "$value": "#ffffff"
+ },
+ "purple-thick-hover": {
+ "$type": "color",
+ "$value": "#ffffff"
+ }
+ },
+ "Border": {
+ "grey-primary": {
+ "$type": "color",
+ "$value": "{Neutral.100}"
+ },
+ "grey-primary-hover": {
+ "$type": "color",
+ "$value": "{Neutral.200}"
+ },
+ "grey-secondary": {
+ "$type": "color",
+ "$value": "{Neutral.300}"
+ },
+ "grey-secondary-hover": {
+ "$type": "color",
+ "$value": "{Neutral.400}"
+ },
+ "grey-tertiary": {
+ "$type": "color",
+ "$value": "{Neutral.800}"
+ },
+ "grey-tertiary-hover": {
+ "$type": "color",
+ "$value": "{Neutral.700}"
+ },
+ "grey-quaternary": {
+ "$type": "color",
+ "$value": "{Neutral.1000}"
+ },
+ "grey-quaternary-hover": {
+ "$type": "color",
+ "$value": "{Neutral.900}"
+ },
+ "transparent": {
+ "$type": "color",
+ "$value": "{Neutral.alpha-white-0}"
+ },
+ "theme-thick": {
+ "$type": "color",
+ "$value": "{Blue.500}"
+ },
+ "theme-thick-hover": {
+ "$type": "color",
+ "$value": "{Blue.600}"
+ },
+ "info-thick": {
+ "$type": "color",
+ "$value": "{Blue.500}"
+ },
+ "info-thick-hover": {
+ "$type": "color",
+ "$value": "{Blue.600}"
+ },
+ "success-thick": {
+ "$type": "color",
+ "$value": "{Green.600}"
+ },
+ "success-thick-hover": {
+ "$type": "color",
+ "$value": "{Green.700}"
+ },
+ "warning-thick": {
+ "$type": "color",
+ "$value": "{Orange.600}"
+ },
+ "warning-thick-hover": {
+ "$type": "color",
+ "$value": "{Orange.700}"
+ },
+ "error-thick": {
+ "$type": "color",
+ "$value": "{Red.500}"
+ },
+ "error-thick-hover": {
+ "$type": "color",
+ "$value": "{Red.400}"
+ },
+ "purple-thick": {
+ "$type": "color",
+ "$value": "{Purple.500}"
+ },
+ "purple-thick-hover": {
+ "$type": "color",
+ "$value": "{Purple.600}"
+ }
+ },
+ "Fill": {
+ "primary": {
+ "$type": "color",
+ "$value": "{Neutral.100}"
+ },
+ "primary-hover": {
+ "$type": "color",
+ "$value": "{Neutral.200}"
+ },
+ "secondary": {
+ "$type": "color",
+ "$value": "{Neutral.300}"
+ },
+ "secondary-hover": {
+ "$type": "color",
+ "$value": "{Neutral.400}"
+ },
+ "tertiary": {
+ "$type": "color",
+ "$value": "{Neutral.600}"
+ },
+ "tertiary-hover": {
+ "$type": "color",
+ "$value": "{Neutral.500}"
+ },
+ "quaternary": {
+ "$type": "color",
+ "$value": "{Neutral.1000}"
+ },
+ "quaternary-hover": {
+ "$type": "color",
+ "$value": "{Neutral.900}"
+ },
+ "transparent": {
+ "$type": "color",
+ "$value": "{Neutral.alpha-white-0}"
+ },
+ "primary-alpha-5": {
+ "$type": "color",
+ "$value": "{Neutral.alpha-grey-100-05}",
+ "$description": "Used for hover state, eg. button, navigation item, menu item and grid item."
+ },
+ "primary-alpha-5-hover": {
+ "$type": "color",
+ "$value": "{Neutral.alpha-grey-100-10}"
+ },
+ "primary-alpha-80": {
+ "$type": "color",
+ "$value": "{Neutral.alpha-grey-1000-80}"
+ },
+ "primary-alpha-80-hover": {
+ "$type": "color",
+ "$value": "{Neutral.alpha-grey-1000-70}"
+ },
+ "white": {
+ "$type": "color",
+ "$value": "{Neutral.white}"
+ },
+ "white-alpha": {
+ "$type": "color",
+ "$value": "{Neutral.alpha-white-20}"
+ },
+ "white-alpha-hover": {
+ "$type": "color",
+ "$value": "{Neutral.alpha-white-30}"
+ },
+ "black": {
+ "$type": "color",
+ "$value": "{Neutral.black}"
+ },
+ "theme-light": {
+ "$type": "color",
+ "$value": "{Blue.100}"
+ },
+ "theme-light-hover": {
+ "$type": "color",
+ "$value": "{Blue.200}"
+ },
+ "theme-thick": {
+ "$type": "color",
+ "$value": "{Blue.500}"
+ },
+ "theme-thick-hover": {
+ "$type": "color",
+ "$value": "{Blue.400}"
+ },
+ "theme-select": {
+ "$type": "color",
+ "$value": "{Blue.alpha-blue-500-15}"
+ },
+ "info-light": {
+ "$type": "color",
+ "$value": "{Blue.100}"
+ },
+ "info-light-hover": {
+ "$type": "color",
+ "$value": "{Blue.200}"
+ },
+ "info-thick": {
+ "$type": "color",
+ "$value": "{Blue.500}"
+ },
+ "info-thick-hover": {
+ "$type": "color",
+ "$value": "{Blue.600}"
+ },
+ "success-light": {
+ "$type": "color",
+ "$value": "{Green.100}"
+ },
+ "success-light-hover": {
+ "$type": "color",
+ "$value": "{Green.200}"
+ },
+ "success-thick": {
+ "$type": "color",
+ "$value": "{Green.600}"
+ },
+ "success-thick-hover": {
+ "$type": "color",
+ "$value": "{Green.700}"
+ },
+ "warning-light": {
+ "$type": "color",
+ "$value": "{Orange.100}"
+ },
+ "warning-light-hover": {
+ "$type": "color",
+ "$value": "{Orange.200}"
+ },
+ "warning-thick": {
+ "$type": "color",
+ "$value": "{Orange.600}"
+ },
+ "warning-thick-hover": {
+ "$type": "color",
+ "$value": "{Orange.700}"
+ },
+ "error-light": {
+ "$type": "color",
+ "$value": "{Red.100}"
+ },
+ "error-light-hover": {
+ "$type": "color",
+ "$value": "{Red.200}"
+ },
+ "error-thick": {
+ "$type": "color",
+ "$value": "{Red.600}"
+ },
+ "error-thick-hover": {
+ "$type": "color",
+ "$value": "{Red.500}"
+ },
+ "error-select": {
+ "$type": "color",
+ "$value": "{Red.alpha-red-500-10}"
+ },
+ "purple-light": {
+ "$type": "color",
+ "$value": "{Purple.100}"
+ },
+ "purple-light-hover": {
+ "$type": "color",
+ "$value": "{Purple.200}"
+ },
+ "purple-thick-hover": {
+ "$type": "color",
+ "$value": "{Purple.600}"
+ },
+ "purple-thick": {
+ "$type": "color",
+ "$value": "{Purple.500}"
+ }
+ },
+ "Surface": {
+ "primary": {
+ "$type": "color",
+ "$value": "{Neutral.900}"
+ },
+ "overlay": {
+ "$type": "color",
+ "$value": "{Neutral.alpha-black-60}"
+ }
+ },
+ "Background": {
+ "primary": {
+ "$type": "color",
+ "$value": "{Neutral.1000}"
+ },
+ "secondary": {
+ "$type": "color",
+ "$value": "{Neutral.900}"
+ },
+ "tertiary": {
+ "$type": "color",
+ "$value": "{Neutral.800}"
+ },
+ "quaternary": {
+ "$type": "color",
+ "$value": "{Neutral.700}"
+ }
+ },
+ "Badge_Color": {
+ "Rose": {
+ "rose-light-1": {
+ "$type": "color",
+ "$value": "#fcf2f2"
+ },
+ "rose-light-2": {
+ "$type": "color",
+ "$value": "#fae3e3"
+ },
+ "rose-light-3": {
+ "$type": "color",
+ "$value": "#fad9d9"
+ },
+ "rose-thick-1": {
+ "$type": "color",
+ "$value": "#edadad"
+ },
+ "rose-thick-2": {
+ "$type": "color",
+ "$value": "#cc4e4e"
+ },
+ "rose-thick-3": {
+ "$type": "color",
+ "$value": "#702828"
+ }
+ },
+ "Papaya": {
+ "papaya-light-1": {
+ "$type": "color",
+ "$value": "#fcf4f0"
+ },
+ "papaya-light-2": {
+ "$type": "color",
+ "$value": "#fae8de"
+ },
+ "papaya-light-3": {
+ "$type": "color",
+ "$value": "#fadfd2"
+ },
+ "papaya-thick-1": {
+ "$type": "color",
+ "$value": "#f0bda3"
+ },
+ "papaya-thick-2": {
+ "$type": "color",
+ "$value": "#d67240"
+ },
+ "papaya-thick-3": {
+ "$type": "color",
+ "$value": "#6b3215"
+ }
+ },
+ "Tangerine": {
+ "tangerine-light-1": {
+ "$type": "color",
+ "$value": "#fff7ed"
+ },
+ "tangerine-light-2": {
+ "$type": "color",
+ "$value": "#fcedd9"
+ },
+ "tangerine-light-3": {
+ "$type": "color",
+ "$value": "#fae5ca"
+ },
+ "tangerine-thick-1": {
+ "$type": "color",
+ "$value": "#f2cb99"
+ },
+ "tangerine-thick-2": {
+ "$type": "color",
+ "$value": "#db8f2c"
+ },
+ "tangerine-thick-3": {
+ "$type": "color",
+ "$value": "#613b0a"
+ }
+ },
+ "Mango": {
+ "mango-light-1": {
+ "$type": "color",
+ "$value": "#fff9ec"
+ },
+ "mango-light-2": {
+ "$type": "color",
+ "$value": "#fcf1d7"
+ },
+ "mango-light-3": {
+ "$type": "color",
+ "$value": "#fae9c3"
+ },
+ "mango-thick-1": {
+ "$type": "color",
+ "$value": "#f5d68e"
+ },
+ "mango-thick-2": {
+ "$type": "color",
+ "$value": "#e0a416"
+ },
+ "mango-thick-3": {
+ "$type": "color",
+ "$value": "#5c4102"
+ }
+ },
+ "Lemon": {
+ "lemon-light-1": {
+ "$type": "color",
+ "$value": "#fffbe8"
+ },
+ "lemon-light-2": {
+ "$type": "color",
+ "$value": "#fcf5cf"
+ },
+ "lemon-light-3": {
+ "$type": "color",
+ "$value": "#faefb9"
+ },
+ "lemon-thick-1": {
+ "$type": "color",
+ "$value": "#f5e282"
+ },
+ "lemon-thick-2": {
+ "$type": "color",
+ "$value": "#e0bb00"
+ },
+ "lemon-thick-3": {
+ "$type": "color",
+ "$value": "#574800"
+ }
+ },
+ "Olive": {
+ "olive-light-1": {
+ "$type": "color",
+ "$value": "#f9fae6"
+ },
+ "olive-light-2": {
+ "$type": "color",
+ "$value": "#f6f7d0"
+ },
+ "olive-light-3": {
+ "$type": "color",
+ "$value": "#f0f2b3"
+ },
+ "olive-thick-1": {
+ "$type": "color",
+ "$value": "#dbde83"
+ },
+ "olive-thick-2": {
+ "$type": "color",
+ "$value": "#adb204"
+ },
+ "olive-thick-3": {
+ "$type": "color",
+ "$value": "#4a4c03"
+ }
+ },
+ "Lime": {
+ "lime-light-1": {
+ "$type": "color",
+ "$value": "#f6f9e6"
+ },
+ "lime-light-2": {
+ "$type": "color",
+ "$value": "#eef5ce"
+ },
+ "lime-light-3": {
+ "$type": "color",
+ "$value": "#e7f0bb"
+ },
+ "lime-thick-1": {
+ "$type": "color",
+ "$value": "#cfdb91"
+ },
+ "lime-thick-2": {
+ "$type": "color",
+ "$value": "#92a822"
+ },
+ "lime-thick-3": {
+ "$type": "color",
+ "$value": "#414d05"
+ }
+ },
+ "Grass": {
+ "grass-light-1": {
+ "$type": "color",
+ "$value": "#f4faeb"
+ },
+ "grass-light-2": {
+ "$type": "color",
+ "$value": "#e9f5d7"
+ },
+ "grass-light-3": {
+ "$type": "color",
+ "$value": "#def0c5"
+ },
+ "grass-thick-1": {
+ "$type": "color",
+ "$value": "#bfd998"
+ },
+ "grass-thick-2": {
+ "$type": "color",
+ "$value": "#75a828"
+ },
+ "grass-thick-3": {
+ "$type": "color",
+ "$value": "#334d0c"
+ }
+ },
+ "Forest": {
+ "forest-light-1": {
+ "$type": "color",
+ "$value": "#f1faf0"
+ },
+ "forest-light-2": {
+ "$type": "color",
+ "$value": "#e2f5df"
+ },
+ "forest-light-3": {
+ "$type": "color",
+ "$value": "#d7f0d3"
+ },
+ "forest-thick-1": {
+ "$type": "color",
+ "$value": "#a8d6a1"
+ },
+ "forest-thick-2": {
+ "$type": "color",
+ "$value": "#49a33b"
+ },
+ "forest-thick-3": {
+ "$type": "color",
+ "$value": "#1e4f16"
+ }
+ },
+ "Jade": {
+ "jade-light-1": {
+ "$type": "color",
+ "$value": "#f0faf6"
+ },
+ "jade-light-2": {
+ "$type": "color",
+ "$value": "#dff5eb"
+ },
+ "jade-light-3": {
+ "$type": "color",
+ "$value": "#cef0e1"
+ },
+ "jade-thick-1": {
+ "$type": "color",
+ "$value": "#90d1b5"
+ },
+ "jade-thick-2": {
+ "$type": "color",
+ "$value": "#1c9963"
+ },
+ "jade-thick-3": {
+ "$type": "color",
+ "$value": "#075231"
+ }
+ },
+ "Aqua": {
+ "aqua-light-1": {
+ "$type": "color",
+ "$value": "#f0f9fa"
+ },
+ "aqua-light-2": {
+ "$type": "color",
+ "$value": "#dff3f5"
+ },
+ "aqua-light-3": {
+ "$type": "color",
+ "$value": "#ccecf0"
+ },
+ "aqua-thick-1": {
+ "$type": "color",
+ "$value": "#83ccd4"
+ },
+ "aqua-thick-2": {
+ "$type": "color",
+ "$value": "#008e9e"
+ },
+ "aqua-thick-3": {
+ "$type": "color",
+ "$value": "#004e57"
+ }
+ },
+ "Azure": {
+ "azure-light-1": {
+ "$type": "color",
+ "$value": "#f0f6fa"
+ },
+ "azure-light-2": {
+ "$type": "color",
+ "$value": "#e1eef7"
+ },
+ "azure-light-3": {
+ "$type": "color",
+ "$value": "#d3e6f5"
+ },
+ "azure-thick-1": {
+ "$type": "color",
+ "$value": "#88c0eb"
+ },
+ "azure-thick-2": {
+ "$type": "color",
+ "$value": "#0877cc"
+ },
+ "azure-thick-3": {
+ "$type": "color",
+ "$value": "#154469"
+ }
+ },
+ "Denim": {
+ "denim-light-1": {
+ "$type": "color",
+ "$value": "#f0f3fa"
+ },
+ "denim-light-2": {
+ "$type": "color",
+ "$value": "#e3ebfa"
+ },
+ "denim-light-3": {
+ "$type": "color",
+ "$value": "#d7e2f7"
+ },
+ "denim-thick-1": {
+ "$type": "color",
+ "$value": "#9ab6ed"
+ },
+ "denim-thick-2": {
+ "$type": "color",
+ "$value": "#3267d1"
+ },
+ "denim-thick-3": {
+ "$type": "color",
+ "$value": "#223c70"
+ }
+ },
+ "Mauve": {
+ "mauve-light-1": {
+ "$type": "color",
+ "$value": "#f2f2fc"
+ },
+ "mauve-thick-2": {
+ "$type": "color",
+ "$value": "#5555e0"
+ },
+ "mauve-thick-3": {
+ "$type": "color",
+ "$value": "#36366b"
+ },
+ "mauve-thick-1": {
+ "$type": "color",
+ "$value": "#aeaef5"
+ }
+ },
+ "Lavender": {
+ "lavender-light-1": {
+ "$type": "color",
+ "$value": "#f6f3fc"
+ },
+ "lavender-light-2": {
+ "$type": "color",
+ "$value": "#ebe3fa"
+ },
+ "lavender-light-3": {
+ "$type": "color",
+ "$value": "#e4daf7"
+ },
+ "lavender-thick-1": {
+ "$type": "color",
+ "$value": "#c1aaf0"
+ },
+ "lavender-thick-2": {
+ "$type": "color",
+ "$value": "#8153db"
+ },
+ "lavender-thick-3": {
+ "$type": "color",
+ "$value": "#462f75"
+ }
+ },
+ "Lilac": {
+ "liliac-light-1": {
+ "$type": "color",
+ "$value": "#f7f0fa"
+ },
+ "liliac-light-2": {
+ "$type": "color",
+ "$value": "#f0e1f7"
+ },
+ "liliac-light-3": {
+ "$type": "color",
+ "$value": "#edd7f7"
+ },
+ "liliac-thick-1": {
+ "$type": "color",
+ "$value": "#d3a9e8"
+ },
+ "liliac-thick-2": {
+ "$type": "color",
+ "$value": "#9e4cc7"
+ },
+ "liliac-thick-3": {
+ "$type": "color",
+ "$value": "#562d6b"
+ }
+ },
+ "Mallow": {
+ "mallow-light-1": {
+ "$type": "color",
+ "$value": "#faf0fa"
+ },
+ "mallow-light-2": {
+ "$type": "color",
+ "$value": "#f5e1f4"
+ },
+ "mallow-light-3": {
+ "$type": "color",
+ "$value": "#f5d7f4"
+ },
+ "mallow-thick-1": {
+ "$type": "color",
+ "$value": "#dea4dc"
+ },
+ "mallow-thick-2": {
+ "$type": "color",
+ "$value": "#b240af"
+ },
+ "mallow-thick-3": {
+ "$type": "color",
+ "$value": "#632861"
+ }
+ },
+ "Camellia": {
+ "camellia-light-1": {
+ "$type": "color",
+ "$value": "#f9eff3"
+ },
+ "camellia-light-2": {
+ "$type": "color",
+ "$value": "#f7e1eb"
+ },
+ "camellia-light-3": {
+ "$type": "color",
+ "$value": "#f7d7e5"
+ },
+ "camellia-thick-1": {
+ "$type": "color",
+ "$value": "#e5a3c0"
+ },
+ "camellia-thick-2": {
+ "$type": "color",
+ "$value": "#c24279"
+ },
+ "camellia-thick-3": {
+ "$type": "color",
+ "$value": "#6e2343"
+ }
+ },
+ "Smoke": {
+ "smoke-light-1": {
+ "$type": "color",
+ "$value": "#f5f5f5"
+ },
+ "smoke-light-2": {
+ "$type": "color",
+ "$value": "#e8e8e8"
+ },
+ "smoke-light-3": {
+ "$type": "color",
+ "$value": "#dedede"
+ },
+ "smoke-thick-1": {
+ "$type": "color",
+ "$value": "#b8b8b8"
+ },
+ "smoke-thick-2": {
+ "$type": "color",
+ "$value": "#6e6e6e"
+ },
+ "smoke-thick-3": {
+ "$type": "color",
+ "$value": "#404040"
+ }
+ },
+ "Iron": {
+ "icon-light-1": {
+ "$type": "color",
+ "$value": "#f2f4f7"
+ },
+ "icon-light-2": {
+ "$type": "color",
+ "$value": "#e6e9f0"
+ },
+ "icon-light-3": {
+ "$type": "color",
+ "$value": "#dadee5"
+ },
+ "icon-thick-1": {
+ "$type": "color",
+ "$value": "#b0b5bf"
+ },
+ "icon-thick-2": {
+ "$type": "color",
+ "$value": "#666f80"
+ },
+ "icon-thick-3": {
+ "$type": "color",
+ "$value": "#394152"
+ }
+ }
+ },
+ "Shadow": {
+ "sm": {
+ "$type": "dimension",
+ "$value": "0px"
+ },
+ "md": {
+ "$type": "dimension",
+ "$value": "0px"
+ }
+ },
+ "Brand": {
+ "Skyline": {
+ "$type": "color",
+ "$value": "#00b5ff"
+ },
+ "Aqua": {
+ "$type": "color",
+ "$value": "#00c8ff"
+ },
+ "Violet": {
+ "$type": "color",
+ "$value": "#9327ff"
+ },
+ "Amethyst": {
+ "$type": "color",
+ "$value": "#8427e0"
+ },
+ "Berry": {
+ "$type": "color",
+ "$value": "#e3006d"
+ },
+ "Coral": {
+ "$type": "color",
+ "$value": "#fb006d"
+ },
+ "Golden": {
+ "$type": "color",
+ "$value": "#f7931e"
+ },
+ "Amber": {
+ "$type": "color",
+ "$value": "#ffbd00"
+ },
+ "Lemon": {
+ "$type": "color",
+ "$value": "#ffce00"
+ }
+ },
+ "Other_Colors": {
+ "text-highlight": {
+ "$type": "color",
+ "$value": "{Blue.200}"
+ }
+ },
+ "Spacing": {
+ "spacing-0": {
+ "$type": "dimension",
+ "$value": "{Spacing.0}"
+ },
+ "spacing-xs": {
+ "$type": "dimension",
+ "$value": "{Spacing.100}"
+ },
+ "spacing-s": {
+ "$type": "dimension",
+ "$value": "{Spacing.200}"
+ },
+ "spacing-m": {
+ "$type": "dimension",
+ "$value": "{Spacing.300}"
+ },
+ "spacing-l": {
+ "$type": "dimension",
+ "$value": "{Spacing.400}"
+ },
+ "spacing-xl": {
+ "$type": "dimension",
+ "$value": "{Spacing.500}"
+ },
+ "spacing-xxl": {
+ "$type": "dimension",
+ "$value": "{Spacing.600}"
+ },
+ "spacing-full": {
+ "$type": "dimension",
+ "$value": "{Spacing.1000}"
+ }
+ },
+ "Border_Radius": {
+ "border-radius-0": {
+ "$type": "dimension",
+ "$value": "{Border-Radius.0}"
+ },
+ "border-radius-xs": {
+ "$type": "dimension",
+ "$value": "{Border-Radius.100}"
+ },
+ "border-radius-s": {
+ "$type": "dimension",
+ "$value": "{Border-Radius.200}"
+ },
+ "border-radius-m": {
+ "$type": "dimension",
+ "$value": "{Border-Radius.300}"
+ },
+ "border-radius-l": {
+ "$type": "dimension",
+ "$value": "{Border-Radius.400}"
+ },
+ "border-radius-xl": {
+ "$type": "dimension",
+ "$value": "{Border-Radius.500}"
+ },
+ "border-radius-xxl": {
+ "$type": "dimension",
+ "$value": "{Border-Radius.600}"
+ },
+ "border-radius-full": {
+ "$type": "dimension",
+ "$value": "{Border-Radius.1000}"
+ }
+ }
+}
\ No newline at end of file
diff --git a/scripts/system-token/semantic.light.json b/scripts/system-token/semantic.light.json
new file mode 100644
index 00000000..4e6b0543
--- /dev/null
+++ b/scripts/system-token/semantic.light.json
@@ -0,0 +1,1039 @@
+{
+ "Text": {
+ "primary": {
+ "$type": "color",
+ "$value": "{Neutral.1000}"
+ },
+ "secondary": {
+ "$type": "color",
+ "$value": "{Neutral.600}"
+ },
+ "tertiary": {
+ "$type": "color",
+ "$value": "{Neutral.400}"
+ },
+ "quaternary": {
+ "$type": "color",
+ "$value": "{Neutral.200}"
+ },
+ "inverse": {
+ "$type": "color",
+ "$value": "{Neutral.white}"
+ },
+ "on-fill": {
+ "$type": "color",
+ "$value": "{Neutral.white}"
+ },
+ "theme": {
+ "$type": "color",
+ "$value": "{Blue.500}"
+ },
+ "theme-hover": {
+ "$type": "color",
+ "$value": "{Blue.600}"
+ },
+ "action": {
+ "$type": "color",
+ "$value": "{Blue.500}"
+ },
+ "action-hover": {
+ "$type": "color",
+ "$value": "{Blue.600}"
+ },
+ "info": {
+ "$type": "color",
+ "$value": "{Blue.500}"
+ },
+ "info-hover": {
+ "$type": "color",
+ "$value": "{Blue.600}"
+ },
+ "success": {
+ "$type": "color",
+ "$value": "{Green.600}"
+ },
+ "success-hover": {
+ "$type": "color",
+ "$value": "{Green.700}"
+ },
+ "warning": {
+ "$type": "color",
+ "$value": "{Orange.600}"
+ },
+ "warning-hover": {
+ "$type": "color",
+ "$value": "{Orange.700}"
+ },
+ "error": {
+ "$type": "color",
+ "$value": "{Red.600}"
+ },
+ "error-hover": {
+ "$type": "color",
+ "$value": "{Red.700}"
+ },
+ "purple": {
+ "$type": "color",
+ "$value": "{Purple.500}"
+ },
+ "purple-hover": {
+ "$type": "color",
+ "$value": "{Purple.600}"
+ }
+ },
+ "Icon": {
+ "primary": {
+ "$type": "color",
+ "$value": "{Neutral.1000}"
+ },
+ "secondary": {
+ "$type": "color",
+ "$value": "{Neutral.600}"
+ },
+ "tertiary": {
+ "$type": "color",
+ "$value": "{Neutral.400}"
+ },
+ "quaternary": {
+ "$type": "color",
+ "$value": "{Neutral.200}"
+ },
+ "white": {
+ "$type": "color",
+ "$value": "{Neutral.white}"
+ },
+ "purple-thick": {
+ "$type": "color",
+ "$value": "{Purple.500}"
+ },
+ "purple-thick-hover": {
+ "$type": "color",
+ "$value": "{Purple.600}"
+ }
+ },
+ "Border": {
+ "grey-primary": {
+ "$type": "color",
+ "$value": "{Neutral.1000}"
+ },
+ "grey-primary-hover": {
+ "$type": "color",
+ "$value": "{Neutral.900}"
+ },
+ "grey-secondary": {
+ "$type": "color",
+ "$value": "{Neutral.800}"
+ },
+ "grey-secondary-hover": {
+ "$type": "color",
+ "$value": "{Neutral.700}"
+ },
+ "grey-tertiary": {
+ "$type": "color",
+ "$value": "{Neutral.300}"
+ },
+ "grey-tertiary-hover": {
+ "$type": "color",
+ "$value": "{Neutral.400}"
+ },
+ "grey-quaternary": {
+ "$type": "color",
+ "$value": "{Neutral.100}"
+ },
+ "grey-quaternary-hover": {
+ "$type": "color",
+ "$value": "{Neutral.200}"
+ },
+ "transparent": {
+ "$type": "color",
+ "$value": "{Neutral.alpha-white-0}"
+ },
+ "theme-thick": {
+ "$type": "color",
+ "$value": "{Blue.500}"
+ },
+ "theme-thick-hover": {
+ "$type": "color",
+ "$value": "{Blue.600}"
+ },
+ "info-thick": {
+ "$type": "color",
+ "$value": "{Blue.500}"
+ },
+ "info-thick-hover": {
+ "$type": "color",
+ "$value": "{Blue.600}"
+ },
+ "success-thick": {
+ "$type": "color",
+ "$value": "{Green.600}"
+ },
+ "success-thick-hover": {
+ "$type": "color",
+ "$value": "{Green.700}"
+ },
+ "warning-thick": {
+ "$type": "color",
+ "$value": "{Orange.600}"
+ },
+ "warning-thick-hover": {
+ "$type": "color",
+ "$value": "{Orange.700}"
+ },
+ "error-thick": {
+ "$type": "color",
+ "$value": "{Red.600}"
+ },
+ "error-thick-hover": {
+ "$type": "color",
+ "$value": "{Red.700}"
+ },
+ "purple-thick": {
+ "$type": "color",
+ "$value": "{Purple.500}"
+ },
+ "purple-thick-hover": {
+ "$type": "color",
+ "$value": "{Purple.600}"
+ }
+ },
+ "Fill": {
+ "primary": {
+ "$type": "color",
+ "$value": "{Neutral.1000}"
+ },
+ "primary-hover": {
+ "$type": "color",
+ "$value": "{Neutral.900}"
+ },
+ "secondary": {
+ "$type": "color",
+ "$value": "{Neutral.600}"
+ },
+ "secondary-hover": {
+ "$type": "color",
+ "$value": "{Neutral.500}"
+ },
+ "tertiary": {
+ "$type": "color",
+ "$value": "{Neutral.300}"
+ },
+ "tertiary-hover": {
+ "$type": "color",
+ "$value": "{Neutral.400}"
+ },
+ "quaternary": {
+ "$type": "color",
+ "$value": "{Neutral.100}"
+ },
+ "quaternary-hover": {
+ "$type": "color",
+ "$value": "{Neutral.200}"
+ },
+ "transparent": {
+ "$type": "color",
+ "$value": "{Neutral.alpha-white-0}"
+ },
+ "primary-alpha-5": {
+ "$type": "color",
+ "$value": "{Neutral.alpha-grey-1000-05}",
+ "$description": "Used for hover state, eg. button, navigation item, menu item and grid item."
+ },
+ "primary-alpha-5-hover": {
+ "$type": "color",
+ "$value": "{Neutral.alpha-grey-1000-10}"
+ },
+ "primary-alpha-80": {
+ "$type": "color",
+ "$value": "{Neutral.alpha-grey-1000-80}"
+ },
+ "primary-alpha-80-hover": {
+ "$type": "color",
+ "$value": "{Neutral.alpha-grey-1000-70}"
+ },
+ "white": {
+ "$type": "color",
+ "$value": "{Neutral.white}"
+ },
+ "white-alpha": {
+ "$type": "color",
+ "$value": "{Neutral.alpha-white-20}"
+ },
+ "white-alpha-hover": {
+ "$type": "color",
+ "$value": "{Neutral.alpha-white-30}"
+ },
+ "black": {
+ "$type": "color",
+ "$value": "{Neutral.black}"
+ },
+ "theme-light": {
+ "$type": "color",
+ "$value": "{Blue.100}"
+ },
+ "theme-light-hover": {
+ "$type": "color",
+ "$value": "{Blue.200}"
+ },
+ "theme-thick": {
+ "$type": "color",
+ "$value": "{Blue.500}"
+ },
+ "theme-thick-hover": {
+ "$type": "color",
+ "$value": "{Blue.600}"
+ },
+ "theme-select": {
+ "$type": "color",
+ "$value": "{Blue.alpha-blue-500-15}"
+ },
+ "info-light": {
+ "$type": "color",
+ "$value": "{Blue.100}"
+ },
+ "info-light-hover": {
+ "$type": "color",
+ "$value": "{Blue.200}"
+ },
+ "info-thick": {
+ "$type": "color",
+ "$value": "{Blue.500}"
+ },
+ "info-thick-hover": {
+ "$type": "color",
+ "$value": "{Blue.600}"
+ },
+ "success-light": {
+ "$type": "color",
+ "$value": "{Green.100}"
+ },
+ "success-light-hover": {
+ "$type": "color",
+ "$value": "{Green.200}"
+ },
+ "success-thick": {
+ "$type": "color",
+ "$value": "{Green.600}"
+ },
+ "success-thick-hover": {
+ "$type": "color",
+ "$value": "{Green.700}"
+ },
+ "warning-light": {
+ "$type": "color",
+ "$value": "{Orange.100}"
+ },
+ "warning-light-hover": {
+ "$type": "color",
+ "$value": "{Orange.200}"
+ },
+ "warning-thick": {
+ "$type": "color",
+ "$value": "{Orange.600}"
+ },
+ "warning-thick-hover": {
+ "$type": "color",
+ "$value": "{Orange.700}"
+ },
+ "error-light": {
+ "$type": "color",
+ "$value": "{Red.100}"
+ },
+ "error-light-hover": {
+ "$type": "color",
+ "$value": "{Red.200}"
+ },
+ "error-thick": {
+ "$type": "color",
+ "$value": "{Red.600}"
+ },
+ "error-thick-hover": {
+ "$type": "color",
+ "$value": "{Red.700}"
+ },
+ "error-select": {
+ "$type": "color",
+ "$value": "{Red.alpha-red-500-10}"
+ },
+ "purple-light": {
+ "$type": "color",
+ "$value": "{Purple.100}"
+ },
+ "purple-light-hover": {
+ "$type": "color",
+ "$value": "{Purple.200}"
+ },
+ "purple-thick-hover": {
+ "$type": "color",
+ "$value": "{Purple.600}"
+ },
+ "purple-thick": {
+ "$type": "color",
+ "$value": "{Purple.500}"
+ }
+ },
+ "Surface": {
+ "primary": {
+ "$type": "color",
+ "$value": "{Neutral.white}"
+ },
+ "overlay": {
+ "$type": "color",
+ "$value": "{Neutral.alpha-black-60}"
+ }
+ },
+ "Background": {
+ "primary": {
+ "$type": "color",
+ "$value": "{Neutral.white}"
+ },
+ "secondary": {
+ "$type": "color",
+ "$value": "{Neutral.100}"
+ },
+ "tertiary": {
+ "$type": "color",
+ "$value": "{Neutral.200}"
+ },
+ "quaternary": {
+ "$type": "color",
+ "$value": "{Neutral.300}"
+ }
+ },
+ "Badge_Color": {
+ "Rose": {
+ "rose-light-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Rose.100}"
+ },
+ "rose-light-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Rose.200}"
+ },
+ "rose-light-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Rose.300}"
+ },
+ "rose-thick-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Rose.400}"
+ },
+ "rose-thick-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Rose.500}"
+ },
+ "rose-thick-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Rose.600}"
+ }
+ },
+ "Papaya": {
+ "papaya-light-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Papaya.100}"
+ },
+ "papaya-light-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Papaya.200}"
+ },
+ "papaya-light-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Papaya.300}"
+ },
+ "papaya-thick-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Papaya.400}"
+ },
+ "papaya-thick-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Papaya.500}"
+ },
+ "papaya-thick-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Papaya.600}"
+ }
+ },
+ "Tangerine": {
+ "tangerine-light-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Tangerine.100}"
+ },
+ "tangerine-light-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Tangerine.200}"
+ },
+ "tangerine-light-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Tangerine.300}"
+ },
+ "tangerine-thick-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Tangerine.400}"
+ },
+ "tangerine-thick-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Tangerine.500}"
+ },
+ "tangerine-thick-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Tangerine.600}"
+ }
+ },
+ "Mango": {
+ "mango-light-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Mango.100}"
+ },
+ "mango-light-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Mango.200}"
+ },
+ "mango-light-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Mango.300}"
+ },
+ "mango-thick-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Mango.400}"
+ },
+ "mango-thick-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Mango.500}"
+ },
+ "mango-thick-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Mango.600}"
+ }
+ },
+ "Lemon": {
+ "lemon-light-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Lemon.100}"
+ },
+ "lemon-light-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Lemon.200}"
+ },
+ "lemon-light-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Lemon.300}"
+ },
+ "lemon-thick-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Lemon.400}"
+ },
+ "lemon-thick-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Lemon.500}"
+ },
+ "lemon-thick-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Lemon.600}"
+ }
+ },
+ "Olive": {
+ "olive-light-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Olive.100}"
+ },
+ "olive-light-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Olive.200}"
+ },
+ "olive-light-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Olive.300}"
+ },
+ "olive-thick-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Olive.400}"
+ },
+ "olive-thick-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Olive.500}"
+ },
+ "olive-thick-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Olive.600}"
+ }
+ },
+ "Lime": {
+ "lime-light-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Lime.100}"
+ },
+ "lime-light-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Lime.200}"
+ },
+ "lime-light-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Lime.300}"
+ },
+ "lime-thick-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Lime.400}"
+ },
+ "lime-thick-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Lime.500}"
+ },
+ "lime-thick-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Lime.600}"
+ }
+ },
+ "Grass": {
+ "grass-light-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Grass.100}"
+ },
+ "grass-light-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Grass.200}"
+ },
+ "grass-light-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Grass.300}"
+ },
+ "grass-thick-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Grass.400}"
+ },
+ "grass-thick-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Grass.500}"
+ },
+ "grass-thick-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Grass.600}"
+ }
+ },
+ "Forest": {
+ "forest-light-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Forest.100}"
+ },
+ "forest-light-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Forest.200}"
+ },
+ "forest-light-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Forest.300}"
+ },
+ "forest-thick-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Forest.400}"
+ },
+ "forest-thick-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Forest.500}"
+ },
+ "forest-thick-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Forest.600}"
+ }
+ },
+ "Jade": {
+ "jade-light-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Jade.100}"
+ },
+ "jade-light-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Jade.200}"
+ },
+ "jade-light-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Jade.300}"
+ },
+ "jade-thick-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Jade.400}"
+ },
+ "jade-thick-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Jade.500}"
+ },
+ "jade-thick-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Jade.600}"
+ }
+ },
+ "Aqua": {
+ "aqua-light-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Aqua.100}"
+ },
+ "aqua-light-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Aqua.200}"
+ },
+ "aqua-light-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Aqua.300}"
+ },
+ "aqua-thick-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Aqua.400}"
+ },
+ "aqua-thick-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Aqua.500}"
+ },
+ "aqua-thick-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Aqua.600}"
+ }
+ },
+ "Azure": {
+ "azure-light-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Azure.100}"
+ },
+ "azure-light-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Azure.200}"
+ },
+ "azure-light-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Azure.300}"
+ },
+ "azure-thick-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Azure.400}"
+ },
+ "azure-thick-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Azure.500}"
+ },
+ "azure-thick-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Azure.600}"
+ }
+ },
+ "Denim": {
+ "denim-light-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Denim.100}"
+ },
+ "denim-light-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Denim.200}"
+ },
+ "denim-light-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Denim.300}"
+ },
+ "denim-thick-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Denim.400}"
+ },
+ "denim-thick-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Denim.500}"
+ },
+ "denim-thick-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Denim.600}"
+ }
+ },
+ "Mauve": {
+ "mauve-light-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Mauve.100}"
+ },
+ "mauve-thick-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Mauve.500}"
+ },
+ "mauve-thick-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Mauve.600}"
+ },
+ "mauve-thick-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Mauve.400}"
+ }
+ },
+ "Lavender": {
+ "lavender-light-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Lavender.100}"
+ },
+ "lavender-light-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Lavender.200}"
+ },
+ "lavender-light-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Lavender.300}"
+ },
+ "lavender-thick-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Lavender.400}"
+ },
+ "lavender-thick-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Lavender.500}"
+ },
+ "lavender-thick-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Lavender.600}"
+ }
+ },
+ "Lilac": {
+ "liliac-light-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Lilac.100}"
+ },
+ "liliac-light-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Lilac.200}"
+ },
+ "liliac-light-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Lilac.300}"
+ },
+ "liliac-thick-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Lilac.400}"
+ },
+ "liliac-thick-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Lilac.500}"
+ },
+ "liliac-thick-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Lilac.600}"
+ }
+ },
+ "Mallow": {
+ "mallow-light-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Mallow.100}"
+ },
+ "mallow-light-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Mallow.200}"
+ },
+ "mallow-light-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Mallow.300}"
+ },
+ "mallow-thick-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Mallow.400}"
+ },
+ "mallow-thick-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Mallow.500}"
+ },
+ "mallow-thick-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Mallow.600}"
+ }
+ },
+ "Camellia": {
+ "camellia-light-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Camellia.100}"
+ },
+ "camellia-light-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Camellia.200}"
+ },
+ "camellia-light-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Camellia.300}"
+ },
+ "camellia-thick-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Camellia.400}"
+ },
+ "camellia-thick-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Camellia.500}"
+ },
+ "camellia-thick-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Camellia.600}"
+ }
+ },
+ "Smoke": {
+ "smoke-light-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Smoke.100}"
+ },
+ "smoke-light-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Smoke.200}"
+ },
+ "smoke-light-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Smoke.300}"
+ },
+ "smoke-thick-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Smoke.400}"
+ },
+ "smoke-thick-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Smoke.500}"
+ },
+ "smoke-thick-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Smoke.600}"
+ }
+ },
+ "Iron": {
+ "icon-light-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Iron.100}"
+ },
+ "icon-light-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Iron.200}"
+ },
+ "icon-light-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Iron.300}"
+ },
+ "icon-thick-1": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Iron.400}"
+ },
+ "icon-thick-2": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Iron.500}"
+ },
+ "icon-thick-3": {
+ "$type": "color",
+ "$value": "{Subtle_Color.Iron.600}"
+ }
+ }
+ },
+ "Shadow": {
+ "sm": {
+ "$type": "dimension",
+ "$value": "0px"
+ },
+ "md": {
+ "$type": "dimension",
+ "$value": "0px"
+ }
+ },
+ "Brand": {
+ "Skyline": {
+ "$type": "color",
+ "$value": "#00b5ff"
+ },
+ "Aqua": {
+ "$type": "color",
+ "$value": "#00c8ff"
+ },
+ "Violet": {
+ "$type": "color",
+ "$value": "#9327ff"
+ },
+ "Amethyst": {
+ "$type": "color",
+ "$value": "#8427e0"
+ },
+ "Berry": {
+ "$type": "color",
+ "$value": "#e3006d"
+ },
+ "Coral": {
+ "$type": "color",
+ "$value": "#fb006d"
+ },
+ "Golden": {
+ "$type": "color",
+ "$value": "#f7931e"
+ },
+ "Amber": {
+ "$type": "color",
+ "$value": "#ffbd00"
+ },
+ "Lemon": {
+ "$type": "color",
+ "$value": "#ffce00"
+ }
+ },
+ "Other_Colors": {
+ "text-highlight": {
+ "$type": "color",
+ "$value": "{Blue.200}"
+ }
+ },
+ "Spacing": {
+ "spacing-0": {
+ "$type": "dimension",
+ "$value": "{Spacing.0}"
+ },
+ "spacing-xs": {
+ "$type": "dimension",
+ "$value": "{Spacing.100}"
+ },
+ "spacing-s": {
+ "$type": "dimension",
+ "$value": "{Spacing.200}"
+ },
+ "spacing-m": {
+ "$type": "dimension",
+ "$value": "{Spacing.300}"
+ },
+ "spacing-l": {
+ "$type": "dimension",
+ "$value": "{Spacing.400}"
+ },
+ "spacing-xl": {
+ "$type": "dimension",
+ "$value": "{Spacing.500}"
+ },
+ "spacing-xxl": {
+ "$type": "dimension",
+ "$value": "{Spacing.600}"
+ },
+ "spacing-full": {
+ "$type": "dimension",
+ "$value": "{Spacing.1000}"
+ }
+ },
+ "Border_Radius": {
+ "border-radius-0": {
+ "$type": "dimension",
+ "$value": "{Border-Radius.0}"
+ },
+ "border-radius-xs": {
+ "$type": "dimension",
+ "$value": "{Border-Radius.100}"
+ },
+ "border-radius-s": {
+ "$type": "dimension",
+ "$value": "{Border-Radius.200}"
+ },
+ "border-radius-m": {
+ "$type": "dimension",
+ "$value": "{Border-Radius.300}"
+ },
+ "border-radius-l": {
+ "$type": "dimension",
+ "$value": "{Border-Radius.400}"
+ },
+ "border-radius-xl": {
+ "$type": "dimension",
+ "$value": "{Border-Radius.500}"
+ },
+ "border-radius-xxl": {
+ "$type": "dimension",
+ "$value": "{Border-Radius.600}"
+ },
+ "border-radius-full": {
+ "$type": "dimension",
+ "$value": "{Border-Radius.1000}"
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/assets/toast_error.svg b/src/assets/toast_error.svg
new file mode 100644
index 00000000..b46e2463
--- /dev/null
+++ b/src/assets/toast_error.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/assets/toast_success.svg b/src/assets/toast_success.svg
new file mode 100644
index 00000000..b5d4e04e
--- /dev/null
+++ b/src/assets/toast_success.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/assets/toast_warning.svg b/src/assets/toast_warning.svg
new file mode 100644
index 00000000..8b2574da
--- /dev/null
+++ b/src/assets/toast_warning.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/components/app/header/AppHeader.tsx b/src/components/app/header/AppHeader.tsx
index 0375bd94..673a5319 100644
--- a/src/components/app/header/AppHeader.tsx
+++ b/src/components/app/header/AppHeader.tsx
@@ -52,6 +52,7 @@ export function AppHeader ({
}}
className={'appflowy-top-bar transform-gpu sticky top-0 z-10 flex px-5'}
>
+
{displayMenuButton && (
getWords(viewName || '') + (wordCount?.words || 0), [viewName, wordCount]);
const chars = useMemo(() => getCharacters(viewName || '') + (wordCount?.characters || 0), [viewName, wordCount]);
- if(!view) return null;
+ if (!view) return null;
return (
<>
@@ -67,7 +67,6 @@ function DocumentInfo({ viewId }: {
{t('moreAction.createdAtLabel')}{formatTime(view.created_at)}
}
-
);
diff --git a/src/components/app/header/MoreActionsContent.tsx b/src/components/app/header/MoreActionsContent.tsx
index ff4f5f6c..dc15d0a1 100644
--- a/src/components/app/header/MoreActionsContent.tsx
+++ b/src/components/app/header/MoreActionsContent.tsx
@@ -12,7 +12,7 @@ import { Button, CircularProgress } from '@mui/material';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
-function MoreActionsContent({ itemClicked, viewId, movePopoverOrigins, onDeleted }: {
+function MoreActionsContent ({ itemClicked, viewId, movePopoverOrigins, onDeleted }: {
itemClicked?: () => void;
onDeleted?: () => void;
viewId: string;
@@ -29,15 +29,15 @@ function MoreActionsContent({ itemClicked, viewId, movePopoverOrigins, onDeleted
const {
refreshOutline,
} = useAppHandlers();
- const handleDuplicateClick = async() => {
- if(!workspaceId || !service) return;
+ const handleDuplicateClick = async () => {
+ if (!workspaceId || !service) return;
setDuplicateLoading(true);
try {
await service.duplicateAppPage(workspaceId, viewId);
void refreshOutline?.();
// eslint-disable-next-line
- } catch(e: any) {
+ } catch (e: any) {
notify.error(e.message);
} finally {
setDuplicateLoading(false);
diff --git a/src/components/app/header/RightMenu.tsx b/src/components/app/header/RightMenu.tsx
index fc796f3c..3db14057 100644
--- a/src/components/app/header/RightMenu.tsx
+++ b/src/components/app/header/RightMenu.tsx
@@ -26,7 +26,6 @@ function RightMenu () {
-
);
}
diff --git a/src/components/main/App.tsx b/src/components/main/App.tsx
index 77764ba3..33d91567 100644
--- a/src/components/main/App.tsx
+++ b/src/components/main/App.tsx
@@ -14,6 +14,7 @@ const AfterPaymentPage = lazy(() => import('@/pages/AfterPaymentPage'));
const ImportPage = lazy(() => import('@/pages/ImportPage'));
import '@/styles/app.scss';
+import { Toaster } from '../ui/sonner';
const AppMain = withAppWrapper(() => {
return (
@@ -78,6 +79,7 @@ function App () {
return (
+
);
}
diff --git a/src/components/main/AppTheme.tsx b/src/components/main/AppTheme.tsx
index c24a5300..d65a59b7 100644
--- a/src/components/main/AppTheme.tsx
+++ b/src/components/main/AppTheme.tsx
@@ -6,8 +6,6 @@ import {
i18nInstance,
} from '@/i18n/config';
-import 'src/styles/tailwind.css';
-import 'src/styles/template.css';
import { I18nextProvider } from 'react-i18next';
function AppTheme ({ children }: { children: React.ReactNode; }) {
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
new file mode 100644
index 00000000..f18d3c21
--- /dev/null
+++ b/src/components/ui/avatar.tsx
@@ -0,0 +1,90 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+import { cn } from '@/lib/utils';
+
+const avatarVariants = cva(
+ 'relative flex aspect-square shrink-0 overflow-hidden',
+ {
+ variants: {
+ shape: {
+ circle: 'rounded-full',
+ square: 'rounded-200',
+ },
+ variant: {
+ default: 'bg-transparent',
+ outline: 'border-[1.5px] bg-transparent border-border-grey-tertiary',
+ },
+ size: {
+ sm: 'h-6 text-xs leading-[16px] text-icon-primary font-normal',
+ md: 'h-8 text-sm font-normal',
+ xl: 'h-20 text-2xl font-normal',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'md',
+ shape: 'circle',
+ },
+ },
+);
+
+function Avatar ({
+ className,
+ size,
+ variant,
+ shape = 'circle',
+ ...props
+}: React.ComponentProps & VariantProps) {
+ return (
+
+ );
+}
+
+function AvatarImage ({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
+
+function AvatarFallback ({
+ className,
+ children,
+ ...props
+}: React.ComponentProps) {
+ const isString = typeof children === 'string';
+ const char = isString ? children.charAt(0) : '';
+
+ return (
+ {!isString ? children : char}
+ );
+}
+
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 00000000..8ded3827
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+ 'inline-flex items-center justify-center gap-2 whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 [&_svg]:h-5 [&_svg]:w-5 outline-none focus-visible:border-border-theme-thick focus-visible:ring-border-theme-thick-hover focus-visible:ring-[0.5px] aria-invalid:ring-border-error-thick aria-invalid:border-border-error-thick-hover',
+ {
+ variants: {
+ variant: {
+ default:
+ 'bg-fill-theme-thick text-text-on-fill hover:bg-fill-theme-thick-hover disabled:bg-fill-primary-alpha-5 disabled:text-text-tertiary',
+ destructive:
+ 'bg-fill-error-thick text-text-on-fill hover:bg-fill-error-thick-hover focus-visible:ring-border-error-thick disabled:bg-fill-primary-alpha-5 disabled:text-text-tertiary',
+ outline:
+ 'border border-border-grey-tertiary bg-background-primary text-text-primary hover:bg-fill-primary-alpha-5 hover:border-border-grey-tertiary-hover disabled:text-text-tertiary',
+ 'destructive-outline':
+ 'bg-background-primary text-text-error hover:bg-fill-error-select hover:text-text-error-hover border border-border-error-thick hover:border-border-error-thick-hover disabled:text-text-tertiary disabled:border-border-grey-tertiary',
+ ghost:
+ 'hover:bg-fill-primary-alpha-5 text-text-primary disabled:bg-fill-transparent disabled:text-text-tertiary',
+ },
+ size: {
+ sm: 'h-7 text-sm px-4 rounded-300 gap-2 font-normal',
+ default: 'h-8 text-sm px-4 rounded-300 gap-2 font-normal',
+ lg: 'h-10 rounded-400 text-sm px-4 gap-2 font-medium',
+ xl: 'h-14 rounded-500 px-4 text-xl gap-2 font-medium',
+ icon: 'size-7 p-1 text-icon-primary disabled:text-icon-tertiary',
+ 'icon-lg': 'size-10 p-[10px] text-icon-primary disabled:text-icon-tertiary',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'default',
+ },
+ },
+);
+
+const Button = React.forwardRef &
+ VariantProps & {
+ asChild?: boolean
+}>(({
+ className,
+ variant,
+ size,
+ asChild = false,
+ ...props
+}, ref) => {
+ const Comp = asChild ? Slot : 'button';
+
+ return (
+
+ );
+});
+
+export { Button, buttonVariants };
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 00000000..905811d9
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,179 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X as XIcon } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+function Dialog ({
+ ...props
+}: React.ComponentProps) {
+ return ;
+}
+
+function DialogTrigger ({
+ ...props
+}: React.ComponentProps) {
+ return ;
+}
+
+function DialogPortal ({
+ ...props
+}: React.ComponentProps) {
+ return ;
+}
+
+function DialogClose ({
+ ...props
+}: React.ComponentProps) {
+ return ;
+}
+
+function DialogOverlay ({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
+
+function DialogContent ({
+ className,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ {children}
+
+
+
+
+
+ );
+}
+
+function DialogHeader ({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ );
+}
+
+function DialogFooter ({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ );
+}
+
+function DialogTitle ({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
+
+function DialogDescription ({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
+
+export {
+ Dialog,
+ DialogClose,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogOverlay,
+ DialogPortal,
+ DialogTitle,
+ DialogTrigger,
+};
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 00000000..38b42d87
--- /dev/null
+++ b/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,265 @@
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { ChevronRightIcon } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+function DropdownMenu ({
+ ...props
+}: React.ComponentProps) {
+ return ;
+}
+
+function DropdownMenuPortal ({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
+
+function DropdownMenuTrigger ({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
+
+type DropdownMenuContentProps =
+ React.ComponentProps
+ & React.ComponentProps
+
+function DropdownMenuContent ({
+ className,
+ sideOffset = 4,
+ container,
+ forceMount,
+ ...props
+}: DropdownMenuContentProps) {
+ return (
+
+
+
+ );
+}
+
+function DropdownMenuGroup ({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
+
+function DropdownMenuItem ({
+ className,
+ inset,
+ variant = 'default',
+ ...props
+}: React.ComponentProps & {
+ inset?: boolean
+ variant?: 'default' | 'destructive'
+}) {
+ return (
+
+ );
+}
+
+function DropdownMenuLabel ({
+ className,
+ inset,
+ ...props
+}: React.ComponentProps & {
+ inset?: boolean
+}) {
+ return (
+
+ );
+}
+
+function DropdownMenuSeparator ({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
+
+function DropdownMenuShortcut ({
+ className,
+ ...props
+}: React.ComponentProps<'span'>) {
+ return (
+
+ );
+}
+
+function DropdownMenuSub ({
+ ...props
+}: React.ComponentProps) {
+ return ;
+}
+
+function DropdownMenuSubTrigger ({
+ className,
+ inset,
+ children,
+ ...props
+}: React.ComponentProps & {
+ inset?: boolean
+}) {
+ return (
+
+ {children}
+
+
+ );
+}
+
+function DropdownMenuSubContent ({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
+
+export {
+ DropdownMenu,
+ DropdownMenuPortal,
+ DropdownMenuTrigger,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuLabel,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuSub,
+ DropdownMenuSubTrigger,
+ DropdownMenuSubContent,
+};
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 00000000..13c5ea98
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+// Base input styles that apply to all variants and sizes
+const baseInputStyles = cn(
+ // Text and placeholder styling
+ 'text-text-primary placeholder:text-text-tertiary',
+
+ // Selection styling
+ 'selection:bg-fill-theme-thick selection:text-text-on-fill focus:caret-fill-theme-thick',
+
+ 'bg-fill-transparent',
+
+ // Layout
+ 'flex min-w-0',
+
+ // Typography
+ 'text-sm',
+
+ // Effects
+ 'outline-none',
+
+ // File input styling
+ 'file:inline-flex file:border-0 file:bg-fill-transparent file:text-sm file:font-medium',
+
+ // Disabled state
+ 'disabled:pointer-events-none disabled:cursor-not-allowed',
+);
+
+const inputVariants = cva(
+ baseInputStyles,
+ {
+ variants: {
+ variant: {
+ // Default variant with focus styles
+ default: 'border-border-grey-tertiary border focus-visible:border-border-theme-thick focus-visible:ring-border-theme-thick focus-visible:ring-[0.5px] disabled:border-border-grey-tertiary disabled:bg-fill-primary-alpha-5 disabled:text-text-tertiary hover:border-border-grey-tertiary-hover',
+
+ // Destructive variant for error states
+ destructive: 'border border-border-error-thick focus-visible:border-border-error-thick focus-visible:ring-border-error-thick focus-visible:ring-[0.5px] focus:caret-text-primary disabled:border-border-grey-tertiary disabled:bg-fill-primary-alpha-5 disabled:text-text-tertiary',
+
+ // Ghost variant without visible borders
+ ghost: 'border-fill-transparent focus-visible:border-transparent focus-visible:ring-transparent disabled:border-fill-transparent disabled:bg-fill-transparent disabled:text-text-tertiary',
+ },
+ size: {
+ // Small size input
+ sm: 'h-8 px-2 rounded-300',
+
+ // Medium size input (default)
+ md: 'h-10 px-2 rounded-400',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'sm',
+ },
+ },
+);
+
+export interface InputProps
+ extends Omit, 'size' | 'variant'>,
+ VariantProps {}
+
+function Input ({
+ className,
+ type,
+ variant,
+ size,
+ ...props
+}: InputProps) {
+ return (
+
+ );
+}
+
+export { Input };
\ No newline at end of file
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 00000000..a2d7d475
--- /dev/null
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+
+import { cn } from '@/lib/utils';
+
+function Label ({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
+
+export { Label };
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
new file mode 100644
index 00000000..60c89ae8
--- /dev/null
+++ b/src/components/ui/popover.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { cn } from '@/lib/utils';
+
+function Popover ({ ...props }: React.ComponentProps) {
+ return ;
+}
+
+function PopoverTrigger ({ ...props }: React.ComponentProps) {
+ return ;
+}
+
+function PopoverContent ({
+ className,
+ align = 'center',
+ sideOffset = 4,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ );
+}
+
+function PopoverAnchor ({ ...props }: React.ComponentProps) {
+ return ;
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
new file mode 100644
index 00000000..7accc3bc
--- /dev/null
+++ b/src/components/ui/progress.tsx
@@ -0,0 +1,153 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const progressVariants = cva(
+ 'relative block',
+ {
+ variants: {
+ size: {
+ sm: 'h-4 w-4',
+ md: 'h-6 w-6',
+ lg: 'h-8 w-8',
+ xl: 'h-10 w-10',
+ },
+ variant: {
+ default: '',
+ success: '',
+ warning: '',
+ destructive: '',
+ theme: '',
+ },
+ isIndeterminate: {
+ true: 'animate-progress-container',
+ false: '',
+ },
+ },
+ defaultVariants: {
+ size: 'md',
+ variant: 'default',
+ isIndeterminate: false,
+ },
+ },
+);
+
+const circleVariants = cva(
+ 'fill-fill-transparent ',
+ {
+ variants: {
+ variant: {
+ default: 'stroke-fill-tertiary',
+ theme: 'stroke-fill-tertiary',
+ success: 'stroke-fill-tertiary',
+ warning: 'stroke-fill-tertiary',
+ destructive: 'stroke-fill-tertiary',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ },
+ },
+);
+
+const progressCircleVariants = cva(
+ 'fill-fill-transparent transition-all',
+ {
+ variants: {
+ variant: {
+ default: 'stroke-fill-secondary',
+ theme: 'stroke-fill-theme-thick',
+ success: 'stroke-fill-success-thick',
+ warning: 'stroke-warning-thick',
+ destructive: 'stroke-error-thick',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ },
+ },
+);
+
+export interface ProgressProps
+ extends React.HTMLAttributes,
+ VariantProps {
+ /** Progress value between 0 and 100. When undefined, shows indeterminate state */
+ value?: number;
+ /** Line ending style */
+ strokeLinecap?: 'round' | 'square';
+ /** Custom stroke width in pixels */
+ strokeWidth?: number;
+}
+
+export function Progress ({
+ value,
+ size = 'md',
+ variant = 'default',
+ strokeLinecap = 'round',
+ strokeWidth = 3.5,
+ className,
+ ...props
+}: ProgressProps) {
+ // Calculate dimensions based on size variant
+ const dimensions: number = {
+ sm: 16,
+ md: 24,
+ lg: 32,
+ xl: 40,
+ }[size as string] || 24;
+
+ const radius = dimensions / 2 - strokeWidth;
+ const circumference = Math.ceil(2 * Math.PI * radius);
+ const isIndeterminate = value === undefined;
+
+ // Calculate percentage offset for the progress circle
+ const offset = isIndeterminate
+ ? circumference * 0.25 // 25% offset for indeterminate state
+ : Math.ceil(circumference * ((100 - Math.min(Math.max(0, value || 0), 100)) / 100));
+
+ // Calculate viewBox to add padding around the circles
+ const viewBox = `-${dimensions * 0.125} -${dimensions * 0.125} ${dimensions * 1.25} ${
+ dimensions * 1.25
+ }`;
+
+ return (
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
new file mode 100644
index 00000000..caf65272
--- /dev/null
+++ b/src/components/ui/separator.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+import { cn } from '@/lib/utils';
+
+function Separator ({
+ className,
+ orientation = 'horizontal',
+ decorative = true,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
+
+export { Separator };
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
new file mode 100644
index 00000000..99ec1565
--- /dev/null
+++ b/src/components/ui/sonner.tsx
@@ -0,0 +1,30 @@
+import { useTheme } from 'next-themes';
+import { Toaster as Sonner, ToasterProps } from 'sonner';
+import { ReactComponent as ToastSuccess } from '@/assets/toast_success.svg';
+import { ReactComponent as ToastWarning } from '@/assets/toast_warning.svg';
+import { ReactComponent as ToastError } from '@/assets/toast_error.svg';
+
+const Toaster = ({ ...props }: ToasterProps) => {
+ const { theme = 'system' } = useTheme();
+
+ return (
+ ,
+ warning: ,
+ error: ,
+ }}
+ />
+ );
+};
+
+export { Toaster };
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
new file mode 100644
index 00000000..b5d372bc
--- /dev/null
+++ b/src/components/ui/tooltip.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import { cn } from '@/lib/utils';
+
+function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps) {
+ return ;
+}
+
+function Tooltip({ ...props }: React.ComponentProps) {
+ return (
+
+
+
+ );
+}
+
+function TooltipTrigger({ ...props }: React.ComponentProps) {
+ return ;
+}
+
+function TooltipContent({
+ className,
+ sideOffset = 0,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+function TooltipShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+ return ;
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipShortcut };
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 00000000..c970780d
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn (...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
diff --git a/src/main.tsx b/src/main.tsx
index 6b068e96..dd4800cc 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,4 +1,5 @@
import ReactDOM from 'react-dom/client';
import App from '@/components/main/App';
+import './styles/global.css';
ReactDOM.createRoot(document.getElementById('root')!).render();
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 00000000..0b043ea3
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1,33 @@
+@import "./tailwind.css";
+@import "tw-animate-css";
+
+@import "./variables/semantic.light.css";
+@import "./variables/semantic.dark.css";
+@import "./template.css";
+
+:root {
+ /* new shadow */
+ --custom-shadow-sm: 0px 4px 20px 0px rgba(31, 35, 41, 0.10);
+ --custom-shadow-md: 0px 4px 32px 0px rgba(31, 34, 37, 0.12);
+}
+
+:root[data-dark-mode=true] {
+ /* new shadow */
+ --custom-shadow-sm: 0px 2px 16px 0px rgba(0, 0, 0, 0.48);
+ --custom-shadow-md: 0px 4px 32px 0px rgba(0, 0, 0, 0.48);
+}
+
+@layer base {
+ @keyframes progress-container {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+
+ .animate-progress-container {
+ animation: progress-container 1s linear infinite;
+ }
+}
diff --git a/src/styles/variables/semantic.dark.css b/src/styles/variables/semantic.dark.css
new file mode 100644
index 00000000..6b94088f
--- /dev/null
+++ b/src/styles/variables/semantic.dark.css
@@ -0,0 +1,256 @@
+/**
+ * Design system dark theme variables
+ * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+ *
+ * Generated from: semantic.dark.json
+ * Generated time: 2025-03-31T09:19:58.458Z
+ *
+ * To modify these values, edit the source JSON files and run the token conversion script:
+ * node scripts/system-token/convert-tokens.cjs
+ */
+
+:root[data-dark-mode=true] {
+ --text-primary: #e4e8f5;
+ --text-secondary: #b5bbd3;
+ --text-tertiary: #6f748c;
+ --text-quaternary: #21232a;
+ --text-inverse: #21232a;
+ --text-on-fill: #ffffff;
+ --text-theme: #00b5ff;
+ --text-theme-hover: #0092d6;
+ --text-action: #00b5ff;
+ --text-action-hover: #0092d6;
+ --text-info: #00b5ff;
+ --text-info-hover: #0092d6;
+ --text-success: #248569;
+ --text-success-hover: #29725d;
+ --text-warning: #db7e21;
+ --text-warning-hover: #b75f17;
+ --text-error: #f33641;
+ --text-error-hover: #ff5050;
+ --text-purple: #9327ff;
+ --text-purple-hover: #7a1dcc;
+ --icon-primary: #e4e8f5;
+ --icon-secondary: #b5bbd3;
+ --icon-tertiary: #6f748c;
+ --icon-quaternary: #21232a;
+ --icon-white: #ffffff;
+ --icon-purple-thick: #ffffff;
+ --icon-purple-thick-hover: #ffffff;
+ --border-grey-primary: #f8faff;
+ --border-grey-primary-hover: #e4e8f5;
+ --border-grey-secondary: #ced3e6;
+ --border-grey-secondary-hover: #b5bbd3;
+ --border-grey-tertiary: #3c3f4e;
+ --border-grey-tertiary-hover: #54596e;
+ --border-grey-quaternary: #21232a;
+ --border-grey-quaternary-hover: #272930;
+ --border-transparent: #ffffff00;
+ --border-theme-thick: #00b5ff;
+ --border-theme-thick-hover: #0092d6;
+ --border-info-thick: #00b5ff;
+ --border-info-thick-hover: #0092d6;
+ --border-success-thick: #248569;
+ --border-success-thick-hover: #29725d;
+ --border-warning-thick: #db7e21;
+ --border-warning-thick-hover: #b75f17;
+ --border-error-thick: #f33641;
+ --border-error-thick-hover: #ff5050;
+ --border-purple-thick: #9327ff;
+ --border-purple-thick-hover: #7a1dcc;
+ --fill-primary: #f8faff;
+ --fill-primary-hover: #e4e8f5;
+ --fill-secondary: #ced3e6;
+ --fill-secondary-hover: #b5bbd3;
+ --fill-tertiary: #6f748c;
+ --fill-tertiary-hover: #989eb7;
+ --fill-quaternary: #21232a;
+ --fill-quaternary-hover: #272930;
+ --fill-transparent: #ffffff00;
+ --fill-primary-alpha-5: #f9fafd0d;
+ --fill-primary-alpha-5-hover: #f9fafd1a;
+ --fill-primary-alpha-80: #1f2329cc;
+ --fill-primary-alpha-80-hover: #1f2329b2;
+ --fill-white: #ffffff;
+ --fill-white-alpha: #ffffff33;
+ --fill-white-alpha-hover: #ffffff4d;
+ --fill-black: #000000;
+ --fill-theme-light: #e3f6ff;
+ --fill-theme-light-hover: #a9e2ff;
+ --fill-theme-thick: #00b5ff;
+ --fill-theme-thick-hover: #4ec1ff;
+ --fill-theme-select: #00b5ff26;
+ --fill-info-light: #e3f6ff;
+ --fill-info-light-hover: #a9e2ff;
+ --fill-info-thick: #00b5ff;
+ --fill-info-thick-hover: #0092d6;
+ --fill-success-light: #ecf9f5;
+ --fill-success-light-hover: #c3e5d8;
+ --fill-success-thick: #248569;
+ --fill-success-thick-hover: #29725d;
+ --fill-warning-light: #fff3d5;
+ --fill-warning-light-hover: #ffe4ab;
+ --fill-warning-thick: #db7e21;
+ --fill-warning-thick-hover: #b75f17;
+ --fill-error-light: #ffd2dd;
+ --fill-error-light-hover: #ffa5b4;
+ --fill-error-thick: #e71d32;
+ --fill-error-thick-hover: #f33641;
+ --fill-error-select: #f336411a;
+ --fill-purple-light: #f1e0ff;
+ --fill-purple-light-hover: #e1b3ff;
+ --fill-purple-thick-hover: #7a1dcc;
+ --fill-purple-thick: #9327ff;
+ --surface-primary: #272930;
+ --surface-overlay: #00000099;
+ --background-primary: #21232a;
+ --background-secondary: #272930;
+ --background-tertiary: #3c3f4e;
+ --background-quaternary: #54596e;
+ --badge-color-rose-rose-light-1: #fcf2f2;
+ --badge-color-rose-rose-light-2: #fae3e3;
+ --badge-color-rose-rose-light-3: #fad9d9;
+ --badge-color-rose-rose-thick-1: #edadad;
+ --badge-color-rose-rose-thick-2: #cc4e4e;
+ --badge-color-rose-rose-thick-3: #702828;
+ --badge-color-papaya-papaya-light-1: #fcf4f0;
+ --badge-color-papaya-papaya-light-2: #fae8de;
+ --badge-color-papaya-papaya-light-3: #fadfd2;
+ --badge-color-papaya-papaya-thick-1: #f0bda3;
+ --badge-color-papaya-papaya-thick-2: #d67240;
+ --badge-color-papaya-papaya-thick-3: #6b3215;
+ --badge-color-tangerine-tangerine-light-1: #fff7ed;
+ --badge-color-tangerine-tangerine-light-2: #fcedd9;
+ --badge-color-tangerine-tangerine-light-3: #fae5ca;
+ --badge-color-tangerine-tangerine-thick-1: #f2cb99;
+ --badge-color-tangerine-tangerine-thick-2: #db8f2c;
+ --badge-color-tangerine-tangerine-thick-3: #613b0a;
+ --badge-color-mango-mango-light-1: #fff9ec;
+ --badge-color-mango-mango-light-2: #fcf1d7;
+ --badge-color-mango-mango-light-3: #fae9c3;
+ --badge-color-mango-mango-thick-1: #f5d68e;
+ --badge-color-mango-mango-thick-2: #e0a416;
+ --badge-color-mango-mango-thick-3: #5c4102;
+ --badge-color-lemon-lemon-light-1: #fffbe8;
+ --badge-color-lemon-lemon-light-2: #fcf5cf;
+ --badge-color-lemon-lemon-light-3: #faefb9;
+ --badge-color-lemon-lemon-thick-1: #f5e282;
+ --badge-color-lemon-lemon-thick-2: #e0bb00;
+ --badge-color-lemon-lemon-thick-3: #574800;
+ --badge-color-olive-olive-light-1: #f9fae6;
+ --badge-color-olive-olive-light-2: #f6f7d0;
+ --badge-color-olive-olive-light-3: #f0f2b3;
+ --badge-color-olive-olive-thick-1: #dbde83;
+ --badge-color-olive-olive-thick-2: #adb204;
+ --badge-color-olive-olive-thick-3: #4a4c03;
+ --badge-color-lime-lime-light-1: #f6f9e6;
+ --badge-color-lime-lime-light-2: #eef5ce;
+ --badge-color-lime-lime-light-3: #e7f0bb;
+ --badge-color-lime-lime-thick-1: #cfdb91;
+ --badge-color-lime-lime-thick-2: #92a822;
+ --badge-color-lime-lime-thick-3: #414d05;
+ --badge-color-grass-grass-light-1: #f4faeb;
+ --badge-color-grass-grass-light-2: #e9f5d7;
+ --badge-color-grass-grass-light-3: #def0c5;
+ --badge-color-grass-grass-thick-1: #bfd998;
+ --badge-color-grass-grass-thick-2: #75a828;
+ --badge-color-grass-grass-thick-3: #334d0c;
+ --badge-color-forest-forest-light-1: #f1faf0;
+ --badge-color-forest-forest-light-2: #e2f5df;
+ --badge-color-forest-forest-light-3: #d7f0d3;
+ --badge-color-forest-forest-thick-1: #a8d6a1;
+ --badge-color-forest-forest-thick-2: #49a33b;
+ --badge-color-forest-forest-thick-3: #1e4f16;
+ --badge-color-jade-jade-light-1: #f0faf6;
+ --badge-color-jade-jade-light-2: #dff5eb;
+ --badge-color-jade-jade-light-3: #cef0e1;
+ --badge-color-jade-jade-thick-1: #90d1b5;
+ --badge-color-jade-jade-thick-2: #1c9963;
+ --badge-color-jade-jade-thick-3: #075231;
+ --badge-color-aqua-aqua-light-1: #f0f9fa;
+ --badge-color-aqua-aqua-light-2: #dff3f5;
+ --badge-color-aqua-aqua-light-3: #ccecf0;
+ --badge-color-aqua-aqua-thick-1: #83ccd4;
+ --badge-color-aqua-aqua-thick-2: #008e9e;
+ --badge-color-aqua-aqua-thick-3: #004e57;
+ --badge-color-azure-azure-light-1: #f0f6fa;
+ --badge-color-azure-azure-light-2: #e1eef7;
+ --badge-color-azure-azure-light-3: #d3e6f5;
+ --badge-color-azure-azure-thick-1: #88c0eb;
+ --badge-color-azure-azure-thick-2: #0877cc;
+ --badge-color-azure-azure-thick-3: #154469;
+ --badge-color-denim-denim-light-1: #f0f3fa;
+ --badge-color-denim-denim-light-2: #e3ebfa;
+ --badge-color-denim-denim-light-3: #d7e2f7;
+ --badge-color-denim-denim-thick-1: #9ab6ed;
+ --badge-color-denim-denim-thick-2: #3267d1;
+ --badge-color-denim-denim-thick-3: #223c70;
+ --badge-color-mauve-mauve-light-1: #f2f2fc;
+ --badge-color-mauve-mauve-thick-2: #5555e0;
+ --badge-color-mauve-mauve-thick-3: #36366b;
+ --badge-color-mauve-mauve-thick-1: #aeaef5;
+ --badge-color-lavender-lavender-light-1: #f6f3fc;
+ --badge-color-lavender-lavender-light-2: #ebe3fa;
+ --badge-color-lavender-lavender-light-3: #e4daf7;
+ --badge-color-lavender-lavender-thick-1: #c1aaf0;
+ --badge-color-lavender-lavender-thick-2: #8153db;
+ --badge-color-lavender-lavender-thick-3: #462f75;
+ --badge-color-lilac-liliac-light-1: #f7f0fa;
+ --badge-color-lilac-liliac-light-2: #f0e1f7;
+ --badge-color-lilac-liliac-light-3: #edd7f7;
+ --badge-color-lilac-liliac-thick-1: #d3a9e8;
+ --badge-color-lilac-liliac-thick-2: #9e4cc7;
+ --badge-color-lilac-liliac-thick-3: #562d6b;
+ --badge-color-mallow-mallow-light-1: #faf0fa;
+ --badge-color-mallow-mallow-light-2: #f5e1f4;
+ --badge-color-mallow-mallow-light-3: #f5d7f4;
+ --badge-color-mallow-mallow-thick-1: #dea4dc;
+ --badge-color-mallow-mallow-thick-2: #b240af;
+ --badge-color-mallow-mallow-thick-3: #632861;
+ --badge-color-camellia-camellia-light-1: #f9eff3;
+ --badge-color-camellia-camellia-light-2: #f7e1eb;
+ --badge-color-camellia-camellia-light-3: #f7d7e5;
+ --badge-color-camellia-camellia-thick-1: #e5a3c0;
+ --badge-color-camellia-camellia-thick-2: #c24279;
+ --badge-color-camellia-camellia-thick-3: #6e2343;
+ --badge-color-smoke-smoke-light-1: #f5f5f5;
+ --badge-color-smoke-smoke-light-2: #e8e8e8;
+ --badge-color-smoke-smoke-light-3: #dedede;
+ --badge-color-smoke-smoke-thick-1: #b8b8b8;
+ --badge-color-smoke-smoke-thick-2: #6e6e6e;
+ --badge-color-smoke-smoke-thick-3: #404040;
+ --badge-color-iron-icon-light-1: #f2f4f7;
+ --badge-color-iron-icon-light-2: #e6e9f0;
+ --badge-color-iron-icon-light-3: #dadee5;
+ --badge-color-iron-icon-thick-1: #b0b5bf;
+ --badge-color-iron-icon-thick-2: #666f80;
+ --badge-color-iron-icon-thick-3: #394152;
+ --shadow-sm: 0px;
+ --shadow-md: 0px;
+ --brand-skyline: #00b5ff;
+ --brand-aqua: #00c8ff;
+ --brand-violet: #9327ff;
+ --brand-amethyst: #8427e0;
+ --brand-berry: #e3006d;
+ --brand-coral: #fb006d;
+ --brand-golden: #f7931e;
+ --brand-amber: #ffbd00;
+ --brand-lemon: #ffce00;
+ --other-colors-text-highlight: #a9e2ff;
+ --spacing-spacing-0: 0px;
+ --spacing-spacing-xs: 4px;
+ --spacing-spacing-s: 6px;
+ --spacing-spacing-m: 8px;
+ --spacing-spacing-l: 12px;
+ --spacing-spacing-xl: 16px;
+ --spacing-spacing-xxl: 20px;
+ --spacing-spacing-full: 1000px;
+ --border-radius-border-radius-0: 0px;
+ --border-radius-border-radius-xs: 4px;
+ --border-radius-border-radius-s: 6px;
+ --border-radius-border-radius-m: 8px;
+ --border-radius-border-radius-l: 12px;
+ --border-radius-border-radius-xl: 16px;
+ --border-radius-border-radius-xxl: 20px;
+ --border-radius-border-radius-full: 1000px;
+}
diff --git a/src/styles/variables/semantic.light.css b/src/styles/variables/semantic.light.css
new file mode 100644
index 00000000..edaaf421
--- /dev/null
+++ b/src/styles/variables/semantic.light.css
@@ -0,0 +1,256 @@
+/**
+ * Design system light theme variables
+ * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+ *
+ * Generated from: semantic.light.json
+ * Generated time: 2025-03-31T09:19:58.455Z
+ *
+ * To modify these values, edit the source JSON files and run the token conversion script:
+ * node scripts/system-token/convert-tokens.cjs
+ */
+
+:root {
+ --text-primary: #21232a;
+ --text-secondary: #6f748c;
+ --text-tertiary: #b5bbd3;
+ --text-quaternary: #e4e8f5;
+ --text-inverse: #ffffff;
+ --text-on-fill: #ffffff;
+ --text-theme: #00b5ff;
+ --text-theme-hover: #0092d6;
+ --text-action: #00b5ff;
+ --text-action-hover: #0092d6;
+ --text-info: #00b5ff;
+ --text-info-hover: #0092d6;
+ --text-success: #248569;
+ --text-success-hover: #29725d;
+ --text-warning: #db7e21;
+ --text-warning-hover: #b75f17;
+ --text-error: #e71d32;
+ --text-error-hover: #ad1625;
+ --text-purple: #9327ff;
+ --text-purple-hover: #7a1dcc;
+ --icon-primary: #21232a;
+ --icon-secondary: #6f748c;
+ --icon-tertiary: #b5bbd3;
+ --icon-quaternary: #e4e8f5;
+ --icon-white: #ffffff;
+ --icon-purple-thick: #9327ff;
+ --icon-purple-thick-hover: #7a1dcc;
+ --border-grey-primary: #21232a;
+ --border-grey-primary-hover: #272930;
+ --border-grey-secondary: #3c3f4e;
+ --border-grey-secondary-hover: #54596e;
+ --border-grey-tertiary: #ced3e6;
+ --border-grey-tertiary-hover: #b5bbd3;
+ --border-grey-quaternary: #f8faff;
+ --border-grey-quaternary-hover: #e4e8f5;
+ --border-transparent: #ffffff00;
+ --border-theme-thick: #00b5ff;
+ --border-theme-thick-hover: #0092d6;
+ --border-info-thick: #00b5ff;
+ --border-info-thick-hover: #0092d6;
+ --border-success-thick: #248569;
+ --border-success-thick-hover: #29725d;
+ --border-warning-thick: #db7e21;
+ --border-warning-thick-hover: #b75f17;
+ --border-error-thick: #e71d32;
+ --border-error-thick-hover: #ad1625;
+ --border-purple-thick: #9327ff;
+ --border-purple-thick-hover: #7a1dcc;
+ --fill-primary: #21232a;
+ --fill-primary-hover: #272930;
+ --fill-secondary: #6f748c;
+ --fill-secondary-hover: #989eb7;
+ --fill-tertiary: #ced3e6;
+ --fill-tertiary-hover: #b5bbd3;
+ --fill-quaternary: #f8faff;
+ --fill-quaternary-hover: #e4e8f5;
+ --fill-transparent: #ffffff00;
+ --fill-primary-alpha-5: #1f23290d;
+ --fill-primary-alpha-5-hover: #1f23291a;
+ --fill-primary-alpha-80: #1f2329cc;
+ --fill-primary-alpha-80-hover: #1f2329b2;
+ --fill-white: #ffffff;
+ --fill-white-alpha: #ffffff33;
+ --fill-white-alpha-hover: #ffffff4d;
+ --fill-black: #000000;
+ --fill-theme-light: #e3f6ff;
+ --fill-theme-light-hover: #a9e2ff;
+ --fill-theme-thick: #00b5ff;
+ --fill-theme-thick-hover: #0092d6;
+ --fill-theme-select: #00b5ff26;
+ --fill-info-light: #e3f6ff;
+ --fill-info-light-hover: #a9e2ff;
+ --fill-info-thick: #00b5ff;
+ --fill-info-thick-hover: #0092d6;
+ --fill-success-light: #ecf9f5;
+ --fill-success-light-hover: #c3e5d8;
+ --fill-success-thick: #248569;
+ --fill-success-thick-hover: #29725d;
+ --fill-warning-light: #fff3d5;
+ --fill-warning-light-hover: #ffe4ab;
+ --fill-warning-thick: #db7e21;
+ --fill-warning-thick-hover: #b75f17;
+ --fill-error-light: #ffd2dd;
+ --fill-error-light-hover: #ffa5b4;
+ --fill-error-thick: #e71d32;
+ --fill-error-thick-hover: #ad1625;
+ --fill-error-select: #f336411a;
+ --fill-purple-light: #f1e0ff;
+ --fill-purple-light-hover: #e1b3ff;
+ --fill-purple-thick-hover: #7a1dcc;
+ --fill-purple-thick: #9327ff;
+ --surface-primary: #ffffff;
+ --surface-overlay: #00000099;
+ --background-primary: #ffffff;
+ --background-secondary: #f8faff;
+ --background-tertiary: #e4e8f5;
+ --background-quaternary: #ced3e6;
+ --badge-color-rose-rose-light-1: #fcf2f2;
+ --badge-color-rose-rose-light-2: #fae3e3;
+ --badge-color-rose-rose-light-3: #fad9d9;
+ --badge-color-rose-rose-thick-1: #edadad;
+ --badge-color-rose-rose-thick-2: #cc4e4e;
+ --badge-color-rose-rose-thick-3: #702828;
+ --badge-color-papaya-papaya-light-1: #fcf4f0;
+ --badge-color-papaya-papaya-light-2: #fae8de;
+ --badge-color-papaya-papaya-light-3: #fadfd2;
+ --badge-color-papaya-papaya-thick-1: #f0bda3;
+ --badge-color-papaya-papaya-thick-2: #d67240;
+ --badge-color-papaya-papaya-thick-3: #6b3215;
+ --badge-color-tangerine-tangerine-light-1: #fff7ed;
+ --badge-color-tangerine-tangerine-light-2: #fcedd9;
+ --badge-color-tangerine-tangerine-light-3: #fae5ca;
+ --badge-color-tangerine-tangerine-thick-1: #f2cb99;
+ --badge-color-tangerine-tangerine-thick-2: #db8f2c;
+ --badge-color-tangerine-tangerine-thick-3: #613b0a;
+ --badge-color-mango-mango-light-1: #fff9ec;
+ --badge-color-mango-mango-light-2: #fcf1d7;
+ --badge-color-mango-mango-light-3: #fae9c3;
+ --badge-color-mango-mango-thick-1: #f5d68e;
+ --badge-color-mango-mango-thick-2: #e0a416;
+ --badge-color-mango-mango-thick-3: #5c4102;
+ --badge-color-lemon-lemon-light-1: #fffbe8;
+ --badge-color-lemon-lemon-light-2: #fcf5cf;
+ --badge-color-lemon-lemon-light-3: #faefb9;
+ --badge-color-lemon-lemon-thick-1: #f5e282;
+ --badge-color-lemon-lemon-thick-2: #e0bb00;
+ --badge-color-lemon-lemon-thick-3: #574800;
+ --badge-color-olive-olive-light-1: #f9fae6;
+ --badge-color-olive-olive-light-2: #f6f7d0;
+ --badge-color-olive-olive-light-3: #f0f2b3;
+ --badge-color-olive-olive-thick-1: #dbde83;
+ --badge-color-olive-olive-thick-2: #adb204;
+ --badge-color-olive-olive-thick-3: #4a4c03;
+ --badge-color-lime-lime-light-1: #f6f9e6;
+ --badge-color-lime-lime-light-2: #eef5ce;
+ --badge-color-lime-lime-light-3: #e7f0bb;
+ --badge-color-lime-lime-thick-1: #cfdb91;
+ --badge-color-lime-lime-thick-2: #92a822;
+ --badge-color-lime-lime-thick-3: #414d05;
+ --badge-color-grass-grass-light-1: #f4faeb;
+ --badge-color-grass-grass-light-2: #e9f5d7;
+ --badge-color-grass-grass-light-3: #def0c5;
+ --badge-color-grass-grass-thick-1: #bfd998;
+ --badge-color-grass-grass-thick-2: #75a828;
+ --badge-color-grass-grass-thick-3: #334d0c;
+ --badge-color-forest-forest-light-1: #f1faf0;
+ --badge-color-forest-forest-light-2: #e2f5df;
+ --badge-color-forest-forest-light-3: #d7f0d3;
+ --badge-color-forest-forest-thick-1: #a8d6a1;
+ --badge-color-forest-forest-thick-2: #49a33b;
+ --badge-color-forest-forest-thick-3: #1e4f16;
+ --badge-color-jade-jade-light-1: #f0faf6;
+ --badge-color-jade-jade-light-2: #dff5eb;
+ --badge-color-jade-jade-light-3: #cef0e1;
+ --badge-color-jade-jade-thick-1: #90d1b5;
+ --badge-color-jade-jade-thick-2: #1c9963;
+ --badge-color-jade-jade-thick-3: #075231;
+ --badge-color-aqua-aqua-light-1: #f0f9fa;
+ --badge-color-aqua-aqua-light-2: #dff3f5;
+ --badge-color-aqua-aqua-light-3: #ccecf0;
+ --badge-color-aqua-aqua-thick-1: #83ccd4;
+ --badge-color-aqua-aqua-thick-2: #008e9e;
+ --badge-color-aqua-aqua-thick-3: #004e57;
+ --badge-color-azure-azure-light-1: #f0f6fa;
+ --badge-color-azure-azure-light-2: #e1eef7;
+ --badge-color-azure-azure-light-3: #d3e6f5;
+ --badge-color-azure-azure-thick-1: #88c0eb;
+ --badge-color-azure-azure-thick-2: #0877cc;
+ --badge-color-azure-azure-thick-3: #154469;
+ --badge-color-denim-denim-light-1: #f0f3fa;
+ --badge-color-denim-denim-light-2: #e3ebfa;
+ --badge-color-denim-denim-light-3: #d7e2f7;
+ --badge-color-denim-denim-thick-1: #9ab6ed;
+ --badge-color-denim-denim-thick-2: #3267d1;
+ --badge-color-denim-denim-thick-3: #223c70;
+ --badge-color-mauve-mauve-light-1: #f2f2fc;
+ --badge-color-mauve-mauve-thick-2: #5555e0;
+ --badge-color-mauve-mauve-thick-3: #36366b;
+ --badge-color-mauve-mauve-thick-1: #aeaef5;
+ --badge-color-lavender-lavender-light-1: #f6f3fc;
+ --badge-color-lavender-lavender-light-2: #ebe3fa;
+ --badge-color-lavender-lavender-light-3: #e4daf7;
+ --badge-color-lavender-lavender-thick-1: #c1aaf0;
+ --badge-color-lavender-lavender-thick-2: #8153db;
+ --badge-color-lavender-lavender-thick-3: #462f75;
+ --badge-color-lilac-liliac-light-1: #f7f0fa;
+ --badge-color-lilac-liliac-light-2: #f0e1f7;
+ --badge-color-lilac-liliac-light-3: #edd7f7;
+ --badge-color-lilac-liliac-thick-1: #d3a9e8;
+ --badge-color-lilac-liliac-thick-2: #9e4cc7;
+ --badge-color-lilac-liliac-thick-3: #562d6b;
+ --badge-color-mallow-mallow-light-1: #faf0fa;
+ --badge-color-mallow-mallow-light-2: #f5e1f4;
+ --badge-color-mallow-mallow-light-3: #f5d7f4;
+ --badge-color-mallow-mallow-thick-1: #dea4dc;
+ --badge-color-mallow-mallow-thick-2: #b240af;
+ --badge-color-mallow-mallow-thick-3: #632861;
+ --badge-color-camellia-camellia-light-1: #f9eff3;
+ --badge-color-camellia-camellia-light-2: #f7e1eb;
+ --badge-color-camellia-camellia-light-3: #f7d7e5;
+ --badge-color-camellia-camellia-thick-1: #e5a3c0;
+ --badge-color-camellia-camellia-thick-2: #c24279;
+ --badge-color-camellia-camellia-thick-3: #6e2343;
+ --badge-color-smoke-smoke-light-1: #f5f5f5;
+ --badge-color-smoke-smoke-light-2: #e8e8e8;
+ --badge-color-smoke-smoke-light-3: #dedede;
+ --badge-color-smoke-smoke-thick-1: #b8b8b8;
+ --badge-color-smoke-smoke-thick-2: #6e6e6e;
+ --badge-color-smoke-smoke-thick-3: #404040;
+ --badge-color-iron-icon-light-1: #f2f4f7;
+ --badge-color-iron-icon-light-2: #e6e9f0;
+ --badge-color-iron-icon-light-3: #dadee5;
+ --badge-color-iron-icon-thick-1: #b0b5bf;
+ --badge-color-iron-icon-thick-2: #666f80;
+ --badge-color-iron-icon-thick-3: #394152;
+ --shadow-sm: 0px;
+ --shadow-md: 0px;
+ --brand-skyline: #00b5ff;
+ --brand-aqua: #00c8ff;
+ --brand-violet: #9327ff;
+ --brand-amethyst: #8427e0;
+ --brand-berry: #e3006d;
+ --brand-coral: #fb006d;
+ --brand-golden: #f7931e;
+ --brand-amber: #ffbd00;
+ --brand-lemon: #ffce00;
+ --other-colors-text-highlight: #a9e2ff;
+ --spacing-spacing-0: 0px;
+ --spacing-spacing-xs: 4px;
+ --spacing-spacing-s: 6px;
+ --spacing-spacing-m: 8px;
+ --spacing-spacing-l: 12px;
+ --spacing-spacing-xl: 16px;
+ --spacing-spacing-xxl: 20px;
+ --spacing-spacing-full: 1000px;
+ --border-radius-border-radius-0: 0px;
+ --border-radius-border-radius-xs: 4px;
+ --border-radius-border-radius-s: 6px;
+ --border-radius-border-radius-m: 8px;
+ --border-radius-border-radius-l: 12px;
+ --border-radius-border-radius-xl: 16px;
+ --border-radius-border-radius-xxl: 20px;
+ --border-radius-border-radius-full: 1000px;
+}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 8589a0f4..e54ac765 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -14,6 +14,32 @@ module.exports = {
extend: {
colors,
boxShadow,
+ borderRadius: {
+ 100: '4px',
+ 200: '6px',
+ 300: '8px',
+ 400: '12px',
+ 500: '16px',
+ 600: '20px',
+ xs: '4px',
+ sm: '6px',
+ md: '12px',
+ lg: '16px',
+ xl: '20px',
+ },
+ padding: {
+ 100: '4px',
+ 200: '6px',
+ 300: '8px',
+ 400: '12px',
+ 500: '16px',
+ 600: '20px',
+ xs: '4px',
+ sm: '6px',
+ md: '12px',
+ lg: '16px',
+ xl: '20px',
+ },
},
},
plugins: [],
diff --git a/tailwind/box-shadow.cjs b/tailwind/box-shadow.cjs
index 754da707..a87322eb 100644
--- a/tailwind/box-shadow.cjs
+++ b/tailwind/box-shadow.cjs
@@ -1,11 +1,9 @@
-
-/**
-* Do not edit directly
-* Generated on Thu, 27 Mar 2025 11:44:33 GMT
-* Generated from $pnpm css:variables
-*/
-
-
module.exports = {
- "md": "var(--shadow)"
+ 'md': 'var(--shadow)',
+ 'popover': 'var(--custom-shadow-sm)',
+ 'menu': 'var(--custom-shadow-sm)',
+ 'toolbar': 'var(--custom-shadow-sm)',
+ 'dialog': 'var(--custom-shadow-md)',
+ 'toast': 'var(--custom-shadow-md)',
+ 'tooltip': 'var(--custom-shadow-md)',
};
diff --git a/tailwind/colors.cjs b/tailwind/colors.cjs
index 279121e4..88b20f0f 100644
--- a/tailwind/colors.cjs
+++ b/tailwind/colors.cjs
@@ -1,114 +1,115 @@
-
-/**
-* Do not edit directly
-* Generated on Thu, 27 Mar 2025 11:44:33 GMT
-* Generated from $pnpm css:variables
-*/
-
+const newColors = require('./new-colors.cjs');
module.exports = {
- "bg": {
- "selection": "var(--bg-selection)",
- "body": "var(--bg-body)",
- "base": "var(--bg-base)",
- "mask": "var(--bg-mask)",
- "tips": "var(--bg-tips)",
- "brand": "var(--bg-brand)",
- "header": "var(--bg-header)",
- "footer": "var(--bg-footer)"
+ 'bg': {
+ 'selection': 'var(--bg-selection)',
+ 'body': 'var(--bg-body)',
+ 'base': 'var(--bg-base)',
+ 'mask': 'var(--bg-mask)',
+ 'tips': 'var(--bg-tips)',
+ 'brand': 'var(--bg-brand)',
+ 'header': 'var(--bg-header)',
+ 'footer': 'var(--bg-footer)',
},
- "text": {
- "title": "var(--text-title)",
- "caption": "var(--text-caption)",
- "placeholder": "var(--text-placeholder)",
- "disabled": "var(--text-disabled)",
- "link-default": "var(--text-link-default)",
- "link-hover": "var(--text-link-hover)",
- "link-pressed": "var(--text-link-pressed)",
- "link-disabled": "var(--text-link-disabled)"
+
+ 'line': {
+ 'border': 'var(--line-border)',
+ 'divider': 'var(--line-divider)',
+ 'default': 'var(--line-default)',
+ 'on-toolbar': 'var(--line-on-toolbar)',
+ 'card': 'var(--line-card)',
},
- "icon": {
- "primary": "var(--icon-primary)",
- "secondary": "var(--icon-secondary)",
- "disabled": "var(--icon-disabled)",
- "on-toolbar": "var(--icon-on-toolbar)"
+ 'content': {
+ 'blue-400': 'var(--content-blue-400)',
+ 'blue-300': 'var(--content-blue-300)',
+ 'blue-600': 'var(--content-blue-600)',
+ 'blue-700': 'var(--content-blue-700)',
+ 'blue-800': 'var(--content-blue-800)',
+ 'blue-900': 'var(--content-blue-900)',
+ 'blue-100': 'var(--content-blue-100)',
+ 'blue-200': 'var(--content-blue-200)',
+ 'blue-50': 'var(--content-blue-50)',
+ 'on-fill-hover': 'var(--content-on-fill-hover)',
+ 'on-fill': 'var(--content-on-fill)',
+ 'on-tag': 'var(--content-on-tag)',
},
- "line": {
- "border": "var(--line-border)",
- "divider": "var(--line-divider)",
- "default": "var(--line-default)",
- "on-toolbar": "var(--line-on-toolbar)",
- "card": "var(--line-card)"
+ 'function': {
+ 'error': 'var(--function-error)',
+ 'error-hover': 'var(--function-error-hover)',
+ 'warning': 'var(--function-warning)',
+ 'warning-hover': 'var(--function-warning-hover)',
+ 'success': 'var(--function-success)',
+ 'success-hover': 'var(--function-success-hover)',
+ 'info': 'var(--function-info)',
},
- "fill": {
- "toolbar": "var(--fill-toolbar)",
- "default": "var(--fill-default)",
- "hover": "var(--fill-hover)",
- "pressed": "var(--fill-pressed)",
- "active": "var(--fill-active)",
- "list-hover": "var(--fill-list-hover)",
- "list-active": "var(--fill-list-active)"
+ 'tint': {
+ 'purple': 'var(--tint-purple)',
+ 'pink': 'var(--tint-pink)',
+ 'red': 'var(--tint-red)',
+ 'lime': 'var(--tint-lime)',
+ 'green': 'var(--tint-green)',
+ 'aqua': 'var(--tint-aqua)',
+ 'blue': 'var(--tint-blue)',
+ 'orange': 'var(--tint-orange)',
+ 'yellow': 'var(--tint-yellow)',
},
- "content": {
- "blue-400": "var(--content-blue-400)",
- "blue-300": "var(--content-blue-300)",
- "blue-600": "var(--content-blue-600)",
- "blue-700": "var(--content-blue-700)",
- "blue-800": "var(--content-blue-800)",
- "blue-900": "var(--content-blue-900)",
- "blue-100": "var(--content-blue-100)",
- "blue-200": "var(--content-blue-200)",
- "blue-50": "var(--content-blue-50)",
- "on-fill-hover": "var(--content-on-fill-hover)",
- "on-fill": "var(--content-on-fill)",
- "on-tag": "var(--content-on-tag)"
+
+ 'scrollbar': {
+ 'thumb': 'var(--scrollbar-thumb)',
+ 'track': 'var(--scrollbar-track)',
},
- "function": {
- "error": "var(--function-error)",
- "error-hover": "var(--function-error-hover)",
- "warning": "var(--function-warning)",
- "warning-hover": "var(--function-warning-hover)",
- "success": "var(--function-success)",
- "success-hover": "var(--function-success-hover)",
- "info": "var(--function-info)"
+ 'note': {
+ 'header': 'var(--note-header)',
},
- "tint": {
- "purple": "var(--tint-purple)",
- "pink": "var(--tint-pink)",
- "red": "var(--tint-red)",
- "lime": "var(--tint-lime)",
- "green": "var(--tint-green)",
- "aqua": "var(--tint-aqua)",
- "blue": "var(--tint-blue)",
- "orange": "var(--tint-orange)",
- "yellow": "var(--tint-yellow)"
+ 'billing': {
+ 'primary': 'var(--billing-primary)',
+ 'primary-hover': 'var(--billing-primary-hover)',
},
- "badge": {
- "purple": "var(--badge-purple)",
- "pink": "var(--badge-pink)",
- "red": "var(--badge-red)",
- "lime": "var(--badge-lime)",
- "green": "var(--badge-green)",
- "aqua": "var(--badge-aqua)",
- "blue": "var(--badge-blue)",
- "orange": "var(--badge-orange)",
- "yellow": "var(--badge-yellow)"
+ 'ai': {
+ 'primary': 'var(--ai-primary)',
},
- "scrollbar": {
- "thumb": "var(--scrollbar-thumb)",
- "track": "var(--scrollbar-track)"
+ 'writer': {
+ 'placeholder': 'var(--writer-placeholder)',
},
- "note": {
- "header": "var(--note-header)"
+ ...newColors,
+ 'fill': {
+ 'toolbar': 'var(--fill-toolbar)',
+ 'default': 'var(--fill-default)',
+ 'hover': 'var(--fill-hover)',
+ 'pressed': 'var(--fill-pressed)',
+ 'active': 'var(--fill-active)',
+ 'list-hover': 'var(--fill-list-hover)',
+ 'list-active': 'var(--fill-list-active)',
+ ...newColors['fill'],
},
- "billing": {
- "primary": "var(--billing-primary)",
- "primary-hover": "var(--billing-primary-hover)"
+ 'text': {
+ 'title': 'var(--text-title)',
+ 'caption': 'var(--text-caption)',
+ 'placeholder': 'var(--text-placeholder)',
+ 'disabled': 'var(--text-disabled)',
+ 'link-default': 'var(--text-link-default)',
+ 'link-hover': 'var(--text-link-hover)',
+ 'link-pressed': 'var(--text-link-pressed)',
+ 'link-disabled': 'var(--text-link-disabled)',
+ ...newColors['text'],
},
- "ai": {
- "primary": "var(--ai-primary)"
+ 'icon': {
+ 'primary': 'var(--icon-primary)',
+ 'secondary': 'var(--icon-secondary)',
+ 'disabled': 'var(--icon-disabled)',
+ 'on-toolbar': 'var(--icon-on-toolbar)',
+ ...newColors['icon'],
+ },
+ 'badge': {
+ 'purple': 'var(--badge-purple)',
+ 'pink': 'var(--badge-pink)',
+ 'red': 'var(--badge-red)',
+ 'lime': 'var(--badge-lime)',
+ 'green': 'var(--badge-green)',
+ 'aqua': 'var(--badge-aqua)',
+ 'blue': 'var(--badge-blue)',
+ 'orange': 'var(--badge-orange)',
+ 'yellow': 'var(--badge-yellow)',
+ ...newColors['badge'],
},
- "writer": {
- "placeholder": "var(--writer-placeholder)"
- }
};
diff --git a/tailwind/new-colors.cjs b/tailwind/new-colors.cjs
new file mode 100644
index 00000000..dbd6130b
--- /dev/null
+++ b/tailwind/new-colors.cjs
@@ -0,0 +1,266 @@
+/**
+ * TailwindCSS color configuration
+ * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+ *
+ * This file is auto-generated by convert-tokens.cjs script
+ * Generation time: 2025-03-31T09:19:58.459Z
+ *
+ * To modify these colors, edit the source JSON files and run the token conversion script:
+ * node scripts/system-token/convert-tokens.cjs
+ *
+ * These colors reference CSS variables, ensure the corresponding CSS files are loaded
+ */
+
+module.exports = {
+ "text": {
+ "primary": "var(--text-primary)",
+ "secondary": "var(--text-secondary)",
+ "tertiary": "var(--text-tertiary)",
+ "quaternary": "var(--text-quaternary)",
+ "inverse": "var(--text-inverse)",
+ "on-fill": "var(--text-on-fill)",
+ "theme": "var(--text-theme)",
+ "theme-hover": "var(--text-theme-hover)",
+ "action": "var(--text-action)",
+ "action-hover": "var(--text-action-hover)",
+ "info": "var(--text-info)",
+ "info-hover": "var(--text-info-hover)",
+ "success": "var(--text-success)",
+ "success-hover": "var(--text-success-hover)",
+ "warning": "var(--text-warning)",
+ "warning-hover": "var(--text-warning-hover)",
+ "error": "var(--text-error)",
+ "error-hover": "var(--text-error-hover)",
+ "purple": "var(--text-purple)",
+ "purple-hover": "var(--text-purple-hover)"
+ },
+ "icon": {
+ "primary": "var(--icon-primary)",
+ "secondary": "var(--icon-secondary)",
+ "tertiary": "var(--icon-tertiary)",
+ "quaternary": "var(--icon-quaternary)",
+ "white": "var(--icon-white)",
+ "purple-thick": "var(--icon-purple-thick)",
+ "purple-thick-hover": "var(--icon-purple-thick-hover)"
+ },
+ "border": {
+ "grey-primary": "var(--border-grey-primary)",
+ "grey-primary-hover": "var(--border-grey-primary-hover)",
+ "grey-secondary": "var(--border-grey-secondary)",
+ "grey-secondary-hover": "var(--border-grey-secondary-hover)",
+ "grey-tertiary": "var(--border-grey-tertiary)",
+ "grey-tertiary-hover": "var(--border-grey-tertiary-hover)",
+ "grey-quaternary": "var(--border-grey-quaternary)",
+ "grey-quaternary-hover": "var(--border-grey-quaternary-hover)",
+ "transparent": "var(--border-transparent)",
+ "theme-thick": "var(--border-theme-thick)",
+ "theme-thick-hover": "var(--border-theme-thick-hover)",
+ "info-thick": "var(--border-info-thick)",
+ "info-thick-hover": "var(--border-info-thick-hover)",
+ "success-thick": "var(--border-success-thick)",
+ "success-thick-hover": "var(--border-success-thick-hover)",
+ "warning-thick": "var(--border-warning-thick)",
+ "warning-thick-hover": "var(--border-warning-thick-hover)",
+ "error-thick": "var(--border-error-thick)",
+ "error-thick-hover": "var(--border-error-thick-hover)",
+ "purple-thick": "var(--border-purple-thick)",
+ "purple-thick-hover": "var(--border-purple-thick-hover)",
+ "radius-border-radius-0": "var(--border-radius-border-radius-0)",
+ "radius-border-radius-xs": "var(--border-radius-border-radius-xs)",
+ "radius-border-radius-s": "var(--border-radius-border-radius-s)",
+ "radius-border-radius-m": "var(--border-radius-border-radius-m)",
+ "radius-border-radius-l": "var(--border-radius-border-radius-l)",
+ "radius-border-radius-xl": "var(--border-radius-border-radius-xl)",
+ "radius-border-radius-xxl": "var(--border-radius-border-radius-xxl)",
+ "radius-border-radius-full": "var(--border-radius-border-radius-full)"
+ },
+ "fill": {
+ "primary": "var(--fill-primary)",
+ "primary-hover": "var(--fill-primary-hover)",
+ "secondary": "var(--fill-secondary)",
+ "secondary-hover": "var(--fill-secondary-hover)",
+ "tertiary": "var(--fill-tertiary)",
+ "tertiary-hover": "var(--fill-tertiary-hover)",
+ "quaternary": "var(--fill-quaternary)",
+ "quaternary-hover": "var(--fill-quaternary-hover)",
+ "transparent": "var(--fill-transparent)",
+ "primary-alpha-5": "var(--fill-primary-alpha-5)",
+ "primary-alpha-5-hover": "var(--fill-primary-alpha-5-hover)",
+ "primary-alpha-80": "var(--fill-primary-alpha-80)",
+ "primary-alpha-80-hover": "var(--fill-primary-alpha-80-hover)",
+ "white": "var(--fill-white)",
+ "white-alpha": "var(--fill-white-alpha)",
+ "white-alpha-hover": "var(--fill-white-alpha-hover)",
+ "black": "var(--fill-black)",
+ "theme-light": "var(--fill-theme-light)",
+ "theme-light-hover": "var(--fill-theme-light-hover)",
+ "theme-thick": "var(--fill-theme-thick)",
+ "theme-thick-hover": "var(--fill-theme-thick-hover)",
+ "theme-select": "var(--fill-theme-select)",
+ "info-light": "var(--fill-info-light)",
+ "info-light-hover": "var(--fill-info-light-hover)",
+ "info-thick": "var(--fill-info-thick)",
+ "info-thick-hover": "var(--fill-info-thick-hover)",
+ "success-light": "var(--fill-success-light)",
+ "success-light-hover": "var(--fill-success-light-hover)",
+ "success-thick": "var(--fill-success-thick)",
+ "success-thick-hover": "var(--fill-success-thick-hover)",
+ "warning-light": "var(--fill-warning-light)",
+ "warning-light-hover": "var(--fill-warning-light-hover)",
+ "warning-thick": "var(--fill-warning-thick)",
+ "warning-thick-hover": "var(--fill-warning-thick-hover)",
+ "error-light": "var(--fill-error-light)",
+ "error-light-hover": "var(--fill-error-light-hover)",
+ "error-thick": "var(--fill-error-thick)",
+ "error-thick-hover": "var(--fill-error-thick-hover)",
+ "error-select": "var(--fill-error-select)",
+ "purple-light": "var(--fill-purple-light)",
+ "purple-light-hover": "var(--fill-purple-light-hover)",
+ "purple-thick-hover": "var(--fill-purple-thick-hover)",
+ "purple-thick": "var(--fill-purple-thick)"
+ },
+ "surface": {
+ "primary": "var(--surface-primary)",
+ "overlay": "var(--surface-overlay)"
+ },
+ "background": {
+ "primary": "var(--background-primary)",
+ "secondary": "var(--background-secondary)",
+ "tertiary": "var(--background-tertiary)",
+ "quaternary": "var(--background-quaternary)"
+ },
+ "badge": {
+ "color-rose-rose-light-1": "var(--badge-color-rose-rose-light-1)",
+ "color-rose-rose-light-2": "var(--badge-color-rose-rose-light-2)",
+ "color-rose-rose-light-3": "var(--badge-color-rose-rose-light-3)",
+ "color-rose-rose-thick-1": "var(--badge-color-rose-rose-thick-1)",
+ "color-rose-rose-thick-2": "var(--badge-color-rose-rose-thick-2)",
+ "color-rose-rose-thick-3": "var(--badge-color-rose-rose-thick-3)",
+ "color-papaya-papaya-light-1": "var(--badge-color-papaya-papaya-light-1)",
+ "color-papaya-papaya-light-2": "var(--badge-color-papaya-papaya-light-2)",
+ "color-papaya-papaya-light-3": "var(--badge-color-papaya-papaya-light-3)",
+ "color-papaya-papaya-thick-1": "var(--badge-color-papaya-papaya-thick-1)",
+ "color-papaya-papaya-thick-2": "var(--badge-color-papaya-papaya-thick-2)",
+ "color-papaya-papaya-thick-3": "var(--badge-color-papaya-papaya-thick-3)",
+ "color-tangerine-tangerine-light-1": "var(--badge-color-tangerine-tangerine-light-1)",
+ "color-tangerine-tangerine-light-2": "var(--badge-color-tangerine-tangerine-light-2)",
+ "color-tangerine-tangerine-light-3": "var(--badge-color-tangerine-tangerine-light-3)",
+ "color-tangerine-tangerine-thick-1": "var(--badge-color-tangerine-tangerine-thick-1)",
+ "color-tangerine-tangerine-thick-2": "var(--badge-color-tangerine-tangerine-thick-2)",
+ "color-tangerine-tangerine-thick-3": "var(--badge-color-tangerine-tangerine-thick-3)",
+ "color-mango-mango-light-1": "var(--badge-color-mango-mango-light-1)",
+ "color-mango-mango-light-2": "var(--badge-color-mango-mango-light-2)",
+ "color-mango-mango-light-3": "var(--badge-color-mango-mango-light-3)",
+ "color-mango-mango-thick-1": "var(--badge-color-mango-mango-thick-1)",
+ "color-mango-mango-thick-2": "var(--badge-color-mango-mango-thick-2)",
+ "color-mango-mango-thick-3": "var(--badge-color-mango-mango-thick-3)",
+ "color-lemon-lemon-light-1": "var(--badge-color-lemon-lemon-light-1)",
+ "color-lemon-lemon-light-2": "var(--badge-color-lemon-lemon-light-2)",
+ "color-lemon-lemon-light-3": "var(--badge-color-lemon-lemon-light-3)",
+ "color-lemon-lemon-thick-1": "var(--badge-color-lemon-lemon-thick-1)",
+ "color-lemon-lemon-thick-2": "var(--badge-color-lemon-lemon-thick-2)",
+ "color-lemon-lemon-thick-3": "var(--badge-color-lemon-lemon-thick-3)",
+ "color-olive-olive-light-1": "var(--badge-color-olive-olive-light-1)",
+ "color-olive-olive-light-2": "var(--badge-color-olive-olive-light-2)",
+ "color-olive-olive-light-3": "var(--badge-color-olive-olive-light-3)",
+ "color-olive-olive-thick-1": "var(--badge-color-olive-olive-thick-1)",
+ "color-olive-olive-thick-2": "var(--badge-color-olive-olive-thick-2)",
+ "color-olive-olive-thick-3": "var(--badge-color-olive-olive-thick-3)",
+ "color-lime-lime-light-1": "var(--badge-color-lime-lime-light-1)",
+ "color-lime-lime-light-2": "var(--badge-color-lime-lime-light-2)",
+ "color-lime-lime-light-3": "var(--badge-color-lime-lime-light-3)",
+ "color-lime-lime-thick-1": "var(--badge-color-lime-lime-thick-1)",
+ "color-lime-lime-thick-2": "var(--badge-color-lime-lime-thick-2)",
+ "color-lime-lime-thick-3": "var(--badge-color-lime-lime-thick-3)",
+ "color-grass-grass-light-1": "var(--badge-color-grass-grass-light-1)",
+ "color-grass-grass-light-2": "var(--badge-color-grass-grass-light-2)",
+ "color-grass-grass-light-3": "var(--badge-color-grass-grass-light-3)",
+ "color-grass-grass-thick-1": "var(--badge-color-grass-grass-thick-1)",
+ "color-grass-grass-thick-2": "var(--badge-color-grass-grass-thick-2)",
+ "color-grass-grass-thick-3": "var(--badge-color-grass-grass-thick-3)",
+ "color-forest-forest-light-1": "var(--badge-color-forest-forest-light-1)",
+ "color-forest-forest-light-2": "var(--badge-color-forest-forest-light-2)",
+ "color-forest-forest-light-3": "var(--badge-color-forest-forest-light-3)",
+ "color-forest-forest-thick-1": "var(--badge-color-forest-forest-thick-1)",
+ "color-forest-forest-thick-2": "var(--badge-color-forest-forest-thick-2)",
+ "color-forest-forest-thick-3": "var(--badge-color-forest-forest-thick-3)",
+ "color-jade-jade-light-1": "var(--badge-color-jade-jade-light-1)",
+ "color-jade-jade-light-2": "var(--badge-color-jade-jade-light-2)",
+ "color-jade-jade-light-3": "var(--badge-color-jade-jade-light-3)",
+ "color-jade-jade-thick-1": "var(--badge-color-jade-jade-thick-1)",
+ "color-jade-jade-thick-2": "var(--badge-color-jade-jade-thick-2)",
+ "color-jade-jade-thick-3": "var(--badge-color-jade-jade-thick-3)",
+ "color-aqua-aqua-light-1": "var(--badge-color-aqua-aqua-light-1)",
+ "color-aqua-aqua-light-2": "var(--badge-color-aqua-aqua-light-2)",
+ "color-aqua-aqua-light-3": "var(--badge-color-aqua-aqua-light-3)",
+ "color-aqua-aqua-thick-1": "var(--badge-color-aqua-aqua-thick-1)",
+ "color-aqua-aqua-thick-2": "var(--badge-color-aqua-aqua-thick-2)",
+ "color-aqua-aqua-thick-3": "var(--badge-color-aqua-aqua-thick-3)",
+ "color-azure-azure-light-1": "var(--badge-color-azure-azure-light-1)",
+ "color-azure-azure-light-2": "var(--badge-color-azure-azure-light-2)",
+ "color-azure-azure-light-3": "var(--badge-color-azure-azure-light-3)",
+ "color-azure-azure-thick-1": "var(--badge-color-azure-azure-thick-1)",
+ "color-azure-azure-thick-2": "var(--badge-color-azure-azure-thick-2)",
+ "color-azure-azure-thick-3": "var(--badge-color-azure-azure-thick-3)",
+ "color-denim-denim-light-1": "var(--badge-color-denim-denim-light-1)",
+ "color-denim-denim-light-2": "var(--badge-color-denim-denim-light-2)",
+ "color-denim-denim-light-3": "var(--badge-color-denim-denim-light-3)",
+ "color-denim-denim-thick-1": "var(--badge-color-denim-denim-thick-1)",
+ "color-denim-denim-thick-2": "var(--badge-color-denim-denim-thick-2)",
+ "color-denim-denim-thick-3": "var(--badge-color-denim-denim-thick-3)",
+ "color-mauve-mauve-light-1": "var(--badge-color-mauve-mauve-light-1)",
+ "color-mauve-mauve-thick-2": "var(--badge-color-mauve-mauve-thick-2)",
+ "color-mauve-mauve-thick-3": "var(--badge-color-mauve-mauve-thick-3)",
+ "color-mauve-mauve-thick-1": "var(--badge-color-mauve-mauve-thick-1)",
+ "color-lavender-lavender-light-1": "var(--badge-color-lavender-lavender-light-1)",
+ "color-lavender-lavender-light-2": "var(--badge-color-lavender-lavender-light-2)",
+ "color-lavender-lavender-light-3": "var(--badge-color-lavender-lavender-light-3)",
+ "color-lavender-lavender-thick-1": "var(--badge-color-lavender-lavender-thick-1)",
+ "color-lavender-lavender-thick-2": "var(--badge-color-lavender-lavender-thick-2)",
+ "color-lavender-lavender-thick-3": "var(--badge-color-lavender-lavender-thick-3)",
+ "color-lilac-liliac-light-1": "var(--badge-color-lilac-liliac-light-1)",
+ "color-lilac-liliac-light-2": "var(--badge-color-lilac-liliac-light-2)",
+ "color-lilac-liliac-light-3": "var(--badge-color-lilac-liliac-light-3)",
+ "color-lilac-liliac-thick-1": "var(--badge-color-lilac-liliac-thick-1)",
+ "color-lilac-liliac-thick-2": "var(--badge-color-lilac-liliac-thick-2)",
+ "color-lilac-liliac-thick-3": "var(--badge-color-lilac-liliac-thick-3)",
+ "color-mallow-mallow-light-1": "var(--badge-color-mallow-mallow-light-1)",
+ "color-mallow-mallow-light-2": "var(--badge-color-mallow-mallow-light-2)",
+ "color-mallow-mallow-light-3": "var(--badge-color-mallow-mallow-light-3)",
+ "color-mallow-mallow-thick-1": "var(--badge-color-mallow-mallow-thick-1)",
+ "color-mallow-mallow-thick-2": "var(--badge-color-mallow-mallow-thick-2)",
+ "color-mallow-mallow-thick-3": "var(--badge-color-mallow-mallow-thick-3)",
+ "color-camellia-camellia-light-1": "var(--badge-color-camellia-camellia-light-1)",
+ "color-camellia-camellia-light-2": "var(--badge-color-camellia-camellia-light-2)",
+ "color-camellia-camellia-light-3": "var(--badge-color-camellia-camellia-light-3)",
+ "color-camellia-camellia-thick-1": "var(--badge-color-camellia-camellia-thick-1)",
+ "color-camellia-camellia-thick-2": "var(--badge-color-camellia-camellia-thick-2)",
+ "color-camellia-camellia-thick-3": "var(--badge-color-camellia-camellia-thick-3)",
+ "color-smoke-smoke-light-1": "var(--badge-color-smoke-smoke-light-1)",
+ "color-smoke-smoke-light-2": "var(--badge-color-smoke-smoke-light-2)",
+ "color-smoke-smoke-light-3": "var(--badge-color-smoke-smoke-light-3)",
+ "color-smoke-smoke-thick-1": "var(--badge-color-smoke-smoke-thick-1)",
+ "color-smoke-smoke-thick-2": "var(--badge-color-smoke-smoke-thick-2)",
+ "color-smoke-smoke-thick-3": "var(--badge-color-smoke-smoke-thick-3)",
+ "color-iron-icon-light-1": "var(--badge-color-iron-icon-light-1)",
+ "color-iron-icon-light-2": "var(--badge-color-iron-icon-light-2)",
+ "color-iron-icon-light-3": "var(--badge-color-iron-icon-light-3)",
+ "color-iron-icon-thick-1": "var(--badge-color-iron-icon-thick-1)",
+ "color-iron-icon-thick-2": "var(--badge-color-iron-icon-thick-2)",
+ "color-iron-icon-thick-3": "var(--badge-color-iron-icon-thick-3)"
+ },
+ "brand": {
+ "skyline": "var(--brand-skyline)",
+ "aqua": "var(--brand-aqua)",
+ "violet": "var(--brand-violet)",
+ "amethyst": "var(--brand-amethyst)",
+ "berry": "var(--brand-berry)",
+ "coral": "var(--brand-coral)",
+ "golden": "var(--brand-golden)",
+ "amber": "var(--brand-amber)",
+ "lemon": "var(--brand-lemon)"
+ },
+ "other": {
+ "colors-text-highlight": "var(--other-colors-text-highlight)"
+ }
+};