@umodeapporg/ui 0.1.0

package/tailwind.preset.js

@@ -0,0 +1,367 @@
+import glassPlugin from './tailwind-plugins/glass.js';
+import containerQueriesPlugin from '@tailwindcss/container-queries';
+import formsPlugin from '@tailwindcss/forms';
+import typographyPlugin from '@tailwindcss/typography';
+
+/**
+ * Semantic token helper.
+ *
+ * Tokens live in src/assets/styles/theme.css as space-separated RGB channels, which is
+ * what lets Tailwind keep its opacity modifier working (`bg-surface/60`). Reading them
+ * through a var() means `withMT` replacing `theme.colors` with the Material palette is
+ * irrelevant to us: our colours are additive (theme.extend.colors) and resolve at
+ * runtime from the stylesheet, not at build time from a JS palette.
+ */
+const token = (name) => `rgb(var(--color-${name}) / <alpha-value>)`;
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  /* The boot script in index.html always writes a concrete data-theme on <html>, so the
+     `dark:` variant has a single, explicit trigger. It is an ESCAPE HATCH: styling is
+     supposed to flow through the semantic tokens below, which swap themselves. */
+  darkMode: ['selector', '[data-theme="dark"]'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter', 'sans-serif'],
+      },
+      colors: {
+        /* ---- Semantic layer. Prefer these over any palette shade. ---- */
+        canvas: { DEFAULT: token('canvas'), subtle: token('canvas-subtle') },
+        surface: {
+          DEFAULT: token('surface'),
+          raised: token('surface-raised'),
+          overlay: token('surface-overlay'),
+          sunken: token('surface-sunken'),
+          inverse: token('surface-inverse'),
+        },
+        muted: {
+          DEFAULT: token('muted'),
+          hover: token('muted-hover'),
+          active: token('muted-active'),
+        },
+        foreground: {
+          DEFAULT: token('foreground'),
+          muted: token('foreground-muted'),
+          subtle: token('foreground-subtle'),
+          faint: token('foreground-faint'),
+          inverse: token('foreground-inverse'),
+          'on-accent': token('foreground-on-accent'),
+        },
+        border: {
+          DEFAULT: token('border'),
+          subtle: token('border-subtle'),
+          emphasis: token('border-emphasis'),
+          strong: token('border-strong'),
+          inverse: token('border-inverse'),
+        },
+        ring: { DEFAULT: token('ring'), offset: token('ring-offset') },
+        selection: { DEFAULT: token('selection'), fg: token('selection-fg') },
+
+        /* The form control paints itself: in the dark theme it is a FILLED field with a
+           soft rim, not a dark box drawn by a bright outline. `surface` + `border-strong`
+           cannot express that, because the outline is what carries the whole shape there. */
+        field: {
+          DEFAULT: token('field'),
+          border: token('field-border'),
+          disabled: token('field-disabled'),
+        },
+
+        /* Chrome that must stay dark in BOTH themes: tooltips, media overlays, code
+           blocks, badges pinned on top of a photo. `surface-inverse` genuinely flips
+           with the theme; `ink` deliberately does not. */
+        ink: { DEFAULT: token('ink'), fg: token('ink-fg'), muted: token('ink-muted') },
+
+        /* The light counterpart of `ink`: a white veil that stays white in BOTH themes
+           because it sits on media (a photo, the canvas), not on a themed surface.
+           Always used with an opacity modifier: `bg-glass/10`. */
+        glass: token('glass'),
+
+        brand: {
+          DEFAULT: token('primary'),
+          hover: token('primary-hover'),
+          active: token('primary-active'),
+          fg: token('primary-fg'),
+          soft: token('primary-soft'),
+          'soft-hover': token('primary-soft-hover'),
+          emphasis: token('primary-emphasis'),
+          border: token('primary-border'),
+        },
+        secondary: {
+          DEFAULT: token('secondary'),
+          hover: token('secondary-hover'),
+          fg: token('secondary-fg'),
+          soft: token('secondary-soft'),
+          emphasis: token('secondary-emphasis'),
+          border: token('secondary-border'),
+        },
+        accent: {
+          DEFAULT: token('accent'),
+          hover: token('accent-hover'),
+          fg: token('accent-fg'),
+          soft: token('accent-soft'),
+          emphasis: token('accent-emphasis'),
+          border: token('accent-border'),
+        },
+        success: {
+          DEFAULT: token('success'),
+          hover: token('success-hover'),
+          fg: token('success-fg'),
+          soft: token('success-soft'),
+          emphasis: token('success-emphasis'),
+          border: token('success-border'),
+        },
+        warning: {
+          DEFAULT: token('warning'),
+          hover: token('warning-hover'),
+          fg: token('warning-fg'),
+          soft: token('warning-soft'),
+          emphasis: token('warning-emphasis'),
+          border: token('warning-border'),
+        },
+        danger: {
+          DEFAULT: token('danger'),
+          hover: token('danger-hover'),
+          fg: token('danger-fg'),
+          soft: token('danger-soft'),
+          emphasis: token('danger-emphasis'),
+          border: token('danger-border'),
+        },
+        info: {
+          DEFAULT: token('info'),
+          hover: token('info-hover'),
+          fg: token('info-fg'),
+          soft: token('info-soft'),
+          emphasis: token('info-emphasis'),
+          border: token('info-border'),
+        },
+
+        chart: {
+          1: token('chart-1'),
+          2: token('chart-2'),
+          3: token('chart-3'),
+          4: token('chart-4'),
+          5: token('chart-5'),
+          6: token('chart-6'),
+          7: token('chart-7'),
+          8: token('chart-8'),
+          label: token('chart-label'),
+          grid: token('chart-grid'),
+          axis: token('chart-axis'),
+        },
+
+        /* Brand purple stays available as a raw ramp for the few places that need a
+           specific shade (illustrations, gradients). Reach for `brand-*` first: these
+           shades do NOT change between themes. */
+        purple: {
+          50: '#f4f0fe',
+          100: '#f5ebfd',
+          200: '#e6d0fa',
+          300: '#d4aff7',
+          400: '#c38df3',
+          500: '#973BEB',
+          600: '#a95cee',
+          700: '#6a29a5',
+          800: '#4f1e7b',
+          900: '#5d28b7',
+          950: '#401d7c',
+        },
+      },
+      backgroundColor: {
+        scrim: 'var(--overlay)',
+        'scrim-strong': 'var(--overlay-strong)',
+      },
+      /* Defaults for the bare `ring` / `ring-offset` utilities. Without these Tailwind
+         falls back to its own blue, which is how a stray blue focus ring survives an
+         otherwise complete migration. */
+      ringColor: { DEFAULT: token('ring') },
+      ringOffsetColor: { DEFAULT: token('ring-offset') },
+      borderColor: { DEFAULT: token('border') },
+      divideColor: { DEFAULT: token('border') },
+      outlineColor: { DEFAULT: token('ring') },
+      /* ONE elevation scale.
+         `withMT` replaces theme.boxShadow with fixed black rgba shadows, so the 255
+         existing `shadow-sm|md|lg|xl` call sites were painting a black shadow that is
+         invisible on a dark surface. Redefining the same names here points every one of
+         them at the theme-aware ramp with zero call-site churn, and keeps `elevation*` as
+         readable aliases for new code. */
+      boxShadow: {
+        xs: 'var(--shadow-xs)',
+        sm: 'var(--shadow-sm)',
+        DEFAULT: 'var(--shadow-sm)',
+        md: 'var(--shadow-md)',
+        lg: 'var(--shadow-lg)',
+        xl: 'var(--shadow-xl)',
+        '2xl': 'var(--shadow-xl)',
+        elevation1: 'var(--shadow-sm)',
+        elevation2: 'var(--shadow-md)',
+        elevation3: 'var(--shadow-lg)',
+        elevation4: 'var(--shadow-xl)',
+        focus: 'var(--shadow-focus)',
+      },
+      /* Motion scale. One timing vocabulary so a dropdown, a drawer and a hover do not
+         each invent their own duration. */
+      /* The property set anything interactive animates. Same list as the `.interactive`
+         class in index.css, exposed as a utility so `transition-all` never has to be
+         written: `all` includes layout properties, so a hover could trigger reflow. */
+      transitionProperty: {
+        interactive: 'background-color, border-color, color, fill, stroke, box-shadow, opacity, transform',
+      },
+
+      transitionDuration: {
+        /* DEFAULT drives every bare `transition-colors` / `transition-*` in the app
+           (348 call sites), which is what makes hover feel like one system. */
+        DEFAULT: '140ms',
+        instant: '90ms',
+        fast: '140ms',
+        base: '200ms',
+        slow: '280ms',
+        /* Attention fades: a row that stays highlighted after an action and then settles.
+           Deliberately outside the interaction range, which tops out at `slow`. */
+        highlight: '700ms',
+      },
+      transitionTimingFunction: {
+        DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
+        /* Decelerating: things entering the screen. */
+        enter: 'cubic-bezier(0.16, 1, 0.3, 1)',
+        /* Accelerating: things leaving. */
+        exit: 'cubic-bezier(0.4, 0, 1, 1)',
+        standard: 'cubic-bezier(0.4, 0, 0.2, 1)',
+      },
+      /* The typography plugin ships ~18 hardcoded colours of its own (`--tw-prose-body`,
+         `--tw-prose-headings`, …), all light-only, so ANY `prose` block is unreadable in
+         dark mode by default: that is what made the privacy-policy dialog show grey text
+         on a dark panel. Mapping them to tokens once here fixes every current and future
+         `prose` usage without a single `dark:prose-invert` at a call site. */
+      typography: {
+        DEFAULT: {
+          css: {
+            '--tw-prose-body': 'rgb(var(--color-foreground-muted))',
+            '--tw-prose-headings': 'rgb(var(--color-foreground))',
+            '--tw-prose-lead': 'rgb(var(--color-foreground-muted))',
+            '--tw-prose-links': 'rgb(var(--color-primary-emphasis))',
+            '--tw-prose-bold': 'rgb(var(--color-foreground))',
+            '--tw-prose-counters': 'rgb(var(--color-foreground-subtle))',
+            '--tw-prose-bullets': 'rgb(var(--color-border-strong))',
+            '--tw-prose-hr': 'rgb(var(--color-border))',
+            '--tw-prose-quotes': 'rgb(var(--color-foreground))',
+            '--tw-prose-quote-borders': 'rgb(var(--color-border))',
+            '--tw-prose-captions': 'rgb(var(--color-foreground-subtle))',
+            '--tw-prose-kbd': 'rgb(var(--color-foreground))',
+            '--tw-prose-kbd-shadows': 'rgb(var(--color-foreground))',
+            '--tw-prose-code': 'rgb(var(--color-foreground))',
+            '--tw-prose-pre-code': 'rgb(var(--color-ink-fg))',
+            '--tw-prose-pre-bg': 'rgb(var(--color-ink))',
+            '--tw-prose-th-borders': 'rgb(var(--color-border-emphasis))',
+            '--tw-prose-td-borders': 'rgb(var(--color-border))',
+          },
+        },
+      },
+      fontSize: {
+        xxs: '0.625rem',
+      },
+      lineHeight: {
+        2: '0.625rem',
+      },
+      keyframes: {
+        /* Fade + slide: the standard entry for content appearing in place under a
+           control (validation panel, inline hint). Travels 6px, the same hint distance
+           the floating surfaces use. */
+        'fade-in-up': {
+          '0%': { opacity: '0', transform: 'translateY(6px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        'fade-in': {
+          '0%': { opacity: '0', transform: 'translateY(10px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        'ai-orbit': {
+          '0%': { transform: 'rotate(0deg)' },
+          '100%': { transform: 'rotate(360deg)' },
+        },
+        'ai-bob': {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-6px)' },
+        },
+        'ai-sweep': {
+          '0%': { transform: 'translateY(140%)', opacity: '0' },
+          '40%, 60%': { opacity: '1' },
+          '100%': { transform: 'translateY(-140%)', opacity: '0' },
+        },
+        'ai-step': {
+          '0%, 100%': { opacity: '0.25', transform: 'scale(0.9)' },
+          '50%': { opacity: '1', transform: 'scale(1)' },
+        },
+        'pop-in': {
+          '0%': { opacity: '0', transform: 'scale(0.4)' },
+          '60%': { opacity: '1', transform: 'scale(1.15)' },
+          '100%': { opacity: '1', transform: 'scale(1)' },
+        },
+        'state-rise': {
+          '0%': { opacity: '0', transform: 'translate3d(0, 0.5rem, 0)' },
+          '100%': { opacity: '1', transform: 'translate3d(0, 0, 0)' },
+        },
+        'state-reveal': {
+          '0%': { opacity: '0', transform: 'scale(0.82)' },
+          '100%': { opacity: '1', transform: 'scale(1)' },
+        },
+        'state-float': {
+          '0%, 100%': { transform: 'translate3d(0, -0.15rem, 0)' },
+          '50%': { transform: 'translate3d(0, 0.15rem, 0)' },
+        },
+        'state-breathe': {
+          '0%, 100%': { opacity: '0.4', transform: 'scale(0.9)' },
+          '50%': { opacity: '0.8', transform: 'scale(1.08)' },
+        },
+        'state-halo': {
+          '0%': { opacity: '0.55', transform: 'scale(0.86)' },
+          '70%': { opacity: '0' },
+          '100%': { opacity: '0', transform: 'scale(1.4)' },
+        },
+        'state-drift': {
+          '0%, 100%': { transform: 'translate3d(0, 0, 0)' },
+          '33%': { transform: 'translate3d(0.3rem, -0.35rem, 0)' },
+          '66%': { transform: 'translate3d(-0.25rem, 0.3rem, 0)' },
+        },
+      },
+      animation: {
+        'fade-in-up': 'fade-in-up 200ms cubic-bezier(0.16, 1, 0.3, 1) both',
+        'fade-in': 'fade-in 0.5s ease-out forwards',
+        'ai-orbit': 'ai-orbit 9s linear infinite',
+        'ai-bob': 'ai-bob 2.4s ease-in-out infinite',
+        'ai-sweep': 'ai-sweep 1.8s ease-in-out infinite',
+        'ai-step': 'ai-step 1.5s ease-in-out infinite',
+        'pop-in': 'pop-in 0.3s ease-out forwards',
+        'state-rise': 'state-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both',
+        'state-reveal': 'state-reveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) both',
+        'state-float': 'state-float 5s ease-in-out infinite',
+        'state-breathe': 'state-breathe 6s ease-in-out infinite',
+        'state-halo': 'state-halo 4.5s cubic-bezier(0.25, 0.6, 0.35, 1) infinite',
+        'state-drift': 'state-drift 9s ease-in-out infinite',
+      },
+    },
+    /* `withMT` used to inject the Material breakpoints on top of the three below, and 48
+       call sites depend on them. They are declared explicitly here, with the same values,
+       so removing the library changes no layout. */
+    screens: {
+      sm: '540px',
+      tablet: '640px',
+      md: '720px',
+      lg: '960px',
+      laptop: '1024px',
+      xl: '1140px',
+      '2xl': '1320px',
+      desktop: '1368px',
+    },
+  },
+  variants: {
+    extend: {
+      boxShadow: ['hover'],
+      backgroundColor: ['hover'],
+      transitionProperty: ['hover'],
+      transitionTimingFunction: ['hover'],
+      transitionDuration: ['hover'],
+    },
+  },
+  plugins: [formsPlugin, typographyPlugin, containerQueriesPlugin, glassPlugin],
+};