hakumi_components 0.1.3.pre

data/app/javascript/stylesheets/_theme-tokens.scss

@@ -0,0 +1,270 @@
+// Hakumi Components - Theme Tokens Layer
+// CSS Custom Properties for runtime theming
+// Token architecture based on Ant Design v6 design system
+@use 'variables' as *;
+
+:root {
+
+
+
+    --color-primary: #{$primary-color};
+    --color-primary-hover: #{$primary-color-hover};
+    --color-primary-active: #{$primary-color-active};
+    --color-primary-outline: #{$primary-color-outline};
+    --color-primary-bg: #{$primary-color-bg};
+    --color-primary-border: #{$primary-color-border};
+
+
+
+
+    --color-success: #{$success-color};
+    --color-success-hover: #{$success-color-hover};
+    --color-success-active: #{$success-color-active};
+    --color-success-outline: #{$success-color-outline};
+    --color-success-bg: #{$success-color-bg};
+    --color-success-border: #{$success-color-border};
+
+
+
+
+    --color-warning: #{$warning-color};
+    --color-warning-hover: #{$warning-color-hover};
+    --color-warning-active: #{$warning-color-active};
+    --color-warning-outline: #{$warning-color-outline};
+    --color-warning-bg: #{$warning-color-bg};
+    --color-warning-border: #{$warning-color-border};
+
+
+
+
+    --color-error: #{$error-color};
+    --color-error-hover: #{$error-color-hover};
+    --color-error-active: #{$error-color-active};
+    --color-error-outline: #{$error-color-outline};
+    --color-error-bg: #{$error-color-bg};
+    --color-error-border: #{$error-color-border};
+
+
+
+
+    --color-text: #{$text-color};
+    --color-text-secondary: #{$text-color-secondary};
+    --color-text-tertiary: #{$text-color-tertiary};
+    --color-text-quaternary: #{$text-color-quaternary};
+    --color-text-inverse: #{$text-color-inverse};
+    --color-heading: #{$heading-color};
+
+
+    --color-link: #{$link-color};
+    --color-link-hover: #{$link-hover-color};
+    --color-link-active: #{$link-active-color};
+
+
+
+
+    --color-border: #{$border-color};
+    --color-border-secondary: #{$border-color-secondary};
+    --color-border-disabled: #{$disabled-border-color};
+
+
+
+
+    --color-bg: #{$background-color};
+    --color-bg-container: #{$background-color-container};
+    --color-bg-elevated: #{$background-color-elevated};
+    --color-bg-spot: #{$background-color-spot};
+    --color-bg-light: #{$background-color-light};
+    --color-bg-spotlight: #{$background-color-spotlight};
+    --color-component-bg: #{$component-background};
+    --color-body-bg: #{$body-background};
+
+
+
+
+    --color-fill-quaternary: #{$fill-color-quaternary};
+    --color-fill-tertiary: #{$fill-color-tertiary};
+    --color-fill-secondary: #{$fill-color-secondary};
+
+
+
+
+    --color-disabled: #{$disabled-color};
+    --color-disabled-bg: #{$disabled-bg};
+    --color-disabled-border: #{$disabled-border-color};
+
+
+
+
+    --color-control-item-bg-hover: #{$control-item-bg-hover};
+    --color-control-item-bg-active: #{$control-item-bg-active};
+
+
+
+
+    --color-mark-bg: #{$warning-color-border};
+    --color-mark-text: rgba(0, 0, 0, 0.88);
+
+
+
+
+    --shadow-button: #{$shadow-button};
+    --shadow-button-primary: #{$shadow-button-primary};
+    --shadow-base: #{$box-shadow-base};
+    --shadow-sm: #{$box-shadow-sm};
+    --shadow-lg: #{$box-shadow-lg};
+
+
+
+
+    --spacing-xs: #{$padding-xs};
+    --spacing-sm: #{$padding-sm};
+    --spacing-md: #{$padding-md};
+    --spacing-lg: #{$padding-lg};
+    --spacing-xl: #{$padding-xl};
+    --spacing-xxl: #{$padding-xxl};
+
+
+
+
+    --font-family: #{$font-family};
+    --font-size-base: #{$font-size-base};
+    --font-size-lg: #{$font-size-lg};
+    --font-size-sm: #{$font-size-sm};
+    --line-height-base: #{$line-height-base};
+
+
+    --font-size-h1: #{$heading-1-size};
+    --font-size-h2: #{$heading-2-size};
+    --font-size-h3: #{$heading-3-size};
+    --font-size-h4: #{$heading-4-size};
+    --font-size-h5: #{$heading-5-size};
+
+
+
+
+    --border-radius-sm: #{$border-radius-sm};
+    --border-radius-base: #{$border-radius-base};
+    --border-radius-lg: #{$border-radius-lg};
+
+
+
+
+    --color-ripple: rgba(0, 0, 0, 0.15);
+}
+
+
+
+
+[data-theme="dark"] {
+
+    --color-primary: #6366f1;
+    --color-primary-hover: #818cf8;
+    --color-primary-active: #4f46e5;
+    --color-primary-outline: rgba(99, 102, 241, 0.2);
+    --color-primary-bg: #1e1b4b;
+    --color-primary-border: #3730a3;
+
+
+    --color-success: #10b981;
+    --color-success-hover: #34d399;
+    --color-success-active: #059669;
+    --color-success-outline: rgba(16, 185, 129, 0.2);
+    --color-success-bg: #064e3b;
+    --color-success-border: #065f46;
+
+
+    --color-warning: #f59e0b;
+    --color-warning-hover: #fbbf24;
+    --color-warning-active: #d97706;
+    --color-warning-outline: rgba(245, 158, 11, 0.2);
+    --color-warning-bg: #451a03;
+    --color-warning-border: #78350f;
+
+
+    --color-error: #ef4444;
+    --color-error-hover: #f87171;
+    --color-error-active: #dc2626;
+    --color-error-outline: rgba(239, 68, 68, 0.2);
+    --color-error-bg: #450a0a;
+    --color-error-border: #7f1d1d;
+
+
+    --color-text: rgba(255, 255, 255, 0.85);
+    --color-text-secondary: rgba(255, 255, 255, 0.65);
+    --color-text-tertiary: rgba(255, 255, 255, 0.45);
+    --color-text-quaternary: rgba(255, 255, 255, 0.25);
+    --color-text-inverse: #ffffff;
+    --color-heading: rgba(255, 255, 255, 0.85);
+
+
+    --color-link: #6366f1;
+    --color-link-hover: #818cf8;
+    --color-link-active: #4f46e5;
+
+
+    --color-border: #434343;
+    --color-border-secondary: #303030;
+    --color-border-disabled: #434343;
+
+
+    --color-bg: #000000;
+    --color-bg-container: #141414;
+    --color-bg-elevated: #1f1f1f;
+    --color-bg-spot: rgba(255, 255, 255, 0.08);
+    --color-bg-light: #1f1f1f;
+    --color-component-bg: #141414;
+    --color-body-bg: #000000;
+
+
+    --color-fill-quaternary: rgba(255, 255, 255, 0.04);
+    --color-fill-tertiary: rgba(255, 255, 255, 0.06);
+    --color-fill-secondary: rgba(255, 255, 255, 0.08);
+
+
+    --color-disabled: rgba(255, 255, 255, 0.3);
+    --color-disabled-bg: rgba(255, 255, 255, 0.08);
+    --color-disabled-border: #434343;
+
+
+    --color-control-item-bg-hover: rgba(255, 255, 255, 0.08);
+    --color-control-item-bg-active: #1e1b4b;
+
+
+    --color-mark-bg: #ffe58f;
+    --color-mark-text: rgba(0, 0, 0, 0.88);
+
+
+    --shadow-button: 0 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-button-primary: 0 2px 0 rgba(0, 0, 0, 0.1);
+    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.3),
+        0 1px 6px -1px rgba(0, 0, 0, 0.3),
+        0 2px 4px 0 rgba(0, 0, 0, 0.3);
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3),
+        0 1px 6px -1px rgba(0, 0, 0, 0.3);
+    --shadow-lg: 0 6px 16px 0 rgba(0, 0, 0, 0.5),
+        0 3px 6px -4px rgba(0, 0, 0, 0.6),
+        0 9px 28px 8px rgba(0, 0, 0, 0.4);
+
+
+    --color-ripple: rgba(255, 255, 255, 0.3);
+}
+
+
+
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme]) {
+
+        --color-primary: #6366f1;
+        --color-primary-hover: #818cf8;
+        --color-primary-active: #4f46e5;
+        --color-text: rgba(255, 255, 255, 0.85);
+        --color-text-secondary: rgba(255, 255, 255, 0.65);
+        --color-heading: rgba(255, 255, 255, 0.85);
+        --color-border: #434343;
+        --color-bg: #000000;
+        --color-bg-container: #141414;
+        --color-component-bg: #141414;
+        --color-body-bg: #000000;
+    }
+}

