@scattered-light/base-ui-theme 0.1.0

package/dist/styles/base/reset.css

@@ -0,0 +1,451 @@
+/* CSS Reset - Mojave Theme */
+
+/* ============================================
+    FONTS
+    ============================================ */
+@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@300;400;500;600;700&family=Funnel+Display:wght@300;400;500;600;700&family=Roboto+Mono:wght@300;400;500;600;700&display=swap');
+
+
+/* ============================================
+    COLOR SCHEME HELPER
+    ============================================ */
+:root {
+  color-scheme: light dark;
+}
+
+/* ============================================
+    BOX SIZING
+    ============================================ */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* ============================================
+    OVERRIDES FOR ALL
+    ============================================ */
+* {
+  margin: 0;
+  padding: 0;
+}
+
+/* Respect user's motion preferences */
+@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;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    scroll-behavior: smooth; /* Smooth scrolling */
+  }
+
+  a {
+    transition: all 0.2s ease; /* Responsive typography adjustments */
+
+  }
+}
+
+/* ============================================
+    SCROLLBARS
+    ============================================ */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-stone-400) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: var(--space-2);
+  height: var(--space-2);
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--default-scrollbar-track-background-color);
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var( --default-scrollbar-thumb-background-color);
+  border-radius: 0.25rem;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--default-scrollbar-thumb-hover-background-color);
+}
+
+/* ============================================
+    HTML
+    ============================================ */
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-size: 100%; /* Don't override user's browser font size */
+  -webkit-text-size-adjust: 100%; /* Prevent text size adjustment on orientation change */
+}
+
+/* ============================================
+    BODY
+    ============================================ */
+
+body {
+  /* Layout */
+  min-height: 100vh;
+  background: var(--default-page-background-color);
+  /*Basic text styling*/
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-base);
+  letter-spacing: var(--letter-spacing-normal);
+  color: var(--typography-default-text-color);
+  /* Improve text rendering for better readability */
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: 'kern' 1; /* Enable kerning */
+}
+
+/* ============================================
+    TYPOGRAPHY
+    ============================================ */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-family-display);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-md);
+  line-height: var(--line-height-base);
+  letter-spacing: var(--letter-spacing-normal);
+  overflow-wrap: break-word;
+}
+
+/* Paragraphs */
+p {
+  overflow-wrap: break-word;
+  max-inline-size: var(--measure);
+  text-wrap: pretty;
+  margin-block-end: var(--space-4);
+}
+
+/* Links */
+a {
+  color: var(--typography-default-link-color);
+  text-decoration: underline;
+  text-decoration-color: var(--typography-default-link-underline-color);
+  text-decoration-thickness: 0.125em;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: var(--typography-default-link-hover-color);
+    text-decoration-color: var(--typography-default-link-underline-hover-color);
+
+  }
+}
+
+/* Small text */
+small {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-tall);
+}
+
+/* Emphasis */
+strong,
+b {
+  font-weight: var(--font-weight-bold);
+}
+
+em,
+i {
+  font-style: italic;
+}
+
+/* Mark/Highlight */
+mark {
+  background: var(--typography-default-mark-background-color);
+  color: inherit;
+  padding: var(--space-0-5) var(--space-1-5);
+  border-radius: var(--border-radius-sm);
+}
+
+/* Abbreviations */
+abbr[title] {
+  text-decoration: underline dotted;
+  text-decoration-color: var(--color-stone-500);
+  cursor: help;
+}
+
+/* Subscript and Superscript */
+sub,
+sup {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-base);
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  inset-block-start: -var(--space-2);
+}
+
+sub {
+  inset-block-end: -var(--space-1);
+}
+
+/* Lists */
+ul,
+ol {
+  list-style: none;
+  max-inline-size: var(--measure);
+  padding-inline-start: var(--space-6);
+  margin-block-end: var(--space-4);
+}
+
+/* Better list semantics */
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+li {
+  margin-block-end: var(--space-2);
+}
+
+li::marker {
+  color: var(--typography-default-list-item-marker-color);
+}
+
+/* Nested lists */
+li > ul,
+li > ol {
+  margin-block-start: var(--space-2);
+  margin-block-end: 0;
+}
+
+/* Blockquotes */
+blockquote {
+  max-inline-size: var(--measure);
+  margin-block: var(--space-6);
+  margin-inline-start: 0;
+  padding-inline-start: var(--space-6);
+  border-inline-start: var(--space-1) solid var(--default-blockquote-border-color);
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-base);
+  letter-spacing: var(--letter-spacing-normal);
+  font-style: italic;
+  color: inherit;
+}
+
+blockquote cite {
+  display: block;
+  margin-block-start: var(--space-3);
+  font-size: var(--font-size-sm);
+  font-style: normal;
+  color: var(--default-blockquote-cite-color);
+}
+
+blockquote cite::before {
+  content: '— ';
+}
+
+/* Code */
+code,
+kbd,
+samp,
+pre {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+}
+
+code {
+  padding: 0.125em 0.375em;
+  background: var(--default-code-background-color);
+  border: var(--border-width-thin) solid var(--default-code-border-color);
+  border-radius: var(--border-radius-sm);
+  color: var(--default-code-border-text-color);
+}
+
+pre {
+  max-inline-size: 100%;
+  padding: var(--space-4);
+  background: var(--default-pre-background-color);
+  border: var(--border-width-thin) solid var(--default-pre-border-color);
+  color: var(--default-pre-text-color);
+  border-radius: var(--space-2);
+  overflow-x: auto;
+  margin-block: var(--space-6);
+}
+
+pre code {
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: inherit;
+}
+
+/* ============================================
+    IMAGES AND MEDIA
+    ============================================ */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+/* ============================================
+    FORM ELEMENTS
+    ============================================ */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+}
+
+button {
+  background: transparent;
+  border: var(--border-width-thin) solid transparent;
+  cursor: pointer;
+
+  /* Improve button accessibility */
+  &:disabled { 
+    cursor: not-allowed;
+  opacity: 0.6;
+  }
+}
+
+/* Remove default appearance for form controls */
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+
+/* Remove spinner from number inputs */
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type='number'] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+/* Remove default fieldset styles */
+fieldset {
+  border: var(--border-width-thin) solid var(--default-field-border-color);
+  border-radius: var(--border-radius-sm);
+}
+
+/* ============================================
+   TABLES
+   ============================================ */
+/* Improve table accessibility */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+}
+
+th {
+  text-align: left;
+  font-weight: var(--font-weight-semibold);
+}
+
+/* ============================================
+    OTHER ELEMENTS
+    ============================================ */
+
+/* Remove default legend styles */
+legend {
+  padding: 0;
+}
+
+/* Keyboard input */
+kbd {
+  padding: var(--space-0-5) var(--space-2-5);
+  background: var(--default-kbd-background-color);
+  color: var(--default-kbd-text-color);
+  border-radius: var(--border-radius-sm);
+  font-size: var(--font-size-sm);
+  box-shadow: var(--shadow-xs);
+}
+
+/* Horizontal rule */
+hr {
+  border: none;
+  border-block-start: var(--border-width-thin) solid var(--default-hr-border-color);
+  margin-block: var(--space-8);
+}
+
+/* Hidden attribute */
+[hidden] {
+  display: none !important;
+}
+
+/* Disabled state */
+[disabled] {
+  cursor: not-allowed;
+}
+
+/* Color When User Selects Text */
+::selection {
+  background: var(--default-text-selection-background-color);
+  color: var(--default-text-selection-text-color);
+}
+
+::-moz-selection {
+  background: var(--default-text-selection-background-color);
+  color: var(--default-text-selection-text-color);
+}
+
+/* ============================================
+   PRINT STYLES
+   ============================================ */
+
+@media print {
+  body {
+    font-size: 12pt;
+    line-height: 1.5;
+    color: #000;
+  }
+
+  h1 {
+    font-size: 24pt;
+  }
+
+  h2 {
+    font-size: 20pt;
+  }
+
+  h3 {
+    font-size: 16pt;
+  }
+
+  a {
+    color: #000;
+    text-decoration: underline;
+  }
+
+  a[href^='http']::after {
+    content: ' (' attr(href) ')';
+    font-size: 0.8em;
+  }
+}

