@geoffcox/sterling-svelte-themes 2.0.3 → 2.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/README.md +21 -0
  2. package/css/sterling/Autocomplete.base.css +2 -2
  3. package/css/sterling/Button.base.css +5 -5
  4. package/css/sterling/Button.colors.css +52 -52
  5. package/css/sterling/Button.disabled.css +14 -18
  6. package/css/sterling/Button.secondary.colors.css +52 -52
  7. package/css/sterling/Button.secondary.css +7 -3
  8. package/css/sterling/Button.tool.colors.css +40 -40
  9. package/css/sterling/Button.tool.css +4 -4
  10. package/css/sterling/Callout.base.css +4 -4
  11. package/css/sterling/Checkbox.base.css +9 -6
  12. package/css/sterling/Checkbox.disabled.css +11 -21
  13. package/css/sterling/Dialog.base.css +3 -2
  14. package/css/sterling/Dropdown.base.css +6 -6
  15. package/css/sterling/Dropdown.disabled.css +4 -25
  16. package/css/sterling/Input.base.css +1 -9
  17. package/css/sterling/Input.disabled.css +5 -34
  18. package/css/sterling/Label.base.css +2 -2
  19. package/css/sterling/Label.boxed.css +6 -2
  20. package/css/sterling/List.base.css +3 -25
  21. package/css/sterling/List.disabled.css +4 -4
  22. package/css/sterling/ListItem.disabled.css +7 -23
  23. package/css/sterling/Menu.base.css +2 -2
  24. package/css/sterling/MenuItem.base.css +3 -18
  25. package/css/sterling/MenuItem.css +1 -1
  26. package/css/sterling/MenuItem.defaultItem.css +1 -1
  27. package/css/sterling/MenuItem.disabled.css +6 -0
  28. package/css/sterling/MenuSeparator.base.css +1 -1
  29. package/css/sterling/Pagination.button.css +1 -1
  30. package/css/sterling/Pagination.input.css +3 -3
  31. package/css/sterling/Popover.css +1 -0
  32. package/css/sterling/Progress.base.css +1 -1
  33. package/css/sterling/Progress.css +0 -1
  34. package/css/sterling/Radio.base.css +2 -2
  35. package/css/sterling/Radio.disabled.css +12 -22
  36. package/css/sterling/Select.base.css +6 -6
  37. package/css/sterling/Select.disabled.css +5 -22
  38. package/css/sterling/Slider.base.css +11 -10
  39. package/css/sterling/Slider.disabled.css +8 -23
  40. package/css/sterling/Switch.base.css +15 -14
  41. package/css/sterling/Switch.disabled.css +15 -26
  42. package/css/sterling/Tab.base.css +5 -5
  43. package/css/sterling/Tab.disabled.css +5 -30
  44. package/css/sterling/TabList.base.css +1 -1
  45. package/css/sterling/TextArea.base.css +4 -4
  46. package/css/sterling/TextArea.disabled.css +5 -26
  47. package/css/sterling/Tree.base.css +4 -4
  48. package/css/sterling/Tree.disabled.css +5 -26
  49. package/css/sterling/TreeItem.disabled.css +4 -29
  50. package/css/sterling/vars.css +53 -46
  51. package/package.json +1 -1
  52. package/css/sterling/MenuItem.defaultItem.disabled.css +0 -28
  53. package/css/sterling/Progress.disabled.css +0 -17
package/css/sterling/vars.css CHANGED
@@ -4,7 +4,7 @@
4
4
  */
5
5
 
6
6
  :root {
7
- color-scheme: light dark;
7
+ color-scheme: light dark;
8
8
  }
9
9
 
10
10
  :root,
@@ -13,6 +13,7 @@
13
13
 
14
14
  --stsv-common__background-color: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 15%));
15
15
  --stsv-common__border-color: light-dark(hsl(0, 0%, 45%), hsl(0, 0%, 92%));
16
+ --stsv-common__border-width: 1px;
16
17
  --stsv-common__color: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 100%));
17
18
 
18
19
  /* ----- common outline ----- */
@@ -20,21 +21,17 @@
20
21
  --stsv-common__outline-color: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 100%));
21
22
  --stsv-common__outline-offset: 0;
22
23
  --stsv-common__outline-style: solid;
