@nightshadeui/stylesheets 2.2.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 (14) hide show
  1. package/index.css +16 -17
  2. package/inputs.css +111 -0
  3. package/package.json +1 -1
  4. package/util.css +1 -1
  5. package/variables/base.css +23 -5
  6. package/variables/font.css +1 -1
  7. package/variables/grid.css +0 -2
  8. package/variables/palette.css +171 -90
  9. package/variables/spacing.css +1 -2
  10. package/variables/ui.css +97 -0
  11. package/input-kinds.css +0 -103
  12. package/semantics.css +0 -103
  13. package/variables/input.css +0 -17
  14. package/variables/semantics.css +0 -89
package/index.css CHANGED
@@ -1,19 +1,18 @@
1
- @import './variables/base.css';
2
- @import './variables/spacing.css';
3
- @import './variables/grid.css';
4
- @import './variables/font.css';
5
- @import './variables/palette.css';
6
- @import './variables/input.css';
7
- @import './variables/semantics.css';
1
+ @import './variables/base.css' layer(nightshade);
2
+ @import './variables/spacing.css' layer(nightshade);
3
+ @import './variables/grid.css' layer(nightshade);
4
+ @import './variables/font.css' layer(nightshade);
5
+ @import './variables/palette.css' layer(nightshade);
6
+ @import './variables/ui.css' layer(nightshade);
8
7
 
9
- @import './commons.css';
10
- @import './input-kinds.css';
11
- @import './util.css';
12
- @import './kbd.css';
8
+ @import './commons.css' layer(nightshade);
9
+ @import './inputs.css' layer(nightshade);
10
+ @import './util.css' layer(nightshade);
11
+ @import './kbd.css' layer(nightshade);
13
12
 
