@geoffcox/sterling-svelte-themes 1.0.0 → 1.0.2

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 (41) hide show
  1. package/css/sterling/Button.colors.css +100 -0
  2. package/css/sterling/Button.css +3 -3
  3. package/css/sterling/Button.secondary.colors.css +103 -0
  4. package/css/sterling/Button.tool.colors.css +91 -0
  5. package/css/sterling/Callout.css +0 -1
  6. package/css/sterling/Checkbox.css +0 -1
  7. package/css/sterling/Dropdown.css +0 -1
  8. package/css/sterling/Input.css +0 -1
  9. package/css/sterling/Label.base.css +12 -17
  10. package/css/sterling/Label.css +0 -2
  11. package/css/sterling/Link.css +0 -3
  12. package/css/sterling/Progress.base.css +12 -12
  13. package/css/sterling/Radio.css +0 -1
  14. package/css/sterling/Select.css +0 -1
  15. package/css/sterling/Slider.css +0 -1
  16. package/css/sterling/Switch.css +0 -1
  17. package/css/sterling/Tab.css +0 -1
  18. package/css/sterling/TextArea.css +0 -1
  19. package/css/sterling/TreeItem.css +0 -1
  20. package/css/sterling/dark-mode.css +99 -93
  21. package/css/sterling/light-mode.css +84 -78
  22. package/package.json +3 -2
  23. package/css/sterling/Button.colorful.css +0 -17
  24. package/css/sterling/Button.secondary.colorful.css +0 -15
  25. package/css/sterling/Button.tool.colorful.css +0 -13
  26. package/css/sterling/Callout.colorful.css +0 -5
  27. package/css/sterling/Checkbox.colorful.css +0 -17
  28. package/css/sterling/Dropdown.colorful.css +0 -23
  29. package/css/sterling/Input.colorful.css +0 -22
  30. package/css/sterling/Label.boxed.colorful.css +0 -21
  31. package/css/sterling/Label.colorful.css +0 -3
  32. package/css/sterling/Link.colorful.css +0 -15
  33. package/css/sterling/Link.ghost.colorful.css +0 -7
  34. package/css/sterling/Link.undecorated.colorful.css +0 -8
  35. package/css/sterling/Radio.colorful.css +0 -18
  36. package/css/sterling/Select.colorful.css +0 -24
  37. package/css/sterling/Slider.colorful.css +0 -11
  38. package/css/sterling/Switch.colorful.css +0 -45
  39. package/css/sterling/Tab.colorful.css +0 -13
  40. package/css/sterling/TextArea.colorful.css +0 -17
  41. package/css/sterling/TreeItem.colorful.css +0 -9
package/css/sterling/Button.colors.css ADDED
@@ -0,0 +1,100 @@
1
+ /* ----- blue ----- */
2
+ .sterling-button.blue {
3
+ background-color: var(--stsv-button__background-color--blue);
4
+ border-color: var(--stsv-button__border-color--blue);
5
+ color: var(--stsv-button__color--blue);
6
+ }
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);
12
+ }
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);
18
+ }
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);
24
+ }
25
+
26
+ /* ----- green ----- */
27
+
28
+ .sterling-button.green {
29
+ background-color: var(--stsv-button__background-color--green);
30
+ border-color: var(--stsv-button__border-color--green);
31
+ color: var(--stsv-button__color--green);
32
+ }
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);
38
+ }
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);
44
+ }
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);
50
+ }
51
+
52
+ /* ----- orange ----- */
53
+ .sterling-button.orange {
54
+ background-color: var(--stsv-button__background-color--orange);
55
+ border-color: var(--stsv-button__border-color--orange);
56
+ color: var(--stsv-button__color--orange);
57
+ }
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);
63
+ }
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);
69
+ }
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);
75
+ }
76
+
77
+ /* ----- red ----- */
78
+ .sterling-button.red {
79
+ background-color: var(--stsv-button__background-color--red);
80
+ border-color: var(--stsv-button__border-color--red);
81
+ color: var(--stsv-button__color--red);
82
+ }
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);
88
+ }
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);
94
+ }
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);
100
+ }
package/css/sterling/Button.css CHANGED
@@ -1,8 +1,8 @@
1
1
  @import url('./Button.base.css');
2
- @import url('./Button.colorful.css');
2
+ @import url('./Button.colors.css');
3
3
  @import url('./Button.shapes.css');
4
4
  @import url('./Button.secondary.css');
5
- @import url('./Button.secondary.colorful.css');
5
+ @import url('./Button.secondary.colors.css');
6
6
  @import url('./Button.tool.css');
7
- @import url('./Button.tool.colorful.css');
7
+ @import url('./Button.tool.colors.css');
8
8
  @import url('./Button.disabled.css');
