@geoffcox/sterling-svelte-themes 1.0.1 → 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 +1 -1
  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');
package/css/sterling/dark-mode.css CHANGED
@@ -5,130 +5,136 @@
5
5
  --stsv-common__border-color: hsl(0, 0%, 92%);
6
6
  --stsv-common__color: hsl(0, 0%, 100%);
7
7
 
8
- --stsv-common__background-color--secondary: hsl(0, 0%, 20%);
9
- --stsv-common__color--secondary: hsl(0, 0%, 60%);
10
-
11
- --stsv-common__background-color--subtle: hsl(0, 0%, 15%);
12
- --stsv-common__color--subtle: hsl(0, 0%, 45%);
13
-
14
- --stsv-common__background-color--faint: hsl(0, 0%, 12%);
15
- --stsv-common__color--faint: hsl(0, 0%, 30%);
8
+ /* ----- common outline ----- */
16
9
 
17
10
  --stsv-common__outline-color: hsl(0, 0%, 100%);
18
11
  --stsv-common__outline-offset: 0;
19
12
  --stsv-common__outline-style: solid;
20
13
  --stsv-common__outline-width: 2px;
21
14
 
15
+ /* ----- common disabled ----- */
16
+
22
17
  --stsv-common--disabled__stripe-color: hsla(0, 0%, 0%, 0.2);
23
18
  --stsv-common--disabled__stripe-color--alt: hsla(0, 0%, 100%, 0.2);
24
19
  --stsv-common--disabled__stripe-angle: 135deg;
25
20
  --stsv-common--disabled__stripe-width: 3px;
26
21
 
22
+ /* ----- common drop shadows ----- */
23
+
27
24
  --stsv-common__box-shadow: 2px 2px 4px 0px rgba(128, 128, 128, 0.7);
28
25
  --stsv-common__box-shadow--inset: 1px 1px 2px rgba(128, 128, 128, 0.7);
29
26
 
30
- /* ----- common, colorful ----- */
31
-
32
- --stsv-common--colorful__background-color: hsl(204, 100%, 12%);
33
- --stsv-common--colorful__border-color: hsl(204, 100%, 85%);
34
- --stsv-common--colorful__color: hsl(204, 100%, 92%);
35
-
36
- --stsv-common--colorful__background-color--secondary: hsl(204, 100%, 20%);
37
- --stsv-common--colorful__color--secondary: hsl(204, 90%, 75%);
27
+ /* ----- common reduced emphasis ----- */
38
28
 
39
- --stsv-common--colorful__background-color--subtle: hsl(204, 100%, 15%);
40
- --stsv-common--colorful__color--subtle: hsl(204, 80%, 45%);
29
+ --stsv-common__background-color--secondary: hsl(0, 0%, 20%);
30
+ --stsv-common__color--secondary: hsl(0, 0%, 60%);
31
+ --stsv-common__background-color--subtle: hsl(0, 0%, 15%);
32
+ --stsv-common__color--subtle: hsl(0, 0%, 45%);
33
+ --stsv-common__background-color--faint: hsl(0, 0%, 12%);
34
+ --stsv-common__color--faint: hsl(0, 0%, 30%);
41
35
 
42
- --stsv-common--colorful__background-color--faint: hsl(204, 100%, 12%);
43
- --stsv-common--colorful__color--faint: hsl(204, 100%, 20%);
36
+ /* ----- common colors ----- */
37
+
38
+ --stsv-common__background-color--info: hsl(200, 100%, 25%);
39
+ --stsv-common__border-color--info: hsl(200, 100%, 80%);
40
+ --stsv-common__color--info: hsl(200, 100%, 80%);
41
+ --stsv-common__background-color--success: hsl(146, 100%, 25%);
42
+ --stsv-common__border-color--success: hsl(146, 100%, 80%);
43
+ --stsv-common__color--success: hsl(146, 100%, 80%);
44
+ --stsv-common__background-color--warning: hsl(45, 100%, 25%);
45
+ --stsv-common__border-color--warning: hsl(45, 100%, 80%);
46
+ --stsv-common__color--warning: hsl(45, 100%, 80%);
47
+ --stsv-common__background-color--error: hsl(0, 100%, 25%);
48
+ --stsv-common__border-color--error: hsl(0, 100%, 80%);
49
+ --stsv-common__color--error: hsl(0, 100%, 80%);
44
50
 
45
51
  /* ----- button ----- */
46
52
 