package/dist/styles/base/shadows.css

@@ -0,0 +1,42 @@
+/* Shadows - Mojave Theme */
+/* Modern shadow scale using custom properties */
+
+:root {
+  /* ============================================
+     SHADOW SCALE
+     ============================================ */
+  --shadow-xs: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --shadow-outline: 0 0 0 3px rgba(136, 58, 195, 0.6); /* Using mirage-600 */
+  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  --shadow-none: none;
+}
+
+/* ============================================
+     RESPECT REDUCED MOTION PREFERENCES
+     ============================================ */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --shadow-xs: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --shadow-sm: 0 0 0 1px rgba(0, 0, 0, 0.1);
+    --shadow-base: 0 0 0 1px rgba(0, 0, 0, 0.15);
+    --shadow-md: 0 0 0 1px rgba(0, 0, 0, 0.2);
+    --shadow-lg: 0 0 0 1px rgba(0, 0, 0, 0.25);
+    --shadow-xl: 0 0 0 1px rgba(0, 0, 0, 0.3);
+    --shadow-2xl: 0 0 0 1px rgba(0, 0, 0, 0.35);
+  }
+}
+
+/* ============================================
+     HIGH CONTRAST MODE - MAKE SHADOWS MORE VISIBLE
+     ============================================ */
+@media (prefers-contrast: more) {
+  :root {
+    --shadow-outline: 0 0 0 3px currentColor;
+  }
+}

