@hellboy/ds 0.1.2

package/src/style/modes/dark.css

@@ -0,0 +1,146 @@
+/**
+ * Dark Theme
+ * Dark color scheme
+ */
+
+:root[data-theme="dark"] {
+  --lightness-foreground-1: 96%;
+  --lightness-foreground-2: 88%;
+  --lightness-foreground-3: 80%;
+  --lightness-foreground-4: 64%;
+  --lightness-foreground-5: 48%;
+  --lightness-foreground-6: 32%;
+
+  --lightness-bg-1: 4%;
+  --lightness-bg-2: 12%;
+  --lightness-bg-3: 20%;
+
+  /* Base colors */
+  --color-primary: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness), 1);
+  --color-on-primary: hsla(var(--primary-hue), 0%, 100%, 1);
+
+  --color-secondary: hsla(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness), 1);
+  --color-on-secondary: hsla(var(--secondary-hue), 0%, 100%, 1);
+
+  --color-tertiary: hsla(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness), 1);
+  --color-on-tertiary: hsla(var(--secondary-hue), 0%, 100%, 1);
+
+  --color-accent: hsla(var(--accent-hue), var(--accent-saturation), var(--accent-lightness), 1);
+  --color-on-accent: hsla(var(--accent-hue), 0%, 100%, 1);
+
+  /* Status colors */
+  --color-success: hsla(var(--success-hue), var(--success-saturation), var(--success-lightness), 1);
+  --color-on-success: hsla(var(--success-hue), 0%, 100%, 1);
+
+  --color-warning: hsla(var(--warning-hue), var(--warning-saturation), var(--warning-lightness), 1);
+  --color-on-warning: hsla(var(--warning-hue), 0%, 100%, 1);
+
+  --color-error: hsla(var(--error-hue), var(--error-saturation), var(--error-lightness), 1);
+  --color-on-error: hsla(var(--error-hue), 0%, 100%, 1);
+
+  --color-info: hsla(var(--info-hue), var(--info-saturation), var(--info-lightness), 1);
+  --color-on-info: hsla(var(--info-hue), 0%, 100%, 1);
+
+  /* Foreground & background */
+  --color-foreground-1: hsla(0, 0%, var(--lightness-foreground-1), 1);
+  --color-foreground-2: hsla(0, 0%, var(--lightness-foreground-2), 1);
+  --color-foreground-3: hsla(0, 0%, var(--lightness-foreground-3), 1);
+  --color-foreground-4: hsla(0, 0%, var(--lightness-foreground-4), 1);
+  --color-foreground-5: hsla(0, 0%, var(--lightness-foreground-5), 1);
+  --color-foreground-6: hsla(0, 0%, var(--lightness-foreground-6), 1);
+
+  --color-bg-1: hsla(var(--primary-hue), 10%, var(--lightness-bg-1), 1);
+  --color-bg-2: hsla(var(--primary-hue), 30%, var(--lightness-bg-2), 1);
+  --color-bg-3: hsla(var(--primary-hue), 50%, var(--lightness-bg-3), 1);
+
+  /* Interaction state colors */
+  --color-primary-hover: hsla(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) + 10%), 1);
+  --color-primary-active: hsla(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) + 5%), 1);
+  --color-primary-disabled: hsla(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) - 20%), 0.5);
+
+  --color-secondary-hover: hsla(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) + 10%), 1);
+  --color-secondary-active: hsla(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) + 5%), 1);
+  --color-secondary-disabled: hsla(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) - 20%), 0.5);
+
+  --color-accent-hover: hsla(var(--accent-hue), var(--accent-saturation), calc(var(--accent-lightness) + 10%), 1);
+  --color-accent-active: hsla(var(--accent-hue), var(--accent-saturation), calc(var(--accent-lightness) + 5%), 1);
+  --color-accent-disabled: hsla(var(--accent-hue), var(--accent-saturation), calc(var(--accent-lightness) - 20%), 0.5);
+
+  --color-success-hover: hsla(var(--success-hue), var(--success-saturation), calc(var(--success-lightness) + 10%), 1);
+  --color-success-active: hsla(var(--success-hue), var(--success-saturation), calc(var(--success-lightness) + 5%), 1);
+
+  --color-warning-hover: hsla(var(--warning-hue), var(--warning-saturation), calc(var(--warning-lightness) + 10%), 1);
+  --color-warning-active: hsla(var(--warning-hue), var(--warning-saturation), calc(var(--warning-lightness) + 5%), 1);
+
+  --color-error-hover: hsla(var(--error-hue), var(--error-saturation), calc(var(--error-lightness) + 10%), 1);
+  --color-error-active: hsla(var(--error-hue), var(--error-saturation), calc(var(--error-lightness) + 5%), 1);
+
+  --color-info-hover: hsla(var(--info-hue), var(--info-saturation), calc(var(--info-lightness) + 10%), 1);
+  --color-info-active: hsla(var(--info-hue), var(--info-saturation), calc(var(--info-lightness) + 5%), 1);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --lightness-foreground-1: 96%;
+    --lightness-foreground-2: 88%;
+    --lightness-foreground-3: 80%;
+    --lightness-foreground-4: 64%;
+    --lightness-foreground-5: 48%;
+    --lightness-foreground-6: 32%;
+
+    --lightness-bg-1: 4%;
+    --lightness-bg-2: 12%;
+    --lightness-bg-3: 20%;
+
+    /* Base colors */
+    --color-primary: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness), 1);
+    --color-on-primary: hsla(var(--primary-hue), 0%, 100%, 1);
+
+    --color-secondary: hsla(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness), 1);
+    --color-on-secondary: hsla(var(--secondary-hue), 0%, 100%, 1);
+
+    --color-tertiary: var(--color-secondary);
+    --color-on-tertiary: var(--color-on-secondary);
+
+    --color-accent: hsla(var(--accent-hue), var(--accent-saturation), var(--accent-lightness), 1);
+    --color-on-accent: hsla(var(--accent-hue), 0%, 100%, 1);
+
+    /* Status colors */
+    --color-success: hsla(var(--success-hue), var(--success-saturation), 50%, 1);
+    --color-on-success: hsla(var(--success-hue), 0%, 100%, 1);
+
+    --color-warning: hsla(var(--warning-hue), var(--warning-saturation), 50%, 1);
+    --color-on-warning: hsla(var(--warning-hue), 0%, 100%, 1);
+
+    --color-error: hsla(var(--error-hue), var(--error-saturation), 50%, 1);
+    --color-on-error: hsla(var(--error-hue), 0%, 100%, 1);
+
+    --color-info: hsla(var(--info-hue), var(--info-saturation), 50%, 1);
+    --color-on-info: hsla(var(--info-hue), 0%, 100%, 1);
+
+    /* Foreground & background */
+    --color-foreground-1: hsla(0, 0%, var(--lightness-foreground-1), 1);
+    --color-foreground-2: hsla(0, 0%, var(--lightness-foreground-2), 1);
+    --color-foreground-3: hsla(0, 0%, var(--lightness-foreground-3), 1);
+    --color-foreground-4: hsla(0, 0%, var(--lightness-foreground-4), 1);
+    --color-foreground-5: hsla(0, 0%, var(--lightness-foreground-5), 1);
+    --color-foreground-6: hsla(0, 0%, var(--lightness-foreground-6), 1);
+
+    --color-bg-1: hsla(0, 0%, var(--lightness-bg-1), 1);
+    --color-bg-2: hsla(0, 0%, var(--lightness-bg-2), 1);
+    --color-bg-3: hsla(0, 0%, var(--lightness-bg-3), 1);
+
+    /* Interaction state colors */
+    --color-primary-hover: hsla(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) + 10%), 1);
+    --color-primary-active: hsla(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) + 5%), 1);
+    --color-primary-disabled: hsla(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) - 20%), 0.5);
+
+    --color-secondary-hover: hsla(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) + 10%), 1);
+    --color-secondary-active: hsla(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) + 5%), 1);
+    --color-secondary-disabled: hsla(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) - 20%), 0.5);
+
+    --color-accent-hover: hsla(var(--accent-hue), var(--accent-saturation), calc(var(--accent-lightness) + 10%), 1);
+    --color-accent-active: hsla(var(--accent-hue), var(--accent-saturation), calc(var(--accent-lightness) + 5%), 1);
+    --color-accent-disabled: hsla(var(--accent-hue), var(--accent-saturation), calc(var(--accent-lightness) - 20%), 0.5);
+  }
+}

