@elsapiens/styles 0.1.3 → 0.1.6

package/dist/components.css

@@ -401,24 +401,15 @@
   inset-inline-end: 0;
   display: flex;
   align-items: center;
-  padding-inline-end: var(--el-spacing-px-md);
-}
-
-/* Size variants for prefix/suffix */
-.el-input-prefix-icon-sm {
-  padding-inline-start: 0;
-}
-
-.el-input-prefix-icon-lg {
-  padding-inline-start: 0;
+  padding-inline-end: 0;
 }
 
 .el-input-suffix-icon-sm {
-  padding-inline-end: var(--el-spacing-px-sm);
+  padding-inline-end: var(--el-spacing-px-sm, 0.5rem);
 }
 
 .el-input-suffix-icon-lg {
-  padding-inline-end: var(--el-spacing-px-lg);
+  padding-inline-end: var(--el-spacing-px-lg, 0.75rem);
 }
 
 /* Picker suffix icon - positioned at the extended edge of inputs with negative margins */
@@ -443,32 +434,33 @@
 }
 
 /* Input padding adjustments when using prefix/suffix icons */
+/* Formula: icon-size + gap * 2 */
 .el-input-has-prefix {
-  padding-inline-start: calc(var(--el-spacing-px-md) + 1.5rem);
+  padding-inline-start: calc(var(--el-icon-size-md, 1.25rem) + var(--el-spacing-px-md, 0.625rem) * 2);
 }
 
 .el-input-has-prefix-sm {
-  padding-inline-start: calc(var(--el-spacing-px-sm) + 1.25rem);
+  padding-inline-start: calc(var(--el-icon-size-sm, 1rem) + var(--el-spacing-px-sm, 0.5rem) * 2);
 }
 
 .el-input-has-prefix-lg {
-  padding-inline-start: calc(var(--el-spacing-px-lg) + 1.75rem);
+  padding-inline-start: calc(var(--el-icon-size-lg, 1.5rem) + var(--el-spacing-px-lg, 0.75rem) * 2);
 }
 
 .el-input-has-prefix-narrow {
-  padding-inline-start: calc(var(--el-spacing-px-md) + 1rem);
+  padding-inline-start: calc(0.75rem + var(--el-spacing-px-md, 0.625rem) * 2);
 }
 
 .el-input-has-suffix {
-  padding-inline-end: calc(var(--el-spacing-px-md) + 1.25rem);
+  padding-inline-end: calc(var(--el-icon-size-md, 1.25rem) + var(--el-spacing-px-md, 0.625rem) * 2);
 }
 
 .el-input-has-suffix-sm {
-  padding-inline-end: calc(var(--el-spacing-px-sm) + 1rem);
+  padding-inline-end: calc(var(--el-icon-size-sm, 1rem) + var(--el-spacing-px-sm, 0.5rem) * 2);
 }
 
 .el-input-has-suffix-lg {
-  padding-inline-end: calc(var(--el-spacing-px-lg) + 1.5rem);
+  padding-inline-end: calc(var(--el-icon-size-lg, 1.5rem) + var(--el-spacing-px-lg, 0.75rem) * 2);
 }
 
 /* ============================================
@@ -622,15 +614,23 @@
 .el-gap-field { gap: calc(var(--el-container-px, var(--el-spacing-px-md)) * 1.5); }
 
 /* Buttons and inputs inside el-gap-field inside padding containers - extend to visual edge */
+/* All inputs and buttons get negative margins for edge-to-edge layout */
 [class*="el-p-"] .el-gap-field .el-btn,
 [class*="el-p-"] .el-gap-field .el-input,
 [class*="el-px-"] .el-gap-field .el-btn,
 [class*="el-px-"] .el-gap-field .el-input {
-  padding-inline: calc(var(--el-container-px) * 0.5);
   margin-inline: calc(var(--el-container-px) * -0.5);
 }
 