23
- --stsv-common__outline-width: 2px;
24
+ --stsv-common__outline-width: 1px;
24
25
 
25
26
  /* ----- common disabled ----- */
26
27
 
27
- --stsv-common--disabled__stripe-color: light-dark(hsla(0, 0%, 0%, 0.2), hsla(0, 0%, 0%, 0.2));
28
- --stsv-common--disabled__stripe-color--alt: light-dark(hsla(0, 0%, 100%, 0.2), hsla(0, 0%, 100%, 0.2));
29
- --stsv-common--disabled__stripe-angle: 135deg;
30
- --stsv-common--disabled__stripe-width: 3px;
28
+ --stsv-common__background-color--disabled: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 25%));
29
+ --stsv-common__border-color--disabled: light-dark(hsl(0, 0%, 80%), hsl(0, 0%, 30%));
30
+ --stsv-common__color--disabled: light-dark(hsl(0, 0%, 80%), hsl(0, 0%, 30%));
31
31
 
32
32
  /* ----- common drop shadows ----- */
33
33
 
34
- --stsv-common__box-shadow__color: light-dark(rgba(0, 0, 0, 0.4), gba(128, 128, 128, 0.7));
35
- --stsv-common__box-shadow__color--inset: light-dark(rgba(0, 0, 0, 0.45), gba(128, 128, 128, 0.7));
36
- --stsv-common__box-shadow: 2px 2px 4px 0px var(--stsv-common__box-shadow__color);
37
- --stsv-common__box-shadow--inset: inset 1px 1px 2px 0px var(--stsv-common__box-shadow__color--inset);
34
+ --stsv-common__drop-shadow: drop-shadow(2px 2px 1px light-dark(rgba(0, 0, 0, 0.2), rgba(128, 128, 128, 0.2)));
38
35
 
39
36
  /* ----- common reduced emphasis ----- */
40
37
 
@@ -64,6 +61,7 @@
64
61
 
65
62
  --stsv-button__background-color: light-dark(hsl(0, 0%, 90%), hsl(0, 0%, 20%));
66
63
  --stsv-button__border-color: light-dark(hsl(0, 0%, 45%), hsl(0, 0%, 80%));
64
+ --stsv-button__border-width: 1px;
67
65
  --stsv-button__color: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 85%));
68
66
 
69
67
  --stsv-button__background-color--hover: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 25%));
@@ -78,64 +76,69 @@
78
76
  --stsv-button__border-color--active: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 10%));
79
77
  --stsv-button__color--active: light-dark(hsl(0, 0%, 12%), hsl(0, 0%, 15%));
80
78
 
79
+ --stsv-button__background-color--disabled: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 25%));
80
+ --stsv-button__border-color--disabled: light-dark(hsl(0, 0%, 80%), hsl(0, 0%, 30%));
81
+ --stsv-button__color--disabled: light-dark(hsl(0, 0%, 80%), hsl(0, 0%, 30%));
82
+
81
83
  /* ----- button colors ----- */
82
84
 
83
85
  --stsv-button__background-color--blue: light-dark(hsl(200, 100%, 40%), hsl(200, 100%, 10%));
84
86
  --stsv-button__border-color--blue: light-dark(hsl(200, 100%, 30%), hsl(200, 100%, 50%));
85
87
  --stsv-button__color--blue: light-dark(hsl(200, 100%, 95%), hsl(200, 100%, 60%));
