@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/README.md CHANGED
@@ -22,6 +22,27 @@ https://github.com/GeoffCox/sterling-svelte-themes
22
22
 
23
23
  ## Change Log
24
24
 
25
+ ### 2.0.5
26
+
27
+ - Fixed issue with new button disabled state not applying due to specificity of colors and variants
28
+
29
+ ### 2.0.4
30
+
31
+ - Standardized disabled styles: Removed no-step diagonal stripes in favor of traditional background, border, and color.
32
+ - Removed progress disabled styling (progress is not interactive)
33
+ - Fixed MenuItem disabled styling selector issue
34
+ - Improved layout of Label to help content/input responsd to width changes
35
+ - Improved layout of Label with boxed style to display message across the bottom.
36
+ - Fixed modifies of button colors to separate multiple modifiers with multiple double dashes (e.g. --blue-hover => --blue--hover)
37
+ - Fixed Switch hover, active, selected background colors for better contrast
38
+ - Improved focus styles of Slider, Switch to focus on button/thumb element
39
+ - Added border width variables for common, button, and input.
40
+ - Fixed missing use of outline border width variable across all styles.
41
+ - Reduced border and outline width from 2px to 1px to avoid heaviness with border styles
42
+ - Fixed bug in Pagination missing input:hover style
43
+ - Updated drop shadows to be consistent for Callout, Dialog, Dropdown, Menu, Select, and Tooltip.
44
+
45
+
25
46
  ### 2.0.3
26
47
 
27
48
  - Slider - support for reverse direction of slider
package/css/sterling/Autocomplete.base.css CHANGED
@@ -9,9 +9,9 @@
9
9
  border-color: var(--stsv-common__border-color);
10
10
  border-radius: 0;
11
11
  border-style: solid;
12
- border-width: 2px;
13
- box-shadow: var(--stsv-common__box-shadow);
12
+ border-width: var(--stsv-common__border-width);
14
13
  color: var(--stsv-common__color);
14
+ filter: var(--stsv-common__drop-shadow);
15
15
  display: grid;
16
16
  grid-template-columns: 1fr;
17
17
  grid-template-rows: 1fr;
package/css/sterling/Button.base.css CHANGED
@@ -6,7 +6,7 @@
6
6
  border-color: var(--stsv-button__border-color);
7
7
  border-radius: 8px;
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;
@@ -28,24 +28,24 @@
28
28
  user-select: none;
29
29
  }
30
30
 
