@deepfuture/dui-theme-default 0.0.2 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -1
- package/components/accordion-item.js +11 -10
- package/components/alert-dialog-popup.js +9 -17
- package/components/avatar.js +2 -2
- package/components/badge.js +55 -29
- package/components/breadcrumb-ellipsis.js +1 -1
- package/components/breadcrumb-link.js +2 -2
- package/components/breadcrumb-page.js +1 -1
- package/components/breadcrumb-separator.js +1 -1
- package/components/breadcrumb.js +3 -2
- package/components/button.js +88 -51
- package/components/calendar.js +24 -21
- package/components/checkbox-group.js +1 -1
- package/components/checkbox.js +10 -9
- package/components/collapsible.js +11 -10
- package/components/combobox.js +65 -19
- package/components/command-empty.js +3 -2
- package/components/command-group.js +3 -2
- package/components/command-input.js +4 -3
- package/components/command-item.js +6 -5
- package/components/command-list.js +1 -1
- package/components/command-separator.js +1 -1
- package/components/command-shortcut.js +3 -2
- package/components/command.js +2 -2
- package/components/data-table.js +20 -19
- package/components/dialog-popup.js +9 -17
- package/components/dropzone.js +10 -9
- package/components/input.js +13 -12
- package/components/menu-item.js +11 -9
- package/components/menu.js +19 -1
- package/components/number-field.js +13 -11
- package/components/popover-popup.js +25 -1
- package/components/preview-card-popup.js +26 -1
- package/components/progress.js +2 -2
- package/components/radio.js +11 -10
- package/components/scroll-area.js +9 -9
- package/components/select.js +62 -10
- package/components/sidebar-group-label.js +2 -2
- package/components/sidebar-menu-button.js +6 -14
- package/components/sidebar-provider.js +6 -14
- package/components/sidebar.js +1 -1
- package/components/slider.js +8 -7
- package/components/switch.js +12 -11
- package/components/tab.js +10 -9
- package/components/tabs-indicator.js +3 -3
- package/components/tabs-panel.js +3 -2
- package/components/textarea.js +11 -10
- package/components/toggle-group.js +0 -1
- package/components/toggle.js +28 -11
- package/components/tooltip-popup.js +29 -1
- package/components/trunc.js +3 -3
- package/index.d.ts +4 -0
- package/index.js +6 -0
- package/package.json +14 -2
- package/prose.d.ts +2 -0
- package/prose.js +4 -0
- package/tokens-raw.js +1 -1
- package/tokens.css +95 -72
- package/tokens.js +3 -2
- package/types.d.ts +18 -0
- package/types.js +8 -0
- package/typography.d.ts +104 -0
- package/typography.js +103 -0
package/tokens.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
const tokensCSS = "/* =================================================================\n * DUI Design Tokens\n * =================================================================\n * Combined token system: spacing, typography, borders, elevation,\n * motion, colors, sizing, and focus.\n *\n * Tokens are declared on :root so they cascade through the entire\n * document, including into shadow DOM via CSS custom property\n * inheritance.\n *\n * Dark mode: apply data-theme=\"dark\" on <html> to switch palettes.\n * ================================================================= */\n\n:root {\n /* -----------------------------------------------------------\n * Spacing (Tailwind base-4 system)\n * ----------------------------------------------------------- */\n --space-0: 0;\n --space-px: 1px;\n --space-0_5: 0.125rem; /* 2px */\n --space-1: 0.25rem; /* 4px */\n --space-1_5: 0.375rem; /* 6px */\n --space-2: 0.5rem; /* 8px */\n --space-2_5: 0.625rem; /* 10px */\n --space-3: 0.75rem; /* 12px */\n --space-3_5: 0.875rem; /* 14px */\n --space-4: 1rem; /* 16px */\n --space-4_5: 1.125rem; /* 18px */\n --space-5: 1.25rem; /* 20px */\n --space-6: 1.5rem; /* 24px */\n --space-7: 1.75rem; /* 28px */\n --space-8: 2rem; /* 32px */\n --space-9: 2.25rem; /* 36px */\n --space-10: 2.5rem; /* 40px */\n --space-11: 2.75rem; /* 44px */\n --space-12: 3rem; /* 48px */\n --space-14: 3.5rem; /* 56px */\n --space-16: 4rem; /* 64px */\n --space-20: 5rem; /* 80px */\n --space-24: 6rem; /* 96px */\n --space-28: 7rem; /* 112px */\n --space-32: 8rem; /* 128px */\n --space-36: 9rem; /* 144px */\n --space-40: 10rem; /* 160px */\n --space-44: 11rem; /* 176px */\n --space-48: 12rem; /* 192px */\n --space-52: 13rem; /* 208px */\n --space-56: 14rem; /* 224px */\n --space-60: 15rem; /* 240px */\n --space-64: 16rem; /* 256px */\n --space-72: 18rem; /* 288px */\n --space-80: 20rem; /* 320px */\n --space-96: 24rem; /* 384px */\n\n /* -----------------------------------------------------------\n * Typography\n * ----------------------------------------------------------- */\n --font-sans:\n 'Inter', system-ui, -apple-system, sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n --font-mono:\n 'JetBrains Mono', ui-monospace, SFMono-Regular, \"SF Mono\", Menlo,\n Consolas, \"Liberation Mono\", monospace;\n\n --font-size-2xs: 0.65rem;\n --font-size-xs: 0.75rem;\n --font-size-sm: 0.875rem;\n --font-size-base: 0.9375rem;\n --font-size-md: 1rem;\n --font-size-lg: 1.125rem;\n --font-size-xl: 1.25rem;\n --font-size-2xl: 1.5rem;\n --font-size-3xl: 1.875rem;\n --font-size-4xl: 2.25rem;\n --font-size-5xl: 3rem;\n --font-size-6xl: 3.75rem;\n --font-size-7xl: 4.5rem;\n\n --letter-spacing-tightest: -0.02em;\n --letter-spacing-tighter: -0.015em;\n --letter-spacing-tight: -0.01em;\n --letter-spacing-normal: 0em;\n --letter-spacing-wide: 0.006em;\n --letter-spacing-wider: 0.012em;\n\n --font-size-fluid-sm: clamp(0.813rem, 0.75rem + 0.315vw, 0.875rem);\n --font-size-fluid-md: clamp(0.875rem, 0.813rem + 0.315vw, 1rem);\n --font-size-fluid-lg: clamp(1rem, 0.938rem + 0.315vw, 1.125rem);\n --font-size-fluid-xl: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);\n --font-size-fluid-2xl: clamp(1.25rem, 1.125rem + 0.625vw, 1.5rem);\n --font-size-fluid-3xl: clamp(1.5rem, 1.313rem + 0.938vw, 1.875rem);\n --font-size-fluid-4xl: clamp(1.875rem, 1.625rem + 1.25vw, 2.25rem);\n --font-size-fluid-5xl: clamp(2.25rem, 1.875rem + 1.875vw, 3rem);\n\n --font-weight-regular: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n\n --line-height-none: 1;\n --line-height-tight: 1.25;\n --line-height-snug: 1.375;\n --line-height-normal: 1.5;\n --line-height-relaxed: 1.625;\n\n /* -----------------------------------------------------------\n * Borders\n * ----------------------------------------------------------- */\n --radius-none: 0;\n --radius-xs: 0.125rem;\n --radius-sm: 0.25rem;\n --radius-md: 0.5rem;\n --radius-lg: 1rem;\n --radius-xl: 1.5rem;\n --radius-2xl: 2rem;\n --radius-full: 9999px;\n\n --border-width-hairline: 0.5px;\n --border-width-thin: 1px;\n --border-width-medium: 2px;\n --border-width-thick: 4px;\n\n /* -----------------------------------------------------------\n * Elevation\n * ----------------------------------------------------------- */\n --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --shadow-none: 0 0 0 0 transparent;\n\n --z-base: 0;\n --z-dropdown: 700;\n --z-sticky: 800;\n --z-overlay: 900;\n --z-modal: 1000;\n --z-popover: 1100;\n --z-toast: 1200;\n --z-tooltip: 1300;\n\n /* -----------------------------------------------------------\n * Motion\n * ----------------------------------------------------------- */\n --duration-instant: 50ms;\n --duration-faster: 100ms;\n --duration-fast: 150ms;\n --duration-normal: 250ms;\n --duration-slow: 400ms;\n --duration-slower: 700ms;\n\n --ease-1: cubic-bezier(0.25, 0, 0.5, 1);\n --ease-2: cubic-bezier(0.25, 0, 0.4, 1);\n --ease-3: cubic-bezier(0.25, 0, 0.3, 1);\n --ease-4: cubic-bezier(0.25, 0, 0.2, 1);\n --ease-5: cubic-bezier(0.25, 0, 0.1, 1);\n --ease-in-1: cubic-bezier(0.25, 0, 1, 1);\n --ease-in-2: cubic-bezier(0.5, 0, 1, 1);\n --ease-in-3: cubic-bezier(0.7, 0, 1, 1);\n --ease-in-4: cubic-bezier(0.9, 0, 1, 1);\n --ease-in-5: cubic-bezier(1, 0, 1, 1);\n --ease-out-1: cubic-bezier(0, 0, 0.75, 1);\n --ease-out-2: cubic-bezier(0, 0, 0.5, 1);\n --ease-out-3: cubic-bezier(0, 0, 0.3, 1);\n --ease-out-4: cubic-bezier(0, 0, 0.1, 1);\n --ease-out-5: cubic-bezier(0, 0, 0, 1);\n --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);\n --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);\n --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);\n --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);\n --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);\n\n --ease-sine-in: cubic-bezier(0.47, 0, 0.745, 0.715);\n --ease-sine-out: cubic-bezier(0.39, 0.575, 0.565, 1);\n --ease-sine-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);\n --ease-quad-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);\n --ease-quad-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n --ease-quad-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);\n --ease-cubic-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n --ease-cubic-out: cubic-bezier(0.215, 0.61, 0.355, 1);\n --ease-cubic-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);\n --ease-quart-in: cubic-bezier(0.895, 0.03, 0.685, 0.22);\n --ease-quart-out: cubic-bezier(0.165, 0.84, 0.44, 1);\n --ease-quart-in-out: cubic-bezier(0.77, 0, 0.175, 1);\n --ease-quint-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n --ease-quint-out: cubic-bezier(0.23, 1, 0.32, 1);\n --ease-quint-in-out: cubic-bezier(0.86, 0, 0.07, 1);\n --ease-expo-in: cubic-bezier(0.95, 0.05, 0.795, 0.035);\n --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);\n --ease-expo-in-out: cubic-bezier(1, 0, 0, 1);\n --ease-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);\n --ease-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);\n --ease-circ-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);\n\n /* -----------------------------------------------------------\n * Filters (presets for filter / backdrop-filter tokens)\n * ----------------------------------------------------------- */\n --filter-none: none;\n --filter-blur-sm: blur(4px);\n --filter-blur-md: blur(8px);\n --filter-blur-lg: blur(16px);\n --filter-blur-xl: blur(24px);\n --filter-brightness-dim: brightness(0.8);\n --filter-brightness-bright: brightness(1.15);\n --filter-saturate-muted: saturate(0.5);\n --filter-saturate-vivid: saturate(1.5);\n --filter-grayscale: grayscale(1);\n\n /* -----------------------------------------------------------\n * Clip Paths (shape presets)\n * ----------------------------------------------------------- */\n --clip-none: none;\n --clip-circle: circle(50%);\n --clip-squircle: inset(0 round 30%);\n --clip-hexagon: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);\n --clip-octagon: polygon(29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%);\n --clip-chevron-right: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%);\n --clip-bevel: polygon(8% 0%, 92% 0%, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0% 92%, 0% 8%);\n\n /* -----------------------------------------------------------\n * Component Sizing\n * ----------------------------------------------------------- */\n --component-height-xxs: 1.25rem;\n --component-height-xs: 1.5rem;\n --component-height-sm: 1.75rem;\n --component-height-md: 2rem;\n --component-height-lg: 2.25rem;\n --component-height-xl: 2.5rem;\n\n /* -----------------------------------------------------------\n * Focus Ring\n * ----------------------------------------------------------- */\n --focus-ring-color: var(--ring);\n --focus-ring-width: 2px;\n --focus-ring-style: solid;\n --focus-ring-offset: 2px;\n --focus-ring-duration: var(--duration-fast);\n --focus-ring-easing: var(--ease-out-3);\n\n /* -----------------------------------------------------------\n * Colors: Brand (theme-independent)\n * ----------------------------------------------------------- */\n --brand: oklch(0.728 0.1304 73.28);\n --brand-foreground: oklch(1 0.02 73.28);\n}\n\n/* =================================================================\n * LIGHT THEME (default)\n * ================================================================= */\n:root:not([data-theme=\"dark\"]) {\n --background: oklch(0.97 0 0);\n --foreground: oklch(0.145 0.005 286);\n --muted: oklch(0.965 0.002 286);\n --muted-foreground: oklch(0.556 0.016 286);\n --card: oklch(0.99 0 0);\n --card-foreground: oklch(0.145 0.005 286);\n --popover: oklch(1 0 0);\n --popover-foreground: oklch(0.145 0.005 286);\n --primary: oklch(0.205 0.042 265);\n --primary-foreground: oklch(0.985 0.002 248);\n --secondary: oklch(0.93 0.002 286);\n --secondary-foreground: oklch(0.3 0.042 265);\n --accent: oklch(0.93 0.04 62);\n --accent-foreground: oklch(0.32 0.06 55);\n --destructive: oklch(0.6 0.19 25);\n --destructive-foreground: oklch(0.995 0.06 25);\n --success: oklch(0.5 0.15 150);\n --success-foreground: oklch(0.985 0 0);\n --warning: oklch(0.72 0.15 75);\n --warning-foreground: oklch(0.28 0.06 55);\n --info: oklch(0.53 0.16 245);\n --info-foreground: oklch(0.985 0 0);\n --input: oklch(0.922 0.004 286);\n --input-bg: oklch(0.97 0.002 286);\n --border: oklch(0.922 0.004 286);\n --ring: oklch(0.551 0.2 245);\n --meter-track: oklch(0.965 0.002 286);\n --meter-fill: oklch(0.205 0.042 265);\n --scrim: oklch(0 0 0 / 0.5);\n --chart-1: oklch(0.58 0.17 35);\n --chart-2: oklch(0.55 0.13 185);\n --chart-3: oklch(0.52 0.14 265);\n --chart-4: oklch(0.62 0.15 85);\n --chart-5: oklch(0.55 0.16 310);\n}\n\n/* =================================================================\n * DARK THEME\n * ================================================================= */\n:root[data-theme=\"dark\"] {\n --background: oklch(0.26 0.019 243);\n --foreground: oklch(0.9353 0.0173 243);\n --muted: oklch(0.27 0.03 243);\n --muted-foreground: oklch(0.9353 0.0173 243 / 0.4);\n --card: oklch(0.29 0.028 243);\n --card-foreground: oklch(0.985 0.002 243);\n --popover: oklch(0.309 0.032 243);\n --popover-foreground: oklch(0.985 0.002 243);\n --primary: oklch(0.985 0.002 243);\n --primary-foreground: oklch(0.205 0.042 243);\n --secondary: oklch(0.826 0.041 243 / 0.2);\n --secondary-foreground: oklch(0.9353 0.0173 243 / 1);\n --accent: oklch(0.7001 0.1329 62.25);\n --accent-foreground: oklch(1 0.1 62.25);\n --destructive: oklch(0.63 0.2 25);\n --destructive-foreground: oklch(0.99 0.1 25);\n --success: oklch(0.65 0.17 145);\n --success-foreground: oklch(1 0.1 145);\n --warning: oklch(0.78 0.15 80);\n --warning-foreground: oklch(1 0.05 80);\n --info: oklch(0.64 0.16 245);\n --info-foreground: oklch(1 0.1 245);\n --input: oklch(0.826 0.041 202 / 0.2);\n --input-bg: oklch(0.826 0.041 202 / 0.08);\n --border: oklch(0.826 0.041 202 / 0.14);\n --ring: oklch(0.55 0.16 245);\n --meter-track: oklch(0.269 0.007 286);\n --meter-fill: oklch(0.985 0.002 248);\n --scrim: oklch(0.18 0.017 244 / 0.6);\n --chart-1: oklch(0.58 0.17 264);\n --chart-2: oklch(0.62 0.15 162);\n --chart-3: oklch(0.7 0.16 80);\n --chart-4: oklch(0.6 0.19 303);\n --chart-5: oklch(0.62 0.18 16);\n}\n\n/* =================================================================\n * Base document styles\n * ================================================================= */\n:root {\n color: var(--foreground);\n font-family: var(--font-sans);\n line-height: var(--line-height-normal);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n";
|
|
1
|
+
const tokensCSS = "/* =================================================================\n * DUI Design Tokens\n * =================================================================\n * Combined token system: spacing, typography, borders, elevation,\n * motion, colors, sizing, and focus.\n *\n * Tokens are declared on :root so they cascade through the entire\n * document, including into shadow DOM via CSS custom property\n * inheritance.\n *\n * Dark mode: apply data-theme=\"dark\" on <html> to switch palettes.\n * ================================================================= */\n\n:root {\n /* -----------------------------------------------------------\n * Spacing (Tailwind base-4 system)\n * ----------------------------------------------------------- */\n --space-0: 0;\n --space-px: 1px;\n --space-0_5: 0.125rem; /* 2px */\n --space-1: 0.25rem; /* 4px */\n --space-1_5: 0.375rem; /* 6px */\n --space-2: 0.5rem; /* 8px */\n --space-2_5: 0.625rem; /* 10px */\n --space-3: 0.75rem; /* 12px */\n --space-3_5: 0.875rem; /* 14px */\n --space-4: 1rem; /* 16px */\n --space-4_5: 1.125rem; /* 18px */\n --space-5: 1.25rem; /* 20px */\n --space-6: 1.5rem; /* 24px */\n --space-7: 1.75rem; /* 28px */\n --space-8: 2rem; /* 32px */\n --space-9: 2.25rem; /* 36px */\n --space-10: 2.5rem; /* 40px */\n --space-11: 2.75rem; /* 44px */\n --space-12: 3rem; /* 48px */\n --space-14: 3.5rem; /* 56px */\n --space-16: 4rem; /* 64px */\n --space-20: 5rem; /* 80px */\n --space-24: 6rem; /* 96px */\n --space-28: 7rem; /* 112px */\n --space-32: 8rem; /* 128px */\n --space-36: 9rem; /* 144px */\n --space-40: 10rem; /* 160px */\n --space-44: 11rem; /* 176px */\n --space-48: 12rem; /* 192px */\n --space-52: 13rem; /* 208px */\n --space-56: 14rem; /* 224px */\n --space-60: 15rem; /* 240px */\n --space-64: 16rem; /* 256px */\n --space-72: 18rem; /* 288px */\n --space-80: 20rem; /* 320px */\n --space-96: 24rem; /* 384px */\n\n /* -----------------------------------------------------------\n * Typography\n * ----------------------------------------------------------- */\n --font-sans:\n 'Inter', system-ui, -apple-system, sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n --font-mono:\n 'JetBrains Mono', ui-monospace, SFMono-Regular, \"SF Mono\", Menlo,\n Consolas, \"Liberation Mono\", monospace;\n\n --font-size-2xs: 0.65rem;\n --font-size-xs: 0.75rem;\n --font-size-sm: 0.875rem;\n --font-size-base: 0.9375rem;\n --font-size-md: 1rem;\n --font-size-lg: 1.125rem;\n --font-size-xl: 1.25rem;\n --font-size-2xl: 1.5rem;\n --font-size-3xl: 1.875rem;\n --font-size-4xl: 2.25rem;\n --font-size-5xl: 3rem;\n --font-size-6xl: 3.75rem;\n --font-size-7xl: 4.5rem;\n\n --letter-spacing-tightest: -0.02em;\n --letter-spacing-tighter: -0.015em;\n --letter-spacing-tight: -0.01em;\n --letter-spacing-normal: 0em;\n --letter-spacing-wide: 0.006em;\n --letter-spacing-wider: 0.012em;\n\n --font-size-fluid-sm: clamp(0.813rem, 0.75rem + 0.315vw, 0.875rem);\n --font-size-fluid-md: clamp(0.875rem, 0.813rem + 0.315vw, 1rem);\n --font-size-fluid-lg: clamp(1rem, 0.938rem + 0.315vw, 1.125rem);\n --font-size-fluid-xl: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);\n --font-size-fluid-2xl: clamp(1.25rem, 1.125rem + 0.625vw, 1.5rem);\n --font-size-fluid-3xl: clamp(1.5rem, 1.313rem + 0.938vw, 1.875rem);\n --font-size-fluid-4xl: clamp(1.875rem, 1.625rem + 1.25vw, 2.25rem);\n --font-size-fluid-5xl: clamp(2.25rem, 1.875rem + 1.875vw, 3rem);\n\n --font-weight-regular: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n\n --line-height-none: 1;\n --line-height-tight: 1.25;\n --line-height-snug: 1.375;\n --line-height-normal: 1.5;\n --line-height-relaxed: 1.625;\n\n /* -----------------------------------------------------------\n * Borders\n * ----------------------------------------------------------- */\n --radius-none: 0;\n --radius-xs: 0.125rem;\n --radius-sm: 0.25rem;\n --radius-md: 0.5rem;\n --radius-lg: 1rem;\n --radius-xl: 1.5rem;\n --radius-2xl: 2rem;\n --radius-full: 9999px;\n\n --border-width-hairline: 0.5px;\n --border-width-thin: 1px;\n --border-width-medium: 2px;\n --border-width-thick: 4px;\n\n /* -----------------------------------------------------------\n * Elevation\n * ----------------------------------------------------------- */\n --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --shadow-none: 0 0 0 0 transparent;\n\n --z-base: 0;\n --z-dropdown: 700;\n --z-sticky: 800;\n --z-overlay: 900;\n --z-modal: 1000;\n --z-popover: 1100;\n --z-toast: 1200;\n --z-tooltip: 1300;\n\n /* -----------------------------------------------------------\n * Motion\n * ----------------------------------------------------------- */\n --duration-instant: 50ms;\n --duration-fastest: 75ms;\n --duration-faster: 100ms;\n --duration-fast: 150ms;\n --duration-normal: 250ms;\n --duration-slow: 400ms;\n --duration-slower: 700ms;\n\n --ease-1: cubic-bezier(0.25, 0, 0.5, 1);\n --ease-2: cubic-bezier(0.25, 0, 0.4, 1);\n --ease-3: cubic-bezier(0.25, 0, 0.3, 1);\n --ease-4: cubic-bezier(0.25, 0, 0.2, 1);\n --ease-5: cubic-bezier(0.25, 0, 0.1, 1);\n --ease-in-1: cubic-bezier(0.25, 0, 1, 1);\n --ease-in-2: cubic-bezier(0.5, 0, 1, 1);\n --ease-in-3: cubic-bezier(0.7, 0, 1, 1);\n --ease-in-4: cubic-bezier(0.9, 0, 1, 1);\n --ease-in-5: cubic-bezier(1, 0, 1, 1);\n --ease-out-1: cubic-bezier(0, 0, 0.75, 1);\n --ease-out-2: cubic-bezier(0, 0, 0.5, 1);\n --ease-out-3: cubic-bezier(0, 0, 0.3, 1);\n --ease-out-4: cubic-bezier(0, 0, 0.1, 1);\n --ease-out-5: cubic-bezier(0, 0, 0, 1);\n --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);\n --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);\n --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);\n --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);\n --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);\n\n --ease-sine-in: cubic-bezier(0.47, 0, 0.745, 0.715);\n --ease-sine-out: cubic-bezier(0.39, 0.575, 0.565, 1);\n --ease-sine-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);\n --ease-quad-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);\n --ease-quad-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n --ease-quad-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);\n --ease-cubic-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n --ease-cubic-out: cubic-bezier(0.215, 0.61, 0.355, 1);\n --ease-cubic-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);\n --ease-quart-in: cubic-bezier(0.895, 0.03, 0.685, 0.22);\n --ease-quart-out: cubic-bezier(0.165, 0.84, 0.44, 1);\n --ease-quart-in-out: cubic-bezier(0.77, 0, 0.175, 1);\n --ease-quint-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n --ease-quint-out: cubic-bezier(0.23, 1, 0.32, 1);\n --ease-quint-in-out: cubic-bezier(0.86, 0, 0.07, 1);\n --ease-expo-in: cubic-bezier(0.95, 0.05, 0.795, 0.035);\n --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);\n --ease-expo-in-out: cubic-bezier(1, 0, 0, 1);\n --ease-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);\n --ease-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);\n --ease-circ-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);\n\n /* -----------------------------------------------------------\n * Filters (presets for filter / backdrop-filter tokens)\n * ----------------------------------------------------------- */\n --filter-none: none;\n --filter-blur-sm: blur(4px);\n --filter-blur-md: blur(8px);\n --filter-blur-lg: blur(16px);\n --filter-blur-xl: blur(24px);\n --filter-brightness-dim: brightness(0.8);\n --filter-brightness-bright: brightness(1.15);\n --filter-saturate-muted: saturate(0.5);\n --filter-saturate-vivid: saturate(1.5);\n --filter-grayscale: grayscale(1);\n\n /* -----------------------------------------------------------\n * Clip Paths (shape presets)\n * ----------------------------------------------------------- */\n --clip-none: none;\n --clip-circle: circle(50%);\n --clip-squircle: inset(0 round 30%);\n --clip-hexagon: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);\n --clip-octagon: polygon(29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%);\n --clip-chevron-right: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%);\n --clip-bevel: polygon(8% 0%, 92% 0%, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0% 92%, 0% 8%);\n\n /* -----------------------------------------------------------\n * Component Sizing\n * ----------------------------------------------------------- */\n --component-height-xxs: 1.25rem;\n --component-height-xs: 1.5rem;\n --component-height-sm: 1.75rem;\n --component-height-md: 2rem;\n --component-height-lg: 2.25rem;\n --component-height-xl: 2.5rem;\n\n /* -----------------------------------------------------------\n * Focus Ring\n * ----------------------------------------------------------- */\n --focus-ring-color: var(--accent);\n --focus-ring-width: 2px;\n --focus-ring-offset: 2px;\n --focus-ring-duration: var(--duration-fast);\n --focus-ring-easing: var(--ease-out-3);\n\n /* -----------------------------------------------------------\n * Colors: Brand (theme-independent)\n * ----------------------------------------------------------- */\n --brand: oklch(0.728 0.1304 73.28);\n --brand-foreground: oklch(1 0.02 73.28);\n}\n\n/* =================================================================\n * COLOR SYSTEM\n * =================================================================\n * Built on two principles:\n * 1. Operations on a base — colors are relationships, not fixed values.\n * 2. Fewer primitives, more derivation — 4 primitives, everything\n * else computed via oklch(from ...) and color-mix().\n *\n * Layer 1: Primitives (only values a theme author picks)\n * Layer 2: Derived tokens (computed from primitives, never per-theme)\n * Layer 3: Interaction states (component-level, not tokens)\n * ================================================================= */\n\n/* -----------------------------------------------------------------\n * LIGHT THEME (default)\n * ----------------------------------------------------------------- */\n:root:not([data-theme=\"dark\"]) {\n /* --- Layer 1: Primitives --- */\n --background: oklch(0.97 0 0);\n --foreground: oklch(0.15 0 0);\n --accent: oklch(0.55 0.25 260);\n --destructive: oklch(0.55 0.22 25);\n}\n\n/* -----------------------------------------------------------------\n * DARK THEME\n * ----------------------------------------------------------------- */\n:root[data-theme=\"dark\"] {\n /* --- Layer 1: Primitives --- */\n --background: oklch(0.15 0.015 260);\n --foreground: oklch(0.93 0 0);\n --accent: oklch(0.75 0.18 260);\n --destructive: oklch(0.70 0.18 25);\n}\n\n/* -----------------------------------------------------------------\n * Layer 2: Derived tokens (computed from primitives)\n * Defined once — same rules for light and dark.\n * ----------------------------------------------------------------- */\n:root {\n /* Surfaces — lightness offsets from background.\n Positive = elevated (brighter). Negative = sunken (darker). */\n --sunken: oklch(from var(--background) calc(l - 0.03) c h);\n --surface-1: oklch(from var(--background) calc(l + 0.02) c h);\n --surface-2: oklch(from var(--background) calc(l + 0.05) c h);\n --surface-3: oklch(from var(--background) calc(l + 0.09) c h);\n\n /* Borders — foreground at reduced alpha.\n Semi-transparent so they adapt to any surface. */\n --border: oklch(from var(--foreground) l c h / 0.15);\n --border-strong: oklch(from var(--foreground) l c h / 0.25);\n\n /* Text tiers — foreground at reduced alpha.\n Semi-transparent so they adapt to any surface. */\n --text-1: oklch(from var(--foreground) l c h / 0.90);\n --text-2: oklch(from var(--foreground) l c h / 0.63);\n --text-3: oklch(from var(--foreground) l c h / 0.45);\n\n /* Accent surfaces — for badges, pills, tinted cards */\n --accent-subtle: oklch(from var(--accent) l c h / 0.10);\n --accent-text: color-mix(in oklch, var(--accent) 80%, var(--foreground));\n\n /* Destructive surfaces */\n --destructive-subtle: oklch(from var(--destructive) l c h / 0.10);\n --destructive-text: color-mix(in oklch, var(--destructive) 80%, var(--foreground));\n\n /* Utility — scrim overlay for modals/dialogs */\n --scrim: oklch(from var(--foreground) l c h / 0.35);\n\n /* Meter / progress bar defaults */\n --meter-track: var(--surface-1);\n --meter-fill: var(--accent);\n\n /* Chart palette (theme-independent) */\n --chart-1: oklch(0.58 0.17 35);\n --chart-2: oklch(0.55 0.13 185);\n --chart-3: oklch(0.52 0.14 265);\n --chart-4: oklch(0.62 0.15 85);\n --chart-5: oklch(0.55 0.16 310);\n\n /* -----------------------------------------------------------\n * Prose (rich-text / markdown content)\n * ----------------------------------------------------------- */\n --prose-body: var(--text-1);\n --prose-headings: var(--foreground);\n --prose-lead: var(--text-2);\n --prose-links: var(--accent);\n --prose-links-hover: var(--accent-text);\n --prose-bold: var(--foreground);\n --prose-code: var(--foreground);\n --prose-code-bg: var(--surface-1);\n --prose-pre-bg: var(--surface-1);\n --prose-pre-border: var(--border);\n --prose-blockquote-border: var(--accent);\n --prose-blockquote-text: var(--text-2);\n --prose-hr: var(--border);\n --prose-th-border: var(--border-strong);\n --prose-td-border: var(--border);\n --prose-caption: var(--text-3);\n --prose-kbd-bg: var(--surface-2);\n --prose-kbd-border: var(--border-strong);\n}\n\n/* =================================================================\n * Base document styles\n * ================================================================= */\n:root {\n color: var(--text-1);\n font-family: var(--font-sans);\n line-height: var(--line-height-normal);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n";
|
|
2
|
+
import propertiesCSS from "./properties.css" with { type: "text" };
|
|
2
3
|
const tokenSheet = new CSSStyleSheet();
|
|
3
|
-
tokenSheet.replaceSync(tokensCSS);
|
|
4
|
+
tokenSheet.replaceSync(propertiesCSS + "\n" + tokensCSS);
|
|
4
5
|
export { tokenSheet };
|
package/types.d.ts
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Variant and size vocabularies for theme-default.
|
|
3
|
+
*
|
|
4
|
+
* These types are theme-specific — a different theme may define
|
|
5
|
+
* entirely different variant names and size scales. Import them
|
|
6
|
+
* from `@dui/theme-default` for type safety when using this theme.
|
|
7
|
+
*/
|
|
8
|
+
export type ButtonVariant = "neutral" | "primary" | "danger";
|
|
9
|
+
export type ButtonAppearance = "filled" | "outline" | "ghost" | "link";
|
|
10
|
+
export type ButtonSize = "sm" | "md" | "lg";
|
|
11
|
+
export type BadgeVariant = "neutral" | "primary" | "danger";
|
|
12
|
+
export type BadgeAppearance = "filled" | "outline" | "ghost";
|
|
13
|
+
export type SpinnerVariant = "pulse" | "lucide-loader" | "lucide-loader-circle";
|
|
14
|
+
export type SpinnerSize = "sm" | "md" | "lg";
|
|
15
|
+
export type TextareaVariant = "default" | "ghost";
|
|
16
|
+
export type SidebarVariant = "sidebar" | "floating" | "inset";
|
|
17
|
+
export type SidebarMenuButtonSize = "default" | "sm" | "lg";
|
|
18
|
+
export type ToolbarSize = "sm" | "md" | "lg" | "xl";
|
package/types.js
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Variant and size vocabularies for theme-default.
|
|
3
|
+
*
|
|
4
|
+
* These types are theme-specific — a different theme may define
|
|
5
|
+
* entirely different variant names and size scales. Import them
|
|
6
|
+
* from `@dui/theme-default` for type safety when using this theme.
|
|
7
|
+
*/
|
|
8
|
+
export {};
|
package/typography.d.ts
ADDED
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import { type CSSResult } from "lit";
|
|
2
|
+
/**
|
|
3
|
+
* Single source of truth for the type scale.
|
|
4
|
+
*
|
|
5
|
+
* Each step bundles font-size, letter-spacing, and line-height so
|
|
6
|
+
* they are always set together. Smaller text gets wider tracking for
|
|
7
|
+
* legibility; larger text gets tighter tracking for visual density.
|
|
8
|
+
*
|
|
9
|
+
* The values reference CSS custom properties defined in tokens.css,
|
|
10
|
+
* so consumers can still override individual tokens at :root level.
|
|
11
|
+
*/
|
|
12
|
+
export declare const typeScale: {
|
|
13
|
+
readonly "2xs": {
|
|
14
|
+
readonly fontSize: "var(--font-size-2xs)";
|
|
15
|
+
readonly letterSpacing: "var(--letter-spacing-wider)";
|
|
16
|
+
readonly lineHeight: "var(--line-height-normal)";
|
|
17
|
+
};
|
|
18
|
+
readonly xs: {
|
|
19
|
+
readonly fontSize: "var(--font-size-xs)";
|
|
20
|
+
readonly letterSpacing: "var(--letter-spacing-wide)";
|
|
21
|
+
readonly lineHeight: "var(--line-height-normal)";
|
|
22
|
+
};
|
|
23
|
+
readonly sm: {
|
|
24
|
+
readonly fontSize: "var(--font-size-sm)";
|
|
25
|
+
readonly letterSpacing: "var(--letter-spacing-wide)";
|
|
26
|
+
readonly lineHeight: "var(--line-height-normal)";
|
|
27
|
+
};
|
|
28
|
+
readonly base: {
|
|
29
|
+
readonly fontSize: "var(--font-size-base)";
|
|
30
|
+
readonly letterSpacing: "var(--letter-spacing-normal)";
|
|
31
|
+
readonly lineHeight: "var(--line-height-normal)";
|
|
32
|
+
};
|
|
33
|
+
readonly md: {
|
|
34
|
+
readonly fontSize: "var(--font-size-md)";
|
|
35
|
+
readonly letterSpacing: "var(--letter-spacing-normal)";
|
|
36
|
+
readonly lineHeight: "var(--line-height-normal)";
|
|
37
|
+
};
|
|
38
|
+
readonly lg: {
|
|
39
|
+
readonly fontSize: "var(--font-size-lg)";
|
|
40
|
+
readonly letterSpacing: "var(--letter-spacing-tight)";
|
|
41
|
+
readonly lineHeight: "var(--line-height-snug)";
|
|
42
|
+
};
|
|
43
|
+
readonly xl: {
|
|
44
|
+
readonly fontSize: "var(--font-size-xl)";
|
|
45
|
+
readonly letterSpacing: "var(--letter-spacing-tight)";
|
|
46
|
+
readonly lineHeight: "var(--line-height-snug)";
|
|
47
|
+
};
|
|
48
|
+
readonly "2xl": {
|
|
49
|
+
readonly fontSize: "var(--font-size-2xl)";
|
|
50
|
+
readonly letterSpacing: "var(--letter-spacing-tighter)";
|
|
51
|
+
readonly lineHeight: "var(--line-height-tight)";
|
|
52
|
+
};
|
|
53
|
+
readonly "3xl": {
|
|
54
|
+
readonly fontSize: "var(--font-size-3xl)";
|
|
55
|
+
readonly letterSpacing: "var(--letter-spacing-tighter)";
|
|
56
|
+
readonly lineHeight: "var(--line-height-tight)";
|
|
57
|
+
};
|
|
58
|
+
readonly "4xl": {
|
|
59
|
+
readonly fontSize: "var(--font-size-4xl)";
|
|
60
|
+
readonly letterSpacing: "var(--letter-spacing-tightest)";
|
|
61
|
+
readonly lineHeight: "var(--line-height-tight)";
|
|
62
|
+
};
|
|
63
|
+
readonly "5xl": {
|
|
64
|
+
readonly fontSize: "var(--font-size-5xl)";
|
|
65
|
+
readonly letterSpacing: "var(--letter-spacing-tightest)";
|
|
66
|
+
readonly lineHeight: "var(--line-height-none)";
|
|
67
|
+
};
|
|
68
|
+
readonly "6xl": {
|
|
69
|
+
readonly fontSize: "var(--font-size-6xl)";
|
|
70
|
+
readonly letterSpacing: "var(--letter-spacing-tightest)";
|
|
71
|
+
readonly lineHeight: "var(--line-height-none)";
|
|
72
|
+
};
|
|
73
|
+
readonly "7xl": {
|
|
74
|
+
readonly fontSize: "var(--font-size-7xl)";
|
|
75
|
+
readonly letterSpacing: "var(--letter-spacing-tightest)";
|
|
76
|
+
readonly lineHeight: "var(--line-height-none)";
|
|
77
|
+
};
|
|
78
|
+
};
|
|
79
|
+
export type TypeSize = keyof typeof typeScale;
|
|
80
|
+
type TypeOptions = {
|
|
81
|
+
lineHeight?: string;
|
|
82
|
+
letterSpacing?: string;
|
|
83
|
+
};
|
|
84
|
+
/**
|
|
85
|
+
* Returns CSS declarations for font-size, letter-spacing, and line-height
|
|
86
|
+
* as a bundled type step. Use inside a Lit `css` tagged template.
|
|
87
|
+
*
|
|
88
|
+
* @example
|
|
89
|
+
* ```ts
|
|
90
|
+
* css`:host { ${type("sm")} }`
|
|
91
|
+
*
|
|
92
|
+
* // Expands to:
|
|
93
|
+
* // font-size: var(--font-size-sm);
|
|
94
|
+
* // letter-spacing: var(--letter-spacing-wide);
|
|
95
|
+
* // line-height: var(--line-height-normal);
|
|
96
|
+
* ```
|
|
97
|
+
*
|
|
98
|
+
* @example Override a single property
|
|
99
|
+
* ```ts
|
|
100
|
+
* css`:host { ${type("sm", { lineHeight: "var(--line-height-snug)" })} }`
|
|
101
|
+
* ```
|
|
102
|
+
*/
|
|
103
|
+
export declare function type(size: TypeSize, overrides?: TypeOptions): CSSResult;
|
|
104
|
+
export {};
|
package/typography.js
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import { unsafeCSS } from "lit";
|
|
2
|
+
/**
|
|
3
|
+
* Single source of truth for the type scale.
|
|
4
|
+
*
|
|
5
|
+
* Each step bundles font-size, letter-spacing, and line-height so
|
|
6
|
+
* they are always set together. Smaller text gets wider tracking for
|
|
7
|
+
* legibility; larger text gets tighter tracking for visual density.
|
|
8
|
+
*
|
|
9
|
+
* The values reference CSS custom properties defined in tokens.css,
|
|
10
|
+
* so consumers can still override individual tokens at :root level.
|
|
11
|
+
*/
|
|
12
|
+
export const typeScale = {
|
|
13
|
+
"2xs": {
|
|
14
|
+
fontSize: "var(--font-size-2xs)",
|
|
15
|
+
letterSpacing: "var(--letter-spacing-wider)",
|
|
16
|
+
lineHeight: "var(--line-height-normal)",
|
|
17
|
+
},
|
|
18
|
+
"xs": {
|
|
19
|
+
fontSize: "var(--font-size-xs)",
|
|
20
|
+
letterSpacing: "var(--letter-spacing-wide)",
|
|
21
|
+
lineHeight: "var(--line-height-normal)",
|
|
22
|
+
},
|
|
23
|
+
"sm": {
|
|
24
|
+
fontSize: "var(--font-size-sm)",
|
|
25
|
+
letterSpacing: "var(--letter-spacing-wide)",
|
|
26
|
+
lineHeight: "var(--line-height-normal)",
|
|
27
|
+
},
|
|
28
|
+
"base": {
|
|
29
|
+
fontSize: "var(--font-size-base)",
|
|
30
|
+
letterSpacing: "var(--letter-spacing-normal)",
|
|
31
|
+
lineHeight: "var(--line-height-normal)",
|
|
32
|
+
},
|
|
33
|
+
"md": {
|
|
34
|
+
fontSize: "var(--font-size-md)",
|
|
35
|
+
letterSpacing: "var(--letter-spacing-normal)",
|
|
36
|
+
lineHeight: "var(--line-height-normal)",
|
|
37
|
+
},
|
|
38
|
+
"lg": {
|
|
39
|
+
fontSize: "var(--font-size-lg)",
|
|
40
|
+
letterSpacing: "var(--letter-spacing-tight)",
|
|
41
|
+
lineHeight: "var(--line-height-snug)",
|
|
42
|
+
},
|
|
43
|
+
"xl": {
|
|
44
|
+
fontSize: "var(--font-size-xl)",
|
|
45
|
+
letterSpacing: "var(--letter-spacing-tight)",
|
|
46
|
+
lineHeight: "var(--line-height-snug)",
|
|
47
|
+
},
|
|
48
|
+
"2xl": {
|
|
49
|
+
fontSize: "var(--font-size-2xl)",
|
|
50
|
+
letterSpacing: "var(--letter-spacing-tighter)",
|
|
51
|
+
lineHeight: "var(--line-height-tight)",
|
|
52
|
+
},
|
|
53
|
+
"3xl": {
|
|
54
|
+
fontSize: "var(--font-size-3xl)",
|
|
55
|
+
letterSpacing: "var(--letter-spacing-tighter)",
|
|
56
|
+
lineHeight: "var(--line-height-tight)",
|
|
57
|
+
},
|
|
58
|
+
"4xl": {
|
|
59
|
+
fontSize: "var(--font-size-4xl)",
|
|
60
|
+
letterSpacing: "var(--letter-spacing-tightest)",
|
|
61
|
+
lineHeight: "var(--line-height-tight)",
|
|
62
|
+
},
|
|
63
|
+
"5xl": {
|
|
64
|
+
fontSize: "var(--font-size-5xl)",
|
|
65
|
+
letterSpacing: "var(--letter-spacing-tightest)",
|
|
66
|
+
lineHeight: "var(--line-height-none)",
|
|
67
|
+
},
|
|
68
|
+
"6xl": {
|
|
69
|
+
fontSize: "var(--font-size-6xl)",
|
|
70
|
+
letterSpacing: "var(--letter-spacing-tightest)",
|
|
71
|
+
lineHeight: "var(--line-height-none)",
|
|
72
|
+
},
|
|
73
|
+
"7xl": {
|
|
74
|
+
fontSize: "var(--font-size-7xl)",
|
|
75
|
+
letterSpacing: "var(--letter-spacing-tightest)",
|
|
76
|
+
lineHeight: "var(--line-height-none)",
|
|
77
|
+
},
|
|
78
|
+
};
|
|
79
|
+
/**
|
|
80
|
+
* Returns CSS declarations for font-size, letter-spacing, and line-height
|
|
81
|
+
* as a bundled type step. Use inside a Lit `css` tagged template.
|
|
82
|
+
*
|
|
83
|
+
* @example
|
|
84
|
+
* ```ts
|
|
85
|
+
* css`:host { ${type("sm")} }`
|
|
86
|
+
*
|
|
87
|
+
* // Expands to:
|
|
88
|
+
* // font-size: var(--font-size-sm);
|
|
89
|
+
* // letter-spacing: var(--letter-spacing-wide);
|
|
90
|
+
* // line-height: var(--line-height-normal);
|
|
91
|
+
* ```
|
|
92
|
+
*
|
|
93
|
+
* @example Override a single property
|
|
94
|
+
* ```ts
|
|
95
|
+
* css`:host { ${type("sm", { lineHeight: "var(--line-height-snug)" })} }`
|
|
96
|
+
* ```
|
|
97
|
+
*/
|
|
98
|
+
export function type(size, overrides) {
|
|
99
|
+
const t = typeScale[size];
|
|
100
|
+
const ls = overrides?.letterSpacing ?? t.letterSpacing;
|
|
101
|
+
const lh = overrides?.lineHeight ?? t.lineHeight;
|
|
102
|
+
return unsafeCSS(`font-size: ${t.fontSize}; letter-spacing: ${ls}; line-height: ${lh};`);
|
|
103
|
+
}
|