@nightshadeui/stylesheets 2.3.0 → 2.4.0

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 (4) hide show
  1. package/inputs.css +16 -8
  2. package/package.json +1 -1
  3. package/variables/palette.css +171 -88
  4. package/variables/ui.css +16 -8
package/inputs.css CHANGED
@@ -4,7 +4,8 @@
4
4
  --input-surface-color: var(--ui-base-surface-color);
5
5
  --input-surface-color-top: var(--ui-base-surface-color-top);
6
6
  --input-surface-color-bottom: var(--ui-base-surface-color-bottom);
7
- --input-surface-color-text: var(--ui-base-surface-color-text);
7
+ --input-surface-text-color: var(--ui-base-surface-text-color);
8
+ --input-surface-text-shadow-color: var(--ui-base-surface-text-shadow-color);
8
9
  --input-border-color: var(--ui-base-border-color);
9
10
  --input-shadow-color: var(--ui-base-shadow-color);
10
11
  --input-focus-light-color: var(--ui-base-focus-light-color);
@@ -17,7 +18,8 @@
17
18
  --input-surface-color: var(--ui-inverse-surface-color);
18
19
  --input-surface-color-top: var(--ui-inverse-surface-color-top);
19
20
  --input-surface-color-bottom: var(--ui-inverse-surface-color-bottom);
20
- --input-surface-color-text: var(--ui-inverse-surface-color-text);
21
+ --input-surface-text-color: var(--ui-inverse-surface-text-color);
22
+ --input-surface-text-shadow-color: var(--ui-inverse-surface-text-shadow-color);
21
23
  --input-border-color: var(--ui-inverse-border-color);
22
24
  --input-shadow-color: var(--ui-inverse-shadow-color);
23
25
  --input-focus-light-color: var(--ui-inverse-focus-light-color);
@@ -30,7 +32,8 @@
30
32
  --input-surface-color: var(--ui-primary-surface-color);
31
33
  --input-surface-color-top: var(--ui-primary-surface-color-top);
32
34
  --input-surface-color-bottom: var(--ui-primary-surface-color-bottom);
33
- --input-surface-color-text: var(--ui-primary-surface-color-text);
35
+ --input-surface-text-color: var(--ui-primary-surface-text-color);
36
+ --input-surface-text-shadow-color: var(--ui-primary-surface-text-shadow-color);
34
37
  --input-border-color: var(--ui-primary-border-color);
35
38
  --input-shadow-color: var(--ui-primary-shadow-color);
36
39
  --input-focus-light-color: var(--ui-primary-focus-light-color);
@@ -43,7 +46,8 @@
43
46
  --input-surface-color: var(--ui-secondary-surface-color);
44
47
  --input-surface-color-top: var(--ui-secondary-surface-color-top);
45
48
  --input-surface-color-bottom: var(--ui-secondary-surface-color-bottom);
46
- --input-surface-color-text: var(--ui-secondary-surface-color-text);
49
+ --input-surface-text-color: var(--ui-secondary-surface-text-color);
50
+ --input-surface-text-shadow-color: var(--ui-secondary-surface-text-shadow-color);
47
51
  --input-border-color: var(--ui-secondary-border-color);
48
52
  --input-shadow-color: var(--ui-secondary-shadow-color);
49
53
  --input-focus-light-color: var(--ui-secondary-focus-light-color);
@@ -56,7 +60,8 @@
56
60
  --input-surface-color: var(--ui-tertiary-surface-color);
57
61
  --input-surface-color-top: var(--ui-tertiary-surface-color-top);
58
62
  --input-surface-color-bottom: var(--ui-tertiary-surface-color-bottom);
59
- --input-surface-color-text: var(--ui-tertiary-surface-color-text);
63
+ --input-surface-text-color: var(--ui-tertiary-surface-text-color);
64
+ --input-surface-text-shadow-color: var(--ui-tertiary-surface-text-shadow-color);
60
65
  --input-border-color: var(--ui-tertiary-border-color);
61
66
  --input-shadow-color: var(--ui-tertiary-shadow-color);
62
67
  --input-focus-light-color: var(--ui-tertiary-focus-light-color);
@@ -69,7 +74,8 @@
69
74
  --input-surface-color: var(--ui-success-surface-color);
70
75
  --input-surface-color-top: var(--ui-success-surface-color-top);
71
76
  --input-surface-color-bottom: var(--ui-success-surface-color-bottom);
72
- --input-surface-color-text: var(--ui-success-surface-color-text);
77
+ --input-surface-text-color: var(--ui-success-surface-text-color);
78
+ --input-surface-text-shadow-color: var(--ui-success-surface-text-shadow-color);
73
79
  --input-border-color: var(--ui-success-border-color);
74
80
  --input-shadow-color: var(--ui-success-shadow-color);
75
81
  --input-focus-light-color: var(--ui-success-focus-light-color);
@@ -82,7 +88,8 @@
82
88
  --input-surface-color: var(--ui-warning-surface-color);
83
89
  --input-surface-color-top: var(--ui-warning-surface-color-top);
84
90
  --input-surface-color-bottom: var(--ui-warning-surface-color-bottom);