14
- @import './transitions/fade-directional.css';
15
- @import './transitions/fade-scale.css';
16
- @import './transitions/fade-shove.css';
17
- @import './transitions/fade-squash.css';
18
- @import './transitions/fade-swipe.css';
19
- @import './transitions/fade.css';
13
+ @import './transitions/fade-directional.css' layer(nightshade);
14
+ @import './transitions/fade-scale.css' layer(nightshade);
15
+ @import './transitions/fade-shove.css' layer(nightshade);
16
+ @import './transitions/fade-squash.css' layer(nightshade);
17
+ @import './transitions/fade-swipe.css' layer(nightshade);
18
+ @import './transitions/fade.css' layer(nightshade);
package/inputs.css ADDED
@@ -0,0 +1,111 @@
1
+ .input-kind-base {
2
+ --input-z: var(--ui-base-z);
3
+ --input-text-color: var(--ui-base-text-color);
4
+ --input-surface-color: var(--ui-base-surface-color);
5
+ --input-surface-color-top: var(--ui-base-surface-color-top);
6
+ --input-surface-color-bottom: var(--ui-base-surface-color-bottom);
7
+ --input-surface-text-color: var(--ui-base-surface-text-color);
8
+ --input-surface-text-shadow-color: var(--ui-base-surface-text-shadow-color);
9
+ --input-border-color: var(--ui-base-border-color);
10
+ --input-shadow-color: var(--ui-base-shadow-color);
11
+ --input-focus-light-color: var(--ui-base-focus-light-color);
12
+ --input-focus-medium-color: var(--ui-base-focus-medium-color);
13
+ }
14
+
15
+ .input-kind-inverse {
16
+ --input-z: var(--ui-inverse-z);
17
+ --input-text-color: var(--color-inverse-0);
18
+ --input-surface-color: var(--ui-inverse-surface-color);
19
+ --input-surface-color-top: var(--ui-inverse-surface-color-top);
20
+ --input-surface-color-bottom: var(--ui-inverse-surface-color-bottom);
21
+ --input-surface-text-color: var(--ui-inverse-surface-text-color);
22
+ --input-surface-text-shadow-color: var(--ui-inverse-surface-text-shadow-color);
23
+ --input-border-color: var(--ui-inverse-border-color);
24
+ --input-shadow-color: var(--ui-inverse-shadow-color);
25
+ --input-focus-light-color: var(--ui-inverse-focus-light-color);
26
+ --input-focus-medium-color: var(--ui-inverse-focus-medium-color);
27
+ }
28
+
29
+ .input-kind-primary {
30
+ --input-z: var(--ui-primary-z);
31
+ --input-text-color: var(--ui-primary-text-color);
32
+ --input-surface-color: var(--ui-primary-surface-color);
33
+ --input-surface-color-top: var(--ui-primary-surface-color-top);
34
+ --input-surface-color-bottom: var(--ui-primary-surface-color-bottom);
35
+ --input-surface-text-color: var(--ui-primary-surface-text-color);
36
+ --input-surface-text-shadow-color: var(--ui-primary-surface-text-shadow-color);
37
+ --input-border-color: var(--ui-primary-border-color);
38
+ --input-shadow-color: var(--ui-primary-shadow-color);
39
+ --input-focus-light-color: var(--ui-primary-focus-light-color);
40
+ --input-focus-medium-color: var(--ui-primary-focus-medium-color);
41
+ }
42
+
43
+ .input-kind-secondary {
44
+ --input-z: var(--ui-secondary-z);
45
+ --input-text-color: var(--ui-secondary-text-color);
46
+ --input-surface-color: var(--ui-secondary-surface-color);
47
+ --input-surface-color-top: var(--ui-secondary-surface-color-top);
48
+ --input-surface-color-bottom: var(--ui-secondary-surface-color-bottom);
49
+ --input-surface-text-color: var(--ui-secondary-surface-text-color);
50
+ --input-surface-text-shadow-color: var(--ui-secondary-surface-text-shadow-color);
51
+ --input-border-color: var(--ui-secondary-border-color);
52
+ --input-shadow-color: var(--ui-secondary-shadow-color);
53
+ --input-focus-light-color: var(--ui-secondary-focus-light-color);
54
+ --input-focus-medium-color: var(--ui-secondary-focus-medium-color);
55
+ }
56
+
57
+ .input-kind-tertiary {
58
+ --input-z: var(--ui-tertiary-z);
59
+ --input-text-color: var(--ui-tertiary-text-color);
60
+ --input-surface-color: var(--ui-tertiary-surface-color);
61
+ --input-surface-color-top: var(--ui-tertiary-surface-color-top);
62
+ --input-surface-color-bottom: var(--ui-tertiary-surface-color-bottom);
63
+ --input-surface-text-color: var(--ui-tertiary-surface-text-color);
64
+ --input-surface-text-shadow-color: var(--ui-tertiary-surface-text-shadow-color);
65
+ --input-border-color: var(--ui-tertiary-border-color);
66
+ --input-shadow-color: var(--ui-tertiary-shadow-color);
67
+ --input-focus-light-color: var(--ui-tertiary-focus-light-color);
68
+ --input-focus-medium-color: var(--ui-tertiary-focus-medium-color);
69
+ }
70
+
71
+ .input-kind-success {
72
+ --input-z: var(--ui-success-z);
73
+ --input-text-color: var(--ui-success-text-color);
74
+ --input-surface-color: var(--ui-success-surface-color);
75
+ --input-surface-color-top: var(--ui-success-surface-color-top);
76
+ --input-surface-color-bottom: var(--ui-success-surface-color-bottom);
77
+ --input-surface-text-color: var(--ui-success-surface-text-color);
78
+ --input-surface-text-shadow-color: var(--ui-success-surface-text-shadow-color);
79
+ --input-border-color: var(--ui-success-border-color);
80
+ --input-shadow-color: var(--ui-success-shadow-color);
81
+ --input-focus-light-color: var(--ui-success-focus-light-color);
82
+ --input-focus-medium-color: var(--ui-success-focus-medium-color);
83
+ }
84
+
85
+ .input-kind-warning {
86
+ --input-z: var(--ui-warning-z);
87
+ --input-text-color: var(--ui-warning-text-color);
88
+ --input-surface-color: var(--ui-warning-surface-color);
89
+ --input-surface-color-top: var(--ui-warning-surface-color-top);
90
+ --input-surface-color-bottom: var(--ui-warning-surface-color-bottom);
91
+ --input-surface-text-color: var(--ui-warning-surface-text-color);
92
+ --input-surface-text-shadow-color: var(--ui-warning-surface-text-shadow-color);
93
+ --input-border-color: var(--ui-warning-border-color);
94
+ --input-shadow-color: var(--ui-warning-shadow-color);
95
+ --input-focus-light-color: var(--ui-warning-focus-light-color);
96
+ --input-focus-medium-color: var(--ui-warning-focus-medium-color);
97
+ }
98
+
99
+ .input-kind-danger {
100
+ --input-z: var(--ui-danger-z);
101
+ --input-text-color: var(--ui-danger-text-color);
102
+ --input-surface-color: var(--ui-danger-surface-color);
103
+ --input-surface-color-top: var(--ui-danger-surface-color-top);
104
+ --input-surface-color-bottom: var(--ui-danger-surface-color-bottom);
105
+ --input-surface-text-color: var(--ui-danger-surface-text-color);
106
+ --input-surface-text-shadow-color: var(--ui-danger-surface-text-shadow-color);
107
+ --input-border-color: var(--ui-danger-border-color);
108
+ --input-shadow-color: var(--ui-danger-shadow-color);
109
+ --input-focus-light-color: var(--ui-danger-focus-light-color);
110
+ --input-focus-medium-color: var(--ui-danger-focus-medium-color);
111
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nightshadeui/stylesheets",
3
- "version": "2.2.0",
3
+ "version": "2.4.0",
4
4
  "description": "Nightshade UI CSS",
5
5
  "author": "Boris Okunskiy",
6
6
  "license": "ISC",
package/util.css CHANGED
@@ -41,4 +41,4 @@
41
41
  white-space: nowrap;
42
42
  overflow: hidden;
43
43
  text-overflow: ellipsis;
44
- }
44
+ }
package/variables/base.css CHANGED
@@ -1,7 +1,7 @@
1
1
  :root {
2
2
 
3
- --base-color: var(--ns-base-surface-color);
4
- --text-color: var(--ns-base-text-color);
3
+ --base-color: var(--ui-base-surface-color);
4
+ --text-color: var(--ui-base-text-color);
5
5
  --text-color-subtle: var(--color-base-700);
6
6
  --text-color-sublime: var(--color-base-600);
7
7
 
@@ -20,8 +20,26 @@
20
20
 
21
21
  /* Shadows */
22
22
 
23
- --shadow-color-light: light-dark(rgba(0,0,0,.1), rgba(0,0,0,.5));
24
- --shadow-color-medium: light-dark(rgba(0,0,0,.2), rgba(0,0,0,.75));
25
- --shadow-color-heavy: light-dark(rgba(0,0,0,.3), rgba(0,0,0,.9));
23
+ --shadow-color-light: light-dark(rgba(0,0,0,.1), rgba(0,0,0,.2));
24
+ --shadow-color-medium: light-dark(rgba(0,0,0,.2), rgba(0,0,0,.4));
25
+ --shadow-color-heavy: light-dark(rgba(0,0,0,.3), rgba(0,0,0,.6));
26
+
27
+ /* Inputs */
28
+
29
+ --input-size: var(--input-size-m);
30
+ --input-size-xs: var(--sp2);
31
+ --input-size-s: var(--sp3);
32
+ --input-size-m: var(--sp4);
33
+ --input-size-l: var(--sp5);
34
+ --input-size-xl: var(--sp6);
35
+
36
+ --input-radius: var(--border-radius-s);
37
+ --input-radius-round: var(--border-radius-l);
38
+ --input-radius-full: 32px;
39
+
40
+ --input-border-size: 1px;
41
+ --input-outline-size: 2px;
42
+ --input-outline-offset: 0;
43
+ --input-z: 0;
26
44
 
27
45
  }
