@geoffcox/sterling-svelte-themes 2.0.3 → 2.0.5

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 (53) hide show
  1. package/README.md +21 -0
  2. package/css/sterling/Autocomplete.base.css +2 -2
  3. package/css/sterling/Button.base.css +5 -5
  4. package/css/sterling/Button.colors.css +52 -52
  5. package/css/sterling/Button.disabled.css +14 -18
  6. package/css/sterling/Button.secondary.colors.css +52 -52
  7. package/css/sterling/Button.secondary.css +7 -3
  8. package/css/sterling/Button.tool.colors.css +40 -40
  9. package/css/sterling/Button.tool.css +4 -4
  10. package/css/sterling/Callout.base.css +4 -4
  11. package/css/sterling/Checkbox.base.css +9 -6
  12. package/css/sterling/Checkbox.disabled.css +11 -21
  13. package/css/sterling/Dialog.base.css +3 -2
  14. package/css/sterling/Dropdown.base.css +6 -6
  15. package/css/sterling/Dropdown.disabled.css +4 -25
  16. package/css/sterling/Input.base.css +1 -9
  17. package/css/sterling/Input.disabled.css +5 -34
  18. package/css/sterling/Label.base.css +2 -2
  19. package/css/sterling/Label.boxed.css +6 -2
  20. package/css/sterling/List.base.css +3 -25
  21. package/css/sterling/List.disabled.css +4 -4
  22. package/css/sterling/ListItem.disabled.css +7 -23
  23. package/css/sterling/Menu.base.css +2 -2
  24. package/css/sterling/MenuItem.base.css +3 -18
  25. package/css/sterling/MenuItem.css +1 -1
  26. package/css/sterling/MenuItem.defaultItem.css +1 -1
  27. package/css/sterling/MenuItem.disabled.css +6 -0
  28. package/css/sterling/MenuSeparator.base.css +1 -1
  29. package/css/sterling/Pagination.button.css +1 -1
  30. package/css/sterling/Pagination.input.css +3 -3
  31. package/css/sterling/Popover.css +1 -0
  32. package/css/sterling/Progress.base.css +1 -1
  33. package/css/sterling/Progress.css +0 -1
  34. package/css/sterling/Radio.base.css +2 -2
  35. package/css/sterling/Radio.disabled.css +12 -22
  36. package/css/sterling/Select.base.css +6 -6
  37. package/css/sterling/Select.disabled.css +5 -22
  38. package/css/sterling/Slider.base.css +11 -10
  39. package/css/sterling/Slider.disabled.css +8 -23
  40. package/css/sterling/Switch.base.css +15 -14
  41. package/css/sterling/Switch.disabled.css +15 -26
  42. package/css/sterling/Tab.base.css +5 -5
  43. package/css/sterling/Tab.disabled.css +5 -30
  44. package/css/sterling/TabList.base.css +1 -1
  45. package/css/sterling/TextArea.base.css +4 -4
  46. package/css/sterling/TextArea.disabled.css +5 -26
  47. package/css/sterling/Tree.base.css +4 -4
  48. package/css/sterling/Tree.disabled.css +5 -26
  49. package/css/sterling/TreeItem.disabled.css +4 -29
  50. package/css/sterling/vars.css +53 -46
  51. package/package.json +1 -1
  52. package/css/sterling/MenuItem.defaultItem.disabled.css +0 -28
  53. package/css/sterling/Progress.disabled.css +0 -17
package/css/sterling/Select.disabled.css CHANGED
@@ -1,28 +1,11 @@
1
1
  .sterling-select.disabled {
2
+ background-color: var(--stsv-input__background-color--disabled);
3
+ border-color: var(--stsv-input__border-color--disabled);
4
+ color: var(--stsv-input__color--disabled);
2
5
  cursor: not-allowed;
3
6
  outline: none;
4
7
  }
5
8
 
