@geoffcox/sterling-svelte-themes 2.0.2 → 2.0.4

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 (51) hide show
  1. package/README.md +21 -0
  2. package/css/sterling/Autocomplete.base.css +2 -2
  3. package/css/sterling/Button.base.css +2 -2
  4. package/css/sterling/Button.colors.css +36 -36
  5. package/css/sterling/Button.disabled.css +4 -20
  6. package/css/sterling/Button.secondary.colors.css +36 -36
  7. package/css/sterling/Button.tool.colors.css +24 -24
  8. package/css/sterling/Callout.base.css +4 -4
  9. package/css/sterling/Checkbox.base.css +9 -6
  10. package/css/sterling/Checkbox.disabled.css +11 -21
  11. package/css/sterling/Dialog.base.css +3 -2
  12. package/css/sterling/Dropdown.base.css +6 -6
  13. package/css/sterling/Dropdown.disabled.css +4 -25
  14. package/css/sterling/Input.base.css +1 -9
  15. package/css/sterling/Input.disabled.css +5 -34
  16. package/css/sterling/Label.base.css +12 -6
  17. package/css/sterling/Label.boxed.css +6 -2
  18. package/css/sterling/List.base.css +3 -25
  19. package/css/sterling/List.disabled.css +4 -4
  20. package/css/sterling/ListItem.disabled.css +7 -23
  21. package/css/sterling/Menu.base.css +2 -2
  22. package/css/sterling/MenuItem.base.css +3 -18
  23. package/css/sterling/MenuItem.css +1 -1
  24. package/css/sterling/MenuItem.defaultItem.css +1 -1
  25. package/css/sterling/MenuItem.disabled.css +6 -0
  26. package/css/sterling/MenuSeparator.base.css +1 -1
  27. package/css/sterling/Pagination.button.css +1 -1
  28. package/css/sterling/Pagination.input.css +3 -3
  29. package/css/sterling/Popover.css +1 -0
  30. package/css/sterling/Progress.base.css +1 -1
  31. package/css/sterling/Progress.css +0 -1
  32. package/css/sterling/Radio.base.css +2 -2
  33. package/css/sterling/Radio.disabled.css +12 -22
  34. package/css/sterling/Select.base.css +6 -6
  35. package/css/sterling/Select.disabled.css +5 -22
  36. package/css/sterling/Slider.base.css +45 -13
  37. package/css/sterling/Slider.disabled.css +8 -23
  38. package/css/sterling/Switch.base.css +15 -14
  39. package/css/sterling/Switch.disabled.css +15 -26
  40. package/css/sterling/Tab.base.css +5 -5
  41. package/css/sterling/Tab.disabled.css +5 -30
  42. package/css/sterling/TabList.base.css +1 -1
  43. package/css/sterling/TextArea.base.css +4 -4
  44. package/css/sterling/TextArea.disabled.css +5 -26
  45. package/css/sterling/Tree.base.css +4 -4
  46. package/css/sterling/Tree.disabled.css +5 -26
  47. package/css/sterling/TreeItem.disabled.css +4 -29
  48. package/css/sterling/vars.css +53 -46
  49. package/package.json +1 -1
  50. package/css/sterling/MenuItem.defaultItem.disabled.css +0 -28
  51. package/css/sterling/Progress.disabled.css +0 -17
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
+ }
package/css/sterling/vars.css CHANGED
@@ -4,7 +4,7 @@
4
4
  */
5
5
 
6
6
  :root {
7
- color-scheme: light dark;
7
+ color-scheme: light dark;
8
8
  }
9
9
 
10
10
  :root,
@@ -13,6 +13,7 @@
13
13
 
14
14
  --stsv-common__background-color: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 15%));
15
15
  --stsv-common__border-color: light-dark(hsl(0, 0%, 45%), hsl(0, 0%, 92%));
16
+ --stsv-common__border-width: 1px;
16
17
  --stsv-common__color: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 100%));
17
18
 
18
19
  /* ----- common outline ----- */
@@ -20,21 +21,17 @@
20
21
  --stsv-common__outline-color: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 100%));
