@mars-stack/ui 1.0.0

package/styles/primitives.css

@@ -0,0 +1,126 @@
+/* MARS Design System: Layer 1 -- Primitive Palette
+ * Raw colour scales. Components never use these directly.
+ * The brand palette is generated from app.config.ts primaryColor. */
+
+:root {
+  /* Gray scale (neutral UI surfaces and text) */
+  --gray-50: oklch(0.985 0.002 247);
+  --gray-100: oklch(0.967 0.003 264);
+  --gray-200: oklch(0.928 0.006 264);
+  --gray-300: oklch(0.872 0.01 258);
+  --gray-400: oklch(0.707 0.015 261);
+  --gray-500: oklch(0.551 0.018 264);
+  --gray-600: oklch(0.446 0.018 264);
+  --gray-700: oklch(0.372 0.017 259);
+  --gray-800: oklch(0.278 0.015 264);
+  --gray-900: oklch(0.21 0.012 264);
+  --gray-950: oklch(0.13 0.01 264);
+
+  /* Brand primary (default: blue -- swap via CLI or config) */
+  --brand-50: oklch(0.97 0.014 254);
+  --brand-100: oklch(0.932 0.032 255);
+  --brand-200: oklch(0.882 0.059 254);
+  --brand-300: oklch(0.809 0.105 251);
+  --brand-400: oklch(0.714 0.153 248);
+  --brand-500: oklch(0.623 0.214 259);
+  --brand-600: oklch(0.546 0.245 263);
+  --brand-700: oklch(0.488 0.243 264);
+  --brand-800: oklch(0.424 0.199 265);
+  --brand-900: oklch(0.379 0.146 265);
+  --brand-950: oklch(0.283 0.111 264);
+
+  /* Feedback colours (fixed across themes) */
+  --red-50: oklch(0.971 0.013 17);
+  --red-500: oklch(0.637 0.237 25);
+  --red-600: oklch(0.577 0.245 27);
+  --red-700: oklch(0.505 0.213 27);
+
+  --amber-50: oklch(0.987 0.022 95);
+  --amber-500: oklch(0.769 0.188 70);
+  --amber-600: oklch(0.666 0.179 58);
+
+  --emerald-50: oklch(0.979 0.021 166);
+  --emerald-500: oklch(0.696 0.17 163);
+  --emerald-600: oklch(0.596 0.145 163);
+  --emerald-700: oklch(0.527 0.124 163);
+
+  --blue-50: oklch(0.97 0.014 254);
+  --blue-500: oklch(0.623 0.214 259);
+  --blue-600: oklch(0.546 0.245 263);
+  --blue-700: oklch(0.488 0.243 264);
+
+  /* Accent palette (default: amber -- swap via CLI or config) */
+  --accent-50: oklch(0.987 0.022 95);
+  --accent-100: oklch(0.962 0.059 95);
+  --accent-200: oklch(0.924 0.12 95);
+  --accent-300: oklch(0.879 0.169 84);
+  --accent-400: oklch(0.828 0.189 75);
+  --accent-500: oklch(0.769 0.188 70);
+  --accent-600: oklch(0.666 0.179 58);
+  --accent-700: oklch(0.555 0.163 48);
+  --accent-800: oklch(0.473 0.137 46);
+  --accent-900: oklch(0.414 0.112 45);
+  --accent-950: oklch(0.279 0.077 45);
+
+  /* Border radius */
+  --radius-none: 0;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-full: 9999px;
+
+  /* Spacing (base 4px grid) */
+  --space-0: 0;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+
+  /* Typography scale */
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-4xl: 2.25rem;
+
+  --leading-tight: 1.25;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+
+  --tracking-tight: -0.025em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.025em;
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Animation */
+  --duration-fast: 150ms;
+  --duration-normal: 250ms;
+  --duration-slow: 400ms;
+
+  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* Z-index scale */
+  --z-dropdown: 10;
+  --z-sticky: 20;
+  --z-modal: 30;
+  --z-toast: 40;
+  --z-tooltip: 50;
+}

package/styles/theme.css