85
- --input-surface-color-text: var(--ui-warning-surface-color-text);
91
+ --input-surface-text-color: var(--ui-warning-surface-text-color);
92
+ --input-surface-text-shadow-color: var(--ui-warning-surface-text-shadow-color);
86
93
  --input-border-color: var(--ui-warning-border-color);
87
94
  --input-shadow-color: var(--ui-warning-shadow-color);
88
95
  --input-focus-light-color: var(--ui-warning-focus-light-color);
@@ -95,7 +102,8 @@
95
102
  --input-surface-color: var(--ui-danger-surface-color);
96
103
  --input-surface-color-top: var(--ui-danger-surface-color-top);
97
104
  --input-surface-color-bottom: var(--ui-danger-surface-color-bottom);
98
- --input-surface-color-text: var(--ui-danger-surface-color-text);
105
+ --input-surface-text-color: var(--ui-danger-surface-text-color);
106
+ --input-surface-text-shadow-color: var(--ui-danger-surface-text-shadow-color);
99
107
  --input-border-color: var(--ui-danger-border-color);
100
108
  --input-shadow-color: var(--ui-danger-shadow-color);
101
109
  --input-focus-light-color: var(--ui-danger-focus-light-color);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nightshadeui/stylesheets",
3
- "version": "2.3.0",
3
+ "version": "2.4.0",
4
4
  "description": "Nightshade UI CSS",
5
5
  "author": "Boris Okunskiy",
6
6
  "license": "ISC",
