mirror of
https://github.com/AppFlowy-IO/AppFlowy-Web.git
synced 2025-11-29 02:38:00 +08:00
chore: import new ui system (#73)
* chore: import new ui system * chore: modified padding and rounded * chore: remove vertical padding * chore: add shadow * chore: add shadcn popover (#76) * chore: add circle progress (#77) * chore: add input (#78) * feat: add shadcn toast (#80) * chore: initial import * chore: style * chore: important * chore: add dropdown menu (#81) * feat: add shadcn tooltip (#79) * chore: initial import * chore: style * chore: fix text size * chore: add tooltip shortcut * chore: code cleanup and add flex col * chore: add avatar (#82) * chore: add dialog (#83) --------- Co-authored-by: Richard Shiue <71320345+richardshiue@users.noreply.github.com>
This commit is contained in:
Kilu.He
21
components.json
Normal file
21
components.json
Normal file
@@ -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"
|
||||
}
|
||||
18
package.json
18
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",
|
||||
|
||||
253
pnpm-lock.yaml
generated
253
pnpm-lock.yaml
generated
@@ -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==}
|
||||
|
||||
|
||||
269
scripts/system-token/convert-tokens.cjs
Normal file
269
scripts/system-token/convert-tokens.cjs
Normal file
@@ -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!');
|
||||
984
scripts/system-token/primitive.json
Normal file
984
scripts/system-token/primitive.json
Normal file
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
1039
scripts/system-token/semantic.dark.json
Normal file
1039
scripts/system-token/semantic.dark.json
Normal file
File diff suppressed because it is too large
Load Diff
1039
scripts/system-token/semantic.light.json
Normal file
1039
scripts/system-token/semantic.light.json
Normal file
File diff suppressed because it is too large
Load Diff
5
src/assets/toast_error.svg
Normal file
5
src/assets/toast_error.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 18C8.89333 18 7.85333 17.79 6.88 17.37C5.90667 16.95 5.06 16.38 4.34 15.66C3.62 14.94 3.05 14.0933 2.63 13.12C2.21 12.1467 2 11.1067 2 10C2 8.89333 2.21 7.85333 2.63 6.88C3.05 5.90667 3.62 5.06 4.34 4.34C5.06 3.62 5.90667 3.05 6.88 2.63C7.85333 2.21 8.89333 2 10 2C11.1067 2 12.1467 2.21 13.12 2.63C14.0933 3.05 14.94 3.62 15.66 4.34C16.38 5.06 16.95 5.90667 17.37 6.88C17.79 7.85333 18 8.89333 18 10C18 11.1067 17.79 12.1467 17.37 13.12C16.95 14.0933 16.38 14.94 15.66 15.66C14.94 16.38 14.0933 16.95 13.12 17.37C12.1467 17.79 11.1067 18 10 18Z" fill="currentColor"/>
|
||||
<path d="M10 6C9.44772 6 9 6.44772 9 7V9.5C9 10.0523 9.44772 10.5 10 10.5C10.5523 10.5 11 10.0523 11 9.5V7C11 6.44772 10.5523 6 10 6Z" fill="white"/>
|
||||
<path d="M10 11.5C9.44772 11.5 9 11.9477 9 12.5C9 13.0523 9.44772 13.5 10 13.5C10.5523 13.5 11 13.0523 11 12.5C11 11.9477 10.5523 11.5 10 11.5Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 995 B |
4
src/assets/toast_success.svg
Normal file
4
src/assets/toast_success.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 18C8.89333 18 7.85333 17.79 6.88 17.37C5.90667 16.95 5.06 16.38 4.34 15.66C3.62 14.94 3.05 14.0933 2.63 13.12C2.21 12.1467 2 11.1067 2 10C2 8.89333 2.21 7.85333 2.63 6.88C3.05 5.90667 3.62 5.06 4.34 4.34C5.06 3.62 5.90667 3.05 6.88 2.63C7.85333 2.21 8.89333 2 10 2C11.1067 2 12.1467 2.21 13.12 2.63C14.0933 3.05 14.94 3.62 15.66 4.34C16.38 5.06 16.95 5.90667 17.37 6.88C17.79 7.85333 18 8.89333 18 10C18 11.1067 17.79 12.1467 17.37 13.12C16.95 14.0933 16.38 14.94 15.66 15.66C14.94 16.38 14.0933 16.95 13.12 17.37C12.1467 17.79 11.1067 18 10 18Z" fill="currentColor"/>
|
||||
<path d="M7.2823 9.41967L8.92823 11.1115L12.7177 7.21639C12.8581 7.07213 13.0367 7 13.2536 7C13.4705 7 13.6491 7.07213 13.7895 7.21639C13.9298 7.36066 14 7.54426 14 7.76721C14 7.99016 13.9298 8.17377 13.7895 8.31803L9.46412 12.7639C9.31101 12.9213 9.13238 13 8.92823 13C8.72408 13 8.54545 12.9213 8.39234 12.7639L6.21053 10.5213C6.07018 10.377 6 10.1934 6 9.97049C6 9.74754 6.07018 9.56393 6.21053 9.41967C6.35088 9.27541 6.52951 9.20328 6.74641 9.20328C6.96332 9.20328 7.14195 9.27541 7.2823 9.41967Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
5
src/assets/toast_warning.svg
Normal file
5
src/assets/toast_warning.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.31862 17.5C2.16679 17.5 2.02876 17.4618 1.90453 17.3854C1.78031 17.309 1.68369 17.2083 1.61467 17.0833C1.54566 16.9583 1.5077 16.8229 1.5008 16.6771C1.49389 16.5313 1.53185 16.3889 1.61467 16.25L9.27534 2.91667C9.35816 2.77778 9.46513 2.67361 9.59626 2.60417C9.72739 2.53472 9.86197 2.5 10 2.5C10.138 2.5 10.2726 2.53472 10.4037 2.60417C10.5349 2.67361 10.6418 2.77778 10.7247 2.91667L18.3853 16.25C18.4681 16.3889 18.5061 16.5313 18.4992 16.6771C18.4923 16.8229 18.4543 16.9583 18.3853 17.0833C18.3163 17.2083 18.2197 17.309 18.0955 17.3854C17.9712 17.4618 17.8332 17.5 17.6814 17.5H2.31862Z" fill="currentColor"/>
|
||||
<path d="M10 7.5C9.44772 7.5 9 7.94772 9 8.5V11C9 11.5523 9.44772 12 10 12C10.5523 12 11 11.5523 11 11V8.5C11 7.94772 10.5523 7.5 10 7.5Z" fill="white"/>
|
||||
<path d="M10 13C9.44772 13 9 13.4477 9 14C9 14.5523 9.44772 15 10 15C10.5523 15 11 14.5523 11 14C11 13.4477 10.5523 13 10 13Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -52,6 +52,7 @@ export function AppHeader ({
|
||||
}}
|
||||
className={'appflowy-top-bar transform-gpu sticky top-0 z-10 flex px-5'}
|
||||
>
|
||||
|
||||
<div className={'flex w-full items-center justify-between gap-4 overflow-hidden'}>
|
||||
{displayMenuButton && (
|
||||
<OutlinePopover
|
||||
|
||||
@@ -6,7 +6,7 @@ import dayjs from 'dayjs';
|
||||
import React, { useCallback, useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
function DocumentInfo({ viewId }: {
|
||||
function DocumentInfo ({ viewId }: {
|
||||
viewId: string;
|
||||
}) {
|
||||
const view = useAppView(viewId);
|
||||
@@ -20,19 +20,19 @@ function DocumentInfo({ viewId }: {
|
||||
const diffMin = now.diff(past, 'minute');
|
||||
const diffHour = now.diff(past, 'hour');
|
||||
|
||||
if(diffSec < 5) {
|
||||
if (diffSec < 5) {
|
||||
return t('globalComment.showSeconds', {
|
||||
count: 0,
|
||||
});
|
||||
}
|
||||
|
||||
if(diffMin < 1) {
|
||||
if (diffMin < 1) {
|
||||
return t('globalComment.showSeconds', {
|
||||
count: diffSec,
|
||||
});
|
||||
}
|
||||
|
||||
if(diffHour < 1) {
|
||||
if (diffHour < 1) {
|
||||
return t('globalComment.showMinutes', {
|
||||
count: diffMin,
|
||||
});
|
||||
@@ -45,7 +45,7 @@ function DocumentInfo({ viewId }: {
|
||||
const words = useMemo(() => 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)}
|
||||
</div>}
|
||||
|
||||
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -26,7 +26,6 @@ function RightMenu () {
|
||||
<Logo className={'h-6 w-6'} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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 (
|
||||
<BrowserRouter>
|
||||
<AppMain />
|
||||
<Toaster />
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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; }) {
|
||||
|
||||
90
src/components/ui/avatar.tsx
Normal file
90
src/components/ui/avatar.tsx
Normal file
@@ -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<typeof AvatarPrimitive.Root> & VariantProps<typeof avatarVariants>) {
|
||||
return (
|
||||
<AvatarPrimitive.Root
|
||||
data-slot="avatar"
|
||||
className={cn(
|
||||
avatarVariants({
|
||||
size,
|
||||
variant,
|
||||
shape,
|
||||
}),
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function AvatarImage ({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
|
||||
return (
|
||||
<AvatarPrimitive.Image
|
||||
data-slot="avatar-image"
|
||||
className={cn('aspect-square size-full', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function AvatarFallback ({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
|
||||
const isString = typeof children === 'string';
|
||||
const char = isString ? children.charAt(0) : '';
|
||||
|
||||
return (
|
||||
<AvatarPrimitive.Fallback
|
||||
data-slot="avatar-fallback"
|
||||
className={cn(
|
||||
'flex text-icon-primary w-full h-full items-center justify-center',
|
||||
isString ? 'bg-fill-tertiary' : '',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>{!isString ? children : char}</AvatarPrimitive.Fallback>
|
||||
);
|
||||
}
|
||||
|
||||
export { Avatar, AvatarImage, AvatarFallback };
|
||||
61
src/components/ui/button.tsx
Normal file
61
src/components/ui/button.tsx
Normal file
@@ -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<HTMLButtonElement, React.ComponentProps<'button'> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean
|
||||
}>(({
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
asChild = false,
|
||||
...props
|
||||
}, ref) => {
|
||||
const Comp = asChild ? Slot : 'button';
|
||||
|
||||
return (
|
||||
<Comp
|
||||
ref={ref}
|
||||
data-slot="button"
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
export { Button, buttonVariants };
|
||||
179
src/components/ui/dialog.tsx
Normal file
179
src/components/ui/dialog.tsx
Normal file
@@ -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<typeof DialogPrimitive.Root>) {
|
||||
return <DialogPrimitive.Root data-slot="dialog" {...props} />;
|
||||
}
|
||||
|
||||
function DialogTrigger ({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
||||
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
|
||||
}
|
||||
|
||||
function DialogPortal ({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
||||
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
|
||||
}
|
||||
|
||||
function DialogClose ({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
||||
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
|
||||
}
|
||||
|
||||
function DialogOverlay ({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
||||
return (
|
||||
<DialogPrimitive.Overlay
|
||||
data-slot="dialog-overlay"
|
||||
className={cn(
|
||||
// Positioning and stacking
|
||||
'fixed inset-0 z-50',
|
||||
|
||||
// Background styling
|
||||
'bg-surface-overlay', // Semi-transparent black background
|
||||
|
||||
// Animation states for opening/closing
|
||||
'data-[state=open]:animate-in data-[state=closed]:animate-out',
|
||||
'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
|
||||
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DialogContent ({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Content>) {
|
||||
return (
|
||||
<DialogPortal data-slot="dialog-portal">
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
data-slot="dialog-content"
|
||||
className={cn(
|
||||
// Base appearance
|
||||
'bg-background-primary rounded-500 shadow-dialog',
|
||||
|
||||
// Positioning and sizing
|
||||
'fixed top-[50%] left-[50%] z-50',
|
||||
'translate-x-[-50%] translate-y-[-50%]', // Center perfectly
|
||||
'w-full max-w-[calc(100%-2rem)] sm:max-w-lg', // Responsive width
|
||||
|
||||
// Internal layout
|
||||
'grid gap-3 px-5 py-4',
|
||||
|
||||
// Animation settings
|
||||
'duration-200',
|
||||
|
||||
// Animation states for opening/closing
|
||||
'data-[state=open]:animate-in data-[state=closed]:animate-out',
|
||||
'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
|
||||
'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
|
||||
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<DialogPrimitive.Close
|
||||
className={cn(
|
||||
// Positioning
|
||||
'absolute top-4 right-5',
|
||||
|
||||
// Base styling
|
||||
'rounded-300 text-icon-primary',
|
||||
|
||||
// Interactive states
|
||||
'focus:outline-hidden focus-visible:outline-none',
|
||||
'disabled:pointer-events-none disabled:text-text-tertiary',
|
||||
|
||||
// Open state styling
|
||||
'data-[state=open]:bg-fill-tertiary data-[state=open]:text-icon-primary',
|
||||
|
||||
// Transition
|
||||
'transition-opacity',
|
||||
|
||||
// SVG specific styling
|
||||
'[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:h-5 [&_svg]:w-5',
|
||||
)}
|
||||
>
|
||||
<XIcon />
|
||||
</DialogPrimitive.Close>
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
);
|
||||
}
|
||||
|
||||
function DialogHeader ({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-header"
|
||||
className={cn('flex flex-col gap-3 text-left', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DialogFooter ({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-footer"
|
||||
className={cn(
|
||||
'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DialogTitle ({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
||||
return (
|
||||
<DialogPrimitive.Title
|
||||
data-slot="dialog-title"
|
||||
className={cn('text-base font-bold', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DialogDescription ({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
||||
return (
|
||||
<DialogPrimitive.Description
|
||||
data-slot="dialog-description"
|
||||
className={cn('text-sm font-normal', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
};
|
||||
265
src/components/ui/dropdown-menu.tsx
Normal file
265
src/components/ui/dropdown-menu.tsx
Normal file
@@ -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<typeof DropdownMenuPrimitive.Root>) {
|
||||
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
|
||||
}
|
||||
|
||||
function DropdownMenuPortal ({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuTrigger ({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Trigger
|
||||
data-slot="dropdown-menu-trigger"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
type DropdownMenuContentProps =
|
||||
React.ComponentProps<typeof DropdownMenuPrimitive.Content>
|
||||
& React.ComponentProps<typeof DropdownMenuPrimitive.Portal>
|
||||
|
||||
function DropdownMenuContent ({
|
||||
className,
|
||||
sideOffset = 4,
|
||||
container,
|
||||
forceMount,
|
||||
...props
|
||||
}: DropdownMenuContentProps) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal
|
||||
container={container}
|
||||
forceMount={forceMount}
|
||||
>
|
||||
<DropdownMenuPrimitive.Content
|
||||
data-slot="dropdown-menu-content"
|
||||
sideOffset={sideOffset}
|
||||
avoidCollisions
|
||||
className={cn(
|
||||
// Base colors and appearance
|
||||
'bg-background-primary text-text-primary',
|
||||
'z-50 min-w-[8rem] rounded-400 p-2 shadow-menu',
|
||||
|
||||
// Size constraints and overflow behavior
|
||||
'max-h-(--radix-dropdown-menu-content-available-height)',
|
||||
'origin-(--radix-dropdown-menu-content-transform-origin)',
|
||||
'overflow-x-hidden overflow-y-auto',
|
||||
|
||||
// Animation states for opening/closing
|
||||
'data-[state=open]:animate-in data-[state=closed]:animate-out',
|
||||
'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
|
||||
'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
|
||||
|
||||
// Position-based animations
|
||||
'data-[side=bottom]:slide-in-from-top-2',
|
||||
'data-[side=left]:slide-in-from-right-2',
|
||||
'data-[side=right]:slide-in-from-left-2',
|
||||
'data-[side=top]:slide-in-from-bottom-2',
|
||||
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuGroup ({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuItem ({
|
||||
className,
|
||||
inset,
|
||||
variant = 'default',
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean
|
||||
variant?: 'default' | 'destructive'
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Item
|
||||
data-slot="dropdown-menu-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
// Focus states
|
||||
'focus:bg-fill-primary-alpha-5 focus-visible:outline-none focus:text-text-primary',
|
||||
|
||||
// Destructive variant styling
|
||||
'data-[variant=destructive]:text-text-error',
|
||||
'data-[variant=destructive]:focus:bg-fill-error-light',
|
||||
'data-[variant=destructive]:focus:text-text-error',
|
||||
'data-[variant=destructive]:*:[svg]:!text-text-error',
|
||||
|
||||
// Base layout and appearance
|
||||
'relative flex cursor-pointer items-center gap-2 rounded-300 px-2 py-1 min-h-[32px]',
|
||||
'text-sm text-text-primary outline-hidden select-none',
|
||||
|
||||
// Disabled state
|
||||
'data-[disabled]:pointer-events-none data-[disabled]:text-text-tertiary',
|
||||
|
||||
// Inset variant (with left padding for icons)
|
||||
'data-[inset]:pl-8',
|
||||
|
||||
// SVG/Icon styling
|
||||
'[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:h-5 [&_svg]:w-5 [&_svg]:text-icon-primary',
|
||||
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuLabel ({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Label
|
||||
data-slot="dropdown-menu-label"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
'px-2 py-1 text-xs flex items-center font-semibold min-h-[32px] data-[inset]:pl-8 text-text-tertiary',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuSeparator ({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
data-slot="dropdown-menu-separator"
|
||||
className={cn('-mx-2 my-2 border-border-grey-tertiary border-t', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuShortcut ({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<'span'>) {
|
||||
return (
|
||||
<span
|
||||
data-slot="dropdown-menu-shortcut"
|
||||
className={cn(
|
||||
'text-text-tertiary ml-auto text-xs tracking-widest',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuSub ({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
|
||||
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
|
||||
}
|
||||
|
||||
function DropdownMenuSubTrigger ({
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
data-slot="dropdown-menu-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
// Focus and open states
|
||||
'focus:bg-fill-primary-alpha-5 focus-visible:outline-none focus:text-text-primary',
|
||||
'data-[state=open]:bg-fill-primary-alpha-5 data-[state=open]:text-text-primary',
|
||||
|
||||
// Base layout and appearance
|
||||
'flex cursor-pointer items-center rounded-300 px-2 py-1 min-h-[32px]',
|
||||
'text-sm outline-hidden select-none',
|
||||
|
||||
// Inset variant (with left padding for icons)
|
||||
'data-[inset]:pl-8',
|
||||
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto text-icon-tertiary h-5 w-3" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuSubContent ({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
className={cn(
|
||||
// Base colors and appearance
|
||||
'bg-background-primary text-text-primary',
|
||||
'z-50 min-w-[8rem] rounded-400 p-2 shadow-menu',
|
||||
'origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden',
|
||||
|
||||
// Animation states for opening/closing
|
||||
'data-[state=open]:animate-in data-[state=closed]:animate-out',
|
||||
'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
|
||||
'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
|
||||
|
||||
// Position-based animations
|
||||
'data-[side=bottom]:slide-in-from-top-2',
|
||||
'data-[side=left]:slide-in-from-right-2',
|
||||
'data-[side=right]:slide-in-from-left-2',
|
||||
'data-[side=top]:slide-in-from-bottom-2',
|
||||
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuSubContent,
|
||||
};
|
||||
86
src/components/ui/input.tsx
Normal file
86
src/components/ui/input.tsx
Normal file
@@ -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<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'variant'>,
|
||||
VariantProps<typeof inputVariants> {}
|
||||
|
||||
function Input ({
|
||||
className,
|
||||
type,
|
||||
variant,
|
||||
size,
|
||||
...props
|
||||
}: InputProps) {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
inputVariants({ variant, size }),
|
||||
// Invalid state styling (applied via aria-invalid attribute)
|
||||
'aria-invalid:ring-border-error-thick aria-invalid:border-border-error-thick',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Input };
|
||||
38
src/components/ui/label.tsx
Normal file
38
src/components/ui/label.tsx
Normal file
@@ -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<typeof LabelPrimitive.Root>) {
|
||||
return (
|
||||
<LabelPrimitive.Root
|
||||
data-slot="label"
|
||||
className={cn(
|
||||
// Typography and base appearance
|
||||
'text-text-secondary text-xs leading-[16px] font-semibold',
|
||||
|
||||
// Layout
|
||||
'flex items-center gap-2',
|
||||
|
||||
// Interaction
|
||||
'select-none',
|
||||
|
||||
// Disabled states (for parent group)
|
||||
'group-data-[disabled=true]:pointer-events-none',
|
||||
'group-data-[disabled=true]:opacity-50',
|
||||
|
||||
// Disabled states (for peer elements)
|
||||
'peer-disabled:cursor-not-allowed',
|
||||
'peer-disabled:opacity-50',
|
||||
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Label };
|
||||
40
src/components/ui/popover.tsx
Normal file
40
src/components/ui/popover.tsx
Normal file
@@ -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<typeof PopoverPrimitive.Root>) {
|
||||
return <PopoverPrimitive.Root data-slot="popover" {...props} />;
|
||||
}
|
||||
|
||||
function PopoverTrigger ({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
|
||||
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
|
||||
}
|
||||
|
||||
function PopoverContent ({
|
||||
className,
|
||||
align = 'center',
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
|
||||
return (
|
||||
<PopoverPrimitive.Portal>
|
||||
<PopoverPrimitive.Content
|
||||
data-slot="popover-content"
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
'bg-surface-primary data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-popover-content-transform-origin) outline-hidden shadow-popover z-50 w-72 rounded-400 p-0',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</PopoverPrimitive.Portal>
|
||||
);
|
||||
}
|
||||
|
||||
function PopoverAnchor ({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
|
||||
return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
|
||||
}
|
||||
|
||||
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
|
||||
153
src/components/ui/progress.tsx
Normal file
153
src/components/ui/progress.tsx
Normal file
@@ -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<HTMLDivElement>,
|
||||
VariantProps<typeof progressVariants> {
|
||||
/** 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 (
|
||||
<div
|
||||
className={cn(progressVariants({ size, variant, isIndeterminate, className }))}
|
||||
{...props}
|
||||
>
|
||||
<svg
|
||||
width={dimensions}
|
||||
height={dimensions}
|
||||
viewBox={viewBox}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{ transform: 'rotate(-90deg)' }}
|
||||
>
|
||||
{/* Base Circle */}
|
||||
<circle
|
||||
r={radius}
|
||||
cx={dimensions / 2}
|
||||
cy={dimensions / 2}
|
||||
strokeWidth={strokeWidth}
|
||||
strokeDasharray={circumference}
|
||||
strokeDashoffset="0"
|
||||
className={cn(circleVariants({ variant }), isIndeterminate && 'hidden')}
|
||||
/>
|
||||
{/* Progress Circle */}
|
||||
<circle
|
||||
r={radius}
|
||||
cx={dimensions / 2}
|
||||
cy={dimensions / 2}
|
||||
strokeWidth={strokeWidth}
|
||||
strokeLinecap={strokeLinecap}
|
||||
strokeDasharray={circumference}
|
||||
strokeDashoffset={offset}
|
||||
className={cn(
|
||||
progressCircleVariants({
|
||||
variant,
|
||||
}),
|
||||
)}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
26
src/components/ui/separator.tsx
Normal file
26
src/components/ui/separator.tsx
Normal file
@@ -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<typeof SeparatorPrimitive.Root>) {
|
||||
return (
|
||||
<SeparatorPrimitive.Root
|
||||
data-slot="separator-root"
|
||||
decorative={decorative}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
'bg-border-grey-tertiary shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Separator };
|
||||
30
src/components/ui/sonner.tsx
Normal file
30
src/components/ui/sonner.tsx
Normal file
@@ -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 (
|
||||
<Sonner
|
||||
theme={theme as ToasterProps['theme']}
|
||||
className='toaster group'
|
||||
{...props}
|
||||
position='bottom-center'
|
||||
visibleToasts={1}
|
||||
toastOptions={{
|
||||
className:
|
||||
'!shadow-toast px-4 py-2 gap-2 bg-fill-primary border-none text-text-quaternary w-fit max-w-[360px] rounded-400',
|
||||
}}
|
||||
icons={{
|
||||
success: <ToastSuccess className='h-5 w-5 text-fill-success-thick' />,
|
||||
warning: <ToastWarning className='h-5 w-5 text-fill-warning-thick' />,
|
||||
error: <ToastError className='h-5 w-5 text-fill-error-thick' />,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export { Toaster };
|
||||
63
src/components/ui/tooltip.tsx
Normal file
63
src/components/ui/tooltip.tsx
Normal file
@@ -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<typeof TooltipPrimitive.Provider>) {
|
||||
return <TooltipPrimitive.Provider data-slot='tooltip-provider' delayDuration={delayDuration} {...props} />;
|
||||
}
|
||||
|
||||
function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<TooltipPrimitive.Root data-slot='tooltip' {...props} />
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
|
||||
function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
|
||||
return <TooltipPrimitive.Trigger data-slot='tooltip-trigger' {...props} />;
|
||||
}
|
||||
|
||||
function TooltipContent({
|
||||
className,
|
||||
sideOffset = 0,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
|
||||
return (
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipPrimitive.Content
|
||||
data-slot='tooltip-content'
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
// Animation behavior
|
||||
'animate-in fade-in-0 zoom-in-95',
|
||||
'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
|
||||
|
||||
// Slide-in effects based on tooltip position
|
||||
'data-[side=bottom]:slide-in-from-top-2',
|
||||
'data-[side=left]:slide-in-from-right-2',
|
||||
'data-[side=right]:slide-in-from-left-2',
|
||||
'data-[side=top]:slide-in-from-bottom-2',
|
||||
|
||||
// Styling and layout
|
||||
'text-balance shadow-tooltip z-50 origin-[--radix-tooltip-content-transform-origin]',
|
||||
'w-fit rounded-400 bg-fill-primary px-3 py-2 text-sm text-text-quaternary',
|
||||
'flex flex-col',
|
||||
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</TooltipPrimitive.Content>
|
||||
</TooltipPrimitive.Portal>
|
||||
);
|
||||
}
|
||||
|
||||
function TooltipShortcut({ className, ...props }: React.ComponentProps<'span'>) {
|
||||
return <span data-slot='tooltip-shortcut' className={cn('text-text-secondary', className)} {...props} />;
|
||||
}
|
||||
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipShortcut };
|
||||
6
src/lib/utils.ts
Normal file
6
src/lib/utils.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { clsx, type ClassValue } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
export function cn (...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
@@ -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(<App />);
|
||||
|
||||
33
src/styles/global.css
Normal file
33
src/styles/global.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
256
src/styles/variables/semantic.dark.css
Normal file
256
src/styles/variables/semantic.dark.css
Normal file
@@ -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;
|
||||
}
|
||||
256
src/styles/variables/semantic.light.css
Normal file
256
src/styles/variables/semantic.light.css
Normal file
@@ -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;
|
||||
}
|
||||
@@ -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: [],
|
||||
|
||||
@@ -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)',
|
||||
};
|
||||
|
||||
@@ -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)"
|
||||
}
|
||||
};
|
||||
|
||||
266
tailwind/new-colors.cjs
Normal file
266
tailwind/new-colors.cjs
Normal file
@@ -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)"
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user