@@ -0,0 +1,116 @@
+/* MARS Design System: Tailwind 4 @theme Integration
+ * Maps semantic tokens to Tailwind utility classes.
+ * Usage: bg-surface-card, text-text-primary, border-border-input, etc. */
+
+@theme {
+  /* Surfaces -> bg-surface-* */
+  --color-surface-background: var(--surface-background);
+  --color-surface-card: var(--surface-card);
+  --color-surface-elevated: var(--surface-elevated);
+  --color-surface-overlay: var(--surface-overlay);
+  --color-surface-sidebar: var(--surface-sidebar);
+  --color-surface-input: var(--surface-input);
+  --color-surface-selected: var(--surface-selected);
+  --color-surface-hover: var(--surface-hover);
+  --color-surface-active: var(--surface-active);
+  --color-surface-disabled: var(--surface-disabled);
+  --color-surface-skeleton: var(--surface-skeleton);
+  --color-surface-code: var(--surface-code);
+  --color-surface-tooltip: var(--surface-tooltip);
+
+  /* Text -> text-text-* */
+  --color-text-primary: var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-muted: var(--text-muted);
+  --color-text-inverse: var(--text-inverse);
+  --color-text-link: var(--text-link);
+  --color-text-link-hover: var(--text-link-hover);
+  --color-text-on-brand: var(--text-on-brand);
+  --color-text-on-danger: var(--text-on-danger);
+  --color-text-success: var(--text-success);
+  --color-text-warning: var(--text-warning);
+  --color-text-error: var(--text-error);
+  --color-text-info: var(--text-info);
+  --color-text-tooltip: var(--text-tooltip);
+  --color-text-badge: var(--text-badge);
+  --color-text-code: var(--text-code);
+
+  /* Borders -> border-border-* */
+  --color-border-default: var(--border-default);
+  --color-border-strong: var(--border-strong);
+  --color-border-input: var(--border-input);
+  --color-border-input-hover: var(--border-input-hover);
+  --color-border-focus: var(--border-focus);
+  --color-border-error: var(--border-error);
+  --color-border-success: var(--border-success);
+  --color-border-divider: var(--border-divider);
+  --color-border-selected: var(--border-selected);
+
+  /* Brand -> bg-brand-*, text-brand-* */
+  --color-brand-primary: var(--brand-primary);
+  --color-brand-primary-hover: var(--brand-primary-hover);
+  --color-brand-primary-active: var(--brand-primary-active);
+  --color-brand-primary-muted: var(--brand-primary-muted);
+  --color-brand-primary-muted-hover: var(--brand-primary-muted-hover);
+  --color-brand-secondary: var(--brand-secondary);
+  --color-brand-secondary-hover: var(--brand-secondary-hover);
+  --color-brand-secondary-text: var(--brand-secondary-text);
+
+  /* Feedback -> bg-success, text-error, etc. */
+  --color-success: var(--success);
+  --color-success-hover: var(--success-hover);
+  --color-success-muted: var(--success-muted);
+  --color-warning: var(--warning);
+  --color-warning-hover: var(--warning-hover);
+  --color-warning-muted: var(--warning-muted);
+  --color-error: var(--error);
+  --color-error-hover: var(--error-hover);
+  --color-error-muted: var(--error-muted);
+  --color-info: var(--info);
+  --color-info-hover: var(--info-hover);
+  --color-info-muted: var(--info-muted);
+
+  /* Interactive states */
+  --color-ghost-hover: var(--ghost-hover);
+  --color-ghost-active: var(--ghost-active);
+  --color-outline-border: var(--outline-border);
+  --color-outline-hover: var(--outline-hover);
+  --color-danger-bg: var(--danger-bg);
+  --color-danger-hover: var(--danger-hover);
+  --color-danger-muted-bg: var(--danger-muted-bg);
+  --color-ring-focus: var(--ring-focus);
+
+  /* Navigation */
+  --color-nav-item: var(--nav-item);
+  --color-nav-item-hover: var(--nav-item-hover);
+  --color-nav-item-active: var(--nav-item-active);
+  --color-nav-item-active-bg: var(--nav-item-active-bg);
+  --color-nav-group-label: var(--nav-group-label);
+
+  /* Table */
+  --color-table-header-bg: var(--table-header-bg);
+  --color-table-header-text: var(--table-header-text);
+  --color-table-row-hover: var(--table-row-hover);
+  --color-table-row-selected: var(--table-row-selected);
+  --color-table-row-stripe: var(--table-row-stripe);
+  --color-table-border: var(--table-border);
+
+  /* Avatar */
+  --color-avatar-bg: var(--avatar-bg);
+  --color-avatar-text: var(--avatar-text);
+  --color-avatar-ring: var(--avatar-ring);
+  --color-avatar-status-online: var(--avatar-status-online);
+  --color-avatar-status-offline: var(--avatar-status-offline);
+  --color-avatar-status-busy: var(--avatar-status-busy);
+
+  /* Shadows */
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-inner: var(--shadow-inner);
+
+  /* Font family */
+  --font-sans: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
+}

