@almadar/ui 1.0.0

package/themes/wireframe.css

@@ -0,0 +1,188 @@
+/**
+ * Wireframe Theme
+ *
+ * Sharp corners, thick borders, offset shadows.
+ * Classic blueprint/wireframe aesthetic with bold, tactile interactions.
+ */
+
+/* ==========================================================================
+ * 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: #737373;
+
+    --color-background: #ffffff;
+    --color-foreground: #000000;
+    --color-card: #ffffff;
+    --color-card-foreground: #000000;
+    --color-surface: #f5f5f5;
+    --color-border: #000000;
+    --color-input: #000000;
+    --color-ring: #000000;
+
+    /* Semantic colors */
+    --color-error: #dc2626;
+    --color-error-foreground: #ffffff;
+    --color-success: #16a34a;
+    --color-success-foreground: #ffffff;
+    --color-warning: #ca8a04;
+    --color-warning-foreground: #000000;
+    --color-info: #2563eb;
+    --color-info-foreground: #ffffff;
+
+    /* Typography - Bold, monospace-inspired */
+    --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;
+}
+
+/* ==========================================================================
+ * 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: #0a0a0a;
+    --color-foreground: #ffffff;
+    --color-card: #1a1a1a;
+    --color-card-foreground: #ffffff;
+    --color-surface: #262626;
+    --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;
+    --color-success-foreground: #000000;
+    --color-warning: #fbbf24;
+    --color-warning-foreground: #000000;
+    --color-info: #60a5fa;
+    --color-info-foreground: #000000;
+
+    /* Typography */
+    --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;
+}