@almadar/orb 1.9.4 → 1.9.5

package/shells/orb-shell/packages/client/tailwind-preset.cjs

@@ -0,0 +1,243 @@
+/**
+ * @almadar/ui Tailwind Preset
+ *
+ * Provides the complete Almadar design token system as a Tailwind preset.
+ * Includes a safelist of all CSS-variable-based arbitrary classes used by
+ * @almadar/ui components so Tailwind generates them without scanning node_modules.
+ *
+ * Usage in tailwind.config.js:
+ *   presets: [require('@almadar/ui/tailwind-preset')]
+ */
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class',
+  safelist: [
+  'accent-[var(--color-foreground)]',
+  'accent-[var(--color-primary)]',
+  'active:bg-[var(--color-muted)]',
+  'active:bg-[var(--color-primary)]',
+  'active:scale-[var(--active-scale)]',
+  'active:shadow-[var(--shadow-active)]',
+  'active:text-[var(--color-primary-foreground)]',
+  'bg-[var(--color-accent)]',
+  'bg-[var(--color-background)]',
+  'bg-[var(--color-border)]',
+  'bg-[var(--color-card)]',
+  'bg-[var(--color-error)]',
+  'bg-[var(--color-foreground)]',
+  'bg-[var(--color-info)]',
+  'bg-[var(--color-muted)]',
+  'bg-[var(--color-muted-foreground)]',
+  ':bg-[var(--color-primary)]',
+  'bg-[var(--color-primary)]',
+  'bg-[var(--color-primary-foreground)]',
+  'bg-[var(--color-secondary)]',
+  'bg-[var(--color-success)]',
+  'bg-[var(--color-surface)]',
+  'bg-[var(--color-table-header)]',
+  'bg-[var(--color-warning)]',
+  'border-b-[length:var(--border-width)]',
+  'border-b-[var(--color-foreground)]',
+  'border-b-[var(--color-primary)]',
+  'border-[length:var(--border-width)]',
+  'border-[length:var(--border-width-thin)]',
+  'border-l-[length:var(--border-width)]',
+  'border-l-[var(--color-foreground)]',
+  'border-l-[var(--color-primary)]',
+  'border-r-[length:var(--border-width)]',
+  'border-r-[var(--color-foreground)]',
+  'border-r-[var(--color-primary)]',
+  'border-t-[length:var(--border-width)]',
+  'border-t-[var(--color-foreground)]',
+  'border-t-[var(--color-primary)]',
+  'border-[var(--color-accent)]',
+  ':border-[var(--color-border)]',
+  'border-[var(--color-border)]',
+  'border-[var(--color-card)]',
+  'border-[var(--color-error)]',
+  'border-[var(--color-foreground)]',
+  'border-[var(--color-info)]',
+  ':border-[var(--color-primary)]',
+  'border-[var(--color-primary)]',
+  'border-[var(--color-success)]',
+  'border-[var(--color-table-border)]',
+  'border-[var(--color-warning)]',
+  'border-x-[length:var(--border-width)]',
+  'checked:bg-[var(--color-primary)]',
+  'dark:bg-[var(--color-background)]',
+  'dark:bg-[var(--color-card)]',
+  'dark:bg-[var(--color-foreground)]',
+  'dark:bg-[var(--color-muted)]',
+  'dark:border-[var(--color-border)]',
+  'dark:hover:bg-[var(--color-error)]',
+  'dark:hover:bg-[var(--color-muted)]',
+  'dark:text-[var(--color-error)]',
+  'dark:text-[var(--color-foreground)]',
+  'dark:text-[var(--color-muted-foreground)]',
+  'disabled:bg-[var(--color-muted)]',
+  'disabled:text-[var(--color-muted-foreground)]',
+  'duration-[var(--transition-fast)]',
+  'duration-[var(--transition-normal)]',
+  'fill-[var(--color-warning)]',
+  'focus:bg-[var(--color-card)]',
+  'focus:bg-[var(--color-muted)]',
+  'focus:border-[var(--color-error)]',
+  'focus:border-[var(--color-primary)]',
+  'focus:border-[var(--color-ring)]',
+  'focus:ring-[length:var(--focus-ring-width)]',
+  'focus:ring-offset-[length:var(--focus-ring-offset)]',
+  'focus:ring-[var(--color-error)]',
+  'focus:ring-[var(--color-ring)]',
+  'font-[var(--font-weight-bold)]',
+  'font-[var(--font-weight-medium)]',
+  'from-[var(--color-muted)]',
+  'group-hover:bg-[var(--color-foreground)]',
+  'group-hover:text-[var(--color-foreground)]',
+  'group-hover:text-[var(--color-muted-foreground)]',
+  'hover:bg-[var(--color-error)]',
+  'hover:bg-[var(--color-muted)]',
+  'hover:bg-[var(--color-muted-foreground)]',
+  'hover:bg-[var(--color-primary)]',
+  'hover:bg-[var(--color-primary-hover)]',
+  'hover:bg-[var(--color-secondary-hover)]',
+  'hover:bg-[var(--color-success)]',
+  'hover:bg-[var(--color-surface)]',
+  'hover:bg-[var(--color-surface-hover)]',
+  'hover:bg-[var(--color-table-row-hover)]',
+  'hover:bg-[var(--color-warning)]',
+  'hover:border-[var(--color-border)]',
+  'hover:border-[var(--color-border-hover)]',
+  'hover:border-[var(--color-muted-foreground)]',
+  'hover:border-[var(--color-primary)]',
+  'hover:ring-[var(--color-ring)]',
+  'hover:shadow-[var(--shadow-hover)]',
+  'hover:shadow-[var(--shadow-sm)]',
+  'hover:text-[var(--color-error)]',
+  'hover:text-[var(--color-error-foreground)]',
+  'hover:text-[var(--color-foreground)]',
+  'hover:text-[var(--color-primary)]',
+  'hover:text-[var(--color-success-foreground)]',
+  'hover:text-[var(--color-warning-foreground)]',
+  'peer-focus:ring-[var(--color-error)]',
+  'peer-focus:ring-[var(--color-ring)]',
+  'placeholder:text-[var(--color-muted-foreground)]',
+  'placeholder:text-[var(--color-placeholder)]',
+  'ring-[var(--color-accent)]',
+  'ring-[var(--color-error)]',
+  'ring-[var(--color-info)]',
+  'ring-[var(--color-muted-foreground)]',
+  'ring-[var(--color-primary)]',
+  'ring-[var(--color-success)]',
+  'ring-[var(--color-warning)]',
+  'rounded-l-[var(--radius-sm)]',
+  'rounded-r-[var(--radius-sm)]',
+  'rounded-t-[var(--radius-lg)]',
+  'rounded-t-[var(--radius-sm)]',
+  'rounded-[var(--radius-full)]',
+  'rounded-[var(--radius-lg)]',
+  'rounded-[var(--radius-md)]',
+  'rounded-[var(--radius-sm)]',
+  'rounded-[var(--radius-xl)]',
+  'shadow-[var(--shadow-lg)]',
+  'shadow-[var(--shadow-main)]',
+  'shadow-[var(--shadow-sm)]',
+  'text-[var(--color-accent)]',
+  'text-[var(--color-accent-foreground)]',
+  'text-[var(--color-background)]',
+  'text-[var(--color-card-foreground)]',
+  'text-[var(--color-error)]',
+  'text-[var(--color-error-foreground)]',
+  'text-[var(--color-foreground)]',
+  'text-[var(--color-info)]',
+  'text-[var(--color-info-foreground)]',
+  'text-[var(--color-muted)]',
+  'text-[var(--color-muted-foreground)]',
+  'text-[var(--color-primary)]',
+  ':text-[var(--color-primary-foreground)]',
+  'text-[var(--color-primary-foreground)]',
+  'text-[var(--color-secondary-foreground)]',
+  'text-[var(--color-success)]',
+  'text-[var(--color-warning)]',
+  'text-[var(--color-warning-foreground)]',
+  'to-[var(--color-accent)]',
+  ],
+  theme: {
+    fontFamily: {
+      sans: ['var(--font-family)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+      mono: ['var(--font-family-mono, ui-monospace)', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'monospace'],
+    },
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: 'var(--color-primary)',
+          foreground: 'var(--color-primary-foreground)',
+          hover: 'var(--color-primary-hover)',
+        },
+        secondary: {
+          DEFAULT: 'var(--color-secondary)',
+          foreground: 'var(--color-secondary-foreground)',
+          hover: 'var(--color-secondary-hover)',
+        },
+        muted: {
+          DEFAULT: 'var(--color-muted)',
+          foreground: 'var(--color-muted-foreground)',
+        },
+        accent: {
+          DEFAULT: 'var(--color-accent)',
+          foreground: 'var(--color-accent-foreground)',
+        },
+        background: 'var(--color-background)',
+        foreground: 'var(--color-foreground)',
+        card: {
+          DEFAULT: 'var(--color-card)',
+          foreground: 'var(--color-card-foreground)',
+        },
+        surface: 'var(--color-surface)',
+        border: 'var(--color-border)',
+        input: 'var(--color-input)',
+        ring: 'var(--color-ring)',
+        error: {
+          DEFAULT: 'var(--color-error)',
+          foreground: 'var(--color-error-foreground)',
+        },
+        success: {
+          DEFAULT: 'var(--color-success)',
+          foreground: 'var(--color-success-foreground)',
+        },
+        warning: {
+          DEFAULT: 'var(--color-warning)',
+          foreground: 'var(--color-warning-foreground)',
+        },
+        info: {
+          DEFAULT: 'var(--color-info)',
+          foreground: 'var(--color-info-foreground)',
+        },
+      },
+      borderRadius: {
+        none: 'var(--radius-none, 0)',
+        sm: 'var(--radius-sm)',
+        md: 'var(--radius-md)',
+        lg: 'var(--radius-lg)',
+        xl: 'var(--radius-xl)',
+        full: 'var(--radius-full)',
+      },
+      boxShadow: {
+        sm: 'var(--shadow-sm)',
+        DEFAULT: 'var(--shadow-main)',
+        lg: 'var(--shadow-lg)',
+        inner: 'var(--shadow-inner)',
+      },
+      fontWeight: {
+        normal: 'var(--font-weight-normal, 400)',
+        medium: 'var(--font-weight-medium, 500)',
+        bold: 'var(--font-weight-bold, 600)',
+      },
+      transitionDuration: {
+        fast: 'var(--transition-fast, 150ms)',
+        normal: 'var(--transition-normal, 250ms)',
+        slow: 'var(--transition-slow, 400ms)',
+      },
+    },
+  },
+};

package/shells/orb-shell/packages/client/tailwind.config.js

@@ -3,7 +3,7 @@ const require = createRequire(import.meta.url);
 
 /** @type {import('tailwindcss').Config} */
 export default {
-  presets: [require('@almadar/ui/tailwind-preset')],
+  presets: [require('./tailwind-preset.cjs')],
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",