86
- --stsv-button__background-color--blue-hover: light-dark(hsl(200, 100%, 50%), hsl(200, 100%, 15%));
87
- --stsv-button__border-color--blue-hover: light-dark(hsl(200, 100%, 30%), hsl(200, 100%, 50%));
88
- --stsv-button__color--blue-hover: light-dark(hsl(200, 100%, 95%), hsl(200, 100%, 60%));
89
- --stsv-button__background-color--blue-focus: light-dark(hsl(200, 100%, 50%), hsl(200, 100%, 15%));
90
- --stsv-button__border-color--blue-focus: light-dark(hsl(200, 100%, 30%), hsl(200, 100%, 50%));
91
- --stsv-button__color--blue-focus: light-dark(hsl(200, 100%, 95%), hsl(200, 100%, 60%));
92
- --stsv-button__background-color--blue-active: light-dark(hsl(200, 100%, 40%), hsl(200, 100%, 30%));
93
- --stsv-button__border-color--blue-active: light-dark(hsl(200, 100%, 60%), hsl(200, 100%, 10%));
94
- --stsv-button__color--blue-active: light-dark(hsl(200, 100%, 95%), hsl(200, 100%, 15%));
88
+ --stsv-button__background-color--blue--hover: light-dark(hsl(200, 100%, 50%), hsl(200, 100%, 15%));
89
+ --stsv-button__border-color--blue--hover: light-dark(hsl(200, 100%, 30%), hsl(200, 100%, 50%));
90
+ --stsv-button__color--blue--hover: light-dark(hsl(200, 100%, 95%), hsl(200, 100%, 60%));
91
+ --stsv-button__background-color--blue--focus: light-dark(hsl(200, 100%, 50%), hsl(200, 100%, 15%));
92
+ --stsv-button__border-color--blue--focus: light-dark(hsl(200, 100%, 30%), hsl(200, 100%, 50%));
93
+ --stsv-button__color--blue--focus: light-dark(hsl(200, 100%, 95%), hsl(200, 100%, 60%));
94
+ --stsv-button__background-color--blue--active: light-dark(hsl(200, 100%, 40%), hsl(200, 100%, 30%));
95
+ --stsv-button__border-color--blue--active: light-dark(hsl(200, 100%, 60%), hsl(200, 100%, 10%));
96
+ --stsv-button__color--blue--active: light-dark(hsl(200, 100%, 95%), hsl(200, 100%, 15%));
95
97
 
96
98
  --stsv-button__background-color--green: light-dark(hsl(146, 100%, 30%), hsl(146, 100%, 10%));
97
99
  --stsv-button__border-color--green: light-dark(hsl(146, 100%, 25%), hsl(146, 100%, 30%));
98
100
  --stsv-button__color--green: light-dark(hsl(146, 100%, 95%), hsl(146, 100%, 40%));
99
- --stsv-button__background-color--green-hover: light-dark(hsl(146, 100%, 40%), hsl(146, 100%, 15%));
100
- --stsv-button__border-color--green-hover: light-dark(hsl(146, 100%, 25%), hsl(146, 100%, 30%));
101
- --stsv-button__color--green-hover: light-dark(hsl(146, 100%, 95%), hsl(146, 100%, 40%));
102
- --stsv-button__background-color--green-focus: light-dark(hsl(146, 100%, 40%), hsl(146, 100%, 15%));
103
- --stsv-button__border-color--green-focus: light-dark(hsl(146, 100%, 25%), hsl(146, 100%, 30%));
104
- --stsv-button__color--green-focus: light-dark(hsl(146, 100%, 95%), hsl(146, 100%, 40%));
105
- --stsv-button__background-color--green-active: light-dark(hsl(146, 100%, 30%), hsl(146, 100%, 25%));
106
- --stsv-button__border-color--green-active: light-dark(hsl(146, 100%, 40%), hsl(146, 100%, 10%));
107
- --stsv-button__color--green-active: light-dark(hsl(146, 100%, 95%), hsl(146, 100%, 15%));
101
+ --stsv-button__background-color--green--hover: light-dark(hsl(146, 100%, 40%), hsl(146, 100%, 15%));
102
+ --stsv-button__border-color--green--hover: light-dark(hsl(146, 100%, 25%), hsl(146, 100%, 30%));
103
+ --stsv-button__color--green--hover: light-dark(hsl(146, 100%, 95%), hsl(146, 100%, 40%));
104
+ --stsv-button__background-color--green--focus: light-dark(hsl(146, 100%, 40%), hsl(146, 100%, 15%));
105
+ --stsv-button__border-color--green--focus: light-dark(hsl(146, 100%, 25%), hsl(146, 100%, 30%));
106
+ --stsv-button__color--green--focus: light-dark(hsl(146, 100%, 95%), hsl(146, 100%, 40%));
107
+ --stsv-button__background-color--green--active: light-dark(hsl(146, 100%, 30%), hsl(146, 100%, 25%));
108
+ --stsv-button__border-color--green--active: light-dark(hsl(146, 100%, 40%), hsl(146, 100%, 10%));
109
+ --stsv-button__color--green--active: light-dark(hsl(146, 100%, 95%), hsl(146, 100%, 15%));
108
110
 