6
- .sterling-select::after {
7
- background: repeating-linear-gradient(
8
- var(--stsv-common--disabled__stripe-angle),
9
- var(--stsv-common--disabled__stripe-color),
10
- var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
11
- var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
12
- var(--stsv-common--disabled__stripe-color--alt)
13
- calc(2 * var(--stsv-common--disabled__stripe-width))
14
- );
15
- bottom: 0;
16
- content: '';
17
- left: 0;
18
- opacity: 0;
19
- position: absolute;
20
- right: 0;
21
- top: 0;
22
- pointer-events: none;
23
- transition: opacity 250ms;
24
- }
25
-
26
- .sterling-select.disabled::after {
27
- opacity: 1;
9
+ .sterling-slider.disabled .fill {
10
+ background: var(--stsv-common__color--disabled);
28
11
  }
package/css/sterling/Slider.base.css CHANGED
@@ -61,13 +61,6 @@
61
61
  width: 3px;
62
62
  }
63
63
 
64
- .sterling-slider:focus-visible {
65
- outline-color: var(--stsv-common__outline-color);
66
- outline-offset: 0;
67
- outline-style: solid;
68
- outline-width: 2px;
69
- }
70
-
71
64
  /* ----- fill ----- */
72
65
 
73
66
  .sterling-slider .fill {
@@ -116,7 +109,7 @@
116
109
  border-color: var(--stsv-button__border-color);
117
110
  border-radius: 10000px;
118
111
  border-style: solid;
119
- border-width: 2px;
112
+ border-width: var(--stsv-button__border-width);
120
113
  box-sizing: border-box;
121
114
  color: var(--stsv-button__color);
122
115
  cursor: pointer;
@@ -124,6 +117,7 @@
124
117
  font: inherit;
125
118
  height: 1.5em;
126
119
  overflow: hidden;
120
+ outline: none;
127
121
  padding: 0;
128
122
  text-decoration: none;
129
123
  transition:
@@ -159,18 +153,25 @@
159
153
  top: var(--valueOffset);
160
154
  }
161
155
 
