@geoffcox/sterling-svelte-themes 2.0.4 → 2.0.6

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 (9) hide show
  1. package/README.md +8 -0
  2. package/css/sterling/Button.base.css +3 -3
  3. package/css/sterling/Button.colors.css +16 -16
  4. package/css/sterling/Button.disabled.css +14 -2
  5. package/css/sterling/Button.secondary.colors.css +20 -20
  6. package/css/sterling/Button.secondary.css +7 -3
  7. package/css/sterling/Button.tool.colors.css +24 -24
  8. package/css/sterling/Button.tool.css +4 -4
  9. package/package.json +1 -1
package/README.md CHANGED
@@ -22,6 +22,14 @@ https://github.com/GeoffCox/sterling-svelte-themes
22
22
 
23
23
  ## Change Log
24
24
 
25
+ ### 2.0.6
26
+
27
+ - Fixed a few of invalid CSS declarations for background and border colors
28
+
29
+ ### 2.0.5
30
+
31
+ - Fixed issue with new button disabled state not applying due to specificity of colors and variants
32
+
25
33
  ### 2.0.4
26
34
 
27
35
  - Standardized disabled styles: Removed no-step diagonal stripes in favor of traditional background, border, and color.
package/css/sterling/Button.base.css CHANGED
@@ -28,19 +28,19 @@
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;
package/css/sterling/Button.colors.css CHANGED
@@ -1,23 +1,23 @@
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 {
8
+ .sterling-button.blue:not(:disabled):hover {
9
9
  background-color: var(--stsv-button__background-color--blue--hover);
10
10
  border-color: var(--stsv-button__border-color--blue--hover);
11
11
  color: var(--stsv-button__color--blue--hover);
12
12
  }
13
13
 
14
- .sterling-button.blue:focus {
14
+ .sterling-button.blue:not(:disabled):focus-visible {
15
15
  background-color: var(--stsv-button__background-color--blue--focus);
16
16
  border-color: var(--stsv-button__border-color--blue--focus);
17
17
  color: var(--stsv-button__color--blue--focus);
18
18
  }
19
19
 
20
- .sterling-button.blue:active {
20
+ .sterling-button.blue:not(:disabled):active {
21
21
  background-color: var(--stsv-button__background-color--blue--active);
22
22
  border-color: var(--stsv-button__border-color--blue--active);
23
23
  color: var(--stsv-button__color--blue--active);
@@ -25,75 +25,75 @@
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 {
34
+ .sterling-button.green:not(:disabled):hover {
35
35
  background-color: var(--stsv-button__background-color--green--hover);
36
36
  border-color: var(--stsv-button__border-color--green--hover);
37
37
  color: var(--stsv-button__color--green--hover);
38
38
  }
39
39
 
40
- .sterling-button.green:focus {
40
+ .sterling-button.green:not(:disabled):focus-visible {
41
41
  background-color: var(--stsv-button__background-color--green--focus);
42
42
  border-color: var(--stsv-button__border-color--green--focus);
43
43
  color: var(--stsv-button__color--green--focus);
44
44
  }
45
45
 
46
- .sterling-button.green:active {
46
+ .sterling-button.green:not(:disabled):active {
47
47
  background-color: var(--stsv-button__background-color--green--active);
48
48
  border-color: var(--stsv-button__border-color--green--active);
49
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 {
59
+ .sterling-button.orange:not(:disabled):hover {
60
60
  background-color: var(--stsv-button__background-color--orange--hover);
61
61
  border-color: var(--stsv-button__border-color--orange--hover);
62
62
  color: var(--stsv-button__color--orange--hover);
63
63
  }
64
64
 
65
- .sterling-button.orange:focus {
65
+ .sterling-button.orange:not(:disabled):focus-visible {
66
66
  background-color: var(--stsv-button__background-color--orange--focus);
67
67
  border-color: var(--stsv-button__border-color--orange--focus);
68
68
  color: var(--stsv-button__color--orange--focus);
69
69
  }
70
70
 
71
- .sterling-button.orange:active {
71
+ .sterling-button.orange:not(:disabled):active {
72
72
  background-color: var(--stsv-button__background-color--orange--active);
73
73
  border-color: var(--stsv-button__border-color--orange--active);
74
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 {
84
+ .sterling-button.red:not(:disabled):hover {
85
85
  background-color: var(--stsv-button__background-color--red--hover);
86
86
  border-color: var(--stsv-button__border-color--red--hover);
87
87
  color: var(--stsv-button__color--red--hover);
88
88
  }
89
89
 
90
- .sterling-button.red:focus {
90
+ .sterling-button.red:not(:disabled):focus-visible {
91
91
  background-color: var(--stsv-button__background-color--red--focus);
92
92
  border-color: var(--stsv-button__border-color--red--focus);
93
93
  color: var(--stsv-button__color--red--focus);
94
94
  }
95
95
 
96
- .sterling-button.red:active {
96
+ .sterling-button.red:not(:disabled):active {
97
97
  background-color: var(--stsv-button__background-color--red--active);
98
98
  border-color: var(--stsv-button__border-color--red--active);
99
99
  color: var(--stsv-button__color--red--active);
package/css/sterling/Button.disabled.css CHANGED
@@ -1,6 +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
6
  background-color: var(--stsv-button__background-color--disabled);
4
7
  border-color: var(--stsv-button__border-color--disabled);
5
8
  color: var(--stsv-button__color--disabled);
6
- }
9
+ }
10
+
11
+ .sterling-button.secondary:disabled {
12
+ background-color: transparent;
13
+ }
14
+
15
+ .sterling-button.tool:disabled {
16
+ background-color: transparent;
17
+ border-color: transparent;
18
+ }
package/css/sterling/Button.secondary.colors.css CHANGED
@@ -1,24 +1,24 @@
1
1
  /* ----- blue ----- */
2
2
 
3
- .sterling-button.secondary.blue {
4
- background-color: none;
3
+ .sterling-button.secondary.blue:not(:disabled) {
4
+ background-color: transparent;
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 {
9
+ .sterling-button.secondary.blue:not(:disabled):hover {
10
10
  background-color: var(--stsv-button__background-color--blue--hover);
11
11
  border-color: var(--stsv-button__border-color--blue--hover);
12
12
  color: var(--stsv-button__color--blue--hover);
13
13
  }
14
14
 
15
- .sterling-button.secondary.blue:focus {
15
+ .sterling-button.secondary.blue:not(:disabled):focus-visible {
16
16
  background-color: var(--stsv-button__background-color--blue--focus);
17
17
  border-color: var(--stsv-button__border-color--blue--focus);
18
18
  color: var(--stsv-button__color--blue--focus);
19
19
  }
20
20
 
21
- .sterling-button.secondary.blue:active {
21
+ .sterling-button.secondary.blue:not(:disabled):active {
22
22
  background-color: var(--stsv-button__background-color--blue--active);
23
23
  border-color: var(--stsv-button__border-color--blue--active);
24
24
  color: var(--stsv-button__color--blue--active);
@@ -26,25 +26,25 @@
26
26
 
27
27
  /* ----- green ----- */
28
28
 
29
- .sterling-button.secondary.green {
30
- background-color: none;
29
+ .sterling-button.secondary.green:not(:disabled) {
30
+ background-color: transparent;
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 {
35
+ .sterling-button.secondary.green:not(:disabled):hover {
36
36
  background-color: var(--stsv-button__background-color--green--hover);
37
37
  border-color: var(--stsv-button__border-color--green--hover);
38
38
  color: var(--stsv-button__color--green--hover);
39
39
  }
40
40
 
41
- .sterling-button.secondary.green:focus {
41
+ .sterling-button.secondary.green:not(:disabled):focus-visible {
42
42
  background-color: var(--stsv-button__background-color--green--focus);
43
43
  border-color: var(--stsv-button__border-color--green--focus);
44
44
  color: var(--stsv-button__color--green--focus);
45
45
  }
46
46
 
47
- .sterling-button.secondary.green:active {
47
+ .sterling-button.secondary.green:not(:disabled):active {
48
48
  background-color: var(--stsv-button__background-color--green--active);
49
49
  border-color: var(--stsv-button__border-color--green--active);
50
50
  color: var(--stsv-button__color--green--active);
@@ -52,25 +52,25 @@
52
52
 
53
53
  /* ----- orange ----- */
54
54
 
55
- .sterling-button.secondary.orange {
56
- background-color: none;
55
+ .sterling-button.secondary.orange:not(:disabled) {
56
+ background-color: transparent;
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 {
61
+ .sterling-button.secondary.orange:not(:disabled):hover {
62
62
  background-color: var(--stsv-button__background-color--orange--hover);
63
63
  border-color: var(--stsv-button__border-color--orange--hover);
64
64
  color: var(--stsv-button__color--orange--hover);
65
65
  }
66
66
 
67
- .sterling-button.secondary.orange:focus {
67
+ .sterling-button.secondary.orange:not(:disabled):focus-visible {
68
68
  background-color: var(--stsv-button__background-color--orange--focus);
69
69
  border-color: var(--stsv-button__border-color--orange--focus);
70
70
  color: var(--stsv-button__color--orange--focus);
71
71
  }
72
72
 
73
- .sterling-button.secondary.orange:active {
73
+ .sterling-button.secondary.orange:not(:disabled):active {
74
74
  background-color: var(--stsv-button__background-color--orange--active);
75
75
  border-color: var(--stsv-button__border-color--orange--active);
76
76
  color: var(--stsv-button__color--orange--active);
@@ -78,25 +78,25 @@
78
78
 
79
79
  /* ----- red ----- */
80
80
 
81
- .sterling-button.secondary.red {
82
- background-color: none;
81
+ .sterling-button.secondary.red:not(:disabled){
82
+ background-color: transparent;
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 {
87
+ .sterling-button.secondary.red:not(:disabled):hover {
88
88
  background-color: var(--stsv-button__background-color--red--hover);
89
89
  border-color: var(--stsv-button__border-color--red--hover);
90
90
  color: var(--stsv-button__color--red--hover);
91
91
  }
92
92
 
93
- .sterling-button.secondary.red:focus {
93
+ .sterling-button.secondary.red:not(:disabled):focus-visible {
94
94
  background-color: var(--stsv-button__background-color--red--focus);
95
95
  border-color: var(--stsv-button__border-color--red--focus);
96
96
  color: var(--stsv-button__color--red--focus);
97
97
  }
98
98
 
99
- .sterling-button.secondary.red:active {
99
+ .sterling-button.secondary.red:not(:disabled):active {
100
100
  background-color: var(--stsv-button__background-color--red--active);
101
101
  border-color: var(--stsv-button__border-color--red--active);
102
102
  color: var(--stsv-button__color--red--active);
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 {
4
- background-color: none;
5
- border-color: none;
3
+ .sterling-button.tool.blue:not(:disabled) {
4
+ background-color: transparent;
5
+ border-color: transparent;
6
6
  color: var(--stsv-button__border-color--blue);
7
7
  }
8
8
 
9
- .sterling-button.tool.blue:hover {
9
+ .sterling-button.tool.blue:not(:disabled):hover {
10
10
  background-color: var(--stsv-button__background-color--blue--hover);
11
11
  color: var(--stsv-button__color--blue--hover);
12
12
  }
13
13
 
14
- .sterling-button.tool.blue:focus {
14
+ .sterling-button.tool.blue:not(:disabled):focus-visible {
15
15
  background-color: var(--stsv-button__background-color--blue--focus);
16
16
  color: var(--stsv-button__color--blue--focus);
17
17
  }
18
18
 
19
- .sterling-button.tool.blue:active {
19
+ .sterling-button.tool.blue:not(:disabled):active {
20
20
  background-color: var(--stsv-button__background-color--blue--active);
21
21
  color: var(--stsv-button__color--blue--active);
22
22
  }
23
23
 
24
24
  /* ----- green ----- */
25
25
 
26
- .sterling-button.tool.green {
27
- background-color: none;
28
- border-color: none;
26
+ .sterling-button.tool.green:not(:disabled) {
27
+ background-color: transparent;
28
+ border-color: transparent;
29
29
  color: var(--stsv-button__border-color--green);
30
30
  }
31
31
 
32
- .sterling-button.tool.green:hover {
32
+ .sterling-button.tool.green:not(:disabled):hover {
33
33
  background-color: var(--stsv-button__background-color--green--hover);
34
34
  color: var(--stsv-button__color--green--hover);
35
35
  }
36
36
 
37
- .sterling-button.tool.green:focus {
37
+ .sterling-button.tool.green:not(:disabled):focus-visible {
38
38
  background-color: var(--stsv-button__background-color--green--focus);
39
39
  color: var(--stsv-button__color--green--focus);
40
40
  }
41
41
 
42
- .sterling-button.tool.green:active {
42
+ .sterling-button.tool.green:not(:disabled):active {
43
43
  background-color: var(--stsv-button__background-color--green--active);
44
44
  color: var(--stsv-button__color--green--active);
45
45
  }
46
46
 
47
47
  /* ----- orange ----- */
48
48
 
49
- .sterling-button.tool.orange {
50
- background-color: none;
51
- border-color: none;
49
+ .sterling-button.tool.orange:not(:disabled) {
50
+ background-color: transparent;
51
+ border-color: transparent;
52
52
  color: var(--stsv-button__border-color--orange);
53
53
  }
54
54
 
55
- .sterling-button.tool.orange:hover {
55
+ .sterling-button.tool.orange:not(:disabled):hover {
56
56
  background-color: var(--stsv-button__background-color--orange--hover);
57
57
  color: var(--stsv-button__color--orange--hover);
58
58
  }
59
59
 
60
- .sterling-button.tool.orange:focus {
60
+ .sterling-button.tool.orange:not(:disabled):focus-visible {
61
61
  background-color: var(--stsv-button__background-color--orange--focus);
62
62
  color: var(--stsv-button__color--orange--focus);
63
63
  }
64
64
 
65
- .sterling-button.tool.orange:active {
65
+ .sterling-button.tool.orange:not(:disabled):active {
66
66
  background-color: var(--stsv-button__background-color--orange--active);
67
67
  color: var(--stsv-button__color--orange--active);
68
68
  }
69
69
 
70
70
  /* ----- red ----- */
71
71
 
72
- .sterling-button.tool.red {
73
- background-color: none;
74
- border-color: none;
72
+ .sterling-button.tool.red:not(:disabled) {
73
+ background-color: transparent;
74
+ border-color: transparent;
75
75
  color: var(--stsv-button__border-color--red);
76
76
  }
77
77
 
78
- .sterling-button.tool.red:hover {
78
+ .sterling-button.tool.red:not(:disabled):hover {
79
79
  background-color: var(--stsv-button__background-color--red--hover);
80
80
  color: var(--stsv-button__color--red--hover);
81
81
  }
82
82
 
83
- .sterling-button.tool.red:focus {
83
+ .sterling-button.tool.red:not(:disabled):focus-visible {
84
84
  background-color: var(--stsv-button__background-color--red--focus);
85
85
  color: var(--stsv-button__color--red--focus);
86
86
  }
87
87
 
88
- .sterling-button.tool.red:active {
88
+ .sterling-button.tool.red:not(:disabled):active {
89
89
  background-color: var(--stsv-button__background-color--red--active);
90
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@geoffcox/sterling-svelte-themes",
3
- "version": "2.0.4",
3
+ "version": "2.0.6",
4
4
  "author": "Geoff Cox",
5
5
  "description": "A modern theme for the sterling-svelte component library.",
6
6
  "license": "MIT",