package/variables/font.css CHANGED
@@ -21,4 +21,4 @@
21
21
  --font-weight-heavy: 700;
22
22
 
23
23
  --line-height: 1.5;
24
- }
24
+ }
package/variables/grid.css CHANGED
@@ -1,5 +1,4 @@
1
1
  :root {
2
-
3
2
  /* 12-column grid */
4
3
 
5
4
  --gr1: calc(100% / 12);
@@ -27,5 +26,4 @@
27
26
  --vgr10: calc(10 * 100vw / 12);
28
27
  --vgr11: calc(11 * 100vw / 12);
29
28
  --vgr12: 100vw;
30
-
31
29
  }
package/variables/palette.css CHANGED
@@ -1,28 +1,70 @@
1
1
  :root {
2
2
 
3
- --color-base-light-0: hsl(280deg, 5%, 100%);
4
- --color-base-light-50: hsl(280deg, 5%, 98%);
5
- --color-base-light-100: hsl(280deg, 5%, 96%);
6
- --color-base-light-200: hsl(280deg, 5%, 92%);
7
- --color-base-light-300: hsl(280deg, 5%, 88%);
8
- --color-base-light-400: hsl(280deg, 5%, 80%);
9
- --color-base-light-500: hsl(280deg, 5%, 75%);
10
- --color-base-light-600: hsl(280deg, 5%, 64%);
11
- --color-base-light-700: hsl(280deg, 5%, 48%);
12
- --color-base-light-800: hsl(280deg, 5%, 32%);
13
- --color-base-light-900: hsl(280deg, 5%, 16%);
14
-
15
- --color-base-dark-0: hsl(280deg, 5%, 12%);
16
- --color-base-dark-50: hsl(280deg, 5%, 16%);
17
- --color-base-dark-100: hsl(280deg, 5%, 24%);
18
- --color-base-dark-200: hsl(280deg, 5%, 27%);
19
- --color-base-dark-300: hsl(280deg, 5%, 32%);
20
- --color-base-dark-400: hsl(280deg, 5%, 36%);
21
- --color-base-dark-500: hsl(280deg, 5%, 44%);
22
- --color-base-dark-600: hsl(280deg, 5%, 50%);
23
- --color-base-dark-700: hsl(280deg, 5%, 72%);
24
- --color-base-dark-800: hsl(280deg, 5%, 88%);
25
- --color-base-dark-900: hsl(280deg, 5%, 92%);
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;
26
68
 
27
69
  --color-base-0: light-dark(var(--color-base-light-0), var(--color-base-dark-0));
28
70
  --color-base-50: light-dark(var(--color-base-light-50), var(--color-base-dark-50));
@@ -35,6 +77,7 @@
35
77
  --color-base-700: light-dark(var(--color-base-light-700), var(--color-base-dark-700));
36
78
  --color-base-800: light-dark(var(--color-base-light-800), var(--color-base-dark-800));
37
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));
38
81
 
39
82
  --color-inverse-0: light-dark(var(--color-base-dark-0), var(--color-base-light-0));
40
83
  --color-inverse-50: light-dark(var(--color-base-dark-50), var(--color-base-light-50));
@@ -47,71 +90,109 @@
47
90
  --color-inverse-700: light-dark(var(--color-base-dark-700), var(--color-base-light-700));
48
91
  --color-inverse-800: light-dark(var(--color-base-dark-800), var(--color-base-light-800));
49
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));
50
185
 