package/css/sterling/Button.secondary.colors.css ADDED
@@ -0,0 +1,103 @@
1
+ /* ----- blue ----- */
2
+
3
+ .sterling-button.secondary.blue {
4
+ background-color: none;
5
+ border-color: var(--stsv-button__border-color--blue);
6
+ color: var(--stsv-button__border-color--blue);
7
+ }
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);
13
+ }
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);
19
+ }
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);
25
+ }
26
+
27
+ /* ----- green ----- */
28
+
29
+ .sterling-button.secondary.green {
30
+ background-color: none;
31
+ border-color: var(--stsv-button__border-color--green);
32
+ color: var(--stsv-button__border-color--green);
33
+ }
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);
39
+ }
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);
45
+ }
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);
51
+ }
52
+
53
+ /* ----- orange ----- */
54
+
55
+ .sterling-button.secondary.orange {
56
+ background-color: none;
57
+ border-color: var(--stsv-button__border-color--orange);
58
+ color: var(--stsv-button__border-color--orange);
59
+ }
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);
65
+ }
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);
71
+ }
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);
77
+ }
78
+
79
+ /* ----- red ----- */
80
+
81
+ .sterling-button.secondary.red {
82
+ background-color: none;
83
+ border-color: var(--stsv-button__border-color--red);
84
+ color: var(--stsv-button__border-color--red);
85
+ }
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);
91
+ }
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);
97
+ }
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);
103
+ }
package/css/sterling/Button.tool.colors.css ADDED
@@ -0,0 +1,91 @@
1
+ /* ----- blue ----- */
2
+
3
+ .sterling-button.tool.blue {
4
+ background-color: none;
5
+ border-color: none;
6
+ color: var(--stsv-button__border-color--blue);
7
+ }
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);
12
+ }
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);
17
+ }
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);
22
+ }
23
+
24
+ /* ----- green ----- */
25
+
26
+ .sterling-button.tool.green {
27
+ background-color: none;
28
+ border-color: none;
29
+ color: var(--stsv-button__border-color--green);
30
+ }
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);
35
+ }
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);
40
+ }
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);
45
+ }
46
+
47
+ /* ----- orange ----- */
48
+
49
+ .sterling-button.tool.orange {
50
+ background-color: none;
51
+ border-color: none;
52
+ color: var(--stsv-button__border-color--orange);
53
+ }
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);
58
+ }
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);
63
+ }
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);
68
+ }
69
+
70
+ /* ----- red ----- */
71
+
72
+ .sterling-button.tool.red {
73
+ background-color: none;
74
+ border-color: none;
75
+ color: var(--stsv-button__border-color--red);
76
+ }
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);
81
+ }
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);
86
+ }
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);
91
+ }
package/css/sterling/Callout.css CHANGED
@@ -1,2 +1 @@
1
1
  @import url('./Callout.base.css');
2
- @import url('./Callout.colorful.css');
package/css/sterling/Checkbox.css CHANGED
@@ -1,3 +1,2 @@
1
1
  @import url('./Checkbox.base.css');
2
- @import url('./Checkbox.colorful.css');
3
2
  @import url('./Checkbox.disabled.css');
package/css/sterling/Dropdown.css CHANGED
@@ -1,4 +1,3 @@
1
1
  @import url('./Dropdown.base.css');
2
- @import url('./Dropdown.colorful.css');
3
2
  @import url('./Dropdown.disabled.css');
4
3
  @import url('./Dropdown.composed.css');
package/css/sterling/Input.css CHANGED
@@ -1,4 +1,3 @@
1
1
  @import url('./Input.base.css');
2
- @import url('./Input.colorful.css');
3
2
  @import url('./Input.disabled.css');
4
3
  @import url('./Input.composed.css');
package/css/sterling/Label.base.css CHANGED
@@ -43,10 +43,6 @@
43
43
  margin: 0;
44
44
  }
45
45
 
46
- .sterling-label .sterling-label.colorful .text {
47
- color: var(--stsv-common--colorful__color--secondary);
48
- }
49
-
50
46
  .sterling-label .content {
51
47
  display: grid;
52
48
  grid-area: content;
@@ -67,28 +63,27 @@
67
63
  }
68
64
 
69
65
  .sterling-label.info .message {
70
- background-color: var(--stsv-status--info__background-color);
71
- border-color: var(--stsv-status--info__border-color);
72
- color: var(--stsv-status--info__color);
66
+ background-color: var(--stsv-common__background-color--info);
67
+ border-color: var(--stsv-common__border-color--info);
68
+ color: var(--stsv-common__color--info);
73
69
  }
74
70
 
75
71
  .sterling-label.success .message {
76
- background-color: var(--stsv-status--success__background-color);
77
- border-color: var(--stsv-status--success__border-color);
78
- color: var(--stsv-status--success__color);
72
+ background-color: var(--stsv-common__background-color--success);
73
+ border-color: var(--stsv-common__border-color--success);
74
+ color: var(--stsv-common__color--success);
79
75
  }
80
76
 
81
77
  .sterling-label.warning .message {
82
- background-color: var(--stsv-status--warning__background-color);
83
- border-color: var(--stsv-status--warning__border-color);
84
- color: var(--stsv-status--warning__color);
78
+ background-color: var(--stsv-common__background-color--warning);
79
+ border-color: var(--stsv-common__border-color--warning);
80
+ color: var(--stsv-common__color--warning);
85
81
  }
86
82
 
