@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/Checkbox.base.css CHANGED
@@ -46,7 +46,7 @@ and there is not a parent CSS selector.
46
46
  background-color: var(--stsv-input__background-color);
47
47
  border-color: var(--stsv-input__border-color);
48
48
  border-style: solid;
49
- border-width: 2px;
49
+ border-width: var(--stsv-input__border-width);
50
50
  box-sizing: border-box;
51
51
  display: inline-block;
52
52
  height: 20px;
@@ -59,7 +59,7 @@ and there is not a parent CSS selector.
59
59
  pointer-events: none;
60
60
  }
61
61
 
62
- .sterling-checkbox input:checked + .indicator {
62
+ .sterling-checkbox:not(.disabled) input:checked + .indicator {
63
63
  background-color: var(--stsv-input__background-color);
64
64
  border-color: var(--stsv-input__border-color);
65
65
  }
@@ -73,14 +73,13 @@ and there is not a parent CSS selector.
73
73
  outline-color: var(--stsv-common__outline-color);
74
74
  outline-offset: 0;
75
75
  outline-style: solid;
76
- outline-width: 2px;
76
+ outline-width: var(--stsv-common__outline-width);
77
77
  }
78
78
 
79
79
  /*
80
80
  The checkmark is a rotated L centered in the box.
81
81
  */
82
82
  .sterling-checkbox .indicator::after {
83
- border-color: var(--stsv-input__color);
84
83
  border-style: solid;
85
84
  border-width: 0 3px 3px 0;
86
85
  box-sizing: border-box;
@@ -92,8 +91,8 @@ The checkmark is a rotated L centered in the box.
92
91
  transform: translate(-50%, -50%) rotate(45deg);
93
92
  transform-origin: center;
94
93
  transition:
95
- border-color 250ms,
96
- opacity 150ms;
94
+ border-color 250ms,
95
+ opacity 150ms;
97
96
  width: 7px;
98
97
  opacity: 0;
99
98
  }
@@ -102,6 +101,10 @@ The checkmark is a rotated L centered in the box.
102
101
  opacity: 1;
103
102
  }
104
103
 
104
+ .sterling-checkbox:not(.disabled) .indicator::after {
105
+ border-color: var(--stsv-input__color);
106
+ }
107
+
105
108
  .sterling-checkbox:not(.disabled):hover input:checked + .indicator::after {
106
109
  border-color: var(--stsv-input__color--hover);
107
110
  }
package/css/sterling/Checkbox.disabled.css CHANGED
@@ -1,28 +1,18 @@
1
1
  .sterling-checkbox.disabled,
2
- .sterling-checkbox.disabled input {
2
+ .sterling-checkbox.disabled input,
3
+ .sterling-checkbox.disabled > label {
3
4
  cursor: not-allowed;
4
5
  }
5
6
 
6
- .sterling-checkbox .container::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;
7
+ .sterling-checkbox.disabled .indicator {
8
+ background-color: var(--stsv-input__background-color--disabled);
9
+ border-color: var(--stsv-input__border-color--disabled);
24
10
  }
25
11
 
26
- .sterling-checkbox.disabled .container::after {
27
- opacity: 1;
12
+ .sterling-checkbox.disabled .indicator::after {
13
+ border-color: var(--stsv-input__color--disabled);
28
14
  }
15
+
16
+ .sterling-checkbox.disabled > label {
17
+ color: var(--stsv-common__color--disabled);
18
+ }
package/css/sterling/Dialog.base.css CHANGED
@@ -3,6 +3,7 @@
3
3
  padding: 0;
4
4
  border: none;
5
5
  background: none;
6
+ filter: var(--stsv-common__drop-shadow);
6
7
  overflow: visible;
7
8
  }
8
9
 
@@ -26,7 +27,7 @@
26
27
  border-color: var(--stsv-common__border-color);
27
28
  border-radius: 0;
28
29
  border-style: solid;
29
- border-width: 2px;
30
+ border-width: var(--stsv-common__border-width);
30
31
  box-sizing: border-box;
31
32
  color: var(--stsv-common__color);
32
33
  display: grid;
@@ -98,7 +99,7 @@
98
99
 
99
100
  .sterling-dialog > form > .content > .separator {
100
101
  background-color: var(--stsv-common__background-color--secondary);
101
- height: 2px;
102
+ height: var(--stsv-common__border-width);
102
103
  margin: 0 0.25em;
103
104
  }
104
105
 
package/css/sterling/Dropdown.base.css CHANGED
@@ -5,7 +5,7 @@
5
5
  border-color: var(--stsv-input__border-color);
6
6
  border-radius: 8px;
7
7
  border-style: solid;
8
- border-width: 2px;
8
+ border-width: var(--stsv-input__border-width);
9
9
  color: var(--stsv-input__color);
10
10
  display: grid;
11
11
  grid-template-columns: 1fr auto;
@@ -20,20 +20,20 @@
20
20
  border-color 250ms;
21
21
  }
