@scattered-light/base-ui-theme 0.1.0

package/dist/styles/base/colors.css

@@ -0,0 +1,150 @@
+/* Colors - Mojave Theme */
+/* Modern color system with custom properties and color-mix */
+
+:root {
+  /* Base colors */
+  --color-glare: #ffffff;
+  --color-midnight: #000000;
+  
+  /* Stone palette (neutrals) */
+  --color-stone-50: #fafbfa;
+  --color-stone-100: #f8f9f7;
+  --color-stone-200: #f0f3ee;
+  --color-stone-300: #e9ede6;
+  --color-stone-400: #d2dbd1;
+  --color-stone-500: #bbc9bf;
+  --color-stone-600: #a6b4aa;
+  --color-stone-700: #919f95;
+  --color-stone-800: #7c8980;
+  --color-stone-900: #667169;
+  --color-stone-1000: #4e5951;
+  --color-stone-1100: #353e37;
+  --color-stone-1200: #1b1e1b;
+  
+  /* Mirage palette (primary/accent - purple hues) */
+  --color-mirage-50: #fdfbff;
+  --color-mirage-100: #f6e7fe;
+  --color-mirage-200: #e6c6fe;
+  --color-mirage-300: #d5a3fb;
+  --color-mirage-400: #b979ec;
+  --color-mirage-500: #a04fde;
+  --color-mirage-600: #883ac3;
+  --color-mirage-700: #6f349d;
+  --color-mirage-800: #532973;
+  --color-mirage-900: #371f4b;
+  --color-mirage-1000: #1c1423;
+  
+  /* Ember palette (warm orange/red hues) */
+  --color-ember-100: #ffe8e0;
+  --color-ember-200: #ffc5b4;
+  --color-ember-300: #ff9d84;
+  --color-ember-400: #ed6f52;
+  --color-ember-500: #b75d47;
+  --color-ember-600: #934f3e;
+  --color-ember-700: #784336;
+  --color-ember-800: #57342b;
+  --color-ember-900: #3b241f;
+  --color-ember-1000: #201512;
+  
+  /* Dune palette (sandy/beige hues) */
+  --color-dune-100: #f1ecdb;
+  --color-dune-200: #dad2ab;
+  --color-dune-300: #c4b77a;
+  --color-dune-400: #9f9569;
+  --color-dune-500: #7e7758;
+  --color-dune-600: #68624b;
+  --color-dune-700: #55513f;
+  --color-dune-800: #403d31;
+  --color-dune-900: #2c2a23;
+  --color-dune-1000: #191714;
+  
+  /* Silhouette palette (mauve/burgundy hues) */
+  --color-silhouette-100: #f8eaec;
+  --color-silhouette-200: #e5ccd2;
+  --color-silhouette-300: #d0aeb6;
+  --color-silhouette-400: #b58994;
+  --color-silhouette-500: #9b6876;
+  --color-silhouette-600: #875362;
+  --color-silhouette-700: #774151;
+  --color-silhouette-800: #612c3d;
+  --color-silhouette-900: #421f2a;
+  --color-silhouette-1000: #251218;
+
+  /* Data Visualization / Reporting Colors */
+  /* Primary data colors - high contrast, distinct hues */
+  --color-data-violet: #a04fdf;
+  --color-data-coral: #ef7053;
+  --color-data-gold: #c4b679;
+  --color-data-burgundy: #612c3d;
+  --color-data-mint: #86e6ca;
+  --color-data-navy: #154975;
+  --color-data-periwinkle: #bbc3fe;
+  --color-data-forest: #0b5313;
+  --color-data-lime: #74ce4b;
+  --color-data-yellow: #dac925;
+  
+  /* Secondary data colors - lighter tints for backgrounds/accents */
+  --color-data-lavender: #b4a1e2;
+  --color-data-peach: #ffc3b5;
+  --color-data-cream: #f1e5af;
+  --color-data-mauve: #a6838e;
+  --color-data-seafoam: #bfecdf;
+  --color-data-sky: #7fa8cb;
+  --color-data-ice: #e5e8ff;
+  --color-data-sage: #b1d0b5;
+  --color-data-chartreuse: #d0fabd;
+  --color-data-ivory: #fffce1;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-glare: #1b1e1b;
+    
+    /* Invert stone palette */
+    --color-stone-50: #2f3a33;
+    --color-stone-100: #4a5650;
+    --color-stone-200: #5c6a5f;
+    --color-stone-300: #7c8980;
+    --color-stone-400: #919f95;
+    --color-stone-500: #a4b5a7;
+    --color-stone-600: #bbc9bf;
+    --color-stone-700: #d2dbd1;
+    --color-stone-800: #e9ede6;
+    --color-stone-900: #f0f3ee;
+    --color-stone-1000: #f8f9f7;
+    --color-stone-1100: #fafbfa;
+    --color-stone-1200: #ffffff;
+    
+    /* Adjust mirage for dark mode */
+    --color-mirage-600: #b687f3;
+    --color-mirage-700: #c89ff6;
+  }
+}
+
+/* Forced dark mode class */
+[data-theme='dark'] {
+  --color-glare: #1b1e1b;
+  
+  --color-stone-50: #2f3a33;
+  --color-stone-100: #4a5650;
+  --color-stone-200: #5c6a5f;
+  --color-stone-300: #7c8980;
+  --color-stone-400: #919f95;
+  --color-stone-500: #a4b5a7;
+  --color-stone-600: #bbc9bf;
+  --color-stone-700: #d2dbd1;
+  --color-stone-800: #e9ede6;
+  --color-stone-900: #f0f3ee;
+  --color-stone-1000: #f8f9f7;
+  --color-stone-1100: #fafbfa;
+  --color-stone-1200: #ffffff;
+  
+  --color-mirage-600: #b687f3;
+  --color-mirage-700: #c89ff6;
+}
+
+/* Forced light mode class */
+[data-theme='light'] {
+  color-scheme: light;
+}

