@libretexts/davis-core 1.1.0 → 1.2.1

package/dist/base.css

@@ -4,12 +4,12 @@
  * AUTO-GENERATED from tokens.ts — DO NOT EDIT MANUALLY
  * Run 'npm run generate:configs' to regenerate
  *
- * Framework-agnostic base CSS imported by consuming packages.
+ * Framework-agnostic base CSS for consuming packages.
  * Contains CSS custom properties, typography defaults, heading hierarchy,
  * and focus-visible patterns.
  *
- * Does NOT include @tailwind directives — each consuming package adds those
- * to its own stylesheet.
+ * Scope: global (affects entire page via :root).
+ * For scoped/embedded usage, import base.scoped.css instead.
  */
 
 @layer base {
@@ -18,9 +18,9 @@
   :root {
     /* Colors */
     --davis-color-primary: #127BC4;
-    --davis-color-secondary: #0D8483;
-    --davis-color-tertiary: #5F65F5;
-    --davis-color-success: #338650;
+    --davis-color-secondary: #0F67A6;
+    --davis-color-tertiary: #4076a4;
+    --davis-color-success: #207537;
     --davis-color-warning: #BB5C21;
     --davis-color-danger: #DC3838;
     --davis-color-neutral: #18181B;
@@ -52,6 +52,66 @@
     /* Target Size (WCAG 2.2) */
     --davis-target-size-minimum: 24px;
     --davis-target-size-comfortable: 44px;
+
+    /* Z-Index */
+    --davis-z-dropdown: 1000;
+    --davis-z-sticky: 1100;
+    --davis-z-fixed: 1200;
+    --davis-z-modalBackdrop: 1300;
+    --davis-z-modal: 1400;
+    --davis-z-popover: 1500;
+    --davis-z-toast: 1600;
+    --davis-z-tooltip: 1700;
+
+    /* Opacity */
+    --davis-opacity-disabled: 0.5;
+    --davis-opacity-placeholder: 0.6;
+    --davis-opacity-overlay: 0.5;
+    --davis-opacity-hoverLight: 0.04;
+    --davis-opacity-hoverMedium: 0.08;
+
+    /* Border Width */
+    --davis-border-width-none: 0px;
+    --davis-border-width-thin: 1px;
+    --davis-border-width-medium: 2px;
+    --davis-border-width-thick: 3px;
+
+    /* Font Weight */
+    --davis-font-weight-light: 300;
+    --davis-font-weight-regular: 400;
+    --davis-font-weight-medium: 500;
+    --davis-font-weight-semibold: 600;
+    --davis-font-weight-bold: 700;
+
+    /* Letter Spacing */
+    --davis-letter-spacing-tighter: -0.05em;
+    --davis-letter-spacing-tight: -0.025em;
+    --davis-letter-spacing-normal: 0em;
+    --davis-letter-spacing-wide: 0.025em;
+    --davis-letter-spacing-wider: 0.05em;
+    --davis-letter-spacing-widest: 0.1em;
+
+    /* Breakpoints */
+    --davis-breakpoint-sm: 640px;
+    --davis-breakpoint-md: 768px;
+    --davis-breakpoint-lg: 1024px;
+    --davis-breakpoint-xl: 1280px;
+    --davis-breakpoint-2xl: 1536px;
+
+    /* Icon Size */
+    --davis-icon-size-xs: 0.75rem;
+    --davis-icon-size-sm: 1rem;
+    --davis-icon-size-md: 1.25rem;
+    --davis-icon-size-lg: 1.5rem;
+    --davis-icon-size-xl: 2rem;
+
+    /* Container / Content Width */
+    --davis-container-sm: 640px;
+    --davis-container-md: 768px;
+    --davis-container-lg: 1024px;
+    --davis-container-xl: 1280px;
+    --davis-container-2xl: 1536px;
+    --davis-container-prose: 65ch;
   }
 
   /* ─── Typography Defaults ───────────────────────────────────── */
@@ -115,8 +175,6 @@
   }
 
   /* ─── Reduced Motion ──────────────────────────────────────── */