22
22
 
23
- .sterling-dropdown:hover {
23
+ .sterling-dropdown:not(.disabled):hover {
24
24
  background-color: var(--stsv-input__background-color--hover);
25
25
  border-color: var(--stsv-input__border-color--hover);
26
26
  color: var(--stsv-input__color--hover);
27
27
  }
28
28
 
29
- .sterling-dropdown:focus {
29
+ .sterling-dropdown:not(.disabled):focus {
30
30
  background-color: var(--stsv-input__background-color--focus);
31
31
  border-color: var(--stsv-input__border-color--focus);
32
32
  color: var(--stsv-input__color--focus);
33
33
  outline-color: var(--stsv-common__outline-color);
34
34
  outline-offset: 0;
35
35
  outline-style: solid;
36
- outline-width: 2px;
36
+ outline-width: var(--stsv-common__outline-width);
37
37
  }
38
38
 
39
39
  .sterling-dropdown > .value {
@@ -89,9 +89,9 @@
89
89
  border-color: var(--stsv-common__border-color);
90
90
  border-radius: 0;
91
91
  border-style: solid;
92
- border-width: 2px;
93
- box-shadow: var(--stsv-common__box-shadow);
92
+ border-width: var(--stsv-common__border-width);
94
93
  color: var(--stsv-common__color);
94
+ filter: var(--stsv-common__drop-shadow);
95
95
  padding: 0.25em;
96
96
  display: grid;
97
97
  grid-template-columns: 1fr;
package/css/sterling/Dropdown.disabled.css CHANGED
@@ -1,32 +1,11 @@
1
1
  .sterling-dropdown.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
9
  .sterling-dropdown.disabled .button {
7
10
  cursor: not-allowed;
8
- }
9
-
10
- .sterling-dropdown::after {
11
- background: repeating-linear-gradient(
12
- var(--stsv-common--disabled__stripe-angle),
13
- var(--stsv-common--disabled__stripe-color),
14
- var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
15
- var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
16
- var(--stsv-common--disabled__stripe-color--alt)
17
- calc(2 * var(--stsv-common--disabled__stripe-width))
18
- );
19
- bottom: 0;
20
- content: '';
21
- left: 0;
22
- opacity: 0;
23
- position: absolute;
24
- right: 0;
25
- top: 0;
26
- pointer-events: none;
27
- transition: opacity 250ms;
28
- }
29
-
30
- .sterling-dropdown.disabled::after {
31
- opacity: 1;
32
- }
11
+ }
package/css/sterling/Input.base.css CHANGED
@@ -13,7 +13,7 @@
13
13
  border-bottom-color: var(--stsv-input__border-color);
14
14
  border-radius: 3px;
15
15
  border-style: solid;
16
- border-width: 2px;
16
+ border-width: var(--stsv-input__border-width);
17
17
  box-sizing: border-box;
18
18
  color: var(--stsv-input__color);
19
19
  display: block;
@@ -41,14 +41,6 @@
41
41
  color: var(--stsv-input__color--focus);
42
42
  }
43
43
 
44
- input:focus-visible {
45
- outline-color: var(--stsv-common__outline-color);
46
- outline-offset: 0;
47
- outline-style: solid;
48
- outline-width: 2px;
49
- outline: none;
50
- }
51
-
52
44
  /* ----- placeholder ----- */
53
45
 
54
46
  input::placeholder {
package/css/sterling/Input.disabled.css CHANGED
@@ -1,36 +1,7 @@
1
- .sterling-input.disabled * {
1
+ .sterling-input input:disabled {
2
2
  cursor: not-allowed;
3
3
  outline: none;
4
- }
5
-
6
- .sterling-input::after {
7
- content: '';
8
- position: absolute;
9
- left: 0;
10
- right: 0;
11
- top: 0;
12
- bottom: 0;
13
- background: repeating-linear-gradient(
14
- var(--stsv-common--disabled__stripe-angle),
15
- var(--stsv-common--disabled__stripe-color),
16
- var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
17
- var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
18
- var(--stsv-common--disabled__stripe-color--alt)
19
- calc(2 * var(--stsv-common--disabled__stripe-width))
20
- );
21
- pointer-events: none;
22
- background: repeating-linear-gradient(
23
- var(--stsv-common--disabled__stripe-angle),
24
- var(--stsv-common--disabled__stripe-color),
25
- var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
26
- var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
27
- var(--stsv-common--disabled__stripe-color--alt)
28
- calc(2 * var(--stsv-common--disabled__stripe-width))
29
- );
30
- opacity: 0;
31
- pointer-events: none;
32
- transition: opacity 250ms;
33
- }
34
- .sterling-input.disabled::after {
35
- opacity: 1;
36
- }
4
+ background-color: var(--stsv-input__background-color--disabled);
5
+ border-bottom-color: var(--stsv-input__border-color--disabled);
6
+ color: var(--stsv-input__color--disabled);
7
+ }
package/css/sterling/Label.base.css CHANGED
@@ -21,7 +21,7 @@
21
21
  /* ----- horizontal | vertical ----- */
22
22
 
23
23
  .sterling-label:not(.vertical) {
24
- grid-template-columns: auto auto;
24
+ grid-template-columns: auto 1fr;
25
25
  grid-template-rows: auto auto;
26
26
  grid-template-areas: 'text content' '. message';
27
27
  }
@@ -49,7 +49,7 @@
49
49
  }
50
50
 
51
51
  .sterling-label .content {
52
- display: grid;
52
+ display: contents;
53
53
  grid-area: content;
54
54
  }
55
55
 
package/css/sterling/Label.boxed.css CHANGED
@@ -3,7 +3,11 @@
3
3
  border-color: var(--stsv-input__border-color);
4
4
  border-radius: 3px;
5
5
  border-style: solid;
6
- border-width: 2px;
6
+ border-width: var(--stsv-input__border-width);
7
+ }
8
+
9
+ .sterling-label.boxed:not(.vertical) {
10
+ grid-template-areas: 'text content' 'message message';
7
11
  }