87
- .sterling-label.danger .message,
88
83
  .sterling-label.error .message {
89
- background-color: var(--stsv-status--danger__background-color);
90
- border-color: var(--stsv_--danger-color);
91
- color: var(--stsv-status--danger__color);
84
+ background-color: var(--stsv-common__background-color--error);
85
+ border-color: var(--stsv-common__border-color--error);
86
+ color: var(--stsv-common__color--error);
92
87
  }
93
88
 
94
89
  .sterling-label .required {
package/css/sterling/Label.css CHANGED
@@ -1,5 +1,3 @@
1
1
  @import url('./Label.base.css');
2
2
  @import url('./Label.boxed.css');
3
- @import url('./Label.colorful.css');
4
- @import url('./Label.boxed.colorful.css');
5
3
  @import url('./Label.disabled.css');
package/css/sterling/Link.css CHANGED
@@ -1,11 +1,8 @@
1
1
  @import url('./Link.base.css');
2
- @import url('./Link.colorful.css');
3
2
  @import url('./Link.ghost.css');
4
- @import url('./Link.ghost.colorful.css');
5
3
  @import url('./Link.text-underline.css');
6
4
  @import url('./Link.text-underline.ghost.css');
7
5
  @import url('./Link.undecorated.css');
8
- @import url('./Link.undecorated.colorful.css');
9
6
  @import url('./Link.undecorated.ghost.css');
10
7
  @import url('./Link.undecorated.underline.css');
11
8
  @import url('./Link.disabled.css');
package/css/sterling/Progress.base.css CHANGED
@@ -59,28 +59,28 @@
59
59
 
60
60
  /* ----- status ----- */
61
61
 
62
- .sterling-progress.info-status .indicator {
63
- background-color: var(--stsv-status--info__border-color);
62
+ .sterling-progress.info .indicator {
63
+ background-color: var(--stsv-common__border-color--info);
64
64
  }
65
65
 
66
- .sterling-progress.success-status .indicator {
67
- background-color: var(--stsv-status--success__border-color);
66
+ .sterling-progress.success .indicator {
67
+ background-color: var(--stsv-common__border-color--success);
68
68
  }
69
69
 
70
- .sterling-progress.warning-status .indicator {
71
- background-color: var(--stsv-status--warning__border-color);
70
+ .sterling-progress.warning .indicator {
71
+ background-color: var(--stsv-common__border-color--warning);
72
72
  }
73
73
 
74
- .sterling-progress.error-status .indicator {
75
- background-color: var(--stsv-status--danger__border-color);
74
+ .sterling-progress.error .indicator {
75
+ background-color: var(--stsv-common__border-color--error);
76
76
  }
77
77
 
78
- .sterling-progress.auto-status[data-progress-percent] .indicator {
79
- background-color: var(--stsv-status--info__border-color);
78
+ .sterling-progress.auto-success[data-progress-percent] .indicator {
79
+ background-color: var(--stsv-common__border-color--info);
80
80
  }
81
81
 
82
- .sterling-progress.auto-status[data-progress-percent='100'] .indicator {
83
- background-color: var(--stsv-status--success__border-color);
82
+ .sterling-progress.auto-success[data-progress-percent='100'] .indicator {
83
+ background-color: var(--stsv-common__border-color--success);
84
84
  }
85
85
 
86
86
  /* ----- prefers-reduced-motion ----- */
package/css/sterling/Radio.css CHANGED
@@ -1,3 +1,2 @@
1
1
  @import url('./Radio.base.css');
2
- @import url('./Radio.colorful.css');
3
2
  @import url('./Radio.disabled.css');
package/css/sterling/Select.css CHANGED
@@ -1,4 +1,3 @@
1
1
  @import url('./Select.base.css');
2
- @import url('./Select.colorful.css');
3
2
  @import url('./Select.composed.css');
4
3
  @import url('./Select.disabled.css');
package/css/sterling/Slider.css CHANGED
@@ -1,4 +1,3 @@
1
1
  @import url('./Slider.base.css');
2
- @import url('./Slider.colorful.css');
3
2
  @import url('./Slider.disabled.css');
4
3
  @import url('./Slider.composed.css');
package/css/sterling/Switch.css CHANGED
@@ -1,3 +1,2 @@
1
1
  @import url('./Switch.base.css');
2
- @import url('./Switch.colorful.css');
3
2
  @import url('./Switch.disabled.css');
package/css/sterling/Tab.css CHANGED
@@ -1,3 +1,2 @@
1
1
  @import url('./Tab.base.css');
2
- @import url('./Tab.colorful.css');
3
2
  @import url('./Tab.disabled.css');
package/css/sterling/TextArea.css CHANGED
@@ -1,4 +1,3 @@
1
1
  @import url('./TextArea.base.css');
2
- @import url('./TextArea.colorful.css');
3
2
  @import url('./TextArea.disabled.css');
4
3
  @import url('./TextArea.composed.css');
package/css/sterling/TreeItem.css CHANGED
@@ -1,3 +1,2 @@
1
1
  @import url('./TreeItem.base.css');
2
- @import url('./TreeItem.colorful.css');
3
2
  @import url('./TreeItem.disabled.css');