@asafarim/design-tokens 0.4.5 → 0.4.9

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.
Files changed (74) hide show
  1. package/CHANGELOG.md +26 -20
  2. package/LICENSE +21 -21
  3. package/README.md +139 -139
  4. package/css/index.css +8 -8
  5. package/css/tokens.base.css +168 -168
  6. package/css/tokens.dark.css +162 -162
  7. package/css/tokens.density.comfortable.css +6 -6
  8. package/css/tokens.density.compact.css +6 -6
  9. package/css/tokens.high-contrast.css +162 -162
  10. package/css/tokens.light.css +162 -162
  11. package/css/tokens.rtl.css +3 -3
  12. package/css/tokens.utilities.css +16 -16
  13. package/package.json +2 -2
  14. package/src/build/index.ts +5 -5
  15. package/src/build/toCssVars.ts +31 -31
  16. package/src/build/toJson.ts +20 -20
  17. package/src/build/validate.ts +90 -90
  18. package/src/core/types.ts +29 -29
  19. package/src/core/utils.ts +42 -42
  20. package/src/index.ts +60 -60
  21. package/src/themes/dark.ts +64 -64
  22. package/src/themes/densityComfortable.ts +11 -11
  23. package/src/themes/densityCompact.ts +11 -11
  24. package/src/themes/highContrast.ts +60 -60
  25. package/src/themes/index.ts +21 -21
  26. package/src/themes/light.ts +64 -64
  27. package/src/tokens/color/accent.ts +20 -20
  28. package/src/tokens/color/brand.ts +41 -41
  29. package/src/tokens/color/dataViz.ts +20 -20
  30. package/src/tokens/color/gradients.ts +13 -13
  31. package/src/tokens/color/index.ts +7 -7
  32. package/src/tokens/color/neutral.ts +32 -32
  33. package/src/tokens/color/overlays.ts +21 -21
  34. package/src/tokens/color/semantic.ts +36 -36
  35. package/src/tokens/effects/blur.ts +7 -7
  36. package/src/tokens/effects/index.ts +4 -4
  37. package/src/tokens/effects/opacity.ts +11 -11
  38. package/src/tokens/effects/shadows.ts +20 -20
  39. package/src/tokens/effects/textures.ts +11 -11
  40. package/src/tokens/iconography/index.ts +2 -2
  41. package/src/tokens/iconography/sizes.ts +9 -9
  42. package/src/tokens/iconography/strokeWidths.ts +7 -7
  43. package/src/tokens/index.ts +21 -21
  44. package/src/tokens/motion/duration.ts +7 -7
  45. package/src/tokens/motion/easing.ts +8 -8
  46. package/src/tokens/motion/index.ts +4 -4
  47. package/src/tokens/motion/reducedMotion.ts +9 -9
  48. package/src/tokens/motion/transitions.ts +16 -16
  49. package/src/tokens/shape/borders.ts +7 -7
  50. package/src/tokens/shape/index.ts +3 -3
  51. package/src/tokens/shape/radii.ts +9 -9
  52. package/src/tokens/shape/strokes.ts +7 -7
  53. package/src/tokens/spacing/density.ts +12 -12
  54. package/src/tokens/spacing/grid.ts +28 -28
  55. package/src/tokens/spacing/index.ts +5 -5
  56. package/src/tokens/spacing/layout.ts +20 -20
  57. package/src/tokens/spacing/rtl.ts +20 -20
  58. package/src/tokens/spacing/scale.ts +15 -15
  59. package/src/tokens/typography/families.ts +14 -14
  60. package/src/tokens/typography/headings.ts +29 -29
  61. package/src/tokens/typography/index.ts +7 -7
  62. package/src/tokens/typography/letterSpacing.ts +7 -7
  63. package/src/tokens/typography/lineHeights.ts +13 -13
  64. package/src/tokens/typography/responsive.ts +21 -21
  65. package/src/tokens/typography/sizes.ts +14 -14
  66. package/src/tokens/typography/weights.ts +13 -13
  67. package/src/tokens/ui/button.ts +25 -25
  68. package/src/tokens/ui/focus.ts +7 -7
  69. package/src/tokens/ui/index.ts +5 -5
  70. package/src/tokens/ui/input.ts +12 -12
  71. package/src/tokens/ui/overlay.ts +6 -6
  72. package/src/tokens/ui/surface.ts +9 -9
  73. package/src/tokens/zindex/index.ts +1 -1
  74. package/src/tokens/zindex/scale.ts +12 -12