8
12
 
9
13
  .sterling-label.boxed:not(.disabled):hover {
@@ -23,7 +27,7 @@
23
27
  outline-color: var(--stsv-common__outline-color);
24
28
  outline-offset: 0;
25
29
  outline-style: solid;
26
- outline-width: 2px;
30
+ outline-width: var(--stsv-common__outline-width);
27
31
  }
28
32
 
29
33
  .sterling-label.boxed .text {
package/css/sterling/List.base.css CHANGED
@@ -3,7 +3,7 @@
3
3
  border-color: var(--stsv-input__border-color);
4
4
  border-radius: 3px;
5
5
  border-style: solid;
6
- border-width: 2px;
6
+ border-width: var(--stsv-input__border-width);
7
7
  box-sizing: border-box;
8
8
  color: var(--stsv-input__color);
9
9
  height: 100%;
@@ -12,7 +12,6 @@
12
12
  margin: 0;
13
13
  outline: none;
14
14
  padding: 0;
15
- position: relative;
16
15
  transition:
17
16
  background-color 250ms,
18
17
  color 250ms,
@@ -26,7 +25,7 @@
26
25
  width: 100%;
27
26
  }
28
27
 
29
- .sterling-list:hover {
28
+ .sterling-list:not(.disabled):hover {
30
29
  border-color: var(--stsv-input__border-color--hover);
31
30
  color: var(--stsv-input__color--hover);
32
31
  }
@@ -37,7 +36,7 @@
37
36
  outline-color: var(--stsv-common__outline-color);
38
37
  outline-offset: 0;
39
38
  outline-style: solid;
40
- outline-width: 2px;
39
+ outline-width: var(--stsv-common__outline-width);
41
40
  }
