@enterprise-ui-react/react 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +299 -0
- package/dist/.tsbuildinfo +1 -0
- package/dist/chunk-65BLOLLD.cjs +684 -0
- package/dist/chunk-EMI46XY6.js +669 -0
- package/dist/index.cjs +2331 -0
- package/dist/index.d.cts +586 -0
- package/dist/index.d.ts +586 -0
- package/dist/index.js +2112 -0
- package/dist/styles.css +1 -0
- package/dist/tokens/index.cjs +62 -0
- package/dist/tokens/index.d.cts +725 -0
- package/dist/tokens/index.d.ts +725 -0
- package/dist/tokens/index.js +1 -0
- package/figma-gradients.json +76 -0
- package/figma-tokens.json +89 -0
- package/figma-typography.json +39 -0
- package/package.json +133 -0
- package/src/styles/variables.css +272 -0
- package/src/styles/variables.scss +271 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { borders, breakpointValues, breakpoints, colors, darkShadows, elevation, mediaQueries, motion, semanticBorders, semanticSpacing, shadows, spacing, typography, zIndex } from '../chunk-EMI46XY6.js';
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "Enterprise UI Gradients",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"gradients": {
|
|
5
|
+
"primary": {
|
|
6
|
+
"blue-professional": {
|
|
7
|
+
"type": "linear",
|
|
8
|
+
"angle": 135,
|
|
9
|
+
"stops": [
|
|
10
|
+
{ "color": "#1E40AF", "position": 0 },
|
|
11
|
+
{ "color": "#3B82F6", "position": 100 }
|
|
12
|
+
]
|
|
13
|
+
},
|
|
14
|
+
"blue-purple": {
|
|
15
|
+
"type": "linear",
|
|
16
|
+
"angle": 135,
|
|
17
|
+
"stops": [
|
|
18
|
+
{ "color": "#2563EB", "position": 0 },
|
|
19
|
+
{ "color": "#7C3AED", "position": 100 }
|
|
20
|
+
]
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
"neutral": {
|
|
24
|
+
"light-gray": {
|
|
25
|
+
"type": "linear",
|
|
26
|
+
"angle": 180,
|
|
27
|
+
"stops": [
|
|
28
|
+
{ "color": "#F8FAFC", "position": 0 },
|
|
29
|
+
{ "color": "#F1F5F9", "position": 100 }
|
|
30
|
+
]
|
|
31
|
+
},
|
|
32
|
+
"white-gray": {
|
|
33
|
+
"type": "linear",
|
|
34
|
+
"angle": 180,
|
|
35
|
+
"stops": [
|
|
36
|
+
{ "color": "#FFFFFF", "position": 0 },
|
|
37
|
+
{ "color": "#F8FAFC", "position": 100 }
|
|
38
|
+
]
|
|
39
|
+
},
|
|
40
|
+
"dark": {
|
|
41
|
+
"type": "linear",
|
|
42
|
+
"angle": 180,
|
|
43
|
+
"stops": [
|
|
44
|
+
{ "color": "#111827", "position": 0 },
|
|
45
|
+
{ "color": "#0B1220", "position": 100 }
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
"semantic": {
|
|
50
|
+
"success": {
|
|
51
|
+
"type": "linear",
|
|
52
|
+
"angle": 135,
|
|
53
|
+
"stops": [
|
|
54
|
+
{ "color": "#10B981", "position": 0 },
|
|
55
|
+
{ "color": "#34D399", "position": 100 }
|
|
56
|
+
]
|
|
57
|
+
},
|
|
58
|
+
"warning": {
|
|
59
|
+
"type": "linear",
|
|
60
|
+
"angle": 135,
|
|
61
|
+
"stops": [
|
|
62
|
+
{ "color": "#F59E0B", "position": 0 },
|
|
63
|
+
{ "color": "#FBBF24", "position": 100 }
|
|
64
|
+
]
|
|
65
|
+
},
|
|
66
|
+
"error": {
|
|
67
|
+
"type": "linear",
|
|
68
|
+
"angle": 135,
|
|
69
|
+
"stops": [
|
|
70
|
+
{ "color": "#DC2626", "position": 0 },
|
|
71
|
+
{ "color": "#EF4444", "position": 100 }
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://schemas.figma.com/plugin-schemas/tokens.json",
|
|
3
|
+
"name": "Enterprise UI Design Tokens",
|
|
4
|
+
"version": "1.0.0",
|
|
5
|
+
"colors": {
|
|
6
|
+
"light": {
|
|
7
|
+
"background": {
|
|
8
|
+
"default": { "value": "#F8FAFC", "type": "color" },
|
|
9
|
+
"surface": { "value": "#FFFFFF", "type": "color" },
|
|
10
|
+
"elevated": { "value": "#FFFFFF", "type": "color" },
|
|
11
|
+
"hover": { "value": "#F1F5F9", "type": "color" },
|
|
12
|
+
"active": { "value": "#E2E8F0", "type": "color" }
|
|
13
|
+
},
|
|
14
|
+
"border": {
|
|
15
|
+
"default": { "value": "#E2E8F0", "type": "color" },
|
|
16
|
+
"strong": { "value": "#CBD5E1", "type": "color" },
|
|
17
|
+
"subtle": { "value": "#F1F5F9", "type": "color" },
|
|
18
|
+
"focus": { "value": "#93C5FD", "type": "color" }
|
|
19
|
+
},
|
|
20
|
+
"text": {
|
|
21
|
+
"primary": { "value": "#0F172A", "type": "color" },
|
|
22
|
+
"secondary": { "value": "#475569", "type": "color" },
|
|
23
|
+
"tertiary": { "value": "#64748B", "type": "color" },
|
|
24
|
+
"disabled": { "value": "#94A3B8", "type": "color" },
|
|
25
|
+
"link": { "value": "#2563EB", "type": "color" }
|
|
26
|
+
},
|
|
27
|
+
"primary": {
|
|
28
|
+
"default": { "value": "#2563EB", "type": "color" },
|
|
29
|
+
"hover": { "value": "#1D4ED8", "type": "color" },
|
|
30
|
+
"active": { "value": "#1E40AF", "type": "color" },
|
|
31
|
+
"light": { "value": "#DBEAFE", "type": "color" },
|
|
32
|
+
"dark": { "value": "#1E3A8A", "type": "color" }
|
|
33
|
+
},
|
|
34
|
+
"success": {
|
|
35
|
+
"default": { "value": "#10B981", "type": "color" },
|
|
36
|
+
"hover": { "value": "#059669", "type": "color" },
|
|
37
|
+
"light": { "value": "#D1FAE5", "type": "color" },
|
|
38
|
+
"dark": { "value": "#065F46", "type": "color" }
|
|
39
|
+
},
|
|
40
|
+
"warning": {
|
|
41
|
+
"default": { "value": "#F59E0B", "type": "color" },
|
|
42
|
+
"hover": { "value": "#D97706", "type": "color" },
|
|
43
|
+
"light": { "value": "#FEF3C7", "type": "color" },
|
|
44
|
+
"dark": { "value": "#92400E", "type": "color" }
|
|
45
|
+
},
|
|
46
|
+
"error": {
|
|
47
|
+
"default": { "value": "#EF4444", "type": "color" },
|
|
48
|
+
"hover": { "value": "#DC2626", "type": "color" },
|
|
49
|
+
"light": { "value": "#FEE2E2", "type": "color" },
|
|
50
|
+
"dark": { "value": "#991B1B", "type": "color" }
|
|
51
|
+
},
|
|
52
|
+
"info": {
|
|
53
|
+
"default": { "value": "#3B82F6", "type": "color" },
|
|
54
|
+
"hover": { "value": "#2563EB", "type": "color" },
|
|
55
|
+
"light": { "value": "#DBEAFE", "type": "color" },
|
|
56
|
+
"dark": { "value": "#1E40AF", "type": "color" }
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
"dark": {
|
|
60
|
+
"background": {
|
|
61
|
+
"default": { "value": "#0B1220", "type": "color" },
|
|
62
|
+
"surface": { "value": "#111827", "type": "color" },
|
|
63
|
+
"elevated": { "value": "#1F2937", "type": "color" },
|
|
64
|
+
"hover": { "value": "#1F2937", "type": "color" },
|
|
65
|
+
"active": { "value": "#374151", "type": "color" }
|
|
66
|
+
},
|
|
67
|
+
"border": {
|
|
68
|
+
"default": { "value": "#374151", "type": "color" },
|
|
69
|
+
"strong": { "value": "#4B5563", "type": "color" },
|
|
70
|
+
"subtle": { "value": "#1F2937", "type": "color" },
|
|
71
|
+
"focus": { "value": "#60A5FA", "type": "color" }
|
|
72
|
+
},
|
|
73
|
+
"text": {
|
|
74
|
+
"primary": { "value": "#E5E7EB", "type": "color" },
|
|
75
|
+
"secondary": { "value": "#9CA3AF", "type": "color" },
|
|
76
|
+
"tertiary": { "value": "#6B7280", "type": "color" },
|
|
77
|
+
"disabled": { "value": "#4B5563", "type": "color" },
|
|
78
|
+
"link": { "value": "#60A5FA", "type": "color" }
|
|
79
|
+
},
|
|
80
|
+
"primary": {
|
|
81
|
+
"default": { "value": "#3B82F6", "type": "color" },
|
|
82
|
+
"hover": { "value": "#60A5FA", "type": "color" },
|
|
83
|
+
"active": { "value": "#93C5FD", "type": "color" },
|
|
84
|
+
"light": { "value": "#1E3A8A", "type": "color" },
|
|
85
|
+
"dark": { "value": "#DBEAFE", "type": "color" }
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "Enterprise UI Typography",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"typography": {
|
|
5
|
+
"fontFamilies": {
|
|
6
|
+
"sans": {
|
|
7
|
+
"value": "Inter",
|
|
8
|
+
"type": "fontFamilies"
|
|
9
|
+
},
|
|
10
|
+
"mono": {
|
|
11
|
+
"value": "JetBrains Mono",
|
|
12
|
+
"type": "fontFamilies"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
"fontSizes": {
|
|
16
|
+
"xs": { "value": "12px", "type": "fontSizes" },
|
|
17
|
+
"sm": { "value": "14px", "type": "fontSizes" },
|
|
18
|
+
"base": { "value": "16px", "type": "fontSizes" },
|
|
19
|
+
"lg": { "value": "18px", "type": "fontSizes" },
|
|
20
|
+
"xl": { "value": "20px", "type": "fontSizes" },
|
|
21
|
+
"2xl": { "value": "24px", "type": "fontSizes" },
|
|
22
|
+
"3xl": { "value": "30px", "type": "fontSizes" },
|
|
23
|
+
"4xl": { "value": "36px", "type": "fontSizes" },
|
|
24
|
+
"5xl": { "value": "48px", "type": "fontSizes" },
|
|
25
|
+
"6xl": { "value": "60px", "type": "fontSizes" }
|
|
26
|
+
},
|
|
27
|
+
"fontWeights": {
|
|
28
|
+
"normal": { "value": "400", "type": "fontWeights" },
|
|
29
|
+
"medium": { "value": "500", "type": "fontWeights" },
|
|
30
|
+
"semibold": { "value": "600", "type": "fontWeights" },
|
|
31
|
+
"bold": { "value": "700", "type": "fontWeights" }
|
|
32
|
+
},
|
|
33
|
+
"lineHeights": {
|
|
34
|
+
"tight": { "value": "125%", "type": "lineHeights" },
|
|
35
|
+
"normal": { "value": "150%", "type": "lineHeights" },
|
|
36
|
+
"relaxed": { "value": "175%", "type": "lineHeights" }
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@enterprise-ui-react/react",
|
|
3
|
+
"version": "1.0.6",
|
|
4
|
+
"description": "Production-ready, enterprise-grade UI library for React 18+ and Next.js 15+",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"module": "./dist/index.mjs",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"import": "./dist/index.mjs",
|
|
12
|
+
"require": "./dist/index.js"
|
|
13
|
+
},
|
|
14
|
+
"./styles": "./dist/styles.css",
|
|
15
|
+
"./styles/variables.css": "./dist/styles/variables.css",
|
|
16
|
+
"./styles/variables.scss": "./dist/styles/variables.scss",
|
|
17
|
+
"./tokens": {
|
|
18
|
+
"import": "./dist/tokens/index.mjs",
|
|
19
|
+
"require": "./dist/tokens/index.js"
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
"files": [
|
|
23
|
+
"dist",
|
|
24
|
+
"src/styles/variables.css",
|
|
25
|
+
"src/styles/variables.scss",
|
|
26
|
+
"figma-tokens.json",
|
|
27
|
+
"figma-gradients.json",
|
|
28
|
+
"figma-typography.json",
|
|
29
|
+
"README.md",
|
|
30
|
+
"LICENSE"
|
|
31
|
+
],
|
|
32
|
+
"scripts": {
|
|
33
|
+
"dev": "next dev",
|
|
34
|
+
"build": "tsup && npm run build:css",
|
|
35
|
+
"build:css": "tailwindcss -i ./src/styles/global.css -o ./dist/styles.css --minify",
|
|
36
|
+
"type-check": "tsc --noEmit",
|
|
37
|
+
"lint": "eslint . --ext .ts,.tsx",
|
|
38
|
+
"format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
|
|
39
|
+
"test": "vitest",
|
|
40
|
+
"test:ui": "vitest --ui",
|
|
41
|
+
"storybook": "storybook dev -p 6006",
|
|
42
|
+
"build:storybook": "storybook build",
|
|
43
|
+
"prepublishOnly": "npm run type-check && npm run lint && npm run build",
|
|
44
|
+
"publish:check": "npm pack --dry-run",
|
|
45
|
+
"publish:local": "npm pack",
|
|
46
|
+
"version:patch": "npm version patch",
|
|
47
|
+
"version:minor": "npm version minor",
|
|
48
|
+
"version:major": "npm version major"
|
|
49
|
+
},
|
|
50
|
+
"keywords": [
|
|
51
|
+
"react",
|
|
52
|
+
"nextjs",
|
|
53
|
+
"ui",
|
|
54
|
+
"components",
|
|
55
|
+
"design-system",
|
|
56
|
+
"enterprise",
|
|
57
|
+
"typescript",
|
|
58
|
+
"accessibility",
|
|
59
|
+
"headless",
|
|
60
|
+
"tailwind",
|
|
61
|
+
"radix-ui",
|
|
62
|
+
"wcag",
|
|
63
|
+
"dark-mode",
|
|
64
|
+
"design-tokens"
|
|
65
|
+
],
|
|
66
|
+
"author": "Enterprise UI Team",
|
|
67
|
+
"license": "MIT",
|
|
68
|
+
"repository": {
|
|
69
|
+
"type": "git",
|
|
70
|
+
"url": "https://github.com/enterprise-ui/react.git"
|
|
71
|
+
},
|
|
72
|
+
"bugs": {
|
|
73
|
+
"url": "https://github.com/enterprise-ui/react/issues"
|
|
74
|
+
},
|
|
75
|
+
"homepage": "https://github.com/enterprise-ui/react#readme",
|
|
76
|
+
"publishConfig": {
|
|
77
|
+
"access": "public",
|
|
78
|
+
"registry": "https://registry.npmjs.org/"
|
|
79
|
+
},
|
|
80
|
+
"peerDependencies": {
|
|
81
|
+
"next": "^15.0.0",
|
|
82
|
+
"react": "^18.0.0",
|
|
83
|
+
"react-dom": "^18.0.0"
|
|
84
|
+
},
|
|
85
|
+
"peerDependenciesMeta": {
|
|
86
|
+
"next": {
|
|
87
|
+
"optional": true
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
"dependencies": {
|
|
91
|
+
"@enterprise-ui/react": "file:enterprise-ui-react-1.0.0.tgz",
|
|
92
|
+
"@radix-ui/react-accordion": "^1.1.2",
|
|
93
|
+
"@radix-ui/react-alert-dialog": "^1.0.5",
|
|
94
|
+
"@radix-ui/react-avatar": "^1.0.4",
|
|
95
|
+
"@radix-ui/react-checkbox": "^1.0.4",
|
|
96
|
+
"@radix-ui/react-dialog": "^1.0.5",
|
|
97
|
+
"@radix-ui/react-dropdown-menu": "^2.0.6",
|
|
98
|
+
"@radix-ui/react-label": "^2.0.2",
|
|
99
|
+
"@radix-ui/react-popover": "^1.0.7",
|
|
100
|
+
"@radix-ui/react-progress": "^1.0.3",
|
|
101
|
+
"@radix-ui/react-radio-group": "^1.1.3",
|
|
102
|
+
"@radix-ui/react-select": "^2.0.0",
|
|
103
|
+
"@radix-ui/react-separator": "^1.0.3",
|
|
104
|
+
"@radix-ui/react-slider": "^1.1.2",
|
|
105
|
+
"@radix-ui/react-switch": "^1.0.3",
|
|
106
|
+
"@radix-ui/react-tabs": "^1.0.4",
|
|
107
|
+
"@radix-ui/react-toast": "^1.1.5",
|
|
108
|
+
"@radix-ui/react-tooltip": "^1.0.7",
|
|
109
|
+
"class-variance-authority": "^0.7.0",
|
|
110
|
+
"clsx": "^2.1.0",
|
|
111
|
+
"framer-motion": "^11.0.3",
|
|
112
|
+
"lucide-react": "^0.309.0",
|
|
113
|
+
"tailwind-merge": "^2.2.0"
|
|
114
|
+
},
|
|
115
|
+
"devDependencies": {
|
|
116
|
+
"@types/node": "^20.11.0",
|
|
117
|
+
"@types/react": "^18.2.48",
|
|
118
|
+
"@types/react-dom": "^18.2.18",
|
|
119
|
+
"@typescript-eslint/eslint-plugin": "^7.0.0",
|
|
120
|
+
"@typescript-eslint/parser": "^7.0.0",
|
|
121
|
+
"autoprefixer": "^10.4.17",
|
|
122
|
+
"eslint": "^8.56.0",
|
|
123
|
+
"eslint-config-prettier": "^9.1.0",
|
|
124
|
+
"eslint-plugin-react": "^7.33.2",
|
|
125
|
+
"eslint-plugin-react-hooks": "^4.6.0",
|
|
126
|
+
"postcss": "^8.4.33",
|
|
127
|
+
"prettier": "^3.2.4",
|
|
128
|
+
"tailwindcss": "^3.4.1",
|
|
129
|
+
"tsup": "^8.0.1",
|
|
130
|
+
"typescript": "^5.3.3",
|
|
131
|
+
"vitest": "^1.2.0"
|
|
132
|
+
}
|
|
133
|
+
}
|
|
@@ -0,0 +1,272 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Enterprise UI - CSS Custom Properties
|
|
3
|
+
* Design tokens as CSS variables for easy theming and customization
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
/* ========================================
|
|
8
|
+
COLOR TOKENS - LIGHT THEME
|
|
9
|
+
======================================== */
|
|
10
|
+
|
|
11
|
+
/* Foundation Colors */
|
|
12
|
+
--color-background: #F8FAFC;
|
|
13
|
+
--color-background-surface: #FFFFFF;
|
|
14
|
+
--color-background-elevated: #FFFFFF;
|
|
15
|
+
--color-background-overlay: rgba(15, 23, 42, 0.5);
|
|
16
|
+
--color-background-hover: #F1F5F9;
|
|
17
|
+
--color-background-active: #E2E8F0;
|
|
18
|
+
|
|
19
|
+
/* Border Colors */
|
|
20
|
+
--color-border: #E2E8F0;
|
|
21
|
+
--color-border-strong: #CBD5E1;
|
|
22
|
+
--color-border-subtle: #F1F5F9;
|
|
23
|
+
--color-border-focus: #93C5FD;
|
|
24
|
+
|
|
25
|
+
/* Text Colors */
|
|
26
|
+
--color-text-primary: #0F172A;
|
|
27
|
+
--color-text-secondary: #475569;
|
|
28
|
+
--color-text-tertiary: #64748B;
|
|
29
|
+
--color-text-disabled: #94A3B8;
|
|
30
|
+
--color-text-inverse: #FFFFFF;
|
|
31
|
+
--color-text-link: #2563EB;
|
|
32
|
+
--color-text-link-hover: #1D4ED8;
|
|
33
|
+
|
|
34
|
+
/* Primary Colors */
|
|
35
|
+
--color-primary: #2563EB;
|
|
36
|
+
--color-primary-hover: #1D4ED8;
|
|
37
|
+
--color-primary-active: #1E40AF;
|
|
38
|
+
--color-primary-disabled: #93C5FD;
|
|
39
|
+
--color-primary-text: #FFFFFF;
|
|
40
|
+
--color-primary-light: #DBEAFE;
|
|
41
|
+
--color-primary-lighter: #EFF6FF;
|
|
42
|
+
--color-primary-dark: #1E3A8A;
|
|
43
|
+
|
|
44
|
+
/* Success Colors */
|
|
45
|
+
--color-success: #10B981;
|
|
46
|
+
--color-success-hover: #059669;
|
|
47
|
+
--color-success-active: #047857;
|
|
48
|
+
--color-success-disabled: #86EFAC;
|
|
49
|
+
--color-success-text: #FFFFFF;
|
|
50
|
+
--color-success-light: #D1FAE5;
|
|
51
|
+
--color-success-lighter: #ECFDF5;
|
|
52
|
+
--color-success-dark: #065F46;
|
|
53
|
+
|
|
54
|
+
/* Warning Colors */
|
|
55
|
+
--color-warning: #F59E0B;
|
|
56
|
+
--color-warning-hover: #D97706;
|
|
57
|
+
--color-warning-active: #B45309;
|
|
58
|
+
--color-warning-disabled: #FCD34D;
|
|
59
|
+
--color-warning-text: #FFFFFF;
|
|
60
|
+
--color-warning-light: #FEF3C7;
|
|
61
|
+
--color-warning-lighter: #FFFBEB;
|
|
62
|
+
--color-warning-dark: #92400E;
|
|
63
|
+
|
|
64
|
+
/* Error Colors */
|
|
65
|
+
--color-error: #EF4444;
|
|
66
|
+
--color-error-hover: #DC2626;
|
|
67
|
+
--color-error-active: #B91C1C;
|
|
68
|
+
--color-error-disabled: #FCA5A5;
|
|
69
|
+
--color-error-text: #FFFFFF;
|
|
70
|
+
--color-error-light: #FEE2E2;
|
|
71
|
+
--color-error-lighter: #FEF2F2;
|
|
72
|
+
--color-error-dark: #991B1B;
|
|
73
|
+
|
|
74
|
+
/* Info Colors */
|
|
75
|
+
--color-info: #3B82F6;
|
|
76
|
+
--color-info-hover: #2563EB;
|
|
77
|
+
--color-info-active: #1D4ED8;
|
|
78
|
+
--color-info-disabled: #93C5FD;
|
|
79
|
+
--color-info-text: #FFFFFF;
|
|
80
|
+
--color-info-light: #DBEAFE;
|
|
81
|
+
--color-info-lighter: #EFF6FF;
|
|
82
|
+
--color-info-dark: #1E40AF;
|
|
83
|
+
|
|
84
|
+
/* ========================================
|
|
85
|
+
GRADIENT TOKENS
|
|
86
|
+
======================================== */
|
|
87
|
+
|
|
88
|
+
/* Primary Gradients */
|
|
89
|
+
--gradient-primary: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);
|
|
90
|
+
--gradient-primary-vertical: linear-gradient(180deg, #1E40AF 0%, #2563EB 100%);
|
|
91
|
+
--gradient-premium: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
|
|
92
|
+
|
|
93
|
+
/* Neutral Gradients */
|
|
94
|
+
--gradient-subtle: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
|
|
95
|
+
--gradient-depth: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
|
|
96
|
+
--gradient-card: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
|
|
97
|
+
|
|
98
|
+
/* Semantic Gradients */
|
|
99
|
+
--gradient-success: linear-gradient(135deg, #10B981 0%, #34D399 100%);
|
|
100
|
+
--gradient-warning: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
|
|
101
|
+
--gradient-error: linear-gradient(135deg, #DC2626 0%, #EF4444 100%);
|
|
102
|
+
--gradient-info: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
|
|
103
|
+
|
|
104
|
+
/* Mesh Gradient */
|
|
105
|
+
--gradient-mesh:
|
|
106
|
+
radial-gradient(at 27% 37%, rgba(37, 99, 235, 0.05) 0px, transparent 50%),
|
|
107
|
+
radial-gradient(at 97% 21%, rgba(59, 130, 246, 0.05) 0px, transparent 50%),
|
|
108
|
+
radial-gradient(at 52% 99%, rgba(124, 58, 237, 0.05) 0px, transparent 50%),
|
|
109
|
+
radial-gradient(at 10% 29%, rgba(16, 185, 129, 0.05) 0px, transparent 50%);
|
|
110
|
+
|
|
111
|
+
/* ========================================
|
|
112
|
+
TYPOGRAPHY TOKENS
|
|
113
|
+
======================================== */
|
|
114
|
+
|
|
115
|
+
/* Font Families */
|
|
116
|
+
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
117
|
+
--font-mono: 'JetBrains Mono', 'SF Mono', Monaco, Inconsolata, 'Fira Code', Consolas, monospace;
|
|
118
|
+
|
|
119
|
+
/* Font Sizes */
|
|
120
|
+
--font-size-xs: 0.75rem; /* 12px */
|
|
121
|
+
--font-size-sm: 0.875rem; /* 14px */
|
|
122
|
+
--font-size-base: 1rem; /* 16px */
|
|
123
|
+
--font-size-lg: 1.125rem; /* 18px */
|
|
124
|
+
--font-size-xl: 1.25rem; /* 20px */
|
|
125
|
+
--font-size-2xl: 1.5rem; /* 24px */
|
|
126
|
+
--font-size-3xl: 1.875rem; /* 30px */
|
|
127
|
+
--font-size-4xl: 2.25rem; /* 36px */
|
|
128
|
+
--font-size-5xl: 3rem; /* 48px */
|
|
129
|
+
--font-size-6xl: 3.75rem; /* 60px */
|
|
130
|
+
|
|
131
|
+
/* Font Weights */
|
|
132
|
+
--font-weight-normal: 400;
|
|
133
|
+
--font-weight-medium: 500;
|
|
134
|
+
--font-weight-semibold: 600;
|
|
135
|
+
--font-weight-bold: 700;
|
|
136
|
+
|
|
137
|
+
/* Line Heights */
|
|
138
|
+
--line-height-tight: 1.25;
|
|
139
|
+
--line-height-normal: 1.5;
|
|
140
|
+
--line-height-relaxed: 1.75;
|
|
141
|
+
|
|
142
|
+
/* ========================================
|
|
143
|
+
SPACING TOKENS
|
|
144
|
+
======================================== */
|
|
145
|
+
|
|
146
|
+
--spacing-0: 0;
|
|
147
|
+
--spacing-0-5: 0.125rem; /* 2px */
|
|
148
|
+
--spacing-1: 0.25rem; /* 4px */
|
|
149
|
+
--spacing-1-5: 0.375rem; /* 6px */
|
|
150
|
+
--spacing-2: 0.5rem; /* 8px */
|
|
151
|
+
--spacing-2-5: 0.625rem; /* 10px */
|
|
152
|
+
--spacing-3: 0.75rem; /* 12px */
|
|
153
|
+
--spacing-3-5: 0.875rem; /* 14px */
|
|
154
|
+
--spacing-4: 1rem; /* 16px */
|
|
155
|
+
--spacing-5: 1.25rem; /* 20px */
|
|
156
|
+
--spacing-6: 1.5rem; /* 24px */
|
|
157
|
+
--spacing-7: 1.75rem; /* 28px */
|
|
158
|
+
--spacing-8: 2rem; /* 32px */
|
|
159
|
+
--spacing-10: 2.5rem; /* 40px */
|
|
160
|
+
--spacing-12: 3rem; /* 48px */
|
|
161
|
+
--spacing-16: 4rem; /* 64px */
|
|
162
|
+
--spacing-20: 5rem; /* 80px */
|
|
163
|
+
--spacing-24: 6rem; /* 96px */
|
|
164
|
+
|
|
165
|
+
/* ========================================
|
|
166
|
+
BORDER TOKENS
|
|
167
|
+
======================================== */
|
|
168
|
+
|
|
169
|
+
/* Border Widths */
|
|
170
|
+
--border-width-thin: 1px;
|
|
171
|
+
--border-width-medium: 2px;
|
|
172
|
+
--border-width-thick: 3px;
|
|
173
|
+
|
|
174
|
+
/* Border Radius */
|
|
175
|
+
--border-radius-none: 0;
|
|
176
|
+
--border-radius-sm: 0.25rem; /* 4px */
|
|
177
|
+
--border-radius-base: 0.375rem; /* 6px */
|
|
178
|
+
--border-radius-md: 0.5rem; /* 8px */
|
|
179
|
+
--border-radius-lg: 0.75rem; /* 12px */
|
|
180
|
+
--border-radius-xl: 1rem; /* 16px */
|
|
181
|
+
--border-radius-2xl: 1.5rem; /* 24px */
|
|
182
|
+
--border-radius-full: 9999px;
|
|
183
|
+
|
|
184
|
+
/* ========================================
|
|
185
|
+
SHADOW TOKENS
|
|
186
|
+
======================================== */
|
|
187
|
+
|
|
188
|
+
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
189
|
+
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
|
190
|
+
--shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
191
|
+
--shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
192
|
+
--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
193
|
+
--shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
194
|
+
--shadow-2xl: 0 30px 60px -15px rgba(0, 0, 0, 0.3);
|
|
195
|
+
--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
|
|
196
|
+
|
|
197
|
+
/* ========================================
|
|
198
|
+
Z-INDEX TOKENS
|
|
199
|
+
======================================== */
|
|
200
|
+
|
|
201
|
+
--z-base: 0;
|
|
202
|
+
--z-dropdown: 1000;
|
|
203
|
+
--z-sticky: 1100;
|
|
204
|
+
--z-fixed: 1200;
|
|
205
|
+
--z-popover: 1300;
|
|
206
|
+
--z-tooltip: 1400;
|
|
207
|
+
--z-overlay: 1500;
|
|
208
|
+
--z-modal: 1600;
|
|
209
|
+
--z-toast: 1700;
|
|
210
|
+
|
|
211
|
+
/* ========================================
|
|
212
|
+
TRANSITION TOKENS
|
|
213
|
+
======================================== */
|
|
214
|
+
|
|
215
|
+
--transition-fast: 100ms;
|
|
216
|
+
--transition-base: 200ms;
|
|
217
|
+
--transition-moderate: 300ms;
|
|
218
|
+
--transition-slow: 400ms;
|
|
219
|
+
|
|
220
|
+
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
221
|
+
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
222
|
+
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
/* ========================================
|
|
226
|
+
DARK THEME
|
|
227
|
+
======================================== */
|
|
228
|
+
|
|
229
|
+
.dark {
|
|
230
|
+
/* Foundation Colors */
|
|
231
|
+
--color-background: #0B1220;
|
|
232
|
+
--color-background-surface: #111827;
|
|
233
|
+
--color-background-elevated: #1F2937;
|
|
234
|
+
--color-background-overlay: rgba(0, 0, 0, 0.7);
|
|
235
|
+
--color-background-hover: #1F2937;
|
|
236
|
+
--color-background-active: #374151;
|
|
237
|
+
|
|
238
|
+
/* Border Colors */
|
|
239
|
+
--color-border: #374151;
|
|
240
|
+
--color-border-strong: #4B5563;
|
|
241
|
+
--color-border-subtle: #1F2937;
|
|
242
|
+
--color-border-focus: #60A5FA;
|
|
243
|
+
|
|
244
|
+
/* Text Colors */
|
|
245
|
+
--color-text-primary: #E5E7EB;
|
|
246
|
+
--color-text-secondary: #9CA3AF;
|
|
247
|
+
--color-text-tertiary: #6B7280;
|
|
248
|
+
--color-text-disabled: #4B5563;
|
|
249
|
+
--color-text-inverse: #0F172A;
|
|
250
|
+
--color-text-link: #60A5FA;
|
|
251
|
+
--color-text-link-hover: #93C5FD;
|
|
252
|
+
|
|
253
|
+
/* Primary Colors */
|
|
254
|
+
--color-primary: #3B82F6;
|
|
255
|
+
--color-primary-hover: #60A5FA;
|
|
256
|
+
--color-primary-active: #93C5FD;
|
|
257
|
+
--color-primary-disabled: #1E40AF;
|
|
258
|
+
--color-primary-light: #1E3A8A;
|
|
259
|
+
--color-primary-dark: #DBEAFE;
|
|
260
|
+
|
|
261
|
+
/* Gradients for Dark Mode */
|
|
262
|
+
--gradient-subtle: linear-gradient(180deg, #111827 0%, #0B1220 100%);
|
|
263
|
+
--gradient-depth: linear-gradient(180deg, #1F2937 0%, #111827 100%);
|
|
264
|
+
|
|
265
|
+
/* Shadows for Dark Mode */
|
|
266
|
+
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
267
|
+
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
268
|
+
--shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
|
|
269
|
+
--shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
|
|
270
|
+
--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
|
|
271
|
+
--shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
|
|
272
|
+
}
|