@almadar/shell-web 0.0.0-stage → 1.0.0

package/themes/vaporwave.css

@@ -0,0 +1,455 @@
+/**
+ * GENERATED — do not edit by hand.
+ * Source: packages/almadar-core/themes/vaporwave.json
+ * Regenerate: node tools/almadar-pattern-sync/dist/index.js themes (or `almadar-sync themes`)
+ */
+
+[data-theme="vaporwave-light"] {
+    --color-primary: #c4008f;
+    --color-primary-hover: #a00074;
+    --color-primary-foreground: #ffffff;
+    --color-secondary: #34d6e0;
+    --color-secondary-hover: #1cc2cc;
+    --color-secondary-foreground: #00262b;
+    --color-accent: #6a1bd1;
+    --color-accent-foreground: #ffffff;
+    --color-muted: #f3d4ec;
+    --color-muted-foreground: #5a2a6a;
+    --color-background: #ffe4f3;
+    --color-foreground: #2a0a4a;
+    --color-card: #fff6fb;
+    --color-card-foreground: #2a0a4a;
+    --color-surface: #ffeef8;
+    --color-border: #c4008f;
+    --color-input: #6a1bd1;
+    --color-ring: #00a0aa;
+    --color-table-header: #ffeef8;
+    --color-table-border: #c4008f;
+    --color-table-row-hover: #ffd6ee;
+    --color-surface-hover: #ffd6ee;
+    --color-border-hover: #c4008f;
+    --color-placeholder: #7a4a8a;
+    --color-error: #c4002a;
+    --color-error-foreground: #ffffff;
+    --color-success: #00703a;
+    --color-success-foreground: #ffffff;
+    --color-warning: #ffb000;
+    --color-warning-foreground: #2a1800;
+    --color-info: #0060c4;
+    --color-info-foreground: #ffffff;
+    --color-scrim: rgba(0, 0, 0, 0.6);
+    --color-series-1: #d741c6;
+    --color-series-2: #0090a0;
+    --color-series-3: #6a1bd1;
+    --color-series-4: #d65a00;
+    --color-series-5: #2a5fd6;
+    --color-series-6: #c4165a;
+    --color-series-7: #188973;
+    --color-series-8: #934bea;
+    --color-diagram-ink: #2a0a4a;
+    --color-diagram-label: #5a2a6a;
+    --color-diagram-guide: #a060b0;
+    --color-diagram-axis: #4a1a7a;
+    --color-diagram-grid: #e8b8e0;
+    --color-diagram-highlight: #c4008f;
+    --color-diagram-fill: #ffd0ec;
+    --radius-none: 0px;
+    --radius-sm: 0px;
+    --radius-md: 2px;
+    --radius-lg: 2px;
+    --radius-xl: 4px;
+    --radius-full: 2px;
+    --border-width: 2px;
+    --border-width-thin: 1px;
+    --border-width-thick: 3px;
+    --font-family: "DotGothic16", "Space Mono", monospace;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+    --letter-spacing: 0em;
+    --line-height: 1.55;
+    --icon-color: #c4008f;
+    --transition-fast: 100ms;
+    --transition-normal: 180ms;
+    --transition-slow: 300ms;
+    --transition-timing: steps(3, end);
+    --hover-scale: 1.0;
+    --hover-translate-y: -1px;
+    --hover-translate-x: 1px;
+    --active-scale: 0.98;
+    --active-translate-y: 0px;
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #00a0aa;
+    --shadow-main: 0 0 14px rgba(196,0,143,.4), 0 0 2px rgba(196,0,143,.9);
+    --shadow-sm: 0 0 6px rgba(196,0,143,.35);
+    --shadow-lg: 0 0 24px rgba(196,0,143,.5), 0 0 4px rgba(196,0,143,.9);
+    --shadow-inner: inset 0 0 8px rgba(196,0,143,.25);
+    --shadow-none: none;
+    --shadow-hover: 0 0 20px rgba(0,183,194,.7), 0 0 3px rgba(0,183,194,1);
+    --shadow-active: inset 0 0 10px rgba(196,0,143,.5);
+    --space-0: 0px;
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-7: 28px;
+    --space-8: 32px;
+    --space-9: 36px;
+    --space-10: 40px;
+    --space-11: 44px;
+    --space-12: 48px;
+    --button-height-sm: 28px;
+    --button-height-md: 36px;
+    --button-height-lg: 46px;
+    --input-height-sm: 28px;
+    --input-height-md: 36px;
+    --input-height-lg: 46px;
+    --row-height-compact: 32px;
+    --row-height-normal: 40px;
+    --row-height-spacious: 48px;
+    --card-padding-sm: 12px;
+    --card-padding-md: 16px;
+    --card-padding-lg: 24px;
+    --dialog-padding: 24px;
+    --section-gap: 32px;
+    --font-family-display: "VT323", "Space Mono", monospace;
+    --font-family-body: "DotGothic16", "Space Mono", monospace;
+    --font-family-mono: "Space Mono", ui-monospace, monospace;
+    --heading-weight: 400;
+    --heading-transform: uppercase;
+    --heading-tracking: 0.12em;
+    --heading-style: normal;
+    --heading-shadow: 1px 0 rgba(255,0,200,0.7), -1px 0 rgba(0,200,216,0.7);
+    --text-xs: 12px;
+    --leading-xs: 18px;
+    --text-sm: 14px;
+    --leading-sm: 20px;
+    --text-base: 15px;
+    --leading-base: 24px;
+    --text-lg: 17px;
+    --leading-lg: 26px;
+    --text-xl: 20px;
+    --leading-xl: 28px;
+    --text-2xl: 26px;
+    --leading-2xl: 32px;
+    --text-3xl: 32px;
+    --leading-3xl: 38px;
+    --text-4xl: 40px;
+    --leading-4xl: 44px;
+    --text-display-1: 52px;
+    --leading-display-1: 56px;
+    --text-display-2: 68px;
+    --leading-display-2: 72px;
+    --intent-heading-major-size: var(--text-2xl);
+    --intent-heading-major-weight: var(--font-weight-normal);
+    --intent-heading-major-leading: var(--leading-2xl);
+    --intent-heading-minor-size: var(--text-lg);
+    --intent-heading-minor-weight: var(--font-weight-normal);
+    --intent-heading-minor-leading: var(--leading-lg);
+    --intent-body-emphasis-size: var(--text-base);
+    --intent-body-emphasis-weight: var(--font-weight-medium);
+    --intent-body-emphasis-leading: var(--leading-base);
+    --intent-body-default-size: var(--text-sm);
+    --intent-body-default-weight: var(--font-weight-normal);
+    --intent-body-default-leading: var(--leading-sm);
+    --intent-body-quiet-size: var(--text-sm);
+    --intent-body-quiet-weight: var(--font-weight-normal);
+    --intent-body-quiet-leading: var(--leading-sm);
+    --intent-caption-size: var(--text-xs);
+    --intent-caption-weight: var(--font-weight-normal);
+    --intent-caption-leading: var(--leading-xs);
+    --intent-numeric-size: var(--text-sm);
+    --intent-numeric-weight: var(--font-weight-medium);
+    --intent-numeric-leading: var(--leading-sm);
+    --duration-instant: 0ms;
+    --duration-fast: 100ms;
+    --duration-normal: 180ms;
+    --duration-slow: 300ms;
+    --duration-dramatic: 500ms;
+    --easing-linear: steps(3, end);
+    --easing-standard: steps(3, end);
+    --easing-emphasized: steps(3, end);
+    --easing-spring: steps(3, end);
+    --motion-modal-enter-from-transform: scaleY(0.02);
+    --motion-modal-exit-to-transform: scaleY(0.02);
+    --motion-popover-enter-from-transform: scaleY(0.1);
+    --motion-popover-exit-to-transform: scaleY(0.1);
+    --motion-toast-enter-from-transform: translateX(24px);
+    --motion-toast-exit-to-transform: translateX(24px);
+    --motion-page-enter-from-transform: translateX(-16px);
+    --icon-family: tabler;
+    --icon-stroke-width: 2;
+    --icon-default-size: 16px;
+    --elevation-card: var(--shadow-main);
+    --elevation-popover: var(--shadow-lg);
+    --elevation-dialog: var(--shadow-lg);
+    --elevation-toast: var(--shadow-lg);
+    --elevation-interactive: var(--shadow-sm);
+    --elevation-pressed: var(--shadow-active);
+    --radius-container: 2px;
+    --radius-interactive: 0px;
+    --radius-pill: 2px;
+    --border-hairline: 1px;
+    --border-standard: var(--border-width);
+    --border-heavy: var(--border-width-thick);
+    --corner-shape: round;
+    --corner-shape-pill: round;
+    --border-style: solid;
+    --border-style-interactive: solid;
+    --surface-page-image: linear-gradient(180deg, rgba(255, 150, 190, 0.35) 0%, transparent 60%), repeating-linear-gradient(0deg, rgba(106, 27, 209, 0.14) 0px, rgba(106, 27, 209, 0.14) 1px, transparent 1px, transparent 40px), repeating-linear-gradient(90deg, rgba(106, 27, 209, 0.14) 0px, rgba(106, 27, 209, 0.14) 1px, transparent 1px, transparent 40px);
+    --surface-page-image-size: auto;
+    --diagram-stroke-thin: 1px;
+    --diagram-stroke-normal: 2px;
+    --diagram-stroke-bold: 3px;
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 3 5;
+    --diagram-dot: 1 5;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.3;
+    --diagram-roughness: 0;
+    --diagram-glow: 8;
+    --diagram-shadow: 0 0 12px rgba(196, 0, 143, 0.5);
+    --diagram-marker: triangle;
+    --diagram-label-font: mono;
+    --diagram-label-size: xs;
+    --diagram-label-weight: 400;
+    --diagram-label-case: uppercase;
+    --diagram-corner: 2px;
+    --material-roughness: 0.2;
+    --material-metalness: 0.5;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.5;
+    --light-key: 1.2;
+    --light-key-color: #ff9ae0;
+    --scene-fog: 0.35;
+}
+
+[data-theme="vaporwave-dark"] {
+    --color-primary: #ff3dcb;
+    --color-primary-hover: #ff70d8;
+    --color-primary-foreground: #1a0030;
+    --color-secondary: #00f0ff;
+    --color-secondary-hover: #5cf6ff;
+    --color-secondary-foreground: #001a2a;
+    --color-accent: #b388ff;
+    --color-accent-foreground: #1a0030;
+    --color-muted: #3a1d7a;
+    --color-muted-foreground: #e0cffb;
+    --color-background: #1a0b3a;
+    --color-foreground: #f8e9ff;
+    --color-card: #28125a;
+    --color-card-foreground: #f8e9ff;
+    --color-surface: #220f4c;
+    --color-border: #ff3dcb;
+    --color-input: #00f0ff;
+    --color-ring: #00f0ff;
+    --color-table-header: #220f4c;
+    --color-table-border: #ff3dcb;
+    --color-table-row-hover: #36197a;
+    --color-surface-hover: #36197a;
+    --color-border-hover: #ff3dcb;
+    --color-placeholder: #a58fd0;
+    --color-error: #ff4d6d;
+    --color-error-foreground: #2a0010;
+    --color-success: #2bff9a;
+    --color-success-foreground: #002a14;
+    --color-warning: #ffd60a;
+    --color-warning-foreground: #2a2000;
+    --color-info: #4dc3ff;
+    --color-info-foreground: #001a2e;
+    --color-scrim: rgba(0, 0, 0, 0.7);
+    --color-series-1: #ff3dcb;
+    --color-series-2: #3af4d6;
+    --color-series-3: #b388ff;
+    --color-series-4: #ff9a5a;
+    --color-series-5: #5a8aff;
+    --color-series-6: #f98ceb;
+    --color-series-7: #26cc95;
+    --color-series-8: #b66dbf;
+    --color-diagram-ink: #f9dde5;
+    --color-diagram-label: #e0cffb;
+    --color-diagram-guide: #9a7ad0;
+    --color-diagram-axis: #f8e9ff;
+    --color-diagram-grid: #4a2a8a;
+    --color-diagram-highlight: #00f0ff;
+    --color-diagram-fill: #3a1a7a;
+    --radius-none: 0px;
+    --radius-sm: 0px;
+    --radius-md: 2px;
+    --radius-lg: 2px;
+    --radius-xl: 4px;
+    --radius-full: 2px;
+    --border-width: 2px;
+    --border-width-thin: 1px;
+    --border-width-thick: 3px;
+    --font-family: "DotGothic16", "Space Mono", monospace;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+    --letter-spacing: 0em;
+    --line-height: 1.55;
+    --icon-color: #00f0ff;
+    --transition-fast: 100ms;
+    --transition-normal: 180ms;
+    --transition-slow: 300ms;
+    --transition-timing: steps(3, end);
+    --hover-scale: 1.0;
+    --hover-translate-y: -1px;
+    --hover-translate-x: 1px;
+    --active-scale: 0.98;
+    --active-translate-y: 0px;
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #00f0ff;
+    --shadow-main: 0 0 14px rgba(255,61,203,.55), 0 0 2px #ff3dcb;
+    --shadow-sm: 0 0 6px rgba(255,61,203,.5);
+    --shadow-lg: 0 0 26px rgba(255,61,203,.6), 0 0 4px #ff3dcb;
+    --shadow-inner: inset 0 0 8px rgba(0,240,255,.3);
+    --shadow-none: none;
+    --shadow-hover: 0 0 20px rgba(0,240,255,.75), 0 0 3px #00f0ff;
+    --shadow-active: inset 0 0 10px rgba(255,61,203,.6);
+    --space-0: 0px;
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-7: 28px;
+    --space-8: 32px;
+    --space-9: 36px;
+    --space-10: 40px;
+    --space-11: 44px;
+    --space-12: 48px;
+    --button-height-sm: 28px;
+    --button-height-md: 36px;
+    --button-height-lg: 46px;
+    --input-height-sm: 28px;
+    --input-height-md: 36px;
+    --input-height-lg: 46px;
+    --row-height-compact: 32px;
+    --row-height-normal: 40px;
+    --row-height-spacious: 48px;
+    --card-padding-sm: 12px;
+    --card-padding-md: 16px;
+    --card-padding-lg: 24px;
+    --dialog-padding: 24px;
+    --section-gap: 32px;
+    --font-family-display: "VT323", "Space Mono", monospace;
+    --font-family-body: "DotGothic16", "Space Mono", monospace;
+    --font-family-mono: "Space Mono", ui-monospace, monospace;
+    --heading-weight: 400;
+    --heading-transform: uppercase;
+    --heading-tracking: 0.12em;
+    --heading-style: normal;
+    --heading-shadow: 1px 0 rgba(255,0,200,0.7), -1px 0 rgba(0,240,255,0.7);
+    --text-xs: 12px;
+    --leading-xs: 18px;
+    --text-sm: 14px;
+    --leading-sm: 20px;
+    --text-base: 15px;
+    --leading-base: 24px;
+    --text-lg: 17px;
+    --leading-lg: 26px;
+    --text-xl: 20px;
+    --leading-xl: 28px;
+    --text-2xl: 26px;
+    --leading-2xl: 32px;
+    --text-3xl: 32px;
+    --leading-3xl: 38px;
+    --text-4xl: 40px;
+    --leading-4xl: 44px;
+    --text-display-1: 52px;
+    --leading-display-1: 56px;
+    --text-display-2: 68px;
+    --leading-display-2: 72px;
+    --intent-heading-major-size: var(--text-2xl);
+    --intent-heading-major-weight: var(--font-weight-normal);
+    --intent-heading-major-leading: var(--leading-2xl);
+    --intent-heading-minor-size: var(--text-lg);
+    --intent-heading-minor-weight: var(--font-weight-normal);
+    --intent-heading-minor-leading: var(--leading-lg);
+    --intent-body-emphasis-size: var(--text-base);
+    --intent-body-emphasis-weight: var(--font-weight-medium);
+    --intent-body-emphasis-leading: var(--leading-base);
+    --intent-body-default-size: var(--text-sm);
+    --intent-body-default-weight: var(--font-weight-normal);
+    --intent-body-default-leading: var(--leading-sm);
+    --intent-body-quiet-size: var(--text-sm);
+    --intent-body-quiet-weight: var(--font-weight-normal);
+    --intent-body-quiet-leading: var(--leading-sm);
+    --intent-caption-size: var(--text-xs);
+    --intent-caption-weight: var(--font-weight-normal);
+    --intent-caption-leading: var(--leading-xs);
+    --intent-numeric-size: var(--text-sm);
+    --intent-numeric-weight: var(--font-weight-medium);
+    --intent-numeric-leading: var(--leading-sm);
+    --duration-instant: 0ms;
+    --duration-fast: 100ms;
+    --duration-normal: 180ms;
+    --duration-slow: 300ms;
+    --duration-dramatic: 500ms;
+    --easing-linear: steps(3, end);
+    --easing-standard: steps(3, end);
+    --easing-emphasized: steps(3, end);
+    --easing-spring: steps(3, end);
+    --motion-modal-enter-from-transform: scaleY(0.02);
+    --motion-modal-exit-to-transform: scaleY(0.02);
+    --motion-popover-enter-from-transform: scaleY(0.1);
+    --motion-popover-exit-to-transform: scaleY(0.1);
+    --motion-toast-enter-from-transform: translateX(24px);
+    --motion-toast-exit-to-transform: translateX(24px);
+    --motion-page-enter-from-transform: translateX(-16px);
+    --icon-family: tabler;
+    --icon-stroke-width: 2;
+    --icon-default-size: 16px;
+    --elevation-card: var(--shadow-main);
+    --elevation-popover: var(--shadow-lg);
+    --elevation-dialog: var(--shadow-lg);
+    --elevation-toast: var(--shadow-lg);
+    --elevation-interactive: var(--shadow-sm);
+    --elevation-pressed: var(--shadow-active);
+    --radius-container: 2px;
+    --radius-interactive: 0px;
+    --radius-pill: 2px;
+    --border-hairline: 1px;
+    --border-standard: var(--border-width);
+    --border-heavy: var(--border-width-thick);
+    --corner-shape: round;
+    --corner-shape-pill: round;
+    --border-style: solid;
+    --border-style-interactive: solid;
+    --surface-page-image: linear-gradient(180deg, rgba(255, 61, 203, 0.28) 0%, transparent 60%), repeating-linear-gradient(0deg, rgba(0, 240, 255, 0.18) 0px, rgba(0, 240, 255, 0.18) 1px, transparent 1px, transparent 40px), repeating-linear-gradient(90deg, rgba(0, 240, 255, 0.18) 0px, rgba(0, 240, 255, 0.18) 1px, transparent 1px, transparent 40px);
+    --surface-page-image-size: auto;
+    --diagram-stroke-thin: 1px;
+    --diagram-stroke-normal: 2px;
+    --diagram-stroke-bold: 3px;
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 3 5;
+    --diagram-dot: 1 5;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.3;
+    --diagram-roughness: 0;
+    --diagram-glow: 8;
+    --diagram-shadow: 0 0 12px rgba(196, 0, 143, 0.5);
+    --diagram-marker: triangle;
+    --diagram-label-font: mono;
+    --diagram-label-size: xs;
+    --diagram-label-weight: 400;
+    --diagram-label-case: uppercase;
+    --diagram-corner: 2px;
+    --material-roughness: 0.2;
+    --material-metalness: 0.5;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.5;
+    --light-key: 1.2;
+    --light-key-color: #ff9ae0;
+    --scene-fog: 0.35;
+}