21
22
  --stsv-common__outline-offset: 0;
22
23
  --stsv-common__outline-style: solid;
23
- --stsv-common__outline-width: 2px;
24
+ --stsv-common__outline-width: 1px;
24
25
 
25
26
  /* ----- common disabled ----- */
26
27
 
27
- --stsv-common--disabled__stripe-color: light-dark(hsla(0, 0%, 0%, 0.2), hsla(0, 0%, 0%, 0.2));
28
- --stsv-common--disabled__stripe-color--alt: light-dark(hsla(0, 0%, 100%, 0.2), hsla(0, 0%, 100%, 0.2));
29
- --stsv-common--disabled__stripe-angle: 135deg;
30
- --stsv-common--disabled__stripe-width: 3px;
28
+ --stsv-common__background-color--disabled: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 25%));
29
+ --stsv-common__border-color--disabled: light-dark(hsl(0, 0%, 80%), hsl(0, 0%, 30%));
30
+ --stsv-common__color--disabled: light-dark(hsl(0, 0%, 80%), hsl(0, 0%, 30%));
31
31
 
32
32
  /* ----- common drop shadows ----- */
33
33
 
34
- --stsv-common__box-shadow__color: light-dark(rgba(0, 0, 0, 0.4), gba(128, 128, 128, 0.7));
35
- --stsv-common__box-shadow__color--inset: light-dark(rgba(0, 0, 0, 0.45), gba(128, 128, 128, 0.7));
36
- --stsv-common__box-shadow: 2px 2px 4px 0px var(--stsv-common__box-shadow__color);
37
- --stsv-common__box-shadow--inset: inset 1px 1px 2px 0px var(--stsv-common__box-shadow__color--inset);
34
+ --stsv-common__drop-shadow: drop-shadow(2px 2px 1px light-dark(rgba(0, 0, 0, 0.2), rgba(128, 128, 128, 0.2)));
38
35
 
39
36
  /* ----- common reduced emphasis ----- */
40
37
 
@@ -64,6 +61,7 @@
64
61
 
65
62
  --stsv-button__background-color: light-dark(hsl(0, 0%, 90%), hsl(0, 0%, 20%));
66
63
  --stsv-button__border-color: light-dark(hsl(0, 0%, 45%), hsl(0, 0%, 80%));
64
+ --stsv-button__border-width: 1px;
67
65
  --stsv-button__color: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 85%));
68
66
 
69
67
  --stsv-button__background-color--hover: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 25%));
@@ -78,64 +76,69 @@
78
76
  --stsv-button__border-color--active: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 10%));
79
77
  --stsv-button__color--active: light-dark(hsl(0, 0%, 12%), hsl(0, 0%, 15%));
80
78
 
79
+ --stsv-button__background-color--disabled: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 25%));
80
+ --stsv-button__border-color--disabled: light-dark(hsl(0, 0%, 80%), hsl(0, 0%, 30%));
81
+ --stsv-button__color--disabled: light-dark(hsl(0, 0%, 80%), hsl(0, 0%, 30%));
82
+
81
83
  /* ----- button colors ----- */
82
84
 
83
85
  --stsv-button__background-color--blue: light-dark(hsl(200, 100%, 40%), hsl(200, 100%, 10%));
84
86
  --stsv-button__border-color--blue: light-dark(hsl(200, 100%, 30%), hsl(200, 100%, 50%));
85
87
  --stsv-button__color--blue: light-dark(hsl(200, 100%, 95%), hsl(200, 100%, 60%));