package/variables/palette.css CHANGED
@@ -1,27 +1,70 @@
1
1
  :root {
2
- --color-base-light-0: hsl(280deg, 5%, 100%);
3
- --color-base-light-50: hsl(280deg, 5%, 98%);
4
- --color-base-light-100: hsl(280deg, 5%, 96%);
5
- --color-base-light-200: hsl(280deg, 5%, 92%);
6
- --color-base-light-300: hsl(280deg, 5%, 88%);
7
- --color-base-light-400: hsl(280deg, 5%, 80%);
8
- --color-base-light-500: hsl(280deg, 5%, 75%);
9
- --color-base-light-600: hsl(280deg, 5%, 64%);
10
- --color-base-light-700: hsl(280deg, 5%, 48%);
11
- --color-base-light-800: hsl(280deg, 5%, 32%);
12
- --color-base-light-900: hsl(280deg, 5%, 16%);
13
-
14
- --color-base-dark-0: hsl(280deg, 5%, 12%);
15
- --color-base-dark-50: hsl(280deg, 5%, 16%);
16
- --color-base-dark-100: hsl(280deg, 5%, 24%);
17
- --color-base-dark-200: hsl(280deg, 5%, 27%);
18
- --color-base-dark-300: hsl(280deg, 5%, 32%);
19
- --color-base-dark-400: hsl(280deg, 5%, 36%);
20
- --color-base-dark-500: hsl(280deg, 5%, 44%);
21
- --color-base-dark-600: hsl(280deg, 5%, 50%);
22
- --color-base-dark-700: hsl(280deg, 5%, 72%);
23
- --color-base-dark-800: hsl(280deg, 5%, 88%);
24
- --color-base-dark-900: hsl(280deg, 5%, 92%);
2
+
3
+ --l-0: 1;
4
+ --l-50: 0.98;
5
+ --l-100: 0.96;
6
+ --l-200: 0.9;
7
+ --l-300: 0.82;
8
+ --l-400: 0.72;
9
+ --l-500: 0.68;
10
+ --l-600: 0.60;
11
+ --l-700: 0.52;
12
+ --l-800: 0.44;
13
+ --l-900: 0.32;
14
+ --l-1000: 0.24;
15
+
16
+ --c-0: 0.01;
17
+ --c-50: 0.01;
18
+ --c-100: 0.03;
19
+ --c-200: 0.07;
20
+ --c-300: 0.10;
21
+ --c-400: 0.12;
22
+ --c-500: 0.12;
23
+ --c-600: 0.10;
24
+ --c-700: 0.07;
25
+ --c-800: 0.03;
26
+ --c-900: 0.01;
27
+ --c-1000: 0.01;
28
+
29
+ --color-base-text: var(--color-base-900);
30
+ --color-base-hue: 320deg;
31
+ --color-base-int: .1;
32
+ --color-base-lum: 1;
33
+
34
+ --color-inverse-text: var(--color-inverse-900);
35
+ --color-inverse-hue: 320deg;
36
+ --color-inverse-int: .1;
37
+ --color-inverse-lum: 1;
38
+
39
+ --color-primary-text: #fff;
40
+ --color-primary-hue: 340deg;
41
+ --color-primary-int: 1.2;
42
+ --color-primary-lum: 1;
43
+
44
+ --color-secondary-text: #fff;
45
+ --color-secondary-hue: 172deg;
46
+ --color-secondary-int: .72;
47
+ --color-secondary-lum: 1;
48
+
49
+ --color-tertiary-text: #fff;
50
+ --color-tertiary-hue: 8deg;
51
+ --color-tertiary-int: .4;
52
+ --color-tertiary-lum: 1;
53
+
54
+ --color-success-text: #fff;
55
+ --color-success-hue: 140deg;
56
+ --color-success-int: 1.2;
57
+ --color-success-lum: 1;
58
+
59
+ --color-warning-text: #fff;
60
+ --color-warning-hue: 78deg;
61
+ --color-warning-int: 1.33;
62
+ --color-warning-lum: 1.12;
63
+
64
+ --color-danger-text: #fff;
65
+ --color-danger-hue: 25deg;
66
+ --color-danger-int: 1.5;
67
+ --color-danger-lum: .9;
25
68
 
26
69
  --color-base-0: light-dark(var(--color-base-light-0), var(--color-base-dark-0));
27
70
  --color-base-50: light-dark(var(--color-base-light-50), var(--color-base-dark-50));
@@ -34,6 +77,7 @@
34
77
  --color-base-700: light-dark(var(--color-base-light-700), var(--color-base-dark-700));
35
78
  --color-base-800: light-dark(var(--color-base-light-800), var(--color-base-dark-800));
36
79
  --color-base-900: light-dark(var(--color-base-light-900), var(--color-base-dark-900));
80
+ --color-base-1000: light-dark(var(--color-base-light-1000), var(--color-base-dark-1000));
37
81
 
38
82
  --color-inverse-0: light-dark(var(--color-base-dark-0), var(--color-base-light-0));
39
83
  --color-inverse-50: light-dark(var(--color-base-dark-50), var(--color-base-light-50));
@@ -46,70 +90,109 @@
46
90
  --color-inverse-700: light-dark(var(--color-base-dark-700), var(--color-base-light-700));
47
91
  --color-inverse-800: light-dark(var(--color-base-dark-800), var(--color-base-light-800));
48
92
  --color-inverse-900: light-dark(var(--color-base-dark-900), var(--color-base-light-900));
93
+ --color-inverse-1000: light-dark(var(--color-base-dark-1000), var(--color-base-light-1000));
94
+
95
+ --color-base-light-0: oklch(calc(var(--l-0) * var(--color-base-lum)) calc(var(--c-0) * var(--color-base-int)) var(--color-base-hue));
96
+ --color-base-light-50: oklch(calc(var(--l-50) * var(--color-base-lum)) calc(var(--c-50) * var(--color-base-int)) var(--color-base-hue));
97
+ --color-base-light-100: oklch(calc(var(--l-100) * var(--color-base-lum)) calc(var(--c-100) * var(--color-base-int)) var(--color-base-hue));
98
+ --color-base-light-200: oklch(calc(var(--l-200) * var(--color-base-lum)) calc(var(--c-200) * var(--color-base-int)) var(--color-base-hue));
99
+ --color-base-light-300: oklch(calc(var(--l-300) * var(--color-base-lum)) calc(var(--c-300) * var(--color-base-int)) var(--color-base-hue));
100
+ --color-base-light-400: oklch(calc(var(--l-400) * var(--color-base-lum)) calc(var(--c-400) * var(--color-base-int)) var(--color-base-hue));
101
+ --color-base-light-500: oklch(calc(var(--l-500) * var(--color-base-lum)) calc(var(--c-500) * var(--color-base-int)) var(--color-base-hue));
102
+ --color-base-light-600: oklch(calc(var(--l-600) * var(--color-base-lum)) calc(var(--c-600) * var(--color-base-int)) var(--color-base-hue));
103
+ --color-base-light-700: oklch(calc(var(--l-700) * var(--color-base-lum)) calc(var(--c-700) * var(--color-base-int)) var(--color-base-hue));
104
+ --color-base-light-800: oklch(calc(var(--l-800) * var(--color-base-lum)) calc(var(--c-800) * var(--color-base-int)) var(--color-base-hue));
105
+ --color-base-light-900: oklch(calc(var(--l-900) * var(--color-base-lum)) calc(var(--c-900) * var(--color-base-int)) var(--color-base-hue));
106
+ --color-base-light-1000: oklch(calc(var(--l-1000) * var(--color-base-lum)) calc(var(--c-1000) * var(--color-base-int)) var(--color-base-hue));
107
+
108
+ --color-base-dark-0: oklch(calc(var(--l-1000) * var(--color-inverse-lum)) calc(var(--c-1000) * var(--color-inverse-int)) var(--color-inverse-hue));
109
+ --color-base-dark-50: oklch(calc(var(--l-900) * var(--color-inverse-lum)) calc(var(--c-900) * var(--color-inverse-int)) var(--color-inverse-hue));
110
+ --color-base-dark-100: oklch(calc(var(--l-800) * var(--color-inverse-lum)) calc(var(--c-800) * var(--color-inverse-int)) var(--color-inverse-hue));
111
+ --color-base-dark-200: oklch(calc(var(--l-700) * var(--color-inverse-lum)) calc(var(--c-700) * var(--color-inverse-int)) var(--color-inverse-hue));
112
+ --color-base-dark-300: oklch(calc(var(--l-600) * var(--color-inverse-lum)) calc(var(--c-600) * var(--color-inverse-int)) var(--color-inverse-hue));
113
+ --color-base-dark-400: oklch(calc(var(--l-500) * var(--color-inverse-lum)) calc(var(--c-500) * var(--color-inverse-int)) var(--color-inverse-hue));
114
+ --color-base-dark-500: oklch(calc(var(--l-400) * var(--color-inverse-lum)) calc(var(--c-400) * var(--color-inverse-int)) var(--color-inverse-hue));
115
+ --color-base-dark-600: oklch(calc(var(--l-300) * var(--color-inverse-lum)) calc(var(--c-300) * var(--color-inverse-int)) var(--color-inverse-hue));
116
+ --color-base-dark-700: oklch(calc(var(--l-200) * var(--color-inverse-lum)) calc(var(--c-200) * var(--color-inverse-int)) var(--color-inverse-hue));
117
+ --color-base-dark-800: oklch(calc(var(--l-100) * var(--color-inverse-lum)) calc(var(--c-100) * var(--color-inverse-int)) var(--color-inverse-hue));
118
+ --color-base-dark-900: oklch(calc(var(--l-50) * var(--color-inverse-lum)) calc(var(--c-50) * var(--color-inverse-int)) var(--color-inverse-hue));
119
+ --color-base-dark-1000: oklch(calc(var(--l-0) * var(--color-inverse-lum)) calc(var(--c-0) * var(--color-inverse-int)) var(--color-inverse-hue));
120
+
121
+ --color-primary-0: oklch(calc(var(--l-0) * var(--color-primary-lum)) calc(var(--c-0) * var(--color-primary-int)) var(--color-primary-hue));
122
+ --color-primary-50: oklch(calc(var(--l-50) * var(--color-primary-lum)) calc(var(--c-50) * var(--color-primary-int)) var(--color-primary-hue));
123
+ --color-primary-100: oklch(calc(var(--l-100) * var(--color-primary-lum)) calc(var(--c-100) * var(--color-primary-int)) var(--color-primary-hue));
124
+ --color-primary-200: oklch(calc(var(--l-200) * var(--color-primary-lum)) calc(var(--c-200) * var(--color-primary-int)) var(--color-primary-hue));
125
+ --color-primary-300: oklch(calc(var(--l-300) * var(--color-primary-lum)) calc(var(--c-300) * var(--color-primary-int)) var(--color-primary-hue));
126
+ --color-primary-400: oklch(calc(var(--l-400) * var(--color-primary-lum)) calc(var(--c-400) * var(--color-primary-int)) var(--color-primary-hue));
127
+ --color-primary-500: oklch(calc(var(--l-500) * var(--color-primary-lum)) calc(var(--c-500) * var(--color-primary-int)) var(--color-primary-hue));
128
+ --color-primary-600: oklch(calc(var(--l-600) * var(--color-primary-lum)) calc(var(--c-600) * var(--color-primary-int)) var(--color-primary-hue));
129
+ --color-primary-700: oklch(calc(var(--l-700) * var(--color-primary-lum)) calc(var(--c-700) * var(--color-primary-int)) var(--color-primary-hue));
130
+ --color-primary-800: oklch(calc(var(--l-800) * var(--color-primary-lum)) calc(var(--c-800) * var(--color-primary-int)) var(--color-primary-hue));
131
+ --color-primary-900: oklch(calc(var(--l-900) * var(--color-primary-lum)) calc(var(--c-900) * var(--color-primary-int)) var(--color-primary-hue));
132
+ --color-primary-1000: oklch(calc(var(--l-1000) * var(--color-primary-lum)) calc(var(--c-1000) * var(--color-primary-int)) var(--color-primary-hue));
133
+
134
+ --color-secondary-0: oklch(calc(var(--l-0) * var(--color-secondary-lum)) calc(var(--c-0) * var(--color-secondary-int)) var(--color-secondary-hue));
135
+ --color-secondary-50: oklch(calc(var(--l-50) * var(--color-secondary-lum)) calc(var(--c-50) * var(--color-secondary-int)) var(--color-secondary-hue));
136
+ --color-secondary-100: oklch(calc(var(--l-100) * var(--color-secondary-lum)) calc(var(--c-100) * var(--color-secondary-int)) var(--color-secondary-hue));
137
+ --color-secondary-200: oklch(calc(var(--l-200) * var(--color-secondary-lum)) calc(var(--c-200) * var(--color-secondary-int)) var(--color-secondary-hue));
138
+ --color-secondary-300: oklch(calc(var(--l-300) * var(--color-secondary-lum)) calc(var(--c-300) * var(--color-secondary-int)) var(--color-secondary-hue));
139
+ --color-secondary-400: oklch(calc(var(--l-400) * var(--color-secondary-lum)) calc(var(--c-400) * var(--color-secondary-int)) var(--color-secondary-hue));
140
+ --color-secondary-500: oklch(calc(var(--l-500) * var(--color-secondary-lum)) calc(var(--c-500) * var(--color-secondary-int)) var(--color-secondary-hue));
141
+ --color-secondary-600: oklch(calc(var(--l-600) * var(--color-secondary-lum)) calc(var(--c-600) * var(--color-secondary-int)) var(--color-secondary-hue));
142
+ --color-secondary-700: oklch(calc(var(--l-700) * var(--color-secondary-lum)) calc(var(--c-700) * var(--color-secondary-int)) var(--color-secondary-hue));
143
+ --color-secondary-800: oklch(calc(var(--l-800) * var(--color-secondary-lum)) calc(var(--c-800) * var(--color-secondary-int)) var(--color-secondary-hue));
144
+ --color-secondary-900: oklch(calc(var(--l-900) * var(--color-secondary-lum)) calc(var(--c-900) * var(--color-secondary-int)) var(--color-secondary-hue));
145
+ --color-secondary-1000: oklch(calc(var(--l-1000) * var(--color-secondary-lum)) calc(var(--c-1000) * var(--color-secondary-int)) var(--color-secondary-hue));
146
+
147
+ --color-tertiary-0: oklch(calc(var(--l-0) * var(--color-tertiary-lum)) calc(var(--c-0) * var(--color-tertiary-int)) var(--color-tertiary-hue));
148
+ --color-tertiary-50: oklch(calc(var(--l-50) * var(--color-tertiary-lum)) calc(var(--c-50) * var(--color-tertiary-int)) var(--color-tertiary-hue));
149
+ --color-tertiary-100: oklch(calc(var(--l-100) * var(--color-tertiary-lum)) calc(var(--c-100) * var(--color-tertiary-int)) var(--color-tertiary-hue));
150
+ --color-tertiary-200: oklch(calc(var(--l-200) * var(--color-tertiary-lum)) calc(var(--c-200) * var(--color-tertiary-int)) var(--color-tertiary-hue));
151
+ --color-tertiary-300: oklch(calc(var(--l-300) * var(--color-tertiary-lum)) calc(var(--c-300) * var(--color-tertiary-int)) var(--color-tertiary-hue));
152
+ --color-tertiary-400: oklch(calc(var(--l-400) * var(--color-tertiary-lum)) calc(var(--c-400) * var(--color-tertiary-int)) var(--color-tertiary-hue));
153
+ --color-tertiary-500: oklch(calc(var(--l-500) * var(--color-tertiary-lum)) calc(var(--c-500) * var(--color-tertiary-int)) var(--color-tertiary-hue));
154
+ --color-tertiary-600: oklch(calc(var(--l-600) * var(--color-tertiary-lum)) calc(var(--c-600) * var(--color-tertiary-int)) var(--color-tertiary-hue));
155
+ --color-tertiary-700: oklch(calc(var(--l-700) * var(--color-tertiary-lum)) calc(var(--c-700) * var(--color-tertiary-int)) var(--color-tertiary-hue));
156
+ --color-tertiary-800: oklch(calc(var(--l-800) * var(--color-tertiary-lum)) calc(var(--c-800) * var(--color-tertiary-int)) var(--color-tertiary-hue));
157
+ --color-tertiary-900: oklch(calc(var(--l-900) * var(--color-tertiary-lum)) calc(var(--c-900) * var(--color-tertiary-int)) var(--color-tertiary-hue));
158
+ --color-tertiary-1000: oklch(calc(var(--l-1000) * var(--color-tertiary-lum)) calc(var(--c-1000) * var(--color-tertiary-int)) var(--color-tertiary-hue));
159
+
160
+ --color-success-0: oklch(calc(var(--l-0) * var(--color-success-lum)) calc(var(--c-0) * var(--color-success-int)) var(--color-success-hue));
161
+ --color-success-50: oklch(calc(var(--l-50) * var(--color-success-lum)) calc(var(--c-50) * var(--color-success-int)) var(--color-success-hue));
162
+ --color-success-100: oklch(calc(var(--l-100) * var(--color-success-lum)) calc(var(--c-100) * var(--color-success-int)) var(--color-success-hue));
163
+ --color-success-200: oklch(calc(var(--l-200) * var(--color-success-lum)) calc(var(--c-200) * var(--color-success-int)) var(--color-success-hue));
164
+ --color-success-300: oklch(calc(var(--l-300) * var(--color-success-lum)) calc(var(--c-300) * var(--color-success-int)) var(--color-success-hue));
165
+ --color-success-400: oklch(calc(var(--l-400) * var(--color-success-lum)) calc(var(--c-400) * var(--color-success-int)) var(--color-success-hue));
166
+ --color-success-500: oklch(calc(var(--l-500) * var(--color-success-lum)) calc(var(--c-500) * var(--color-success-int)) var(--color-success-hue));
167
+ --color-success-600: oklch(calc(var(--l-600) * var(--color-success-lum)) calc(var(--c-600) * var(--color-success-int)) var(--color-success-hue));
168
+ --color-success-700: oklch(calc(var(--l-700) * var(--color-success-lum)) calc(var(--c-700) * var(--color-success-int)) var(--color-success-hue));
169
+ --color-success-800: oklch(calc(var(--l-800) * var(--color-success-lum)) calc(var(--c-800) * var(--color-success-int)) var(--color-success-hue));
170
+ --color-success-900: oklch(calc(var(--l-900) * var(--color-success-lum)) calc(var(--c-900) * var(--color-success-int)) var(--color-success-hue));
171
+ --color-success-1000: oklch(calc(var(--l-1000) * var(--color-success-lum)) calc(var(--c-1000) * var(--color-success-int)) var(--color-success-hue));
172
+
173
+ --color-warning-0: oklch(calc(var(--l-0) * var(--color-warning-lum)) calc(var(--c-0) * var(--color-warning-int)) var(--color-warning-hue));
174
+ --color-warning-50: oklch(calc(var(--l-50) * var(--color-warning-lum)) calc(var(--c-50) * var(--color-warning-int)) var(--color-warning-hue));
175
+ --color-warning-100: oklch(calc(var(--l-100) * var(--color-warning-lum)) calc(var(--c-100) * var(--color-warning-int)) var(--color-warning-hue));
176
+ --color-warning-200: oklch(calc(var(--l-200) * var(--color-warning-lum)) calc(var(--c-200) * var(--color-warning-int)) var(--color-warning-hue));
177
+ --color-warning-300: oklch(calc(var(--l-300) * var(--color-warning-lum)) calc(var(--c-300) * var(--color-warning-int)) var(--color-warning-hue));
178
+ --color-warning-400: oklch(calc(var(--l-400) * var(--color-warning-lum)) calc(var(--c-400) * var(--color-warning-int)) var(--color-warning-hue));
179
+ --color-warning-500: oklch(calc(var(--l-500) * var(--color-warning-lum)) calc(var(--c-500) * var(--color-warning-int)) var(--color-warning-hue));
180
+ --color-warning-600: oklch(calc(var(--l-600) * var(--color-warning-lum)) calc(var(--c-600) * var(--color-warning-int)) var(--color-warning-hue));
181
+ --color-warning-700: oklch(calc(var(--l-700) * var(--color-warning-lum)) calc(var(--c-700) * var(--color-warning-int)) var(--color-warning-hue));
182
+ --color-warning-800: oklch(calc(var(--l-800) * var(--color-warning-lum)) calc(var(--c-800) * var(--color-warning-int)) var(--color-warning-hue));
183
+ --color-warning-900: oklch(calc(var(--l-900) * var(--color-warning-lum)) calc(var(--c-900) * var(--color-warning-int)) var(--color-warning-hue));
184
+ --color-warning-1000: oklch(calc(var(--l-1000) * var(--color-warning-lum)) calc(var(--c-1000) * var(--color-warning-int)) var(--color-warning-hue));
49
185
 
50
- --color-primary-50: hsl(310deg, 25%, 96%);
51
- --color-primary-100: hsl(310deg, 25%, 92%);
52
- --color-primary-200: hsl(310deg, 25%, 88%);
53
- --color-primary-300: hsl(310deg, 25%, 75%);
54
- --color-primary-400: hsl(310deg, 25%, 64%);
55
- --color-primary-500: hsl(310deg, 25%, 50%);
56
- --color-primary-600: hsl(310deg, 25%, 44%);
57
- --color-primary-700: hsl(310deg, 25%, 36%);
58
- --color-primary-800: hsl(310deg, 25%, 28%);
59
- --color-primary-900: hsl(310deg, 25%, 16%);
60
-
61
- --color-secondary-50: hsl(176deg, 25%, 96%);
62
- --color-secondary-100: hsl(176deg, 25%, 92%);
63
- --color-secondary-200: hsl(176deg, 25%, 88%);
64
- --color-secondary-300: hsl(176deg, 25%, 75%);
65
- --color-secondary-400: hsl(176deg, 25%, 64%);
66
- --color-secondary-500: hsl(176deg, 25%, 50%);
67
- --color-secondary-600: hsl(176deg, 25%, 44%);
68
- --color-secondary-700: hsl(176deg, 25%, 36%);
69
- --color-secondary-800: hsl(176deg, 25%, 28%);
70
- --color-secondary-900: hsl(176deg, 25%, 16%);
71
-
72
- --color-tertiary-50: hsl(8deg, 12%, 96%);
73
- --color-tertiary-100: hsl(8deg, 12%, 92%);
74
- --color-tertiary-200: hsl(8deg, 12%, 88%);
75
- --color-tertiary-300: hsl(8deg, 12%, 75%);
76
- --color-tertiary-400: hsl(8deg, 12%, 64%);
77
- --color-tertiary-500: hsl(8deg, 12%, 50%);
78
- --color-tertiary-600: hsl(8deg, 12%, 44%);
79
- --color-tertiary-700: hsl(8deg, 12%, 36%);
80
- --color-tertiary-800: hsl(8deg, 12%, 28%);
81
- --color-tertiary-900: hsl(8deg, 12%, 16%);
82
-
83
- --color-success-50: hsl(112deg, 36%, 96%);
84
- --color-success-100: hsl(112deg, 36%, 92%);
85
- --color-success-200: hsl(112deg, 36%, 88%);
86
- --color-success-300: hsl(112deg, 36%, 75%);
87
- --color-success-400: hsl(112deg, 36%, 64%);
88
- --color-success-500: hsl(112deg, 36%, 50%);
89
- --color-success-600: hsl(112deg, 36%, 44%);
90
- --color-success-700: hsl(112deg, 36%, 36%);
91
- --color-success-800: hsl(112deg, 36%, 28%);
92
- --color-success-900: hsl(112deg, 36%, 16%);
93
-
94
- --color-warning-50: hsl(40deg, 90%, 96%);
95
- --color-warning-100: hsl(40deg, 90%, 92%);
96
- --color-warning-200: hsl(40deg, 90%, 88%);
97
- --color-warning-300: hsl(40deg, 90%, 75%);
98
- --color-warning-400: hsl(40deg, 90%, 64%);
99
- --color-warning-500: hsl(40deg, 90%, 50%);
100
- --color-warning-600: hsl(40deg, 90%, 44%);
101
- --color-warning-700: hsl(40deg, 90%, 36%);
102
- --color-warning-800: hsl(40deg, 90%, 28%);
103
- --color-warning-900: hsl(40deg, 90%, 16%);
104
-
105
- --color-danger-50: hsl(352deg, 64%, 96%);
106
- --color-danger-100: hsl(352deg, 64%, 92%);
107
- --color-danger-200: hsl(352deg, 64%, 88%);
108
- --color-danger-300: hsl(352deg, 64%, 75%);
109
- --color-danger-400: hsl(352deg, 64%, 64%);
110
- --color-danger-500: hsl(352deg, 64%, 50%);
111
- --color-danger-600: hsl(352deg, 64%, 44%);
112
- --color-danger-700: hsl(352deg, 64%, 36%);
113
- --color-danger-800: hsl(352deg, 64%, 28%);
114
- --color-danger-900: hsl(352deg, 64%, 16%);
186
+ --color-danger-0: oklch(calc(var(--l-0) * var(--color-danger-lum)) calc(var(--c-0) * var(--color-danger-int)) var(--color-danger-hue));
187
+ --color-danger-50: oklch(calc(var(--l-50) * var(--color-danger-lum)) calc(var(--c-50) * var(--color-danger-int)) var(--color-danger-hue));
188
+ --color-danger-100: oklch(calc(var(--l-100) * var(--color-danger-lum)) calc(var(--c-100) * var(--color-danger-int)) var(--color-danger-hue));
189
+ --color-danger-200: oklch(calc(var(--l-200) * var(--color-danger-lum)) calc(var(--c-200) * var(--color-danger-int)) var(--color-danger-hue));
190
+ --color-danger-300: oklch(calc(var(--l-300) * var(--color-danger-lum)) calc(var(--c-300) * var(--color-danger-int)) var(--color-danger-hue));
191
+ --color-danger-400: oklch(calc(var(--l-400) * var(--color-danger-lum)) calc(var(--c-400) * var(--color-danger-int)) var(--color-danger-hue));
192
+ --color-danger-500: oklch(calc(var(--l-500) * var(--color-danger-lum)) calc(var(--c-500) * var(--color-danger-int)) var(--color-danger-hue));
193
+ --color-danger-600: oklch(calc(var(--l-600) * var(--color-danger-lum)) calc(var(--c-600) * var(--color-danger-int)) var(--color-danger-hue));
194
+ --color-danger-700: oklch(calc(var(--l-700) * var(--color-danger-lum)) calc(var(--c-700) * var(--color-danger-int)) var(--color-danger-hue));
195
+ --color-danger-800: oklch(calc(var(--l-800) * var(--color-danger-lum)) calc(var(--c-800) * var(--color-danger-int)) var(--color-danger-hue));
196
+ --color-danger-900: oklch(calc(var(--l-900) * var(--color-danger-lum)) calc(var(--c-900) * var(--color-danger-int)) var(--color-danger-hue));
197
+ --color-danger-1000: oklch(calc(var(--l-1000) * var(--color-danger-lum)) calc(var(--c-1000) * var(--color-danger-int)) var(--color-danger-hue));
115
198
  }
