/* * Theme tokens. * * Declared at `:where(:root)` rather than on the tour root, and at zero * specificity, so that every documented way to re-theme GlowTour keeps working: * an override on any ancestor of the tour (`.onboarding { --glow-tour-*: … }`) * wins by proximity, and an override on `:root` itself wins on specificity. * Declaring these on `[data-glow-tour-root]` would silently beat the first, and * declaring them on a bare `:root` would silently beat the second. * * `light-dark()` is deliberately not used: it resolves against the `color-scheme` * property, which the host page owns and most apps never set — an unset * `color-scheme` yields the light value even on a dark OS. A media query plus an * attribute we own keeps the default OS-aware without depending on a property the * host page uses for its own theme. Consumers writing their own tokens are free to * use `light-dark()`; that is their browser floor to choose, not ours. */ :where(:root), :where([data-glow-tour-theme="light"]) { color-scheme: light; --glow-tour-color-accent: #4c35fd; --glow-tour-color-accent-active: #3522c7; --glow-tour-color-accent-hover: #3f2be0; --glow-tour-color-border: #dedee3; --glow-tour-color-on-accent: #ffffff; --glow-tour-color-surface: #ffffff; --glow-tour-color-surface-muted: #f6f6f7; --glow-tour-color-text: #1f1f23; --glow-tour-color-text-muted: #5f5f66; --glow-tour-overlay-color: #000000; --glow-tour-shadow: 0 4px 12px rgb(0 0 0 / 8%); } :where(:root) { --glow-tour-control-height: 32px; --glow-tour-popover-width: 352px; --glow-tour-radius: 8px; --glow-tour-spacing: 8px; --glow-tour-transition-duration: 120ms; --glow-tour-transition-easing: ease-out; --glow-tour-viewport-gap: 16px; } /* * Dark palette. Applied from the OS preference unless the page opts out, and from * `data-glow-tour-theme="dark"` regardless of the OS. * * The attribute is read on any element, not just `:root`: tokens inherit, so putting * it on `` themes the whole page, and putting it on a wrapper — or on the tour * root itself — themes just the tour inside it. The nearest ancestor carrying the * attribute wins, which is what lets a single dark demo sit on an otherwise light * page. * * In dark, elevation is carried by the border rather than the shadow: a shadow over * a dark ground is close to invisible whatever its opacity. The backdrop keeps the * same black fill in both themes — it dims the page, it does not tint it. */ @media (prefers-color-scheme: dark) { :where(:root:not([data-glow-tour-theme="light"])) { color-scheme: dark; --glow-tour-color-accent: #6d5bff; --glow-tour-color-accent-active: #4f3ce0; --glow-tour-color-accent-hover: #5d4bf0; --glow-tour-color-border: #3a3a44; --glow-tour-color-on-accent: #ffffff; --glow-tour-color-surface: #1c1c21; --glow-tour-color-surface-muted: #26262d; --glow-tour-color-text: #f2f2f4; --glow-tour-color-text-muted: #a8a8b3; --glow-tour-shadow: 0 8px 24px rgb(0 0 0 / 56%); } } :where([data-glow-tour-theme="dark"]) { color-scheme: dark; --glow-tour-color-accent: #6d5bff; --glow-tour-color-accent-active: #4f3ce0; --glow-tour-color-accent-hover: #5d4bf0; --glow-tour-color-border: #3a3a44; --glow-tour-color-on-accent: #ffffff; --glow-tour-color-surface: #1c1c21; --glow-tour-color-surface-muted: #26262d; --glow-tour-color-text: #f2f2f4; --glow-tour-color-text-muted: #a8a8b3; --glow-tour-shadow: 0 8px 24px rgb(0 0 0 / 56%); } :where([data-glow-tour-root]) [data-glow-tour-popover], :where([data-glow-tour-root]) [data-glow-tour-popover] *, :where([data-glow-tour-root]) [data-glow-tour-pointer], :where([data-glow-tour-root]) [data-glow-tour-pointer] * { box-sizing: border-box; } :where([data-glow-tour-root]) [data-glow-tour-overlay] { display: block; overflow: visible; } /* * The backdrop is a single SVG path. Its opacity is written inline by the core on * every frame, so only the fill is themeable from CSS; use `step.overlay.opacity` * to change how much it dims. */ :where([data-glow-tour-root]) [data-glow-tour-overlay] path { fill: var(--glow-tour-overlay-color, #000000); } :where([data-glow-tour-root]) [data-glow-tour-popover] { background: var(--glow-tour-color-surface, #ffffff); border: 1px solid var(--glow-tour-color-border, #dedee3); border-radius: var(--glow-tour-radius, 8px); box-shadow: var(--glow-tour-shadow, 0 4px 12px rgb(0 0 0 / 8%)); color: var(--glow-tour-color-text, #1f1f23); display: grid; font: inherit; gap: calc(var(--glow-tour-spacing, 8px) * 1.5); grid-template-rows: auto minmax(0, 1fr) auto; max-height: calc(100dvh - (var(--glow-tour-viewport-gap, 16px) * 2)); max-width: calc(100vw - (var(--glow-tour-viewport-gap, 16px) * 2)); overflow: visible; overflow-wrap: anywhere; padding: calc(var(--glow-tour-spacing, 8px) * 2); width: min( var(--glow-tour-popover-width, 352px), calc(100vw - (var(--glow-tour-viewport-gap, 16px) * 2)) ); } :where([data-glow-tour-root]) [data-glow-tour-popover]:focus-visible { outline: 3px solid var(--glow-tour-color-accent, #4c35fd); outline-offset: 3px; } :where([data-glow-tour-root]) [data-glow-tour-header] { color: var(--glow-tour-color-text, #1f1f23); font-size: 1rem; font-weight: 600; line-height: 1.4; } :where([data-glow-tour-root]) [data-glow-tour-content] { color: var(--glow-tour-color-text-muted, #5f5f66); font-size: 0.875rem; line-height: 1.5; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } :where([data-glow-tour-root]) [data-glow-tour-footer] { align-items: center; display: flex; gap: var(--glow-tour-spacing, 8px); justify-content: flex-end; } :where([data-glow-tour-root]) [data-glow-tour-footer] > glow-tour-cancel-trigger { margin-inline-end: auto; } :where([data-glow-tour-root]) [data-glow-tour-cancel-trigger], :where([data-glow-tour-root]) [data-glow-tour-previous-trigger], :where([data-glow-tour-root]) [data-glow-tour-advance-trigger] { align-items: center; border: 1px solid transparent; border-radius: var(--glow-tour-radius, 8px); cursor: pointer; display: inline-flex; font: inherit; font-size: 0.75rem; font-weight: 600; justify-content: center; min-height: var(--glow-tour-control-height, 32px); padding: 0 var(--glow-tour-spacing, 8px); transition: background-color var(--glow-tour-transition-duration, 120ms) var(--glow-tour-transition-easing, ease-out), border-color var(--glow-tour-transition-duration, 120ms) var(--glow-tour-transition-easing, ease-out), color var(--glow-tour-transition-duration, 120ms) var(--glow-tour-transition-easing, ease-out); } :where([data-glow-tour-root]) [data-glow-tour-cancel-trigger] { background: transparent; color: var(--glow-tour-color-text-muted, #5f5f66); margin-inline-end: auto; } :where([data-glow-tour-root]) [data-glow-tour-cancel-trigger]:hover:not(:disabled) { text-decoration: underline; } :where([data-glow-tour-root]) [data-glow-tour-cancel-trigger]:active:not(:disabled) { text-decoration: underline; } :where([data-glow-tour-root]) [data-glow-tour-previous-trigger] { background: var(--glow-tour-color-surface, #ffffff); border-color: var(--glow-tour-color-border, #dedee3); color: var(--glow-tour-color-text, #1f1f23); } :where([data-glow-tour-root]) [data-glow-tour-previous-trigger]:hover:not(:disabled) { background: var(--glow-tour-color-surface-muted, #f6f6f7); border-color: var(--glow-tour-color-text-muted, #5f5f66); } :where([data-glow-tour-root]) [data-glow-tour-previous-trigger]:active:not(:disabled) { background: var(--glow-tour-color-surface, #ffffff); border-color: var(--glow-tour-color-text, #1f1f23); } :where([data-glow-tour-root]) [data-glow-tour-advance-trigger] { background: var(--glow-tour-color-accent, #4c35fd); border-color: var(--glow-tour-color-accent, #4c35fd); color: var(--glow-tour-color-on-accent, #ffffff); } :where([data-glow-tour-root]) [data-glow-tour-advance-trigger]:hover:not(:disabled) { background: var(--glow-tour-color-accent-hover, #3f2be0); border-color: var(--glow-tour-color-accent-hover, #3f2be0); } :where([data-glow-tour-root]) [data-glow-tour-advance-trigger]:active:not(:disabled) { background: var(--glow-tour-color-accent-active, #3522c7); border-color: var(--glow-tour-color-accent-active, #3522c7); } :where([data-glow-tour-root]) [data-glow-tour-cancel-trigger]:focus-visible, :where([data-glow-tour-root]) [data-glow-tour-previous-trigger]:focus-visible, :where([data-glow-tour-root]) [data-glow-tour-advance-trigger]:focus-visible { outline: 3px solid var(--glow-tour-color-accent, #4c35fd); outline-offset: 2px; } :where([data-glow-tour-root]) [data-glow-tour-cancel-trigger]:disabled, :where([data-glow-tour-root]) [data-glow-tour-previous-trigger]:disabled, :where([data-glow-tour-root]) [data-glow-tour-advance-trigger]:disabled { background: var(--glow-tour-color-surface-muted, #f6f6f7); border-color: var(--glow-tour-color-border, #dedee3); box-shadow: none; color: var(--glow-tour-color-text-muted, #5f5f66); cursor: not-allowed; opacity: 0.65; } :where([data-glow-tour-root]) [data-glow-tour-pointer] { font-size: 2rem; height: 1em; line-height: 1; position: relative; width: 1em; } :where([data-glow-tour-root]) [data-glow-tour-pointer-direction] { align-items: center; display: flex; inset: 0; justify-content: center; position: absolute; } @media (prefers-reduced-motion: reduce) { :where([data-glow-tour-root]) [data-glow-tour-cancel-trigger], :where([data-glow-tour-root]) [data-glow-tour-previous-trigger], :where([data-glow-tour-root]) [data-glow-tour-advance-trigger] { transition-duration: 0.01ms; } } @media (forced-colors: active) { :where([data-glow-tour-root]) [data-glow-tour-cancel-trigger], :where([data-glow-tour-root]) [data-glow-tour-previous-trigger], :where([data-glow-tour-root]) [data-glow-tour-advance-trigger] { border-color: ButtonText; forced-color-adjust: auto; } :where([data-glow-tour-root]) [data-glow-tour-cancel-trigger]:focus-visible, :where([data-glow-tour-root]) [data-glow-tour-previous-trigger]:focus-visible, :where([data-glow-tour-root]) [data-glow-tour-advance-trigger]:focus-visible { outline-color: Highlight; } }