47
- --stsv-button__background-color: hsl(0, 0%, 30%);
48
- --stsv-button__border-color: hsl(0, 0%, 92%);
49
- --stsv-button__color: hsl(0, 0%, 100%);
50
-
51
- --stsv-button__background-color--hover: hsl(0, 0%, 45%);
52
- --stsv-button__border-color--hover: hsl(0, 0%, 96%);
53
- --stsv-button__color--hover: hsl(0, 0%, 100%);
54
-
55
- --stsv-button__background-color--focus: hsl(0, 0%, 45%);
56
- --stsv-button__border-color--focus: hsl(0, 0%, 100%);
57
- --stsv-button__color--focus: hsl(0, 0%, 100%);
58
-
59
- --stsv-button__background-color--active: hsl(0, 0%, 60%);
60
- --stsv-button__border-color--active: hsl(0, 0%, 98%);
61
- --stsv-button__color--active: hsl(0, 0%, 98%);
62
-
63
- /* ----- button, colorful ----- */
64
-
65
- --stsv-button--colorful__background-color: hsl(204, 80%, 45%);
66
- --stsv-button--colorful__border-color: hsl(204, 100%, 20%);
67
- --stsv-button--colorful__color: hsl(204, 100%, 98%);
68
-
69
- --stsv-button--colorful__background-color--hover: hsl(204, 80%, 60%);
70
- --stsv-button--colorful__border-color--hover: hsl(204, 80%, 30%);
71
- --stsv-button--colorful__color--hover: hsl(204, 100%, 98%);
72
-
73
- --stsv-button--colorful__background-color--focus: hsl(204, 80%, 60%);
74
- --stsv-button--colorful__border-color--focus: hsl(204, 80%, 30%);
75
- --stsv-button--colorful__color--focus: hsl(204, 100%, 98%);
76
-
77
- --stsv-button--colorful__background-color--active: hsl(204, 90%, 75%);
78
- --stsv-button--colorful__border-color--active: hsl(204, 80%, 45%);
79
- --stsv-button--colorful__color--active: hsl(204, 100%, 100%);
53
+ --stsv-button__background-color: hsl(0, 0%, 20%);
54
+ --stsv-button__border-color: hsl(0, 0%, 80%);
55
+ --stsv-button__color: hsl(0, 0%, 85%);
56
+
57
+ --stsv-button__background-color--hover: hsl(0, 0%, 25%);
58
+ --stsv-button__border-color--hover: hsl(0, 0%, 80%);
59
+ --stsv-button__color--hover: hsl(0, 0%, 85%);
60
+
61
+ --stsv-button__background-color--focus: hsl(0, 0%, 25%);
62
+ --stsv-button__border-color--focus: hsl(0, 0%, 80%);
63
+ --stsv-button__color--focus: hsl(0, 0%, 85%);
64
+
65
+ --stsv-button__background-color--active: hsl(0, 0%, 45%);
66
+ --stsv-button__border-color--active: hsl(0, 0%, 10%);
67
+ --stsv-button__color--active: hsl(0, 0%, 15%);
68
+
69
+ /* ----- button colors ----- */
70
+
71
+ --stsv-button__background-color--blue: hsl(200, 100%, 10%);
72
+ --stsv-button__border-color--blue: hsl(200, 100%, 50%);
73
+ --stsv-button__color--blue: hsl(200, 100%, 60%);
74
+ --stsv-button__background-color--blue-hover: hsl(200, 100%, 15%);
75
+ --stsv-button__border-color--blue-hover: hsl(200, 100%, 50%);
76
+ --stsv-button__color--blue-hover: hsl(200, 100%, 60%);
77
+ --stsv-button__background-color--blue-focus: hsl(200, 100%, 15%);
78
+ --stsv-button__border-color--blue-focus: hsl(200, 100%, 50%);
79
+ --stsv-button__color--blue-focus: hsl(200, 100%, 60%);
80
+ --stsv-button__background-color--blue-active: hsl(200, 100%, 30%);
81
+ --stsv-button__border-color--blue-active: hsl(200, 100%, 10%);
82
+ --stsv-button__color--blue-active: hsl(200, 100%, 15%);
83
+
84
+ --stsv-button__background-color--green: hsl(146, 100%, 10%);
85
+ --stsv-button__border-color--green: hsl(146, 100%, 30%);
86
+ --stsv-button__color--green: hsl(146, 100%, 40%);
87
+ --stsv-button__background-color--green-hover: hsl(146, 100%, 15%);
88
+ --stsv-button__border-color--green-hover: hsl(146, 100%, 30%);
89
+ --stsv-button__color--green-hover: hsl(146, 100%, 40%);
90
+ --stsv-button__background-color--green-focus: hsl(146, 100%, 15%);
91
+ --stsv-button__border-color--green-focus: hsl(146, 100%, 30%);
92
+ --stsv-button__color--green-focus: hsl(146, 100%, 40%);
93
+ --stsv-button__background-color--green-active: hsl(146, 100%, 25%);
94
+ --stsv-button__border-color--green-active: hsl(146, 100%, 10%);
95
+ --stsv-button__color--green-active: hsl(146, 100%, 15%);
96
+
97
+ --stsv-button__background-color--orange: hsl(45, 100%, 10%);
98
+ --stsv-button__border-color--orange: hsl(45, 100%, 40%);
99
+ --stsv-button__color--orange: hsl(45, 100%, 50%);
100
+ --stsv-button__background-color--orange-hover: hsl(45, 100%, 15%);
101
+ --stsv-button__border-color--orange-hover: hsl(45, 100%, 40%);
102
+ --stsv-button__color--orange-hover: hsl(45, 100%, 50%);
103
+ --stsv-button__background-color--orange-focus: hsl(45, 100%, 15%);
104
+ --stsv-button__border-color--orange-focus: hsl(45, 100%, 40%);
105
+ --stsv-button__color--orange-focus: hsl(45, 100%, 50%);
106
+ --stsv-button__background-color--orange-active: hsl(45, 100%, 30%);
107
+ --stsv-button__border-color--orange-active: hsl(45, 100%, 10%);
108
+ --stsv-button__color--orange-active: hsl(45, 100%, 15%);
109
+
110
+ --stsv-button__background-color--red: hsl(0, 100%, 10%);
111
+ --stsv-button__border-color--red: hsl(0, 100%, 30%);
112
+ --stsv-button__color--red: hsl(0, 100%, 40%);
113
+ --stsv-button__background-color--red-hover: hsl(0, 100%, 15%);
114
+ --stsv-button__border-color--red-hover: hsl(0, 100%, 30%);
115
+ --stsv-button__color--red-hover: hsl(0, 100%, 40%);
116
+ --stsv-button__background-color--red-focus: hsl(0, 100%, 15%);
117
+ --stsv-button__border-color--red-focus: hsl(0, 100%, 30%);
118
+ --stsv-button__color--red-focus: hsl(0, 100%, 40%);
119
+ --stsv-button__background-color--red-active: hsl(0, 100%, 25%);
120
+ --stsv-button__border-color--red-active: hsl(0, 100%, 10%);
121
+ --stsv-button__color--red-active: hsl(0, 100%, 15%);
80
122
 
