@livestorm/ui-vue 1.1.2 → 2.0.0

package/src/composables/useThemeAndModes.ts

@@ -0,0 +1,225 @@
+import { useStorage } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import {
+  THEME_LIST,
+  MODE_OPTIONS,
+  ROUTES_TO_WATCH,
+  DEFAULT_THEME_CONFIG,
+  type ThemeOption,
+  type ModeOption,
+} from '../constants/themes'
+
+// * Keep them outside the function so that it is not reset each time the composable is called.
+const modeTemplateRefsToWatch = ref<Map<string, { element:HTMLElement, modeOverride?: typeof MODE_OPTIONS[number] }>>(new Map())
+const contentTemplateRefsToWatch = ref<Map<string, { element:HTMLElement, modeOverride?: typeof MODE_OPTIONS[number] }>>(new Map())
+
+/**
+ * Theme: all the primitives defined for the customer.
+ *
+ * Mode: the semantic colors to be applied mostly to the UiPage.
+ *
+ * Content mode: the semantic colors to be applied to the content of the page:
+ * - The route content of the page
+ * - Modals
+ */
+const themeAndMode = useStorage<{
+  theme: ThemeOption,
+  mode: ModeOption,
+  contentMode: ModeOption
+}>(
+  'themeAndMode',
+  DEFAULT_THEME_CONFIG
+)
+
+export default function useThemeAndModes (
+  { themeOverride, modeOverride, contentModeOverride }:
+  { themeOverride?: ThemeOption, modeOverride?: ModeOption, contentModeOverride?: ModeOption } = {}
+) {
+  /**
+   * Use overrides if provided, otherwise use stored values
+   * Overrides are not saved as preferences to localStorage
+   */
+  const hasOverrides = !!(themeOverride || modeOverride || contentModeOverride)
+  const effectiveTheme = themeOverride || themeAndMode.value.theme
+  const effectiveMode = modeOverride || themeAndMode.value.mode
+  const effectiveContentMode = contentModeOverride || themeAndMode.value.contentMode
+
+  /**
+   * Set the `data-colors-primitive` and `data-colors-semantic` attributes on the body element.
+   * If a custom dynamic theme token map is stored in localStorage, apply those as inline styles
+   * so they override the static primitive tokens.
+   * To be used only once per app, in the root component.
+   */
+  function initOnAppMounted () {
+    document.querySelector('body')!.setAttribute('data-colors-primitive', effectiveTheme)
+    document.querySelector('body')!.setAttribute('data-colors-semantic', effectiveMode)
+    applyStoredDynamicTokens()
+  }
+
+  /**
+   * Register watchers for the mode and content mode.
+   * To be used only once per app, in the root component.
+   */
+  function registerWatchers () {
+    // Resolve the mode at apply-time rather than capturing it once: an explicit
+    // override always wins, otherwise read the CURRENT stored value. This lets a
+    // stored mode updated after mount (e.g. the workspace theme mode loaded
+    // asynchronously) apply on element (re)registration and navigation, instead
+    // of the watcher re-asserting a value captured at registerWatchers() time.
+    const resolveMode = () => modeOverride || themeAndMode.value.mode
+    const resolveContentMode = () => contentModeOverride || themeAndMode.value.contentMode
+
+    watch(
+      () => Array.from(modeTemplateRefsToWatch.value.values()),
+      () => updateModeInternal({ mode: resolveMode(), hasOverrides }),
+      { immediate: true }
+    )
+
+    watch(
+      () => Array.from(contentTemplateRefsToWatch.value.values()),
+      () => updateContentModeInternal({ mode: resolveContentMode(), hasOverrides }),
+      { immediate: true }
+    )
+
+    const route = useRoute()
+
+    watch(
+      () => route?.name,
+      (routeName) => {
+        if (!routeName) { return }
+        if (ROUTES_TO_WATCH.includes(routeName.toString() as typeof ROUTES_TO_WATCH[number])) {
+          updateContentModeInternal({ mode: resolveContentMode(), hasOverrides })
+        }
+      },
+      { immediate: true }
+    )
+  }
+
+  /**
+   * Components and their elements such as the UiPage (and others where we want to override the mode),
+   * are available later in the lifecycle of the app. This function allows to add them to the watch list
+   * so that their `data-colors-semantic` attribute can be updated when the mode is set.
+   * @param listType Whether to consider it a main element such as the UiPage or a content element such as the page's content.
+   * @param descriptor Object containing the selector, the element and an optional mode override.
+   * @param descriptor.modeOverride Preferred mode for this element. Can be overridden in dev by the `ThemePicker.vue` component.
+   * @returns void
+   */
+  function addElementToWatch (
+    listType: 'mode' | 'content',
+    { selector, element, modeOverride }
+      :
+      { selector: string, element: HTMLElement, modeOverride?: typeof MODE_OPTIONS[number] }
+  ) {
+    const list = listType === 'mode' ? modeTemplateRefsToWatch : contentTemplateRefsToWatch
+    // * Note: we want to update the value of the descriptor as the DOM element
+    // * might have changed (e.g. route change = new content) so we need that
+    // * new value to be updated for the watchers to affect the right element.
+    // * If we do not override the value here, the watch will affect the
+    // * initially set DOM reference instead of the one we want to target.
+    list.value.set(selector, { element, modeOverride })
+  }
+
+  return {
+    initOnAppMounted,
+    registerWatchers,
+    addElementToWatch,
+    updateContentMode,
+
+    updateTheme,
+    updateMode,
+
+    themeList: THEME_LIST,
+    modeOptions: MODE_OPTIONS,
+
+    theme: effectiveTheme,
+    mode: effectiveMode,
+    contentMode: effectiveContentMode,
+
+    // Reactive counterparts of the values above, which are captured once at
+    // call time. Bind to these when the UI must follow external updates to the
+    // stored state (e.g. ThemePicker reflecting a mode set elsewhere).
+    currentTheme: computed(() => themeOverride || themeAndMode.value.theme),
+    currentMode: computed(() => modeOverride || themeAndMode.value.mode),
+    currentContentMode: computed(() => contentModeOverride || themeAndMode.value.contentMode),
+  }
+}
+
+function updateTheme (theme: ThemeOption) {
+  themeAndMode.value.theme = theme
+  document.querySelector('body')!.setAttribute('data-colors-primitive', theme)
+}
+
+function updateMode (mode: ModeOption) {
+  themeAndMode.value.mode = mode
+  document.querySelector('body')!.setAttribute('data-colors-semantic', mode)
+
+  const UiPageElement = modeTemplateRefsToWatch.value.get('[data-name="ui-page-wrapper"]')
+  UiPageElement?.element.setAttribute('data-colors-semantic', mode)
+}
+
+/**
+ * Only exported for the `ThemePicker.vue` component to be able to update the content mode.
+ * NOT for general use.
+ * @param mode light|dark
+ */
+function updateContentMode (mode: ModeOption) {
+  updateContentModeInternal({ mode, hasOverrides: false, ignoreElementOverrides: true })
+}
+
+function updateModeInternal (
+  { mode, hasOverrides = false }:
+  { mode: ModeOption, hasOverrides?: boolean }
+) {
+  // Only save to localStorage when NOT using temporary overrides
+  if (!hasOverrides) {
+    themeAndMode.value.mode = mode
+  }
+
+  // Always maintain element-level overrides
+  for (const { element, modeOverride } of modeTemplateRefsToWatch.value.values()) {
+    const effectiveMode = modeOverride || mode
+    element.setAttribute('data-colors-semantic', effectiveMode)
+  }
+}
+
+function updateContentModeInternal (
+  { mode, hasOverrides = false, ignoreElementOverrides = false }:
+  { mode: ModeOption, hasOverrides?: boolean, ignoreElementOverrides?: boolean }
+) {
+  // Only save to localStorage when NOT using temporary overrides
+  if (!hasOverrides) {
+    themeAndMode.value.contentMode = mode
+  }
+
+  // Apply to all content elements
+  // When explicitly updating (e.g., via ThemePicker), ignore element-level overrides
+  for (const { element, modeOverride } of contentTemplateRefsToWatch.value.values()) {
+    const effectiveMode = ignoreElementOverrides ? mode : (modeOverride || mode)
+    element.setAttribute('data-colors-semantic', effectiveMode)
+  }
+}
+
+const DYNAMIC_TOKENS_STORAGE_KEY = 'customThemeTokens'
+
+/**
+ * Reads a pre-computed token map from localStorage and applies each entry
+ * as an inline style on document.body. The token map is written by the
+ * theme playground (appThemePersistence) which handles OKLCH generation.
+ * This function has zero external dependencies — it just sets CSS properties.
+ */
+function applyStoredDynamicTokens () {
+  try {
+    if (localStorage.getItem('ls-internal-theming') !== 'true') return
+
+    const stored = localStorage.getItem(DYNAMIC_TOKENS_STORAGE_KEY)
+    if (!stored) return
+
+    const tokens: Record<string, string> = JSON.parse(stored)
+    for (const [property, value] of Object.entries(tokens)) {
+      document.documentElement.style.setProperty(property, value)
+    }
+  } catch {
+    // Ignore wrongly formatted values or JSON parsing errors
+  }
+}