package/variables/ui.css CHANGED
@@ -4,7 +4,8 @@
4
4
  --ui-base-surface-color: var(--color-base-0);
5
5
  --ui-base-surface-color-top: light-dark(var(--color-base-0), var(--color-base-200));
6
6
  --ui-base-surface-color-bottom: light-dark(var(--color-base-200), var(--color-base-0));
7
- --ui-base-surface-color-text: var(--color-base-900);
7
+ --ui-base-surface-text-color: var(--color-base-text);
8
+ --ui-base-surface-text-shadow-color: var(--color-base-200);
8
9
  --ui-base-border-color: var(--color-base-400);
9
10
  --ui-base-shadow-color: var(--shadow-color-medium);
10
11
  --ui-base-focus-light-color: light-dark(var(--color-secondary-300), var(--color-secondary-700));
@@ -15,7 +16,8 @@
15
16
  --ui-inverse-surface-color: var(--color-inverse-0);
16
17
  --ui-inverse-surface-color-top: light-dark(var(--color-inverse-200), var(--color-inverse-0));
17
18
  --ui-inverse-surface-color-bottom: light-dark(var(--color-inverse-0), var(--color-inverse-200));
18
- --ui-inverse-surface-color-text: var(--color-inverse-900);
19
+ --ui-inverse-surface-text-color: var(--color-inverse-text);
20
+ --ui-inverse-surface-text-shadow-color: var(--color-inverse-200);
19
21
  --ui-inverse-border-color: var(--color-inverse-0);
