@stachelock/ui 0.1.0

package/tailwind.config.js

@@ -0,0 +1,110 @@
+import { fontFamily as _fontFamily } from "tailwindcss/defaultTheme";
+import formsPlugin from '@tailwindcss/forms';
+import typographyPlugin from '@tailwindcss/typography';
+
+export default {
+  prefix: 'sl-', // Stachelock prefix to avoid conflicts
+  content: [
+    './src/**/*.{vue,js,ts,jsx,tsx}',
+    './stories/**/*.{vue,js,ts,jsx,tsx,mdx}',
+    './index.html'
+  ],
+  darkMode: 'class',
+  theme: {
+    fontFamily: {
+      sans: ["Inter", ..._fontFamily.sans],
+    },
+    extend: {
+      ringColor: {
+        DEFAULT: '#3e4b9a', // stachelock-600
+      },
+      ringOpacity: {
+        DEFAULT: '1',
+      },
+      outline: {
+        DEFAULT: ['2px solid #3e4b9a', '2px'], // stachelock-600
+      },
+      ringOffsetColor: {
+        DEFAULT: '#ffffff',
+      },
+      ringWidth: {
+        DEFAULT: '2px',
+      },
+      boxShadow: {
+        focus: '0 0 0 2px #3e4b9a', // stachelock-600
+        'focus-gray': '0 0 0 2px #d1d5db', // light gray for mobile
+      },
+      fontSize: {
+        "2xs": "0.6rem",
+        "3xs": "0.5rem",
+        "4xs": "0.4rem",
+        "5xs": "0.3rem",
+        "6xs": "0.2rem",
+        "7xs": "0.1rem",
+        "7xl": "4.5rem",
+        "8xl": "6.0rem"
+      },
+      colors: {
+        "stachelock-900": "#0f1326",
+        "stachelock-800": "#1f264d",
+        "stachelock-700": "#2e3873",
+        "stachelock-600": "#3e4b9a",
+        "stachelock-500": "#4d5ec0",
+        "stachelock-400": "#717ecd",
+        "stachelock-300": "#949ed9",
+        "stachelock-200": "#b8bfe6",
+        "stachelock-100": "#dbdff2",
+        "stachelock-050": "#edeff9",
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.5s ease-in-out',
+        'fade-out': 'fadeOut 0.5s ease-in-out',
+        'slide-up': 'slideUp 0.5s ease-in-out forwards',
+        'slide-down': 'slideDown 0.5s ease-in-out forwards',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        fadeOut: {
+          '0%': { opacity: '1' },
+          '100%': { opacity: '0' },
+        },
+        slideUp: {
+          '0%': { transform: 'translateY(0%)', opacity: '1' },
+          '100%': { transform: 'translateY(-100%)', opacity: '1' },
+        },
+        slideDown: {
+          '0%': { transform: 'translateY(-100%)', opacity: '0' },
+          '100%': { transform: 'translateY(0%)', opacity: '1' },
+        },
+      },
+    },
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [
+    formsPlugin({
+      strategy: 'class', // Use class-based forms instead of global styles
+    }),
+    typographyPlugin,
+    function ({ addUtilities }) {
+      // Utilities for optional custom focus handling
+      addUtilities({
+        '.sl-focus-stachelock': {
+          '&:focus': {
+            'outline': 'none'
+          }
+        },
+        '.sl-focus-none': {
+          '&:focus': {
+            'outline': 'none',
+            'box-shadow': 'none',
+          }
+        }
+      });
+    }
+  ],
+}