@ews-admin/global-design-system 1.1.1 → 1.1.5

package/tailwind.preset.js

@@ -0,0 +1,166 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [],
+  theme: {
+    extend: {
+      colors: {
+        // EWS Theme Colors - These will be available as CSS variables
+        "ews-primary": "var(--ews-primary, #21596c)",
+        "ews-primary-hover": "var(--ews-primary-hover, #1a4756)",
+        "ews-primary-light": "var(--ews-primary-light, #c0d0d4)",
+        "ews-secondary": "var(--ews-secondary, #3ba1a1)",
+        "ews-secondary-hover": "var(--ews-secondary-hover, #308181)",
+        "ews-success": "var(--ews-success, #059669)",
+        "ews-success-hover": "var(--ews-success-hover, #047857)",
+        "ews-warning": "var(--ews-warning, #d97706)",
+        "ews-warning-hover": "var(--ews-warning-hover, #b45309)",
+        "ews-error": "var(--ews-error, #dc2626)",
+        "ews-error-hover": "var(--ews-error-hover, #b91c1c)",
+
+        // EWS Gray Scale
+        "ews-gray-50": "#f8fafc",
+        "ews-gray-100": "#f1f5f9",
+        "ews-gray-200": "#e2e8f0",
+        "ews-gray-300": "#cbd5e1",
+        "ews-gray-400": "#94a3b8",
+        "ews-gray-500": "#64748b",
+        "ews-gray-600": "#475569",
+        "ews-gray-700": "#334155",
+        "ews-gray-800": "#1e293b",
+        "ews-gray-900": "#0f172a",
+
+        // Standard Tailwind color scales for compatibility
+        primary: {
+          50: "#f0f9ff",
+          100: "#e0f2fe",
+          200: "#bae6fd",
+          300: "#7dd3fc",
+          400: "#38bdf8",
+          500: "var(--ews-primary, #21596c)",
+          600: "var(--ews-primary-hover, #1a4756)",
+          700: "var(--ews-primary-hover, #1a4756)",
+          800: "#0f2d36",
+          900: "#0a1f26",
+        },
+        secondary: {
+          50: "#f0fdfa",
+          100: "#ccfbf1",
+          200: "#99f6e4",
+          300: "#5eead4",
+          400: "#2dd4bf",
+          500: "var(--ews-secondary, #3ba1a1)",
+          600: "var(--ews-secondary-hover, #308181)",
+          700: "#0f766e",
+          800: "#115e59",
+          900: "#134e4a",
+        },
+        success: {
+          50: "#f0fdf4",
+          100: "#dcfce7",
+          200: "#bbf7d0",
+          300: "#86efac",
+          400: "#4ade80",
+          500: "var(--ews-success, #059669)",
+          600: "var(--ews-success-hover, #047857)",
+          700: "#15803d",
+          800: "#166534",
+          900: "#14532d",
+        },
+        warning: {
+          50: "#fffbeb",
+          100: "#fef3c7",
+          200: "#fde68a",
+          300: "#fcd34d",
+          400: "#fbbf24",
+          500: "var(--ews-warning, #d97706)",
+          600: "var(--ews-warning-hover, #b45309)",
+          700: "#b45309",
+          800: "#92400e",
+          900: "#78350f",
+        },
+        error: {
+          50: "#fef2f2",
+          100: "#fee2e2",
+          200: "#fecaca",
+          300: "#fca5a5",
+          400: "#f87171",
+          500: "var(--ews-error, #dc2626)",
+          600: "var(--ews-error-hover, #b91c1c)",
+          700: "#b91c1c",
+          800: "#991b1b",
+          900: "#7f1d1d",
+        },
+        neutral: {
+          50: "#f8fafc",
+          100: "#f1f5f9",
+          200: "#e2e8f0",
+          300: "#cbd5e1",
+          400: "#94a3b8",
+          500: "#64748b",
+          600: "#475569",
+          700: "#334155",
+          800: "#1e293b",
+          900: "#0f172a",
+        },
+      },
+      fontFamily: {
+        // Add EWS font families if needed
+        sans: ["Inter", "system-ui", "sans-serif"],
+      },
+      spacing: {
+        // Add EWS specific spacing if needed
+      },
+      borderRadius: {
+        // Add EWS specific border radius if needed
+      },
+      boxShadow: {
+        // Standard Tailwind shadows
+        sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+        md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+        lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+        xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+        "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+        inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
+        none: "0 0 #0000",
+
+        // EWS specific shadows
+        "ews-sm": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+        "ews-md":
+          "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+        "ews-lg":
+          "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+        soft: "0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)",
+        medium:
+          "0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+        large:
+          "0 10px 40px -10px rgba(0, 0, 0, 0.15), 0 2px 10px -2px rgba(0, 0, 0, 0.05)",
+      },
+    },
+  },
+  plugins: [
+    // Add any EWS specific plugins here
+    function ({ addUtilities }) {
+      const newUtilities = {
+        ".ews-text-primary": {
+          color: "var(--ews-primary)",
+        },
+        ".ews-text-secondary": {
+          color: "var(--ews-secondary)",
+        },
+        ".ews-bg-primary": {
+          backgroundColor: "var(--ews-primary)",
+        },
+        ".ews-bg-secondary": {
+          backgroundColor: "var(--ews-secondary)",
+        },
+        ".ews-border-primary": {
+          borderColor: "var(--ews-primary)",
+        },
+        ".ews-border-secondary": {
+          borderColor: "var(--ews-secondary)",
+        },
+      };
+      addUtilities(newUtilities);
+    },
+  ],
+};