86
- --stsv-button__background-color--blue-hover: light-dark(hsl(200, 100%, 50%), hsl(200, 100%, 15%));
87
- --stsv-button__border-color--blue-hover: light-dark(hsl(200, 100%, 30%), hsl(200, 100%, 50%));
88
- --stsv-button__color--blue-hover: light-dark(hsl(200, 100%, 95%), hsl(200, 100%, 60%));
89
- --stsv-button__background-color--blue-focus: light-dark(hsl(200, 100%, 50%), hsl(200, 100%, 15%));
90
- --stsv-button__border-color--blue-focus: light-dark(hsl(200, 100%, 30%), hsl(200, 100%, 50%));
91
- --stsv-button__color--blue-focus: light-dark(hsl(200, 100%, 95%), hsl(200, 100%, 60%));
92
- --stsv-button__background-color--blue-active: light-dark(hsl(200, 100%, 40%), hsl(200, 100%, 30%));
93
- --stsv-button__border-color--blue-active: light-dark(hsl(200, 100%, 60%), hsl(200, 100%, 10%));
94
- --stsv-button__color--blue-active: light-dark(hsl(200, 100%, 95%), hsl(200, 100%, 15%));
88
+ --stsv-button__background-color--blue--hover: light-dark(hsl(200, 100%, 50%), hsl(200, 100%, 15%));
89
+ --stsv-button__border-color--blue--hover: light-dark(hsl(200, 100%, 30%), hsl(200, 100%, 50%));
90
+ --stsv-button__color--blue--hover: light-dark(hsl(200, 100%, 95%), hsl(200, 100%, 60%));
91
+ --stsv-button__background-color--blue--focus: light-dark(hsl(200, 100%, 50%), hsl(200, 100%, 15%));
92
+ --stsv-button__border-color--blue--focus: light-dark(hsl(200, 100%, 30%), hsl(200, 100%, 50%));
93
+ --stsv-button__color--blue--focus: light-dark(hsl(200, 100%, 95%), hsl(200, 100%, 60%));
94
+ --stsv-button__background-color--blue--active: light-dark(hsl(200, 100%, 40%), hsl(200, 100%, 30%));
95
+ --stsv-button__border-color--blue--active: light-dark(hsl(200, 100%, 60%), hsl(200, 100%, 10%));
96
+ --stsv-button__color--blue--active: light-dark(hsl(200, 100%, 95%), hsl(200, 100%, 15%));
95
97
 
96
98
  --stsv-button__background-color--green: light-dark(hsl(146, 100%, 30%), hsl(146, 100%, 10%));
97
99
  --stsv-button__border-color--green: light-dark(hsl(146, 100%, 25%), hsl(146, 100%, 30%));
98
100
  --stsv-button__color--green: light-dark(hsl(146, 100%, 95%), hsl(146, 100%, 40%));
99
- --stsv-button__background-color--green-hover: light-dark(hsl(146, 100%, 40%), hsl(146, 100%, 15%));
100
- --stsv-button__border-color--green-hover: light-dark(hsl(146, 100%, 25%), hsl(146, 100%, 30%));
101
- --stsv-button__color--green-hover: light-dark(hsl(146, 100%, 95%), hsl(146, 100%, 40%));
102
- --stsv-button__background-color--green-focus: light-dark(hsl(146, 100%, 40%), hsl(146, 100%, 15%));
103
- --stsv-button__border-color--green-focus: light-dark(hsl(146, 100%, 25%), hsl(146, 100%, 30%));
104
- --stsv-button__color--green-focus: light-dark(hsl(146, 100%, 95%), hsl(146, 100%, 40%));
105
- --stsv-button__background-color--green-active: light-dark(hsl(146, 100%, 30%), hsl(146, 100%, 25%));
106
- --stsv-button__border-color--green-active: light-dark(hsl(146, 100%, 40%), hsl(146, 100%, 10%));
107
- --stsv-button__color--green-active: light-dark(hsl(146, 100%, 95%), hsl(146, 100%, 15%));
101
+ --stsv-button__background-color--green--hover: light-dark(hsl(146, 100%, 40%), hsl(146, 100%, 15%));
102
+ --stsv-button__border-color--green--hover: light-dark(hsl(146, 100%, 25%), hsl(146, 100%, 30%));
103
+ --stsv-button__color--green--hover: light-dark(hsl(146, 100%, 95%), hsl(146, 100%, 40%));
104
+ --stsv-button__background-color--green--focus: light-dark(hsl(146, 100%, 40%), hsl(146, 100%, 15%));
105
+ --stsv-button__border-color--green--focus: light-dark(hsl(146, 100%, 25%), hsl(146, 100%, 30%));
106
+ --stsv-button__color--green--focus: light-dark(hsl(146, 100%, 95%), hsl(146, 100%, 40%));
107
+ --stsv-button__background-color--green--active: light-dark(hsl(146, 100%, 30%), hsl(146, 100%, 25%));
108
+ --stsv-button__border-color--green--active: light-dark(hsl(146, 100%, 40%), hsl(146, 100%, 10%));
109
+ --stsv-button__color--green--active: light-dark(hsl(146, 100%, 95%), hsl(146, 100%, 15%));
108
110
 