20
22
  --ui-inverse-shadow-color: light-dark(var(--color-inverse-700), var(--color-inverse-500));
21
23
  --ui-inverse-focus-light-color: light-dark(var(--color-secondary-300), var(--color-secondary-700));
@@ -26,7 +28,8 @@
26
28
  --ui-primary-surface-color: var(--color-primary-500);
27
29
  --ui-primary-surface-color-top: var(--color-primary-400);
28
30
  --ui-primary-surface-color-bottom: var(--color-primary-600);
29
- --ui-primary-surface-color-text: #fff;
31
+ --ui-primary-surface-text-color: var(--color-primary-text);
32
+ --ui-primary-surface-text-shadow-color: var(--color-primary-600);
30
33
  --ui-primary-border-color: light-dark(var(--color-primary-600), var(--color-primary-400));
31
34
  --ui-primary-shadow-color: var(--color-primary-800);
32
35
  --ui-primary-focus-light-color: light-dark(var(--color-primary-300), var(--color-primary-700));
@@ -37,7 +40,8 @@
37
40
  --ui-secondary-surface-color: var(--color-secondary-500);
38
41
  --ui-secondary-surface-color-top: var(--color-secondary-400);
39
42
  --ui-secondary-surface-color-bottom: var(--color-secondary-600);