package/dist/styles/base/spacing.css

@@ -0,0 +1,62 @@
+/* Spacing - Mojave Theme */
+/* Modern spacing scale using custom properties */
+
+:root {
+  /* Spacing scale */
+  --space-px: 1px;
+  --space-0-5: 0.125rem; /* 2px */
+  --space-1: 0.25rem; /* 4px */
+  --space-1-5: 0.375rem; /* 6px */
+  --space-2: 0.5rem; /* 8px */
+  --space-2-5: 0.625rem; /* 10px */
+  --space-3: 0.75rem; /* 12px */
+  --space-3-5: 0.875rem; /* 14px */
+  --space-4: 1rem; /* 16px */
+  --space-5: 1.25rem; /* 20px */
+  --space-6: 1.5rem; /* 24px */
+  --space-7: 1.75rem; /* 28px */
+  --space-8: 2rem; /* 32px */
+  --space-9: 2.25rem; /* 36px */
+  --space-10: 2.5rem; /* 40px */
+  --space-11: 2.75rem; /* 44px */
+  --space-12: 3rem; /* 48px */
+  --space-13: 3.25rem; /* 52px */
+  --space-14: 3.5rem; /* 56px */
+  --space-16: 4rem; /* 64px */
+  --space-20: 5rem; /* 80px */
+  --space-24: 6rem; /* 96px */
+  --space-28: 7rem; /* 112px */
+  --space-32: 8rem; /* 128px */
+  --space-36: 9rem; /* 144px */
+  --space-40: 10rem; /* 160px */
+  --space-44: 11rem; /* 176px */
+  --space-48: 12rem; /* 192px */
+  --space-52: 13rem; /* 208px */
+  --space-56: 14rem; /* 224px */
+  --space-60: 15rem; /* 240px */
+  --space-64: 16rem; /* 256px */
+  --space-72: 18rem; /* 288px */
+  --space-80: 20rem; /* 320px */
+  --space-96: 24rem; /* 384px */
+}
+
+/* Logical property utilities for RTL support */
+:root {
+  /* Inline spacing (horizontal in LTR, vertical in vertical writing modes) */
+  --space-inline-xs: var(--space-2);
+  --space-inline-sm: var(--space-4);
+  --space-inline-md: var(--space-6);
+  --space-inline-lg: var(--space-8);
+  
+  /* Block spacing (vertical in LTR, horizontal in vertical writing modes) */
+  --space-block-xs: var(--space-2);
+  --space-block-sm: var(--space-4);
+  --space-block-md: var(--space-6);
+  --space-block-lg: var(--space-8);
+
+  /* Stack spacing (vertical) */
+  --spacing-stack-xs: var(--space-2);
+  --spacing-stack-sm: var(--space-4);
+  --spacing-stack-md: var(--space-6);
+  --spacing-stack-lg: var(--space-8);
+}

package/dist/styles/base/transitions.css

@@ -0,0 +1,29 @@
+/* Animation Semantic Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     TRANSITION DURATIONS
+     ============================================ */
+  
+  --transition-duration-fast: 100ms;
+  --transition-duration-normal: 200ms;
+  --transition-duration-slow: 300ms;
+  
+  /* ============================================
+     TRANSITION EASINGS
+     ============================================ */
+  
+  --transition-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-easing-in: cubic-bezier(0.4, 0, 1, 1);
+  --transition-easing-out: cubic-bezier(0, 0, 0.2, 1);
+  --transition-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  
+  /* ============================================
+     COMPONENT TRANSITIONS
+     ============================================ */
+  
+  --transition-button: all var(--transition-duration-fast) var(--transition-easing-default);
+  --transition-input: all var(--transition-duration-normal) var(--transition-easing-default);
+  --transition-modal: all var(--transition-duration-normal) var(--transition-easing-out);
+  --transition-dropdown: all var(--transition-duration-fast) var(--transition-easing-out);
+}

package/dist/styles/base/typography.css