109
111
  --stsv-button__background-color--orange: light-dark(hsl(45, 100%, 60%), hsl(45, 100%, 10%));
110
112
  --stsv-button__border-color--orange: light-dark(hsl(45, 100%, 50%), hsl(45, 100%, 40%));
111
113
  --stsv-button__color--orange: light-dark(hsl(45, 25%, 25%), hsl(45, 100%, 50%));
112
- --stsv-button__background-color--orange-hover: light-dark(hsl(45, 100%, 70%), hsl(45, 100%, 15%));
113
- --stsv-button__border-color--orange-hover: light-dark(hsl(45, 100%, 50%), hsl(45, 100%, 40%));
114
- --stsv-button__color--orange-hover: light-dark(hsl(45, 25%, 25%), hsl(45, 100%, 50%));
115
- --stsv-button__background-color--orange-focus: light-dark(hsl(45, 100%, 70%), hsl(45, 100%, 15%));
116
- --stsv-button__border-color--orange-focus: light-dark(hsl(45, 100%, 50%), hsl(45, 100%, 40%));
117
- --stsv-button__color--orange-focus: light-dark(hsl(45, 25%, 25%), hsl(45, 100%, 50%));
118
- --stsv-button__background-color--orange-active: light-dark(hsl(45, 100%, 60%), hsl(45, 100%, 30%));
119
- --stsv-button__border-color--orange-active: light-dark(hsl(45, 100%, 70%), hsl(45, 100%, 10%));
120
- --stsv-button__color--orange-active: light-dark(hsl(45, 25%, 25%), hsl(45, 100%, 15%));
114
+ --stsv-button__background-color--orange--hover: light-dark(hsl(45, 100%, 70%), hsl(45, 100%, 15%));
115
+ --stsv-button__border-color--orange--hover: light-dark(hsl(45, 100%, 50%), hsl(45, 100%, 40%));
116
+ --stsv-button__color--orange--hover: light-dark(hsl(45, 25%, 25%), hsl(45, 100%, 50%));
117
+ --stsv-button__background-color--orange--focus: light-dark(hsl(45, 100%, 70%), hsl(45, 100%, 15%));
118
+ --stsv-button__border-color--orange--focus: light-dark(hsl(45, 100%, 50%), hsl(45, 100%, 40%));
119
+ --stsv-button__color--orange--focus: light-dark(hsl(45, 25%, 25%), hsl(45, 100%, 50%));
120
+ --stsv-button__background-color--orange--active: light-dark(hsl(45, 100%, 60%), hsl(45, 100%, 30%));
121
+ --stsv-button__border-color--orange--active: light-dark(hsl(45, 100%, 70%), hsl(45, 100%, 10%));
122
+ --stsv-button__color--orange--active: light-dark(hsl(45, 25%, 25%), hsl(45, 100%, 15%));
121
123
 
122
124
  --stsv-button__background-color--red: light-dark(hsl(0, 80%, 40%), hsl(0, 100%, 10%));
123
125
  --stsv-button__border-color--red: light-dark(hsl(0, 80%, 30%), hsl(0, 100%, 30%));
124
126
  --stsv-button__color--red: light-dark(hsl(0, 100%, 95%), hsl(0, 100%, 40%));