-/* Only inputs need width adjustment to override 100% from .el-input */
+/* Padding override only for inputs WITHOUT prefix/suffix icons (they have their own padding) */
+[class*="el-p-"] .el-gap-field .el-btn,
+[class*="el-p-"] .el-gap-field .el-input:not(.el-input-has-prefix):not(.el-input-has-suffix):not(.el-input-has-prefix-sm):not(.el-input-has-prefix-lg):not(.el-input-has-suffix-sm):not(.el-input-has-suffix-lg):not(.el-input-has-prefix-narrow),
+[class*="el-px-"] .el-gap-field .el-btn,
+[class*="el-px-"] .el-gap-field .el-input:not(.el-input-has-prefix):not(.el-input-has-suffix):not(.el-input-has-prefix-sm):not(.el-input-has-prefix-lg):not(.el-input-has-suffix-sm):not(.el-input-has-suffix-lg):not(.el-input-has-prefix-narrow) {
+  padding-inline: calc(var(--el-container-px) * 0.5);
+}
+
+/* All inputs need width adjustment to override 100% from .el-input */
 [class*="el-p-"] .el-gap-field .el-input,
 [class*="el-px-"] .el-gap-field .el-input {
   width: calc(100% + var(--el-container-px));
@@ -842,23 +842,11 @@
   padding-inline: calc(var(--el-container-px) * 0.5);
 }
 
-/* Summary - default margin when not inside padding containers */
-.el-summary {
-  margin-inline: calc(var(--el-spacing-px-md) * -1);
-  width: calc(100% + var(--el-spacing-px-md) * 2);
-}
-
-/* Summary inner elements - default padding when not inside padding containers */
+/* Summary inner elements - consistent padding */
 .el-summary-item {
   padding-inline: var(--el-spacing-px-md);
 }
 