31
- .sterling-button:hover {
31
+ .sterling-button:not(:disabled):hover {
32
32
  background-color: var(--stsv-button__background-color--hover);
33
33
  border-color: var(--stsv-button__border-color--hover);
34
34
  color: var(--stsv-button__color--hover);
35
35
  }
36
36
 
37
- .sterling-button:active {
37
+ .sterling-button:not(:disabled):active {
38
38
  background-color: var(--stsv-button__background-color--active);
39
39
  border-color: var(--stsv-button__border-color--active);
40
40
  color: var(--stsv-button__color--active);
41
41
  }
42
42
 
43
- .sterling-button:focus-visible {
43
+ .sterling-button:not(:disabled):focus-visible {
44
44
  border-color: var(--stsv-button__border-color--focus);
45
45
  outline-color: var(--stsv-common__outline-color);
46
46
  outline-offset: 0;
47
47
  outline-style: solid;
48
- outline-width: 2px;
48
+ outline-width: var(--stsv-common__outline-width);
49
49
  }
50
50
 
51
51
  @media (prefers-reduced-motion) {
package/css/sterling/Button.colors.css CHANGED
@@ -1,100 +1,100 @@
1
1
  /* ----- blue ----- */
2
- .sterling-button.blue {
2
+ .sterling-button.blue:not(:disabled) {
3
3
  background-color: var(--stsv-button__background-color--blue);
4
4
  border-color: var(--stsv-button__border-color--blue);
5
5
  color: var(--stsv-button__color--blue);
6
6
  }
7
7
 
8
- .sterling-button.blue:hover {
9
- background-color: var(--stsv-button__background-color--blue-hover);
10
- border-color: var(--stsv-button__border-color--blue-hover);
11
- color: var(--stsv-button__color--blue-hover);
8
+ .sterling-button.blue:not(:disabled):hover {
9
+ background-color: var(--stsv-button__background-color--blue--hover);
10
+ border-color: var(--stsv-button__border-color--blue--hover);
11
+ color: var(--stsv-button__color--blue--hover);
12
12
  }
13
13
 
14
- .sterling-button.blue:focus {
15
- background-color: var(--stsv-button__background-color--blue-focus);
16
- border-color: var(--stsv-button__border-color--blue-focus);
17
- color: var(--stsv-button__color--blue-focus);
14
+ .sterling-button.blue:not(:disabled):focus-visible {
15
+ background-color: var(--stsv-button__background-color--blue--focus);
16
+ border-color: var(--stsv-button__border-color--blue--focus);
17
+ color: var(--stsv-button__color--blue--focus);
18
18
  }
19
19
 
20
- .sterling-button.blue:active {
21
- background-color: var(--stsv-button__background-color--blue-active);
22
- border-color: var(--stsv-button__border-color--blue-active);
23
- color: var(--stsv-button__color--blue-active);
20
+ .sterling-button.blue:not(:disabled):active {
21
+ background-color: var(--stsv-button__background-color--blue--active);
22
+ border-color: var(--stsv-button__border-color--blue--active);
23
+ color: var(--stsv-button__color--blue--active);
24
24
  }
25
25
 
26
26
  /* ----- green ----- */
27
27
 
28
- .sterling-button.green {
28
+ .sterling-button.green:not(:disabled) {
29
29
  background-color: var(--stsv-button__background-color--green);
30
30
  border-color: var(--stsv-button__border-color--green);
31
31
  color: var(--stsv-button__color--green);
32
32
  }
33
33
 
34
- .sterling-button.green:hover {
35
- background-color: var(--stsv-button__background-color--green-hover);
36
- border-color: var(--stsv-button__border-color--green-hover);
37
- color: var(--stsv-button__color--green-hover);
34
+ .sterling-button.green:not(:disabled):hover {
35
+ background-color: var(--stsv-button__background-color--green--hover);
36
+ border-color: var(--stsv-button__border-color--green--hover);
37
+ color: var(--stsv-button__color--green--hover);
38
38
  }
39
39
 
40
- .sterling-button.green:focus {
41
- background-color: var(--stsv-button__background-color--green-focus);
42
- border-color: var(--stsv-button__border-color--green-focus);
43
- color: var(--stsv-button__color--green-focus);
40
+ .sterling-button.green:not(:disabled):focus-visible {
41
+ background-color: var(--stsv-button__background-color--green--focus);
42
+ border-color: var(--stsv-button__border-color--green--focus);
43
+ color: var(--stsv-button__color--green--focus);
44
44
  }
45
45
 
46
- .sterling-button.green:active {
47
- background-color: var(--stsv-button__background-color--green-active);
48
- border-color: var(--stsv-button__border-color--green-active);
49
- color: var(--stsv-button__color--green-active);
46
+ .sterling-button.green:not(:disabled):active {
47
+ background-color: var(--stsv-button__background-color--green--active);
48
+ border-color: var(--stsv-button__border-color--green--active);
49
+ color: var(--stsv-button__color--green--active);
50
50
  }
51
51
 
52
52
  /* ----- orange ----- */
53
- .sterling-button.orange {
53
+ .sterling-button.orange:not(:disabled) {
54
54
  background-color: var(--stsv-button__background-color--orange);
55
55
  border-color: var(--stsv-button__border-color--orange);
56
56
  color: var(--stsv-button__color--orange);
57
57
  }
58
58
 
59
- .sterling-button.orange:hover {
60
- background-color: var(--stsv-button__background-color--orange-hover);
61
- border-color: var(--stsv-button__border-color--orange-hover);
62
- color: var(--stsv-button__color--orange-hover);
59
+ .sterling-button.orange:not(:disabled):hover {
60
+ background-color: var(--stsv-button__background-color--orange--hover);
61
+ border-color: var(--stsv-button__border-color--orange--hover);
62
+ color: var(--stsv-button__color--orange--hover);
63
63
  }
64
64
 
65
- .sterling-button.orange:focus {
66
- background-color: var(--stsv-button__background-color--orange-focus);
67
- border-color: var(--stsv-button__border-color--orange-focus);
68
- color: var(--stsv-button__color--orange-focus);
65
+ .sterling-button.orange:not(:disabled):focus-visible {
66
+ background-color: var(--stsv-button__background-color--orange--focus);
67
+ border-color: var(--stsv-button__border-color--orange--focus);
68
+ color: var(--stsv-button__color--orange--focus);
69
69
  }
70
70
 
71
- .sterling-button.orange:active {
72
- background-color: var(--stsv-button__background-color--orange-active);
73
- border-color: var(--stsv-button__border-color--orange-active);
74
- color: var(--stsv-button__color--orange-active);
71
+ .sterling-button.orange:not(:disabled):active {
72
+ background-color: var(--stsv-button__background-color--orange--active);
73
+ border-color: var(--stsv-button__border-color--orange--active);
74
+ color: var(--stsv-button__color--orange--active);
75
75
  }
76
76
 
77
77
  /* ----- red ----- */
78
- .sterling-button.red {
78
+ .sterling-button.red:not(:disabled) {
79
79
  background-color: var(--stsv-button__background-color--red);
80
80
  border-color: var(--stsv-button__border-color--red);
81
81
  color: var(--stsv-button__color--red);
82
82
  }
83
83
 
84
- .sterling-button.red:hover {
85
- background-color: var(--stsv-button__background-color--red-hover);
86
- border-color: var(--stsv-button__border-color--red-hover);
87
- color: var(--stsv-button__color--red-hover);
84
+ .sterling-button.red:not(:disabled):hover {
85
+ background-color: var(--stsv-button__background-color--red--hover);
86
+ border-color: var(--stsv-button__border-color--red--hover);
87
+ color: var(--stsv-button__color--red--hover);
88
88
  }
89
89
 
90
- .sterling-button.red:focus {
91
- background-color: var(--stsv-button__background-color--red-focus);
92
- border-color: var(--stsv-button__border-color--red-focus);
93
- color: var(--stsv-button__color--red-focus);
90
+ .sterling-button.red:not(:disabled):focus-visible {
91
+ background-color: var(--stsv-button__background-color--red--focus);
92
+ border-color: var(--stsv-button__border-color--red--focus);
93
+ color: var(--stsv-button__color--red--focus);
94
94
  }
95
95
 
96
- .sterling-button.red:active {
97
- background-color: var(--stsv-button__background-color--red-active);
98
- border-color: var(--stsv-button__border-color--red-active);
99
- color: var(--stsv-button__color--red-active);
96
+ .sterling-button.red:not(:disabled):active {
97
+ background-color: var(--stsv-button__background-color--red--active);
98
+ border-color: var(--stsv-button__border-color--red--active);
99
+ color: var(--stsv-button__color--red--active);
100
100
  }
package/css/sterling/Button.disabled.css CHANGED
@@ -1,22 +1,18 @@
1
- .sterling-button:disabled {
1
+ .sterling-button:disabled,
2
+ .sterling-button:disabled:hover,
3
+ .sterling-button:disabled:active,
4
+ .sterling-button:disabled:focus-visible {
2
5
  cursor: not-allowed;
3
- position: relative;
6
+ background-color: var(--stsv-button__background-color--disabled);
7
+ border-color: var(--stsv-button__border-color--disabled);
8
+ color: var(--stsv-button__color--disabled);
4
9
  }
5
10
 
6
- .sterling-button:disabled::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;
11
+ .sterling-button.secondary:disabled {
12
+ background-color: transparent;
13
+ }
14
+
15
+ .sterling-button.tool:disabled {
16
+ background-color: transparent;
17
+ border-color: transparent;
22
18
  }
package/css/sterling/Button.secondary.colors.css CHANGED
@@ -1,103 +1,103 @@
1
1
  /* ----- blue ----- */
2
2
 
3
- .sterling-button.secondary.blue {
3
+ .sterling-button.secondary.blue:not(:disabled) {
4
4
  background-color: none;
5
5
  border-color: var(--stsv-button__border-color--blue);
6
6
  color: var(--stsv-button__border-color--blue);
7
7
  }
8
8
 
9
- .sterling-button.secondary.blue:hover {
10
- background-color: var(--stsv-button__background-color--blue-hover);
11
- border-color: var(--stsv-button__border-color--blue-hover);
12
- color: var(--stsv-button__color--blue-hover);
9
+ .sterling-button.secondary.blue:not(:disabled):hover {
10
+ background-color: var(--stsv-button__background-color--blue--hover);
11
+ border-color: var(--stsv-button__border-color--blue--hover);
12
+ color: var(--stsv-button__color--blue--hover);
13
13
  }
14
14
 
15
- .sterling-button.secondary.blue:focus {
16
- background-color: var(--stsv-button__background-color--blue-focus);
17
- border-color: var(--stsv-button__border-color--blue-focus);
18
- color: var(--stsv-button__color--blue-focus);
15
+ .sterling-button.secondary.blue:not(:disabled):focus-visible {
16
+ background-color: var(--stsv-button__background-color--blue--focus);
17
+ border-color: var(--stsv-button__border-color--blue--focus);
18
+ color: var(--stsv-button__color--blue--focus);
19
19
  }
20
20
 
21
- .sterling-button.secondary.blue:active {
22
- background-color: var(--stsv-button__background-color--blue-active);
23
- border-color: var(--stsv-button__border-color--blue-active);
24
- color: var(--stsv-button__color--blue-active);
21
+ .sterling-button.secondary.blue:not(:disabled):active {
22
+ background-color: var(--stsv-button__background-color--blue--active);
23
+ border-color: var(--stsv-button__border-color--blue--active);
24
+ color: var(--stsv-button__color--blue--active);
25
25
  }
26
26
 
27
27
  /* ----- green ----- */
28
28
 
29
- .sterling-button.secondary.green {
29
+ .sterling-button.secondary.green:not(:disabled) {
30
30
  background-color: none;
31
31
  border-color: var(--stsv-button__border-color--green);
32
32
  color: var(--stsv-button__border-color--green);
33
33
  }
34
34
 
35
- .sterling-button.secondary.green:hover {
36
- background-color: var(--stsv-button__background-color--green-hover);
37
- border-color: var(--stsv-button__border-color--green-hover);
38
- color: var(--stsv-button__color--green-hover);
35
+ .sterling-button.secondary.green:not(:disabled):hover {
36
+ background-color: var(--stsv-button__background-color--green--hover);
37
+ border-color: var(--stsv-button__border-color--green--hover);
38
+ color: var(--stsv-button__color--green--hover);
39
39
  }
40
40
 
41
- .sterling-button.secondary.green:focus {
42
- background-color: var(--stsv-button__background-color--green-focus);
43
- border-color: var(--stsv-button__border-color--green-focus);
44
- color: var(--stsv-button__color--green-focus);
41
+ .sterling-button.secondary.green:not(:disabled):focus-visible {
42
+ background-color: var(--stsv-button__background-color--green--focus);
43
+ border-color: var(--stsv-button__border-color--green--focus);
44
+ color: var(--stsv-button__color--green--focus);
45
45
  }
46
46
 
47
- .sterling-button.secondary.green:active {
48
- background-color: var(--stsv-button__background-color--green-active);
49
- border-color: var(--stsv-button__border-color--green-active);
50
- color: var(--stsv-button__color--green-active);
47
+ .sterling-button.secondary.green:not(:disabled):active {
48
+ background-color: var(--stsv-button__background-color--green--active);
49
+ border-color: var(--stsv-button__border-color--green--active);
50
+ color: var(--stsv-button__color--green--active);
51
51
  }
52
52
 
53
53
  /* ----- orange ----- */
54
54
 
55
- .sterling-button.secondary.orange {
55
+ .sterling-button.secondary.orange:not(:disabled) {
56
56
  background-color: none;
57
57
  border-color: var(--stsv-button__border-color--orange);
58
58
  color: var(--stsv-button__border-color--orange);
59
59
  }
60
60
 
61
- .sterling-button.secondary.orange:hover {
62
- background-color: var(--stsv-button__background-color--orange-hover);
63
- border-color: var(--stsv-button__border-color--orange-hover);
64
- color: var(--stsv-button__color--orange-hover);
61
+ .sterling-button.secondary.orange:not(:disabled):hover {
62
+ background-color: var(--stsv-button__background-color--orange--hover);
63
+ border-color: var(--stsv-button__border-color--orange--hover);
64
+ color: var(--stsv-button__color--orange--hover);
65
65
  }
66
66
 
67
- .sterling-button.secondary.orange:focus {
68
- background-color: var(--stsv-button__background-color--orange-focus);
69
- border-color: var(--stsv-button__border-color--orange-focus);
70
- color: var(--stsv-button__color--orange-focus);
67
+ .sterling-button.secondary.orange:not(:disabled):focus-visible {
68
+ background-color: var(--stsv-button__background-color--orange--focus);
69
+ border-color: var(--stsv-button__border-color--orange--focus);
70
+ color: var(--stsv-button__color--orange--focus);
71
71
  }
72
72
 
73
- .sterling-button.secondary.orange:active {
74
- background-color: var(--stsv-button__background-color--orange-active);
75
- border-color: var(--stsv-button__border-color--orange-active);
76
- color: var(--stsv-button__color--orange-active);
73
+ .sterling-button.secondary.orange:not(:disabled):active {
74
+ background-color: var(--stsv-button__background-color--orange--active);
75
+ border-color: var(--stsv-button__border-color--orange--active);
76
+ color: var(--stsv-button__color--orange--active);
77
77
  }
78
78
 
79
79
  /* ----- red ----- */
80
80
 
81
- .sterling-button.secondary.red {
81
+ .sterling-button.secondary.red:not(:disabled){
82
82
  background-color: none;
83
83
  border-color: var(--stsv-button__border-color--red);
84
84
  color: var(--stsv-button__border-color--red);
85
85
  }
86
86
 
87
- .sterling-button.secondary.red:hover {
88
- background-color: var(--stsv-button__background-color--red-hover);
89
- border-color: var(--stsv-button__border-color--red-hover);
90
- color: var(--stsv-button__color--red-hover);
87
+ .sterling-button.secondary.red:not(:disabled):hover {
88
+ background-color: var(--stsv-button__background-color--red--hover);
89
+ border-color: var(--stsv-button__border-color--red--hover);
90
+ color: var(--stsv-button__color--red--hover);
91
91
  }
92
92
 
93
- .sterling-button.secondary.red:focus {
94
- background-color: var(--stsv-button__background-color--red-focus);
95
- border-color: var(--stsv-button__border-color--red-focus);
96
- color: var(--stsv-button__color--red-focus);
93
+ .sterling-button.secondary.red:not(:disabled):focus-visible {
94
+ background-color: var(--stsv-button__background-color--red--focus);
95
+ border-color: var(--stsv-button__border-color--red--focus);
96
+ color: var(--stsv-button__color--red--focus);
97
97
  }
98
98
 
99
- .sterling-button.secondary.red:active {
100
- background-color: var(--stsv-button__background-color--red-active);
101
- border-color: var(--stsv-button__border-color--red-active);
102
- color: var(--stsv-button__color--red-active);
99
+ .sterling-button.secondary.red:not(:disabled):active {
100
+ background-color: var(--stsv-button__background-color--red--active);
101
+ border-color: var(--stsv-button__border-color--red--active);
102
+ color: var(--stsv-button__color--red--active);
103
103
  }
package/css/sterling/Button.secondary.css CHANGED
@@ -1,11 +1,15 @@
1
- .sterling-button.secondary {
1
+ .sterling-button.secondary:not(:disabled) {
2
2
  background-color: transparent;
3
3
  }
4
4
 
5
- .sterling-button.secondary:hover {
5
+ .sterling-button.secondary:not(:disabled):hover {
6
6
  background-color: var(--stsv-button__background-color--hover);
7
7
  }
8
8
 
9
- .sterling-button.secondary:active {
9
+ .sterling-button.secondary:not(:disabled):focus-visible {
10
+ background-color: var(--stsv-button__background-color--active);
11
+ }
12
+
13
+ .sterling-button.secondary:not(:disabled):active {
10
14
  background-color: var(--stsv-button__background-color--active);
11
15
  }
package/css/sterling/Button.tool.colors.css CHANGED
@@ -1,91 +1,91 @@
1
1
  /* ----- blue ----- */
2
2
 
3
- .sterling-button.tool.blue {
3
+ .sterling-button.tool.blue:not(:disabled) {
4
4
  background-color: none;
5
5
  border-color: none;
6
6
  color: var(--stsv-button__border-color--blue);
7
7
  }
8
8
 
9
- .sterling-button.tool.blue:hover {
10
- background-color: var(--stsv-button__background-color--blue-hover);
11
- color: var(--stsv-button__color--blue-hover);
9
+ .sterling-button.tool.blue::not(:disabled)hover {
10
+ background-color: var(--stsv-button__background-color--blue--hover);
11
+ color: var(--stsv-button__color--blue--hover);
12
12
  }
13
13
 
14
- .sterling-button.tool.blue:focus {
15
- background-color: var(--stsv-button__background-color--blue-focus);
16
- color: var(--stsv-button__color--blue-focus);
14
+ .sterling-button.tool.blue:not(:disabled):focus-visible {
15
+ background-color: var(--stsv-button__background-color--blue--focus);
16
+ color: var(--stsv-button__color--blue--focus);
17
17
  }
18
18
 
19
- .sterling-button.tool.blue:active {
20
- background-color: var(--stsv-button__background-color--blue-active);
21
- color: var(--stsv-button__color--blue-active);
19
+ .sterling-button.tool.blue:not(:disabled):active {
20
+ background-color: var(--stsv-button__background-color--blue--active);
21
+ color: var(--stsv-button__color--blue--active);
22
22
  }
23
23
 
24
24
  /* ----- green ----- */
25
25
 
26
- .sterling-button.tool.green {
26
+ .sterling-button.tool.green:not(:disabled) {
27
27
  background-color: none;
28
28
  border-color: none;
29
29
  color: var(--stsv-button__border-color--green);
30
30
  }
31
31
 
32
- .sterling-button.tool.green:hover {
33
- background-color: var(--stsv-button__background-color--green-hover);
34
- color: var(--stsv-button__color--green-hover);
32
+ .sterling-button.tool.green:not(:disabled):hover {
33
+ background-color: var(--stsv-button__background-color--green--hover);
34
+ color: var(--stsv-button__color--green--hover);
35
35
  }
36
36
 
37
- .sterling-button.tool.green:focus {
38
- background-color: var(--stsv-button__background-color--green-focus);
39
- color: var(--stsv-button__color--green-focus);
37
+ .sterling-button.tool.green:not(:disabled):focus-visible {
38
+ background-color: var(--stsv-button__background-color--green--focus);
39
+ color: var(--stsv-button__color--green--focus);
40
40
  }
41
41
 
42
- .sterling-button.tool.green:active {
43
- background-color: var(--stsv-button__background-color--green-active);
44
- color: var(--stsv-button__color--green-active);
42
+ .sterling-button.tool.green:not(:disabled):active {
43
+ background-color: var(--stsv-button__background-color--green--active);
44
+ color: var(--stsv-button__color--green--active);
45
45
  }
46
46
 
47
47
  /* ----- orange ----- */
48
48
 
49
- .sterling-button.tool.orange {
49
+ .sterling-button.tool.orange:not(:disabled) {
50
50
  background-color: none;
51
51
  border-color: none;
52
52
  color: var(--stsv-button__border-color--orange);
53
53
  }
54
54
 
55
- .sterling-button.tool.orange:hover {
56
- background-color: var(--stsv-button__background-color--orange-hover);
57
- color: var(--stsv-button__color--orange-hover);
55
+ .sterling-button.tool.orange:not(:disabled):hover {
56
+ background-color: var(--stsv-button__background-color--orange--hover);
57
+ color: var(--stsv-button__color--orange--hover);
58
58
  }
59
59
 
60
- .sterling-button.tool.orange:focus {
61
- background-color: var(--stsv-button__background-color--orange-focus);
62
- color: var(--stsv-button__color--orange-focus);
60
+ .sterling-button.tool.orange:not(:disabled):focus-visible {
61
+ background-color: var(--stsv-button__background-color--orange--focus);
62
+ color: var(--stsv-button__color--orange--focus);
63
63
  }
64
64
 
65
- .sterling-button.tool.orange:active {
66
- background-color: var(--stsv-button__background-color--orange-active);
67
- color: var(--stsv-button__color--orange-active);
65
+ .sterling-button.tool.orange:not(:disabled):active {
66
+ background-color: var(--stsv-button__background-color--orange--active);
67
+ color: var(--stsv-button__color--orange--active);
68
68
  }
69
69
 
70
70
  /* ----- red ----- */
71
71
 
72
- .sterling-button.tool.red {
72
+ .sterling-button.tool.red:not(:disabled) {
73
73
  background-color: none;
74
74
  border-color: none;
75
75
  color: var(--stsv-button__border-color--red);
76
76
  }
77
77
 
78
- .sterling-button.tool.red:hover {
79
- background-color: var(--stsv-button__background-color--red-hover);
80
- color: var(--stsv-button__color--red-hover);
78
+ .sterling-button.tool.red:not(:disabled):hover {
79
+ background-color: var(--stsv-button__background-color--red--hover);
80
+ color: var(--stsv-button__color--red--hover);
81
81
  }
82
82
 
83
- .sterling-button.tool.red:focus {
84
- background-color: var(--stsv-button__background-color--red-focus);
85
- color: var(--stsv-button__color--red-focus);
83
+ .sterling-button.tool.red:not(:disabled):focus-visible {
84
+ background-color: var(--stsv-button__background-color--red--focus);
85
+ color: var(--stsv-button__color--red--focus);
86
86
  }
87
87
 
88
- .sterling-button.tool.red:active {
89
- background-color: var(--stsv-button__background-color--red-active);
90
- color: var(--stsv-button__color--red-active);
88
+ .sterling-button.tool.red:not(:disabled):active {
89
+ background-color: var(--stsv-button__background-color--red--active);
90
+ color: var(--stsv-button__color--red--active);
91
91
  }
package/css/sterling/Button.tool.css CHANGED
@@ -1,18 +1,18 @@
1
- .sterling-button.tool {
1
+ .sterling-button.tool:not(:disabled) {
2
2
  background-color: transparent;
3
3
  border-color: transparent;
4
4
  }
5
5
 
6
- .sterling-button.tool:hover {
6
+ .sterling-button.tool:not(:disabled):hover {
7
7
  background-color: var(--stsv-button__background-color--hover);
8
8
  border-color: transparent;
9
9
  }
10
10
 
11
- .sterling-button.tool:active {
11
+ .sterling-button.tool:not(:disabled):active {
12
12
  background-color: var(--stsv-button__background-color--active);
13
13
  border-color: transparent;
14
14
  }
15
15
 
16
- .sterling-button.tool:focus-visible {
16
+ .sterling-button.tool:not(:disabled):focus-visible {
17
17
  border-color: var(--stsv-button__border-color--focus);
18
18
  }
package/css/sterling/Callout.base.css CHANGED
@@ -8,11 +8,11 @@
8
8
  border-color: var(--stsv-common__border-color);
9
9
  border-radius: 0;
10
10
  border-style: solid;
11
- border-width: 2px;
12
- box-shadow: var(--stsv-common__box-shadow);
11
+ border-width: var(--stsv-common__border-width);
13
12
  box-sizing: border-box;
14
13
  color: var(--stsv-common__color);
15
14
  display: none;
15
+ filter: var(--stsv-common__drop-shadow);
16
16
  grid-template-columns: 1fr;
17
17
  grid-template-rows: 1fr;
18
18
  height: auto;
@@ -45,13 +45,13 @@
45
45
  .sterling-callout.top-start .arrow,
46
46
  .sterling-callout.top .arrow,
47
47
  .sterling-callout.top-end .arrow {
48
- filter: drop-shadow(-1px -2px 1px rgba(0, 0, 0, 0.2));
48
+ filter: var(--stsv-common__drop-shadow);
49
49
  }
50
50
 
51
51
  .sterling-callout.left-start .arrow,
52
52
  .sterling-callout.left .arrow,
53
53
  .sterling-callout.left-end .arrow {
54
- filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.2));
54
+ filter: var(--stsv-common__drop-shadow);
55
55
  }
56
56
 
57
57
  .sterling-callout .callout-text {