125
- --stsv-button__background-color--red-hover: light-dark(hsl(0, 80%, 50%), hsl(0, 100%, 15%));
126
- --stsv-button__border-color--red-hover: light-dark(hsl(0, 80%, 30%), hsl(0, 100%, 30%));
127
- --stsv-button__color--red-hover: light-dark(hsl(0, 100%, 95%), hsl(0, 100%, 40%));
128
- --stsv-button__background-color--red-focus: light-dark(hsl(0, 80%, 50%), hsl(0, 100%, 15%));
129
- --stsv-button__border-color--red-focus: light-dark(hsl(0, 80%, 30%), hsl(0, 100%, 30%));
130
- --stsv-button__color--red-focus: light-dark(hsl(0, 100%, 95%), hsl(0, 100%, 40%));
131
- --stsv-button__background-color--red-active: light-dark(hsl(0, 80%, 40%), hsl(0, 100%, 25%));
132
- --stsv-button__border-color--red-active: light-dark(hsl(0, 80%, 50%), hsl(0, 100%, 10%));
133
- --stsv-button__color--red-active: light-dark(hsl(0, 100%, 95%), hsl(0, 100%, 15%));
127
+ --stsv-button__background-color--red--hover: light-dark(hsl(0, 80%, 50%), hsl(0, 100%, 15%));
128
+ --stsv-button__border-color--red--hover: light-dark(hsl(0, 80%, 30%), hsl(0, 100%, 30%));
129
+ --stsv-button__color--red--hover: light-dark(hsl(0, 100%, 95%), hsl(0, 100%, 40%));
130
+ --stsv-button__background-color--red--focus: light-dark(hsl(0, 80%, 50%), hsl(0, 100%, 15%));
131
+ --stsv-button__border-color--red--focus: light-dark(hsl(0, 80%, 30%), hsl(0, 100%, 30%));
132
+ --stsv-button__color--red--focus: light-dark(hsl(0, 100%, 95%), hsl(0, 100%, 40%));
133
+ --stsv-button__background-color--red--active: light-dark(hsl(0, 80%, 40%), hsl(0, 100%, 25%));
134
+ --stsv-button__border-color--red--active: light-dark(hsl(0, 80%, 50%), hsl(0, 100%, 10%));
135
+ --stsv-button__color--red--active: light-dark(hsl(0, 100%, 95%), hsl(0, 100%, 15%));
134
136
 
135
137
  /* ----- input ----- */
136
138
 
137
139
  --stsv-input__background-color: light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 20%));
138
140
  --stsv-input__border-color: light-dark(hsl(0, 0%, 60%), hsl(0, 0%, 92%));
141
+ --stsv-input__border-width: 1px;
139
142
  --stsv-input__color: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 100%));
140
143
 
141
144
  --stsv-input__background-color--hover: light-dark(hsl(0, 0%, 96%), hsl(0, 0%, 25%));
@@ -149,4 +152,8 @@
149
152
  --stsv-input__background-color--selected: light-dark(hsl(0, 0%, 85%), hsl(0, 0%, 45%));
150
153
  --stsv-input__border-color--selected: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 98%));
151
154
  --stsv-input__color--selected: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 100%));
155
+
156
+ --stsv-input__background-color--disabled: light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 20%));
157
+ --stsv-input__border-color--disabled: light-dark(hsl(0, 0%, 90%), hsl(0, 0%, 25%));
158
+ --stsv-input__color--disabled: light-dark(hsl(0, 0%, 80%), hsl(0, 0%, 30%));
152
159
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@geoffcox/sterling-svelte-themes",
3
- "version": "2.0.2",
3
+ "version": "2.0.4",
4
4
  "author": "Geoff Cox",
5
5
  "description": "A modern theme for the sterling-svelte component library.",
6
6
  "license": "MIT",
package/css/sterling/MenuItem.defaultItem.disabled.css DELETED
@@ -1,28 +0,0 @@
1
- .sterling-menu-item-display.disabled {
2
- cursor: not-allowed;
3
- outline: none;
4
- }
5
-
6
- .sterling-menu-item-display::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-menu-item-display.disabled::after {
27
- opacity: 1;
28
- }
package/css/sterling/Progress.disabled.css DELETED
@@ -1,17 +0,0 @@
1
- .sterling-progress.disabled::after {
2
- content: '';
3
- position: absolute;
4
- left: 0;
5
- right: 0;
6
- top: 0;
7
- bottom: 0;
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
- pointer-events: none;
17
- }