@geoffcox/sterling-svelte-themes 1.0.4 → 1.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 (5) hide show
  1. package/README.md +2 -0
  2. package/css/sterling/MenuItem.defaultItem.css +14 -7
  3. package/css/sterling/light-dark.css +152 -0
  4. package/css/sterling-light-dark.css +31 -0
  5. package/package.json +2 -1
package/README.md CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  A modern theme for the sterling-svelte component library.
4
4
 
5
+ To learn how to use this theme, please see the [Sterling Theme](https://geoffcox.github.io/docs/sterling-svelte/topics/theme") documentation.
6
+
5
7
  ## Installation
6
8
 
7
9
  ```
package/css/sterling/MenuItem.defaultItem.css CHANGED
@@ -1,3 +1,4 @@
1
+ .sterling-menu-item .default-item,
1
2
  .sterling-menu-item-display {
2
3
  align-items: center;
3
4
  justify-items: flex-start;
@@ -8,24 +9,23 @@
8
9
  position: relative;
9
10
  }
10
11
 
12
+ .sterling-menu-item .default-item .check,
11
13
  .sterling-menu-item-display .check {
12
14
  box-sizing: border-box;
13
15
  pointer-events: none;
14
16
  width: 20px;
15
17
  height: 20px;
16
18
  position: relative;
17
- transition:
18
- background-color 250ms,
19
- color 250ms,
20
- border-color 250ms;
19
+ transition: background-color 250ms, color 250ms, border-color 250ms;
21
20
  }
22
21
 
22
+ .sterling-menu-item .default-item .check.checkmark.checked::after,
23
23
  .sterling-menu-item-display .check.checkmark.checked::after {
24
24
  border-color: currentColor;
25
25
  border-style: solid;
26
26
  border-width: 0 0.2em 0.2em 0;
27
27
  box-sizing: border-box;
28
- content: '';
28
+ content: "";
29
29
  height: 0.8em;
30
30
  left: 45%;
31
31
  position: absolute;
@@ -36,10 +36,11 @@
36
36
  width: 0.4em;
37
37
  }
38
38
 
39
+ .sterling-menu-item .default-item .check.bullet.checked::after,
39
40
  .sterling-menu-item-display .check.bullet.checked::after {
40
41
  background-color: currentColor;
41
42
  border-radius: 10000px;
42
- content: '';
43
+ content: "";
43
44
  height: 0.5em;
44
45
  left: 45%;
45
46
  position: absolute;
@@ -49,11 +50,13 @@
49
50
  width: 0.5em;
50
51
  }
51
52
 
53
+ .sterling-menu-item .default-item .shortcut,
52
54
  .sterling-menu-item-display .shortcut {
53
55
  font-size: 0.8em;
54
56
  color: var(--stsv-common__color--secondary);
55
57
  }
56
58
 
59
+ .sterling-menu-item .default-item .chevron,
57
60
  .sterling-menu-item-display .chevron {
58
61
  position: relative;
59
62
  border: none;
@@ -63,9 +66,10 @@
63
66
  transform-origin: 50% 50%;
64
67
  }
65
68
 
69
+ .sterling-menu-item .default-item .chevron.has-children::after,
66
70
  .sterling-menu-item-display .chevron.has-children::after {
67
71
  position: absolute;
68
- content: '';
72
+ content: "";
69
73
  top: 50%;
70
74
  left: 50%;
71
75
  width: 7px;
@@ -76,8 +80,11 @@
76
80
  }
77
81
 
78
82
  @media (prefers-reduced-motion) {
83
+ .sterling-menu-item .default-item::after,
79
84
  .sterling-menu-item-display::after,
85
+ .sterling-menu-item .default-item .check,
80
86
  .sterling-menu-item-display .check,
87
+ .sterling-menu-item .default-item .check::after,
81
88
  .sterling-menu-item-display .check::after {
82
89
  transition: none;
83
90
  }
package/css/sterling/light-dark.css ADDED
@@ -0,0 +1,152 @@
1
+ /*
2
+ * The Sterling Theme CSS variables supporting light-dark() automatically.
3
+ *
4
+ */
5
+
6
+ :root {
7
+ color-scheme: light dark;
8
+ }
9
+
10
+ :root,
11
+ .sterling-theme {
12
+ /* ----- common ----- */
13
+
14
+ --stsv-common__background-color: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 15%));
15
+ --stsv-common__border-color: light-dark(hsl(0, 0%, 45%), hsl(0, 0%, 92%));
16
+ --stsv-common__color: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 100%));
17
+
18
+ /* ----- common outline ----- */
19
+
20
+ --stsv-common__outline-color: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 100%));
21
+ --stsv-common__outline-offset: 0;
22
+ --stsv-common__outline-style: solid;
23
+ --stsv-common__outline-width: 2px;
24
+
25
+ /* ----- common disabled ----- */
26
+
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;
31
+
32
+ /* ----- common drop shadows ----- */
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);
38
+
39
+ /* ----- common reduced emphasis ----- */
40
+
41
+ --stsv-common__background-color--secondary: light-dark(hsl(0, 0%, 92%), hsl(0, 0%, 20%));
42
+ --stsv-common__color--secondary: light-dark(hsl(0, 0%, 45%), hsl(0, 0%, 60%));
43
+ --stsv-common__background-color--subtle: light-dark(hsl(0, 0%, 96%), hsl(0, 0%, 15%));
44
+ --stsv-common__color--subtle: light-dark(hsl(0, 0%, 75%), hsl(0, 0%, 45%));
45
+ --stsv-common__background-color--faint: light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 12%));
46
+ --stsv-common__color--faint: light-dark(hsl(0, 0%, 92%), hsl(0, 0%, 30%));
47
+
48
+ /* ----- common colors ----- */
49
+
50
+ --stsv-common__background-color--info: light-dark(hsl(200, 100%, 90%), hsl(200, 100%, 25%));
51
+ --stsv-common__border-color--info: light-dark(hsl(200, 100%, 40%), hsl(200, 100%, 80%));
52
+ --stsv-common__color--info: light-dark(hsl(200, 100%, 40%), hsl(200, 100%, 80%));
53
+ --stsv-common__background-color--success: light-dark(hsl(146, 100%, 90%), hsl(146, 100%, 25%));
54
+ --stsv-common__border-color--success: light-dark(hsl(146, 100%, 30%), hsl(146, 100%, 80%));
55
+ --stsv-common__color--success: light-dark(hsl(146, 80%, 25%), hsl(146, 100%, 80%));
56
+ --stsv-common__background-color--warning: light-dark(hsl(45, 100%, 80%), hsl(45, 100%, 25%));
57
+ --stsv-common__border-color--warning: light-dark(hsl(45, 100%, 45%), hsl(45, 100%, 80%));
58
+ --stsv-common__color--warning: light-dark(hsl(45, 100%, 25%), hsl(45, 100%, 80%));
59
+ --stsv-common__background-color--error: light-dark(hsl(0, 100%, 90%), hsl(0, 100%, 25%));
60
+ --stsv-common__border-color--error: light-dark(hsl(0, 100%, 40%), hsl(0, 100%, 80%));
61
+ --stsv-common__color--error: light-dark(hsl(0, 80%, 40%), hsl(0, 100%, 80%));
62
+
63
+ /* ----- button ----- */
64
+
65
+ --stsv-button__background-color: light-dark(hsl(0, 0%, 90%), hsl(0, 0%, 20%));
66
+ --stsv-button__border-color: light-dark(hsl(0, 0%, 45%), hsl(0, 0%, 80%));
67
+ --stsv-button__color: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 85%));
68
+
69
+ --stsv-button__background-color--hover: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 25%));
70
+ --stsv-button__border-color--hover: light-dark(hsl(0, 0%, 30%), hsl(0, 0%, 80%));
71
+ --stsv-button__color--hover: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 85%));
72
+
73
+ --stsv-button__background-color--focus: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 25%));
74
+ --stsv-button__border-color--focus: light-dark(hsl(0, 0%, 30%), hsl(0, 0%, 80%));
75
+ --stsv-button__color--focus: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 85%));
76
+
77
+ --stsv-button__background-color--active: light-dark(hsl(0, 0%, 75%), hsl(0, 0%, 45%));
78
+ --stsv-button__border-color--active: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 10%));
79
+ --stsv-button__color--active: light-dark(hsl(0, 0%, 12%), hsl(0, 0%, 15%));
80
+
81
+ /* ----- button colors ----- */
82
+
83
+ --stsv-button__background-color--blue: light-dark(hsl(200, 100%, 40%), hsl(200, 100%, 10%));
84
+ --stsv-button__border-color--blue: light-dark(hsl(200, 100%, 30%), hsl(200, 100%, 50%));
85
+ --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%));
95
+
96
+ --stsv-button__background-color--green: light-dark(hsl(146, 100%, 30%), hsl(146, 100%, 10%));
97
+ --stsv-button__border-color--green: light-dark(hsl(146, 100%, 25%), hsl(146, 100%, 30%));
98
+ --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%));
108
+
109
+ --stsv-button__background-color--orange: light-dark(hsl(45, 100%, 60%), hsl(45, 100%, 10%));
110
+ --stsv-button__border-color--orange: light-dark(hsl(45, 100%, 50%), hsl(45, 100%, 40%));
111
+ --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%));
121
+
122
+ --stsv-button__background-color--red: light-dark(hsl(0, 80%, 40%), hsl(0, 100%, 10%));
123
+ --stsv-button__border-color--red: light-dark(hsl(0, 80%, 30%), hsl(0, 100%, 30%));
124
+ --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%));
134
+
135
+ /* ----- input ----- */
136
+
137
+ --stsv-input__background-color: light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 20%));
138
+ --stsv-input__border-color: light-dark(hsl(0, 0%, 60%), hsl(0, 0%, 92%));
139
+ --stsv-input__color: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 100%));
140
+
141
+ --stsv-input__background-color--hover: light-dark(hsl(0, 0%, 96%), hsl(0, 0%, 25%));
142
+ --stsv-input__border-color--hover: light-dark(hsl(0, 0%, 30%), hsl(0, 0%, 96%));
143
+ --stsv-input__color--hover: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 100%));
144
+
145
+ --stsv-input__background-color--focus: light-dark(hsl(0, 0%, 92%), hsl(0, 0%, 25%));
146
+ --stsv-input__border-color--focus: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 100%));
147
+ --stsv-input__color--focus: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 100%));
148
+
149
+ --stsv-input__background-color--selected: light-dark(hsl(0, 0%, 85%), hsl(0, 0%, 45%));
150
+ --stsv-input__border-color--selected: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 98%));
151
+ --stsv-input__color--selected: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 100%));
152
+ }
package/css/sterling-light-dark.css ADDED
@@ -0,0 +1,31 @@
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");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@geoffcox/sterling-svelte-themes",
3
- "version": "1.0.4",
3
+ "version": "1.0.5",
4
4
  "author": "Geoff Cox",
5
5
  "description": "A modern theme for the sterling-svelte component library.",
6
6
  "license": "MIT",
@@ -28,6 +28,7 @@
28
28
  },
29
29
  "exports": {
30
30
  "./sterling.css": "./css/sterling.css",
31
+ "./sterling-light-dark.css": "./css/sterling-light-dark.css",
31
32
  "./sterling/*.css": "./css/sterling/*.css"
32
33
  },
33
34
  "sideEffects": [