-  /* Disables transitions and animations for users who prefer    */
-  /* reduced motion. Respects prefers-reduced-motion: reduce.    */
 
   @media (prefers-reduced-motion: reduce) {
     *,

package/dist/base.scoped.css

@@ -4,10 +4,10 @@
  * AUTO-GENERATED from tokens.ts — DO NOT EDIT MANUALLY
  * Run 'npm run generate:configs' to regenerate
  *
- * Standalone variant of base.css where every rule is scoped under `.davis`.
- * This prevents style leakage into host applications.
+ * Variant of base.css where every rule is scoped under `.davis`.
+ * Prevents style leakage when Davis components are embedded in host applications.
  *
- * Used by the standalone CSS bundle — the full-integration base.css is unchanged.
+ * Wrap Davis components in a `.davis` container to activate these styles.
  */
 
 /* ─── CSS Custom Properties (scoped to .davis) ───────────────── */
@@ -15,9 +15,9 @@
 .davis {
   /* Colors */
   --davis-color-primary: #127BC4;
-  --davis-color-secondary: #0D8483;
-  --davis-color-tertiary: #5F65F5;
-  --davis-color-success: #338650;
+  --davis-color-secondary: #0F67A6;
+  --davis-color-tertiary: #4076a4;
+  --davis-color-success: #207537;
   --davis-color-warning: #BB5C21;
   --davis-color-danger: #DC3838;
   --davis-color-neutral: #18181B;
@@ -49,12 +49,71 @@
   /* Target Size (WCAG 2.2) */
   --davis-target-size-minimum: 24px;
   --davis-target-size-comfortable: 44px;
+
+  /* Z-Index */
+  --davis-z-dropdown: 1000;
+  --davis-z-sticky: 1100;
+  --davis-z-fixed: 1200;
+  --davis-z-modalBackdrop: 1300;
+  --davis-z-modal: 1400;
+  --davis-z-popover: 1500;
+  --davis-z-toast: 1600;
+  --davis-z-tooltip: 1700;
+
+  /* Opacity */
+  --davis-opacity-disabled: 0.5;
+  --davis-opacity-placeholder: 0.6;
+  --davis-opacity-overlay: 0.5;
+  --davis-opacity-hoverLight: 0.04;
+  --davis-opacity-hoverMedium: 0.08;
+
+  /* Border Width */
+  --davis-border-width-none: 0px;
+  --davis-border-width-thin: 1px;
+  --davis-border-width-medium: 2px;
+  --davis-border-width-thick: 3px;
+
+  /* Font Weight */
+  --davis-font-weight-light: 300;
+  --davis-font-weight-regular: 400;
+  --davis-font-weight-medium: 500;
+  --davis-font-weight-semibold: 600;
+  --davis-font-weight-bold: 700;
+
+  /* Letter Spacing */
+  --davis-letter-spacing-tighter: -0.05em;
+  --davis-letter-spacing-tight: -0.025em;
+  --davis-letter-spacing-normal: 0em;
+  --davis-letter-spacing-wide: 0.025em;
+  --davis-letter-spacing-wider: 0.05em;
+  --davis-letter-spacing-widest: 0.1em;
+
+  /* Breakpoints */
+  --davis-breakpoint-sm: 640px;
+  --davis-breakpoint-md: 768px;
+  --davis-breakpoint-lg: 1024px;
+  --davis-breakpoint-xl: 1280px;
+  --davis-breakpoint-2xl: 1536px;
+
+  /* Icon Size */
+  --davis-icon-size-xs: 0.75rem;
+  --davis-icon-size-sm: 1rem;
+  --davis-icon-size-md: 1.25rem;
+  --davis-icon-size-lg: 1.5rem;
+  --davis-icon-size-xl: 2rem;
+
+  /* Container / Content Width */
+  --davis-container-sm: 640px;
+  --davis-container-md: 768px;
+  --davis-container-lg: 1024px;
+  --davis-container-xl: 1280px;
+  --davis-container-2xl: 1536px;
+  --davis-container-prose: 65ch;
 }
 
 /* ─── Scoped Preflight replacements ──────────────────────────── */
-/* These --tw-* variables are normally set by Tailwind's Preflight on *.
-   Since we disable Preflight in standalone mode, we initialize them here
-   so ring, shadow, transform, and filter utilities work correctly.       */
+/* Initialize box model and Tailwind internals within .davis so   */
+/* utility classes work correctly without the global Preflight.   */
 
 .davis *,
 .davis *::before,
@@ -65,62 +124,6 @@
   border-color: currentColor;
 }
 