package/src/style/modes/light.css

@@ -0,0 +1,147 @@
+/**
+ * Light Theme
+ * Default light color scheme
+ */
+
+:root,
+:root[data-theme="light"] {
+  --lightness-foreground-1: 20%;
+  --lightness-foreground-2: 12%;
+  --lightness-foreground-3: 4%;
+  --lightness-foreground-4: 8%;
+  --lightness-foreground-5: 16%;
+  --lightness-foreground-6: 24%;
+
+  --lightness-bg-1: 80%;
+  --lightness-bg-2: 88%;
+  --lightness-bg-3: 96%;
+
+  /* Base colors */
+  --color-primary: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness), 1);
+  --color-on-primary: hsla(var(--primary-hue), 0%, 100%, 1);
+
+  --color-secondary: hsla(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness), 1);
+  --color-on-secondary: hsla(var(--secondary-hue), 0%, 100%, 1);
+
+  --color-tertiary: var(--color-secondary);
+  --color-on-tertiary: var(--color-on-secondary);
+
+  --color-accent: hsla(var(--accent-hue), var(--accent-saturation), var(--accent-lightness), 1);
+  --color-on-accent: hsla(var(--accent-hue), 0%, 100%, 1);
+
+  /* Status colors */
+  --color-success: hsla(var(--success-hue), var(--success-saturation), var(--success-lightness), 1);
+  --color-on-success: hsla(var(--success-hue), 0%, 100%, 1);
+
+  --color-warning: hsla(var(--warning-hue), var(--warning-saturation), var(--warning-lightness), 1);
+  --color-on-warning: hsla(var(--warning-hue), 0%, 100%, 1);
+
+  --color-error: hsla(var(--error-hue), var(--error-saturation), var(--error-lightness), 1);
+  --color-on-error: hsla(var(--error-hue), 0%, 100%, 1);
+
+  --color-info: hsla(var(--info-hue), var(--info-saturation), var(--info-lightness), 1);
+  --color-on-info: hsla(var(--info-hue), 0%, 100%, 1);
+
+  /* Foreground & background */
+  --color-foreground-1: hsla(0, 0%, var(--lightness-foreground-1), 1);
+  --color-foreground-2: hsla(0, 0%, var(--lightness-foreground-2), 1);
+  --color-foreground-3: hsla(0, 0%, var(--lightness-foreground-3), 1);
+  --color-foreground-4: hsla(0, 0%, var(--lightness-foreground-4), 1);
+  --color-foreground-5: hsla(0, 0%, var(--lightness-foreground-5), 1);
+  --color-foreground-6: hsla(0, 0%, var(--lightness-foreground-6), 1);
+
+  --color-bg-1: hsla(var(--primary-hue), 0%, var(--lightness-bg-1), 1);
+  --color-bg-2: hsla(var(--primary-hue), 10%, var(--lightness-bg-2), 1);
+  --color-bg-3: hsla(var(--primary-hue), 30%, var(--lightness-bg-3), 1);
+
+  /* Interaction state colors */
+  --color-primary-hover: hsla(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) + 10%), 1);
+  --color-primary-active: hsla(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) + 5%), 1);
+  --color-primary-disabled: hsla(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) - 20%), 0.5);
+
+  --color-secondary-hover: hsla(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) + 10%), 1);
+  --color-secondary-active: hsla(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) + 5%), 1);
+  --color-secondary-disabled: hsla(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) - 20%), 0.5);
+
+  --color-accent-hover: hsla(var(--accent-hue), var(--accent-saturation), calc(var(--accent-lightness) + 10%), 1);
+  --color-accent-active: hsla(var(--accent-hue), var(--accent-saturation), calc(var(--accent-lightness) + 5%), 1);
+  --color-accent-disabled: hsla(var(--accent-hue), var(--accent-saturation), calc(var(--accent-lightness) - 20%), 0.5);
+
+  --color-success-hover: hsla(var(--success-hue), var(--success-saturation), calc(var(--success-lightness) + 10%), 1);
+  --color-success-active: hsla(var(--success-hue), var(--success-saturation), calc(var(--success-lightness) + 5%), 1);
+
+  --color-warning-hover: hsla(var(--warning-hue), var(--warning-saturation), calc(var(--warning-lightness) + 10%), 1);
+  --color-warning-active: hsla(var(--warning-hue), var(--warning-saturation), calc(var(--warning-lightness) + 5%), 1);
+
+  --color-error-hover: hsla(var(--error-hue), var(--error-saturation), calc(var(--error-lightness) + 10%), 1);
+  --color-error-active: hsla(var(--error-hue), var(--error-saturation), calc(var(--error-lightness) + 5%), 1);
+
+  --color-info-hover: hsla(var(--info-hue), var(--info-saturation), calc(var(--info-lightness) + 10%), 1);
+  --color-info-active: hsla(var(--info-hue), var(--info-saturation), calc(var(--info-lightness) + 5%), 1);
+}
+
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme]) {
+    --lightness-foreground-1: 20%;
+    --lightness-foreground-2: 12%;
+    --lightness-foreground-3: 4%;
+    --lightness-foreground-4: 8%;
+    --lightness-foreground-5: 16%;
+    --lightness-foreground-6: 24%;
+
+    --lightness-bg-1: 80%;
+    --lightness-bg-2: 88%;
+    --lightness-bg-3: 96%;
+
+    /* Base colors */
+    --color-primary: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness), 1);
+    --color-on-primary: hsla(var(--primary-hue), 0%, 100%, 1);
+
+    --color-secondary: hsla(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness), 1);
+    --color-on-secondary: hsla(var(--secondary-hue), 0%, 100%, 1);
+
+    --color-tertiary: var(--color-secondary);
+    --color-on-tertiary: var(--color-foreground-1);
+
+    --color-accent: hsla(var(--accent-hue), var(--accent-saturation), var(--accent-lightness), 1);
+    --color-on-accent: hsla(var(--accent-hue), 0%, 100%, 1);
+
+    /* Status colors */
+    --color-success: hsla(var(--success-hue), var(--success-saturation), 50%, 1);
+    --color-on-success: hsla(var(--success-hue), 0%, 100%, 1);
+
+    --color-warning: hsla(var(--warning-hue), var(--warning-saturation), 50%, 1);
+    --color-on-warning: hsla(var(--warning-hue), 0%, 100%, 1);
+
+    --color-error: hsla(var(--error-hue), var(--error-saturation), 50%, 1);
+    --color-on-error: hsla(var(--error-hue), 0%, 100%, 1);
+
+    --color-info: hsla(var(--info-hue), var(--info-saturation), 50%, 1);
+    --color-on-info: hsla(var(--info-hue), 0%, 100%, 1);
+
+    /* Foreground & background */
+    --color-foreground-1: hsla(0, 0%, var(--lightness-foreground-1), 1);
+    --color-foreground-2: hsla(0, 0%, var(--lightness-foreground-2), 1);
+    --color-foreground-3: hsla(0, 0%, var(--lightness-foreground-3), 1);
+    --color-foreground-4: hsla(0, 0%, var(--lightness-foreground-4), 1);
+    --color-foreground-5: hsla(0, 0%, var(--lightness-foreground-5), 1);
+    --color-foreground-6: hsla(0, 0%, var(--lightness-foreground-6), 1);
+
+    --color-bg-1: hsla(0, 0%, var(--lightness-bg-1), 1);
+    --color-bg-2: hsla(0, 0%, var(--lightness-bg-2), 1);
+    --color-bg-3: hsla(0, 0%, var(--lightness-bg-3), 1);
+
+    /* Interaction state colors */
+    --color-primary-hover: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness-hover), 1);
+    --color-primary-active: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness-active), 1);
+    --color-primary-disabled: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness-disabled), 0.5);
+
+    --color-secondary-hover: hsla(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness-hover), 1);
+    --color-secondary-active: hsla(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness-active), 1);
+    --color-secondary-disabled: hsla(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness-disabled), 0.5);
+
+    --color-accent-hover: hsla(var(--accent-hue), var(--accent-saturation), var(--accent-lightness-hover), 1);
+    --color-accent-active: hsla(var(--accent-hue), var(--accent-saturation), var(--accent-lightness-active), 1);
+    --color-accent-disabled: hsla(var(--accent-hue), var(--accent-saturation), var(--accent-lightness-disabled), 0.5);
+  }
+}