package/dist/styles/base/global.css

@@ -0,0 +1,108 @@
+/* Global Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     DEFAULT PAGE SETTINGS
+     ============================================ */
+  --default-page-background-color: var(--color-glare);
+
+  /* ============================================
+     DEFAULT PAGE SETTINGS
+     ============================================ */
+  --typography-default-text-color: var(--color-mirage-1000);
+  --typography-default-link-color: var(--color-mirage-500);
+  --typography-default-link-hover-color: var(--color-mirage-600);
+  --typography-default-link-underline-color: var(--color-mirage-300);
+  --typography-default-link-underline-hover-color: var(--color-mirage-400);
+  --typography-default-mark-background-color: var(--color-mirage-100);
+  --typography-default-list-item-marker-color: var(--color-mirage-600);
+
+  --default-blockquote-border-color: var(--color-mirage-600);
+  --default-blockquote-cite-color: var(--color-stone-700);
+
+  --default-code-background-color: var(--color-stone-100);
+  --default-code-border-color: var(--color-stone-300);
+  --default-code-border-text-color: var(--color-mirage-800);
+
+  --default-pre-background-color: var(--color-glare);
+  --default-pre-border-color: var(--color-stone-300);
+  --default-pre-text-color: var(--typography-default-text-color);
+
+  --default-field-border-color: var(--color-stone-300);
+
+  --default-kbd-background-color: var(--color-stone-1200);
+  --default-kbd-text-color: var(--color-glare);
+
+  --default-hr-border-color: var(--color-stone-300);
+
+  --default-text-selection-background-color: var(--color-mirage-100);
+  --default-text-selection-text-color: var(--color-mirage-1000);
+
+  --default-scrollbar-track-background-color: transparent;
+  --default-scrollbar-thumb-background-color: var(--color-stone-400);
+  --default-scrollbar-thumb-hover-background-color: var(--color-stone-500);
+
+  /* Semantic colors using color-mix for consistency */
+  --color-success: #22c55e;
+  --color-success-light: color-mix(in srgb, var(--color-success) 20%, white);
+  --color-success-dark: color-mix(in srgb, var(--color-success) 80%, black);
+  
+  --color-error: #ef4444;
+  --color-error-light: color-mix(in srgb, var(--color-error) 20%, white);
+  --color-error-dark: color-mix(in srgb, var(--color-error) 80%, black);
+  
+  --color-warning: #f59e0b;
+  --color-warning-light: color-mix(in srgb, var(--color-warning) 20%, white);
+  --color-warning-dark: color-mix(in srgb, var(--color-warning) 80%, black);
+  
+  --color-info: #3b82f6;
+  --color-info-light: color-mix(in srgb, var(--color-info) 20%, white);
+  --color-info-dark: color-mix(in srgb, var(--color-info) 80%, black);
+  
+  /* Surface colors */
+  --surface-base: var(--color-glare);
+  --surface-raised: var(--color-stone-50);
+  --surface-overlay: var(--color-glare);
+  
+  /* Border colors */
+  --border-subtle: var(--color-stone-200);
+  --border-default: var(--color-stone-300);
+  --border-strong: var(--color-stone-400);
+  --border-accent: var(--color-mirage-600);
+  
+  /* Text colors */
+  --text-primary: var(--color-stone-1200);
+  --text-secondary: var(--color-stone-800);
+  --text-tertiary: var(--color-stone-600);
+  --text-accent: var(--color-mirage-700);
+  --text-on-accent: var(--color-glare);
+  --text-disabled: var(--color-stone-500);
+  
+  /* Interactive states */
+  --interactive-default: var(--color-mirage-600);
+  --interactive-hover: var(--color-mirage-700);
+  --interactive-active: var(--color-mirage-800);
+  --interactive-disabled: var(--color-stone-400);
+  
+  /* Focus ring: defined in theme/theme-accessibility.css after theme roles */
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  :root {    
+    /* Surface colors */
+    --surface-base: #1b1e1b;
+    --surface-raised: #2f3a33;
+    --surface-overlay: #4a5650;
+    
+    /* Shadows in dark mode */
+    --shadow-color: 0deg 0% 0%;
+  }
+}
+
+/* Forced dark mode class */
+[data-theme='dark'] {  
+  --surface-base: #1b1e1b;
+  --surface-raised: #2f3a33;
+  --surface-overlay: #4a5650;
+}

package/dist/styles/base/reset-accessibility.css

@@ -0,0 +1,119 @@
+/* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
+
+/* Remove default focus; keyboard focus styled in accessibility-theme.css */
+:focus {
+  outline: none;
+}
+
+button:focus,
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+}
+
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.sr-only,
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.sr-only-focusable:focus,
+.visually-hidden-focusable:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: inherit;
+  margin: inherit;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+main {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+main:focus {
+  outline: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+[aria-live='polite'],
+[aria-live='assertive'] {
+  position: relative;
+}
+
+:disabled,
+[aria-disabled='true'] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+@media print {
+  a[href^='http']::after {
+    content: ' (' attr(href) ')';
+    font-size: 0.8em;
+    font-weight: normal;
+  }
+
+  a[href^='#']::after,
+  a[href^='/']::after {
+    content: '';
+  }
+
+  * {
+    background: white !important;
+    color: black !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    page-break-after: avoid;
+  }
+
+  img {
+    page-break-inside: avoid;
+  }
+}