package/styles/tokens.css

@@ -0,0 +1,240 @@
+/* MARS Design System: Layer 2 -- Semantic Tokens
+ * What colours MEAN. Light and dark themes swap these values. */
+
+/* ===== SURFACES ===== */
+:root {
+  --surface-background: var(--gray-50);
+  --surface-card: white;
+  --surface-elevated: white;
+  --surface-overlay: oklch(0 0 0 / 0.5);
+  --surface-sidebar: var(--gray-50);
+  --surface-input: white;
+  --surface-selected: var(--brand-50);
+  --surface-hover: var(--gray-100);
+  --surface-active: var(--gray-200);
+  --surface-disabled: var(--gray-100);
+  --surface-skeleton: var(--gray-200);
+  --surface-code: var(--gray-100);
+  --surface-tooltip: var(--gray-900);
+}
+
+.dark {
+  --surface-background: var(--gray-950);
+  --surface-card: var(--gray-900);
+  --surface-elevated: var(--gray-800);
+  --surface-sidebar: var(--gray-900);
+  --surface-input: var(--gray-800);
+  --surface-selected: var(--brand-950);
+  --surface-hover: var(--gray-800);
+  --surface-active: var(--gray-700);
+  --surface-disabled: var(--gray-800);
+  --surface-skeleton: var(--gray-700);
+  --surface-code: var(--gray-800);
+  --surface-tooltip: var(--gray-700);
+}
+
+/* ===== TEXT ===== */
+:root {
+  --text-primary: var(--gray-900);
+  --text-secondary: var(--gray-600);
+  --text-muted: var(--gray-400);
+  --text-inverse: white;
+  --text-on-tooltip: white;
+  --text-link: var(--brand-600);
+  --text-link-hover: var(--brand-700);
+  --text-on-brand: white;
+  --text-on-danger: white;
+  --text-success: var(--emerald-600);
+  --text-warning: var(--amber-600);
+  --text-error: var(--red-600);
+  --text-info: var(--blue-600);
+  --text-tooltip: white;
+  --text-badge: var(--brand-700);
+  --text-code: var(--brand-700);
+}
+
+.dark {
+  --text-primary: var(--gray-100);
+  --text-secondary: var(--gray-400);
+  --text-muted: var(--gray-500);
+  --text-inverse: var(--gray-900);
+  --text-link: var(--brand-400);
+  --text-link-hover: var(--brand-300);
+  --text-success: var(--emerald-500);
+  --text-warning: var(--amber-500);
+  --text-error: var(--red-500);
+  --text-info: var(--blue-500);
+  --text-badge: var(--brand-300);
+  --text-code: var(--brand-300);
+  --text-tooltip: var(--gray-100);
+}
+
+/* ===== BORDERS ===== */
+:root {
+  --border-default: var(--gray-200);
+  --border-strong: var(--gray-300);
+  --border-input: var(--gray-300);
+  --border-input-hover: var(--gray-400);
+  --border-focus: var(--brand-500);
+  --border-error: var(--red-500);
+  --border-success: var(--emerald-500);
+  --border-warning: var(--amber-500);
+  --border-info: var(--blue-500);
+  --border-divider: var(--gray-200);
+  --border-selected: var(--brand-600);
+}
+
+.dark {
+  --border-default: var(--gray-800);
+  --border-strong: var(--gray-700);
+  --border-input: var(--gray-700);
+  --border-input-hover: var(--gray-600);
+  --border-divider: var(--gray-800);
+}
+
+/* ===== BRAND (interactive) ===== */
+:root {
+  --brand-primary: var(--brand-600);
+  --brand-primary-hover: var(--brand-700);
+  --brand-primary-active: var(--brand-800);
+  --brand-primary-muted: var(--brand-50);
+  --brand-primary-muted-hover: var(--brand-100);
+  --brand-secondary: var(--brand-100);
+  --brand-secondary-hover: var(--brand-200);
+  --brand-secondary-text: var(--brand-700);
+}
+
+.dark {
+  --brand-primary: var(--brand-500);
+  --brand-primary-hover: var(--brand-400);
+  --brand-primary-active: var(--brand-300);
+  --brand-primary-muted: var(--brand-950);
+  --brand-primary-muted-hover: var(--brand-900);
+  --brand-secondary: var(--brand-900);
+  --brand-secondary-hover: var(--brand-800);
+  --brand-secondary-text: var(--brand-300);
+}
+
+/* ===== FEEDBACK ===== */
+:root {
+  --success: var(--emerald-600);
+  --success-hover: var(--emerald-700);
+  --success-muted: var(--emerald-50);
+  --warning: var(--amber-500);
+  --warning-hover: var(--amber-600);
+  --warning-muted: var(--amber-50);
+  --error: var(--red-600);
+  --error-hover: var(--red-700);
+  --error-muted: var(--red-50);
+  --info: var(--blue-600);
+  --info-hover: var(--blue-700);
+  --info-muted: var(--blue-50);
+}
+
+.dark {
+  --success: var(--emerald-500);
+  --success-hover: var(--emerald-600);
+  --success-muted: oklch(0.596 0.145 163 / 0.15);
+  --warning: var(--amber-500);
+  --warning-hover: var(--amber-600);
+  --warning-muted: oklch(0.666 0.179 58 / 0.15);
+  --error: var(--red-500);
+  --error-hover: var(--red-600);
+  --error-muted: oklch(0.577 0.245 27 / 0.15);
+  --info: var(--blue-500);
+  --info-hover: var(--blue-600);
+  --info-muted: oklch(0.546 0.245 263 / 0.15);
+}
+
+/* ===== INTERACTIVE STATES ===== */
+:root {
+  --ghost-hover: var(--gray-100);
+  --ghost-active: var(--gray-200);
+  --outline-border: var(--gray-300);
+  --outline-hover: var(--gray-50);
+  --danger-bg: var(--red-600);
+  --danger-hover: var(--red-700);
+  --danger-muted-bg: var(--red-50);
+  --ring-focus: var(--brand-500);
+  --ring-focus-shadow: 0 0 0 3px oklch(0.546 0.245 263 / 0.25);
+  --disabled-opacity: 0.5;
+}
+
+.dark {
+  --ghost-hover: var(--gray-800);
+  --ghost-active: var(--gray-700);
+  --outline-border: var(--gray-600);
+  --outline-hover: var(--gray-800);
+  --danger-muted-bg: oklch(0.577 0.245 27 / 0.15);
+}
+
+/* ===== NAVIGATION ===== */
+:root {
+  --nav-item: var(--gray-600);
+  --nav-item-hover: var(--gray-900);
+  --nav-item-active: var(--brand-600);
+  --nav-item-active-bg: var(--brand-50);
+  --nav-group-label: var(--gray-400);
+}
+
+.dark {
+  --nav-item: var(--gray-400);
+  --nav-item-hover: var(--gray-100);
+  --nav-item-active: var(--brand-400);
+  --nav-item-active-bg: var(--brand-950);
+  --nav-group-label: var(--gray-500);
+}
+
+/* ===== TABLE ===== */
+:root {
+  --table-header-bg: var(--gray-50);
+  --table-header-text: var(--gray-600);
+  --table-row-hover: var(--gray-50);
+  --table-row-selected: var(--brand-50);
+  --table-row-stripe: var(--gray-50);
+  --table-border: var(--gray-200);
+}
+
+.dark {
+  --table-header-bg: var(--gray-800);
+  --table-header-text: var(--gray-400);
+  --table-row-hover: var(--gray-800);
+  --table-row-selected: var(--brand-950);
+  --table-row-stripe: var(--gray-900);
+  --table-border: var(--gray-800);
+}
+
+/* ===== AVATAR ===== */
+:root {
+  --avatar-bg: var(--brand-100);
+  --avatar-text: var(--brand-700);
+  --avatar-ring: white;
+  --avatar-status-online: var(--emerald-500);
+  --avatar-status-offline: var(--gray-400);
+  --avatar-status-busy: var(--red-500);
+}
+
+.dark {
+  --avatar-bg: var(--brand-900);
+  --avatar-text: var(--brand-300);
+  --avatar-ring: var(--gray-900);
+  --avatar-status-offline: var(--gray-600);
+}
+
+/* ===== SHADOWS ===== */
+:root {
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+}
+
+.dark {
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);
+}