package/src/style/semantic.css

@@ -0,0 +1,52 @@
+/**
+ * Semantic Color Mappings
+ * Maps base colors into semantic roles for components
+ */
+
+:root {
+  /* Text aliases */
+  --color-text-primary: var(--color-foreground-1);
+  --color-text-secondary: var(--color-foreground-2);
+  --color-text-tertiary: var(--color-foreground-3);
+
+  --color-primary-dark: var(--color-primary-active);
+  --color-surface-variant: var(--color-bg-3);
+  --color-outline: var(--color-foreground-2);
+
+  /* Semantic roles: surfaces */
+  --color-surface-primary: var(--color-primary);
+  --color-surface-secondary: var(--color-secondary);
+  --color-on-surface-primary: var(--color-on-primary);
+  --color-on-surface-secondary: var(--color-on-secondary);
+
+  /* Semantic roles: status backgrounds */
+  --color-status-error: var(--color-error);
+  --color-status-success: var(--color-success);
+  --color-status-warning: var(--color-warning);
+  --color-status-info: var(--color-info);
+
+  /* Semantic roles: status on-status (text on status backgrounds) */
+  --color-on-status-error: var(--color-on-error);
+  --color-on-status-success: var(--color-on-success);
+  --color-on-status-warning: var(--color-on-warning);
+  --color-on-status-info: var(--color-on-info);
+
+  /* Semantic roles: actions */
+  --color-action-primary: var(--color-accent);
+  --color-on-action-primary: var(--color-on-accent);
+  --color-action-primary-hover: var(--color-accent-hover);
+  --color-action-primary-active: var(--color-accent-active);
+  --color-action-primary-disabled: var(--color-accent-disabled);
+
+  --color-action-secondary: var(--color-secondary);
+  --color-on-action-secondary: var(--color-on-secondary);
+  --color-action-secondary-hover: var(--color-secondary-hover);
+  --color-action-secondary-active: var(--color-secondary-active);
+  --color-action-secondary-disabled: var(--color-secondary-disabled);
+
+  --color-action-tertiary: var(--color-tertiary);
+  --color-on-action-tertiary: var(--color-on-tertiary);
+  --color-action-tertiary-hover: var(--color-tertiary-hover);
+  --color-action-tertiary-active: var(--color-tertiary-active);
+  --color-action-tertiary-disabled: var(--color-tertiary-disabled);
+}