109
111
  --stsv-button__background-color--orange: light-dark(hsl(45, 100%, 60%), hsl(45, 100%, 10%));
110
112
  --stsv-button__border-color--orange: light-dark(hsl(45, 100%, 50%), hsl(45, 100%, 40%));
111
113
  --stsv-button__color--orange: light-dark(hsl(45, 25%, 25%), hsl(45, 100%, 50%));
112
- --stsv-button__background-color--orange-hover: light-dark(hsl(45, 100%, 70%), hsl(45, 100%, 15%));
113
- --stsv-button__border-color--orange-hover: light-dark(hsl(45, 100%, 50%), hsl(45, 100%, 40%));
114
- --stsv-button__color--orange-hover: light-dark(hsl(45, 25%, 25%), hsl(45, 100%, 50%));
115
- --stsv-button__background-color--orange-focus: light-dark(hsl(45, 100%, 70%), hsl(45, 100%, 15%));
116
- --stsv-button__border-color--orange-focus: light-dark(hsl(45, 100%, 50%), hsl(45, 100%, 40%));
117
- --stsv-button__color--orange-focus: light-dark(hsl(45, 25%, 25%), hsl(45, 100%, 50%));
118
- --stsv-button__background-color--orange-active: light-dark(hsl(45, 100%, 60%), hsl(45, 100%, 30%));
119
- --stsv-button__border-color--orange-active: light-dark(hsl(45, 100%, 70%), hsl(45, 100%, 10%));
120
- --stsv-button__color--orange-active: light-dark(hsl(45, 25%, 25%), hsl(45, 100%, 15%));
114
+ --stsv-button__background-color--orange--hover: light-dark(hsl(45, 100%, 70%), hsl(45, 100%, 15%));
115
+ --stsv-button__border-color--orange--hover: light-dark(hsl(45, 100%, 50%), hsl(45, 100%, 40%));
116
+ --stsv-button__color--orange--hover: light-dark(hsl(45, 25%, 25%), hsl(45, 100%, 50%));
117
+ --stsv-button__background-color--orange--focus: light-dark(hsl(45, 100%, 70%), hsl(45, 100%, 15%));
118
+ --stsv-button__border-color--orange--focus: light-dark(hsl(45, 100%, 50%), hsl(45, 100%, 40%));
119
+ --stsv-button__color--orange--focus: light-dark(hsl(45, 25%, 25%), hsl(45, 100%, 50%));
120
+ --stsv-button__background-color--orange--active: light-dark(hsl(45, 100%, 60%), hsl(45, 100%, 30%));
121
+ --stsv-button__border-color--orange--active: light-dark(hsl(45, 100%, 70%), hsl(45, 100%, 10%));
122
+ --stsv-button__color--orange--active: light-dark(hsl(45, 25%, 25%), hsl(45, 100%, 15%));
121
123
 
122
124
  --stsv-button__background-color--red: light-dark(hsl(0, 80%, 40%), hsl(0, 100%, 10%));
123
125
  --stsv-button__border-color--red: light-dark(hsl(0, 80%, 30%), hsl(0, 100%, 30%));
124
126
  --stsv-button__color--red: light-dark(hsl(0, 100%, 95%), hsl(0, 100%, 40%));
