@nightshadeui/stylesheets 2.2.0 → 2.3.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 +103 -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 +1 -3
  9. package/variables/spacing.css +1 -2
  10. package/variables/ui.css +89 -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,103 @@
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-color-text: var(--ui-base-surface-color-text);
8
+ --input-border-color: var(--ui-base-border-color);
9
+ --input-shadow-color: var(--ui-base-shadow-color);
10
+ --input-focus-light-color: var(--ui-base-focus-light-color);
11
+ --input-focus-medium-color: var(--ui-base-focus-medium-color);
12
+ }
13
+
14
+ .input-kind-inverse {
15
+ --input-z: var(--ui-inverse-z);
16
+ --input-text-color: var(--color-inverse-0);
17
+ --input-surface-color: var(--ui-inverse-surface-color);
18
+ --input-surface-color-top: var(--ui-inverse-surface-color-top);
19
+ --input-surface-color-bottom: var(--ui-inverse-surface-color-bottom);
20
+ --input-surface-color-text: var(--ui-inverse-surface-color-text);
21
+ --input-border-color: var(--ui-inverse-border-color);
22
+ --input-shadow-color: var(--ui-inverse-shadow-color);
23
+ --input-focus-light-color: var(--ui-inverse-focus-light-color);
24
+ --input-focus-medium-color: var(--ui-inverse-focus-medium-color);
25
+ }
26
+
27
+ .input-kind-primary {
28
+ --input-z: var(--ui-primary-z);
29
+ --input-text-color: var(--ui-primary-text-color);
30
+ --input-surface-color: var(--ui-primary-surface-color);
31
+ --input-surface-color-top: var(--ui-primary-surface-color-top);
32
+ --input-surface-color-bottom: var(--ui-primary-surface-color-bottom);
33
+ --input-surface-color-text: var(--ui-primary-surface-color-text);
34
+ --input-border-color: var(--ui-primary-border-color);
35
+ --input-shadow-color: var(--ui-primary-shadow-color);
36
+ --input-focus-light-color: var(--ui-primary-focus-light-color);
37
+ --input-focus-medium-color: var(--ui-primary-focus-medium-color);
38
+ }
39
+
40
+ .input-kind-secondary {
41
+ --input-z: var(--ui-secondary-z);
42
+ --input-text-color: var(--ui-secondary-text-color);
43
+ --input-surface-color: var(--ui-secondary-surface-color);
44
+ --input-surface-color-top: var(--ui-secondary-surface-color-top);
45
+ --input-surface-color-bottom: var(--ui-secondary-surface-color-bottom);
46
+ --input-surface-color-text: var(--ui-secondary-surface-color-text);
47
+ --input-border-color: var(--ui-secondary-border-color);
48
+ --input-shadow-color: var(--ui-secondary-shadow-color);
49
+ --input-focus-light-color: var(--ui-secondary-focus-light-color);
50
+ --input-focus-medium-color: var(--ui-secondary-focus-medium-color);
51
+ }
52
+
53
+ .input-kind-tertiary {
54
+ --input-z: var(--ui-tertiary-z);
55
+ --input-text-color: var(--ui-tertiary-text-color);
56
+ --input-surface-color: var(--ui-tertiary-surface-color);
57
+ --input-surface-color-top: var(--ui-tertiary-surface-color-top);
58
+ --input-surface-color-bottom: var(--ui-tertiary-surface-color-bottom);
59
+ --input-surface-color-text: var(--ui-tertiary-surface-color-text);
60
+ --input-border-color: var(--ui-tertiary-border-color);
61
+ --input-shadow-color: var(--ui-tertiary-shadow-color);
62
+ --input-focus-light-color: var(--ui-tertiary-focus-light-color);
63
+ --input-focus-medium-color: var(--ui-tertiary-focus-medium-color);
64
+ }
65
+
66
+ .input-kind-success {
67
+ --input-z: var(--ui-success-z);
68
+ --input-text-color: var(--ui-success-text-color);
69
+ --input-surface-color: var(--ui-success-surface-color);
70
+ --input-surface-color-top: var(--ui-success-surface-color-top);
71
+ --input-surface-color-bottom: var(--ui-success-surface-color-bottom);
72
+ --input-surface-color-text: var(--ui-success-surface-color-text);
73
+ --input-border-color: var(--ui-success-border-color);
74
+ --input-shadow-color: var(--ui-success-shadow-color);
75
+ --input-focus-light-color: var(--ui-success-focus-light-color);
76
+ --input-focus-medium-color: var(--ui-success-focus-medium-color);
77
+ }
78
+
79
+ .input-kind-warning {
80
+ --input-z: var(--ui-warning-z);
81
+ --input-text-color: var(--ui-warning-text-color);
82
+ --input-surface-color: var(--ui-warning-surface-color);
83
+ --input-surface-color-top: var(--ui-warning-surface-color-top);
84
+ --input-surface-color-bottom: var(--ui-warning-surface-color-bottom);
85
+ --input-surface-color-text: var(--ui-warning-surface-color-text);
86
+ --input-border-color: var(--ui-warning-border-color);
87
+ --input-shadow-color: var(--ui-warning-shadow-color);
88
+ --input-focus-light-color: var(--ui-warning-focus-light-color);
89
+ --input-focus-medium-color: var(--ui-warning-focus-medium-color);
90
+ }
91
+
92
+ .input-kind-danger {
93
+ --input-z: var(--ui-danger-z);
94
+ --input-text-color: var(--ui-danger-text-color);
95
+ --input-surface-color: var(--ui-danger-surface-color);
96
+ --input-surface-color-top: var(--ui-danger-surface-color-top);
97
+ --input-surface-color-bottom: var(--ui-danger-surface-color-bottom);
98
+ --input-surface-color-text: var(--ui-danger-surface-color-text);
99
+ --input-border-color: var(--ui-danger-border-color);
100
+ --input-shadow-color: var(--ui-danger-shadow-color);
101
+ --input-focus-light-color: var(--ui-danger-focus-light-color);
102
+ --input-focus-medium-color: var(--ui-danger-focus-medium-color);
103
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nightshadeui/stylesheets",
3
- "version": "2.2.0",
3
+ "version": "2.3.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,5 +1,4 @@
1
1
  :root {
2
-
3
2
  --color-base-light-0: hsl(280deg, 5%, 100%);
4
3
  --color-base-light-50: hsl(280deg, 5%, 98%);
5
4
  --color-base-light-100: hsl(280deg, 5%, 96%);
@@ -113,5 +112,4 @@
113
112
  --color-danger-700: hsl(352deg, 64%, 36%);
114
113
  --color-danger-800: hsl(352deg, 64%, 28%);
115
114
  --color-danger-900: hsl(352deg, 64%, 16%);
116
-
117
- }
115
+ }
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,89 @@
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-color-text: var(--color-base-900);
8
+ --ui-base-border-color: var(--color-base-400);
9
+ --ui-base-shadow-color: var(--shadow-color-medium);
10
+ --ui-base-focus-light-color: light-dark(var(--color-secondary-300), var(--color-secondary-700));
11
+ --ui-base-focus-medium-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
12
+
13
+ --ui-inverse-z: 1;
14
+ --ui-inverse-text-color: var(--color-inverse-0);
15
+ --ui-inverse-surface-color: var(--color-inverse-0);
16
+ --ui-inverse-surface-color-top: light-dark(var(--color-inverse-200), var(--color-inverse-0));
17
+ --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-border-color: var(--color-inverse-0);
20
+ --ui-inverse-shadow-color: light-dark(var(--color-inverse-700), var(--color-inverse-500));
21
+ --ui-inverse-focus-light-color: light-dark(var(--color-secondary-300), var(--color-secondary-700));
22
+ --ui-inverse-focus-medium-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
23
+
24
+ --ui-primary-z: 5;
25
+ --ui-primary-text-color: light-dark(var(--color-primary-500), var(--color-primary-400));
26
+ --ui-primary-surface-color: var(--color-primary-500);
27
+ --ui-primary-surface-color-top: var(--color-primary-400);
28
+ --ui-primary-surface-color-bottom: var(--color-primary-600);
29
+ --ui-primary-surface-color-text: #fff;
30
+ --ui-primary-border-color: light-dark(var(--color-primary-600), var(--color-primary-400));
31
+ --ui-primary-shadow-color: var(--color-primary-800);
32
+ --ui-primary-focus-light-color: light-dark(var(--color-primary-300), var(--color-primary-700));
33
+ --ui-primary-focus-medium-color: light-dark(var(--color-primary-600), var(--color-primary-400));
34
+
35
+ --ui-secondary-z: 4;
36
+ --ui-secondary-text-color: light-dark(var(--color-secondary-500), var(--color-secondary-400));
37
+ --ui-secondary-surface-color: var(--color-secondary-500);
38
+ --ui-secondary-surface-color-top: var(--color-secondary-400);
39
+ --ui-secondary-surface-color-bottom: var(--color-secondary-600);
40
+ --ui-secondary-surface-color-text: #fff;
41
+ --ui-secondary-border-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
42
+ --ui-secondary-shadow-color: var(--color-secondary-800);
43
+ --ui-secondary-focus-light-color: light-dark(var(--color-secondary-300), var(--color-secondary-700));
44
+ --ui-secondary-focus-medium-color: light-dark(var(--color-secondary-600), var(--color-secondary-400));
45
+
46
+ --ui-tertiary-z: 3;
47
+ --ui-tertiary-text-color: light-dark(var(--color-tertiary-500), var(--color-tertiary-400));
48
+ --ui-tertiary-surface-color: var(--color-tertiary-500);
49
+ --ui-tertiary-surface-color-top: var(--color-tertiary-400);
50
+ --ui-tertiary-surface-color-bottom: var(--color-tertiary-600);
51
+ --ui-tertiary-surface-color-text: #fff;
52
+ --ui-tertiary-border-color: light-dark(var(--color-tertiary-600), var(--color-tertiary-400));
53
+ --ui-tertiary-shadow-color: var(--color-tertiary-800);
54
+ --ui-tertiary-focus-light-color: light-dark(var(--color-tertiary-300), var(--color-tertiary-700));
55
+ --ui-tertiary-focus-medium-color: light-dark(var(--color-tertiary-600), var(--color-tertiary-400));
56
+
57
+ --ui-success-z: 3;
58
+ --ui-success-text-color: light-dark(var(--color-success-500), var(--color-success-400));
59
+ --ui-success-surface-color: var(--color-success-500);
60
+ --ui-success-surface-color-top: var(--color-success-400);
61
+ --ui-success-surface-color-bottom: var(--color-success-600);
62
+ --ui-success-surface-color-text: #fff;
63
+ --ui-success-border-color: light-dark(var(--color-success-600), var(--color-success-400));
64
+ --ui-success-shadow-color: var(--color-success-800);
65
+ --ui-success-focus-light-color: light-dark(var(--color-success-300), var(--color-success-700));
66
+ --ui-success-focus-medium-color: light-dark(var(--color-success-600), var(--color-success-400));
67
+
68
+ --ui-warning-z: 3;
69
+ --ui-warning-text-color: light-dark(var(--color-warning-500), var(--color-warning-400));
70
+ --ui-warning-surface-color: var(--color-warning-500);
71
+ --ui-warning-surface-color-top: var(--color-warning-400);
72
+ --ui-warning-surface-color-bottom: var(--color-warning-600);
73
+ --ui-warning-surface-color-text: #fff;
74
+ --ui-warning-border-color: light-dark(var(--color-warning-600), var(--color-warning-400));
75
+ --ui-warning-shadow-color: var(--color-warning-800);
76
+ --ui-warning-focus-light-color: light-dark(var(--color-warning-300), var(--color-warning-700));
77
+ --ui-warning-focus-medium-color: light-dark(var(--color-warning-600), var(--color-warning-400));
78
+
79
+ --ui-danger-z: 3;
80
+ --ui-danger-text-color: light-dark(var(--color-danger-500), var(--color-danger-400));
81
+ --ui-danger-surface-color: var(--color-danger-500);
82
+ --ui-danger-surface-color-top: var(--color-danger-400);
83
+ --ui-danger-surface-color-bottom: var(--color-danger-600);
84
+ --ui-danger-surface-color-text: #fff;
85
+ --ui-danger-border-color: light-dark(var(--color-danger-600), var(--color-danger-400));;
86
+ --ui-danger-shadow-color: var(--color-danger-800);
87
+ --ui-danger-focus-light-color: light-dark(var(--color-danger-300), var(--color-danger-700));
88
+ --ui-danger-focus-medium-color: light-dark(var(--color-danger-600), var(--color-danger-400));
89
+ }
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
- }