@skalar-saas/design-system 0.1.67

package/tailwind.preset.js

@@ -0,0 +1,278 @@
+/**
+ * Skalar Design System - Tailwind CSS Preset
+ *
+ * This preset extends Tailwind CSS with the Skalar Design System theme.
+ * Import this in your tailwind.config.js to use the design system tokens.
+ *
+ * @example
+ * // In your tailwind.config.js:
+ * import skalarPreset from '@skalar-app/design-system/preset';
+ *
+ * export default {
+ *   presets: [skalarPreset],
+ *   content: ['./src/**\/*.{js,ts,jsx,tsx}'],
+ * }
+ */
+
+export default {
+  darkMode: 'class', // Enable dark mode via class
+  theme: {
+    extend: {
+      fontFamily: {
+        inter: ['var(--font-inter)', 'sans-serif'],
+        'space-grotesk': ['var(--font-space-grotesk)', 'sans-serif'],
+      },
+      colors: {
+        background: 'var(--background)',
+        foreground: 'var(--foreground)',
+
+        // Primitive colors
+        black: 'var(--black)',
+        white: 'var(--white)',
+
+        // Info colors
+        info: {
+          em: 'var(--info-em)',
+          main: 'var(--info-main)',
+          'accent-1': 'var(--info-accent-1)',
+          'accent-2': 'var(--info-accent-2)',
+          'accent-3': 'var(--info-accent-3)',
+        },
+
+        // Success colors
+        success: {
+          em: 'var(--text-success-em)',
+          main: 'var(--success-main)',
+          'accent-1': 'var(--success-accent-1)',
+          'accent-2': 'var(--success-accent-2)',
+          'accent-3': 'var(--success-accent-3)',
+        },
+
+        // Warning colors
+        warning: {
+          em: 'var(--text-warning-em)',
+          main: 'var(--warning-main)',
+          'accent-0': 'var(--warning-accent-0)',
+          'accent-1': 'var(--warning-accent-1)',
+          'accent-3': 'var(--warning-accent-3)',
+        },
+
+        // Danger colors
+        danger: {
+          em: 'var(--danger-em)',
+          main: 'var(--danger-main)',
+          'accent-1': 'var(--danger-accent-1)',
+          'accent-2': 'var(--danger-accent-2)',
+          'accent-3': 'var(--danger-accent-3)',
+        },
+
+        // ========================================
+        // SEMANTIC TOKENS (NEW - USE THESE!)
+        // ========================================
+
+        // Surface colors
+        surface: {
+          bg: 'var(--surface-bg)',
+          1: 'var(--surface-1)',
+          2: 'var(--surface-2)',
+          3: 'var(--surface-3)',
+          4: 'var(--surface-4)',
+        },
+
+        // Alternative surface syntax (for convenience)
+        'surface-bg': 'var(--surface-bg)',
+        'surface-1': 'var(--surface-1)',
+        'surface-2': 'var(--surface-2)',
+        'surface-3': 'var(--surface-3)',
+        'surface-4': 'var(--surface-4)',
+
+        // Text emphasis colors
+        text: {
+          disabled: 'var(--text-disabled)',
+          placeholder: 'var(--placeholder)',
+          'low-em': 'var(--low-em)',
+          'med-em': 'var(--med-em)',
+          'high-em': 'var(--high-em)',
+        },
+
+        // Alternative text syntax (for convenience)
+        disabled: 'var(--text-disabled)',
+        placeholder: 'var(--placeholder)',
+        'low-em': 'var(--low-em)',
+        'med-em': 'var(--med-em)',
+        'high-em': 'var(--high-em)',
+
+        // Brand colors
+        brand: {
+          primary: {
+            main: 'var(--brand-primary-main)',
+            'accent-3': 'var(--brand-primary-accent-3)',
+          },
+          secondary: {
+            main: 'var(--brand-secondary-main)',
+            'accent-3': 'var(--brand-secondary-accent-3)',
+          },
+        },
+
+        // Alternative brand syntax (for convenience)
+        'brand-primary-main': 'var(--brand-primary-main)',
+        'brand-primary-accent-3': 'var(--brand-primary-accent-3)',
+        'brand-secondary-main': 'var(--brand-secondary-main)',
+        'brand-secondary-accent-3': 'var(--brand-secondary-accent-3)',
+      },
+
+      spacing: {
+        0: 'var(--spacing-0)',
+        1: 'var(--spacing-1)',
+        2: 'var(--spacing-2)',
+        3: 'var(--spacing-3)',
+        4: 'var(--spacing-4)',
+        5: 'var(--spacing-5)',
+        6: 'var(--spacing-6)',
+        7: 'var(--spacing-7)',
+        8: 'var(--spacing-8)',
+        9: 'var(--spacing-9)',
+        10: 'var(--spacing-10)',
+        11: 'var(--spacing-11)',
+        12: 'var(--spacing-12)',
+        13: 'var(--spacing-13)',
+        14: 'var(--spacing-14)',
+        15: 'var(--spacing-15)',
+        16: 'var(--spacing-16)',
+        17: 'var(--spacing-17)',
+        18: 'var(--spacing-18)',
+        19: 'var(--spacing-19)',
+        20: 'var(--spacing-20)',
+        21: 'var(--spacing-21)',
+        22: 'var(--spacing-22)',
+        23: 'var(--spacing-23)',
+        24: 'var(--spacing-24)',
+        25: 'var(--spacing-25)',
+        26: 'var(--spacing-26)',
+      },
+
+      borderRadius: {
+        0: 'var(--spacing-0)',
+        1: 'var(--spacing-1)',
+        2: 'var(--spacing-2)',
+        3: 'var(--spacing-3)',
+        4: 'var(--spacing-4)',
+        5: 'var(--spacing-5)',
+        6: 'var(--spacing-6)',
+        7: 'var(--spacing-7)',
+        8: 'var(--spacing-8)',
+        9: 'var(--spacing-9)',
+        10: 'var(--spacing-10)',
+        11: 'var(--spacing-11)',
+        12: 'var(--spacing-12)',
+        13: 'var(--spacing-13)',
+        14: 'var(--spacing-14)',
+        15: 'var(--spacing-15)',
+        16: 'var(--spacing-16)',
+        17: 'var(--spacing-17)',
+        18: 'var(--spacing-18)',
+        19: 'var(--spacing-19)',
+        20: 'var(--spacing-20)',
+        21: 'var(--spacing-21)',
+        22: 'var(--spacing-22)',
+        23: 'var(--spacing-23)',
+        24: 'var(--spacing-24)',
+        25: 'var(--spacing-25)',
+        26: 'var(--spacing-26)',
+      },
+
+      boxShadow: {
+        'e1': 'var(--shadow-e1)',
+        'e2': 'var(--shadow-e2)',
+        'e3': 'var(--shadow-e3)',
+      },
+
+      // ========================================
+      // LAYOUT SYSTEM
+      // ========================================
+
+      /**
+       * Container max-width utilities
+       * Usage: max-w-container, max-w-container-narrow, etc.
+       */
+      maxWidth: {
+        'container': 'var(--layout-container-max-width)',
+        'container-narrow': 'var(--layout-container-narrow)',
+        'container-medium': 'var(--layout-container-medium)',
+        'container-wide': 'var(--layout-container-wide)',
+      },
+
+      /**
+       * Sidebar width utilities
+       * Usage: w-sidebar, w-sidebar-collapsed, w-sidebar-nav
+       */
+      width: {
+        'sidebar': 'var(--layout-sidebar-width)',
+        'sidebar-collapsed': 'var(--layout-sidebar-collapsed)',
+        'sidebar-nav': 'var(--layout-sidebar-navigation)',
+      },
+
+      /**
+       * Min-width utilities for sidebars
+       * Usage: min-w-sidebar, min-w-sidebar-collapsed
+       */
+      minWidth: {
+        'sidebar': 'var(--layout-sidebar-width)',
+        'sidebar-collapsed': 'var(--layout-sidebar-collapsed)',
+        'sidebar-nav': 'var(--layout-sidebar-navigation)',
+      },
+
+      /**
+       * Navbar height utilities
+       * Usage: h-navbar, h-navbar-header, h-navbar-tabs
+       */
+      height: {
+        'navbar': 'var(--layout-navbar-total-height)',
+        'navbar-header': 'var(--layout-navbar-header-height)',
+        'navbar-tabs': 'var(--layout-navbar-tabs-height)',
+      },
+
+      /**
+       * Min-height utilities for navbar
+       * Usage: min-h-navbar, min-h-navbar-header
+       */
+      minHeight: {
+        'navbar': 'var(--layout-navbar-total-height)',
+        'navbar-header': 'var(--layout-navbar-header-height)',
+        'navbar-tabs': 'var(--layout-navbar-tabs-height)',
+      },
+
+      /**
+       * Container padding utilities (for horizontal padding)
+       * Usage: px-container-mobile, px-container-tablet, px-container-desktop
+       */
+      padding: {
+        'container-mobile': 'var(--layout-container-padding-mobile)',
+        'container-tablet': 'var(--layout-container-padding-tablet)',
+        'container-desktop': 'var(--layout-container-padding-desktop)',
+        'container-desktop-lg': 'var(--layout-container-padding-desktop-lg)',
+      },
+
+      /**
+       * Margin utilities for container padding (useful for negative margins)
+       * Usage: mx-container-mobile, -mx-container-desktop
+       */
+      margin: {
+        'container-mobile': 'var(--layout-container-padding-mobile)',
+        'container-tablet': 'var(--layout-container-padding-tablet)',
+        'container-desktop': 'var(--layout-container-padding-desktop)',
+        'container-desktop-lg': 'var(--layout-container-padding-desktop-lg)',
+      },
+
+      /**
+       * Inset utilities for sticky positioning with navbar offset
+       * Usage: top-navbar, top-navbar-header
+       */
+      inset: {
+        'navbar': 'var(--layout-navbar-total-height)',
+        'navbar-header': 'var(--layout-navbar-header-height)',
+        'navbar-tabs': 'var(--layout-navbar-tabs-height)',
+      },
+    },
+  },
+};