162
- .thumb:hover {
156
+ .sterling-slider:not(.disabled) .thumb:hover {
163
157
  background-color: var(--stsv-button__background-color--hover);
164
158
  border-color: var(--stsv-button__border-color--hover);
165
159
  color: var(--stsv-button__color--hover);
166
160
  }
167
161
 
168
- .thumb:active {
162
+ .sterling-slider:not(.disabled) .thumb:active {
169
163
  background-color: var(--stsv-button__background-color--active);
170
164
  border-color: var(--stsv-button__border-color--active);
171
165
  color: var(--stsv-button__color--active);
172
166
  }
173
167
 
168
+ .sterling-slider:not(.disabled).using-keyboard:focus-visible .thumb {
169
+ outline-color: var(--stsv-common__outline-color);
170
+ outline-offset: 0;
171
+ outline-style: solid;
172
+ outline-width: var(--stsv-common__outline-width);
173
+ }
174
+
174
175
  /* ----- reduced motion ----- */
175
176
 
176
177
  @media (prefers-reduced-motion) {
package/css/sterling/Slider.disabled.css CHANGED
@@ -1,30 +1,15 @@
1
- /* ----- thumb disabled ----- */
1
+ .sterling-slider.sterling-slider.disabled .track {
2
+ background: var(--stsv-common__background-color--disabled);
3
+
4
+ }
2
5
 
3
6
  .sterling-slider.disabled .thumb {
4
7
  cursor: not-allowed;
5
8
  outline: none;
6
9
  }
7
10
 
8
- .sterling-slider .thumb::after {
9
- background: repeating-linear-gradient(
10
- var(--stsv-common--disabled__stripe-angle),
11
- var(--stsv-common--disabled__stripe-color),
12
- var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
13
- var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
14
- var(--stsv-common--disabled__stripe-color--alt)
15
- calc(2 * var(--stsv-common--disabled__stripe-width))
16
- );
17
- bottom: 0;
18
- content: '';
19
- left: 0;
20
- opacity: 0;
21
- position: absolute;
22
- right: 0;
23
- top: 0;
24
- pointer-events: none;
25
- transition: opacity 250ms;
26
- }
27
-
28
- .sterling-slider.disabled .thumb::after {
29
- opacity: 1;
11
+ .sterling-slider.disabled .thumb {
12
+ background-color: var(--stsv-button__background-color--disabled);
13
+ border-color: var(--stsv-button__border-color--disabled);
14
+ color: var(--stsv-button__color--disabled);
30
15
  }
package/css/sterling/Switch.base.css CHANGED
@@ -54,11 +54,11 @@
54
54
  /* ----- toggle ----- */
55
55
 
56
56
  .sterling-switch .toggle {
57
- background-color: var(--stsv-input__background-color);
57
+ background-color: var(--stsv-common__background-color);
58
58
  border-color: var(--stsv-input__border-color);
59
59
  border-radius: 10000px;
60
60
  border-style: solid;
61
- border-width: 2px;
61
+ border-width: var(--stsv-input__border-width);
62
62
  box-sizing: border-box;
63
63
  color: var(--stsv-input__color);
64
64
  font: inherit;
@@ -72,25 +72,19 @@
72
72
  }
73
73
 
74
74
  .sterling-switch:hover .toggle {
75
- background-color: var(--stsv-input__background-color--hover);
76
75
  border-color: var(--stsv-input__border-color--hover);
77
76
  color: var(--stsv-input__color--hover);
78
77
  }
79
78
 
80
- input:focus-visible ~ .toggle {
81
- background-color: var(--stsv-input__background-color--focus);
79
+ .sterling-switch input:focus-visible ~ .toggle {
82
80
  border-color: var(--stsv-input__border-color--focus);
83
81
  color: var(--stsv-common__color--focux);
84
- outline-color: var(--stsv-common__outline-color);
85
- outline-offset: 0;
86
- outline-style: solid;
87
- outline-width: 2px;
88
82
  }
89
83
 
90
- input:checked ~ .toggle,
91
- input:checked:hover ~ .toggle,
92
- input:checked:focus-visible ~ .toggle {
93
- background-color: var(--stsv-input__border-color--hover);
84
+ .sterling-switch input:checked ~ .toggle,
85
+ .sterling-switch input:checked:hover ~ .toggle,
86
+ .sterling-switch input:checked:focus-visible ~ .toggle {
87
+ background-color: var(--stsv-input__background-color--selected);
94
88
  }
95
89
 
96
90
  /* ----- switch vertical ----- */
@@ -125,7 +119,7 @@ input:checked:focus-visible ~ .toggle {
125
119
  border-color: var(--stsv-button__border-color);
126
120
  border-radius: 10000px;
127
121
  border-style: solid;
128
- border-width: 2px;
122
+ border-width: var(--stsv-button__border-width);
129
123
  box-sizing: border-box;
130
124
  color: var(--stsv-button__color);
131
125
  display: block;
@@ -152,6 +146,13 @@ input:checked:focus-visible ~ .toggle {
152
146
  color: var(--stsv-button__color--hover);
153
147
  }
154
148
 
149
+ .sterling-switch.using-keyboard:focus-within .thumb {
150
+ outline-color: var(--stsv-common__outline-color);
151
+ outline-offset: 0;
152
+ outline-style: solid;
153
+ outline-width: var(--stsv-common__outline-width);
154
+ }
155
+
155
156
  /* ----- thumb vertical ----- */
156
157
 
157
158
  .sterling-switch:not(.vertical) .thumb {
package/css/sterling/Switch.disabled.css CHANGED
@@ -1,30 +1,19 @@
1
- .sterling-switch.disabled input {
2
- cursor: not-allowed;
1
+ .sterling-switch.disabled {
2
+ color: var(--stsv-common__color--disabled);
3
3
  }
4
-
5
- /* ----- thumb disabled ----- */
6
-
7
- .sterling-switch .thumb::after {
8
- background: repeating-linear-gradient(
9
- var(--stsv-common--disabled__stripe-angle),
10
- var(--stsv-common--disabled__stripe-color),
11
- var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
12
- var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
13
- var(--stsv-common--disabled__stripe-color--alt)
14
- calc(2 * var(--stsv-common--disabled__stripe-width))
15
- );
16
- bottom: 0;
17
- border-radius: 10000px;
18
- content: '';
19
- left: 0;
20
- opacity: 0;
21
- position: absolute;
22
- right: 0;
23
- top: 0;
24
- pointer-events: none;
25
- transition: opacity 250ms;
4
+ .sterling-switch.disabled .toggle {
5
+ background-color: var(--stsv-input__background-color--disabled);
6
+ border-color: var(--stsv-input__border-color--disabled);
7
+ color: var(--stsv-input__color--disabled);
26
8
  }
27
9
 
28
- .sterling-switch.disabled .thumb::after {
29
- opacity: 1;
10
+ .sterling-switch.disabled input {
11
+ color: var(--stsv-common__color--disabled);
12
+ cursor: not-allowed;
30
13
  }
14
+
15
+ .sterling-switch.disabled .thumb {
16
+ background-color: var(--stsv-button__background-color--disabled);
17
+ border-color: var(--stsv-button__border-color--disabled);
18
+ color: var(--stsv-button__color--disabled);
19
+ }
package/css/sterling/Tab.base.css CHANGED
@@ -47,7 +47,7 @@
47
47
  outline-color: var(--stsv-common__outline-color);
48
48
  outline-offset: 0;
49
49
  outline-style: solid;
50
- outline-width: 2px;
50
+ outline-width: var(--stsv-common__outline-width);
51
51
  }
52
52
 
53
53
  /* ----- content -----*/
@@ -61,7 +61,7 @@
61
61
  .sterling-tab .indicator {
62
62
  background-color: transparent;
63
63
  border-radius: 10000px;
64
- transition: background-color 500ms;
64
+ transition: background-color 250ms;
65
65
  }
66
66
 
67
67
  .sterling-tab:not(.vertical) .indicator {
@@ -74,15 +74,15 @@
74
74
  width: 0.4em;
75
75
  }
76
76
 
77
- .sterling-tab:not(.selected):not(:active):hover .indicator {
77
+ .sterling-tab:not(:disabled):not(.selected):not(:active):hover .indicator {
78
78
  background-color: var(--stsv-common__color--subtle);
79
79
  }
80
80
 
81
- .sterling-tab:active .indicator {
81
+ .sterling-tab:not(:disabled):active .indicator {
82
82
  background-color: var(--stsv-input__border-color--selected);
83
83
  }
84
84
 
85
- .sterling-tab.selected .indicator {
85
+ .sterling-tab:not(:disabled).selected .indicator {
86
86
  background-color: var(--stsv-input__border-color--selected);
87
87
  }
88
88
 
package/css/sterling/Tab.disabled.css CHANGED
@@ -1,36 +1,11 @@
1
1
  .sterling-tab:disabled {
2
2
  cursor: not-allowed;
3
3
  outline: none;
4
- }
5
-
6
- .sterling-tab::after {
7
- background: repeating-linear-gradient(
8
- var(--stsv-common--disabled__stripe-angle),
9
- var(--stsv-common--disabled__stripe-color),
10
- var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
11
- var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
12
- var(--stsv-common--disabled__stripe-color--alt)
13
- calc(2 * var(--stsv-common--disabled__stripe-width))
14
- );
15
- bottom: 0;
16
- content: '';
17
- left: 0;
18
- opacity: 0;
19
- position: absolute;
20
- right: 0;
21
- top: 0;
22
- pointer-events: none;
23
- transition: opacity 250ms;
24
- }
4
+ /* background-color: var(--stsv-common__background-color--disabled); */
5
+ color: var(--stsv-common__color--disabled);
25
6
 
26
- .sterling-tab:disabled::after {
27
- opacity: 1;
28
7
  }
29
8
 
30
- /* ----- indicator disabled -----*/
31
-
32
- .sterling-tab:disabled:not(.selected) .indicator,
33
- .sterling-tab:disabled:not(.selected):hover .indicator,
34
- .sterling-tab:disabled:not(.selected):active .indicator {
35
- background-color: transparent;
36
- }
9
+ .sterling-tab:disabled.selected .indicator {
10
+ background-color: var(--stsv-input__border-color--disabled);
11
+ }
package/css/sterling/TabList.base.css CHANGED
@@ -23,7 +23,7 @@
23
23
  row-gap: 0.5em;
24
24
  }
25
25
 
26
- .sterling-tab-list:hover {
26
+ .sterling-tab-list:not(.disabled):hover {
27
27
  color: var(--stsv-common__color--hover);
28
28
  }
29
29
 
package/css/sterling/TextArea.base.css CHANGED
@@ -10,7 +10,7 @@
10
10
  border-color: var(--stsv-input__border-color);
11
11
  border-radius: 3px;
12
12
  border-style: solid;
13
- border-width: 2px;
13
+ border-width: var(--stsv-input__border-width);
14
14
  box-sizing: border-box;
15
15
  color: var(--stsv-input__color);
16
16
  display: block;
@@ -30,20 +30,20 @@
30
30
  width: 100%;
31
31
  }
32
32
 
33
- .sterling-text-area textarea:hover {
33
+ .sterling-text-area textarea:not(:disabled):hover {
34
34
  background-color: var(--stsv-input__background-color--hover);
35
35
  border-color: var(--stsv-input__border-color--hover);
36
36
  color: var(--stsv-input__color--hover);
37
37
  }
38
38
 
39
- .sterling-text-area textarea:focus {
39
+ .sterling-text-area textarea:not(:disabled):focus {
40
40
  background-color: var(--stsv-input__background-color--focus);
41
41
  border-color: var(--stsv-input__border-color--focus);
42
42
  color: var(--stsv-input__color--focus);
43
43
  outline-color: var(--stsv-common__outline-color);
44
44
  outline-offset: 0;
45
45
  outline-style: solid;
46
- outline-width: 2px;
46
+ outline-width: var(--stsv-common__outline-width);
47
47
  }
48
48
 
49
49
  .sterling-text-area textarea::placeholder {
package/css/sterling/TextArea.disabled.css CHANGED
@@ -1,28 +1,7 @@
1
- .sterling-text-area:disabled {
1
+ .sterling-text-area textarea:disabled {
2
2
  cursor: not-allowed;
3
3
  outline: none;
4
- }
5
-
6
- .sterling-text-area::after {
7
- background: repeating-linear-gradient(
8
- var(--stsv-common--disabled__stripe-angle),
9
- var(--stsv-common--disabled__stripe-color),
10
- var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
11
- var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
12
- var(--stsv-common--disabled__stripe-color--alt)
13
- calc(2 * var(--stsv-common--disabled__stripe-width))
14
- );
15
- bottom: 0;
16
- content: '';
17
- left: 0;
18
- opacity: 0;
19
- position: absolute;
20
- right: 0;
21
- top: 0;
22
- pointer-events: none;
23
- transition: opacity 250ms;
24
- }
25
-
26
- .sterling-text-area.disabled::after {
27
- opacity: 1;
28
- }
4
+ background-color: var(--stsv-input__background-color--disabled);
5
+ border-color: var(--stsv-input__border-color--disabled);
6
+ color: var(--stsv-input__color--disabled);
7
+ }
package/css/sterling/Tree.base.css CHANGED
@@ -3,7 +3,7 @@
3
3
  border-color: var(--stsv-common__border-color);
4
4
  border-radius: 0;
5
5
  border-style: solid;
6
- border-width: 2px;
6
+ border-width: var(--stsv-common__border-width);
7
7
  box-sizing: border-box;
8
8
  color: var(--stsv-common__color);
9
9
  height: 100%;
@@ -16,18 +16,18 @@
16
16
  border-color 250ms;
17
17
  }
18
18
 
19
- .sterling-tree:hover {
19
+ .sterling-tree:not(.disabled):hover {
20
20
  border-color: var(--stsv-input__border-color--hover);
21
21
  color: var(--stsv-input__color--hover);
22
22
  }
23
23
 
24
- .sterling-tree.using-keyboard:focus-within {
24
+ .sterling-tree:not(.disabled).using-keyboard:focus-within {
25
25
  border-color: var(--stsv-button__border-color--focus);
26
26
  color: var(--stsv-input__color--focus);
27
27
  outline-color: var(--stsv-common__outline-color);
28
28
  outline-offset: 0;
29
29
  outline-style: solid;
30
- outline-width: 2px;
30
+ outline-width: var(--stsv-common__outline-width);
31
31
  }
32
32
 
33
33
  /* ----- container - a layout panel that grows with the items ----- */
package/css/sterling/Tree.disabled.css CHANGED
@@ -1,27 +1,6 @@
1
- .sterling-tree.disabled * {
1
+ .sterling-tree.disabled {
2
2
  cursor: not-allowed;
3
- }
4
-
5
- .sterling-tree .container::after {
6
- background: repeating-linear-gradient(
7
- var(--stsv-common--disabled__stripe-angle),
8
- var(--stsv-common--disabled__stripe-color),
9
- var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
10
- var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
11
- var(--stsv-common--disabled__stripe-color--alt)
12
- calc(2 * var(--stsv-common--disabled__stripe-width))
13
- );
14
- bottom: 0;
15
- content: '';
16
- left: 0;
17
- opacity: 0;
18
- position: absolute;
19
- pointer-events: none;
20
- right: 0;
21
- top: 0;
22
- transition: opacity 250ms;
23
- }
24
-
25
- .sterling-tree.disabled .container::after {
26
- opacity: 1;
27
- }
3
+ background-color: var(--stsv-common__background-color--disabled);
4
+ border-color: var(--stsv-common__border-color--disabled);
5
+ color: var(--stsv-common__color--disabled);
6
+ }
package/css/sterling/TreeItem.disabled.css CHANGED
@@ -1,34 +1,9 @@
1
1
  .sterling-tree-item.disabled > .item {
2
2
  cursor: not-allowed;
3
3
  outline: none;
4
+ color: var(--stsv-input__color--disabled);
4
5
  }
5
6
 
6
- .sterling-tree-item > .item::after {
7
- background: repeating-linear-gradient(
8
- var(--stsv-common--disabled__stripe-angle),
9
- var(--stsv-common--disabled__stripe-color),
10
- var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
11
- var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
12
- var(--stsv-common--disabled__stripe-color--alt)
13
- calc(2 * var(--stsv-common--disabled__stripe-width))
14
- );
15
- bottom: 0;
16
- content: '';
17
- left: 0;
18
- opacity: 0;
19
- pointer-events: none;
20
- position: absolute;
21
- right: 0;
22
- top: 0;
23
- transition: opacity 250ms;
24
- }
25
-
26
- .sterling-tree-item.disabled > .item::after {
27
- opacity: 1;
28
- }
29
-
30
- @media (prefers-reduced-motion) {
31
- .sterling-tree-item > .item::after {
32
- transition: none;
33
- }
34
- }
7
+ .sterling-tree-item.disabled.selected > .item {
8
+ background-color: var(--stsv-button__background-color--active);
9
+ }