40
- --ui-secondary-surface-color-text: #fff;
43
+ --ui-secondary-surface-text-color: var(--color-secondary-text);
44
+ --ui-secondary-surface-text-shadow-color: var(--color-secondary-600);
41
45
  --ui-secondary-border-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
42
46
  --ui-secondary-shadow-color: var(--color-secondary-800);
43
47
  --ui-secondary-focus-light-color: light-dark(var(--color-secondary-300), var(--color-secondary-700));
@@ -48,7 +52,8 @@
48
52
  --ui-tertiary-surface-color: var(--color-tertiary-500);
49
53
  --ui-tertiary-surface-color-top: var(--color-tertiary-400);
50
54
  --ui-tertiary-surface-color-bottom: var(--color-tertiary-600);
51
- --ui-tertiary-surface-color-text: #fff;
55
+ --ui-tertiary-surface-text-color: var(--color-tertiary-text);
56
+ --ui-tertiary-surface-text-shadow-color: var(--color-tertiary-600);
52
57
  --ui-tertiary-border-color: light-dark(var(--color-tertiary-600), var(--color-tertiary-400));
53
58
  --ui-tertiary-shadow-color: var(--color-tertiary-800);
54
59
  --ui-tertiary-focus-light-color: light-dark(var(--color-tertiary-300), var(--color-tertiary-700));