81
123
  /* ----- input ----- */
82
124
 
83
- --stsv-input__background-color: hsl(0, 0%, 30%);
125
+ --stsv-input__background-color: hsl(0, 0%, 20%);
84
126
  --stsv-input__border-color: hsl(0, 0%, 92%);
85
127
  --stsv-input__color: hsl(0, 0%, 100%);
86
128
 
87
- --stsv-input__background-color--hover: hsl(0, 0%, 15%);
129
+ --stsv-input__background-color--hover: hsl(0, 0%, 25%);
88
130
  --stsv-input__border-color--hover: hsl(0, 0%, 96%);
89
131
  --stsv-input__color--hover: hsl(0, 0%, 100%);
90
132
 
91
- --stsv-input__background-color--focus: hsl(0, 0%, 15%);
133
+ --stsv-input__background-color--focus: hsl(0, 0%, 25%);
92
134
  --stsv-input__border-color--focus: hsl(0, 0%, 100%);
93
135
  --stsv-input__color--focus: hsl(0, 0%, 100%);
94
136
 
95
- --stsv-input__background-color--selected: hsl(0, 0%, 60%);
137
+ --stsv-input__background-color--selected: hsl(0, 0%, 45%);
96
138
  --stsv-input__border-color--selected: hsl(0, 0%, 98%);
97
139
  --stsv-input__color--selected: hsl(0, 0%, 100%);
98
-
99
- /* ----- input, colorful ----- */
100
-
101
- --stsv-input--colorful__background-color: hsl(204, 80%, 30%);
102
- --stsv-input--colorful__border-color: hsl(204, 100%, 92%);
103
- --stsv-input--colorful__color: hsl(204, 100%, 100%);
104
-
105
- --stsv-input--colorful__background-color--hover: hsl(204, 100%, 15%);
106
- --stsv-input--colorful__border-color--hover: hsl(204, 100%, 96%);
107
- --stsv-input--colorful__color--hover: hsl(204, 100%, 100%);
108
-
109
- --stsv-input--colorful__background-color--focus: hsl(204, 100%, 15%);
110
- --stsv-input--colorful__border-color--focus: hsl(204, 100%, 96%);
111
- --stsv-input--colorful__color--focus: hsl(204, 100%, 100%);
112
-
113
- --stsv-input--colorful__background-color--selected: hsl(204, 80%, 60%);
114
- --stsv-input--colorful__border-color--selected: hsl(204, 100%, 98%);
115
- --stsv-input--colorful__color--selected: hsl(204, 100%, 100%);
116
-
117
- /* ----- status ----- */
118
-
119
- --stsv-status--info__background-color: hsl(198, 100%, 10%);
120
- --stsv-status--info__border-color: hsl(198, 100%, 40%);
121
- --stsv-status--info__color: hsl(198, 80%, 50%);
122
-
123
- --stsv-status--success__background-color: hsl(146, 100%, 10%);
124
- --stsv-status--success__border-color: hsl(146, 100%, 30%);
125
- --stsv-status--success__color: hsl(146, 100%, 40%);
126
-
127
- --stsv-status--warning__background-color: hsl(39, 100%, 10%);
128
- --stsv-status--warning__border-color: hsl(39, 100%, 45%);
129
- --stsv-status--warning__color: hsl(39, 100%, 50%);
130
-
131
- --stsv-status--danger__background-color: hsl(5, 100%, 10%);
132
- --stsv-status--danger__border-color: hsl(5, 100%, 40%);
133
- --stsv-status--danger__color: hsl(5, 100%, 50%);
134
140
  }
package/css/sterling/light-mode.css CHANGED
@@ -5,78 +5,120 @@
5
5
  --stsv-common__border-color: hsl(0, 0%, 45%);
6
6
  --stsv-common__color: hsl(0, 0%, 15%);
7
7
 
8
- --stsv-common__background-color--secondary: hsl(0, 0%, 92%);
9
- --stsv-common__color--secondary: hsl(0, 0%, 45%);
10
-
11
- --stsv-common__background-color--subtle: hsl(0, 0%, 96%);
12
- --stsv-common__color--subtle: hsl(0, 0%, 75%);
13
-
14
- --stsv-common__background-color--faint: hsl(0, 0%, 98%);
15
- --stsv-common__color--faint: hsl(0, 0%, 92%);
8
+ /* ----- common outline ----- */
16
9
 
17
10
  --stsv-common__outline-color: hsl(0, 0%, 15%);
18
11
  --stsv-common__outline-offset: 0;
19
12
  --stsv-common__outline-style: solid;
20
13
  --stsv-common__outline-width: 2px;
21
14
 
15
+ /* ----- common disabled ----- */
16
+
22
17
  --stsv-common--disabled__stripe-color: hsla(0, 0%, 0%, 0.2);
23
18
  --stsv-common--disabled__stripe-color--alt: hsla(0, 0%, 100%, 0.2);
24
19
  --stsv-common--disabled__stripe-angle: 135deg;