42
41
 
43
42
  /* ----- container - a layout panel that grows with the items ----- */
@@ -53,27 +52,6 @@
53
52
  flex-direction: row;
54
53
  }
55
54
 
56
- .sterling-list .container::after {
57
- background: repeating-linear-gradient(
58
- var(--stsv-common--disabled__stripe-angle),
59
- var(--stsv-common--disabled__stripe-color),
60
- var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
61
- var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
62
- var(--stsv-common--disabled__stripe-color--alt)
63
- calc(2 * var(--stsv-common--disabled__stripe-width))
64
- );
65
- content: '';
66
- bottom: 0;
67
- left: 0;
68
- opacity: 0;
69
- position: absolute;
70
- right: 0;
71
- top: 0;
72
- height: 100%;
73
- pointer-events: none;
74
- transition: opacity 250ms;
75
- }
76
-
77
55
  /* ----- media queries ----- */
78
56
 
79
57
  @media (prefers-reduced-motion) {
package/css/sterling/List.disabled.css CHANGED
@@ -1,7 +1,7 @@
1
- .sterling-list.disabled * {
1
+ .sterling-list.disabled {
2
+ background-color: var(--stsv-common__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
  }
4
7
 
5
- .sterling-list.disabled .container::after {
6
- opacity: 1;
7
- }
package/css/sterling/ListItem.disabled.css CHANGED
@@ -1,28 +1,12 @@
1
1
  .sterling-list-item.disabled {
2
+ background-color: var(--stsv-common__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-list-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
- position: absolute;
20
- right: 0;
21
- top: 0;
22
- pointer-events: none;
23
- transition: opacity 250ms;
24
- }
25
-
26
- .sterling-list-item.item-disabled:not(.list-disabled)::after {
27
- opacity: 1;
28
- }
9
+ .sterling-list-item.disabled.selected {
10
+ background-color: var(--stsv-button__background-color--active);
11
+ color: var(--stsv-input__color--disabled);
12
+ }
package/css/sterling/Menu.base.css CHANGED
@@ -3,9 +3,9 @@
3
3
  border-color: var(--stsv-common__border-color);
4
4
  border-radius: 0;
5
5
  border-style: solid;
6
- border-width: 2px;
7
- box-shadow: var(--stsv-common__box-shadow);
6
+ border-width: var(--stsv-common__border-width);
8
7
  box-sizing: border-box;
8
+ filter: var(--stsv-common__drop-shadow);
9
9
  display: grid;
10
10
  grid-template-columns: 1fr;
11
11
  grid-template-rows: 1fr;
package/css/sterling/MenuItem.base.css CHANGED
@@ -1,10 +1,7 @@
1
1
  .sterling-menu-item {
2
2
  appearance: none;
3
3
  background-color: transparent;
4
- border-color: transparent;
5
- border-radius: 8px;
6
- border-style: none;
7
- border-width: 0;
4
+ border: none;
8
5
  box-sizing: border-box;
9
6
  color: var(--stsv-common__color);
10
7
  cursor: pointer;
@@ -21,24 +18,12 @@
21
18
  user-select: none;
22
19
  }
23
20
 
24
- .sterling-menu-item:hover {
21
+ .sterling-menu-item:not(:disabled):hover {
25
22
  background-color: var(--stsv-button__background-color--hover);
26
23
  color: var(--stsv-button__color--hover);
27
24
  }
28
25
 
29
- .sterling-menu-item:focus {
30
- outline: none;
31
- }
32
-
33
- .sterling-menu-item.using-keyboard:focus {
34
- border-color: var(--stsv-button__border-color--focus);
35
- outline-color: var(--stsv-common__outline-color);
36
- outline-offset: 0;
37
- outline-style: solid;
38
- outline-width: 2px;
39
- }
40
-
41
- .sterling-menu-item:focus {
26
+ .sterling-menu-item:not(:disabled):focus {
42
27
  background-color: var(--stsv-input__background-color--selected);
43
28
  }
44
29
 
package/css/sterling/MenuItem.css CHANGED
@@ -1,3 +1,3 @@
1
1
  @import url('./MenuItem.base.css');
2
2
  @import url('./MenuItem.defaultItem.css');
3
- @import url('./MenuItem.defaultItem.disabled.css');
3
+ @import url('./MenuItem.disabled.css');
package/css/sterling/MenuItem.defaultItem.css CHANGED
@@ -23,7 +23,7 @@
23
23
  .sterling-menu-item-display .check.checkmark.checked::after {
24
24
  border-color: currentColor;
25
25
  border-style: solid;
26
- border-width: 0 0.2em 0.2em 0;
26
+ border-width: 0 3px 3px 0;
27
27
  box-sizing: border-box;
28
28
  content: "";
29
29
  height: 0.8em;
package/css/sterling/MenuItem.disabled.css ADDED
@@ -0,0 +1,6 @@
1
+ .sterling-menu-item:disabled {
2
+ cursor: not-allowed;
3
+ outline: none;
4
+ background-color: transparent;
5
+ color: var(--stsv-common__color--disabled);
6
+ }
package/css/sterling/MenuSeparator.base.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .sterling-menu-separator {
2
- height: 2px;
2
+ height: var(--stsv-common__border-width);
3
3
  background-color: var(--stsv-common__border-color);
4
4
  margin: 0.1em 0;
5
5
  }
package/css/sterling/Pagination.button.css CHANGED
@@ -6,7 +6,7 @@
6
6
  border-color: transparent;
7
7
  border-radius: 0;
8
8
  border-style: solid;
9
- border-width: 2px;
9
+ border-width: var(--stsv-button__border-width);
10
10
  box-sizing: border-box;
11
11
  color: var(--stsv-button__color);
12
12
  cursor: pointer;
package/css/sterling/Pagination.input.css CHANGED
@@ -5,7 +5,7 @@
5
5
  border-bottom-color: var(--stsv-input__border-color);
6
6
  border-radius: 3px;
7
7
  border-style: solid;
8
- border-width: 2px;
8
+ border-width: var(--stsv-input__border-width);
9
9
  box-sizing: border-box;
10
10
  color: var(--stsv-input__color);
11
11
  display: block;
@@ -23,7 +23,7 @@
23
23
  min-width: calc(var(--page-number-width, 1ch) + 1em);
24
24
  }
25
25
 
26
- .sterling-pagination input:not(:disabled) {
26
+ .sterling-pagination input:not(:disabled):hover {
27
27
  background-color: var(--stsv-input__background-color--hover);
28
28
  border-bottom-color: var(--stsv-input__border-color--hover);
29
29
  color: var(--stsv-input__color--hover);
@@ -40,7 +40,7 @@
40
40
  outline-color: var(--stsv-common__outline-color);
41
41
  outline-offset: 0;
42
42
  outline-style: solid;
43
- outline-width: 2px;
43
+ outline-width: var(--stsv-common__outline-width);
44
44
  outline: none;
45
45
  }
46
46
  @media (prefers-reduced-motion) {
package/css/sterling/Popover.css CHANGED
@@ -14,6 +14,7 @@
14
14
  position: absolute;
15
15
  top: 0;
16
16
  width: max-content;
17
+
17
18
  }
18
19
 
19
20
  .sterling-popover.open {
package/css/sterling/Progress.base.css CHANGED
@@ -2,7 +2,7 @@
2
2
  align-content: flex-start;
3
3
  align-items: flex-start;
4
4
  background: var(--stsv-common__background-color);
5
- border-width: 2px;
5
+ border-width: var(--stsv-common__border-width);
6
6
  border-style: solid;
7
7
  border-color: var(--stsv-common__border-color);
8
8
  border-radius: 0;
package/css/sterling/Progress.css CHANGED
@@ -1,2 +1 @@
1
1
  @import url('./Progress.base.css');
2
- @import url('./Progress.disabled.css');
package/css/sterling/Radio.base.css CHANGED
@@ -46,7 +46,7 @@
46
46
  background-color: var(--stsv-input__background-color);
47
47
  border-color: var(--stsv-input__border-color);
48
48
  border-style: solid;
49
- border-width: 2px;
49
+ border-width: var(--stsv-input__border-width);
50
50
  border-radius: 10000px;
51
51
  box-sizing: border-box;
52
52
  display: inline-block;
@@ -74,7 +74,7 @@
74
74
  outline-color: var(--stsv-common__outline-color);
75
75
  outline-offset: 0;
76
76
  outline-style: solid;
77
- outline-width: 2px;
77
+ outline-width: var(--stsv-common__outline-width);
78
78
  }
79
79
 
80
80
  .sterling-radio .indicator::after {
package/css/sterling/Radio.disabled.css CHANGED
@@ -1,28 +1,18 @@
1
- .sterling-radio.disabled * {
1
+ .sterling-radio.disabled,
2
+ .sterling-radio.disabled input,
3
+ .sterling-radio.disabled > label {
2
4
  cursor: not-allowed;
3
5
  }
4
6
 
5
- .sterling-radio .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
- border-radius: 10000px;
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;
7
+ .sterling-radio.disabled .indicator {
8
+ background-color: var(--stsv-input__background-color--disabled);
9
+ border-color: var(--stsv-input__border-color--disabled);
24
10
  }
25
11
 
26
- .sterling-radio.disabled .container::after {
27
- opacity: 1;
12
+ .sterling-radio.disabled .indicator::after {
13
+ border-color: var(--stsv-input__color--disabled);
14
+ }
15
+
16
+ .sterling-radio.disabled > label {
17
+ color: var(--stsv-common__color--disabled);
28
18
  }
package/css/sterling/Select.base.css CHANGED
@@ -5,7 +5,7 @@
5
5
  border-color: var(--stsv-input__border-color);
6
6
  border-radius: 3px;
7
7
  border-style: solid;
8
- border-width: 2px;
8
+ border-width: var(--stsv-input__border-width);
9
9
  color: var(--stsv-input__color);
10
10
  cursor: pointer;
11
11
  display: grid;
@@ -20,20 +20,20 @@
20
20
  border-color 250ms;
21
21
  }
22
22
 
23
- .sterling-select:hover {
23
+ .sterling-select:not(.disabled):hover {
24
24
  background-color: var(--stsv-input__background-color--hover);
25
25
  border-color: var(--stsv-input__border-color--hover);
26
26
  color: var(--stsv-input__color--hover);
27
27
  }
28
28
 
29
- .sterling-select:focus {
29
+ .sterling-select:not(.disabled):focus-visible {
30
30
  background-color: var(--stsv-input__background-color--focus);
31
31
  border-color: var(--stsv-input__border-color--focus);
32
32
  color: var(--stsv-input__color--focus);
33
33
  outline-color: var(--stsv-common__outline-color);
34
34
  outline-offset: 0;
35
35
  outline-style: solid;
36
- outline-width: 2px;
36
+ outline-width: var(--stsv-common__outline-width);
37
37
  }
38
38
 
39
39
  .sterling-select .value {
@@ -84,8 +84,8 @@
84
84
  border-color: var(--stsv-common__border-color);
85
85
  border-radius: 0;
86
86
  border-style: solid;
87
- border-width: 2px;
88
- box-shadow: var(--stsv-common__box-shadow);
87
+ border-width: var(--stsv-common__border-width);
88
+ filter: var(--stsv-common__drop-shadow);
89
89
  padding: 0.25em;
90
90
  display: grid;
91
91
  grid-template-columns: 1fr;