@libretexts/davis-core 1.0.0

package/src/base.css

@@ -0,0 +1,104 @@
+/**
+ * Davis Design System — Base Styles
+ *
+ * AUTO-GENERATED from tokens.ts — DO NOT EDIT MANUALLY
+ * Run 'npm run generate:configs' to regenerate
+ *
+ * Framework-agnostic base CSS imported by 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.
+ */
+
+@layer base {
+  /* ─── CSS Custom Properties ─────────────────────────────────── */
+
+  :root {
+    /* Colors */
+    --davis-color-primary: #127BC4;
+    --davis-color-secondary: #0D8483;
+    --davis-color-tertiary: #5F65F5;
+    --davis-color-success: #338650;
+    --davis-color-warning: #BB5C21;
+    --davis-color-danger: #DC3838;
+    --davis-color-neutral: #18181B;
+
+    /* Surface */
+    --davis-surface: #FFFFFF;
+    --davis-surface-muted: #F9FAFB;
+    --davis-surface-subtle: #F4F4F5;
+
+    /* Typography */
+    --davis-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+
+    /* Border Radius */
+    --davis-radius: 0.375rem;
+
+    /* Focus Ring */
+    --davis-ring-width: 2px;
+    --davis-ring-color: #127BC4;
+    --davis-ring-offset: 2px;
+  }
+
+  /* ─── Typography Defaults ───────────────────────────────────── */
+
+  html {
+    font-family: var(--davis-font-family);
+    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: var(--davis-ring-width) solid var(--davis-ring-color);
+    outline-offset: var(--davis-ring-offset);
+  }
+
+  *:focus:not(:focus-visible) {
+    outline: none;
+  }
+}

package/src/base.scoped.css