25
20
  --stsv-common--disabled__stripe-width: 3px;
26
21
 
22
+ /* ----- common drop shadows ----- */
23
+
27
24
  --stsv-common__box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.4);
28
25
  --stsv-common__box-shadow--inset: inset 1px 1px 2px 0px hsl(0, 0%, 45%);
29
26
 
30
- /* ----- common, colorful ----- */
31
-
32
- --stsv-common--colorful__background-color: hsl(204, 100%, 100%);
33
- --stsv-common--colorful__border-color: hsl(204, 80%, 30%);
34
- --stsv-common--colorful__color: hsl(204, 100%, 20%);
35
-
36
- --stsv-common--colorful__background-color--secondary: hsl(204, 100%, 92%);
37
- --stsv-common--colorful__color--secondary: hsl(204, 80%, 60%);
27
+ /* ----- common reduced emphasis ----- */
38
28
 
39
- --stsv-common--colorful__background-color--subtle: hsl(204, 100%, 96%);
40
- --stsv-common--colorful__color--subtle: hsl(204, 100%, 85%);
29
+ --stsv-common__background-color--secondary: hsl(0, 0%, 92%);
30
+ --stsv-common__color--secondary: hsl(0, 0%, 45%);
31
+ --stsv-common__background-color--subtle: hsl(0, 0%, 96%);
32
+ --stsv-common__color--subtle: hsl(0, 0%, 75%);
33
+ --stsv-common__background-color--faint: hsl(0, 0%, 98%);
34
+ --stsv-common__color--faint: hsl(0, 0%, 92%);
41
35
 
42
- --stsv-common--colorful__background-color--faint: hsl(204, 100%, 98%);
43
- --stsv-common--colorful__color--faint: hsl(204, 100%, 92%);
36
+ /* ----- common colors ----- */
37
+
38
+ --stsv-common__background-color--info: hsl(200, 100%, 90%);
39
+ --stsv-common__border-color--info: hsl(200, 100%, 40%);
40
+ --stsv-common__color--info: hsl(200, 100%, 40%);
41
+ --stsv-common__background-color--success: hsl(146, 100%, 90%);
42
+ --stsv-common__border-color--success: hsl(146, 100%, 30%);
43
+ --stsv-common__color--success: hsl(146, 80%, 25%);
44
+ --stsv-common__background-color--warning: hsl(45, 100%, 80%);
45
+ --stsv-common__border-color--warning: hsl(45, 100%, 45%);
46
+ --stsv-common__color--warning: hsl(45, 100%, 25%);
47
+ --stsv-common__background-color--error: hsl(0, 100%, 90%);
48
+ --stsv-common__border-color--error: hsl(0, 100%, 40%);
49
+ --stsv-common__color--error: hsl(0, 80%, 40%);
44
50
 
45
51
  /* ----- button ----- */
46
52
 
47
- --stsv-button__background-color: hsl(0, 0%, 96%);
53
+ --stsv-button__background-color: hsl(0, 0%, 90%);
48
54
  --stsv-button__border-color: hsl(0, 0%, 45%);
49
55
  --stsv-button__color: hsl(0, 0%, 15%);
50
56
 
51
- --stsv-button__background-color--hover: hsl(0, 0%, 92%);
57
+ --stsv-button__background-color--hover: hsl(0, 0%, 95%);
52
58
  --stsv-button__border-color--hover: hsl(0, 0%, 30%);
53
59
  --stsv-button__color--hover: hsl(0, 0%, 15%);
54
60
 
55
- --stsv-button__background-color--focus: hsl(0, 0%, 92%);
61
+ --stsv-button__background-color--focus: hsl(0, 0%, 95%);
56
62
  --stsv-button__border-color--focus: hsl(0, 0%, 30%);
57
63
  --stsv-button__color--focus: hsl(0, 0%, 15%);
58
64
 
59
- --stsv-button__background-color--active: hsl(0, 0%, 85%);
60
- --stsv-button__border-color--active: hsl(0, 0%, 20%);
65
+ --stsv-button__background-color--active: hsl(0, 0%, 75%);
66
+ --stsv-button__border-color--active: hsl(0, 0%, 95%);
61
67
  --stsv-button__color--active: hsl(0, 0%, 12%);
62
68
 
