@pantheon-systems/pds-toolkit-react 2.0.0-alpha.6 → 2.0.0-alpha.8

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 (22) hide show
  1. package/dist/components/buttons/CloseButton/CloseButton.d.ts +2 -2
  2. package/dist/components/cards/Card/Card.d.ts +1 -1
  3. package/dist/components/notifications/Banner/Banner.d.ts +6 -2
  4. package/dist/components/notifications/SectionMessage/SectionMessage.d.ts +6 -2
  5. package/dist/components/notifications/Toaster/Toaster.d.ts +2 -2
  6. package/dist/css/component-css/pds-banner.css +1 -1
  7. package/dist/css/component-css/pds-card.css +1 -1
  8. package/dist/css/component-css/pds-index.css +2 -2
  9. package/dist/css/component-css/pds-section-message.css +1 -1
  10. package/dist/css/component-css/pds-toaster.css +1 -1
  11. package/dist/css/pds-components.css +2 -2
  12. package/dist/css/pds-core.css +1 -1
  13. package/dist/index.css +1 -1
  14. package/dist/index.d.ts +1 -0
  15. package/dist/index.js +1203 -1179
  16. package/dist/index.js.map +1 -1
  17. package/dist/libs/types/custom-types.d.ts +1 -0
  18. package/package.json +15 -11
  19. package/tailwind/README.md +211 -0
  20. package/tailwind/TESTING.md +457 -0
  21. package/tailwind/v3/preset.cjs +238 -0
  22. package/tailwind/v4/theme.css +211 -0
