@livestorm/ui-vue 3.0.0 → 4.0.0

package/src/theming/primitiveTokens.ts

@@ -0,0 +1,71 @@
+import {
+  seedToOklch,
+  generateBrandOklch,
+  generateNeutralOklch,
+  oklchToRgb,
+  oklchToRgba,
+  ALPHA_STEPS,
+  type OklchColor,
+} from './colorScale'
+import {
+  generateLegacyBrandOklch,
+  generateLegacyNeutralOklch,
+} from './legacyColorScale'
+
+// --- Token generation ---
+
+// Emit one CSS var per rung, kebab-casing the scale key so 100 -> "100",
+// lightBg -> "light-bg", darkBg -> "dark-bg".
+function emitScale(map: Record<string, string>, prefix: string, scale: object): void {
+  for (const [key, color] of Object.entries(scale)) {
+    const suffix = key.replace(/([A-Z])/g, '-$1').toLowerCase()
+    map[`${prefix}-${suffix}`] = oklchToRgb(color as OklchColor)
+  }
+}
+
+export function generateTokenMap(seedHex: string): Record<string, string> {
+  const seed = seedToOklch(seedHex)
+  const brand = generateBrandOklch(seed)
+  const neutral = generateNeutralOklch(seed)
+  const map: Record<string, string> = {}
+
+  emitScale(map, '--color-brand', brand)
+  emitScale(map, '--color-neutral', neutral)
+  emitScale(map, '--color-livestorm', generateLegacyBrandOklch(seed))
+  emitScale(map, '--color-grey', generateLegacyNeutralOklch(seed))
+
+  // The dark neutral-alpha ramp darkens its base as the alpha grows, matching
+  // the static ui-tokens: neutral-800 for 100/200/300/400, neutral-900 for
+  // 500/600/700, darkBg for 800/900. A single base leaves the heavier steps a
+  // rung too light (the shell alpha-600 overlay shifts on apply), so we pick
+  // the base per step. Every other ramp keeps one base across all steps.
+  const neutralAlphaDarkBases: OklchColor[] = [
+    neutral[800], neutral[800], neutral[800], neutral[800],
+    neutral[900], neutral[900], neutral[900],
+    neutral.darkBg, neutral.darkBg,
+  ]
+  const sameBase = (base: OklchColor): OklchColor[] => ALPHA_STEPS.map(() => base)
+
+  const alphaRamps: Array<{ prefix: string; bases: OklchColor[] }> = [
+    { prefix: '--color-brand-alpha-dark', bases: sameBase(brand[600]) },
+    { prefix: '--color-brand-alpha-light', bases: sameBase(brand[400]) },
+    { prefix: '--color-neutral-alpha-dark', bases: neutralAlphaDarkBases },
+    { prefix: '--color-neutral-alpha-light', bases: sameBase(neutral[100]) },
+  ]
+
+  for (const { prefix, bases } of alphaRamps) {
+    bases.forEach((base, i) => {
+      map[`${prefix}-${(i + 1) * 100}`] = oklchToRgba(base, ALPHA_STEPS[i])
+    })
+  }
+
+  return map
+}
+
+// --- Public API ---
+
+export function generatePrimitiveTokens(seedHex: string, selector = '[data-colors-primitive="dynamic"]'): string {
+  const map = generateTokenMap(seedHex)
+  const lines = Object.entries(map).map(([prop, val]) => `  ${prop}: ${val};`)
+  return `${selector} {\n${lines.join('\n')}\n}`
+}

package/src/utils/effectiveOpacity.ts

@@ -0,0 +1,8 @@
+/** Opacity an element is painted with once every ancestor's opacity applies, for browser specs */
+export function effectiveOpacity (target: Element): number {
+  let opacity = 1
+  for (let el: Element | null = target; el && el !== document.documentElement; el = el.parentElement) {
+    opacity *= Number(getComputedStyle(el).opacity)
+  }
+  return opacity
+}

package/src/utils/i18n.ts

@@ -11,13 +11,19 @@ const FALLBACK_BUNDLES: Record<string, Record<string, string>> = {
   en: {
     general_close: 'Close',
     general_dialog_title: 'Dialog',
+    'general_form_multiselect-select-all': 'Select all',
     'general_misc_copied-text': 'Copied!',
+    'general_table_more-actions': 'More actions',
+    'general_table_select-row': 'Select row',
     'room_bottom-bar_controls-label_more': 'More',
   },
   fr: {
     general_close: 'Fermer',
     general_dialog_title: 'Dialog',
+    'general_form_multiselect-select-all': 'Tout sélectionner',
     'general_misc_copied-text': 'Copié !',
+    'general_table_more-actions': 'Plus d\'actions',
+    'general_table_select-row': 'Sélectionner la ligne',
     'room_bottom-bar_controls-label_more': 'Plus',
   },
 }

package/src/utils/numbers.ts

@@ -58,4 +58,4 @@ function formatPercentage (value: number | undefined | null, options?: Percentag
   return result
 }
 
-export { formatNumber, formatPercentage, preventLessThanZero }
+export { formatNumber, formatPercentage }

package/src/utils/responsive.d.ts

@@ -0,0 +1,14 @@
+// `allowJs` does not apply to files resolved inside `node_modules`, so consumers
+// importing this package's sources need declarations for its plain-JS modules.
+import type { Plugin } from 'vue'
+import type { ResponsiveGlobalComponentProperty } from './responsive.types'
+
+/**
+ * Viewport state shared by the whole app. Lazily created on first use, so
+ * components work with no plugin registration: installing the plugin below is
+ * only needed to customize the flags or to read `$responsive` in templates.
+ */
+export declare function useResponsive (): ResponsiveGlobalComponentProperty
+
+declare const responsive: Plugin
+export default responsive

package/src/utils/tokenColor.ts

@@ -0,0 +1,9 @@
+/** Computed colour of a token as the cascade resolves it inside `scope`, for browser specs */
+export function tokenColor (name: string, scope: Element = document.body): string {
+  const probe = document.createElement('span')
+  probe.style.color = `var(${name})`
+  scope.append(probe)
+  const color = getComputedStyle(probe).color
+  probe.remove()
+  return color
+}