63
- /* ----- button, colorful ----- */
64
-
65
- --stsv-button--colorful__background-color: hsl(204, 80%, 60%);
66
- --stsv-button--colorful__border-color: hsl(204, 80%, 30%);
67
- --stsv-button--colorful__color: hsl(204, 100%, 98%);
68
-
69
- --stsv-button--colorful__background-color--hover: hsl(204, 90%, 75%);
70
- --stsv-button--colorful__border-color--hover: hsl(204, 80%, 45%);
71
- --stsv-button--colorful__color--hover: hsl(204, 100%, 98%);
72
-
73
- --stsv-button--colorful__background-color--focus: hsl(204, 90%, 75%);
74
- --stsv-button--colorful__border-color--focus: hsl(204, 80%, 45%);
75
- --stsv-button--colorful__color--focus: hsl(204, 100%, 98%);
76
-
77
- --stsv-button--colorful__background-color--active: hsl(204, 80%, 45%);
78
- --stsv-button--colorful__border-color--active: hsl(204, 100%, 20%);
79
- --stsv-button--colorful__color--active: hsl(204, 100%, 100%);
69
+ /* ----- button colors ----- */
70
+
71
+ --stsv-button__background-color--blue: hsl(200, 100%, 40%);
72
+ --stsv-button__border-color--blue: hsl(200, 100%, 30%);
73
+ --stsv-button__color--blue: hsl(200, 100%, 95%);
74
+ --stsv-button__background-color--blue-hover: hsl(200, 100%, 50%);
75
+ --stsv-button__border-color--blue-hover: hsl(200, 100%, 30%);
76
+ --stsv-button__color--blue-hover: hsl(200, 100%, 95%);
77
+ --stsv-button__background-color--blue-focus: hsl(200, 100%, 50%);
78
+ --stsv-button__border-color--blue-focus: hsl(200, 100%, 30%);
79
+ --stsv-button__color--blue-focus: hsl(200, 100%, 95%);
80
+ --stsv-button__background-color--blue-active: hsl(200, 100%, 40%);
81
+ --stsv-button__border-color--blue-active: hsl(200, 100%, 60%);
82
+ --stsv-button__color--blue-active: hsl(200, 100%, 95%);
83
+
84
+ --stsv-button__background-color--green: hsl(146, 100%, 30%);
85
+ --stsv-button__border-color--green: hsl(146, 100%, 25%);
86
+ --stsv-button__color--green: hsl(146, 100%, 95%);
87
+ --stsv-button__background-color--green-hover: hsl(146, 100%, 40%);
88
+ --stsv-button__border-color--green-hover: hsl(146, 100%, 25%);
89
+ --stsv-button__color--green-hover: hsl(146, 100%, 95%);
90
+ --stsv-button__background-color--green-focus: hsl(146, 100%, 40%);
91
+ --stsv-button__border-color--green-focus: hsl(146, 100%, 25%);
92
+ --stsv-button__color--green-focus: hsl(146, 100%, 95%);
93
+ --stsv-button__background-color--green-active: hsl(146, 100%, 30%);
94
+ --stsv-button__border-color--green-active: hsl(146, 100%, 40%);
95
+ --stsv-button__color--green-active: hsl(146, 100%, 95%);
96
+
97
+ --stsv-button__background-color--orange: hsl(45, 100%, 60%);
98
+ --stsv-button__border-color--orange: hsl(45, 100%, 50%);
99
+ --stsv-button__color--orange: hsl(45, 25%, 25%);
100
+ --stsv-button__background-color--orange-hover: hsl(45, 100%, 70%);
101
+ --stsv-button__border-color--orange-hover: hsl(45, 100%, 50%);
102
+ --stsv-button__color--orange-hover: hsl(45, 25%, 25%);
103
+ --stsv-button__background-color--orange-focus: hsl(45, 100%, 70%);
104
+ --stsv-button__border-color--orange-focus: hsl(45, 100%, 50%);
105
+ --stsv-button__color--orange-focus: hsl(45, 25%, 25%);
106
+ --stsv-button__background-color--orange-active: hsl(45, 100%, 60%);
107
+ --stsv-button__border-color--orange-active: hsl(45, 100%, 70%);
108
+ --stsv-button__color--orange-active: hsl(45, 25%, 25%);
109
+
110
+ --stsv-button__background-color--red: hsl(0, 80%, 40%);
111
+ --stsv-button__border-color--red: hsl(0, 80%, 30%);
112
+ --stsv-button__color--red: hsl(0, 100%, 95%);
113
+ --stsv-button__background-color--red-hover: hsl(0, 80%, 50%);
114
+ --stsv-button__border-color--red-hover: hsl(0, 80%, 30%);
115
+ --stsv-button__color--red-hover: hsl(0, 100%, 95%);
116
+ --stsv-button__background-color--red-focus: hsl(0, 80%, 50%);
117
+ --stsv-button__border-color--red-focus: hsl(0, 80%, 30%);
118
+ --stsv-button__color--red-focus: hsl(0, 100%, 95%);
119
+ --stsv-button__background-color--red-active: hsl(0, 80%, 40%);
120
+ --stsv-button__border-color--red-active: hsl(0, 80%, 50%);
121
+ --stsv-button__color--red-active: hsl(0, 100%, 95%);
80
122
 
81
123
  /* ----- input ----- */
82
124
 
@@ -95,40 +137,4 @@
95
137
  --stsv-input__background-color--selected: hsl(0, 0%, 85%);
96
138
  --stsv-input__border-color--selected: hsl(0, 0%, 15%);
97
139
  --stsv-input__color--selected: hsl(0, 0%, 15%);
98
-
99
- /* ----- input, colorful ----- */
100
-
101
- --stsv-input--colorful__background-color: hsl(204, 100%, 98%);
102
- --stsv-input--colorful__border-color: hsl(204, 80%, 30%);
103
- --stsv-input--colorful__color: hsl(204, 100%, 15%);
104
-
105
- --stsv-input--colorful__background-color--hover: hsl(204, 100%, 96%);
106
- --stsv-input--colorful__border-color--hover: hsl(204, 80%, 45%);
107
- --stsv-input--colorful__color--hover: hsl(204, 100%, 15%);
108
-
109
- --stsv-input--colorful__background-color--focus: hsl(204, 100%, 92%);
110
- --stsv-input--colorful__border-color--focus: hsl(204, 80%, 45%);
111
- --stsv-input--colorful__color--focus: hsl(204, 100%, 15%);
112
-
113
- --stsv-input--colorful__background-color--selected: hsl(204, 100%, 85%);
114
- --stsv-input--colorful__border-color--selected: hsl(204, 100%, 20%);
115
- --stsv-input--colorful__color--selected: hsl(204, 100%, 15%);
116
-
117
- /* ----- status ----- */
118
-
119
- --stsv-status--info__background-color: hsl(198, 100%, 90%);
120
- --stsv-status--info__border-color: hsl(198, 100%, 40%);
121
- --stsv-status--info__color: hsl(198, 100%, 40%);
122
-
123
- --stsv-status--success__background-color: hsl(146, 100%, 90%);
124
- --stsv-status--success__border-color: hsl(146, 100%, 30%);
125
- --stsv-status--success__color: hsl(146, 80%, 25%);
126
-
127
- --stsv-status--warning__background-color: hsl(39, 100%, 80%);
128
- --stsv-status--warning__border-color: hsl(39, 100%, 45%);
129
- --stsv-status--warning__color: hsl(39, 100%, 25%);
130
-
131
- --stsv-status--danger__background-color: hsl(5, 100%, 90%);
132
- --stsv-status--danger__border-color: hsl(5, 100%, 40%);
133
- --stsv-status--danger__color: hsl(5, 80%, 40%);
134
140
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@geoffcox/sterling-svelte-themes",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "author": "Geoff Cox",
5
5
  "description": "A modern theme for the sterling-svelte component library.",