package/src/style/styles.css

@@ -0,0 +1,51 @@
+/**
+ * Hellboy Design System - Main Styles
+ * Central import for all tokens, foundations, themes, and component styles
+ */
+
+/* Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Signika:wght@300..700&family=Rubik:ital,wght@0,300;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
+
+/* Theme (replaceable)
+	NOTE: `theme.json` is the source of truth for theme values (7 core colors).
+	During build we generate `theme.css` from `src/style/themes/theme.json` and
+	write it to `dist/theme.css` so consumers can load `/theme.css` directly.
+	Do NOT import `theme.css` into this bundled stylesheet; keep the file
+	separate so end-users can override or replace `theme.json` as needed.
+*/
+
+/* Foundations */
+@import './foundations/typography.css';
+@import './foundations/spacing.css';
+@import './foundations/motion.css';
+@import './foundations/z-index.css';
+@import './foundations/global.css';
+
+/* Modes */
+@import './modes/light.css';
+@import './modes/dark.css';
+
+/* Semantic (color mappings) */
+@import './semantic.css';
+
+/* Component Styles */
+@import './components/button/button.css';
+@import './components/checkbox.css';
+@import './components/switch/switch.css';
+@import './components/header/header.css';
+@import './components/page/page.css';
+@import './components/section/section.css';
+@import './components/layout/layout.css';
+@import './components/navbar/navbar.css';
+@import './components/code-block/code-block.css';
+@import './components/popover/popover.css';
+@import './components/theme-control/theme-control.css';
+@import './components/card/card.css';
+@import './components/color-control/color-control.css';
+@import './components/grid/grid.css';
+@import './components/slider/slider.css';
+@import './components/input/input.css';
+@import './components/list/list.css';
+@import './components/radio.css';
+@import './components/select/select.css';
+@import './components/page-index/page-index.css';

package/src/style/themes/theme.json

@@ -0,0 +1,37 @@
+{
+  "primary": {
+    "hue": 0,
+    "saturation": 69,
+    "lightness": 31
+  },
+  "secondary": {
+    "hue": 16,
+    "saturation": 63,
+    "lightness": 23
+  },
+  "accent": {
+    "hue": 0,
+    "saturation": 89,
+    "lightness": 41
+  },
+  "success": {
+    "hue": 140,
+    "saturation": 100,
+    "lightness": 19
+  },
+  "warning": {
+    "hue": 34,
+    "saturation": 100,
+    "lightness": 31
+  },
+  "error": {
+    "hue": 264,
+    "saturation": 0,
+    "lightness": 14
+  },
+  "info": {
+    "hue": 261,
+    "saturation": 69,
+    "lightness": 31
+  }
+}