@almadar/ui 6.29.0 → 6.31.0

package/themes/wireframe.css

@@ -1,51 +1,20 @@
 /**
- * Wireframe Theme
- *
- * Sharp corners, thick borders, offset shadows.
- * Classic blueprint/wireframe aesthetic with bold, tactile interactions.
+ * GENERATED — do not edit by hand.
+ * Source: packages/almadar-core/themes/wireframe.json
+ * Regenerate: node tools/almadar-pattern-sync/dist/index.js themes (or `almadar-sync themes`)
  */
 
-/* ==========================================================================
- * LIGHT MODE
- * ========================================================================== */
 [data-theme="wireframe-light"] {
-    /* Shadows - Hard offset shadows (brutalist) */
-    --shadow-main: 4px 4px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-sm: 2px 2px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-lg: 6px 6px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-inner: inset 2px 2px 0px 0px rgba(0, 0, 0, 0.1);
-    --shadow-none: none;
-    --shadow-hover: 6px 6px 0px 0px rgba(0, 0, 0, 1);
-    --shadow-active: 1px 1px 0px 0px rgba(0, 0, 0, 1);
-
-    /* Border radius - Sharp corners (brutalist) */
-    --radius-none: 0px;
-    --radius-sm: 0px;
-    --radius-md: 0px;
-    --radius-lg: 0px;
-    --radius-xl: 0px;
-    --radius-full: 9999px;
-
-    /* Border width - Thick, bold */
-    --border-width: 2px;
-    --border-width-thin: 1px;
-    --border-width-thick: 3px;
-
-    /* Colors - High contrast black/white */
     --color-primary: #000000;
     --color-primary-hover: #333333;
     --color-primary-foreground: #ffffff;
-
     --color-secondary: #ffffff;
     --color-secondary-hover: #f0f0f0;
     --color-secondary-foreground: #000000;
-
     --color-accent: #000000;
     --color-accent-foreground: #ffffff;
-
     --color-muted: #f5f5f5;
     --color-muted-foreground: #666666;
-
     --color-background: #ffffff;
     --color-foreground: #000000;
     --color-card: #ffffff;
@@ -54,8 +23,6 @@
     --color-border: #000000;
     --color-input: #000000;
     --color-ring: #000000;
-
-    /* Semantic colors */
     --color-error: #dc2626;
     --color-error-foreground: #ffffff;
     --color-success: #15803d;
@@ -64,39 +31,41 @@
     --color-warning-foreground: #000000;
     --color-info: #2563eb;
     --color-info-foreground: #ffffff;
-
-    /* Typography - Bold, monospace-inspired */
+    --radius-none: 0px;
+    --radius-sm: 0px;
+    --radius-md: 0px;
+    --radius-lg: 0px;
+    --radius-xl: 0px;
+    --radius-full: 9999px;
+    --border-width: 2px;
+    --border-width-thin: 1px;
+    --border-width-thick: 3px;
     --font-family: "Inter", "SF Mono", "Monaco", system-ui, sans-serif;
     --font-weight-normal: 500;
     --font-weight-medium: 600;
     --font-weight-bold: 800;
     --letter-spacing: 0;
     --line-height: 1.5;
-
-    /* Icon styling - Thick strokes */
-    --icon-stroke-width: 2.5;
     --icon-color: currentColor;
-
-    /* Transitions - Snappy, mechanical */
     --transition-fast: 50ms;
     --transition-normal: 100ms;
     --transition-slow: 200ms;
     --transition-timing: linear;
-
-    /* Hover/Active transforms */
     --hover-scale: 1;
     --hover-translate-y: -2px;
     --hover-translate-x: 2px;
     --active-scale: 0.98;
     --active-translate-y: 2px;
-
-    /* Focus ring */
     --focus-ring-width: 2px;
     --focus-ring-offset: 2px;
     --focus-ring-color: #000000;
-
-    /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
-    /* Density axis — spacing scale */
+    --shadow-main: 4px 4px 0px 0px rgba(0, 0, 0, 1);
+    --shadow-sm: 2px 2px 0px 0px rgba(0, 0, 0, 1);
+    --shadow-lg: 6px 6px 0px 0px rgba(0, 0, 0, 1);
+    --shadow-inner: inset 2px 2px 0px 0px rgba(0, 0, 0, 0.1);
+    --shadow-none: none;
+    --shadow-hover: 6px 6px 0px 0px rgba(0, 0, 0, 1);
+    --shadow-active: 1px 1px 0px 0px rgba(0, 0, 0, 1);
     --space-0: 0px;
     --space-1: 4px;
     --space-2: 8px;
@@ -110,7 +79,6 @@
     --space-10: 40px;
     --space-11: 44px;
     --space-12: 48px;
-    /* Density axis — per-element heights */
     --button-height-sm: 28px;
     --button-height-md: 36px;
     --button-height-lg: 44px;
@@ -120,17 +88,14 @@
     --row-height-compact: 32px;
     --row-height-normal: 40px;
     --row-height-spacious: 48px;
-    /* Density axis — per-element padding */
     --card-padding-sm: 12px;
     --card-padding-md: 16px;
     --card-padding-lg: 24px;
     --dialog-padding: 24px;
     --section-gap: 32px;
-    /* Type axis — family triplet */
     --font-family-display: var(--font-family);
     --font-family-body: var(--font-family);
     --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-    /* Type axis — size scale */
     --text-xs: 12px;
     --leading-xs: 16px;
     --text-sm: 14px;
@@ -151,7 +116,6 @@
     --leading-display-1: 52px;
     --text-display-2: 60px;
     --leading-display-2: 64px;
-    /* Type axis — intent mapping */
     --intent-heading-major-size: var(--text-2xl);
     --intent-heading-major-weight: var(--font-weight-bold);
     --intent-heading-major-leading: var(--leading-2xl);
@@ -173,79 +137,41 @@
     --intent-numeric-size: var(--text-sm);
     --intent-numeric-weight: var(--font-weight-medium);
     --intent-numeric-leading: var(--leading-sm);
-    /* Motion axis — duration palette */
     --duration-instant: 0ms;
     --duration-fast: var(--transition-fast);
     --duration-normal: var(--transition-normal);
     --duration-slow: var(--transition-slow);
     --duration-dramatic: 600ms;
-    /* Motion axis — easing palette */
     --easing-linear: linear;
-    --easing-standard: var(--transition-timing);
-    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+    --easing-standard: linear;
+    --easing-emphasized: linear;
     --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-    /* Iconography axis */
     --icon-family: lucide;
+    --icon-stroke-width: 2.5;
     --icon-default-size: 16px;
-    /* Elevation axis — per-layer mapping */
     --elevation-card: var(--shadow-sm);
     --elevation-popover: var(--shadow-main);
     --elevation-dialog: var(--shadow-lg);
     --elevation-toast: var(--shadow-main);
-    /* Geometry axis — radius rhythm with intent */
     --radius-container: var(--radius-md);
     --radius-interactive: var(--radius-md);
     --radius-pill: var(--radius-full);
-    /* Geometry axis — border-width rhythm */
     --border-hairline: 1px;
     --border-standard: var(--border-width);
     --border-heavy: var(--border-width-thick);
-    /* wireframe override: mechanical motion has no curve */
-    --easing-standard: linear;
-    --easing-emphasized: linear;
 }
 