6
6
  "license": "MIT",
package/css/sterling/Button.colorful.css DELETED
@@ -1,17 +0,0 @@
1
- .sterling-button.colorful {
2
- background-color: var(--stsv-button--colorful__background-color);
3
- border-color: var(--stsv-button--colorful__border-color);
4
- color: var(--stsv-button--colorful__color);
5
- }
6
-
7
- .sterling-button.colorful:hover {
8
- background-color: var(--stsv-button--colorful__background-color--hover);
9
- border-color: var(--stsv-button--colorful__border-color--hover);
10
- color: var(--stsv-button--colorful__color--hover);
11
- }
12
-
13
- .sterling-button.colorful:active {
14
- background-color: var(--stsv-button--colorful__background-color--active);
15
- border-color: var(--stsv-button--colorful__border-color--active);
16
- color: var(--stsv-button--colorful__color--active);
17
- }
package/css/sterling/Button.secondary.colorful.css DELETED
@@ -1,15 +0,0 @@
1
- .sterling-button.secondary.colorful {
2
- border-color: var(--stsv-button--colorful__border-color);
3
- color: var(--stsv-button--colorful__border-color);
4
- }
5
- .sterling-button.secondary.colorful:hover {
6
- background-color: var(--stsv-button--colorful__background-color--hover);
7
- border-color: var(--stsv-button--colorful__border-color--hover);
8
- color: var(--stsv-button--colorful__color--hover);
9
- }
10
-
11
- .sterling-button.secondary.colorful:active {
12
- background-color: var(--stsv-button--colorful__background-color--active);
13
- border-color: var(--stsv-button--colorful__border-color--active);
14
- color: var(--stsv-button--colorful__color--active);
15
- }
package/css/sterling/Button.tool.colorful.css DELETED
@@ -1,13 +0,0 @@
1
- .sterling-button.tool.colorful {
2
- color: var(--stsv-button--colorful__border-color);
3
- }
4
-
5
- .sterling-button.tool.colorful:hover {
6
- background-color: var(--stsv-button--colorful__background-color--hover);
7
- color: var(--stsv-button--colorful__color--hover);
8
- }
9
-
10
- .sterling-button.tool.colorful:active {
11
- background-color: var(--stsv-button--colorful__background-color--active);
12
- color: var(--stsv-button--colorful__color--active);
13
- }
package/css/sterling/Callout.colorful.css DELETED
@@ -1,5 +0,0 @@
1
- .sterling-callout.colorful {
2
- background-color: var(--stsv-button--colorful__background-color);
3
- border-color: var(--stsv-button--colorful__border-color);
4
- color: var(--stsv-button--colorful__color);
5
- }
package/css/sterling/Checkbox.colorful.css DELETED
@@ -1,17 +0,0 @@
1
- .sterling-checkbox.colorful .indicator {
2
- background-color: var(--stsv-input--colorful__background-color);
3
- border-color: var(--stsv-input--colorful__border-color);
4
- }
5
-
6
- .sterling-checkbox.colorful:not(.disabled):hover .indicator {
7
- background-color: var(--stsv-input--colorful__background-color--hover);
8
- border-color: var(--stsv-input--colorful__border-color--hover);
9
- }
10
-
11
- .sterling-checkbox.colorful .indicator::after {
12
- border-color: var(--stsv-input--colorful__color);
13
- }
14
-
15
- .sterling-checkbox.colorful:not(.disabled):hover input:checked + .indicator::after {
16
- border-color: var(--stsv-input--colorful__color--hover);
17
- }
package/css/sterling/Dropdown.colorful.css DELETED
@@ -1,23 +0,0 @@
1
- .sterling-dropdown.colorful {
2
- background-color: var(--stsv-input--colorful__background-color);
3
- border-color: var(--stsv-input--colorful__border-color);
4
- color: var(--stsv-input--colorful__color);
5
- }
6
-
7
- .sterling-dropdown.colorful:hover {
8
- background-color: var(--stsv-input--colorful__background-color--hover);
9
- border-color: var(--stsv-input--colorful__border-color--hover);
10
- color: var(--stsv-input--colorful__color--hover);
11
- }
12
-
13
- .sterling-dropdown.colorful:focus {
14
- background-color: var(--stsv-input--colorful__background-color--focus);
15
- border-color: var(--stsv-input--colorful__border-color--focus);
16
- color: var(--stsv-input--colorful__color--focus);
17
- }
18
-
19
- .sterling-dropdown-popup-content.colorful {
20
- background-color: var(--stsv-common--colorful__background-color);
21
- border-color: var(--stsv-common--colorful__border-color);
22
- color: var(--stsv-common--colorful__color);
23
- }
package/css/sterling/Input.colorful.css DELETED
@@ -1,22 +0,0 @@
1
- .sterling-input.colorful input {
2
- background-color: var(--stsv-input--colorful__background-color);
3
- border-bottom-color: var(--stsv-input--colorful__border-color);
4
- color: var(--stsv-input--colorful__color);
5
- }
6
-
7
- .sterling-input.colorful:hover input:not(:disabled) {
8
- background-color: var(--stsv-input--colorful__background-color--hover);
9
- border-bottom-color: var(--stsv-input--colorful__border-color--hover);
10
- color: var(--stsv-input--colorful__color--hover);
11
- }
12
-
13
- .sterling-input.colorful input:focus,
14
- .sterling-input.colorful:hover input:focus {
15
- background-color: var(--stsv-input--colorful__background-color--focus);
16
- border-bottom-color: var(--stsv-input--colorful__border-color--focus);
17
- color: var(--stsv-input--colorful__color--focus);
18
- }
19
-
20
- .sterling-input.colorful input::placeholder {
21
- color: var(--stsv-common--colorful__color--subtle);
22
- }
package/css/sterling/Label.boxed.colorful.css DELETED
@@ -1,21 +0,0 @@
1
- .sterling-label.boxed.colorful {
2
- background-color: var(--stsv-input--colorful__background-color);
3
- border-color: var(--stsv-input--colorful__border-color);
4
- }
5
-
6
- .sterling-label.boxed.colorful:not(.disabled):hover {
7
- background-color: var(--stsv-input--colorful__background-color--hover);
8
- border-color: var(--stsv-input--colorful__border-color--hover);
9
- color: var(--stsv-input--colorful__color--hover);
10
- }
11
-
12
- .sterling-label.boxed.colorful:focus-within,
13
- .sterling-label.boxed.colorful:focus-within:hover {
14
- background-color: var(--stsv-input--colorful__background-color--focus);
15
- border-color: var(--stsv-input--colorful__border-color--focus);
16
- color: var(--stsv-input--colorful__color--focus);
17
- }
18
-
19
- .sterling-label.boxed.colorful.using-keyboard:focus-within {
20
- outline-color: var(--stsv-common--colorful__outline-color);
21
- }
package/css/sterling/Label.colorful.css DELETED
@@ -1,3 +0,0 @@
1
- .sterling-label.colorful .text {
2
- color: var(--stsv-common--colorful__color--secondary);
3
- }
package/css/sterling/Link.colorful.css DELETED
@@ -1,15 +0,0 @@
1
- .sterling-link.colorful,
2
- .sterling-link.colorful:visited {
3
- border-bottom-color: var(--stsv-input--colorful__border-color);
4
- color: var(--stsv-input--colorful__color);
5
- }
6
-
7
- .sterling-link.colorful:hover {
8
- border-bottom-color: var(--stsv-input--colorful__border-color--hover);
9
- color: var(--stsv-input--colorful__color--hover);
10
- }
11
-
12
- .sterling-link.colorful:active {
13
- border-bottom-color: var(--stsv-input--colorful__border-color--selected);
14
- color: var(--stsv-input--colorful__color--active);
15
- }
package/css/sterling/Link.ghost.colorful.css DELETED
@@ -1,7 +0,0 @@
1
- .sterling-link.ghost.colorful:hover {
2
- border-bottom-color: var(--stsv-input--colorful__border-color--hover);
3
- }
4
-
5
- .sterling-link.ghost.colorful:active {
6
- border-bottom-color: var(--stsv-input--colorful__border-color--selected);
7
- }
package/css/sterling/Link.undecorated.colorful.css DELETED
@@ -1,8 +0,0 @@
1
- .sterling-link.undecorated.colorful,
2
- .sterling-link.undecorated.colorful:hover,
3
- .sterling-link.undecorated.colorful:active,
4
- .sterling-link.undecorated.colorful:visited {
5
- border-bottom-width: 0;
6
- border-bottom-color: transparent;
7
- text-decoration: none;
8
- }
package/css/sterling/Radio.colorful.css DELETED
@@ -1,18 +0,0 @@
1
- .sterling-radio.colorful .indicator {
2
- background-color: var(--stsv-input--colorful__background-color);
3
- border-color: var(--stsv-input--colorful__border-color);
4
- }
5
-
6
- .sterling-radio.colorful input:checked + .indicator {
7
- background-color: var(--stsv-input--colorful__background-color);
8
- border-color: var(--stsv-input--colorful__border-color);
9
- }
10
-
11
- .sterling-radio.colorful:not(.disabled):hover .indicator {
12
- background-color: var(--stsv-input--colorful__background-color--hover);
13
- border-color: var(--stsv-input--colorful__border-color--hover);
14
- }
15
-
16
- .sterling-radio.colorful input:checked + .indicator::after {
17
- background-color: var(--stsv-input--colorful__color);
18
- }
package/css/sterling/Select.colorful.css DELETED
@@ -1,24 +0,0 @@
1
- .sterling-select.colorful {
2
- background-color: var(--stsv-input--colorful__background-color);
3
- border-color: var(--stsv-input--colorful__border-color);
4
- color: var(--stsv-input--colorful__color);
5
- }
6
-
7
- .sterling-select.colorful:hover {
8
- background-color: var(--stsv-input--colorful__background-color--hover);
9
- border-color: var(--stsv-input--colorful__border-color--hover);
10
- color: var(--stsv-input--colorful__color--hover);
11
- }
12
-
13
- .sterling-select.colorful:focus {
14
- background-color: var(--stsv-input--colorful__background-color--focus);
15
- border-color: var(--stsv-input--colorful__border-color--focus);
16
- color: var(--stsv-input--colorful__color--focus);
17
- outline-color: var(--stsv-common--colorful__outline-color);
18
- }
19
-
20
- .sterling-select-popup-content.colorful {
21
- background-color: var(--stsv-common--colorful__background-color);
22
- border-color: var(--stsv-common--colorful__border-color);
23
- color: var(--stsv-common--colorful__color);
24
- }
package/css/sterling/Slider.colorful.css DELETED
@@ -1,11 +0,0 @@
1
- .sterling-slider.colorful .fill {
2
- background: var(--stsv-input--colorful__border-color--selected);
3
- position: absolute;
4
- transition: background-color 250ms, color 250ms, border-color 250ms;
5
- }
6
-
7
- .sterling-slider.colorful .thumb {
8
- background-color: var(--stsv-button--colorful__background-color);
9
- border-color: var(--stsv-button--colorful__border-color);
10
- color: var(--stsv-button--colorful__color);
11
- }
package/css/sterling/Switch.colorful.css DELETED
@@ -1,45 +0,0 @@
1
- /* ----- switch colorful ----- */
2
-
3
- .sterling-switch.colorful .switch {
4
- background-color: var(--stsv-input--colorful__background-color);
5
- border-color: var(--stsv-input--colorful__border-color);
6
- color: var(--stsv-input--colorful__color);
7
- }
8
-
9
- .sterling-switch.colorful:hover .switch {
10
- background-color: var(--stsv-input--colorful__background-color--hover);
11
- border-color: var(--stsv-input--colorful__border-color--hover);
12
- color: var(--stsv-input_--colorful_color--hover);
13
- }
14
-
15
- .sterling-switch.colorful input:focus-visible ~ .switch {
16
- background-color: var(--stsv-input--colorful__background-color--focus);
17
- border-color: var(--stsv-input--colorful__border-color--focus);
18
- color: var(--stsv-input--colorful__color--focus);
19
- }
20
-
21
- .sterling-switch.colorful input:checked ~ .switch,
22
- .sterling-switch.colorful input:checked:hover ~ .switch,
23
- .sterling-switch.colorful input:checked:focus-visible ~ .switch {
24
- background-color: var(--stsv-input--colorful__border-color--hover);
25
- }
26
-
27
- /* ----- thumb colorful ----- */
28
-
29
- .sterling-switch.colorful .thumb {
30
- background-color: var(--stsv-button--colorful__background-color);
31
- border-color: var(--stsv-button--colorful__border-color);
32
- color: var(--stsv-button--colorful__color);
33
- }
34
-
35
- .sterling-switch.colorful:hover .thumb {
36
- background-color: var(--stsv-button--colorful__background-color--hover);
37
- border-color: var(--stsv-button--colorful__border-color--hover);
38
- color: var(--stsv-button--colorful__color--hover);
39
- }
40
-
41
- .sterling-switch.colorful:active .thumb {
42
- background-color: var(--stsv-button--colorful__background-color--active);
43
- border-color: var(--stsv-button--colorful__border-color--active);
44
- color: var(--stsv-button--colorful__color--hover);
45
- }
package/css/sterling/Tab.colorful.css DELETED
@@ -1,13 +0,0 @@
1
- /* ----- indicator -----*/
2
-
3
- .sterling-tab.colorful:not(.selected):not(:active):hover .indicator {
4
- background-color: var(--stsv-input--colorful__border-color--hover);
5
- }
6
-
7
- .sterling-tab.colorful:active .indicator {
8
- background-color: var(--stsv-input--colorful__border-color--selected);
9
- }
10
-
11
- .sterling-tab.colorful.selected .indicator {
12
- background-color: var(--stsv-input--colorful__border-color--selected);
13
- }
package/css/sterling/TextArea.colorful.css DELETED
@@ -1,17 +0,0 @@
1
- .sterling-text-area.colorful textarea {
2
- background-color: var(--stsv-input--colorful__background-color);
3
- border-color: var(--stsv-input--colorful__border-color);
4
- color: var(--stsv-input--colorful__color);
5
- }
6
-
7
- .sterling-text-area.colorful textarea:hover {
8
- background-color: var(--stsv-input--colorful__background-color--hover);
9
- border-color: var(--stsv-input--colorful__border-color--hover);
10
- color: var(--stsv-input--colorful__color--hover);
11
- }
12
-
13
- .sterling-text-area.colorful textarea:focus {
14
- background-color: var(--stsv-input--colorful__background-color--focus);
15
- border-color: var(--stsv-input--colorful__border-color--focus);
16
- color: var(--stsv-input--colorful__color--focus);
17
- }
package/css/sterling/TreeItem.colorful.css DELETED
@@ -1,9 +0,0 @@
1
- .sterling-tree-item.colorful:not(.disabled):not(.selected) > .item:hover {
2
- background-color: var(--stsv-button--colorful__background-color--hover);
3
- color: var(--stsv-button--colorful__color--hover);
4
- }
5
-
6
- .sterling-tree-item.colorful:not(.disabled).selected > .item {
7
- background-color: var(--stsv-button--colorful__background-color--active);
8
- color: var(--stsv-button--colorful__color--active);
9
- }