@libretexts/davis-core 1.1.0 → 1.2.0

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.
Files changed (14) hide show
  1. package/dist/base.v4.css +89 -0
  2. package/dist/theme.css +120 -46
  3. package/dist/tokens.d.ts +204 -43
  4. package/dist/tokens.d.ts.map +1 -1
  5. package/dist/tokens.js +212 -43
  6. package/dist/tokens.js.map +1 -1
  7. package/dist/variants.d.ts +469 -0
  8. package/dist/variants.d.ts.map +1 -1
  9. package/dist/variants.js +106 -0
  10. package/dist/variants.js.map +1 -1
  11. package/package.json +3 -5
  12. package/dist/base.css +0 -131
  13. package/dist/base.scoped.css +0 -195
  14. package/tailwind.preset.cjs +0 -205
package/dist/base.css DELETED
@@ -1,131 +0,0 @@
1
- /**
2
- * Davis Design System — Base Styles
3
- *
4
- * AUTO-GENERATED from tokens.ts — DO NOT EDIT MANUALLY
5
- * Run 'npm run generate:configs' to regenerate
6
- *
7
- * Framework-agnostic base CSS imported by consuming packages.
8
- * Contains CSS custom properties, typography defaults, heading hierarchy,
9
- * and focus-visible patterns.
10
- *
11
- * Does NOT include @tailwind directives — each consuming package adds those
12
- * to its own stylesheet.
13
- */
14
-
15
- @layer base {
16
- /* ─── CSS Custom Properties ─────────────────────────────────── */
17
-
18
- :root {
19
- /* Colors */
20
- --davis-color-primary: #127BC4;
21
- --davis-color-secondary: #0D8483;
22
- --davis-color-tertiary: #5F65F5;
23
- --davis-color-success: #338650;
24
- --davis-color-warning: #BB5C21;
25
- --davis-color-danger: #DC3838;
26
- --davis-color-neutral: #18181B;
27
-
28
- /* Surface */
29
- --davis-surface: #FFFFFF;
30
- --davis-surface-muted: #F9FAFB;
31
- --davis-surface-subtle: #F4F4F5;
32
-
33
- /* Typography */
34
- --davis-font-family: 'Atkinson Hyperlegible', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
35
-
36
- /* Border Radius */
37
- --davis-radius: 0.375rem;
38
-
39
- /* Focus Ring */
40
- --davis-ring-width: 2px;
41
- --davis-ring-color: #127BC4;
42
- --davis-ring-offset: 2px;
43
-
44
- /* Motion */
45
- --davis-motion-duration-fast: 150ms;
46
- --davis-motion-duration-default: 200ms;
47
- --davis-motion-duration-slow: 300ms;
48
- --davis-motion-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
49
- --davis-motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
50
- --davis-motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
51
-
52
- /* Target Size (WCAG 2.2) */
53
- --davis-target-size-minimum: 24px;
54
- --davis-target-size-comfortable: 44px;
55
- }
56
-
57
- /* ─── Typography Defaults ───────────────────────────────────── */
58
-
59
- html {
60
- font-family: var(--davis-font-family);
61
- font-size: 16px;
62
- -webkit-font-smoothing: antialiased;
63
- -moz-osx-font-smoothing: grayscale;
64
- }
65
-
66
- /* ─── Heading Hierarchy (Major Third Scale) ─────────────────── */
67
-
68
- h1 {
69
- font-size: 3.052rem;
70
- line-height: 3.25rem;
71
- font-weight: 700;
72
- letter-spacing: -0.025em;
73
- }
74
-
75
- h2 {
76
- font-size: 2.441rem;
77
- line-height: 2.75rem;
78
- font-weight: 700;
79
- letter-spacing: -0.02em;
80
- }
81
-
82
- h3 {
83
- font-size: 1.953rem;
84
- line-height: 2.25rem;
85
- font-weight: 600;
86
- }
87
-
88
- h4 {
89
- font-size: 1.563rem;
90
- line-height: 2rem;
91
- font-weight: 600;
92
- }
93
-
94
- h5 {
95
- font-size: 1.250rem;
96
- line-height: 1.75rem;
97
- font-weight: 600;
98
- }
99
-
100
- h6 {
101
- font-size: 1.250rem;
102
- line-height: 1.75rem;
103
- font-weight: 600;
104
- }
105
-
106
- /* ─── Focus Management ──────────────────────────────────────── */
107
-
108
- *:focus-visible {
109
- outline: var(--davis-ring-width) solid var(--davis-ring-color);
110
- outline-offset: var(--davis-ring-offset);
111
- }
112
-
113
- *:focus:not(:focus-visible) {
114
- outline: none;
115
- }
116
-
117
- /* ─── Reduced Motion ──────────────────────────────────────── */
118
- /* Disables transitions and animations for users who prefer */
119
- /* reduced motion. Respects prefers-reduced-motion: reduce. */
120
-
121
- @media (prefers-reduced-motion: reduce) {
122
- *,
123
- *::before,
124
- *::after {
125
- animation-duration: 0.01ms !important;
126
- animation-iteration-count: 1 !important;
127
- transition-duration: 0.01ms !important;
128
- scroll-behavior: auto !important;
129
- }
130
- }
131
- }
package/dist/base.scoped.css DELETED
@@ -1,195 +0,0 @@
1
- /**
2
- * Davis Design System — Scoped Base Styles
3
- *
4
- * AUTO-GENERATED from tokens.ts — DO NOT EDIT MANUALLY
5
- * Run 'npm run generate:configs' to regenerate
6
- *
7
- * Standalone variant of base.css where every rule is scoped under `.davis`.
8
- * This prevents style leakage into host applications.
9
- *
10
- * Used by the standalone CSS bundle — the full-integration base.css is unchanged.
11
- */
12
-
13
- /* ─── CSS Custom Properties (scoped to .davis) ───────────────── */
14
-
15
- .davis {
16
- /* Colors */
17
- --davis-color-primary: #127BC4;
18
- --davis-color-secondary: #0D8483;
19
- --davis-color-tertiary: #5F65F5;
20
- --davis-color-success: #338650;
21
- --davis-color-warning: #BB5C21;
22
- --davis-color-danger: #DC3838;
23
- --davis-color-neutral: #18181B;
24
-
25
- /* Surface */
26
- --davis-surface: #FFFFFF;
27
- --davis-surface-muted: #F9FAFB;
28
- --davis-surface-subtle: #F4F4F5;
29
-
30
- /* Typography */
31
- --davis-font-family: 'Atkinson Hyperlegible', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
32
-
33
- /* Border Radius */
34
- --davis-radius: 0.375rem;
35
-
36
- /* Focus Ring */
37
- --davis-ring-width: 2px;
38
- --davis-ring-color: #127BC4;
39
- --davis-ring-offset: 2px;
40
-
41
- /* Motion */
42
- --davis-motion-duration-fast: 150ms;
43
- --davis-motion-duration-default: 200ms;
44
- --davis-motion-duration-slow: 300ms;
45
- --davis-motion-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
46
- --davis-motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
47
- --davis-motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
48
-
49
- /* Target Size (WCAG 2.2) */
50
- --davis-target-size-minimum: 24px;
51
- --davis-target-size-comfortable: 44px;
52
- }
53
-
54
- /* ─── Scoped Preflight replacements ──────────────────────────── */
55
- /* These --tw-* variables are normally set by Tailwind's Preflight on *.
56
- Since we disable Preflight in standalone mode, we initialize them here
57
- so ring, shadow, transform, and filter utilities work correctly. */
58
-
59
- .davis *,
60
- .davis *::before,
61
- .davis *::after {
62
- box-sizing: border-box;
63
- border-width: 0;
64
- border-style: solid;
65
- border-color: currentColor;
66
- }
67
-
68
- .davis *,
69
- .davis ::before,
70
- .davis ::after {
71
- --tw-border-spacing-x: 0;
72
- --tw-border-spacing-y: 0;
73
- --tw-translate-x: 0;
74
- --tw-translate-y: 0;
75
- --tw-rotate: 0;
76
- --tw-skew-x: 0;
77
- --tw-skew-y: 0;
78
- --tw-scale-x: 1;
79
- --tw-scale-y: 1;
80
- --tw-pan-x: ;
81
- --tw-pan-y: ;
82
- --tw-pinch-zoom: ;
83
- --tw-scroll-snap-strictness: proximity;
84
- --tw-gradient-from-position: ;
85
- --tw-gradient-via-position: ;
86
- --tw-gradient-to-position: ;
87
- --tw-ordinal: ;
88
- --tw-slashed-zero: ;
89
- --tw-numeric-figure: ;
90
- --tw-numeric-spacing: ;
91
- --tw-numeric-fraction: ;
92
- --tw-ring-inset: ;
93
- --tw-ring-offset-width: 0px;
94
- --tw-ring-offset-color: #fff;
95
- --tw-ring-color: rgb(59 130 246 / 0.5);
96
- --tw-ring-offset-shadow: 0 0 #0000;
97
- --tw-ring-shadow: 0 0 #0000;
98
- --tw-shadow: 0 0 #0000;
99
- --tw-shadow-colored: 0 0 #0000;
100
- --tw-blur: ;
101
- --tw-brightness: ;
102
- --tw-contrast: ;
103
- --tw-grayscale: ;
104
- --tw-hue-rotate: ;
105
- --tw-invert: ;
106
- --tw-saturate: ;
107
- --tw-sepia: ;
108
- --tw-drop-shadow: ;
109
- --tw-backdrop-blur: ;
110
- --tw-backdrop-brightness: ;
111
- --tw-backdrop-contrast: ;
112
- --tw-backdrop-grayscale: ;
113
- --tw-backdrop-hue-rotate: ;
114
- --tw-backdrop-invert: ;
115
- --tw-backdrop-opacity: ;
116
- --tw-backdrop-saturate: ;
117
- --tw-backdrop-sepia: ;
118
- --tw-contain-size: ;
119
- --tw-contain-layout: ;
120
- --tw-contain-paint: ;
121
- --tw-contain-style: ;
122
- }
123
-
124
- /* ─── Typography Defaults (scoped) ───────────────────────────── */
125
-
126
- .davis {
127
- font-family: var(--davis-font-family);
128
- font-size: 16px;
129
- -webkit-font-smoothing: antialiased;
130
- -moz-osx-font-smoothing: grayscale;
131
- }
132
-
133
- /* ─── Heading Hierarchy (Major Third Scale, scoped) ──────────── */
134
-
135
- .davis h1 {
136
- font-size: 3.052rem;
137
- line-height: 3.25rem;
138
- font-weight: 700;
139
- letter-spacing: -0.025em;
140
- }
141
-
142
- .davis h2 {
143
- font-size: 2.441rem;
144
- line-height: 2.75rem;
145
- font-weight: 700;
146
- letter-spacing: -0.02em;
147
- }
148
-
149
- .davis h3 {
150
- font-size: 1.953rem;
151
- line-height: 2.25rem;
152
- font-weight: 600;
153
- }
154
-
155
- .davis h4 {
156
- font-size: 1.563rem;
157
- line-height: 2rem;
158
- font-weight: 600;
159
- }
160
-
161
- .davis h5 {
162
- font-size: 1.250rem;
163
- line-height: 1.75rem;
164
- font-weight: 600;
165
- }
166
-
167
- .davis h6 {
168
- font-size: 1.250rem;
169
- line-height: 1.75rem;
170
- font-weight: 600;
171
- }
172
-
173
- /* ─── Focus Management (scoped) ──────────────────────────────── */
174
-
175
- .davis *:focus-visible {
176
- outline: var(--davis-ring-width) solid var(--davis-ring-color);
177
- outline-offset: var(--davis-ring-offset);
178
- }
179
-
180
- .davis *:focus:not(:focus-visible) {
181
- outline: none;
182
- }
183
-
184
- /* ─── Reduced Motion (scoped) ────────────────────────────── */
185
-
186
- @media (prefers-reduced-motion: reduce) {
187
- .davis *,
188
- .davis *::before,
189
- .davis *::after {
190
- animation-duration: 0.01ms !important;
191
- animation-iteration-count: 1 !important;
192
- transition-duration: 0.01ms !important;
193
- scroll-behavior: auto !important;
194
- }
195
- }
package/tailwind.preset.cjs DELETED
@@ -1,205 +0,0 @@
1
- /**
2
- * Davis Design System — Tailwind CSS Preset
3
- *
4
- * AUTO-GENERATED from tokens.ts — DO NOT EDIT MANUALLY
5
- * Run 'npm run generate:configs' to regenerate
6
- *
7
- * The runtime source of truth for any app or package using the design system.
8
- * Import via: presets: [require("@libretexts/davis-core/tailwind.preset")]
9
- */
10
-
11
- /** @type {import('tailwindcss').Config} */
12
- module.exports = {
13
- theme: {
14
- // Top-level overrides (replace Tailwind defaults)
15
- fontSize: {
16
- "xs": [
17
- "0.640rem",
18
- {
19
- "lineHeight": "1rem"
20
- }
21
- ],
22
- "sm": [
23
- "0.800rem",
24
- {
25
- "lineHeight": "1.25rem"
26
- }
27
- ],
28
- "base": [
29
- "1rem",
30
- {
31
- "lineHeight": "1.5rem"
32
- }
33
- ],
34
- "lg": [
35
- "1.250rem",
36
- {
37
- "lineHeight": "1.75rem"
38
- }
39
- ],
40
- "xl": [
41
- "1.563rem",
42
- {
43
- "lineHeight": "2rem"
44
- }
45
- ],
46
- "2xl": [
47
- "1.953rem",
48
- {
49
- "lineHeight": "2.25rem"
50
- }
51
- ],
52
- "3xl": [
53
- "2.441rem",
54
- {
55
- "lineHeight": "2.75rem"
56
- }
57
- ],
58
- "4xl": [
59
- "3.052rem",
60
- {
61
- "lineHeight": "3.25rem"
62
- }
63
- ]
64
- },
65
-
66
- boxShadow: {
67
- "sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
68
- "DEFAULT": "0 1px 3px 0 rgb(0 0 0 / 0.07), 0 1px 2px -1px rgb(0 0 0 / 0.07)",
69
- "md": "0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05)",
70
- "lg": "0 10px 15px -3px rgb(0 0 0 / 0.07), 0 4px 6px -4px rgb(0 0 0 / 0.05)",
71
- "xl": "0 20px 25px -5px rgb(0 0 0 / 0.07), 0 8px 10px -6px rgb(0 0 0 / 0.05)",
72
- "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.15)",
73
- "inner": "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
74
- "none": "none"
75
- },
76
-
77
- extend: {
78
- colors: {
79
- primary: {
80
- DEFAULT: '#127BC4',
81
- 50: '#EFF6FC',
82
- 100: '#DCEEF9',
83
- 200: '#B3D9F2',
84
- 300: '#80BDE8',
85
- 400: '#4A9ED9',
86
- 500: '#127BC4',
87
- 600: '#0F6FA2',
88
- 700: '#0B4A76',
89
- 800: '#0A3D62',
90
- 900: '#083350',
91
- 950: '#052135',
92
- },
93
- secondary: {
94
- DEFAULT: '#0D8483',
95
- 50: '#F0FDFC',
96
- 100: '#CCFBF6',
97
- 200: '#9AF5ED',
98
- 300: '#5FE8DD',
99
- 400: '#2ECFCA',
100
- 500: '#0D8483',
101
- 600: '#0A6C6B',
102
- 700: '#0B5756',
103
- 800: '#0D4545',
104
- 900: '#103939',
105
- 950: '#052222',
106
- },
107
- tertiary: {
108
- DEFAULT: '#5F65F5',
109
- 50: '#EDEDFE',
110
- 100: '#E0E1FD',
111
- 200: '#C6C8FB',
112
- 300: '#A5A8F8',
113
- 400: '#8287F7',
114
- 500: '#5F65F5',
115
- 600: '#4A4FDB',
116
- 700: '#3B3FB8',
117
- 800: '#323695',
118
- 900: '#2C2F7A',
119
- 950: '#1B1D4D',
120
- },
121
- success: {
122
- DEFAULT: '#338650',
123
- 50: '#EEFBF3',
124
- 100: '#D6F5E2',
125
- 200: '#B0EBC8',
126
- 300: '#7CD9A5',
127
- 400: '#4DC37E',
128
- 500: '#338650',
129
- 600: '#2A7043',
130
- 700: '#235A37',
131
- 800: '#1F482E',
132
- 900: '#1A3B27',
133
- 950: '#0D2116',
134
- },
135
- warning: {
136
- DEFAULT: '#BB5C21',
137
- 50: '#FFF7ED',
138
- 100: '#FFEDD5',
139
- 200: '#FED7AA',
140
- 300: '#FDBA74',
141
- 400: '#F59542',
142
- 500: '#BB5C21',
143
- 600: '#A14D1B',
144
- 700: '#863E16',
145
- 800: '#6C3214',
146
- 900: '#592B14',
147
- 950: '#30130A',
148
- },
149
- danger: {
150
- DEFAULT: '#DC3838',
151
- 50: '#FEF2F2',
152
- 100: '#FEE2E2',
153
- 200: '#FECACA',
154
- 300: '#FCA5A5',
155
- 400: '#F07272',
156
- 500: '#DC3838',
157
- 600: '#C42828',
158
- 700: '#A32222',
159
- 800: '#872222',
160
- 900: '#712222',
161
- 950: '#3E0E0E',
162
- },
163
- neutral: {
164
- DEFAULT: '#18181B',
165
- 50: '#FAFAFA',
166
- 100: '#F4F4F5',
167
- 200: '#E4E4E7',
168
- 300: '#D4D4D8',
169
- 400: '#A1A1AA',
170
- 500: '#71717A',
171
- 600: '#52525B',
172
- 700: '#3F3F46',
173
- 800: '#27272A',
174
- 900: '#18181B',
175
- 950: '#09090B',
176
- },
177
- surface: {
178
- DEFAULT: '#FFFFFF',
179
- muted: '#F9FAFB',
180
- subtle: '#F4F4F5',
181
- },
182
- },
183
-
184
- fontFamily: {
185
- sans: ["Atkinson Hyperlegible","ui-sans-serif","system-ui","-apple-system","BlinkMacSystemFont","Segoe UI","Roboto","Helvetica Neue","Arial","sans-serif"],
186
- },
187
-
188
- ringColor: {
189
- DEFAULT: '#127BC4',
190
- },
191
-
192
- borderRadius: {
193
- "none": "0",
194
- "sm": "0.125rem",
195
- "DEFAULT": "0.375rem",
196
- "md": "0.375rem",
197
- "lg": "0.5rem",
198
- "xl": "0.75rem",
199
- "2xl": "1rem",
200
- "3xl": "1.5rem",
201
- "full": "9999px"
202
- },
203
- },
204
- },
205
- };