@geoffcox/sterling-svelte-themes 1.0.5 → 2.0.0

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.
package/README.md CHANGED
@@ -10,6 +10,12 @@ To learn how to use this theme, please see the [Sterling Theme](https://geoffcox
10
10
  npm install @geoffcox/sterling-svelte-themes
11
11
  ```
12
12
 
13
+ ## Light and Dark Modes
14
+
15
+ Version 2.0 supports light and dark modes automatically.
16
+ A single set of CSS vars that leverage the light-dark() function to pick colors based on the color-scheme property
17
+ set on the root document element.
18
+
13
19
  ## Repository
14
20
 
15
21
  https://github.com/GeoffCox/sterling-svelte-themes
@@ -1,5 +1,5 @@
1
1
  /*
2
- * The Sterling Theme CSS variables supporting light-dark() automatically.
2
+ * The Sterling Theme supports light and dark modes automatically.
3
3
  *
4
4
  */
5
5
 
package/css/sterling.css CHANGED
@@ -1,5 +1,4 @@
1
- @import url("./sterling/light-mode.css");
2
- @import url("./sterling/dark-mode.css");
1
+ @import url("./sterling/vars.css");
3
2
 
4
3
  @import url("./sterling/Button.css");
5
4
  @import url("./sterling/Callout.css");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@geoffcox/sterling-svelte-themes",
3
- "version": "1.0.5",
3
+ "version": "2.0.0",
4
4
  "author": "Geoff Cox",
5
5
  "description": "A modern theme for the sterling-svelte component library.",
6
6
  "license": "MIT",
@@ -10,8 +10,8 @@
10
10
  "homepage": "https://github.com/GeoffCox/sterling-svelte-themes/blob/main/README.md",
11
11
  "keywords": [
12
12
  "svelte",
13
+ "svelte5",
13
14
  "svelte 5",
14
- "sveltekit",
15
15
  "design system",
16
16
  "sterling",
17
17
  "sterling-svelte",
@@ -28,7 +28,6 @@
28
28
  },
29
29
  "exports": {
30
30
  "./sterling.css": "./css/sterling.css",
31
- "./sterling-light-dark.css": "./css/sterling-light-dark.css",
32
31
  "./sterling/*.css": "./css/sterling/*.css"
33
32
  },
34
33
  "sideEffects": [
@@ -1,140 +0,0 @@
1
- .dark-mode {
2
- /* ----- common ----- */
3
-
4
- --stsv-common__background-color: hsl(0, 0%, 15%);
5
- --stsv-common__border-color: hsl(0, 0%, 92%);
6
- --stsv-common__color: hsl(0, 0%, 100%);
7
-
8
- /* ----- common outline ----- */
9
-
10
- --stsv-common__outline-color: hsl(0, 0%, 100%);
11
- --stsv-common__outline-offset: 0;
12
- --stsv-common__outline-style: solid;
13
- --stsv-common__outline-width: 2px;
14
-
15
- /* ----- common disabled ----- */
16
-
17
- --stsv-common--disabled__stripe-color: hsla(0, 0%, 0%, 0.2);
18
- --stsv-common--disabled__stripe-color--alt: hsla(0, 0%, 100%, 0.2);
19
- --stsv-common--disabled__stripe-angle: 135deg;
20
- --stsv-common--disabled__stripe-width: 3px;
21
-
22
- /* ----- common drop shadows ----- */
23
-
24
- --stsv-common__box-shadow: 2px 2px 4px 0px rgba(128, 128, 128, 0.7);
25
- --stsv-common__box-shadow--inset: 1px 1px 2px rgba(128, 128, 128, 0.7);
26
-
27
- /* ----- common reduced emphasis ----- */
28
-
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%);
35
-
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%);
50
-
51
- /* ----- button ----- */
52
-
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%);
122
-
123
- /* ----- input ----- */
124
-
125
- --stsv-input__background-color: hsl(0, 0%, 20%);
126
- --stsv-input__border-color: hsl(0, 0%, 92%);
127
- --stsv-input__color: hsl(0, 0%, 100%);
128
-
129
- --stsv-input__background-color--hover: hsl(0, 0%, 25%);
130
- --stsv-input__border-color--hover: hsl(0, 0%, 96%);
131
- --stsv-input__color--hover: hsl(0, 0%, 100%);
132
-
133
- --stsv-input__background-color--focus: hsl(0, 0%, 25%);
134
- --stsv-input__border-color--focus: hsl(0, 0%, 100%);
135
- --stsv-input__color--focus: hsl(0, 0%, 100%);
136
-
137
- --stsv-input__background-color--selected: hsl(0, 0%, 45%);
138
- --stsv-input__border-color--selected: hsl(0, 0%, 98%);
139
- --stsv-input__color--selected: hsl(0, 0%, 100%);
140
- }
@@ -1,140 +0,0 @@
1
- .light-mode {
2
- /* ----- common ----- */
3
-
4
- --stsv-common__background-color: hsl(0, 0%, 100%);
5
- --stsv-common__border-color: hsl(0, 0%, 45%);
6
- --stsv-common__color: hsl(0, 0%, 15%);
7
-
8
- /* ----- common outline ----- */
9
-
10
- --stsv-common__outline-color: hsl(0, 0%, 15%);
11
- --stsv-common__outline-offset: 0;
12
- --stsv-common__outline-style: solid;
13
- --stsv-common__outline-width: 2px;
14
-
15
- /* ----- common disabled ----- */
16
-
17
- --stsv-common--disabled__stripe-color: hsla(0, 0%, 0%, 0.2);
18
- --stsv-common--disabled__stripe-color--alt: hsla(0, 0%, 100%, 0.2);
19
- --stsv-common--disabled__stripe-angle: 135deg;
20
- --stsv-common--disabled__stripe-width: 3px;
21
-
22
- /* ----- common drop shadows ----- */
23
-
24
- --stsv-common__box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.4);
25
- --stsv-common__box-shadow--inset: inset 1px 1px 2px 0px hsl(0, 0%, 45%);
26
-
27
- /* ----- common reduced emphasis ----- */
28
-
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%);
35
-
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%);
50
-
51
- /* ----- button ----- */
52
-
53
- --stsv-button__background-color: hsl(0, 0%, 90%);
54
- --stsv-button__border-color: hsl(0, 0%, 45%);
55
- --stsv-button__color: hsl(0, 0%, 15%);
56
-
57
- --stsv-button__background-color--hover: hsl(0, 0%, 95%);
58
- --stsv-button__border-color--hover: hsl(0, 0%, 30%);
59
- --stsv-button__color--hover: hsl(0, 0%, 15%);
60
-
61
- --stsv-button__background-color--focus: hsl(0, 0%, 95%);
62
- --stsv-button__border-color--focus: hsl(0, 0%, 30%);
63
- --stsv-button__color--focus: hsl(0, 0%, 15%);
64
-
65
- --stsv-button__background-color--active: hsl(0, 0%, 75%);
66
- --stsv-button__border-color--active: hsl(0, 0%, 95%);
67
- --stsv-button__color--active: hsl(0, 0%, 12%);
68
-
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%);
122
-
123
- /* ----- input ----- */
124
-
125
- --stsv-input__background-color: hsl(0, 0%, 98%);
126
- --stsv-input__border-color: hsl(0, 0%, 60%);
127
- --stsv-input__color: hsl(0, 0%, 15%);
128
-
129
- --stsv-input__background-color--hover: hsl(0, 0%, 96%);
130
- --stsv-input__border-color--hover: hsl(0, 0%, 30%);
131
- --stsv-input__color--hover: hsl(0, 0%, 15%);
132
-
133
- --stsv-input__background-color--focus: hsl(0, 0%, 92%);
134
- --stsv-input__border-color--focus: hsl(0, 0%, 15%);
135
- --stsv-input__color--focus: hsl(0, 0%, 15%);
136
-
137
- --stsv-input__background-color--selected: hsl(0, 0%, 85%);
138
- --stsv-input__border-color--selected: hsl(0, 0%, 15%);
139
- --stsv-input__color--selected: hsl(0, 0%, 15%);
140
- }
@@ -1,31 +0,0 @@
1
- @import url("./sterling/light-dark.css");
2
-
3
- @import url("./sterling/Button.css");
4
- @import url("./sterling/Callout.css");
5
- @import url("./sterling/Checkbox.css");
6
- @import url("./sterling/Dialog.css");
7
- @import url("./sterling/Dropdown.css");
8
- @import url("./sterling/Input.css");
9
- @import url("./sterling/Label.css");
10
- @import url("./sterling/Link.css");
11
- @import url("./sterling/List.css");
12
- @import url("./sterling/ListItem.css");
13
- @import url("./sterling/Menu.css");
14
- @import url("./sterling/MenuBar.css");
15
- @import url("./sterling/MenuButton.css");
16
- @import url("./sterling/MenuItem.css");
17
- @import url("./sterling/MenuSeparator.css");
18
- @import url("./sterling/Pagination.css");
19
- @import url("./sterling/Popover.css");
20
- @import url("./sterling/Progress.css");
21
- @import url("./sterling/Radio.css");
22
- @import url("./sterling/Select.css");
23
- @import url("./sterling/Slider.css");
24
- @import url("./sterling/Switch.css");
25
- @import url("./sterling/Tab.css");
26
- @import url("./sterling/TabList.css");
27
- @import url("./sterling/TextArea.css");
28
- @import url("./sterling/Tooltip.css");
29
- @import url("./sterling/Tree.css");
30
- @import url("./sterling/TreeChevron.css");
31
- @import url("./sterling/TreeItem.css");