@@ -0,0 +1,170 @@
+/**
+ * Davis Design System — Scoped Base Styles
+ *
+ * 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.
+ *
+ * Used by the standalone CSS bundle — the full-integration base.css is unchanged.
+ */
+
+/* ─── CSS Custom Properties (scoped to .davis) ───────────────── */
+
+.davis {
+  /* Colors */
+  --davis-color-primary: #127BC4;
+  --davis-color-secondary: #0D8483;
+  --davis-color-tertiary: #5F65F5;
+  --davis-color-success: #338650;
+  --davis-color-warning: #BB5C21;
+  --davis-color-danger: #DC3838;
+  --davis-color-neutral: #18181B;
+
+  /* Surface */
+  --davis-surface: #FFFFFF;
+  --davis-surface-muted: #F9FAFB;
+  --davis-surface-subtle: #F4F4F5;
+
+  /* Typography */
+  --davis-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+
+  /* Border Radius */
+  --davis-radius: 0.375rem;
+
+  /* Focus Ring */
+  --davis-ring-width: 2px;
+  --davis-ring-color: #127BC4;
+  --davis-ring-offset: 2px;
+}
+
+/* ─── 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.       */
+
+.davis *,
+.davis *::before,
+.davis *::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  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 {
+  font-family: var(--davis-font-family);
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ─── Heading Hierarchy (Major Third Scale, scoped) ──────────── */
+
+.davis h1 {
+  font-size: 3.052rem;
+  line-height: 3.25rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+}
+
+.davis h2 {
+  font-size: 2.441rem;
+  line-height: 2.75rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.davis h3 {
+  font-size: 1.953rem;
+  line-height: 2.25rem;
+  font-weight: 600;
+}
+
+.davis h4 {
+  font-size: 1.563rem;
+  line-height: 2rem;
+  font-weight: 600;
+}
+
+.davis h5 {
+  font-size: 1.250rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+}
+
+.davis h6 {
+  font-size: 1.250rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+}
+
+/* ─── Focus Management (scoped) ──────────────────────────────── */
+
+.davis *:focus-visible {
+  outline: var(--davis-ring-width) solid var(--davis-ring-color);
+  outline-offset: var(--davis-ring-offset);
+}
+
+.davis *:focus:not(:focus-visible) {
+  outline: none;
+}

package/src/theme.css

@@ -0,0 +1,173 @@
+/**
+ * Davis Design System — Tailwind CSS v4 Theme
+ *
+ * AUTO-GENERATED from tokens.ts — DO NOT EDIT MANUALLY
+ * Run 'npm run generate:configs' to regenerate
+ *
+ * Theme configuration for Tailwind CSS v4 using @theme directive.
+ * Import this file in your CSS to get all Davis design tokens.
+ */
+
+@theme {
+  /* ─── Typography ──────────────────────────────────────────── */
+
+  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
+
+  /* Major Third typographic scale (ratio 1.250, base 16px) */
+  --font-size-xs: 0.640rem;
+  --font-size-xs--line-height: 1rem;
+
+  --font-size-sm: 0.800rem;
+  --font-size-sm--line-height: 1.25rem;
+
+  --font-size-base: 1rem;
+  --font-size-base--line-height: 1.5rem;
+
+  --font-size-lg: 1.250rem;
+  --font-size-lg--line-height: 1.75rem;
+
+  --font-size-xl: 1.563rem;
+  --font-size-xl--line-height: 2rem;
+
+  --font-size-2xl: 1.953rem;
+  --font-size-2xl--line-height: 2.25rem;
+
+  --font-size-3xl: 2.441rem;
+  --font-size-3xl--line-height: 2.75rem;
+
+  --font-size-4xl: 3.052rem;
+  --font-size-4xl--line-height: 3.25rem;
+
+  /* ─── Colors ──────────────────────────────────────────────── */
+
+  /* Primary */
+  --color-primary-50: #EFF6FC;
+  --color-primary-100: #DCEEF9;
+  --color-primary-200: #B3D9F2;
+  --color-primary-300: #80BDE8;
+  --color-primary-400: #4A9ED9;
+  --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: #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;
+
+  /* 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;
+
+  /* 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;
+
+  /* Warning */
+  --color-warning-50: #FFF7ED;
+  --color-warning-100: #FFEDD5;
+  --color-warning-200: #FED7AA;
+  --color-warning-300: #FDBA74;
+  --color-warning-400: #F59542;
+  --color-warning-500: #BB5C21;
+  --color-warning-600: #A14D1B;
+  --color-warning-700: #863E16;
+  --color-warning-800: #6C3214;
+  --color-warning-900: #592B14;
+  --color-warning-950: #30130A;
+  --color-warning: #BB5C21;
+
+  /* Danger */
+  --color-danger-50: #FEF2F2;
+  --color-danger-100: #FEE2E2;
+  --color-danger-200: #FECACA;
+  --color-danger-300: #FCA5A5;
+  --color-danger-400: #F07272;
+  --color-danger-500: #DC3838;
+  --color-danger-600: #C42828;
+  --color-danger-700: #A32222;
+  --color-danger-800: #872222;
+  --color-danger-900: #712222;
+  --color-danger-950: #3E0E0E;
+  --color-danger: #DC3838;
+
+  /* Neutral */
+  --color-neutral-50: #FAFAFA;
+  --color-neutral-100: #F4F4F5;
+  --color-neutral-200: #E4E4E7;
+  --color-neutral-300: #D4D4D8;
+  --color-neutral-400: #A1A1AA;
+  --color-neutral-500: #71717A;
+  --color-neutral-600: #52525B;
+  --color-neutral-700: #3F3F46;
+  --color-neutral-800: #27272A;
+  --color-neutral-900: #18181B;
+  --color-neutral-950: #09090B;
+  --color-neutral: #71717A;
+
+  /* Surface */
+  --color-surface: #FFFFFF;
+  --color-surface-muted: #F9FAFB;
+  --color-surface-subtle: #F4F4F5;
+
+  /* ─── Border Radius ───────────────────────────────────────── */
+
+  --radius-none: 0;
+  --radius-sm: 0.125rem;
+  --radius-DEFAULT: 0.375rem;
+  --radius: 0.375rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-full: 9999px;
+
+  /* ─── Shadows ─────────────────────────────────────────────── */
+
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.07), 0 1px 2px -1px rgb(0 0 0 / 0.07);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.07), 0 4px 6px -4px rgb(0 0 0 / 0.05);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.07), 0 8px 10px -6px rgb(0 0 0 / 0.05);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.15);
+  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --shadow-none: none;
+
+  /* ─── Focus Ring ──────────────────────────────────────────── */
+
+  --ring-color: #127BC4;
+}

package/tailwind.preset.cjs

