@julianoczkowski/create-trimble-app 2.0.0

package/templates/angular/src/styles.css

@@ -0,0 +1,1328 @@
+@import '@trimble-oss/moduswebcomponents/modus-wc-styles.css';
+@import 'tailwindcss';
+
+/*
+ * 9-Color Design System - Angular + Modus Integration
+ *
+ * This design system enforces the use of semantic color names only.
+ * Direct usage of --modus-wc-color-* variables is prohibited.
+ * Use only the 9 semantic colors through Tailwind classes:
+ *
+ * 1. background    - Page background
+ * 2. foreground    - Primary text
+ * 3. card          - Card backgrounds
+ * 4. muted         - Subtle backgrounds, borders
+ * 5. secondary     - Secondary UI elements
+ * 6. primary       - Primary actions, info
+ * 7. success       - Success states
+ * 8. warning       - Warning states
+ * 9. destructive   - Error/destructive states (Modus 2.0 standard)
+ */
+
+@theme {
+  /* 9-Color Design System */
+  --color-background: var(--modus-wc-color-base-page);
+  --color-foreground: var(--modus-wc-color-base-content);
+  --color-card: var(--modus-wc-color-base-100);
+  --color-card-foreground: var(--modus-wc-color-base-content);
+  --color-muted: var(--modus-wc-color-base-200);
+  --color-muted-foreground: var(--modus-wc-color-base-content);
+  --color-secondary: var(--modus-wc-color-base-300);
+  --color-secondary-foreground: var(--modus-wc-color-base-content);
+  --color-primary: var(--modus-wc-color-info);
+  --color-primary-foreground: var(--modus-wc-color-base-page);
+  --color-success: var(--modus-wc-color-success);
+  --color-success-foreground: var(--modus-wc-color-base-page);
+  --color-warning: var(--modus-wc-color-warning);
+  --color-warning-foreground: var(--modus-wc-color-base-page);
+  --color-destructive: var(--modus-wc-color-error);
+  --color-destructive-foreground: var(--modus-wc-color-base-page);
+  --color-border: var(--modus-wc-color-base-200);
+  --color-ring: var(--modus-wc-color-info);
+}
+
+:root {
+  /* Font weights */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+
+  /* Map Figma colors to Modus 9-color system */
+  --background: var(--modus-wc-color-base-page);
+  --foreground: var(--modus-wc-color-base-content);
+  --card: var(--modus-wc-color-base-100);
+  --card-foreground: var(--modus-wc-color-base-content);
+  --muted: var(--modus-wc-color-base-200);
+  --muted-foreground: var(--modus-wc-color-base-content);
+  --secondary: var(--modus-wc-color-base-300);
+  --secondary-foreground: var(--modus-wc-color-base-content);
+
+  /* Status colors (from Modus CDN) */
+  --primary: var(--modus-wc-color-info);
+  --primary-foreground: var(--modus-wc-color-base-page);
+  --success: var(--modus-wc-color-success);
+  --success-foreground: var(--modus-wc-color-base-page);
+  --warning: var(--modus-wc-color-warning);
+  --warning-foreground: var(--modus-wc-color-base-page);
+  --destructive: var(--modus-wc-color-error);
+  --destructive-foreground: var(--modus-wc-color-base-page);
+  /* Legacy error mapping for backward compatibility */
+  --error: var(--modus-wc-color-error);
+  --error-foreground: var(--modus-wc-color-base-page);
+
+  /* Border and other utilities */
+  --border: var(--modus-wc-color-base-200);
+  --ring: var(--modus-wc-color-info);
+  --radius: 8px;
+  --radius-card: 16px;
+  --radius-badge: 4px;
+
+  /* Opacity variants for design system colors (20%, 40%, 60%, 80%) */
+  /* Foreground opacity */
+  --foreground-80: color-mix(in srgb, var(--foreground) 80%, transparent);
+  --foreground-60: color-mix(in srgb, var(--foreground) 60%, transparent);
+  --foreground-40: color-mix(in srgb, var(--foreground) 40%, transparent);
+  --foreground-20: color-mix(in srgb, var(--foreground) 20%, transparent);
+
+  /* Card opacity */
+  --card-80: color-mix(in srgb, var(--card) 80%, transparent);
+  --card-60: color-mix(in srgb, var(--card) 60%, transparent);
+  --card-40: color-mix(in srgb, var(--card) 40%, transparent);
+  --card-20: color-mix(in srgb, var(--card) 20%, transparent);
+
+  --card-foreground-80: color-mix(in srgb, var(--card-foreground) 80%, transparent);
+  --card-foreground-60: color-mix(in srgb, var(--card-foreground) 60%, transparent);
+  --card-foreground-40: color-mix(in srgb, var(--card-foreground) 40%, transparent);
+  --card-foreground-20: color-mix(in srgb, var(--card-foreground) 20%, transparent);
+
+  /* Muted opacity */
+  --muted-80: color-mix(in srgb, var(--muted) 80%, transparent);
+  --muted-60: color-mix(in srgb, var(--muted) 60%, transparent);
+  --muted-40: color-mix(in srgb, var(--muted) 40%, transparent);
+  --muted-20: color-mix(in srgb, var(--muted) 20%, transparent);
+
+  --muted-foreground-80: color-mix(in srgb, var(--muted-foreground) 80%, transparent);
+  --muted-foreground-60: color-mix(in srgb, var(--muted-foreground) 60%, transparent);
+  --muted-foreground-40: color-mix(in srgb, var(--muted-foreground) 40%, transparent);
+  --muted-foreground-20: color-mix(in srgb, var(--muted-foreground) 20%, transparent);
+
+  /* Secondary opacity */
+  --secondary-80: color-mix(in srgb, var(--secondary) 80%, transparent);
+  --secondary-60: color-mix(in srgb, var(--secondary) 60%, transparent);
+  --secondary-40: color-mix(in srgb, var(--secondary) 40%, transparent);
+  --secondary-20: color-mix(in srgb, var(--secondary) 20%, transparent);
+
+  --secondary-foreground-80: color-mix(in srgb, var(--secondary-foreground) 80%, transparent);
+  --secondary-foreground-60: color-mix(in srgb, var(--secondary-foreground) 60%, transparent);
+  --secondary-foreground-40: color-mix(in srgb, var(--secondary-foreground) 40%, transparent);
+  --secondary-foreground-20: color-mix(in srgb, var(--secondary-foreground) 20%, transparent);
+
+  /* Primary opacity */
+  --primary-80: color-mix(in srgb, var(--primary) 80%, transparent);
+  --primary-60: color-mix(in srgb, var(--primary) 60%, transparent);
+  --primary-40: color-mix(in srgb, var(--primary) 40%, transparent);
+  --primary-20: color-mix(in srgb, var(--primary) 20%, transparent);
+
+  --primary-foreground-80: color-mix(in srgb, var(--primary-foreground) 80%, transparent);
+  --primary-foreground-60: color-mix(in srgb, var(--primary-foreground) 60%, transparent);
+  --primary-foreground-40: color-mix(in srgb, var(--primary-foreground) 40%, transparent);
+  --primary-foreground-20: color-mix(in srgb, var(--primary-foreground) 20%, transparent);
+
+  /* Success opacity */
+  --success-80: color-mix(in srgb, var(--success) 80%, transparent);
+  --success-60: color-mix(in srgb, var(--success) 60%, transparent);
+  --success-40: color-mix(in srgb, var(--success) 40%, transparent);
+  --success-20: color-mix(in srgb, var(--success) 20%, transparent);
+
+  --success-foreground-80: color-mix(in srgb, var(--success-foreground) 80%, transparent);
+  --success-foreground-60: color-mix(in srgb, var(--success-foreground) 60%, transparent);
+  --success-foreground-40: color-mix(in srgb, var(--success-foreground) 40%, transparent);
+  --success-foreground-20: color-mix(in srgb, var(--success-foreground) 20%, transparent);
+
+  /* Warning opacity */
+  --warning-80: color-mix(in srgb, var(--warning) 80%, transparent);
+  --warning-60: color-mix(in srgb, var(--warning) 60%, transparent);
+  --warning-40: color-mix(in srgb, var(--warning) 40%, transparent);
+  --warning-20: color-mix(in srgb, var(--warning) 20%, transparent);
+
+  --warning-foreground-80: color-mix(in srgb, var(--warning-foreground) 80%, transparent);
+  --warning-foreground-60: color-mix(in srgb, var(--warning-foreground) 60%, transparent);
+  --warning-foreground-40: color-mix(in srgb, var(--warning-foreground) 40%, transparent);
+  --warning-foreground-20: color-mix(in srgb, var(--warning-foreground) 20%, transparent);
+
+  /* Destructive opacity (Modus 2.0 standard) */
+  --destructive-80: color-mix(in srgb, var(--destructive) 80%, transparent);
+  --destructive-60: color-mix(in srgb, var(--destructive) 60%, transparent);
+  --destructive-40: color-mix(in srgb, var(--destructive) 40%, transparent);
+  --destructive-20: color-mix(in srgb, var(--destructive) 20%, transparent);
+
+  --destructive-foreground-80: color-mix(in srgb, var(--destructive-foreground) 80%, transparent);
+  --destructive-foreground-60: color-mix(in srgb, var(--destructive-foreground) 60%, transparent);
+  --destructive-foreground-40: color-mix(in srgb, var(--destructive-foreground) 40%, transparent);
+  --destructive-foreground-20: color-mix(in srgb, var(--destructive-foreground) 20%, transparent);
+
+  /* Legacy error opacity for backward compatibility */
+  --error-80: color-mix(in srgb, var(--error) 80%, transparent);
+  --error-60: color-mix(in srgb, var(--error) 60%, transparent);
+  --error-40: color-mix(in srgb, var(--error) 40%, transparent);
+  --error-20: color-mix(in srgb, var(--error) 20%, transparent);
+
+  --error-foreground-80: color-mix(in srgb, var(--error-foreground) 80%, transparent);
+  --error-foreground-60: color-mix(in srgb, var(--error-foreground) 60%, transparent);
+  --error-foreground-40: color-mix(in srgb, var(--error-foreground) 40%, transparent);
+  --error-foreground-20: color-mix(in srgb, var(--error-foreground) 20%, transparent);
+
+  /* Border opacity */
+  --border-80: color-mix(in srgb, var(--border) 80%, transparent);
+  --border-60: color-mix(in srgb, var(--border) 60%, transparent);
+  --border-40: color-mix(in srgb, var(--border) 40%, transparent);
+  --border-20: color-mix(in srgb, var(--border) 20%, transparent);
+}
+
+@layer base {
+  * {
+    @apply box-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Modus Font Size Utilities - Override Tailwind defaults with Modus scale */
+.text-2xs {
+  font-size: var(--modus-wc-font-size-2xs) !important; /* 8px */
+}
+
+.text-xs {
+  font-size: var(--modus-wc-font-size-xs) !important; /* 10px */
+}
+
+.text-sm {
+  font-size: var(--modus-wc-font-size-sm) !important; /* 12px */
+}
+
+.text-base {
+  font-size: var(--modus-wc-font-size-md) !important; /* 14px - Modus base */
+}
+
+.text-lg {
+  font-size: var(--modus-wc-font-size-lg) !important; /* 16px */
+}
+
+.text-xl {
+  font-size: var(--modus-wc-font-size-xl) !important; /* 18px */
+}
+
+.text-2xl {
+  font-size: var(--modus-wc-font-size-2xl) !important; /* 20px */
+}
+
+.text-3xl {
+  font-size: var(--modus-wc-font-size-3xl) !important; /* 24px */
+}
+
+.text-4xl {
+  font-size: var(--modus-wc-font-size-4xl) !important; /* 30px */
+}
+
+/* Custom Border Utilities - Tailwind v4 Compatible */
+.border-default {
+  border: 1px solid var(--border);
+}
+
+.border-thick {
+  border: 2px solid var(--border);
+}
+
+.border-dashed {
+  border: 1px dashed var(--border);
+}
+
+.border-thick-dashed {
+  border: 2px dashed var(--border);
+}
+
+.border-bottom-default {
+  border-bottom: 1px solid var(--border);
+}
+
+.border-top-default {
+  border-top: 1px solid var(--border);
+}
+
+.border-left-default {
+  border-left: 1px solid var(--border);
+}
+
+.border-right-default {
+  border-right: 1px solid var(--border);
+}
+
+/* Color-specific border utilities */
+.border-primary {
+  border: 1px solid var(--primary);
+}
+
+.hover\:border-primary:hover {
+  border: 1px solid var(--primary);
+}
+
+.border-thick-primary {
+  border: 2px solid var(--primary);
+}
+
+.border-dashed-primary {
+  border: 1px dashed var(--primary);
+}
+
+.border-top-primary {
+  border-top: 1px solid var(--primary);
+}
+
+.border-bottom-primary {
+  border-bottom: 1px solid var(--primary);
+}
+
+.border-left-primary {
+  border-left: 1px solid var(--primary);
+}
+
+.border-right-primary {
+  border-right: 1px solid var(--primary);
+}
+
+.border-success {
+  border: 1px solid var(--success);
+}
+
+.border-thick-success {
+  border: 2px solid var(--success);
+}
+
+.border-dashed-success {
+  border: 1px dashed var(--success);
+}
+
+.border-top-success {
+  border-top: 1px solid var(--success);
+}
+
+.border-bottom-success {
+  border-bottom: 1px solid var(--success);
+}
+
+.border-left-success {
+  border-left: 1px solid var(--success);
+}
+
+.border-right-success {
+  border-right: 1px solid var(--success);
+}
+
+.border-warning {
+  border: 1px solid var(--warning);
+}
+
+.border-thick-warning {
+  border: 2px solid var(--warning);
+}
+
+.border-dashed-warning {
+  border: 1px dashed var(--warning);
+}
+
+.border-top-warning {
+  border-top: 1px solid var(--warning);
+}
+
+.border-bottom-warning {
+  border-bottom: 1px solid var(--warning);
+}
+
+.border-left-warning {
+  border-left: 1px solid var(--warning);
+}
+
+.border-right-warning {
+  border-right: 1px solid var(--warning);
+}
+
+/* Destructive borders (Modus 2.0 standard) */
+.border-destructive {
+  border: 1px solid var(--destructive);
+}
+
+.border-thick-destructive {
+  border: 2px solid var(--destructive);
+}
+
+.border-dashed-destructive {
+  border: 1px dashed var(--destructive);
+}
+
+.border-top-destructive {
+  border-top: 1px solid var(--destructive);
+}
+
+.border-bottom-destructive {
+  border-bottom: 1px solid var(--destructive);
+}
+
+.border-left-destructive {
+  border-left: 1px solid var(--destructive);
+}
+
+.border-right-destructive {
+  border-right: 1px solid var(--destructive);
+}
+
+/* Legacy error borders for backward compatibility */
+.border-error {
+  border: 1px solid var(--error);
+}
+
+.border-thick-error {
+  border: 2px solid var(--error);
+}
+
+.border-dashed-error {
+  border: 1px dashed var(--error);
+}
+
+.border-top-error {
+  border-top: 1px solid var(--error);
+}
+
+.border-bottom-error {
+  border-bottom: 1px solid var(--error);
+}
+
+.border-left-error {
+  border-left: 1px solid var(--error);
+}
+
+.border-right-error {
+  border-right: 1px solid var(--error);
+}
+
+/* Base text color utilities for semantic colors */
+.text-primary {
+  color: var(--primary);
+}
+
+.text-success {
+  color: var(--success);
+}
+
+.text-warning {
+  color: var(--warning);
+}
+
+.text-destructive {
+  color: var(--destructive);
+}
+
+/* Legacy error text color for backward compatibility */
+.text-error {
+  color: var(--error);
+}
+
+/* Base background color utilities for semantic colors */
+.bg-primary {
+  background-color: var(--primary);
+}
+
+.bg-success {
+  background-color: var(--success);
+}
+
+.bg-warning {
+  background-color: var(--warning);
+}
+
+.bg-destructive {
+  background-color: var(--destructive);
+}
+
+/* Legacy error background color for backward compatibility */
+.bg-error {
+  background-color: var(--error);
+}
+
+/* Opacity utilities for design system colors */
+/* Text opacity utilities */
+.text-foreground-80 {
+  color: var(--foreground-80);
+}
+
+.text-foreground-60 {
+  color: var(--foreground-60);
+}
+
+.text-foreground-40 {
+  color: var(--foreground-40);
+}
+
+.text-foreground-20 {
+  color: var(--foreground-20);
+}
+
+.text-card-80 {
+  color: var(--card-80);
+}
+
+.text-card-60 {
+  color: var(--card-60);
+}
+
+.text-card-40 {
+  color: var(--card-40);
+}
+
+.text-card-20 {
+  color: var(--card-20);
+}
+
+.text-card-foreground-80 {
+  color: var(--card-foreground-80);
+}
+
+.text-card-foreground-60 {
+  color: var(--card-foreground-60);
+}
+
+.text-card-foreground-40 {
+  color: var(--card-foreground-40);
+}
+
+.text-card-foreground-20 {
+  color: var(--card-foreground-20);
+}
+
+.text-muted-80 {
+  color: var(--muted-80);
+}
+
+.text-muted-60 {
+  color: var(--muted-60);
+}
+
+.text-muted-40 {
+  color: var(--muted-40);
+}
+
+.text-muted-20 {
+  color: var(--muted-20);
+}
+
+.text-muted-foreground-80 {
+  color: var(--muted-foreground-80);
+}
+
+.text-muted-foreground-60 {
+  color: var(--muted-foreground-60);
+}
+
+.text-muted-foreground-40 {
+  color: var(--muted-foreground-40);
+}
+
+.text-muted-foreground-20 {
+  color: var(--muted-foreground-20);
+}
+
+.text-secondary-80 {
+  color: var(--secondary-80);
+}
+
+.text-secondary-60 {
+  color: var(--secondary-60);
+}
+
+.text-secondary-40 {
+  color: var(--secondary-40);
+}
+
+.text-secondary-20 {
+  color: var(--secondary-20);
+}
+
+.text-secondary-foreground-80 {
+  color: var(--secondary-foreground-80);
+}
+
+.text-secondary-foreground-60 {
+  color: var(--secondary-foreground-60);
+}
+
+.text-secondary-foreground-40 {
+  color: var(--secondary-foreground-40);
+}
+
+.text-secondary-foreground-20 {
+  color: var(--secondary-foreground-20);
+}
+
+.text-primary-80 {
+  color: var(--primary-80);
+}
+
+.text-primary-60 {
+  color: var(--primary-60);
+}
+
+.text-primary-40 {
+  color: var(--primary-40);
+}
+
+.text-primary-20 {
+  color: var(--primary-20);
+}
+
+.text-primary-foreground-80 {
+  color: var(--primary-foreground-80);
+}
+
+.text-primary-foreground-60 {
+  color: var(--primary-foreground-60);
+}
+
+.text-primary-foreground-40 {
+  color: var(--primary-foreground-40);
+}
+
+.text-primary-foreground-20 {
+  color: var(--primary-foreground-20);
+}
+
+.text-success-80 {
+  color: var(--success-80);
+}
+
+.text-success-60 {
+  color: var(--success-60);
+}
+
+.text-success-40 {
+  color: var(--success-40);
+}
+
+.text-success-20 {
+  color: var(--success-20);
+}
+
+.text-success-foreground-80 {
+  color: var(--success-foreground-80);
+}
+
+.text-success-foreground-60 {
+  color: var(--success-foreground-60);
+}
+
+.text-success-foreground-40 {
+  color: var(--success-foreground-40);
+}
+
+.text-success-foreground-20 {
+  color: var(--success-foreground-20);
+}
+
+.text-warning-80 {
+  color: var(--warning-80);
+}
+
+.text-warning-60 {
+  color: var(--warning-60);
+}
+
+.text-warning-40 {
+  color: var(--warning-40);
+}
+
+.text-warning-20 {
+  color: var(--warning-20);
+}
+
+.text-warning-foreground-80 {
+  color: var(--warning-foreground-80);
+}
+
+.text-warning-foreground-60 {
+  color: var(--warning-foreground-60);
+}
+
+.text-warning-foreground-40 {
+  color: var(--warning-foreground-40);
+}
+
+.text-warning-foreground-20 {
+  color: var(--warning-foreground-20);
+}
+
+/* Destructive text opacity (Modus 2.0 standard) */
+.text-destructive-80 {
+  color: var(--destructive-80);
+}
+
+.text-destructive-60 {
+  color: var(--destructive-60);
+}
+
+.text-destructive-40 {
+  color: var(--destructive-40);
+}
+
+.text-destructive-20 {
+  color: var(--destructive-20);
+}
+
+.text-destructive-foreground-80 {
+  color: var(--destructive-foreground-80);
+}
+
+.text-destructive-foreground-60 {
+  color: var(--destructive-foreground-60);
+}
+
+.text-destructive-foreground-40 {
+  color: var(--destructive-foreground-40);
+}
+
+.text-destructive-foreground-20 {
+  color: var(--destructive-foreground-20);
+}
+
+/* Legacy error text opacity for backward compatibility */
+.text-error-80 {
+  color: var(--error-80);
+}
+
+.text-error-60 {
+  color: var(--error-60);
+}
+
+.text-error-40 {
+  color: var(--error-40);
+}
+
+.text-error-20 {
+  color: var(--error-20);
+}
+
+.text-error-foreground-80 {
+  color: var(--error-foreground-80);
+}
+
+.text-error-foreground-60 {
+  color: var(--error-foreground-60);
+}
+
+.text-error-foreground-40 {
+  color: var(--error-foreground-40);
+}
+
+.text-error-foreground-20 {
+  color: var(--error-foreground-20);
+}
+
+/* Background opacity utilities */
+.bg-foreground-80 {
+  background-color: var(--foreground-80);
+}
+
+.bg-foreground-60 {
+  background-color: var(--foreground-60);
+}
+
+.bg-foreground-40 {
+  background-color: var(--foreground-40);
+}
+
+.bg-foreground-20 {
+  background-color: var(--foreground-20);
+}
+
+.bg-card-80 {
+  background-color: var(--card-80);
+}
+
+.bg-card-60 {
+  background-color: var(--card-60);
+}
+
+.bg-card-40 {
+  background-color: var(--card-40);
+}
+
+.bg-card-20 {
+  background-color: var(--card-20);
+}
+
+.bg-muted-80 {
+  background-color: var(--muted-80);
+}
+
+.bg-muted-60 {
+  background-color: var(--muted-60);
+}
+
+.bg-muted-40 {
+  background-color: var(--muted-40);
+}
+
+.bg-muted-20 {
+  background-color: var(--muted-20);
+}
+
+.bg-secondary-80 {
+  background-color: var(--secondary-80);
+}
+
+.bg-secondary-60 {
+  background-color: var(--secondary-60);
+}
+
+.bg-secondary-40 {
+  background-color: var(--secondary-40);
+}
+
+.bg-secondary-20 {
+  background-color: var(--secondary-20);
+}
+
+.bg-primary-80 {
+  background-color: var(--primary-80);
+}
+
+.bg-primary-60 {
+  background-color: var(--primary-60);
+}
+
+.bg-primary-40 {
+  background-color: var(--primary-40);
+}
+
+.bg-primary-20 {
+  background-color: var(--primary-20);
+}
+
+.bg-success-80 {
+  background-color: var(--success-80);
+}
+
+.bg-success-60 {
+  background-color: var(--success-60);
+}
+
+.bg-success-40 {
+  background-color: var(--success-40);
+}
+
+.bg-success-20 {
+  background-color: var(--success-20);
+}
+
+.bg-warning-80 {
+  background-color: var(--warning-80);
+}
+
+.bg-warning-60 {
+  background-color: var(--warning-60);
+}
+
+.bg-warning-40 {
+  background-color: var(--warning-40);
+}
+
+.bg-warning-20 {
+  background-color: var(--warning-20);
+}
+
+/* Destructive background opacity (Modus 2.0 standard) */
+.bg-destructive-80 {
+  background-color: var(--destructive-80);
+}
+
+.bg-destructive-60 {
+  background-color: var(--destructive-60);
+}
+
+.bg-destructive-40 {
+  background-color: var(--destructive-40);
+}
+
+.bg-destructive-20 {
+  background-color: var(--destructive-20);
+}
+
+/* Legacy error background opacity for backward compatibility */
+.bg-error-80 {
+  background-color: var(--error-80);
+}
+
+.bg-error-60 {
+  background-color: var(--error-60);
+}
+
+.bg-error-40 {
+  background-color: var(--error-40);
+}
+
+.bg-error-20 {
+  background-color: var(--error-20);
+}
+
+/* Border opacity utilities */
+.border-foreground-80 {
+  border-color: var(--foreground-80);
+}
+
+.border-foreground-60 {
+  border-color: var(--foreground-60);
+}
+
+.border-foreground-40 {
+  border-color: var(--foreground-40);
+}
+
+.border-foreground-20 {
+  border-color: var(--foreground-20);
+}
+
+.border-card-80 {
+  border-color: var(--card-80);
+}
+
+.border-card-60 {
+  border-color: var(--card-60);
+}
+
+.border-card-40 {
+  border-color: var(--card-40);
+}
+
+.border-card-20 {
+  border-color: var(--card-20);
+}
+
+.border-muted-80 {
+  border-color: var(--muted-80);
+}
+
+.border-muted-60 {
+  border-color: var(--muted-60);
+}
+
+.border-muted-40 {
+  border-color: var(--muted-40);
+}
+
+.border-muted-20 {
+  border-color: var(--muted-20);
+}
+
+.border-secondary-80 {
+  border-color: var(--secondary-80);
+}
+
+.border-secondary-60 {
+  border-color: var(--secondary-60);
+}
+
+.border-secondary-40 {
+  border-color: var(--secondary-40);
+}
+
+.border-secondary-20 {
+  border-color: var(--secondary-20);
+}
+
+.border-primary-80 {
+  border-color: var(--primary-80);
+}
+
+.border-primary-60 {
+  border-color: var(--primary-60);
+}
+
+.border-primary-40 {
+  border-color: var(--primary-40);
+}
+
+.border-primary-20 {
+  border-color: var(--primary-20);
+}
+
+.border-success-80 {
+  border-color: var(--success-80);
+}
+
+.border-success-60 {
+  border-color: var(--success-60);
+}
+
+.border-success-40 {
+  border-color: var(--success-40);
+}
+
+.border-success-20 {
+  border-color: var(--success-20);
+}
+
+.border-warning-80 {
+  border-color: var(--warning-80);
+}
+
+.border-warning-60 {
+  border-color: var(--warning-60);
+}
+
+.border-warning-40 {
+  border-color: var(--warning-40);
+}
+
+.border-warning-20 {
+  border-color: var(--warning-20);
+}
+
+/* Destructive border opacity (Modus 2.0 standard) */
+.border-destructive-80 {
+  border-color: var(--destructive-80);
+}
+
+.border-destructive-60 {
+  border-color: var(--destructive-60);
+}
+
+.border-destructive-40 {
+  border-color: var(--destructive-40);
+}
+
+.border-destructive-20 {
+  border-color: var(--destructive-20);
+}
+
+/* Legacy error border opacity for backward compatibility */
+.border-error-80 {
+  border-color: var(--error-80);
+}
+
+.border-error-60 {
+  border-color: var(--error-60);
+}
+
+.border-error-40 {
+  border-color: var(--error-40);
+}
+
+.border-error-20 {
+  border-color: var(--error-20);
+}
+
+.border-border-80 {
+  border-color: var(--border-80);
+}
+
+.border-border-60 {
+  border-color: var(--border-60);
+}
+
+.border-border-40 {
+  border-color: var(--border-40);
+}
+
+.border-border-20 {
+  border-color: var(--border-20);
+}
+
+/* Modus Divider Visibility Fix */
+/* IMPORTANT: The divider component uses Shadow DOM, so we must style the custom element directly */
+/* We also target the internal div using ::part() or deep selectors as fallback */
+modus-wc-divider {
+  display: block;
+  /* Default styling - will be overridden by orientation-specific rules */
+  background-color: var(--modus-wc-color-base-200);
+}
+
+/* Horizontal dividers - style the custom element directly */
+modus-wc-divider.modus-wc-divider-horizontal,
+modus-wc-divider[orientation='horizontal'] {
+  min-height: 1px !important;
+  height: 1px !important;
+  width: 100% !important;
+  display: block !important;
+  background-color: var(--modus-wc-color-base-200) !important;
+  /* Add border-top as fallback if background doesn't work */
+  border-top: 1px solid var(--modus-wc-color-base-200) !important;
+}
+
+/* Vertical dividers - style the custom element directly */
+modus-wc-divider.modus-wc-divider-vertical,
+modus-wc-divider[orientation='vertical'] {
+  min-width: 1px !important;
+  width: 1px !important;
+  align-self: stretch !important;
+  background-color: var(--modus-wc-color-base-200) !important;
+  /* Add border-left as fallback if background doesn't work */
+  border-left: 1px solid var(--modus-wc-color-base-200) !important;
+  /* Height for vertical - will stretch in flex containers */
+  height: auto;
+}
+
+/* Target internal div (if shadow DOM allows) */
+modus-wc-divider::part(content),
+modus-wc-divider > div,
+modus-wc-divider div.modus-wc-divider {
+  background-color: inherit;
+}
+
+/* Color variants - target internal div */
+modus-wc-divider.modus-wc-divider-primary > div,
+modus-wc-divider.modus-wc-divider-primary div.modus-wc-divider {
+  background-color: var(--modus-wc-color-info);
+}
+
+modus-wc-divider.modus-wc-divider-secondary > div,
+modus-wc-divider.modus-wc-divider-secondary div.modus-wc-divider {
+  background-color: var(--modus-wc-color-base-300);
+}
+
+modus-wc-divider.modus-wc-divider-neutral > div,
+modus-wc-divider.modus-wc-divider-neutral div.modus-wc-divider {
+  background-color: var(--modus-wc-color-base-200);
+}
+
+modus-wc-divider.modus-wc-divider-accent > div,
+modus-wc-divider.modus-wc-divider-accent div.modus-wc-divider {
+  background-color: var(--modus-wc-color-base-content);
+}
+
+modus-wc-divider.modus-wc-divider-success > div,
+modus-wc-divider.modus-wc-divider-success div.modus-wc-divider {
+  background-color: var(--modus-wc-color-success);
+}
+
+modus-wc-divider.modus-wc-divider-warning > div,
+modus-wc-divider.modus-wc-divider-warning div.modus-wc-divider {
+  background-color: var(--modus-wc-color-warning);
+}
+
+modus-wc-divider.modus-wc-divider-error > div,
+modus-wc-divider.modus-wc-divider-error div.modus-wc-divider {
+  background-color: var(--modus-wc-color-error);
+}
+
+/* ===================================================================
+ * Side Navigation Component Styles
+ * ===================================================================
+ * Reusable styles for Modus Side Navigation with sub-menus
+ * Used in demo pages and can be reused throughout the application
+ */
+
+/* Sub-menu container transitions */
+.side-nav-children-container {
+  transition: height 0.2s ease-out;
+  overflow: hidden;
+}
+
+/* Icon styling for side navigation */
+.side-nav-collapse-icon {
+  min-width: 24px;
+  padding-inline-start: 0.2rem;
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Menu text with ellipsis overflow */
+.side-nav-dropdown-menu {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  /* Match Storybook example typography */
+  font-size: var(--modus-wc-font-size-lg);
+  line-height: 1.5;
+}
+
+/* Flex row layout for menu items */
+.side-nav-flex-row {
+  align-items: center;
+  display: flex;
+  gap: 1.3rem;
+  padding: 0.8rem 0.25rem;
+  padding-inline-start: 1rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  /* Match Storybook example typography */
+  font-size: var(--modus-wc-font-size-lg);
+  line-height: 1.5;
+}
+
+.side-nav-flex-row:hover {
+  background-color: var(--modus-wc-color-base-200);
+}
+
+/* Hidden state utility */
+.side-nav-hidden {
+  display: none;
+}
+
+/* Right-aligned content */
+.side-nav-justify-end {
+  margin-left: auto;
+}
+
+/* Full width menu */
+.side-nav-menu-width {
+  width: 100%;
+}
+
+/*
+ * Match Storybook nested list indentation and vertical guide line
+ * Scope to demo containers to avoid global impact
+ */
+.layout-with-navbar modus-wc-menu li ul,
+.layout-with-navbar-submenu modus-wc-menu li ul {
+  margin-inline-start: 1.8rem;
+  border-left: 1px solid var(--border);
+}
+
+/* Ensure vertical guide for our div-based containers as well */
+.layout-with-navbar .side-nav-children-container,
+.layout-with-navbar-submenu .side-nav-children-container {
+  margin-inline-start: 1.8rem;
+  border-left: 1px solid var(--border);
+}
+
+/* Ensure lists inside menu reset default browser styles */
+.layout-with-navbar modus-wc-menu ul,
+.layout-with-navbar-submenu modus-wc-menu ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Nested menu item indentation */
+.side-nav-nested-row {
+  padding-inline-start: 2.5rem;
+}
+
+/* Deeply nested menu item indentation */
+.side-nav-deeply-nested-row {
+  /* Match example inline style: padding-inline-start: 2rem; */
+  padding-inline-start: 2rem;
+}
+
+/* Sub-menu item styling */
+.side-nav-submenu-item {
+  align-items: center;
+  display: flex;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  font-size: 14px;
+}
+
+.side-nav-submenu-item:hover {
+  background-color: var(--modus-wc-color-base-100);
+}
+
+/* Menu item container with border */
+.side-nav-menu-item-container {
+  border-bottom: 1px solid var(--modus-wc-color-base-200);
+}
+
+/* Nested sub-menu indentation */
+.side-nav-nested-submenu {
+  margin-left: 1rem;
+}
+
+/* Icon positioning */
+.side-nav-icon-left {
+  /* Match example spacing between icon and label */
+  margin-right: 1rem;
+}
+
+/* Dropdown toggle icon animation */
+.side-nav-dropdown-toggle {
+  transition: transform 0.2s ease;
+}
+
+/* ===================================================================
+ * Side Navigation Layout Styles
+ * ===================================================================
+ * Critical layout styles for proper navbar + side navigation integration.
+ * Based on patterns from React implementation.
+ */
+
+/* Layout container with navbar - establishes positioning context */
+.layout-with-navbar,
+.layout-with-navbar-submenu {
+  box-shadow: rgba(36, 35, 45, 0.3) 1px 0 4px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+/* Main content row - creates positioning context for absolute side nav */
+.layout-with-navbar .main-content-row,
+.layout-with-navbar-submenu .main-content-row {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  min-height: 500px;
+}
+
+/* Side navigation - must be absolutely positioned with z-index */
+.layout-with-navbar .side-navigation,
+.layout-with-navbar-submenu .side-navigation,
+.layout-with-navbar modus-side-navigation,
+.layout-with-navbar-submenu modus-side-navigation {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  z-index: 999;
+}
+
+/* Panel content - needs margin to account for collapsed side nav width (4rem) */
+.layout-with-navbar .panel-content,
+.layout-with-navbar-submenu .panel-content {
+  flex: 1;
+  padding: 1.5rem;
+  overflow: auto;
+  margin-left: 4rem; /* Account for collapsed side nav width */
+}
+
+/* ========================================
+ * DEV PANEL ANIMATIONS
+ * ======================================== */
+
+/* Fade in animation for backdrop */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Slide in from right animation for panel */
+@keyframes slide-in-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.animate-fade-in {
+  animation: fade-in 0.2s ease-out;
+}
+
+.animate-slide-in-right {
+  animation: slide-in-right 0.3s ease-out;
+}