@@ -59,7 +64,8 @@
59
64
  --ui-success-surface-color: var(--color-success-500);
60
65
  --ui-success-surface-color-top: var(--color-success-400);
61
66
  --ui-success-surface-color-bottom: var(--color-success-600);
62
- --ui-success-surface-color-text: #fff;
67
+ --ui-success-surface-text-color: var(--color-success-text);
68
+ --ui-success-surface-text-shadow-color: var(--color-success-600);
63
69
  --ui-success-border-color: light-dark(var(--color-success-600), var(--color-success-400));
64
70
  --ui-success-shadow-color: var(--color-success-800);
65
71
  --ui-success-focus-light-color: light-dark(var(--color-success-300), var(--color-success-700));
@@ -70,7 +76,8 @@
70
76
  --ui-warning-surface-color: var(--color-warning-500);
71
77
  --ui-warning-surface-color-top: var(--color-warning-400);
72
78
  --ui-warning-surface-color-bottom: var(--color-warning-600);
73
- --ui-warning-surface-color-text: #fff;
79
+ --ui-warning-surface-text-color: var(--color-warning-text);
80
+ --ui-warning-surface-text-shadow-color: var(--color-warning-600);
74
81
  --ui-warning-border-color: light-dark(var(--color-warning-600), var(--color-warning-400));
75
82
  --ui-warning-shadow-color: var(--color-warning-800);
76
83
  --ui-warning-focus-light-color: light-dark(var(--color-warning-300), var(--color-warning-700));
@@ -81,7 +88,8 @@
81
88
  --ui-danger-surface-color: var(--color-danger-500);
82
89
  --ui-danger-surface-color-top: var(--color-danger-400);
83
90
  --ui-danger-surface-color-bottom: var(--color-danger-600);
84
- --ui-danger-surface-color-text: #fff;
91
+ --ui-danger-surface-text-color: var(--color-danger-text);
92
+ --ui-danger-surface-text-shadow-color: var(--color-danger-600);
85
93
  --ui-danger-border-color: light-dark(var(--color-danger-600), var(--color-danger-400));;
86
94
  --ui-danger-shadow-color: var(--color-danger-800);
87
95
  --ui-danger-focus-light-color: light-dark(var(--color-danger-300), var(--color-danger-700));