@@ -0,0 +1,205 @@
+/**
+ * Davis Design System — Tailwind CSS Preset
+ *
+ * AUTO-GENERATED from tokens.ts — DO NOT EDIT MANUALLY
+ * Run 'npm run generate:configs' to regenerate
+ *
+ * The runtime source of truth for any app or package using the design system.
+ * Import via: presets: [require("@libretexts/davis-core/tailwind.preset")]
+ */
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    // Top-level overrides (replace Tailwind defaults)
+    fontSize: {
+      "xs": [
+            "0.640rem",
+            {
+                  "lineHeight": "1rem"
+            }
+      ],
+      "sm": [
+            "0.800rem",
+            {
+                  "lineHeight": "1.25rem"
+            }
+      ],
+      "base": [
+            "1rem",
+            {
+                  "lineHeight": "1.5rem"
+            }
+      ],
+      "lg": [
+            "1.250rem",
+            {
+                  "lineHeight": "1.75rem"
+            }
+      ],
+      "xl": [
+            "1.563rem",
+            {
+                  "lineHeight": "2rem"
+            }
+      ],
+      "2xl": [
+            "1.953rem",
+            {
+                  "lineHeight": "2.25rem"
+            }
+      ],
+      "3xl": [
+            "2.441rem",
+            {
+                  "lineHeight": "2.75rem"
+            }
+      ],
+      "4xl": [
+            "3.052rem",
+            {
+                  "lineHeight": "3.25rem"
+            }
+      ]
+},
+
+    boxShadow: {
+      "sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+      "DEFAULT": "0 1px 3px 0 rgb(0 0 0 / 0.07), 0 1px 2px -1px rgb(0 0 0 / 0.07)",
+      "md": "0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05)",
+      "lg": "0 10px 15px -3px rgb(0 0 0 / 0.07), 0 4px 6px -4px rgb(0 0 0 / 0.05)",
+      "xl": "0 20px 25px -5px rgb(0 0 0 / 0.07), 0 8px 10px -6px rgb(0 0 0 / 0.05)",
+      "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.15)",
+      "inner": "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
+      "none": "none"
+},
+
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: '#127BC4',
+          50: '#EFF6FC',
+          100: '#DCEEF9',
+          200: '#B3D9F2',
+          300: '#80BDE8',
+          400: '#4A9ED9',
+          500: '#127BC4',
+          600: '#0F6FA2',
+          700: '#0B4A76',
+          800: '#0A3D62',
+          900: '#083350',
+          950: '#052135',
+        },
+        secondary: {
+          DEFAULT: '#0D8483',
+          50: '#F0FDFC',
+          100: '#CCFBF6',
+          200: '#9AF5ED',
+          300: '#5FE8DD',
+          400: '#2ECFCA',
+          500: '#0D8483',
+          600: '#0A6C6B',
+          700: '#0B5756',
+          800: '#0D4545',
+          900: '#103939',
+          950: '#052222',
+        },
+        tertiary: {
+          DEFAULT: '#5F65F5',
+          50: '#EDEDFE',
+          100: '#E0E1FD',
+          200: '#C6C8FB',
+          300: '#A5A8F8',
+          400: '#8287F7',
+          500: '#5F65F5',
+          600: '#4A4FDB',
+          700: '#3B3FB8',
+          800: '#323695',
+          900: '#2C2F7A',
+          950: '#1B1D4D',
+        },
+        success: {
+          DEFAULT: '#338650',
+          50: '#EEFBF3',
+          100: '#D6F5E2',
+          200: '#B0EBC8',
+          300: '#7CD9A5',
+          400: '#4DC37E',
+          500: '#338650',
+          600: '#2A7043',
+          700: '#235A37',
+          800: '#1F482E',
+          900: '#1A3B27',
+          950: '#0D2116',
+        },
+        warning: {
+          DEFAULT: '#BB5C21',
+          50: '#FFF7ED',
+          100: '#FFEDD5',
+          200: '#FED7AA',
+          300: '#FDBA74',
+          400: '#F59542',
+          500: '#BB5C21',
+          600: '#A14D1B',
+          700: '#863E16',
+          800: '#6C3214',
+          900: '#592B14',
+          950: '#30130A',
+        },
+        danger: {
+          DEFAULT: '#DC3838',
+          50: '#FEF2F2',
+          100: '#FEE2E2',
+          200: '#FECACA',
+          300: '#FCA5A5',
+          400: '#F07272',
+          500: '#DC3838',
+          600: '#C42828',
+          700: '#A32222',
+          800: '#872222',
+          900: '#712222',
+          950: '#3E0E0E',
+        },
+        neutral: {
+          DEFAULT: '#18181B',
+          50: '#FAFAFA',
+          100: '#F4F4F5',
+          200: '#E4E4E7',
+          300: '#D4D4D8',
+          400: '#A1A1AA',
+          500: '#71717A',
+          600: '#52525B',
+          700: '#3F3F46',
+          800: '#27272A',
+          900: '#18181B',
+          950: '#09090B',
+        },
+        surface: {
+          DEFAULT: '#FFFFFF',
+          muted: '#F9FAFB',
+          subtle: '#F4F4F5',
+        },
+      },
+
+      fontFamily: {
+        sans: ["Inter","ui-sans-serif","system-ui","-apple-system","BlinkMacSystemFont","Segoe UI","Roboto","Helvetica Neue","Arial","sans-serif"],
+      },
+
+      ringColor: {
+        DEFAULT: '#127BC4',
+      },
+
+      borderRadius: {
+        "none": "0",
+        "sm": "0.125rem",
+        "DEFAULT": "0.375rem",
+        "md": "0.375rem",
+        "lg": "0.5rem",
+        "xl": "0.75rem",
+        "2xl": "1rem",
+        "3xl": "1.5rem",
+        "full": "9999px"
+},
+    },
+  },
+};