-.davis *,
-.davis ::before,
-.davis ::after {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x: ;
-  --tw-pan-y: ;
-  --tw-pinch-zoom: ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position: ;
-  --tw-gradient-via-position: ;
-  --tw-gradient-to-position: ;
-  --tw-ordinal: ;
-  --tw-slashed-zero: ;
-  --tw-numeric-figure: ;
-  --tw-numeric-spacing: ;
-  --tw-numeric-fraction: ;
-  --tw-ring-inset: ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur: ;
-  --tw-brightness: ;
-  --tw-contrast: ;
-  --tw-grayscale: ;
-  --tw-hue-rotate: ;
-  --tw-invert: ;
-  --tw-saturate: ;
-  --tw-sepia: ;
-  --tw-drop-shadow: ;
-  --tw-backdrop-blur: ;
-  --tw-backdrop-brightness: ;
-  --tw-backdrop-contrast: ;
-  --tw-backdrop-grayscale: ;
-  --tw-backdrop-hue-rotate: ;
-  --tw-backdrop-invert: ;
-  --tw-backdrop-opacity: ;
-  --tw-backdrop-saturate: ;
-  --tw-backdrop-sepia: ;
-  --tw-contain-size: ;
-  --tw-contain-layout: ;
-  --tw-contain-paint: ;
-  --tw-contain-style: ;
-}
-
 /* ─── Typography Defaults (scoped) ───────────────────────────── */
 
 .davis {
@@ -181,7 +184,7 @@
   outline: none;
 }
 