package/src/constants/index.ts

@@ -0,0 +1,2 @@
+export * from './sizes'
+export * from './themes'

package/src/constants/sizes.ts

@@ -0,0 +1,2 @@
+export const SIZES = ['sm', 'md', 'lg'] as const
+export type Size = typeof SIZES[number]

package/src/constants/themes.ts

@@ -0,0 +1,34 @@
+export const THEMES = {
+  LIVESTORM: 'Livestorm',
+  CUSTOMER1: 'customer1',
+  CUSTOMER2: 'customer2',
+  CUSTOMER3: 'customer3',
+} as const
+
+export const MODES = {
+  LIGHT: 'light',
+  DARK: 'dark',
+} as const
+
+export const THEME_LIST = Object.values(THEMES)
+export const MODE_OPTIONS = Object.values(MODES)
+
+export type ThemeOption = typeof THEME_LIST[number]
+export type ModeOption = typeof MODE_OPTIONS[number]
+
+// Generate theme mapping for different contexts (e.g., Storybook toolbar values)
+export const THEME_MAPPING = Object.fromEntries(
+  Object.entries(THEMES).map(([key, value]: [string, ThemeOption]) => [key.toLowerCase(), value])
+) as Record<string, ThemeOption>
+
+export type ThemeKey = keyof typeof THEME_MAPPING
+
+// Routes that need special handling for content mode
+export const ROUTES_TO_WATCH = ['signup', 'signin', 'forgot-password', 'reset-password'] as const
+
+// Default theme and mode configuration
+export const DEFAULT_THEME_CONFIG = {
+  theme: THEMES.LIVESTORM,
+  mode: MODES.DARK,
+  contentMode: MODES.LIGHT,
+} as const

