@almadar/shell-web 0.0.0-stage → 0.1.0

package/themes/neumorphic.css

@@ -0,0 +1,451 @@
+/**
+ * GENERATED — do not edit by hand.
+ * Source: packages/almadar-core/themes/neumorphic.json
+ * Regenerate: node tools/almadar-pattern-sync/dist/index.js themes (or `almadar-sync themes`)
+ */
+
+[data-theme="neumorphic-light"] {
+    --color-primary: #4353b8;
+    --color-primary-hover: #3746a3;
+    --color-primary-foreground: #ffffff;
+    --color-secondary: #d3d9e3;
+    --color-secondary-hover: #c6cdda;
+    --color-secondary-foreground: #2d3748;
+    --color-accent: #a8325e;
+    --color-accent-foreground: #ffffff;
+    --color-muted: #d3d9e3;
+    --color-muted-foreground: #4a5568;
+    --color-background: #e0e5ec;
+    --color-foreground: #2d3748;
+    --color-card: #e0e5ec;
+    --color-card-foreground: #2d3748;
+    --color-surface: #e0e5ec;
+    --color-border: #b9c2d0;
+    --color-input: #c5ccd9;
+    --color-ring: #4353b8;
+    --color-error: #b42323;
+    --color-error-foreground: #ffffff;
+    --color-success: #1c7346;
+    --color-success-foreground: #ffffff;
+    --color-warning: #f0a93a;
+    --color-warning-foreground: #2d1b00;
+    --color-info: #2b6cb0;
+    --color-info-foreground: #ffffff;
+    --color-table-header: #d3d9e3;
+    --color-table-border: #c5ccd9;
+    --color-table-row-hover: #d8dde7;
+    --color-surface-hover: #d8dde7;
+    --color-border-hover: #4353b8;
+    --color-placeholder: #5f6b7e;
+    --color-scrim: rgba(0, 0, 0, 0.6);
+    --color-series-1: #7d45bc;
+    --color-series-2: #a8325e;
+    --color-series-3: #1f7a8a;
+    --color-series-4: #8a5a1a;
+    --color-series-5: #3b2e8e;
+    --color-series-6: #5d884b;
+    --color-series-7: #ae4d1c;
+    --color-series-8: #3e5a5e;
+    --color-diagram-ink: #2d3748;
+    --color-diagram-label: #4a5568;
+    --color-diagram-guide: #718096;
+    --color-diagram-axis: #4a5568;
+    --color-diagram-grid: rgba(45,55,72,0.12);
+    --color-diagram-highlight: #4353b8;
+    --color-diagram-fill: #d3d9e3;
+    --radius-none: 0px;
+    --radius-sm: 12px;
+    --radius-md: 16px;
+    --radius-lg: 20px;
+    --radius-xl: 26px;
+    --radius-full: 9999px;
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+    --font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 500;
+    --font-weight-medium: 600;
+    --font-weight-bold: 800;
+    --letter-spacing: 0.005em;
+    --line-height: 1.6;
+    --icon-color: #b97fd8;
+    --transition-fast: 120ms;
+    --transition-normal: 240ms;
+    --transition-slow: 280ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+    --hover-scale: 1.03;
+    --hover-translate-y: -1px;
+    --hover-translate-x: 0;
+    --active-scale: 0.97;
+    --active-translate-y: 1px;
+    --focus-ring-width: 3px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: rgba(185, 127, 216, 0.5);
+    --shadow-main: 8px 8px 16px #a3b1c6, -8px -8px 16px #ffffff;
+    --shadow-sm: 4px 4px 8px #a3b1c6, -4px -4px 8px #ffffff;
+    --shadow-lg: 14px 14px 28px #a3b1c6, -14px -14px 28px #ffffff;
+    --shadow-inner: inset 4px 4px 8px #a3b1c6, inset -4px -4px 8px #ffffff;
+    --shadow-none: none;
+    --shadow-hover: 10px 10px 20px #a3b1c6, -10px -10px 20px #ffffff;
+    --shadow-active: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
+    --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: 32px;
+    --button-height-md: 40px;
+    --button-height-lg: 50px;
+    --input-height-sm: 32px;
+    --input-height-md: 40px;
+    --input-height-lg: 50px;
+    --row-height-compact: 36px;
+    --row-height-normal: 44px;
+    --row-height-spacious: 56px;
+    --card-padding-sm: 16px;
+    --card-padding-md: 20px;
+    --card-padding-lg: 32px;
+    --dialog-padding: 32px;
+    --section-gap: 40px;
+    --font-family-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-family-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    --heading-weight: 600;
+    --heading-transform: none;
+    --heading-tracking: 0;
+    --heading-style: normal;
+    --heading-shadow: none;
+    --text-xs: 12px;
+    --leading-xs: 16px;
+    --text-sm: 14px;
+    --leading-sm: 20px;
+    --text-base: 16px;
+    --leading-base: 24px;
+    --text-lg: 18px;
+    --leading-lg: 28px;
+    --text-xl: 20px;
+    --leading-xl: 28px;
+    --text-2xl: 24px;
+    --leading-2xl: 32px;
+    --text-3xl: 30px;
+    --leading-3xl: 36px;
+    --text-4xl: 36px;
+    --leading-4xl: 40px;
+    --text-display-1: 48px;
+    --leading-display-1: 52px;
+    --text-display-2: 60px;
+    --leading-display-2: 64px;
+    --intent-heading-major-size: var(--text-2xl);
+    --intent-heading-major-weight: var(--font-weight-bold);
+    --intent-heading-major-leading: var(--leading-2xl);
+    --intent-heading-minor-size: var(--text-lg);
+    --intent-heading-minor-weight: var(--font-weight-bold);
+    --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: var(--transition-fast);
+    --duration-normal: var(--transition-normal);
+    --duration-slow: var(--transition-slow);
+    --duration-dramatic: 700ms;
+    --easing-linear: linear;
+    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --motion-modal-enter-from-transform: scale(0.94);
+    --motion-modal-exit-to-transform: scale(0.94);
+    --motion-popover-enter-from-transform: scale(0.96);
+    --motion-popover-exit-to-transform: scale(0.96);
+    --motion-toast-enter-from-transform: translateY(16px);
+    --motion-toast-exit-to-transform: translateY(16px);
+    --motion-page-enter-from-transform: translateY(8px);
+    --icon-family: lucide;
+    --icon-stroke-width: 2.25;
+    --icon-default-size: 18px;
+    --elevation-card: var(--shadow-main);
+    --elevation-popover: var(--shadow-lg);
+    --elevation-dialog: var(--shadow-lg);
+    --elevation-toast: var(--shadow-main);
+    --elevation-interactive: var(--shadow-sm);
+    --elevation-pressed: var(--shadow-active);
+    --radius-container: var(--radius-lg);
+    --radius-interactive: var(--radius-md);
+    --radius-pill: var(--radius-full);
+    --border-hairline: 1px;
+    --border-standard: var(--border-width);
+    --border-heavy: var(--border-width-thick);
+    --corner-shape: superellipse(1.3);
+    --corner-shape-pill: superellipse(1.3);
+    --border-style: none;
+    --border-style-interactive: solid;
+    --diagram-stroke-thin: 1;
+    --diagram-stroke-normal: 2;
+    --diagram-stroke-bold: 3;
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 6 6;
+    --diagram-dot: 1 5;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.2;
+    --diagram-roughness: 0;
+    --diagram-glow: 0;
+    --diagram-shadow: 4px 4px 8px #b9c2d0, -4px -4px 8px #ffffff;
+    --diagram-marker: dot;
+    --diagram-label-font: body;
+    --diagram-label-size: sm;
+    --diagram-label-weight: 500;
+    --diagram-label-case: none;
+    --diagram-corner: 12px;
+    --material-roughness: 0.9;
+    --material-metalness: 0;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.75;
+    --light-key: 0.7;
+    --light-key-color: #ffffff;
+    --scene-fog: 0.1;
+}
+
+[data-theme="neumorphic-dark"] {
+    --color-primary: #9aabff;
+    --color-primary-hover: #b1bfff;
+    --color-primary-foreground: #0f1438;
+    --color-secondary: #323748;
+    --color-secondary-hover: #3b4155;
+    --color-secondary-foreground: #e4e8f2;
+    --color-accent: #ff9bb9;
+    --color-accent-foreground: #3a0a1c;
+    --color-muted: #323748;
+    --color-muted-foreground: #b0b8cf;
+    --color-background: #2a2e3b;
+    --color-foreground: #e4e8f2;
+    --color-card: #2a2e3b;
+    --color-card-foreground: #e4e8f2;
+    --color-surface: #2a2e3b;
+    --color-border: #434a5e;
+    --color-input: #3a4054;
+    --color-ring: #9aabff;
+    --color-error: #ff7a7a;
+    --color-error-foreground: #2a0808;
+    --color-success: #5fdc98;
+    --color-success-foreground: #062414;
+    --color-warning: #ffbf5e;
+    --color-warning-foreground: #2d1b00;
+    --color-info: #7ab8f5;
+    --color-info-foreground: #071b3d;
+    --color-table-header: #323748;
+    --color-table-border: #3a4054;
+    --color-table-row-hover: #313647;
+    --color-surface-hover: #313647;
+    --color-border-hover: #9aabff;
+    --color-placeholder: #8f98b2;
+    --color-scrim: rgba(0, 0, 0, 0.7);
+    --color-series-1: #638bd7;
+    --color-series-2: #ff8fb4;
+    --color-series-3: #5fd0d8;
+    --color-series-4: #f8a367;
+    --color-series-5: #65ecd6;
+    --color-series-6: #c89dfa;
+    --color-series-7: #f66c3f;
+    --color-series-8: #8a99a4;
+    --color-diagram-ink: #e4e8f2;
+    --color-diagram-label: #b0b8cc;
+    --color-diagram-guide: #8089a0;
+    --color-diagram-axis: #b0b8cc;
+    --color-diagram-grid: rgba(228,232,242,0.12);
+    --color-diagram-highlight: #9aabff;
+    --color-diagram-fill: #353a4a;
+    --radius-none: 0px;
+    --radius-sm: 12px;
+    --radius-md: 16px;
+    --radius-lg: 20px;
+    --radius-xl: 26px;
+    --radius-full: 9999px;
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+    --font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 500;
+    --font-weight-medium: 600;
+    --font-weight-bold: 800;
+    --letter-spacing: 0.005em;
+    --line-height: 1.6;
+    --icon-color: #cf9ce8;
+    --transition-fast: 120ms;
+    --transition-normal: 240ms;
+    --transition-slow: 280ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+    --hover-scale: 1.03;
+    --hover-translate-y: -1px;
+    --hover-translate-x: 0;
+    --active-scale: 0.97;
+    --active-translate-y: 1px;
+    --focus-ring-width: 3px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: rgba(207, 156, 232, 0.5);
+    --shadow-main: 8px 8px 16px #1d2029, -8px -8px 16px #373c4d;
+    --shadow-sm: 4px 4px 8px #1d2029, -4px -4px 8px #373c4d;
+    --shadow-lg: 14px 14px 28px #1d2029, -14px -14px 28px #373c4d;
+    --shadow-inner: inset 4px 4px 8px #1d2029, inset -4px -4px 8px #373c4d;
+    --shadow-none: none;
+    --shadow-hover: 10px 10px 20px #1d2029, -10px -10px 20px #373c4d;
+    --shadow-active: inset 5px 5px 10px #1d2029, inset -5px -5px 10px #373c4d;
+    --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: 32px;
+    --button-height-md: 40px;
+    --button-height-lg: 50px;
+    --input-height-sm: 32px;
+    --input-height-md: 40px;
+    --input-height-lg: 50px;
+    --row-height-compact: 36px;
+    --row-height-normal: 44px;
+    --row-height-spacious: 56px;
+    --card-padding-sm: 16px;
+    --card-padding-md: 20px;
+    --card-padding-lg: 32px;
+    --dialog-padding: 32px;
+    --section-gap: 40px;
+    --font-family-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-family-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    --heading-weight: 600;
+    --heading-transform: none;
+    --heading-tracking: 0;
+    --heading-style: normal;
+    --heading-shadow: none;
+    --text-xs: 12px;
+    --leading-xs: 16px;
+    --text-sm: 14px;
+    --leading-sm: 20px;
+    --text-base: 16px;
+    --leading-base: 24px;
+    --text-lg: 18px;
+    --leading-lg: 28px;
+    --text-xl: 20px;
+    --leading-xl: 28px;
+    --text-2xl: 24px;
+    --leading-2xl: 32px;
+    --text-3xl: 30px;
+    --leading-3xl: 36px;
+    --text-4xl: 36px;
+    --leading-4xl: 40px;
+    --text-display-1: 48px;
+    --leading-display-1: 52px;
+    --text-display-2: 60px;
+    --leading-display-2: 64px;
+    --intent-heading-major-size: var(--text-2xl);
+    --intent-heading-major-weight: var(--font-weight-bold);
+    --intent-heading-major-leading: var(--leading-2xl);
+    --intent-heading-minor-size: var(--text-lg);
+    --intent-heading-minor-weight: var(--font-weight-bold);
+    --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: var(--transition-fast);
+    --duration-normal: var(--transition-normal);
+    --duration-slow: var(--transition-slow);
+    --duration-dramatic: 700ms;
+    --easing-linear: linear;
+    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --motion-modal-enter-from-transform: scale(0.94);
+    --motion-modal-exit-to-transform: scale(0.94);
+    --motion-popover-enter-from-transform: scale(0.96);
+    --motion-popover-exit-to-transform: scale(0.96);
+    --motion-toast-enter-from-transform: translateY(16px);
+    --motion-toast-exit-to-transform: translateY(16px);
+    --motion-page-enter-from-transform: translateY(8px);
+    --icon-family: lucide;
+    --icon-stroke-width: 2.25;
+    --icon-default-size: 18px;
+    --elevation-card: var(--shadow-main);
+    --elevation-popover: var(--shadow-lg);
+    --elevation-dialog: var(--shadow-lg);
+    --elevation-toast: var(--shadow-main);
+    --elevation-interactive: var(--shadow-sm);
+    --elevation-pressed: var(--shadow-active);
+    --radius-container: var(--radius-lg);
+    --radius-interactive: var(--radius-md);
+    --radius-pill: var(--radius-full);
+    --border-hairline: 1px;
+    --border-standard: var(--border-width);
+    --border-heavy: var(--border-width-thick);
+    --corner-shape: superellipse(1.3);
+    --corner-shape-pill: superellipse(1.3);
+    --border-style: none;
+    --border-style-interactive: solid;
+    --diagram-stroke-thin: 1;
+    --diagram-stroke-normal: 2;
+    --diagram-stroke-bold: 3;
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 6 6;
+    --diagram-dot: 1 5;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.2;
+    --diagram-roughness: 0;
+    --diagram-glow: 0;
+    --diagram-shadow: 4px 4px 8px #b9c2d0, -4px -4px 8px #ffffff;
+    --diagram-marker: dot;
+    --diagram-label-font: body;
+    --diagram-label-size: sm;
+    --diagram-label-weight: 500;
+    --diagram-label-case: none;
+    --diagram-corner: 12px;
+    --material-roughness: 0.9;
+    --material-metalness: 0;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.75;
+    --light-key: 0.7;
+    --light-key-color: #ffffff;
+    --scene-fog: 0.1;
+}