125
- --stsv-button__background-color--red-hover: light-dark(hsl(0, 80%, 50%), hsl(0, 100%, 15%));
126
- --stsv-button__border-color--red-hover: light-dark(hsl(0, 80%, 30%), hsl(0, 100%, 30%));
127
- --stsv-button__color--red-hover: light-dark(hsl(0, 100%, 95%), hsl(0, 100%, 40%));
128
- --stsv-button__background-color--red-focus: light-dark(hsl(0, 80%, 50%), hsl(0, 100%, 15%));
129
- --stsv-button__border-color--red-focus: light-dark(hsl(0, 80%, 30%), hsl(0, 100%, 30%));
130
- --stsv-button__color--red-focus: light-dark(hsl(0, 100%, 95%), hsl(0, 100%, 40%));
131
- --stsv-button__background-color--red-active: light-dark(hsl(0, 80%, 40%), hsl(0, 100%, 25%));
132
- --stsv-button__border-color--red-active: light-dark(hsl(0, 80%, 50%), hsl(0, 100%, 10%));
133
- --stsv-button__color--red-active: light-dark(hsl(0, 100%, 95%), hsl(0, 100%, 15%));
127
+ --stsv-button__background-color--red--hover: light-dark(hsl(0, 80%, 50%), hsl(0, 100%, 15%));
128
+ --stsv-button__border-color--red--hover: light-dark(hsl(0, 80%, 30%), hsl(0, 100%, 30%));
129
+ --stsv-button__color--red--hover: light-dark(hsl(0, 100%, 95%), hsl(0, 100%, 40%));
130
+ --stsv-button__background-color--red--focus: light-dark(hsl(0, 80%, 50%), hsl(0, 100%, 15%));
131
+ --stsv-button__border-color--red--focus: light-dark(hsl(0, 80%, 30%), hsl(0, 100%, 30%));
132
+ --stsv-button__color--red--focus: light-dark(hsl(0, 100%, 95%), hsl(0, 100%, 40%));
133
+ --stsv-button__background-color--red--active: light-dark(hsl(0, 80%, 40%), hsl(0, 100%, 25%));
134
+ --stsv-button__border-color--red--active: light-dark(hsl(0, 80%, 50%), hsl(0, 100%, 10%));
135
+ --stsv-button__color--red--active: light-dark(hsl(0, 100%, 95%), hsl(0, 100%, 15%));
134
136
 
135
137
  /* ----- input ----- */
136
138
 
137
139
  --stsv-input__background-color: light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 20%));
138
140
  --stsv-input__border-color: light-dark(hsl(0, 0%, 60%), hsl(0, 0%, 92%));
141
+ --stsv-input__border-width: 1px;
139
142
  --stsv-input__color: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 100%));
140
143
 
141
144
  --stsv-input__background-color--hover: light-dark(hsl(0, 0%, 96%), hsl(0, 0%, 25%));
@@ -149,4 +152,8 @@
149
152
  --stsv-input__background-color--selected: light-dark(hsl(0, 0%, 85%), hsl(0, 0%, 45%));
150
153
  --stsv-input__border-color--selected: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 98%));
151
154
  --stsv-input__color--selected: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 100%));
155
+
156
+ --stsv-input__background-color--disabled: light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 20%));
157
+ --stsv-input__border-color--disabled: light-dark(hsl(0, 0%, 90%), hsl(0, 0%, 25%));
158
+ --stsv-input__color--disabled: light-dark(hsl(0, 0%, 80%), hsl(0, 0%, 30%));
152
159
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@geoffcox/sterling-svelte-themes",
3
- "version": "2.0.3",
3
+ "version": "2.0.5",
4
4
  "author": "Geoff Cox",
5
5
  "description": "A modern theme for the sterling-svelte component library.",
6
6
  "license": "MIT",
package/css/sterling/MenuItem.defaultItem.disabled.css DELETED
@@ -1,28 +0,0 @@
1
- .sterling-menu-item-display.disabled {
2
- cursor: not-allowed;
3
- outline: none;
4
- }
5
-
6
- .sterling-menu-item-display::after {
7
- background: repeating-linear-gradient(
8
- var(--stsv-common--disabled__stripe-angle),
9
- var(--stsv-common--disabled__stripe-color),
10
- var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
11
- var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
12
- var(--stsv-common--disabled__stripe-color--alt)
13
- calc(2 * var(--stsv-common--disabled__stripe-width))
14
- );
15
- bottom: 0;
16
- content: '';
17
- left: 0;
18
- opacity: 0;
19
- position: absolute;
20
- right: 0;
21
- top: 0;
22
- pointer-events: none;
23
- transition: opacity 250ms;
24
- }
25
-
26
- .sterling-menu-item-display.disabled::after {
27
- opacity: 1;
28
- }
package/css/sterling/Progress.disabled.css DELETED
@@ -1,17 +0,0 @@
1
- .sterling-progress.disabled::after {
2
- content: '';
3
- position: absolute;
4
- left: 0;
5
- right: 0;
6
- top: 0;
7
- bottom: 0;
8
- background: repeating-linear-gradient(
9
- var(--stsv-common--disabled__stripe-angle),
10
- var(--stsv-common--disabled__stripe-color),
11
- var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
12
- var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
13
- var(--stsv-common--disabled__stripe-color--alt)
14
- calc(2 * var(--stsv-common--disabled__stripe-width))
15
- );
16
- pointer-events: none;
17
- }