package/src/css/{body.postcss → body.css}

@@ -1,3 +1,4 @@
+@reference '@livestorm/ui-tokens/output/supernova/index.css';
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
 
 body {
@@ -24,6 +25,6 @@ body {
   - An element needs a keyboard to function (like text <inputs>)
   https://css-tricks.com/almanac/selectors/f/focus-visible/#aa-how-do-browsers-determine-when-something-is-focus-visible
 */
-*:focus-visible:not(input, textarea, .v-popper__popper, .focus-indicator-none, [contenteditable]) {
-  @apply ring-[3px] ring-[red];
+*:focus-visible:not(input, .base-input, textarea, .v-popper__popper, .focus-indicator-none, [contenteditable]) {
+  @apply ring-2 ring-inset ring-focus-ring;
 }

package/src/css/reka-animations.css

@@ -0,0 +1,209 @@
+/* === KEYFRAMES === */
+@keyframes scale-in {
+  from {
+    transform: scale(0.6);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes fade-scale {
+  from {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-down {
+  from {
+    transform: translateY(-8px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-up {
+  from {
+    transform: translateY(8px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes spring {
+  0% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.02);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes tooltip-fade {
+  from {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes hover-lift {
+  from {
+    transform: translateY(4px) scale(0.98);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes accordion-expand {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideDownAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideUpAndFade {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+
+/* === ANIMATION CLASSES === */
+.animate-scale-in {
+  animation-name: scale-in;
+  animation-duration: 150ms;
+  animation-timing-function: ease-out;
+  animation-fill-mode: both;
+}
+
+.animate-fade-scale {
+  animation-name: fade-scale;
+  animation-duration: 150ms;
+  animation-timing-function: ease-out;
+  animation-fill-mode: both;
+}
+
+.animate-slide-down {
+  animation-name: slide-down;
+  animation-duration: 150ms;
+  animation-timing-function: ease-out;
+  animation-fill-mode: both;
+}
+
+.animate-slide-up {
+  animation-name: slide-up;
+  animation-duration: 150ms;
+  animation-timing-function: ease-out;
+  animation-fill-mode: both;
+}
+
+.animate-spring {
+  animation-name: spring;
+  animation-duration: 300ms;
+  animation-timing-function: ease-out;
+  animation-fill-mode: both;
+}
+
+.animate-tooltip-fade {
+  animation-name: tooltip-fade;
+  animation-duration: 150ms;
+  animation-timing-function: ease-out;
+  animation-fill-mode: both;
+}
+
+.animate-hover-lift {
+  animation-name: hover-lift;
+  animation-duration: 200ms;
+  animation-timing-function: ease-out;
+  animation-fill-mode: both;
+}
+
+.animate-accordion-expand {
+  animation-name: accordion-expand;
+  animation-duration: 200ms;
+  animation-timing-function: ease-out;
+  animation-fill-mode: both;
+}
+
+/* === ANIMATION UTILITIES === */
+/* Animation duration classes (following Tailwind naming conventions) */
+.animate-duration {
+  animation-duration: 0.08s;
+}
+
+.animate-duration-75 {
+  animation-duration: 75ms;
+}
+
+.animate-duration-100 {
+  animation-duration: 100ms;
+}
+
+.animate-duration-150 {
+  animation-duration: 150ms;
+}
+
+.animate-duration-200 {
+  animation-duration: 200ms;
+}
+
+.animate-duration-300 {
+  animation-duration: 300ms;
+}
+
+.animate-duration-500 {
+  animation-duration: 500ms;
+}
+
+.animate-duration-700 {
+  animation-duration: 700ms;
+}
+
+.animate-duration-1000 {
+  animation-duration: 1000ms;
+}

package/src/css/{transitions.postcss → transitions.css}

@@ -3,17 +3,21 @@
 .fade-leave-active {
   transition: opacity .3s ease;
 }
+
 .fade-fast-enter-active,
 .fade-fast-leave-active {
   transition: opacity .1s ease;
 }
+
 .fade-delay-enter-active,
 .fade-delay-leave-active {
   transition: opacity .3s ease;
 }
+
 .fade-delay-enter-active {
   transition-delay: .5s;
 }
+
 .fade-enter-from,
 .fade-leave-to,
 .fade-delay-enter-from,
@@ -30,8 +34,9 @@
   .base-modal-layout,
   .modal-wrapper {
     perspective: 1300px;
-    > section,
-    > .shell {
+
+    & > section,
+    & > .shell {
       transition: transform .2s, opacity .2s;
       transform-style: preserve-3d;
     }
@@ -45,13 +50,15 @@
     transition: transform .2s, opacity .2s;
   }
 }
+
 .modal-enter-from,
 .modal-leave-to {
-  > .base-modal-layout > section,
-  > .modal-wrapper > .shell {
+  & > .base-modal-layout > section,
+  & > .modal-wrapper > .shell {
     opacity: 0;
   }
-  > .base-modal-layout > section {
+
+  & > .base-modal-layout > section {
     @apply scale-95;
   }