@glowhop/styles-tour 1.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.
Files changed (6) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/LICENSE +22 -0
  3. package/README.md +36 -0
  4. package/default.css +284 -0
  5. package/default.css.d.ts +3 -0
  6. package/package.json +39 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,7 @@
1
+ # @glowhop/styles-tour
2
+
3
+ ## 1.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - e6da5bf: GlowTour.js V.1.0.0 release
package/LICENSE ADDED
@@ -0,0 +1,22 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Glowhop
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
22
+
package/README.md ADDED
@@ -0,0 +1,36 @@
1
+ # @glowhop/styles-tour
2
+
3
+ ESM-only CSS package. Import the default theme (light and dark):
4
+
5
+ Compatibility: CSS-only package; no framework version or runtime SSR surface applies. Hydration is not applicable.
6
+
7
+ ```ts
8
+ import "@glowhop/styles-tour/default.css";
9
+ ```
10
+
11
+ The theme follows `prefers-color-scheme`. To force one, set `data-glow-tour-theme` to
12
+ `light` or `dark` on any ancestor of the tour — `<html>` for the whole page, a wrapper for
13
+ a single tour:
14
+
15
+ ```html
16
+ <html data-glow-tour-theme="dark">
17
+ ```
18
+
19
+ Styles are scoped to `[data-glow-tour-root]`; tokens are declared at zero specificity on
20
+ `:where(:root)`, so they can be overridden from any ancestor of the tour:
21
+
22
+ ```css
23
+ .onboarding { --glow-tour-color-accent: #0b6; --glow-tour-popover-width: 420px; }
24
+ ```
25
+
26
+ | Token | Purpose |
27
+ | --- | --- |
28
+ | `--glow-tour-color-surface`, `--glow-tour-color-surface-muted` | surfaces |
29
+ | `--glow-tour-color-text`, `--glow-tour-color-text-muted`, `--glow-tour-color-border` | text and borders |
30
+ | `--glow-tour-color-accent`, `--glow-tour-color-accent-hover`, `--glow-tour-color-accent-active`, `--glow-tour-color-on-accent` | controls and focus |
31
+ | `--glow-tour-spacing`, `--glow-tour-radius`, `--glow-tour-shadow` | shape and spacing |
32
+ | `--glow-tour-overlay-color` | backdrop fill (its opacity is set per step, not by CSS) |
33
+ | `--glow-tour-popover-width`, `--glow-tour-viewport-gap`, `--glow-tour-control-height` | layout |
34
+ | `--glow-tour-transition-duration`, `--glow-tour-transition-easing` | motion |
35
+
36
+ Popover content scrolls inside the available height while its arrow remains visible.
package/default.css ADDED
@@ -0,0 +1,284 @@
1
+ /*
2
+ * Theme tokens.
3
+ *
4
+ * Declared at `:where(:root)` rather than on the tour root, and at zero
5
+ * specificity, so that every documented way to re-theme GlowTour keeps working:
6
+ * an override on any ancestor of the tour (`.onboarding { --glow-tour-*: … }`)
7
+ * wins by proximity, and an override on `:root` itself wins on specificity.
8
+ * Declaring these on `[data-glow-tour-root]` would silently beat the first, and
9
+ * declaring them on a bare `:root` would silently beat the second.
10
+ *
11
+ * `light-dark()` is deliberately not used: it resolves against the `color-scheme`
12
+ * property, which the host page owns and most apps never set — an unset
13
+ * `color-scheme` yields the light value even on a dark OS. A media query plus an
14
+ * attribute we own keeps the default OS-aware without depending on a property the
15
+ * host page uses for its own theme. Consumers writing their own tokens are free to
16
+ * use `light-dark()`; that is their browser floor to choose, not ours.
17
+ */
18
+ :where(:root),
19
+ :where([data-glow-tour-theme="light"]) {
20
+ color-scheme: light;
21
+
22
+ --glow-tour-color-accent: #4c35fd;
23
+ --glow-tour-color-accent-active: #3522c7;
24
+ --glow-tour-color-accent-hover: #3f2be0;
25
+ --glow-tour-color-border: #dedee3;
26
+ --glow-tour-color-on-accent: #ffffff;
27
+ --glow-tour-color-surface: #ffffff;
28
+ --glow-tour-color-surface-muted: #f6f6f7;
29
+ --glow-tour-color-text: #1f1f23;
30
+ --glow-tour-color-text-muted: #5f5f66;
31
+ --glow-tour-overlay-color: #000000;
32
+ --glow-tour-shadow: 0 4px 12px rgb(0 0 0 / 8%);
33
+ }
34
+
35
+ :where(:root) {
36
+ --glow-tour-control-height: 32px;
37
+ --glow-tour-popover-width: 352px;
38
+ --glow-tour-radius: 8px;
39
+ --glow-tour-spacing: 8px;
40
+ --glow-tour-transition-duration: 120ms;
41
+ --glow-tour-transition-easing: ease-out;
42
+ --glow-tour-viewport-gap: 16px;
43
+ }
44
+
45
+ /*
46
+ * Dark palette. Applied from the OS preference unless the page opts out, and from
47
+ * `data-glow-tour-theme="dark"` regardless of the OS.
48
+ *
49
+ * The attribute is read on any element, not just `:root`: tokens inherit, so putting
50
+ * it on `<html>` themes the whole page, and putting it on a wrapper — or on the tour
51
+ * root itself — themes just the tour inside it. The nearest ancestor carrying the
52
+ * attribute wins, which is what lets a single dark demo sit on an otherwise light
53
+ * page.
54
+ *
55
+ * In dark, elevation is carried by the border rather than the shadow: a shadow over
56
+ * a dark ground is close to invisible whatever its opacity. The backdrop keeps the
57
+ * same black fill in both themes — it dims the page, it does not tint it.
58
+ */
59
+ @media (prefers-color-scheme: dark) {
60
+ :where(:root:not([data-glow-tour-theme="light"])) {
61
+ color-scheme: dark;
62
+
63
+ --glow-tour-color-accent: #6d5bff;
64
+ --glow-tour-color-accent-active: #4f3ce0;
65
+ --glow-tour-color-accent-hover: #5d4bf0;
66
+ --glow-tour-color-border: #3a3a44;
67
+ --glow-tour-color-on-accent: #ffffff;
68
+ --glow-tour-color-surface: #1c1c21;
69
+ --glow-tour-color-surface-muted: #26262d;
70
+ --glow-tour-color-text: #f2f2f4;
71
+ --glow-tour-color-text-muted: #a8a8b3;
72
+ --glow-tour-shadow: 0 8px 24px rgb(0 0 0 / 56%);
73
+ }
74
+ }
75
+
76
+ :where([data-glow-tour-theme="dark"]) {
77
+ color-scheme: dark;
78
+
79
+ --glow-tour-color-accent: #6d5bff;
80
+ --glow-tour-color-accent-active: #4f3ce0;
81
+ --glow-tour-color-accent-hover: #5d4bf0;
82
+ --glow-tour-color-border: #3a3a44;
83
+ --glow-tour-color-on-accent: #ffffff;
84
+ --glow-tour-color-surface: #1c1c21;
85
+ --glow-tour-color-surface-muted: #26262d;
86
+ --glow-tour-color-text: #f2f2f4;
87
+ --glow-tour-color-text-muted: #a8a8b3;
88
+ --glow-tour-shadow: 0 8px 24px rgb(0 0 0 / 56%);
89
+ }
90
+
91
+ :where([data-glow-tour-root]) [data-glow-tour-popover],
92
+ :where([data-glow-tour-root]) [data-glow-tour-popover] *,
93
+ :where([data-glow-tour-root]) [data-glow-tour-pointer],
94
+ :where([data-glow-tour-root]) [data-glow-tour-pointer] * {
95
+ box-sizing: border-box;
96
+ }
97
+
98
+ :where([data-glow-tour-root]) [data-glow-tour-overlay] {
99
+ display: block;
100
+ overflow: visible;
101
+ }
102
+
103
+ /*
104
+ * The backdrop is a single SVG path. Its opacity is written inline by the core on
105
+ * every frame, so only the fill is themeable from CSS; use `step.overlay.opacity`
106
+ * to change how much it dims.
107
+ */
108
+ :where([data-glow-tour-root]) [data-glow-tour-overlay] path {
109
+ fill: var(--glow-tour-overlay-color, #000000);
110
+ }
111
+
112
+ :where([data-glow-tour-root]) [data-glow-tour-popover] {
113
+ background: var(--glow-tour-color-surface, #ffffff);
114
+ border: 1px solid var(--glow-tour-color-border, #dedee3);
115
+ border-radius: var(--glow-tour-radius, 8px);
116
+ box-shadow: var(--glow-tour-shadow, 0 4px 12px rgb(0 0 0 / 8%));
117
+ color: var(--glow-tour-color-text, #1f1f23);
118
+ display: grid;
119
+ font: inherit;
120
+ gap: calc(var(--glow-tour-spacing, 8px) * 1.5);
121
+ grid-template-rows: auto minmax(0, 1fr) auto;
122
+ max-height: calc(100dvh - (var(--glow-tour-viewport-gap, 16px) * 2));
123
+ max-width: calc(100vw - (var(--glow-tour-viewport-gap, 16px) * 2));
124
+ overflow: visible;
125
+ overflow-wrap: anywhere;
126
+ padding: calc(var(--glow-tour-spacing, 8px) * 2);
127
+ width: min(
128
+ var(--glow-tour-popover-width, 352px),
129
+ calc(100vw - (var(--glow-tour-viewport-gap, 16px) * 2))
130
+ );
131
+ }
132
+
133
+ :where([data-glow-tour-root]) [data-glow-tour-popover]:focus-visible {
134
+ outline: 3px solid var(--glow-tour-color-accent, #4c35fd);
135
+ outline-offset: 3px;
136
+ }
137
+
138
+ :where([data-glow-tour-root]) [data-glow-tour-header] {
139
+ color: var(--glow-tour-color-text, #1f1f23);
140
+ font-size: 1rem;
141
+ font-weight: 600;
142
+ line-height: 1.4;
143
+ }
144
+
145
+ :where([data-glow-tour-root]) [data-glow-tour-content] {
146
+ color: var(--glow-tour-color-text-muted, #5f5f66);
147
+ font-size: 0.875rem;
148
+ line-height: 1.5;
149
+ min-height: 0;
150
+ overflow-y: auto;
151
+ overscroll-behavior: contain;
152
+ }
153
+
154
+ :where([data-glow-tour-root]) [data-glow-tour-footer] {
155
+ align-items: center;
156
+ display: flex;
157
+ gap: var(--glow-tour-spacing, 8px);
158
+ justify-content: flex-end;
159
+ }
160
+
161
+ :where([data-glow-tour-root]) [data-glow-tour-cancel-trigger],
162
+ :where([data-glow-tour-root]) [data-glow-tour-previous-trigger],
163
+ :where([data-glow-tour-root]) [data-glow-tour-advance-trigger] {
164
+ align-items: center;
165
+ border: 1px solid transparent;
166
+ border-radius: var(--glow-tour-radius, 8px);
167
+ cursor: pointer;
168
+ display: inline-flex;
169
+ font: inherit;
170
+ font-size: 0.75rem;
171
+ font-weight: 600;
172
+ justify-content: center;
173
+ min-height: var(--glow-tour-control-height, 32px);
174
+ padding: 0 var(--glow-tour-spacing, 8px);
175
+ transition:
176
+ background-color var(--glow-tour-transition-duration, 120ms)
177
+ var(--glow-tour-transition-easing, ease-out),
178
+ border-color var(--glow-tour-transition-duration, 120ms)
179
+ var(--glow-tour-transition-easing, ease-out),
180
+ color var(--glow-tour-transition-duration, 120ms) var(--glow-tour-transition-easing, ease-out);
181
+ }
182
+
183
+ :where([data-glow-tour-root]) [data-glow-tour-cancel-trigger] {
184
+ background: transparent;
185
+ color: var(--glow-tour-color-text-muted, #5f5f66);
186
+ margin-inline-end: auto;
187
+ }
188
+
189
+ :where([data-glow-tour-root]) [data-glow-tour-cancel-trigger]:hover:not(:disabled) {
190
+ text-decoration: underline;
191
+ }
192
+
193
+ :where([data-glow-tour-root]) [data-glow-tour-cancel-trigger]:active:not(:disabled) {
194
+ text-decoration: underline;
195
+ }
196
+
197
+ :where([data-glow-tour-root]) [data-glow-tour-previous-trigger] {
198
+ background: var(--glow-tour-color-surface, #ffffff);
199
+ border-color: var(--glow-tour-color-border, #dedee3);
200
+ color: var(--glow-tour-color-text, #1f1f23);
201
+ }
202
+
203
+ :where([data-glow-tour-root]) [data-glow-tour-previous-trigger]:hover:not(:disabled) {
204
+ background: var(--glow-tour-color-surface-muted, #f6f6f7);
205
+ border-color: var(--glow-tour-color-text-muted, #5f5f66);
206
+ }
207
+
208
+ :where([data-glow-tour-root]) [data-glow-tour-previous-trigger]:active:not(:disabled) {
209
+ background: var(--glow-tour-color-surface, #ffffff);
210
+ border-color: var(--glow-tour-color-text, #1f1f23);
211
+ }
212
+
213
+ :where([data-glow-tour-root]) [data-glow-tour-advance-trigger] {
214
+ background: var(--glow-tour-color-accent, #4c35fd);
215
+ border-color: var(--glow-tour-color-accent, #4c35fd);
216
+ color: var(--glow-tour-color-on-accent, #ffffff);
217
+ }
218
+
219
+ :where([data-glow-tour-root]) [data-glow-tour-advance-trigger]:hover:not(:disabled) {
220
+ background: var(--glow-tour-color-accent-hover, #3f2be0);
221
+ border-color: var(--glow-tour-color-accent-hover, #3f2be0);
222
+ }
223
+
224
+ :where([data-glow-tour-root]) [data-glow-tour-advance-trigger]:active:not(:disabled) {
225
+ background: var(--glow-tour-color-accent-active, #3522c7);
226
+ border-color: var(--glow-tour-color-accent-active, #3522c7);
227
+ }
228
+
229
+ :where([data-glow-tour-root]) [data-glow-tour-cancel-trigger]:focus-visible,
230
+ :where([data-glow-tour-root]) [data-glow-tour-previous-trigger]:focus-visible,
231
+ :where([data-glow-tour-root]) [data-glow-tour-advance-trigger]:focus-visible {
232
+ outline: 3px solid var(--glow-tour-color-accent, #4c35fd);
233
+ outline-offset: 2px;
234
+ }
235
+
236
+ :where([data-glow-tour-root]) [data-glow-tour-cancel-trigger]:disabled,
237
+ :where([data-glow-tour-root]) [data-glow-tour-previous-trigger]:disabled,
238
+ :where([data-glow-tour-root]) [data-glow-tour-advance-trigger]:disabled {
239
+ background: var(--glow-tour-color-surface-muted, #f6f6f7);
240
+ border-color: var(--glow-tour-color-border, #dedee3);
241
+ box-shadow: none;
242
+ color: var(--glow-tour-color-text-muted, #5f5f66);
243
+ cursor: not-allowed;
244
+ opacity: 0.65;
245
+ }
246
+
247
+ :where([data-glow-tour-root]) [data-glow-tour-pointer] {
248
+ font-size: 2rem;
249
+ height: 1em;
250
+ line-height: 1;
251
+ position: relative;
252
+ width: 1em;
253
+ }
254
+
255
+ :where([data-glow-tour-root]) [data-glow-tour-pointer-direction] {
256
+ align-items: center;
257
+ display: flex;
258
+ inset: 0;
259
+ justify-content: center;
260
+ position: absolute;
261
+ }
262
+
263
+ @media (prefers-reduced-motion: reduce) {
264
+ :where([data-glow-tour-root]) [data-glow-tour-cancel-trigger],
265
+ :where([data-glow-tour-root]) [data-glow-tour-previous-trigger],
266
+ :where([data-glow-tour-root]) [data-glow-tour-advance-trigger] {
267
+ transition-duration: 0.01ms;
268
+ }
269
+ }
270
+
271
+ @media (forced-colors: active) {
272
+ :where([data-glow-tour-root]) [data-glow-tour-cancel-trigger],
273
+ :where([data-glow-tour-root]) [data-glow-tour-previous-trigger],
274
+ :where([data-glow-tour-root]) [data-glow-tour-advance-trigger] {
275
+ border-color: ButtonText;
276
+ forced-color-adjust: auto;
277
+ }
278
+
279
+ :where([data-glow-tour-root]) [data-glow-tour-cancel-trigger]:focus-visible,
280
+ :where([data-glow-tour-root]) [data-glow-tour-previous-trigger]:focus-visible,
281
+ :where([data-glow-tour-root]) [data-glow-tour-advance-trigger]:focus-visible {
282
+ outline-color: Highlight;
283
+ }
284
+ }
package/default.css.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ declare const stylesheet: string;
2
+
3
+ export default stylesheet;
package/package.json ADDED
@@ -0,0 +1,39 @@
1
+ {
2
+ "name": "@glowhop/styles-tour",
3
+ "version": "1.0.0",
4
+ "description": "Default CSS theme for GlowTour.js.",
5
+ "license": "MIT",
6
+ "homepage": "https://github.com/Glowhop/GlowTour.js#readme",
7
+ "bugs": {
8
+ "url": "https://github.com/Glowhop/GlowTour.js/issues"
9
+ },
10
+ "keywords": [
11
+ "tour",
12
+ "guided-tour",
13
+ "css"
14
+ ],
15
+ "engines": {
16
+ "node": ">=18.19.1"
17
+ },
18
+ "repository": {
19
+ "type": "git",
20
+ "url": "git+https://github.com/Glowhop/GlowTour.js.git",
21
+ "directory": "packages/styles"
22
+ },
23
+ "type": "module",
24
+ "files": [
25
+ "**/*"
26
+ ],
27
+ "publishConfig": {
28
+ "access": "public"
29
+ },
30
+ "sideEffects": [
31
+ "*.css"
32
+ ],
33
+ "exports": {
34
+ "./default.css": {
35
+ "types": "./default.css.d.ts",
36
+ "default": "./default.css"
37
+ }
38
+ }
39
+ }