data/app/javascript/stylesheets/_variables.scss

@@ -0,0 +1,229 @@
+// Hakumi Components - Design Variables
+// SCSS variables as single source of truth for all design tokens
+// Token architecture based on Ant Design v6 design system
+@use "sass:color";
+
+
+
+
+$primary-color: #6366f1;
+$primary-color-hover: #818cf8;
+$primary-color-active: #4f46e5;
+$primary-color-outline: rgba(99, 102, 241, 0.1);
+$primary-color-bg: color.mix($primary-color, #ffffff, 20%);
+$primary-color-border: color.mix($primary-color, #ffffff, 60%);
+
+
+
+
+$success-color: #10b981;
+$success-color-hover: #34d399;
+$success-color-active: #059669;
+$success-color-outline: rgba(16, 185, 129, 0.1);
+$success-color-bg: color.mix($success-color, #ffffff, 20%);
+$success-color-border: color.mix($success-color, #ffffff, 60%);
+
+
+
+
+$warning-color: #f59e0b;
+$warning-color-hover: #fbbf24;
+$warning-color-active: #d97706;
+$warning-color-outline: rgba(245, 158, 11, 0.1);
+$warning-color-bg: color.mix($warning-color, #ffffff, 20%);
+$warning-color-border: color.mix($warning-color, #ffffff, 60%);
+
+
+
+
+$error-color: #ef4444;
+$error-color-hover: #f87171;
+$error-color-active: #dc2626;
+$error-color-outline: rgba(239, 68, 68, 0.1);
+$error-color-bg: color.mix($error-color, #ffffff, 20%);
+$error-color-border: color.mix($error-color, #ffffff, 60%);
+
+
+
+
+$info-color: #6366f1;
+$info-color-hover: #818cf8;
+$info-color-active: #4f46e5;
+
+
+
+
+$text-color: rgba(0, 0, 0, 0.88);
+$text-color-secondary: rgba(0, 0, 0, 0.65);
+$text-color-tertiary: rgba(0, 0, 0, 0.45);
+$text-color-quaternary: rgba(0, 0, 0, 0.25);
+$text-color-inverse: #ffffff;
+
+
+$heading-color: rgba(0, 0, 0, 0.88);
+
+
+$link-color: $primary-color;
+$link-hover-color: $primary-color-hover;
+$link-active-color: $primary-color-active;
+
+
+
+
+$border-color: #d6d3d1;
+$border-color-secondary: #f5f5f4;
+$border-color-split: rgba(5, 5, 5, 0.06);
+
+
+
+
+$background-color: #ffffff;
+$background-color-container: #ffffff;
+$background-color-elevated: #ffffff;
+$background-color-spot: rgba(0, 0, 0, 0.04);
+$background-color-light: #fafaf9;
+
+
+$component-background: #ffffff;
+$body-background: #ffffff;
+$background-color-spotlight: rgba(0, 0, 0, 0.85);
+
+
+// Fill colors for filled variant inputs
+$fill-color-quaternary: rgba(0, 0, 0, 0.04);  // Lightest - default filled state
+$fill-color-tertiary: rgba(0, 0, 0, 0.06);     // Light - hover state
+$fill-color-secondary: rgba(0, 0, 0, 0.08);    // Medium - active/dark mode
+
+
+
+
+$disabled-color: rgba(0, 0, 0, 0.25);
+$disabled-bg: rgba(0, 0, 0, 0.04);
+$disabled-border-color: $border-color;
+
+
+
+
+$padding-xs: 8px;
+$padding-sm: 12px;
+$padding-md: 16px;
+$padding-lg: 24px;
+$padding-xl: 32px;
+$padding-xxl: 48px;
+
+$margin-xs: 8px;
+$margin-sm: 12px;
+$margin-md: 16px;
+$margin-lg: 24px;
+$margin-xl: 32px;
+$margin-xxl: 48px;
+
+
+
+
+$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+  'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+  'Noto Color Emoji';
+
+
+$font-size-sm: 12px;
+$font-size-base: 14px;
+$font-size-lg: 16px;
+$font-size-xl: 20px;
+
+
+$heading-1-size: 38px;
+$heading-2-size: 30px;
+$heading-3-size: 24px;
+$heading-4-size: 20px;
+$heading-5-size: 16px;
+
+
+$line-height-base: 1.5714285714;
+$line-height-heading-1: 1.2105263158;
+$line-height-heading-2: 1.3333333333;
+$line-height-heading-3: 1.3333333333;
+$line-height-heading-4: 1.4;
+$line-height-heading-5: 1.5;
+
+
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+
+
+
+
+$border-radius-xs: 2px;
+$border-radius-sm: 4px;
+$border-radius-base: 6px;
+$border-radius-lg: 8px;
+$border-radius-xl: 16px;
+
+
+
+
+$box-shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
+  0 1px 6px -1px rgba(0, 0, 0, 0.02),
+  0 2px 4px 0 rgba(0, 0, 0, 0.02);
+
+$box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
+  0 1px 6px -1px rgba(0, 0, 0, 0.02);
+
+$box-shadow-lg: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+  0 3px 6px -4px rgba(0, 0, 0, 0.12),
+  0 9px 28px 8px rgba(0, 0, 0, 0.05);
+
+
+$shadow-button: 0 2px 0 rgba(0, 0, 0, 0.016);
+$shadow-button-primary: 0 2px 0 rgba(99, 102, 241, 0.1);
+
+
+
+
+$zindex-base: 0;
+$zindex-popup-close: 1010;
+$zindex-modal-mask: 1000;
+$zindex-modal: 1000;
+$zindex-notification: 1010;
+$zindex-message: 1010;
+$zindex-popover: 1030;
+$zindex-dropdown: 1050;
+$zindex-picker: 1050;
+$zindex-tooltip: 1070;
+
+
+
+
+$transition-duration-base: 0.2s;
+$transition-duration-slow: 0.3s;
+$transition-duration-fast: 0.1s;
+
+
+$ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
+$ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7);
+$ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+$ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+$ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+$ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
+$ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
+$ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+$ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
+$ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+
+
+
+
+$height-sm: 24px;
+$height-base: 32px;
+$height-lg: 40px;
+$height-xl: 48px;
+
+
+
+
+$control-outline-width: 2px;
+$control-item-bg-hover: rgba(0, 0, 0, 0.04);
+$control-item-bg-active: $primary-color;
+$control-item-bg-active-hover: $primary-color-outline;