@@ -0,0 +1,63 @@
+/* Typography - Mojave Theme */
+/* Modern fluid typography with custom properties */
+
+:root {
+  /* Font Families */
+  --font-family-display: 'Funnel Display', sans-serif;
+  --font-family-body: 'Barlow Semi Condensed', sans-serif;
+  --font-family-mono: 'Roboto Mono', monospace;
+  --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  --font-family-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+
+  /* Font Sizes - Major Third Scale (1.2 ratio) with fluid scaling */
+  --font-size-xxs: clamp(0.5625rem, 0.1vw + 0.5rem, 0.625rem); /* ~9px - 10px */
+  --font-size-xs: clamp(0.625rem, 0.15vw + 0.6rem, 0.694rem); /* ~10px - 11.11px */
+  --font-size-sm: clamp(0.75rem, 0.2vw + 0.72rem, 0.833rem); /* ~12px - 13.33px */
+  --font-size-md: clamp(0.875rem, 0.25vw + 0.85rem, 1rem); /* ~14px - 16px */
+  --font-size-lg: clamp(1rem, 0.4vw + 0.95rem, 1.2rem); /* ~16px - 19.2px */
+  --font-size-xl: clamp(1.2rem, 0.5vw + 1.15rem, 1.44rem); /* ~19.2px - 23.04px */
+  --font-size-2xl: clamp(1.44rem, 0.6vw + 1.38rem, 1.728rem); /* ~23.04px - 27.65px */
+  --font-size-3xl: clamp(1.728rem, 0.75vw + 1.65rem, 2.074rem); /* ~27.65px - 33.18px */
+  --font-size-4xl: clamp(2.074rem, 0.9vw + 1.98rem, 2.488rem); /* ~33.18px - 39.81px */
+  --font-size-5xl: clamp(2.488rem, 1.1vw + 2.37rem, 2.986rem); /* ~39.81px - 47.78px */
+  --font-size-6xl: clamp(2.986rem, 1.3vw + 2.85rem, 3.583rem); /* ~47.78px - 57.34px */
+  --font-size-7xl: clamp(3.583rem, 1.6vw + 3.42rem, 4.299rem); /* ~57.34px - 68.81px */
+  --font-size-8xl: clamp(4.299rem, 1.9vw + 4.1rem, 5.159rem); /* ~68.81px - 82.55px */
+  --font-size-9xl: clamp(5.159rem, 2.3vw + 4.92rem, 6.191rem); /* ~82.55px - 98.99px */
+
+  /* Font Weights */
+  --font-weight-hairline: 100;
+  --font-weight-thin: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-weight-black: 900;
+
+  /* Line Heights */
+  --line-height-none: 1; /* use with 4xl text size and above */
+  --line-height-shorter: 1.204; /* use with 3xl text size */
+  --line-height-short: 1.268; /* use with 2xl text size */
+  --line-height-base: 1.3125; /* 21px, use with md, lg, xl text sizes */
+  --line-height-tall: 1.428; /* use with sm text size */
+  --line-height-taller: 1.44; /* use with xs text size */
+
+  /* Letter Spacing */
+  --letter-spacing-tighter: -0.05em;
+  --letter-spacing-tight: -0.025em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.025em;
+  --letter-spacing-wider: 0.05em;
+  --letter-spacing-widest: 0.1em;
+
+  /* Measure (optimal line length) */
+  --measure: 60ch;
+  --measure-narrow: 45ch;
+  --measure-wide: 75ch;
+
+  /* Composite presets: theme/theme-typography.css (minimize, condense, base, magnify, maximize + base-label / base-trigger / code) */
+}

package/dist/styles/base/z-index.css

@@ -0,0 +1,22 @@
+/* Z-Index - Mojave Theme */
+/* Modern z-index scale using custom properties */
+
+:root {
+  /* ============================================
+      Z-INDEX SCALE
+      ============================================ */
+
+  --z-index-hide: -1;
+  --z-index-auto: auto;
+  --z-index-base: 0;
+  --z-index-docked: 10;
+  --z-index-dropdown: 1000;
+  --z-index-sticky: 1100;
+  --z-index-banner: 1200;
+  --z-index-scrim: 1300;
+  --z-index-modal: 1400;
+  --z-index-popover: 1500;
+  --z-index-skip-link: 1600;
+  --z-index-toast: 1700;
+  --z-index-tooltip: 1800;
+  }

package/dist/styles/components/AGGrid.css

@@ -0,0 +1,6 @@
+/* AG Grid Component Styles - Mojave Theme */
+/* Minimal overrides - most styling handled by Theming API */
+
+.ag-picker-field-wrapper {
+    border-radius: var(--ag-grid-button-border-radius); /* This one is set to 5px and has no params*/
+}