51
- --color-primary-50: hsl(310deg, 25%, 96%);
52
- --color-primary-100: hsl(310deg, 25%, 92%);
53
- --color-primary-200: hsl(310deg, 25%, 88%);
54
- --color-primary-300: hsl(310deg, 25%, 75%);
55
- --color-primary-400: hsl(310deg, 25%, 64%);
56
- --color-primary-500: hsl(310deg, 25%, 50%);
57
- --color-primary-600: hsl(310deg, 25%, 44%);
58
- --color-primary-700: hsl(310deg, 25%, 36%);
59
- --color-primary-800: hsl(310deg, 25%, 28%);
60
- --color-primary-900: hsl(310deg, 25%, 16%);
61
-
62
- --color-secondary-50: hsl(176deg, 25%, 96%);
63
- --color-secondary-100: hsl(176deg, 25%, 92%);
64
- --color-secondary-200: hsl(176deg, 25%, 88%);
65
- --color-secondary-300: hsl(176deg, 25%, 75%);
66
- --color-secondary-400: hsl(176deg, 25%, 64%);
67
- --color-secondary-500: hsl(176deg, 25%, 50%);
68
- --color-secondary-600: hsl(176deg, 25%, 44%);
69
- --color-secondary-700: hsl(176deg, 25%, 36%);
70
- --color-secondary-800: hsl(176deg, 25%, 28%);
71
- --color-secondary-900: hsl(176deg, 25%, 16%);
72
-
73
- --color-tertiary-50: hsl(8deg, 12%, 96%);
74
- --color-tertiary-100: hsl(8deg, 12%, 92%);
75
- --color-tertiary-200: hsl(8deg, 12%, 88%);
76
- --color-tertiary-300: hsl(8deg, 12%, 75%);
77
- --color-tertiary-400: hsl(8deg, 12%, 64%);
78
- --color-tertiary-500: hsl(8deg, 12%, 50%);
79
- --color-tertiary-600: hsl(8deg, 12%, 44%);
80
- --color-tertiary-700: hsl(8deg, 12%, 36%);
81
- --color-tertiary-800: hsl(8deg, 12%, 28%);
82
- --color-tertiary-900: hsl(8deg, 12%, 16%);
83
-
84
- --color-success-50: hsl(112deg, 36%, 96%);
85
- --color-success-100: hsl(112deg, 36%, 92%);
86
- --color-success-200: hsl(112deg, 36%, 88%);
87
- --color-success-300: hsl(112deg, 36%, 75%);
88
- --color-success-400: hsl(112deg, 36%, 64%);
89
- --color-success-500: hsl(112deg, 36%, 50%);
90
- --color-success-600: hsl(112deg, 36%, 44%);
91
- --color-success-700: hsl(112deg, 36%, 36%);
92
- --color-success-800: hsl(112deg, 36%, 28%);
93
- --color-success-900: hsl(112deg, 36%, 16%);
94
-
95
- --color-warning-50: hsl(40deg, 90%, 96%);
96
- --color-warning-100: hsl(40deg, 90%, 92%);
97
- --color-warning-200: hsl(40deg, 90%, 88%);
98
- --color-warning-300: hsl(40deg, 90%, 75%);
99
- --color-warning-400: hsl(40deg, 90%, 64%);
100
- --color-warning-500: hsl(40deg, 90%, 50%);
101
- --color-warning-600: hsl(40deg, 90%, 44%);
102
- --color-warning-700: hsl(40deg, 90%, 36%);
103
- --color-warning-800: hsl(40deg, 90%, 28%);
104
- --color-warning-900: hsl(40deg, 90%, 16%);
105
-
106
- --color-danger-50: hsl(352deg, 64%, 96%);
107
- --color-danger-100: hsl(352deg, 64%, 92%);
108
- --color-danger-200: hsl(352deg, 64%, 88%);
109
- --color-danger-300: hsl(352deg, 64%, 75%);
110
- --color-danger-400: hsl(352deg, 64%, 64%);
111
- --color-danger-500: hsl(352deg, 64%, 50%);
112
- --color-danger-600: hsl(352deg, 64%, 44%);
113
- --color-danger-700: hsl(352deg, 64%, 36%);
114
- --color-danger-800: hsl(352deg, 64%, 28%);
115
- --color-danger-900: hsl(352deg, 64%, 16%);
116
-
117
- }
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));
198
+ }
package/variables/spacing.css CHANGED
@@ -1,7 +1,6 @@
1
1
  :root {
2
-
2
+
3
3
  /* Fixed spacing */
4
-
5
4
  --sp: 8px;
6
5
  --sp0-25: calc(0.25 * var(--sp));
7
6
  --sp0-5: calc(0.5 * var(--sp));
package/variables/ui.css ADDED
@@ -0,0 +1,97 @@
1
+ :root {
2
+ --ui-base--z: 0;
3
+ --ui-base-text-color: var(--color-base-900);
4
+ --ui-base-surface-color: var(--color-base-0);
5
+ --ui-base-surface-color-top: light-dark(var(--color-base-0), var(--color-base-200));
6
+ --ui-base-surface-color-bottom: light-dark(var(--color-base-200), var(--color-base-0));
7
+ --ui-base-surface-text-color: var(--color-base-text);
8
+ --ui-base-surface-text-shadow-color: var(--color-base-200);
9
+ --ui-base-border-color: var(--color-base-400);
10
+ --ui-base-shadow-color: var(--shadow-color-medium);
11
+ --ui-base-focus-light-color: light-dark(var(--color-secondary-300), var(--color-secondary-700));
12
+ --ui-base-focus-medium-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
13
+
14
+ --ui-inverse-z: 1;
15
+ --ui-inverse-text-color: var(--color-inverse-0);
16
+ --ui-inverse-surface-color: var(--color-inverse-0);
17
+ --ui-inverse-surface-color-top: light-dark(var(--color-inverse-200), var(--color-inverse-0));
18
+ --ui-inverse-surface-color-bottom: light-dark(var(--color-inverse-0), var(--color-inverse-200));
19
+ --ui-inverse-surface-text-color: var(--color-inverse-text);
20
+ --ui-inverse-surface-text-shadow-color: var(--color-inverse-200);
21
+ --ui-inverse-border-color: var(--color-inverse-0);
22
+ --ui-inverse-shadow-color: light-dark(var(--color-inverse-700), var(--color-inverse-500));
23
+ --ui-inverse-focus-light-color: light-dark(var(--color-secondary-300), var(--color-secondary-700));
24
+ --ui-inverse-focus-medium-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
25
+
26
+ --ui-primary-z: 5;
27
+ --ui-primary-text-color: light-dark(var(--color-primary-500), var(--color-primary-400));
28
+ --ui-primary-surface-color: var(--color-primary-500);
29
+ --ui-primary-surface-color-top: var(--color-primary-400);
30
+ --ui-primary-surface-color-bottom: var(--color-primary-600);
31
+ --ui-primary-surface-text-color: var(--color-primary-text);
32
+ --ui-primary-surface-text-shadow-color: var(--color-primary-600);
33
+ --ui-primary-border-color: light-dark(var(--color-primary-600), var(--color-primary-400));
34
+ --ui-primary-shadow-color: var(--color-primary-800);
35
+ --ui-primary-focus-light-color: light-dark(var(--color-primary-300), var(--color-primary-700));
36
+ --ui-primary-focus-medium-color: light-dark(var(--color-primary-600), var(--color-primary-400));
37
+
38
+ --ui-secondary-z: 4;
39
+ --ui-secondary-text-color: light-dark(var(--color-secondary-500), var(--color-secondary-400));
40
+ --ui-secondary-surface-color: var(--color-secondary-500);
41
+ --ui-secondary-surface-color-top: var(--color-secondary-400);
42
+ --ui-secondary-surface-color-bottom: var(--color-secondary-600);
43
+ --ui-secondary-surface-text-color: var(--color-secondary-text);
44
+ --ui-secondary-surface-text-shadow-color: var(--color-secondary-600);
45
+ --ui-secondary-border-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
46
+ --ui-secondary-shadow-color: var(--color-secondary-800);
47
+ --ui-secondary-focus-light-color: light-dark(var(--color-secondary-300), var(--color-secondary-700));
48
+ --ui-secondary-focus-medium-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
49
+
50
+ --ui-tertiary-z: 3;
51
+ --ui-tertiary-text-color: light-dark(var(--color-tertiary-500), var(--color-tertiary-400));
52
+ --ui-tertiary-surface-color: var(--color-tertiary-500);
53
+ --ui-tertiary-surface-color-top: var(--color-tertiary-400);
54
+ --ui-tertiary-surface-color-bottom: var(--color-tertiary-600);
55
+ --ui-tertiary-surface-text-color: var(--color-tertiary-text);
56
+ --ui-tertiary-surface-text-shadow-color: var(--color-tertiary-600);
57
+ --ui-tertiary-border-color: light-dark(var(--color-tertiary-600), var(--color-tertiary-400));
58
+ --ui-tertiary-shadow-color: var(--color-tertiary-800);
59
+ --ui-tertiary-focus-light-color: light-dark(var(--color-tertiary-300), var(--color-tertiary-700));
60
+ --ui-tertiary-focus-medium-color: light-dark(var(--color-tertiary-600), var(--color-tertiary-400));
61
+
62
+ --ui-success-z: 3;
63
+ --ui-success-text-color: light-dark(var(--color-success-500), var(--color-success-400));
64
+ --ui-success-surface-color: var(--color-success-500);
65
+ --ui-success-surface-color-top: var(--color-success-400);
66
+ --ui-success-surface-color-bottom: var(--color-success-600);
67
+ --ui-success-surface-text-color: var(--color-success-text);
68
+ --ui-success-surface-text-shadow-color: var(--color-success-600);
69
+ --ui-success-border-color: light-dark(var(--color-success-600), var(--color-success-400));
70
+ --ui-success-shadow-color: var(--color-success-800);
71
+ --ui-success-focus-light-color: light-dark(var(--color-success-300), var(--color-success-700));
72
+ --ui-success-focus-medium-color: light-dark(var(--color-success-600), var(--color-success-400));
73
+
74
+ --ui-warning-z: 3;
75
+ --ui-warning-text-color: light-dark(var(--color-warning-500), var(--color-warning-400));
76
+ --ui-warning-surface-color: var(--color-warning-500);
77
+ --ui-warning-surface-color-top: var(--color-warning-400);
78
+ --ui-warning-surface-color-bottom: var(--color-warning-600);
79
+ --ui-warning-surface-text-color: var(--color-warning-text);
80
+ --ui-warning-surface-text-shadow-color: var(--color-warning-600);
81
+ --ui-warning-border-color: light-dark(var(--color-warning-600), var(--color-warning-400));
82
+ --ui-warning-shadow-color: var(--color-warning-800);
83
+ --ui-warning-focus-light-color: light-dark(var(--color-warning-300), var(--color-warning-700));
84
+ --ui-warning-focus-medium-color: light-dark(var(--color-warning-600), var(--color-warning-400));
85
+
86
+ --ui-danger-z: 3;
87
+ --ui-danger-text-color: light-dark(var(--color-danger-500), var(--color-danger-400));
88
+ --ui-danger-surface-color: var(--color-danger-500);
89
+ --ui-danger-surface-color-top: var(--color-danger-400);
90
+ --ui-danger-surface-color-bottom: var(--color-danger-600);
91
+ --ui-danger-surface-text-color: var(--color-danger-text);
92
+ --ui-danger-surface-text-shadow-color: var(--color-danger-600);
93
+ --ui-danger-border-color: light-dark(var(--color-danger-600), var(--color-danger-400));;
94
+ --ui-danger-shadow-color: var(--color-danger-800);
95
+ --ui-danger-focus-light-color: light-dark(var(--color-danger-300), var(--color-danger-700));
96
+ --ui-danger-focus-medium-color: light-dark(var(--color-danger-600), var(--color-danger-400));
97
+ }
package/input-kinds.css DELETED
@@ -1,103 +0,0 @@
1
- .input-kind-base {
2
- --input-z: var(--ns-base-z);
3
- --input-text-color: var(--ns-base-text-color);
4
- --input-surface-color: var(--ns-base-surface-color);
5
- --input-surface-color-top: var(--ns-base-surface-color-top);
6
- --input-surface-color-bottom: var(--ns-base-surface-color-bottom);
7
- --input-surface-color-text: var(--ns-base-surface-color-text);
8
- --input-border-color: var(--ns-base-border-color);
9
- --input-shadow-color: var(--ns-base-shadow-color);
10
- --input-focus-light-color: var(--ns-base-focus-light-color);
11
- --input-focus-medium-color: var(--ns-base-focus-medium-color);
12
- }
13
-
14
- .input-kind-inverse {
15
- --input-z: var(--ns-inverse-z);
16
- --input-text-color: var(--color-inverse-0);
17
- --input-surface-color: var(--ns-inverse-surface-color);
18
- --input-surface-color-top: var(--ns-inverse-surface-color-top);
19
- --input-surface-color-bottom: var(--ns-inverse-surface-color-bottom);
20
- --input-surface-color-text: var(--ns-inverse-surface-color-text);
21
- --input-border-color: var(--ns-inverse-border-color);
22
- --input-shadow-color: var(--ns-inverse-shadow-color);
23
- --input-focus-light-color: var(--ns-inverse-focus-light-color);
24
- --input-focus-medium-color: var(--ns-inverse-focus-medium-color);
25
- }
26
-
27
- .input-kind-primary {
28
- --input-z: var(--ns-primary-z);
29
- --input-text-color: var(--ns-primary-text-color);
30
- --input-surface-color: var(--ns-primary-surface-color);
31
- --input-surface-color-top: var(--ns-primary-surface-color-top);
32
- --input-surface-color-bottom: var(--ns-primary-surface-color-bottom);
33
- --input-surface-color-text: var(--ns-primary-surface-color-text);
34
- --input-border-color: var(--ns-primary-border-color);
35
- --input-shadow-color: var(--ns-primary-shadow-color);
36
- --input-focus-light-color: var(--ns-primary-focus-light-color);
37
- --input-focus-medium-color: var(--ns-primary-focus-medium-color);
38
- }
39
-
40
- .input-kind-secondary {
41
- --input-z: var(--ns-secondary-z);
42
- --input-text-color: var(--ns-secondary-text-color);
43
- --input-surface-color: var(--ns-secondary-surface-color);
44
- --input-surface-color-top: var(--ns-secondary-surface-color-top);
45
- --input-surface-color-bottom: var(--ns-secondary-surface-color-bottom);
46
- --input-surface-color-text: var(--ns-secondary-surface-color-text);
47
- --input-border-color: var(--ns-secondary-border-color);
48
- --input-shadow-color: var(--ns-secondary-shadow-color);
49
- --input-focus-light-color: var(--ns-secondary-focus-light-color);
50
- --input-focus-medium-color: var(--ns-secondary-focus-medium-color);
51
- }
52
-
53
- .input-kind-tertiary {
54
- --input-z: var(--ns-tertiary-z);
55
- --input-text-color: var(--ns-tertiary-text-color);
56
- --input-surface-color: var(--ns-tertiary-surface-color);
57
- --input-surface-color-top: var(--ns-tertiary-surface-color-top);
58
- --input-surface-color-bottom: var(--ns-tertiary-surface-color-bottom);
59
- --input-surface-color-text: var(--ns-tertiary-surface-color-text);
60
- --input-border-color: var(--ns-tertiary-border-color);
61
- --input-shadow-color: var(--ns-tertiary-shadow-color);
62
- --input-focus-light-color: var(--ns-tertiary-focus-light-color);
63
- --input-focus-medium-color: var(--ns-tertiary-focus-medium-color);
64
- }
65
-
66
- .input-kind-success {
67
- --input-z: var(--ns-success-z);
68
- --input-text-color: var(--ns-success-text-color);
69
- --input-surface-color: var(--ns-success-surface-color);
70
- --input-surface-color-top: var(--ns-success-surface-color-top);
71
- --input-surface-color-bottom: var(--ns-success-surface-color-bottom);
72
- --input-surface-color-text: var(--ns-success-surface-color-text);
73
- --input-border-color: var(--ns-success-border-color);
74
- --input-shadow-color: var(--ns-success-shadow-color);
75
- --input-focus-light-color: var(--ns-success-focus-light-color);
76
- --input-focus-medium-color: var(--ns-success-focus-medium-color);
77
- }
78
-
79
- .input-kind-warning {
80
- --input-z: var(--ns-warning-z);
81
- --input-text-color: var(--ns-warning-text-color);
82
- --input-surface-color: var(--ns-warning-surface-color);
83
- --input-surface-color-top: var(--ns-warning-surface-color-top);
84
- --input-surface-color-bottom: var(--ns-warning-surface-color-bottom);
85
- --input-surface-color-text: var(--ns-warning-surface-color-text);
86
- --input-border-color: var(--ns-warning-border-color);
87
- --input-shadow-color: var(--ns-warning-shadow-color);
88
- --input-focus-light-color: var(--ns-warning-focus-light-color);
89
- --input-focus-medium-color: var(--ns-warning-focus-medium-color);
90
- }
91
-
92
- .input-kind-danger {
93
- --input-z: var(--ns-danger-z);
94
- --input-text-color: var(--ns-danger-text-color);
95
- --input-surface-color: var(--ns-danger-surface-color);
96
- --input-surface-color-top: var(--ns-danger-surface-color-top);
97
- --input-surface-color-bottom: var(--ns-danger-surface-color-bottom);
98
- --input-surface-color-text: var(--ns-danger-surface-color-text);
99
- --input-border-color: var(--ns-danger-border-color);
100
- --input-shadow-color: var(--ns-danger-shadow-color);
101
- --input-focus-light-color: var(--ns-danger-focus-light-color);
102
- --input-focus-medium-color: var(--ns-danger-focus-medium-color);
103
- }
package/semantics.css DELETED
@@ -1,103 +0,0 @@
1
- .input-kind-base {
2
- --input-z: 0;
3
- --input-text-color: var(--color-base-900);
4
- --input-surface-color: var(--color-base-100);
5
- --input-surface-color-top: light-dark(var(--color-base-0), var(--color-base-200));
6
- --input-surface-color-bottom: light-dark(var(--color-base-200), var(--color-base-0));
7
- --input-surface-color-text: var(--color-base-900);
8
- --input-border-color: var(--color-base-400);
9
- --input-shadow-color: var(--shadow-color-light);
10
- --input-focus-light-color: light-dark(var(--color-secondary-300), var(--color-secondary-700));
11
- --input-focus-medium-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
12
- }
13
-
14
- .input-kind-inverse {
15
- --input-z: 1;
16
- --input-text-color: var(--color-inverse-0);
17
- --input-surface-color: var(--color-inverse-0);
18
- --input-surface-color-top: light-dark(var(--color-inverse-0), var(--color-inverse-200));
19
- --input-surface-color-bottom: light-dark(var(--color-inverse-200), var(--color-inverse-0));
20
- --input-surface-color-text: var(--color-inverse-900);
21
- --input-border-color: var(--color-inverse-0);
22
- --input-shadow-color: light-dark(var(--color-inverse-700), var(--color-inverse-500));
23
- --input-focus-light-color: light-dark(var(--color-secondary-300), var(--color-secondary-700));
24
- --input-focus-medium-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
25
- }
26
-
27
- .input-kind-primary {
28
- --input-z: 5;
29
- --input-text-color: light-dark(var(--color-primary-500), var(--color-primary-400));
30
- --input-surface-color: var(--color-primary-500);
31
- --input-surface-color-top: var(--color-primary-400);
32
- --input-surface-color-bottom: var(--color-primary-600);
33
- --input-surface-color-text: #fff;
34
- --input-border-color: light-dark(var(--color-primary-600), var(--color-primary-400));
35
- --input-shadow-color: var(--color-primary-800);
36
- --input-focus-light-color: light-dark(var(--color-primary-300), var(--color-primary-700));
37
- --input-focus-medium-color: light-dark(var(--color-primary-600), var(--color-primary-400));
38
- }
39
-
40
- .input-kind-secondary {
41
- --input-z: 4;
42
- --input-text-color: light-dark(var(--color-secondary-500), var(--color-secondary-400));
43
- --input-surface-color: var(--color-secondary-500);
44
- --input-surface-color-top: var(--color-secondary-400);
45
- --input-surface-color-bottom: var(--color-secondary-600);
46
- --input-surface-color-text: #fff;
47
- --input-border-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
48
- --input-shadow-color: var(--color-secondary-800);
49
- --input-focus-light-color: light-dark(var(--color-secondary-300), var(--color-secondary-700));
50
- --input-focus-medium-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
51
- }
52
-
53
- .input-kind-tertiary {
54
- --input-z: 3;
55
- --input-text-color: light-dark(var(--color-tertiary-500), var(--color-tertiary-400));
56
- --input-surface-color: var(--color-tertiary-500);
57
- --input-surface-color-top: var(--color-tertiary-400);
58
- --input-surface-color-bottom: var(--color-tertiary-600);
59
- --input-surface-color-text: #fff;
60
- --input-border-color: light-dark(var(--color-tertiary-600), var(--color-tertiary-400));
61
- --input-shadow-color: var(--color-tertiary-800);
62
- --input-focus-light-color: light-dark(var(--color-tertiary-300), var(--color-tertiary-700));
63
- --input-focus-medium-color: light-dark(var(--color-tertiary-600), var(--color-tertiary-400));
64
- }
65
-
66
- .input-kind-success {
67
- --input-z: 3;
68
- --input-text-color: light-dark(var(--color-success-500), var(--color-success-400));
69
- --input-surface-color: var(--color-success-500);
70
- --input-surface-color-top: var(--color-success-400);
71
- --input-surface-color-bottom: var(--color-success-600);
72
- --input-surface-color-text: #fff;
73
- --input-border-color: light-dark(var(--color-success-600), var(--color-success-400));
74
- --input-shadow-color: var(--color-success-800);
75
- --input-focus-light-color: light-dark(var(--color-success-300), var(--color-success-700));
76
- --input-focus-medium-color: light-dark(var(--color-success-600), var(--color-success-400));
77
- }
78
-
79
- .input-kind-warning {
80
- --input-z: 3;
81
- --input-text-color: light-dark(var(--color-warning-500), var(--color-warning-400));
82
- --input-surface-color: var(--color-warning-500);
83
- --input-surface-color-top: var(--color-warning-400);
84
- --input-surface-color-bottom: var(--color-warning-600);
85
- --input-surface-color-text: #fff;
86
- --input-border-color: light-dark(var(--color-warning-600), var(--color-warning-400));
87
- --input-shadow-color: var(--color-warning-800);
88
- --input-focus-light-color: light-dark(var(--color-warning-300), var(--color-warning-700));
89
- --input-focus-medium-color: light-dark(var(--color-warning-600), var(--color-warning-400));
90
- }
91
-
92
- .input-kind-danger {
93
- --input-z: 3;
94
- --input-text-color: light-dark(var(--color-danger-500), var(--color-danger-400));
95
- --input-surface-color: var(--color-danger-500);
96
- --input-surface-color-top: var(--color-danger-400);
97
- --input-surface-color-bottom: var(--color-danger-600);
98
- --input-surface-color-text: #fff;
99
- --input-border-color: light-dark(var(--color-danger-600), var(--color-danger-400));;
100
- --input-shadow-color: var(--color-danger-800);
101
- --input-focus-light-color: light-dark(var(--color-danger-300), var(--color-danger-700));
102
- --input-focus-medium-color: light-dark(var(--color-danger-600), var(--color-danger-400));
103
- }
package/variables/input.css DELETED
@@ -1,17 +0,0 @@
1
- :root {
2
- --input-size: var(--input-size-m);
3
- --input-size-xs: var(--sp2);
4
- --input-size-s: var(--sp3);
5
- --input-size-m: var(--sp4);
6
- --input-size-l: var(--sp5);
7
- --input-size-xl: var(--sp6);
8
-
9
- --input-radius: var(--border-radius-s);
10
- --input-radius-round: var(--border-radius-l);
11
- --input-radius-full: 32px;
12
-
13
- --input-border-size: 1px;
14
- --input-outline-size: 2px;
15
- --input-outline-offset: 0;
16
- --input-z: 0;
17
- }
package/variables/semantics.css DELETED
@@ -1,89 +0,0 @@
1
- :root {
2
- --ns-base--z: 0;
3
- --ns-base-text-color: var(--color-base-900);
4
- --ns-base-surface-color: var(--color-base-0);
5
- --ns-base-surface-color-top: light-dark(var(--color-base-0), var(--color-base-200));
6
- --ns-base-surface-color-bottom: light-dark(var(--color-base-200), var(--color-base-0));
7
- --ns-base-surface-color-text: var(--color-base-900);
8
- --ns-base-border-color: var(--color-base-400);
9
- --ns-base-shadow-color: var(--shadow-color-medium);
10
- --ns-base-focus-light-color: light-dark(var(--color-secondary-300), var(--color-secondary-700));
11
- --ns-base-focus-medium-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
12
-
13
- --ns-inverse-z: 1;
14
- --ns-inverse-text-color: var(--color-inverse-0);
15
- --ns-inverse-surface-color: var(--color-inverse-0);
16
- --ns-inverse-surface-color-top: light-dark(var(--color-inverse-0), var(--color-inverse-200));
17
- --ns-inverse-surface-color-bottom: light-dark(var(--color-inverse-200), var(--color-inverse-0));
18
- --ns-inverse-surface-color-text: var(--color-inverse-900);
19
- --ns-inverse-border-color: var(--color-inverse-0);
20
- --ns-inverse-shadow-color: light-dark(var(--color-inverse-700), var(--color-inverse-500));
21
- --ns-inverse-focus-light-color: light-dark(var(--color-secondary-300), var(--color-secondary-700));
22
- --ns-inverse-focus-medium-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
23
-
24
- --ns-primary-z: 5;
25
- --ns-primary-text-color: light-dark(var(--color-primary-500), var(--color-primary-400));
26
- --ns-primary-surface-color: var(--color-primary-500);
27
- --ns-primary-surface-color-top: var(--color-primary-400);
28
- --ns-primary-surface-color-bottom: var(--color-primary-600);
29
- --ns-primary-surface-color-text: #fff;
30
- --ns-primary-border-color: light-dark(var(--color-primary-600), var(--color-primary-400));
31
- --ns-primary-shadow-color: var(--color-primary-800);
32
- --ns-primary-focus-light-color: light-dark(var(--color-primary-300), var(--color-primary-700));
33
- --ns-primary-focus-medium-color: light-dark(var(--color-primary-600), var(--color-primary-400));
34
-
35
- --ns-secondary-z: 4;
36
- --ns-secondary-text-color: light-dark(var(--color-secondary-500), var(--color-secondary-400));
37
- --ns-secondary-surface-color: var(--color-secondary-500);
38
- --ns-secondary-surface-color-top: var(--color-secondary-400);
39
- --ns-secondary-surface-color-bottom: var(--color-secondary-600);
40
- --ns-secondary-surface-color-text: #fff;
41
- --ns-secondary-border-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
42
- --ns-secondary-shadow-color: var(--color-secondary-800);
43
- --ns-secondary-focus-light-color: light-dark(var(--color-secondary-300), var(--color-secondary-700));
44
- --ns-secondary-focus-medium-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
45
-
46
- --ns-tertiary-z: 3;
47
- --ns-tertiary-text-color: light-dark(var(--color-tertiary-500), var(--color-tertiary-400));
48
- --ns-tertiary-surface-color: var(--color-tertiary-500);
49
- --ns-tertiary-surface-color-top: var(--color-tertiary-400);
50
- --ns-tertiary-surface-color-bottom: var(--color-tertiary-600);
51
- --ns-tertiary-surface-color-text: #fff;
52
- --ns-tertiary-border-color: light-dark(var(--color-tertiary-600), var(--color-tertiary-400));
53
- --ns-tertiary-shadow-color: var(--color-tertiary-800);
54
- --ns-tertiary-focus-light-color: light-dark(var(--color-tertiary-300), var(--color-tertiary-700));
55
- --ns-tertiary-focus-medium-color: light-dark(var(--color-tertiary-600), var(--color-tertiary-400));
56
-
57
- --ns-success-z: 3;
58
- --ns-success-text-color: light-dark(var(--color-success-500), var(--color-success-400));
59
- --ns-success-surface-color: var(--color-success-500);
60
- --ns-success-surface-color-top: var(--color-success-400);
61
- --ns-success-surface-color-bottom: var(--color-success-600);
62
- --ns-success-surface-color-text: #fff;
63
- --ns-success-border-color: light-dark(var(--color-success-600), var(--color-success-400));
64
- --ns-success-shadow-color: var(--color-success-800);
65
- --ns-success-focus-light-color: light-dark(var(--color-success-300), var(--color-success-700));
66
- --ns-success-focus-medium-color: light-dark(var(--color-success-600), var(--color-success-400));
67
-
68
- --ns-warning-z: 3;
69
- --ns-warning-text-color: light-dark(var(--color-warning-500), var(--color-warning-400));
70
- --ns-warning-surface-color: var(--color-warning-500);
71
- --ns-warning-surface-color-top: var(--color-warning-400);
72
- --ns-warning-surface-color-bottom: var(--color-warning-600);
73
- --ns-warning-surface-color-text: #fff;
74
- --ns-warning-border-color: light-dark(var(--color-warning-600), var(--color-warning-400));
75
- --ns-warning-shadow-color: var(--color-warning-800);
76
- --ns-warning-focus-light-color: light-dark(var(--color-warning-300), var(--color-warning-700));
77
- --ns-warning-focus-medium-color: light-dark(var(--color-warning-600), var(--color-warning-400));
78
-
79
- --ns-danger-z: 3;
80
- --ns-danger-text-color: light-dark(var(--color-danger-500), var(--color-danger-400));
81
- --ns-danger-surface-color: var(--color-danger-500);
82
- --ns-danger-surface-color-top: var(--color-danger-400);
83
- --ns-danger-surface-color-bottom: var(--color-danger-600);
84
- --ns-danger-surface-color-text: #fff;
85
- --ns-danger-border-color: light-dark(var(--color-danger-600), var(--color-danger-400));;
86
- --ns-danger-shadow-color: var(--color-danger-800);
87
- --ns-danger-focus-light-color: light-dark(var(--color-danger-300), var(--color-danger-700));
88
- --ns-danger-focus-medium-color: light-dark(var(--color-danger-600), var(--color-danger-400));
89
- }