package/tailwind/v4/theme.css ADDED
@@ -0,0 +1,211 @@
1
+ /**
2
+ * PDS Tailwind v4 Theme
3
+ *
4
+ * Maps Pantheon Design System tokens to Tailwind CSS v4 utilities via @theme.
5
+ * Replaces Tailwind's default color, spacing, and typography scales with PDS values.
6
+ *
7
+ * Requirements:
8
+ * - pds-core.css must be imported before this file (provides --pds-* CSS variables)
9
+ * - Tailwind v4.x
10
+ *
11
+ * Usage in your global CSS entry point:
12
+ *
13
+ * @import 'tailwindcss/theme' layer(theme);
14
+ * @import 'tailwindcss/utilities' layer(utilities);
15
+ * @import '@pantheon-systems/pds-toolkit-react/tailwind/v4/theme.css';
16
+ *
17
+ * And in your root layout (JS import, before globals.css):
18
+ * import '@pantheon-systems/pds-toolkit-react/css/pds-core.css';
19
+ */
20
+
21
+ @theme {
22
+ /* ── Reset Tailwind defaults we are replacing ──────────────────────────── */
23
+ --color-*: initial;
24
+ --spacing-*: initial;
25
+ --font-*: initial;
26
+ --text-*: initial;
27
+ --font-weight-*: initial;
28
+ --leading-*: initial;
29
+ --tracking-*: initial;
30
+ --radius-*: initial;
31
+ --border-*: initial;
32
+ --z-*: initial;
33
+ --max-w-*: initial;
34
+
35
+ /* ── Colors ────────────────────────────────────────────────────────────── */
36
+
37
+ /* Backgrounds — use as bg-bg-default, bg-bg-secondary, bg-bg-reverse */
38
+ --color-bg-default: var(--pds-color-bg-default);
39
+ --color-bg-secondary: var(--pds-color-bg-default-secondary);
40
+ --color-bg-reverse: var(--pds-color-bg-reverse);
41
+
42
+ /* Foregrounds */
43
+ --color-fg-default: var(--pds-color-fg-default);
44
+ --color-fg-secondary: var(--pds-color-fg-default-secondary);
45
+ --color-fg-reverse: var(--pds-color-fg-reverse);
46
+
47
+ /* Borders — use as border-border-default, border-border-input, etc. */
48
+ --color-border-default: var(--pds-color-border-default);
49
+ --color-border-input: var(--pds-color-border-input);
50
+ --color-border-separator: var(--pds-color-border-separator);
51
+ --color-border-brand: var(--pds-color-border-brand);
52
+
53
+ /* Interactive */
54
+ --color-interactive-focus: var(--pds-color-interactive-focus);
55
+ --color-interactive-bg-hover: var(--pds-color-interactive-background-hover);
56
+ --color-interactive-bg-active: var(--pds-color-interactive-background-active);
57
+ --color-interactive-link: var(--pds-color-interactive-link-default);
58
+ --color-interactive-link-hover: var(--pds-color-interactive-link-hover);
59
+ --color-interactive-link-active: var(--pds-color-interactive-link-active);
60
+ --color-interactive-link-visited: var(--pds-color-interactive-link-visited);
61
+ --color-interactive-reverse-focus: var(--pds-color-interactive-reverse-focus);
62
+ --color-interactive-reverse-link: var(
63
+ --pds-color-interactive-reverse-link-default
64
+ );
65
+ --color-interactive-reverse-link-hover: var(
66
+ --pds-color-interactive-reverse-link-hover
67
+ );
68
+ --color-interactive-reverse-link-active: var(
69
+ --pds-color-interactive-reverse-link-active
70
+ );
71
+ --color-interactive-reverse-link-visited: var(
72
+ --pds-color-interactive-reverse-link-visited
73
+ );
74
+
75
+ /* Status */
76
+ --color-status-info-background: var(--pds-color-status-info-background);
77
+ --color-status-info-foreground: var(--pds-color-status-info-foreground);
78
+ --color-status-info-border: var(--pds-color-status-info-border);
79
+ --color-status-info-dot: var(--pds-color-status-info-dot);
80
+ --color-status-success-background: var(--pds-color-status-success-background);
81
+ --color-status-success-foreground: var(--pds-color-status-success-foreground);
82
+ --color-status-success-border: var(--pds-color-status-success-border);
83
+ --color-status-success-dot: var(--pds-color-status-success-dot);
84
+ --color-status-warning-background: var(--pds-color-status-warning-background);
85
+ --color-status-warning-foreground: var(--pds-color-status-warning-foreground);
86
+ --color-status-warning-border: var(--pds-color-status-warning-border);
87
+ --color-status-warning-dot: var(--pds-color-status-warning-dot);
88
+ --color-status-critical-background: var(
89
+ --pds-color-status-critical-background
90
+ );
91
+ --color-status-critical-foreground: var(
92
+ --pds-color-status-critical-foreground
93
+ );
94
+ --color-status-critical-border: var(--pds-color-status-critical-border);
95
+ --color-status-critical-dot: var(--pds-color-status-critical-dot);
96
+ --color-status-discovery-background: var(
97
+ --pds-color-status-discovery-background
98
+ );
99
+ --color-status-discovery-foreground: var(
100
+ --pds-color-status-discovery-foreground
101
+ );
102
+ --color-status-discovery-border: var(--pds-color-status-discovery-border);
103
+ --color-status-discovery-dot: var(--pds-color-status-discovery-dot);
104
+
105
+ /* Overlay */
106
+ --color-overlay: var(--pds-color-overlay);
107
+
108
+ /* Data visualization */
109
+ --color-datavis-1: var(--pds-color-datavis-1);
110
+ --color-datavis-2: var(--pds-color-datavis-2);
111
+ --color-datavis-3: var(--pds-color-datavis-3);
112
+ --color-datavis-4: var(--pds-color-datavis-4);
113
+ --color-datavis-5: var(--pds-color-datavis-5);
114
+
115
+ /* ── Spacing ───────────────────────────────────────────────────────────── */
116
+ /* PDS named scale */
117
+ --spacing-5xs: var(--pds-spacing-5xs);
118
+ --spacing-4xs: var(--pds-spacing-4xs);
119
+ --spacing-3xs: var(--pds-spacing-3xs);
120
+ --spacing-2xs: var(--pds-spacing-2xs);
121
+ --spacing-xs: var(--pds-spacing-xs);
122
+ --spacing-s: var(--pds-spacing-s);
123
+ --spacing-m: var(--pds-spacing-m);
124
+ --spacing-l: var(--pds-spacing-l);
125
+ --spacing-xl: var(--pds-spacing-xl);
126
+ --spacing-2xl: var(--pds-spacing-2xl);
127
+ --spacing-3xl: var(--pds-spacing-3xl);
128
+ --spacing-4xl: var(--pds-spacing-4xl);
129
+ --spacing-5xl: var(--pds-spacing-5xl);
130
+ --spacing-6xl: var(--pds-spacing-6xl);
131
+ --spacing-7xl: var(--pds-spacing-7xl);
132
+ --spacing-8xl: var(--pds-spacing-8xl);
133
+ --spacing-9xl: var(--pds-spacing-9xl);
134
+ /* Numeric aliases → PDS tokens (p-4 = p-m, p-6 = p-xl, etc.) */
135
+ --spacing-0\.5: var(--pds-spacing-5xs);
136
+ --spacing-1: var(--pds-spacing-4xs);
137
+ --spacing-1\.5: var(--pds-spacing-3xs);
138
+ --spacing-2: var(--pds-spacing-2xs);
139
+ --spacing-2\.5: var(--pds-spacing-xs);
140
+ --spacing-3: var(--pds-spacing-s);
141
+ --spacing-4: var(--pds-spacing-m);
142
+ --spacing-5: var(--pds-spacing-l);
143
+ --spacing-6: var(--pds-spacing-xl);
144
+ --spacing-8: var(--pds-spacing-2xl);
145
+ --spacing-10: var(--pds-spacing-3xl);
146
+ --spacing-12: var(--pds-spacing-4xl);
147
+ --spacing-16: var(--pds-spacing-5xl);
148
+ --spacing-20: var(--pds-spacing-6xl);
149
+ --spacing-24: var(--pds-spacing-7xl);
150
+ --spacing-32: var(--pds-spacing-8xl);
151
+ --spacing-40: var(--pds-spacing-9xl);
152
+
153
+ /* ── Typography ────────────────────────────────────────────────────────── */
154
+ /* Font families are intentionally excluded. PDS applies font families
155
+ automatically via pds-core.css (body, headings, code blocks, etc.).
156
+ Teams should not override font families via Tailwind utilities. */
157
+
158
+ --text-xs: var(--pds-typography-size-xs);
159
+ --text-s: var(--pds-typography-size-s);
160
+ --text-m: var(--pds-typography-size-m);
161
+ --text-l: var(--pds-typography-size-l);
162
+ --text-xl: var(--pds-typography-size-xl);
163
+ --text-2xl: var(--pds-typography-size-2xl);
164
+ --text-3xl: var(--pds-typography-size-3xl);
165
+ --text-4xl: var(--pds-typography-size-4xl);
166
+ --text-5xl: var(--pds-typography-size-5xl);
167
+ --text-6xl: var(--pds-typography-size-6xl);
168
+ --text-7xl: var(--pds-typography-size-7xl);
169
+ --text-8xl: var(--pds-typography-size-8xl);
170
+ --text-9xl: var(--pds-typography-size-9xl);
171
+
172
+ --font-weight-light: var(--pds-typography-fw-light);
173
+ --font-weight-normal: var(--pds-typography-fw-regular);
174
+ --font-weight-medium: var(--pds-typography-fw-medium);
175
+ --font-weight-semibold: var(--pds-typography-fw-semibold);
176
+ --font-weight-bold: var(--pds-typography-fw-bold);
177
+
178
+ --leading-s: var(--pds-typography-lh-s);
179
+ --leading-m: var(--pds-typography-lh-m);
180
+ --leading-l: var(--pds-typography-lh-l);
181
+ --leading-xl: var(--pds-typography-lh-xl);
182
+
183
+ --tracking-s: var(--pds-typography-ls-s);
184
+ --tracking-m: var(--pds-typography-ls-m);
185
+ --tracking-l: var(--pds-typography-ls-l);
186
+ --tracking-xl: var(--pds-typography-ls-xl);
187
+
188
+ /* ── Border ────────────────────────────────────────────────────────────── */
189
+ --radius-DEFAULT: var(--pds-border-radius-default);
190
+ --radius-button: var(--pds-border-radius-button);
191
+ --radius-input: var(--pds-border-radius-input);
192
+ --radius-container: var(--pds-border-radius-container);
193
+ --radius-bar: var(--pds-border-radius-bar);
194
+
195
+ --border-DEFAULT: var(--pds-border-width-default);
196
+ --border-thicker: var(--pds-border-width-thicker);
197
+
198
+ /* ── Z-index ───────────────────────────────────────────────────────────── */
199
+ --z-navigation: var(--pds-z-index-navigation);
200
+ --z-dropdown: var(--pds-z-index-dropdown);
201
+ --z-notifications: var(--pds-z-index-notifications);
202
+ --z-overlay: var(--pds-z-index-overlay);
203
+ --z-modal: var(--pds-z-index-modal);
204
+ --z-max: var(--pds-z-index-max);
205
+
206
+ /* ── Max Width ─────────────────────────────────────────────────────────── */
207
+ --max-w-narrow: var(--pds-container-max-width-narrow);
208
+ --max-w-standard: var(--pds-container-max-width-standard);
209
+ --max-w-wide: var(--pds-container-max-width-wide);
210
+ --max-w-x-wide: var(--pds-container-max-width-x-wide);
211
+ }