package/css/tokens.density.comfortable.css CHANGED
@@ -1,6 +1,6 @@
1
- [data-density="comfortable"] {
2
- --asm-density-factor: 1.05;
3
- --asm-space-component-gap: 18px;
4
- --asm-space-control-padding-y: 10px;
5
- --asm-space-control-padding-x: 14px;
6
- }
1
+ [data-density="comfortable"] {
2
+ --asm-density-factor: 1.05;
3
+ --asm-space-component-gap: 18px;
4
+ --asm-space-control-padding-y: 10px;
5
+ --asm-space-control-padding-x: 14px;
6
+ }
package/css/tokens.density.compact.css CHANGED
@@ -1,6 +1,6 @@
1
- [data-density="compact"] {
2
- --asm-density-factor: 0.9;
3
- --asm-space-component-gap: 12px;
4
- --asm-space-control-padding-y: 6px;
5
- --asm-space-control-padding-x: 10px;
6
- }
1
+ [data-density="compact"] {
2
+ --asm-density-factor: 0.9;
3
+ --asm-space-component-gap: 12px;
4
+ --asm-space-control-padding-y: 6px;
5
+ --asm-space-control-padding-x: 10px;
6
+ }
package/css/tokens.high-contrast.css CHANGED
@@ -1,162 +1,162 @@
1
- [data-contrast="high"] {
2
- --asm-color-bg: #000000;
3
- --asm-color-surface: #000000;
4
- --asm-color-surface-muted: #000000;
5
- --asm-color-panel: #000000;
6
- --asm-color-modal: #000000;
7
-
8
- --asm-color-text: #FFFFFF;
9
- --asm-color-text-muted: #FFFFFF;
10
- --asm-color-border: #FFFFFF;
11
-
12
- /* Primary Color Scale */
13
- --asm-color-primary-0: #000000;
14
- --asm-color-primary-50: #1A1A1A;
15
- --asm-color-primary-100: #333333;
16
- --asm-color-primary-200: #4D4D4D;
17
- --asm-color-primary-300: #666666;
18
- --asm-color-primary-400: #808080;
19
- --asm-color-primary-500: #FFFFFF;
20
- --asm-color-primary-600: #FFFFFF;
21
- --asm-color-primary-700: #FFFFFF;
22
- --asm-color-primary-800: #FFFFFF;
23
- --asm-color-primary-900: #FFFFFF;
24
- --asm-color-primary-950: #FFFFFF;
25
-
26
- --asm-color-brand-primary-50: #FFFFFF;
27
- --asm-color-brand-primary-500: #FFFFFF;
28
- --asm-color-brand-primary-600: #FFFFFF;
29
- --asm-color-brand-primary-700: #FFFFFF;
30
-
31
- /* Warning Color Scale */
32
- --asm-color-warning-0: #000000;
33
- --asm-color-warning-50: #1A1A00;
34
- --asm-color-warning-100: #333300;
35
- --asm-color-warning-200: #666600;
36
- --asm-color-warning-300: #999900;
37
- --asm-color-warning-400: #CCCC00;
38
- --asm-color-warning-500: #FFFF00;
39
- --asm-color-warning-600: #FFFF33;
40
- --asm-color-warning-700: #FFFF66;
41
- --asm-color-warning-800: #FFFF99;
42
- --asm-color-warning-900: #FFFFCC;
43
- --asm-color-warning-950: #FFFFEE;
44
-
45
- /* Danger Color Scale */
46
- --asm-color-danger-0: #000000;
47
- --asm-color-danger-50: #1A0000;
48
- --asm-color-danger-100: #330000;
49
- --asm-color-danger-200: #660000;
50
- --asm-color-danger-300: #990000;
51
- --asm-color-danger-400: #CC0000;
52
- --asm-color-danger-500: #FF0000;
53
- --asm-color-danger-600: #FF3333;
54
- --asm-color-danger-700: #FF6666;
55
- --asm-color-danger-800: #FF9999;
56
- --asm-color-danger-900: #FFCCCC;
57
- --asm-color-danger-950: #FFEEEE;
58
-
59
- /* Info Color Scale */
60
- --asm-color-info-0: #000000;
61
- --asm-color-info-50: #001A1A;
62
- --asm-color-info-100: #003333;
63
- --asm-color-info-200: #006666;
64
- --asm-color-info-300: #009999;
65
- --asm-color-info-400: #00CCCC;
66
- --asm-color-info-500: #00FFFF;
67
- --asm-color-info-600: #33FFFF;
68
- --asm-color-info-700: #66FFFF;
69
- --asm-color-info-800: #99FFFF;
70
- --asm-color-info-900: #CCFFFF;
71
- --asm-color-info-950: #EEFFFF;
72
-
73
- /* Success Color Scale */
74
- --asm-color-success-0: #000000;
75
- --asm-color-success-50: #001A00;
76
- --asm-color-success-100: #003300;
77
- --asm-color-success-200: #006600;
78
- --asm-color-success-300: #009900;
79
- --asm-color-success-400: #00CC00;
80
- --asm-color-success-500: #00FF00;
81
- --asm-color-success-600: #33FF33;
82
- --asm-color-success-700: #66FF66;
83
- --asm-color-success-800: #99FF99;
84
- --asm-color-success-900: #CCFFCC;
85
- --asm-color-success-950: #EEFFEE;
86
-
87
- /* Purple Color Scale */
88
- --asm-color-purple-0: #000000;
89
- --asm-color-purple-50: #1A001A;
90
- --asm-color-purple-100: #330033;
91
- --asm-color-purple-200: #660066;
92
- --asm-color-purple-300: #990099;
93
- --asm-color-purple-400: #CC00CC;
94
- --asm-color-purple-500: #FF00FF;
95
- --asm-color-purple-600: #FF33FF;
96
- --asm-color-purple-700: #FF66FF;
97
- --asm-color-purple-800: #FF99FF;
98
- --asm-color-purple-900: #FFCCFF;
99
- --asm-color-purple-950: #FFEEFF;
100
-
101
- /* Neutral Color Scale */
102
- --asm-color-neutral-0: #000000;
103
- --asm-color-neutral-50: #1A1A1A;
104
- --asm-color-neutral-100: #333333;
105
- --asm-color-neutral-200: #4D4D4D;
106
- --asm-color-neutral-300: #666666;
107
- --asm-color-neutral-400: #808080;
108
- --asm-color-neutral-500: #999999;
109
- --asm-color-neutral-600: #B3B3B3;
110
- --asm-color-neutral-700: #CCCCCC;
111
- --asm-color-neutral-800: #E6E6E6;
112
- --asm-color-neutral-900: #FFFFFF;
113
- --asm-color-neutral-950: #FFFFFF;
114
-
115
- /* Secondary Color Scale */
116
- --asm-color-secondary-0: #000000;
117
- --asm-color-secondary-50: #001A1A;
118
- --asm-color-secondary-100: #003333;
119
- --asm-color-secondary-200: #004D4D;
120
- --asm-color-secondary-300: #006666;
121
- --asm-color-secondary-400: #008080;
122
- --asm-color-secondary-500: #00CCCC;
123
- --asm-color-secondary-600: #00FFFF;
124
- --asm-color-secondary-700: #66FFFF;
125
- --asm-color-secondary-800: #99FFFF;
126
- --asm-color-secondary-900: #CCFFFF;
127
- --asm-color-secondary-950: #EEFFFF;
128
-
129
- --asm-color-semantic-success: #00FF00;
130
- --asm-color-semantic-warning: #FFFF00;
131
- --asm-color-semantic-error: #FF0000;
132
- --asm-color-semantic-info: #00FFFF;
133
-
134
- --asm-color-button-primary-bg: #FFFFFF;
135
- --asm-color-button-primary-bg-hover: #FFFFFF;
136
- --asm-color-button-primary-bg-active: #FFFFFF;
137
- --asm-color-button-primary-text: #000000;
138
-
139
- --asm-color-button-secondary-bg: #000000;
140
- --asm-color-button-secondary-text: #FFFFFF;
141
-
142
- --asm-color-button-ghost-bg-hover: #FFFFFF;
143
-
144
- --asm-color-button-destructive-bg: #FF0000;
145
- --asm-color-button-destructive-text: #000000;
146
-
147
- --asm-color-button-disabled-bg: #000000;
148
- --asm-color-button-disabled-text: #FFFFFF;
149
-
150
- --asm-color-input-bg: #000000;
151
- --asm-color-input-text: #FFFFFF;
152
- --asm-color-input-border: #FFFFFF;
153
- --asm-color-input-border-hover: #FFFFFF;
154
- --asm-color-input-border-focus: #FFFFFF;
155
- --asm-color-input-placeholder: #FFFFFF;
156
- --asm-color-input-error-border: #FF0000;
157
- --asm-color-input-success-border: #00FF00;
158
-
159
- --asm-color-focus-ring: #FFFFFF;
160
-
161
- --asm-color-overlay-scrim: rgba(255, 255, 255, 0.9);
162
- }
1
+ [data-contrast="high"] {
2
+ --asm-color-bg: #000000;
3
+ --asm-color-surface: #000000;
4
+ --asm-color-surface-muted: #000000;
5
+ --asm-color-panel: #000000;
6
+ --asm-color-modal: #000000;
7
+
8
+ --asm-color-text: #FFFFFF;
9
+ --asm-color-text-muted: #FFFFFF;
10
+ --asm-color-border: #FFFFFF;
11
+
12
+ /* Primary Color Scale */
13
+ --asm-color-primary-0: #000000;
14
+ --asm-color-primary-50: #1A1A1A;
15
+ --asm-color-primary-100: #333333;
16
+ --asm-color-primary-200: #4D4D4D;
17
+ --asm-color-primary-300: #666666;
18
+ --asm-color-primary-400: #808080;
19
+ --asm-color-primary-500: #FFFFFF;
20
+ --asm-color-primary-600: #FFFFFF;
21
+ --asm-color-primary-700: #FFFFFF;
22
+ --asm-color-primary-800: #FFFFFF;
23
+ --asm-color-primary-900: #FFFFFF;
24
+ --asm-color-primary-950: #FFFFFF;
25
+
26
+ --asm-color-brand-primary-50: #FFFFFF;
27
+ --asm-color-brand-primary-500: #FFFFFF;
28
+ --asm-color-brand-primary-600: #FFFFFF;
29
+ --asm-color-brand-primary-700: #FFFFFF;
30
+
31
+ /* Warning Color Scale */
32
+ --asm-color-warning-0: #000000;
33
+ --asm-color-warning-50: #1A1A00;
34
+ --asm-color-warning-100: #333300;
35
+ --asm-color-warning-200: #666600;
36
+ --asm-color-warning-300: #999900;
37
+ --asm-color-warning-400: #CCCC00;
38
+ --asm-color-warning-500: #FFFF00;
39
+ --asm-color-warning-600: #FFFF33;
40
+ --asm-color-warning-700: #FFFF66;
41
+ --asm-color-warning-800: #FFFF99;
42
+ --asm-color-warning-900: #FFFFCC;
43
+ --asm-color-warning-950: #FFFFEE;
44
+
45
+ /* Danger Color Scale */
46
+ --asm-color-danger-0: #000000;
47
+ --asm-color-danger-50: #1A0000;
48
+ --asm-color-danger-100: #330000;
49
+ --asm-color-danger-200: #660000;
50
+ --asm-color-danger-300: #990000;
51
+ --asm-color-danger-400: #CC0000;
52
+ --asm-color-danger-500: #FF0000;
53
+ --asm-color-danger-600: #FF3333;
54
+ --asm-color-danger-700: #FF6666;
55
+ --asm-color-danger-800: #FF9999;
56
+ --asm-color-danger-900: #FFCCCC;
57
+ --asm-color-danger-950: #FFEEEE;
58
+
59
+ /* Info Color Scale */
60
+ --asm-color-info-0: #000000;
61
+ --asm-color-info-50: #001A1A;
62
+ --asm-color-info-100: #003333;
63
+ --asm-color-info-200: #006666;
64
+ --asm-color-info-300: #009999;
65
+ --asm-color-info-400: #00CCCC;
66
+ --asm-color-info-500: #00FFFF;
67
+ --asm-color-info-600: #33FFFF;
68
+ --asm-color-info-700: #66FFFF;
69
+ --asm-color-info-800: #99FFFF;
70
+ --asm-color-info-900: #CCFFFF;
71
+ --asm-color-info-950: #EEFFFF;
72
+
73
+ /* Success Color Scale */
74
+ --asm-color-success-0: #000000;
75
+ --asm-color-success-50: #001A00;
76
+ --asm-color-success-100: #003300;
77
+ --asm-color-success-200: #006600;
78
+ --asm-color-success-300: #009900;
79
+ --asm-color-success-400: #00CC00;
80
+ --asm-color-success-500: #00FF00;
81
+ --asm-color-success-600: #33FF33;
82
+ --asm-color-success-700: #66FF66;
83
+ --asm-color-success-800: #99FF99;
84
+ --asm-color-success-900: #CCFFCC;
85
+ --asm-color-success-950: #EEFFEE;
86
+
87
+ /* Purple Color Scale */
88
+ --asm-color-purple-0: #000000;
89
+ --asm-color-purple-50: #1A001A;
90
+ --asm-color-purple-100: #330033;
91
+ --asm-color-purple-200: #660066;
92
+ --asm-color-purple-300: #990099;
93
+ --asm-color-purple-400: #CC00CC;
94
+ --asm-color-purple-500: #FF00FF;
95
+ --asm-color-purple-600: #FF33FF;
96
+ --asm-color-purple-700: #FF66FF;
97
+ --asm-color-purple-800: #FF99FF;
98
+ --asm-color-purple-900: #FFCCFF;
99
+ --asm-color-purple-950: #FFEEFF;
100
+
101
+ /* Neutral Color Scale */
102
+ --asm-color-neutral-0: #000000;
103
+ --asm-color-neutral-50: #1A1A1A;
104
+ --asm-color-neutral-100: #333333;
105
+ --asm-color-neutral-200: #4D4D4D;
106
+ --asm-color-neutral-300: #666666;
107
+ --asm-color-neutral-400: #808080;
108
+ --asm-color-neutral-500: #999999;
109
+ --asm-color-neutral-600: #B3B3B3;
110
+ --asm-color-neutral-700: #CCCCCC;
111
+ --asm-color-neutral-800: #E6E6E6;
112
+ --asm-color-neutral-900: #FFFFFF;
113
+ --asm-color-neutral-950: #FFFFFF;
114
+
115
+ /* Secondary Color Scale */
116
+ --asm-color-secondary-0: #000000;
117
+ --asm-color-secondary-50: #001A1A;
118
+ --asm-color-secondary-100: #003333;
119
+ --asm-color-secondary-200: #004D4D;
120
+ --asm-color-secondary-300: #006666;
121
+ --asm-color-secondary-400: #008080;
122
+ --asm-color-secondary-500: #00CCCC;
123
+ --asm-color-secondary-600: #00FFFF;
124
+ --asm-color-secondary-700: #66FFFF;
125
+ --asm-color-secondary-800: #99FFFF;
126
+ --asm-color-secondary-900: #CCFFFF;
127
+ --asm-color-secondary-950: #EEFFFF;
128
+
129
+ --asm-color-semantic-success: #00FF00;
130
+ --asm-color-semantic-warning: #FFFF00;
131
+ --asm-color-semantic-error: #FF0000;
132
+ --asm-color-semantic-info: #00FFFF;
133
+
134
+ --asm-color-button-primary-bg: #FFFFFF;
135
+ --asm-color-button-primary-bg-hover: #FFFFFF;
136
+ --asm-color-button-primary-bg-active: #FFFFFF;
137
+ --asm-color-button-primary-text: #000000;
138
+
139
+ --asm-color-button-secondary-bg: #000000;
140
+ --asm-color-button-secondary-text: #FFFFFF;
141
+
142
+ --asm-color-button-ghost-bg-hover: #FFFFFF;
143
+
144
+ --asm-color-button-destructive-bg: #FF0000;
145
+ --asm-color-button-destructive-text: #000000;
146
+
147
+ --asm-color-button-disabled-bg: #000000;
148
+ --asm-color-button-disabled-text: #FFFFFF;
149
+
150
+ --asm-color-input-bg: #000000;
151
+ --asm-color-input-text: #FFFFFF;
152
+ --asm-color-input-border: #FFFFFF;
153
+ --asm-color-input-border-hover: #FFFFFF;
154
+ --asm-color-input-border-focus: #FFFFFF;
155
+ --asm-color-input-placeholder: #FFFFFF;
156
+ --asm-color-input-error-border: #FF0000;
157
+ --asm-color-input-success-border: #00FF00;
158
+
159
+ --asm-color-focus-ring: #FFFFFF;
160
+
161
+ --asm-color-overlay-scrim: rgba(255, 255, 255, 0.9);
162
+ }
package/css/tokens.light.css CHANGED
@@ -1,162 +1,162 @@
1
- :root {
2
- --asm-color-bg: #F9FAFB;
3
- --asm-color-surface: #FFFFFF;
4
- --asm-color-surface-muted: #F3F4F6;
5
- --asm-color-panel: #FFFFFF;
6
- --asm-color-modal: #FFFFFF;
7
-
8
- --asm-color-text: #111827;
9
- --asm-color-text-muted: #6B7280;
10
- --asm-color-border: #D1D5DB;
11
-
12
- /* Primary Color Scale */
13
- --asm-color-primary-0: #FFFFFF;
14
- --asm-color-primary-50: #EEF2FF;
15
- --asm-color-primary-100: #E0E7FF;
16
- --asm-color-primary-200: #C7D2FE;
17
- --asm-color-primary-300: #A5B4FC;
18
- --asm-color-primary-400: #818CF8;
19
- --asm-color-primary-500: #3A5AFE;
20
- --asm-color-primary-600: #304FFE;
21
- --asm-color-primary-700: #1E40FF;
22
- --asm-color-primary-800: #1E3A8A;
23
- --asm-color-primary-900: #1E293B;
24
- --asm-color-primary-950: #0F172A;
25
-
26
- --asm-color-brand-primary-50: #EEF2FF;
27
- --asm-color-brand-primary-500: #3A5AFE;
28
- --asm-color-brand-primary-600: #304FFE;
29
- --asm-color-brand-primary-700: #1E40FF;
30
-
31
- /* Warning Color Scale */
32
- --asm-color-warning-0: #FFFFFF;
33
- --asm-color-warning-50: #FFFBEB;
34
- --asm-color-warning-100: #FEF3C7;
35
- --asm-color-warning-200: #FDE68A;
36
- --asm-color-warning-300: #FCD34D;
37
- --asm-color-warning-400: #FBBF24;
38
- --asm-color-warning-500: #F59E0B;
39
- --asm-color-warning-600: #D97706;
40
- --asm-color-warning-700: #B45309;
41
- --asm-color-warning-800: #92400E;
42
- --asm-color-warning-900: #78350F;
43
- --asm-color-warning-950: #451A03;
44
-
45
- /* Danger Color Scale */
46
- --asm-color-danger-0: #FFFFFF;
47
- --asm-color-danger-50: #FEF2F2;
48
- --asm-color-danger-100: #FEE2E2;
49
- --asm-color-danger-200: #FECACA;
50
- --asm-color-danger-300: #FCA5A5;
51
- --asm-color-danger-400: #F87171;
52
- --asm-color-danger-500: #EF4444;
53
- --asm-color-danger-600: #DC2626;
54
- --asm-color-danger-700: #B91C1C;
55
- --asm-color-danger-800: #991B1B;
56
- --asm-color-danger-900: #7F1D1D;
57
- --asm-color-danger-950: #450A0A;
58
-
59
- /* Info Color Scale */
60
- --asm-color-info-0: #FFFFFF;
61
- --asm-color-info-50: #F0F9FF;
62
- --asm-color-info-100: #E0F2FE;
63
- --asm-color-info-200: #BAE6FD;
64
- --asm-color-info-300: #7DD3FC;
65
- --asm-color-info-400: #38BDF8;
66
- --asm-color-info-500: #0EA5E9;
67
- --asm-color-info-600: #0284C7;
68
- --asm-color-info-700: #0369A1;
69
- --asm-color-info-800: #075985;
70
- --asm-color-info-900: #0C4A6E;
71
- --asm-color-info-950: #082F49;
72
-
73
- /* Success Color Scale */
74
- --asm-color-success-0: #FFFFFF;
75
- --asm-color-success-50: #F0FDF4;
76
- --asm-color-success-100: #DCFCE7;
77
- --asm-color-success-200: #BBF7D0;
78
- --asm-color-success-300: #86EFAC;
79
- --asm-color-success-400: #4ADE80;
80
- --asm-color-success-500: #16A34A;
81
- --asm-color-success-600: #16A34A;
82
- --asm-color-success-700: #15803D;
83
- --asm-color-success-800: #166534;
84
- --asm-color-success-900: #14532D;
85
- --asm-color-success-950: #052E16;
86
-
87
- /* Purple Color Scale */
88
- --asm-color-purple-0: #FFFFFF;
89
- --asm-color-purple-50: #FAF5FF;
90
- --asm-color-purple-100: #F3E8FF;
91
- --asm-color-purple-200: #E9D5FF;
92
- --asm-color-purple-300: #D8B4FE;
93
- --asm-color-purple-400: #C084FC;
94
- --asm-color-purple-500: #A855F7;
95
- --asm-color-purple-600: #9333EA;
96
- --asm-color-purple-700: #7E22CE;
97
- --asm-color-purple-800: #6B21A8;
98
- --asm-color-purple-900: #581C87;
99
- --asm-color-purple-950: #3B0764;
100
-
101
- /* Neutral Color Scale */
102
- --asm-color-neutral-0: #FFFFFF;
103
- --asm-color-neutral-50: #F9FAFB;
104
- --asm-color-neutral-100: #F3F4F6;
105
- --asm-color-neutral-200: #E5E7EB;
106
- --asm-color-neutral-300: #D1D5DB;
107
- --asm-color-neutral-400: #9CA3AF;
108
- --asm-color-neutral-500: #6B7280;
109
- --asm-color-neutral-600: #4B5563;
110
- --asm-color-neutral-700: #374151;
111
- --asm-color-neutral-800: #1F2937;
112
- --asm-color-neutral-900: #111827;
113
- --asm-color-neutral-950: #030712;
114
-
115
- /* Secondary Color Scale */
116
- --asm-color-secondary-0: #FFFFFF;
117
- --asm-color-secondary-50: #F0FDFA;
118
- --asm-color-secondary-100: #CCFBF1;
119
- --asm-color-secondary-200: #99F6E4;
120
- --asm-color-secondary-300: #5EEAD4;
121
- --asm-color-secondary-400: #2DD4BF;
122
- --asm-color-secondary-500: #14B8A6;
123
- --asm-color-secondary-600: #0D9488;
124
- --asm-color-secondary-700: #0F766E;
125
- --asm-color-secondary-800: #115E59;
126
- --asm-color-secondary-900: #134E4A;
127
- --asm-color-secondary-950: #042F2E;
128
-
129
- --asm-color-semantic-success: #16A34A;
130
- --asm-color-semantic-warning: #F59E0B;
131
- --asm-color-semantic-error: #EF4444;
132
- --asm-color-semantic-info: #0EA5E9;
133
-
134
- --asm-color-button-primary-bg: #304FFE;
135
- --asm-color-button-primary-bg-hover: #1E40FF;
136
- --asm-color-button-primary-bg-active: #1E40FF;
137
- --asm-color-button-primary-text: #FFFFFF;
138
-
139
- --asm-color-button-secondary-bg: #FFFFFF;
140
- --asm-color-button-secondary-text: #111827;
141
-
142
- --asm-color-button-ghost-bg-hover: rgba(17, 24, 39, 0.06);
143
-
144
- --asm-color-button-destructive-bg: #EF4444;
145
- --asm-color-button-destructive-text: #FFFFFF;
146
-
147
- --asm-color-button-disabled-bg: #D1D5DB;
148
- --asm-color-button-disabled-text: #374151;
149
-
150
- --asm-color-input-bg: #FFFFFF;
151
- --asm-color-input-text: #111827;
152
- --asm-color-input-border: #D1D5DB;
153
- --asm-color-input-border-hover: #6B7280;
154
- --asm-color-input-border-focus: #304FFE;
155
- --asm-color-input-placeholder: #6B7280;
156
- --asm-color-input-error-border: #EF4444;
157
- --asm-color-input-success-border: #16A34A;
158
-
159
- --asm-color-focus-ring: #3A5AFE;
160
-
161
- --asm-color-overlay-scrim: rgba(17, 24, 39, 0.48);
162
- }
1
+ :root {
2
+ --asm-color-bg: #F9FAFB;
3
+ --asm-color-surface: #FFFFFF;
4
+ --asm-color-surface-muted: #F3F4F6;
5
+ --asm-color-panel: #FFFFFF;
6
+ --asm-color-modal: #FFFFFF;
7
+
8
+ --asm-color-text: #111827;
9
+ --asm-color-text-muted: #6B7280;
10
+ --asm-color-border: #D1D5DB;
11
+
12
+ /* Primary Color Scale */
13
+ --asm-color-primary-0: #FFFFFF;
14
+ --asm-color-primary-50: #EEF2FF;
15
+ --asm-color-primary-100: #E0E7FF;
16
+ --asm-color-primary-200: #C7D2FE;
17
+ --asm-color-primary-300: #A5B4FC;
18
+ --asm-color-primary-400: #818CF8;
19
+ --asm-color-primary-500: #3A5AFE;
20
+ --asm-color-primary-600: #304FFE;
21
+ --asm-color-primary-700: #1E40FF;
22
+ --asm-color-primary-800: #1E3A8A;
23
+ --asm-color-primary-900: #1E293B;
24
+ --asm-color-primary-950: #0F172A;
25
+
26
+ --asm-color-brand-primary-50: #EEF2FF;
27
+ --asm-color-brand-primary-500: #3A5AFE;
28
+ --asm-color-brand-primary-600: #304FFE;
29
+ --asm-color-brand-primary-700: #1E40FF;
30
+
31
+ /* Warning Color Scale */
32
+ --asm-color-warning-0: #FFFFFF;
33
+ --asm-color-warning-50: #FFFBEB;
34
+ --asm-color-warning-100: #FEF3C7;
35
+ --asm-color-warning-200: #FDE68A;
36
+ --asm-color-warning-300: #FCD34D;
37
+ --asm-color-warning-400: #FBBF24;
38
+ --asm-color-warning-500: #F59E0B;
39
+ --asm-color-warning-600: #D97706;
40
+ --asm-color-warning-700: #B45309;
41
+ --asm-color-warning-800: #92400E;
42
+ --asm-color-warning-900: #78350F;
43
+ --asm-color-warning-950: #451A03;
44
+
45
+ /* Danger Color Scale */
46
+ --asm-color-danger-0: #FFFFFF;
47
+ --asm-color-danger-50: #FEF2F2;
48
+ --asm-color-danger-100: #FEE2E2;
49
+ --asm-color-danger-200: #FECACA;
50
+ --asm-color-danger-300: #FCA5A5;
51
+ --asm-color-danger-400: #F87171;
52
+ --asm-color-danger-500: #EF4444;
53
+ --asm-color-danger-600: #DC2626;
54
+ --asm-color-danger-700: #B91C1C;
55
+ --asm-color-danger-800: #991B1B;
56
+ --asm-color-danger-900: #7F1D1D;
57
+ --asm-color-danger-950: #450A0A;
58
+
59
+ /* Info Color Scale */
60
+ --asm-color-info-0: #FFFFFF;
61
+ --asm-color-info-50: #F0F9FF;
62
+ --asm-color-info-100: #E0F2FE;
63
+ --asm-color-info-200: #BAE6FD;
64
+ --asm-color-info-300: #7DD3FC;
65
+ --asm-color-info-400: #38BDF8;
66
+ --asm-color-info-500: #0EA5E9;
67
+ --asm-color-info-600: #0284C7;
68
+ --asm-color-info-700: #0369A1;
69
+ --asm-color-info-800: #075985;
70
+ --asm-color-info-900: #0C4A6E;
71
+ --asm-color-info-950: #082F49;
72
+
73
+ /* Success Color Scale */
74
+ --asm-color-success-0: #FFFFFF;
75
+ --asm-color-success-50: #F0FDF4;
76
+ --asm-color-success-100: #DCFCE7;
77
+ --asm-color-success-200: #BBF7D0;
78
+ --asm-color-success-300: #86EFAC;
79
+ --asm-color-success-400: #4ADE80;
80
+ --asm-color-success-500: #16A34A;
81
+ --asm-color-success-600: #16A34A;
82
+ --asm-color-success-700: #15803D;
83
+ --asm-color-success-800: #166534;
84
+ --asm-color-success-900: #14532D;
85
+ --asm-color-success-950: #052E16;
86
+
87
+ /* Purple Color Scale */
88
+ --asm-color-purple-0: #FFFFFF;
89
+ --asm-color-purple-50: #FAF5FF;
90
+ --asm-color-purple-100: #F3E8FF;
91
+ --asm-color-purple-200: #E9D5FF;
92
+ --asm-color-purple-300: #D8B4FE;
93
+ --asm-color-purple-400: #C084FC;
94
+ --asm-color-purple-500: #A855F7;
95
+ --asm-color-purple-600: #9333EA;
96
+ --asm-color-purple-700: #7E22CE;
97
+ --asm-color-purple-800: #6B21A8;
98
+ --asm-color-purple-900: #581C87;
99
+ --asm-color-purple-950: #3B0764;
100
+
101
+ /* Neutral Color Scale */
102
+ --asm-color-neutral-0: #FFFFFF;
103
+ --asm-color-neutral-50: #F9FAFB;
104
+ --asm-color-neutral-100: #F3F4F6;
105
+ --asm-color-neutral-200: #E5E7EB;
106
+ --asm-color-neutral-300: #D1D5DB;
107
+ --asm-color-neutral-400: #9CA3AF;
108
+ --asm-color-neutral-500: #6B7280;
109
+ --asm-color-neutral-600: #4B5563;
110
+ --asm-color-neutral-700: #374151;
111
+ --asm-color-neutral-800: #1F2937;
112
+ --asm-color-neutral-900: #111827;
113
+ --asm-color-neutral-950: #030712;
114
+
115
+ /* Secondary Color Scale */
116
+ --asm-color-secondary-0: #FFFFFF;
117
+ --asm-color-secondary-50: #F0FDFA;
118
+ --asm-color-secondary-100: #CCFBF1;
119
+ --asm-color-secondary-200: #99F6E4;
120
+ --asm-color-secondary-300: #5EEAD4;
121
+ --asm-color-secondary-400: #2DD4BF;
122
+ --asm-color-secondary-500: #14B8A6;
123
+ --asm-color-secondary-600: #0D9488;
124
+ --asm-color-secondary-700: #0F766E;
125
+ --asm-color-secondary-800: #115E59;
126
+ --asm-color-secondary-900: #134E4A;
127
+ --asm-color-secondary-950: #042F2E;
128
+
129
+ --asm-color-semantic-success: #16A34A;
130
+ --asm-color-semantic-warning: #F59E0B;
131
+ --asm-color-semantic-error: #EF4444;
132
+ --asm-color-semantic-info: #0EA5E9;
133
+
134
+ --asm-color-button-primary-bg: #304FFE;
135
+ --asm-color-button-primary-bg-hover: #1E40FF;
136
+ --asm-color-button-primary-bg-active: #1E40FF;
137
+ --asm-color-button-primary-text: #FFFFFF;
138
+
139
+ --asm-color-button-secondary-bg: #FFFFFF;
140
+ --asm-color-button-secondary-text: #111827;
141
+
142
+ --asm-color-button-ghost-bg-hover: rgba(17, 24, 39, 0.06);
143
+
144
+ --asm-color-button-destructive-bg: #EF4444;
145
+ --asm-color-button-destructive-text: #FFFFFF;
146
+
147
+ --asm-color-button-disabled-bg: #D1D5DB;
148
+ --asm-color-button-disabled-text: #374151;
149
+
150
+ --asm-color-input-bg: #FFFFFF;
151
+ --asm-color-input-text: #111827;
152
+ --asm-color-input-border: #D1D5DB;
153
+ --asm-color-input-border-hover: #6B7280;
154
+ --asm-color-input-border-focus: #304FFE;
155
+ --asm-color-input-placeholder: #6B7280;
156
+ --asm-color-input-error-border: #EF4444;
157
+ --asm-color-input-success-border: #16A34A;
158
+
159
+ --asm-color-focus-ring: #3A5AFE;
160
+
161
+ --asm-color-overlay-scrim: rgba(17, 24, 39, 0.48);
162
+ }