-/* ─── Reduced Motion (scoped) ────────────────────────────── */
+/* ─── Reduced Motion (scoped) ────────────────────────────────── */
 
 @media (prefers-reduced-motion: reduce) {
   .davis *,

package/dist/base.v4.css

@@ -0,0 +1,89 @@
+/**
+ * Davis Design System — Tailwind CSS v4 Base Styles
+ *
+ * AUTO-GENERATED from tokens.ts — DO NOT EDIT MANUALLY
+ * Run 'npm run generate:configs' to regenerate
+ *
+ * Base styles for Tailwind CSS v4 (no @layer wrapper).
+ * Contains typography defaults, heading hierarchy, focus management,
+ * and reduced motion support.
+ *
+ * Usage (after @import "tailwindcss"):
+ *   @import "@libretexts/davis-core/theme.css";
+ *   @import "@libretexts/davis-core/base.v4.css";
+ */
+
+/* ─── Typography Defaults ───────────────────────────────── */
+
+html {
+  font-family: 'Atkinson Hyperlegible', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ─── Heading Hierarchy (Major Third Scale) ─────────────────── */
+
+h1 {
+  font-size: 3.052rem;
+  line-height: 3.25rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+}
+
+h2 {
+  font-size: 2.441rem;
+  line-height: 2.75rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+h3 {
+  font-size: 1.953rem;
+  line-height: 2.25rem;
+  font-weight: 600;
+}
+
+h4 {
+  font-size: 1.563rem;
+  line-height: 2rem;
+  font-weight: 600;
+}
+
+h5 {
+  font-size: 1.250rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+}
+
+h6 {
+  font-size: 1.250rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+}
+
+/* ─── Focus Management ──────────────────────────────────────── */
+
+*:focus-visible {
+  outline: 2px solid #127BC4;
+  outline-offset: 2px;
+}
+
+*:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* ─── Reduced Motion ──────────────────────────────────────────── */
+/* Disables transitions and animations for users who prefer        */
+/* reduced motion. Respects prefers-reduced-motion: reduce.        */
+
+@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;
+  }
+}

package/dist/theme.css

@@ -41,60 +41,60 @@
   /* ─── Colors ──────────────────────────────────────────────── */
 
   /* Primary */
-  --color-primary-50: #EFF6FC;
-  --color-primary-100: #DCEEF9;
-  --color-primary-200: #B3D9F2;
-  --color-primary-300: #80BDE8;
-  --color-primary-400: #4A9ED9;
+  --color-primary-50: #ebf0f4;
+  --color-primary-100: #dbe7f0;
+  --color-primary-200: #bcd8eb;
+  --color-primary-300: #8dc2e7;
+  --color-primary-400: #4ca6e6;
   --color-primary-500: #127BC4;
-  --color-primary-600: #0F6FA2;
-  --color-primary-700: #0B4A76;
-  --color-primary-800: #0A3D62;
-  --color-primary-900: #083350;
-  --color-primary-950: #052135;
+  --color-primary-600: #106098;
+  --color-primary-700: #0f4b75;
+  --color-primary-800: #0d334e;
+  --color-primary-900: #0c2231;
+  --color-primary-950: #0b1923;
   --color-primary: #127BC4;
 
   /* Secondary */
-  --color-secondary-50: #F0FDFC;
-  --color-secondary-100: #CCFBF6;
-  --color-secondary-200: #9AF5ED;
-  --color-secondary-300: #5FE8DD;
-  --color-secondary-400: #2ECFCA;
-  --color-secondary-500: #0D8483;
-  --color-secondary-600: #0A6C6B;
-  --color-secondary-700: #0B5756;
-  --color-secondary-800: #0D4545;
-  --color-secondary-900: #103939;
-  --color-secondary-950: #052222;
-  --color-secondary: #0D8483;
+  --color-secondary-50: #e8eef2;
+  --color-secondary-100: #dbe7f0;
+  --color-secondary-200: #b4d3e9;
+  --color-secondary-300: #81bbe4;
+  --color-secondary-400: #369be2;
+  --color-secondary-500: #0F67A6;
+  --color-secondary-600: #0e5181;
+  --color-secondary-700: #0d3f63;
+  --color-secondary-800: #0c2e46;
+  --color-secondary-900: #0b1f2d;
+  --color-secondary-950: #0a161f;
+  --color-secondary: #0F67A6;
 
   /* Tertiary */
-  --color-tertiary-50: #EDEDFE;
-  --color-tertiary-100: #E0E1FD;
-  --color-tertiary-200: #C6C8FB;
-  --color-tertiary-300: #A5A8F8;
-  --color-tertiary-400: #8287F7;
-  --color-tertiary-500: #5F65F5;
-  --color-tertiary-600: #4A4FDB;
-  --color-tertiary-700: #3B3FB8;
-  --color-tertiary-800: #323695;
-  --color-tertiary-900: #2C2F7A;
-  --color-tertiary-950: #1B1D4D;
-  --color-tertiary: #5F65F5;
+  --color-tertiary-50: #edf0f2;
+  --color-tertiary-100: #e3e8ed;
+  --color-tertiary-200: #c7d4e0;
+  --color-tertiary-300: #a6bed3;
+  --color-tertiary-400: #77a1c5;
+  --color-tertiary-500: #4076a4;
+  --color-tertiary-600: #335c80;
+  --color-tertiary-700: #294761;
+  --color-tertiary-800: #1f3242;
+  --color-tertiary-900: #16222c;
+  --color-tertiary-950: #11171d;
+  --color-tertiary: #4076a4;
 
   /* Success */
-  --color-success-50: #EEFBF3;
-  --color-success-100: #D6F5E2;
-  --color-success-200: #B0EBC8;
-  --color-success-300: #7CD9A5;
-  --color-success-400: #4DC37E;
-  --color-success-500: #338650;
-  --color-success-600: #2A7043;
-  --color-success-700: #235A37;
-  --color-success-800: #1F482E;
-  --color-success-900: #1A3B27;
-  --color-success-950: #0D2116;
-  --color-success: #338650;
+  --color-success-50: #eaf1eb;
+  --color-success-100: #dbebdf;
+  --color-success-200: #b6ddc0;
+  --color-success-300: #86d09a;
+  --color-success-400: #42c264;
+  --color-success-500: #207537;
+  --color-success-600: #1a5b2b;
+  --color-success-700: #164623;
+  --color-success-800: #13351c;
+  --color-success-900: #0f2415;
+  --color-success-950: #0c180f;
+  --color-success: #207537;
 
   /* Warning */
   --color-warning-50: #FFF7ED;
@@ -138,6 +138,11 @@
   --color-neutral-950: #09090B;
   --color-neutral: #71717A;
 
+  /* Text */
+  --color-text-neutral: #71717A;
+  --color-text-white: #FFFFFF;
+  --color-text: #162032;
+
   /* Surface */
   --color-surface: #FFFFFF;
   --color-surface-muted: #F9FAFB;
@@ -181,4 +186,72 @@
 
   --davis-target-size-minimum: 24px;
   --davis-target-size-comfortable: 44px;
+
+  /* ─── Z-Index ──────────────────────────────────────────────── */
+
+  --z-index-dropdown: 1000;
+  --z-index-sticky: 1100;
+  --z-index-fixed: 1200;
+  --z-index-modalBackdrop: 1300;
+  --z-index-modal: 1400;
+  --z-index-popover: 1500;
+  --z-index-toast: 1600;
+  --z-index-tooltip: 1700;
+
+  /* ─── Opacity ──────────────────────────────────────────────── */
+
+  --opacity-disabled: 0.5;
+  --opacity-placeholder: 0.6;
+  --opacity-overlay: 0.5;
+  --opacity-hoverLight: 0.04;
+  --opacity-hoverMedium: 0.08;
+
+  /* ─── Border Width ─────────────────────────────────────────── */
+
+  --border-width-none: 0px;
+  --border-width-thin: 1px;
+  --border-width-medium: 2px;
+  --border-width-thick: 3px;
+
+  /* ─── Font Weight ──────────────────────────────────────────── */
+
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* ─── Letter Spacing ───────────────────────────────────────── */
+
+  --letter-spacing-tighter: -0.05em;
+  --letter-spacing-tight: -0.025em;
+  --letter-spacing-normal: 0em;
+  --letter-spacing-wide: 0.025em;
+  --letter-spacing-wider: 0.05em;
+  --letter-spacing-widest: 0.1em;
+
+  /* ─── Breakpoints ──────────────────────────────────────────── */
+
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+
+  /* ─── Icon Size ────────────────────────────────────────────── */
+
+  --icon-size-xs: 0.75rem;
+  --icon-size-sm: 1rem;
+  --icon-size-md: 1.25rem;
+  --icon-size-lg: 1.5rem;
+  --icon-size-xl: 2rem;
+
+  /* ─── Container / Content Width ────────────────────────────── */
+
+  --container-sm: 640px;
+  --container-md: 768px;
+  --container-lg: 1024px;
+  --container-xl: 1280px;
+  --container-2xl: 1536px;
+  --container-prose: 65ch;
 }