@stratixlabs/core 1.8.2 → 1.8.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 +14 -14
- package/bin/stratix.js +26 -26
- package/package.json +1 -1
- package/src/consumption/tailwind.config.js +44 -0
package/README.md
CHANGED
|
@@ -131,22 +131,22 @@ Import the full system or valid subsets from the package:
|
|
|
131
131
|
```
|
|
132
132
|
|
|
133
133
|
### 2. Tailwind CSS
|
|
134
|
-
Stratix alimenta o Tailwind v4 via `@theme`. Não substitui o Tailwind.
|
|
134
|
+
Stratix alimenta o Tailwind v4 via `@theme`. Não substitui o Tailwind.
|
|
135
135
|
```css
|
|
136
|
-
@import "@stratixlabs/core/stratix.css";
|
|
137
|
-
@import "tailwindcss";
|
|
138
|
-
|
|
139
|
-
@theme {
|
|
140
|
-
--color-brand-300: var(--brand-300);
|
|
141
|
-
--color-brand-500: var(--brand-500);
|
|
142
|
-
--color-brand-700: var(--brand-700);
|
|
143
|
-
--color-surface: var(--color-surface);
|
|
144
|
-
--color-text: var(--color-text-primary);
|
|
145
|
-
--spacing-4: var(--space-4);
|
|
146
|
-
--radius-md: var(--radius-md);
|
|
147
|
-
}
|
|
136
|
+
@import "@stratixlabs/core/stratix.css";
|
|
137
|
+
@import "tailwindcss";
|
|
138
|
+
|
|
139
|
+
@theme {
|
|
140
|
+
--color-brand-300: var(--brand-300);
|
|
141
|
+
--color-brand-500: var(--brand-500);
|
|
142
|
+
--color-brand-700: var(--brand-700);
|
|
143
|
+
--color-surface: var(--color-surface);
|
|
144
|
+
--color-text: var(--color-text-primary);
|
|
145
|
+
--spacing-4: var(--space-4);
|
|
146
|
+
--radius-md: var(--radius-md);
|
|
147
|
+
}
|
|
148
148
|
```
|
|
149
|
-
*Veja o Quickstart Next.js + Tailwind para um exemplo completo e **Consumption** para o arquivo de referência `src/consumption/tailwind-v4.css`.*
|
|
149
|
+
*Veja o Quickstart Next.js + Tailwind para um exemplo completo e **Consumption** para o arquivo de referência `src/consumption/tailwind-v4.css`.*
|
|
150
150
|
|
|
151
151
|
### 3. JavaScript / TypeScript
|
|
152
152
|
Import tokens as a JSON object:
|
package/bin/stratix.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
#!/usr/bin/env node
|
|
1
|
+
#!/usr/bin/env node
|
|
2
2
|
|
|
3
3
|
const fs = require('fs');
|
|
4
4
|
const path = require('path');
|
|
@@ -345,31 +345,31 @@ export const Button = styled.button\`
|
|
|
345
345
|
}
|
|
346
346
|
\`;
|
|
347
347
|
`,
|
|
348
|
-
'tailwind-v4.css': `/*
|
|
349
|
-
Tailwind CSS v4 Consumption Example
|
|
350
|
-
Map Stratix tokens to Tailwind via @theme.
|
|
351
|
-
*/
|
|
352
|
-
|
|
353
|
-
@import "@stratixlabs/core/stratix.css";
|
|
354
|
-
@import "tailwindcss";
|
|
355
|
-
|
|
356
|
-
@theme {
|
|
357
|
-
--color-brand-300: var(--brand-300);
|
|
358
|
-
--color-brand-500: var(--brand-500);
|
|
359
|
-
--color-brand-700: var(--brand-700);
|
|
360
|
-
--color-surface: var(--color-surface);
|
|
361
|
-
--color-text: var(--color-text-primary);
|
|
362
|
-
--spacing-1: var(--space-1);
|
|
363
|
-
--spacing-2: var(--space-2);
|
|
364
|
-
--spacing-3: var(--space-3);
|
|
365
|
-
--spacing-4: var(--space-4);
|
|
366
|
-
--radius-sm: var(--radius-sm);
|
|
367
|
-
--radius-md: var(--radius-md);
|
|
368
|
-
--radius-lg: var(--radius-lg);
|
|
369
|
-
--font-family-body: var(--font-family-base);
|
|
370
|
-
--font-family-heading: var(--font-family-heading);
|
|
371
|
-
}
|
|
372
|
-
`
|
|
348
|
+
'tailwind-v4.css': `/*
|
|
349
|
+
Tailwind CSS v4 Consumption Example
|
|
350
|
+
Map Stratix tokens to Tailwind via @theme.
|
|
351
|
+
*/
|
|
352
|
+
|
|
353
|
+
@import "@stratixlabs/core/stratix.css";
|
|
354
|
+
@import "tailwindcss";
|
|
355
|
+
|
|
356
|
+
@theme {
|
|
357
|
+
--color-brand-300: var(--brand-300);
|
|
358
|
+
--color-brand-500: var(--brand-500);
|
|
359
|
+
--color-brand-700: var(--brand-700);
|
|
360
|
+
--color-surface: var(--color-surface);
|
|
361
|
+
--color-text: var(--color-text-primary);
|
|
362
|
+
--spacing-1: var(--space-1);
|
|
363
|
+
--spacing-2: var(--space-2);
|
|
364
|
+
--spacing-3: var(--space-3);
|
|
365
|
+
--spacing-4: var(--space-4);
|
|
366
|
+
--radius-sm: var(--radius-sm);
|
|
367
|
+
--radius-md: var(--radius-md);
|
|
368
|
+
--radius-lg: var(--radius-lg);
|
|
369
|
+
--font-family-body: var(--font-family-base);
|
|
370
|
+
--font-family-heading: var(--font-family-heading);
|
|
371
|
+
}
|
|
372
|
+
`
|
|
373
373
|
};
|
|
374
374
|
|
|
375
375
|
console.log('');
|
package/package.json
CHANGED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Tailwind CSS Consumption
|
|
3
|
+
Maps Stratix tokens to Tailwind theme configuration.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
/** @type {import('tailwindcss').Config} */
|
|
7
|
+
module.exports = {
|
|
8
|
+
content: ["./src/**/*.{html,js}"],
|
|
9
|
+
theme: {
|
|
10
|
+
extend: {
|
|
11
|
+
colors: {
|
|
12
|
+
brand: {
|
|
13
|
+
300: "var(--brand-300)",
|
|
14
|
+
500: "var(--brand-500)",
|
|
15
|
+
700: "var(--brand-700)",
|
|
16
|
+
},
|
|
17
|
+
neutral: {
|
|
18
|
+
0: "var(--neutral-0)",
|
|
19
|
+
900: "var(--neutral-900)",
|
|
20
|
+
},
|
|
21
|
+
surface: "var(--color-surface)",
|
|
22
|
+
text: "var(--color-text-primary)",
|
|
23
|
+
},
|
|
24
|
+
spacing: {
|
|
25
|
+
1: "var(--space-1)",
|
|
26
|
+
2: "var(--space-2)",
|
|
27
|
+
3: "var(--space-3)",
|
|
28
|
+
4: "var(--space-4)",
|
|
29
|
+
5: "var(--space-5)",
|
|
30
|
+
6: "var(--space-6)",
|
|
31
|
+
},
|
|
32
|
+
borderRadius: {
|
|
33
|
+
sm: "var(--radius-sm)",
|
|
34
|
+
md: "var(--radius-md)",
|
|
35
|
+
lg: "var(--radius-lg)",
|
|
36
|
+
},
|
|
37
|
+
fontFamily: {
|
|
38
|
+
body: "var(--font-family-base)",
|
|
39
|
+
heading: "var(--font-family-heading)",
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
plugins: [],
|
|
44
|
+
};
|