@nightshadeui/stylesheets 2.1.0 → 2.2.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.
- package/index.css +2 -1
- package/input-kinds.css +103 -0
- package/package.json +1 -1
- package/util.css +14 -14
- package/variables/base.css +4 -7
- package/variables/semantics.css +89 -0
- /package/{input.css → semantics.css} +0 -0
package/index.css
CHANGED
|
@@ -4,9 +4,10 @@
|
|
|
4
4
|
@import './variables/font.css';
|
|
5
5
|
@import './variables/palette.css';
|
|
6
6
|
@import './variables/input.css';
|
|
7
|
+
@import './variables/semantics.css';
|
|
7
8
|
|
|
8
9
|
@import './commons.css';
|
|
9
|
-
@import './input.css';
|
|
10
|
+
@import './input-kinds.css';
|
|
10
11
|
@import './util.css';
|
|
11
12
|
@import './kbd.css';
|
|
12
13
|
|
package/input-kinds.css
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
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/package.json
CHANGED
package/util.css
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
.color-primary { color: var(--color-primary-500)
|
|
2
|
-
.color-secondary { color: var(--color-secondary-500)
|
|
3
|
-
.color-tertiary { color: var(--color-tertiary-500)
|
|
4
|
-
.color-success { color: var(--color-success-500)
|
|
5
|
-
.color-warning { color: var(--color-warning-500)
|
|
6
|
-
.color-danger { color: var(--color-danger-500)
|
|
1
|
+
.color-primary { color: var(--color-primary-500) }
|
|
2
|
+
.color-secondary { color: var(--color-secondary-500) }
|
|
3
|
+
.color-tertiary { color: var(--color-tertiary-500) }
|
|
4
|
+
.color-success { color: var(--color-success-500) }
|
|
5
|
+
.color-warning { color: var(--color-warning-500) }
|
|
6
|
+
.color-danger { color: var(--color-danger-500) }
|
|
7
7
|
|
|
8
|
-
.color-subtle { color: var(--color-subtle)
|
|
9
|
-
.color-sublime { color: var(--color-sublime)
|
|
8
|
+
.color-subtle { color: var(--text-color-subtle) }
|
|
9
|
+
.color-sublime { color: var(--text-color-sublime) }
|
|
10
10
|
|
|
11
11
|
.flex-1 { flex: 1 }
|
|
12
12
|
.flex-2 { flex: 2 }
|
|
@@ -29,13 +29,13 @@
|
|
|
29
29
|
.text-xxl { font-size: var(--font-size-xxl) }
|
|
30
30
|
.text-xxxl { font-size: var(--font-size-xxxl) }
|
|
31
31
|
|
|
32
|
-
.text-thin { font-weight: var(--font-weight-thin)
|
|
33
|
-
.text-light { font-weight: var(--font-weight-light)
|
|
34
|
-
.text-normal { font-weight: var(--font-weight-normal)
|
|
35
|
-
.text-bold { font-weight: var(--font-weight-bold)
|
|
36
|
-
.text-heavy { font-weight: var(--font-weight-heavy)
|
|
32
|
+
.text-thin { font-weight: var(--font-weight-thin) }
|
|
33
|
+
.text-light { font-weight: var(--font-weight-light) }
|
|
34
|
+
.text-normal { font-weight: var(--font-weight-normal) }
|
|
35
|
+
.text-bold { font-weight: var(--font-weight-bold) }
|
|
36
|
+
.text-heavy { font-weight: var(--font-weight-heavy) }
|
|
37
37
|
|
|
38
|
-
.font-alt { font-family: var(--font-alt)
|
|
38
|
+
.font-alt { font-family: var(--font-alt) }
|
|
39
39
|
|
|
40
40
|
.nowrap {
|
|
41
41
|
white-space: nowrap;
|
package/variables/base.css
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
|
|
3
|
-
--
|
|
4
|
-
--
|
|
3
|
+
--base-color: var(--ns-base-surface-color);
|
|
4
|
+
--text-color: var(--ns-base-text-color);
|
|
5
|
+
--text-color-subtle: var(--color-base-700);
|
|
6
|
+
--text-color-sublime: var(--color-base-600);
|
|
5
7
|
|
|
6
8
|
/* Border radius */
|
|
7
9
|
|
|
@@ -22,9 +24,4 @@
|
|
|
22
24
|
--shadow-color-medium: light-dark(rgba(0,0,0,.2), rgba(0,0,0,.75));
|
|
23
25
|
--shadow-color-heavy: light-dark(rgba(0,0,0,.3), rgba(0,0,0,.9));
|
|
24
26
|
|
|
25
|
-
/* Misc */
|
|
26
|
-
|
|
27
|
-
--color-subtle: var(--color-base-700);
|
|
28
|
-
--color-sublime: var(--color-base-600);
|
|
29
|
-
|
|
30
27
|
}
|
|
@@ -0,0 +1,89 @@
|
|
|
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
|
+
}
|
|
File without changes
|