-/* ==========================================================================
- * DARK MODE
- * ========================================================================== */
 [data-theme="wireframe-dark"] {
-    /* Shadows - Inverted for dark */
-    --shadow-main: 4px 4px 0px 0px rgba(255, 255, 255, 0.8);
-    --shadow-sm: 2px 2px 0px 0px rgba(255, 255, 255, 0.8);
-    --shadow-lg: 6px 6px 0px 0px rgba(255, 255, 255, 0.8);
-    --shadow-inner: inset 2px 2px 0px 0px rgba(255, 255, 255, 0.1);
-    --shadow-none: none;
-    --shadow-hover: 6px 6px 0px 0px rgba(255, 255, 255, 0.8);
-    --shadow-active: 1px 1px 0px 0px rgba(255, 255, 255, 0.8);
-
-    /* Border radius - Sharp corners (brutalist) */
-    --radius-none: 0px;
-    --radius-sm: 0px;
-    --radius-md: 0px;
-    --radius-lg: 0px;
-    --radius-xl: 0px;
-    --radius-full: 9999px;
-
-    /* Border width - Thick, bold */
-    --border-width: 2px;
-    --border-width-thin: 1px;
-    --border-width-thick: 3px;
-
-    /* Colors - Inverted high contrast */
     --color-primary: #ffffff;
     --color-primary-hover: #e5e5e5;
     --color-primary-foreground: #000000;
-
     --color-secondary: #1a1a1a;
     --color-secondary-hover: #262626;
     --color-secondary-foreground: #ffffff;
-
     --color-accent: #ffffff;
     --color-accent-foreground: #000000;
-
     --color-muted: #262626;
     --color-muted-foreground: #a3a3a3;
-
     --color-background: #111117;
     --color-foreground: #f5f5f5;
     --color-card: #1c1c22;
@@ -254,8 +180,6 @@
     --color-border: #ffffff;
     --color-input: #ffffff;
     --color-ring: #ffffff;
-
-    /* Semantic colors - Brighter for dark mode */
     --color-error: #f87171;
     --color-error-foreground: #000000;
     --color-success: #4ade80;
@@ -264,39 +188,41 @@
     --color-warning-foreground: #000000;
     --color-info: #60a5fa;
     --color-info-foreground: #000000;
-
-    /* Typography */
+    --radius-none: 0px;
+    --radius-sm: 0px;
+    --radius-md: 0px;
+    --radius-lg: 0px;
+    --radius-xl: 0px;
+    --radius-full: 9999px;
+    --border-width: 2px;
+    --border-width-thin: 1px;
+    --border-width-thick: 3px;
     --font-family: "Inter", "SF Mono", "Monaco", system-ui, sans-serif;
     --font-weight-normal: 500;
     --font-weight-medium: 600;
     --font-weight-bold: 800;
     --letter-spacing: 0;
     --line-height: 1.5;
-
-    /* Icon styling */
-    --icon-stroke-width: 2.5;
     --icon-color: currentColor;
-
-    /* Transitions */
     --transition-fast: 50ms;
     --transition-normal: 100ms;
     --transition-slow: 200ms;
     --transition-timing: linear;
-
-    /* Hover/Active transforms */
     --hover-scale: 1;
     --hover-translate-y: -2px;
     --hover-translate-x: 2px;
     --active-scale: 0.98;
     --active-translate-y: 2px;
-
-    /* Focus ring */
     --focus-ring-width: 2px;
     --focus-ring-offset: 2px;
     --focus-ring-color: #ffffff;
-
-    /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
-    /* Density axis — spacing scale */
+    --shadow-main: 4px 4px 0px 0px rgba(255, 255, 255, 0.8);
+    --shadow-sm: 2px 2px 0px 0px rgba(255, 255, 255, 0.8);
+    --shadow-lg: 6px 6px 0px 0px rgba(255, 255, 255, 0.8);
+    --shadow-inner: inset 2px 2px 0px 0px rgba(255, 255, 255, 0.1);
+    --shadow-none: none;
+    --shadow-hover: 6px 6px 0px 0px rgba(255, 255, 255, 0.8);
+    --shadow-active: 1px 1px 0px 0px rgba(255, 255, 255, 0.8);
     --space-0: 0px;
     --space-1: 4px;
     --space-2: 8px;
@@ -310,7 +236,6 @@
     --space-10: 40px;
     --space-11: 44px;
     --space-12: 48px;
-    /* Density axis — per-element heights */
     --button-height-sm: 28px;
     --button-height-md: 36px;
     --button-height-lg: 44px;
@@ -320,17 +245,14 @@
     --row-height-compact: 32px;
     --row-height-normal: 40px;
     --row-height-spacious: 48px;
-    /* Density axis — per-element padding */
     --card-padding-sm: 12px;
     --card-padding-md: 16px;
     --card-padding-lg: 24px;
     --dialog-padding: 24px;
     --section-gap: 32px;
-    /* Type axis — family triplet */
     --font-family-display: var(--font-family);
     --font-family-body: var(--font-family);
     --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-    /* Type axis — size scale */
     --text-xs: 12px;
     --leading-xs: 16px;
     --text-sm: 14px;
@@ -351,7 +273,6 @@
     --leading-display-1: 52px;
     --text-display-2: 60px;
     --leading-display-2: 64px;
-    /* Type axis — intent mapping */
     --intent-heading-major-size: var(--text-2xl);
     --intent-heading-major-weight: var(--font-weight-bold);
     --intent-heading-major-leading: var(--leading-2xl);
@@ -373,34 +294,26 @@
     --intent-numeric-size: var(--text-sm);
     --intent-numeric-weight: var(--font-weight-medium);
     --intent-numeric-leading: var(--leading-sm);
-    /* Motion axis — duration palette */
     --duration-instant: 0ms;
     --duration-fast: var(--transition-fast);
     --duration-normal: var(--transition-normal);
     --duration-slow: var(--transition-slow);
     --duration-dramatic: 600ms;
-    /* Motion axis — easing palette */
     --easing-linear: linear;
-    --easing-standard: var(--transition-timing);
-    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+    --easing-standard: linear;
+    --easing-emphasized: linear;
     --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-    /* Iconography axis */
     --icon-family: lucide;
+    --icon-stroke-width: 2.5;
     --icon-default-size: 16px;
-    /* Elevation axis — per-layer mapping */
     --elevation-card: var(--shadow-sm);
     --elevation-popover: var(--shadow-main);
     --elevation-dialog: var(--shadow-lg);
     --elevation-toast: var(--shadow-main);
-    /* Geometry axis — radius rhythm with intent */
     --radius-container: var(--radius-md);
     --radius-interactive: var(--radius-md);
     --radius-pill: var(--radius-full);
-    /* Geometry axis — border-width rhythm */
     --border-hairline: 1px;
     --border-standard: var(--border-width);
     --border-heavy: var(--border-width-thick);
-    /* wireframe override: mechanical motion has no curve */
-    --easing-standard: linear;
-    --easing-emphasized: linear;
 }