-/* Summary inner elements - cascaded padding when inside padding containers */
-[class*="el-p-"] .el-summary .el-summary-item,
-[class*="el-px-"] .el-summary .el-summary-item {
-  padding-inline: calc(var(--el-container-px) * 0.5);
-}
-
 /* Textarea - cascaded styles when inside padding containers */
 [class*="el-p-"] .el-textarea,
 [class*="el-px-"] .el-textarea {

package/dist/index.css

@@ -643,7 +643,7 @@
   .el-px-lg { padding-left: var(--el-layout-gap-lg); padding-right: var(--el-layout-gap-lg); --el-container-px: var(--el-layout-gap-lg); }
   .el-px-xl { padding-left: var(--el-layout-gap-xl); padding-right: var(--el-layout-gap-xl); --el-container-px: var(--el-layout-gap-xl); }
 
-  /* Buttons and inputs inside el-gap-field inside padding containers - both padding and margin are 0.5x container padding */
+  /* All buttons and inputs inside el-gap-field - negative margins for edge-to-edge layout */
   .el-p-xs .el-gap-field .el-btn, .el-p-sm .el-gap-field .el-btn, .el-p-md .el-gap-field .el-btn,
   .el-p-lg .el-gap-field .el-btn, .el-p-xl .el-gap-field .el-btn,
   .el-p-section .el-gap-field .el-btn, .el-p-content .el-gap-field .el-btn,
@@ -654,10 +654,39 @@
   .el-p-section .el-gap-field .el-input, .el-p-content .el-gap-field .el-input,
   .el-px-xs .el-gap-field .el-input, .el-px-sm .el-gap-field .el-input, .el-px-md .el-gap-field .el-input,
   .el-px-lg .el-gap-field .el-input, .el-px-xl .el-gap-field .el-input {
-    padding-inline: calc(var(--el-container-px) * 0.5);
     margin-inline: calc(var(--el-container-px) * -0.5);
   }
 
+  /* Padding override only for inputs WITHOUT prefix/suffix icons (they have their own padding) */
+  .el-p-xs .el-gap-field .el-btn, .el-p-sm .el-gap-field .el-btn, .el-p-md .el-gap-field .el-btn,
+  .el-p-lg .el-gap-field .el-btn, .el-p-xl .el-gap-field .el-btn,
+  .el-p-section .el-gap-field .el-btn, .el-p-content .el-gap-field .el-btn,
+  .el-px-xs .el-gap-field .el-btn, .el-px-sm .el-gap-field .el-btn, .el-px-md .el-gap-field .el-btn,
+  .el-px-lg .el-gap-field .el-btn, .el-px-xl .el-gap-field .el-btn,
+  .el-p-xs .el-gap-field .el-input:not([class*="el-input-has-prefix"]):not([class*="el-input-has-suffix"]),
+  .el-p-sm .el-gap-field .el-input:not([class*="el-input-has-prefix"]):not([class*="el-input-has-suffix"]),
+  .el-p-md .el-gap-field .el-input:not([class*="el-input-has-prefix"]):not([class*="el-input-has-suffix"]),
+  .el-p-lg .el-gap-field .el-input:not([class*="el-input-has-prefix"]):not([class*="el-input-has-suffix"]),
+  .el-p-xl .el-gap-field .el-input:not([class*="el-input-has-prefix"]):not([class*="el-input-has-suffix"]),
+  .el-p-section .el-gap-field .el-input:not([class*="el-input-has-prefix"]):not([class*="el-input-has-suffix"]),
+  .el-p-content .el-gap-field .el-input:not([class*="el-input-has-prefix"]):not([class*="el-input-has-suffix"]),
+  .el-px-xs .el-gap-field .el-input:not([class*="el-input-has-prefix"]):not([class*="el-input-has-suffix"]),
+  .el-px-sm .el-gap-field .el-input:not([class*="el-input-has-prefix"]):not([class*="el-input-has-suffix"]),
+  .el-px-md .el-gap-field .el-input:not([class*="el-input-has-prefix"]):not([class*="el-input-has-suffix"]),
+  .el-px-lg .el-gap-field .el-input:not([class*="el-input-has-prefix"]):not([class*="el-input-has-suffix"]),
+  .el-px-xl .el-gap-field .el-input:not([class*="el-input-has-prefix"]):not([class*="el-input-has-suffix"]) {
+    padding-inline: calc(var(--el-container-px) * 0.5);
+  }
+
+  /* All inputs need width adjustment to override 100% from .el-input */
+  .el-p-xs .el-gap-field .el-input, .el-p-sm .el-gap-field .el-input, .el-p-md .el-gap-field .el-input,
+  .el-p-lg .el-gap-field .el-input, .el-p-xl .el-gap-field .el-input,
+  .el-p-section .el-gap-field .el-input, .el-p-content .el-gap-field .el-input,
+  .el-px-xs .el-gap-field .el-input, .el-px-sm .el-gap-field .el-input, .el-px-md .el-gap-field .el-input,
+  .el-px-lg .el-gap-field .el-input, .el-px-xl .el-gap-field .el-input {
+    width: calc(100% + var(--el-container-px));
+  }
+
   /* Padding Y (vertical) */
   .el-py-xs { padding-top: var(--el-layout-gap-xs); padding-bottom: var(--el-layout-gap-xs); }
   .el-py-sm { padding-top: var(--el-layout-gap-sm); padding-bottom: var(--el-layout-gap-sm); }

package/dist/variables.css

@@ -138,6 +138,7 @@
   --card-padding-lg: 1.25rem;
   --card-gap: 0.75rem;
   --card-header-gap: 0.375rem;
+  --el-card-radius: var(--radius-lg);
 
   /* Modal */
   --modal-padding: 1.25rem;
@@ -229,16 +230,16 @@
   --el-dropdown-max-height: 18rem;  /* 288px */
 
   /* Badge */
-  --el-badge-px-sm: 0.375rem;
-  --el-badge-py-sm: 0.125rem;
-  --el-badge-px-md: 0.5rem;
-  --el-badge-py-md: 0.125rem;
-  --el-badge-px-lg: 0.625rem;
-  --el-badge-py-lg: 0.25rem;
-  --el-badge-font-size-sm: 0.6875rem;
-  --el-badge-font-size-md: 0.75rem;
-  --el-badge-font-size-lg: 0.8125rem;
-  --el-badge-icon-size: 0.75rem;
+  --el-badge-px-sm: 0.5rem;
+  --el-badge-py-sm: 0.1875rem;
+  --el-badge-px-md: 0.625rem;
+  --el-badge-py-md: 0.25rem;
+  --el-badge-px-lg: 0.75rem;
+  --el-badge-py-lg: 0.375rem;
+  --el-badge-font-size-sm: 0.75rem;
+  --el-badge-font-size-md: 0.8125rem;
+  --el-badge-font-size-lg: 0.875rem;
+  --el-badge-icon-size: 0.875rem;
 
   /* Tabs */
   --el-tabs-padding: 0.25rem;
@@ -369,6 +370,7 @@
   --card-padding-lg: 1rem;
   --card-gap: 0.5rem;
   --card-header-gap: 0.25rem;
+  --el-card-radius: var(--radius-md);
 
   --modal-padding: 0.875rem;
   --modal-gap: 0.75rem;
@@ -446,16 +448,16 @@
   --el-dropdown-max-height: 14rem;
 
   /* Badge - Compact */
-  --el-badge-px-sm: 0.25rem;
-  --el-badge-py-sm: 0.0625rem;
-  --el-badge-px-md: 0.375rem;
-  --el-badge-py-md: 0.0625rem;
-  --el-badge-px-lg: 0.5rem;
-  --el-badge-py-lg: 0.125rem;
-  --el-badge-font-size-sm: 0.5625rem;
-  --el-badge-font-size-md: 0.625rem;
-  --el-badge-font-size-lg: 0.6875rem;
-  --el-badge-icon-size: 0.625rem;
+  --el-badge-px-sm: 0.375rem;
+  --el-badge-py-sm: 0.125rem;
+  --el-badge-px-md: 0.5rem;
+  --el-badge-py-md: 0.125rem;
+  --el-badge-px-lg: 0.625rem;
+  --el-badge-py-lg: 0.1875rem;
+  --el-badge-font-size-sm: 0.6875rem;
+  --el-badge-font-size-md: 0.75rem;
+  --el-badge-font-size-lg: 0.8125rem;
+  --el-badge-icon-size: 0.75rem;
 
   /* Tabs - Compact */
   --el-tabs-padding: 0.125rem;
@@ -583,6 +585,7 @@
   --card-padding-lg: 2rem;
   --card-gap: 1rem;
   --card-header-gap: 0.5rem;
+  --el-card-radius: var(--radius-xl);
 
   --modal-padding: 1.75rem;
   --modal-gap: 1.25rem;
@@ -660,16 +663,16 @@
   --el-dropdown-max-height: 22rem;
 
   /* Badge - Spacious */
-  --el-badge-px-sm: 0.5rem;
-  --el-badge-py-sm: 0.1875rem;
-  --el-badge-px-md: 0.625rem;
-  --el-badge-py-md: 0.25rem;
-  --el-badge-px-lg: 0.75rem;
-  --el-badge-py-lg: 0.375rem;
-  --el-badge-font-size-sm: 0.75rem;
-  --el-badge-font-size-md: 0.8125rem;
-  --el-badge-font-size-lg: 0.875rem;
-  --el-badge-icon-size: 0.875rem;
+  --el-badge-px-sm: 0.625rem;
+  --el-badge-py-sm: 0.25rem;
+  --el-badge-px-md: 0.75rem;
+  --el-badge-py-md: 0.3125rem;
+  --el-badge-px-lg: 0.875rem;
+  --el-badge-py-lg: 0.4375rem;
+  --el-badge-font-size-sm: 0.8125rem;
+  --el-badge-font-size-md: 0.875rem;
+  --el-badge-font-size-lg: 0.9375rem;
+  --el-badge-icon-size: 1rem;
 
   /* Tabs - Spacious */
   --el-tabs-padding: 0.375rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elsapiens/styles",
-  "version": "0.1.3",
+  "version": "0.1.6",
   "description": "CSS styles and Tailwind preset for elSapiens SDK",
   "license": "MIT",
   "type": "module",

package/tailwind-preset.js

@@ -4,74 +4,103 @@ module.exports = {
   theme: {
     extend: {
       colors: {
+        // Wisteria palette (changes with color scheme)
+        wisteria: {
+          50: 'hsl(var(--wisteria-50))',
+          100: 'hsl(var(--wisteria-100))',
+          200: 'hsl(var(--wisteria-200))',
+          300: 'hsl(var(--wisteria-300))',
+          400: 'hsl(var(--wisteria-400))',
+          500: 'hsl(var(--wisteria-500))',
+          600: 'hsl(var(--wisteria-600))',
+          700: 'hsl(var(--wisteria-700))',
+          800: 'hsl(var(--wisteria-800))',
+          850: 'hsl(var(--wisteria-850))',
+          900: 'hsl(var(--wisteria-900))',
+          950: 'hsl(var(--wisteria-950))',
+        },
+        // Neutral gray scale (never changes)
+        neutral: {
+          50: 'hsl(var(--neutral-50))',
+          100: 'hsl(var(--neutral-100))',
+          200: 'hsl(var(--neutral-200))',
+          300: 'hsl(var(--neutral-300))',
+          400: 'hsl(var(--neutral-400))',
+          500: 'hsl(var(--neutral-500))',
+          600: 'hsl(var(--neutral-600))',
+          700: 'hsl(var(--neutral-700))',
+          800: 'hsl(var(--neutral-800))',
+          900: 'hsl(var(--neutral-900))',
+          950: 'hsl(var(--neutral-950))',
+        },
         // Primary - Wisteria Blue
         primary: {
-          50: 'var(--primary-50)',
-          100: 'var(--primary-100)',
-          200: 'var(--primary-200)',
-          300: 'var(--primary-300)',
-          400: 'var(--primary-400)',
-          500: 'var(--primary-500)',
-          DEFAULT: 'var(--primary)',
-          600: 'var(--primary-600)',
-          700: 'var(--primary-700)',
-          800: 'var(--primary-800)',
-          900: 'var(--primary-900)',
-          950: 'var(--primary-950)',
-          foreground: 'var(--primary-foreground)',
+          50: 'hsl(var(--wisteria-50))',
+          100: 'hsl(var(--wisteria-100))',
+          200: 'hsl(var(--wisteria-200))',
+          300: 'hsl(var(--wisteria-300))',
+          400: 'hsl(var(--wisteria-400))',
+          500: 'hsl(var(--wisteria-500))',
+          600: 'hsl(var(--wisteria-600))',
+          700: 'hsl(var(--wisteria-700))',
+          800: 'hsl(var(--wisteria-800))',
+          900: 'hsl(var(--wisteria-900))',
+          950: 'hsl(var(--wisteria-950))',
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
         },
         // Semantic colors
-        background: 'var(--background)',
-        foreground: 'var(--foreground)',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
         card: {
-          DEFAULT: 'var(--card)',
-          foreground: 'var(--card-foreground)',
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
         },
         popover: {
-          DEFAULT: 'var(--popover)',
-          foreground: 'var(--popover-foreground)',
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
         },
         secondary: {
-          DEFAULT: 'var(--secondary)',
-          foreground: 'var(--secondary-foreground)',
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
         },
         muted: {
-          DEFAULT: 'var(--muted)',
-          foreground: 'var(--muted-foreground)',
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
         },
         accent: {
-          DEFAULT: 'var(--accent)',
-          foreground: 'var(--accent-foreground)',
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
         },
         destructive: {
-          DEFAULT: 'var(--destructive)',
-          foreground: 'var(--destructive-foreground)',
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
         },
-        border: 'var(--border)',
-        input: 'var(--input)',
-        ring: 'var(--ring)',
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
         // Surfaces
         surface: {
-          DEFAULT: 'var(--surface)',
-          elevated: 'var(--surface-elevated)',
-          sunken: 'var(--surface-sunken)',
+          DEFAULT: 'hsl(var(--surface))',
+          elevated: 'hsl(var(--surface-elevated))',
+          sunken: 'hsl(var(--surface-sunken))',
         },
         // Status colors
         success: {
-          DEFAULT: 'var(--success)',
-          foreground: 'var(--success-foreground)',
+          DEFAULT: 'hsl(var(--success))',
+          foreground: 'hsl(var(--success-foreground))',
         },
         warning: {
-          DEFAULT: 'var(--warning)',
-          foreground: 'var(--warning-foreground)',
+          DEFAULT: 'hsl(var(--warning))',
+          foreground: 'hsl(var(--warning-foreground))',
         },
         error: {
-          DEFAULT: 'var(--error)',
-          foreground: 'var(--error-foreground)',
+          DEFAULT: 'hsl(var(--error))',
+          foreground: 'hsl(var(--error-foreground))',
         },
         info: {
-          DEFAULT: 'var(--info)',
-          foreground: 'var(--info-foreground)',
+          DEFAULT: 'hsl(var(--info))',
+          foreground: 'hsl(var(--info-foreground))',
         },
       },
       borderRadius: {