@podoba/tailwind 0.0.10 → 0.0.12
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/package.json +7 -15
- package/src/theme.css +139 -0
- package/src/index.ts +0 -152
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@podoba/tailwind",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.12",
|
|
4
4
|
"type": "module",
|
|
5
|
-
"description": "podoba Tailwind
|
|
5
|
+
"description": "podoba Tailwind v4 theme — binds @podoba/tokens CSS custom properties to Tailwind's @theme. Import after `@import \"tailwindcss\"`.",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
8
8
|
"url": "git+https://github.com/graphic-standard/podoba.git",
|
|
@@ -10,10 +10,10 @@
|
|
|
10
10
|
},
|
|
11
11
|
"homepage": "https://github.com/graphic-standard/podoba#readme",
|
|
12
12
|
"bugs": "https://github.com/graphic-standard/podoba/issues",
|
|
13
|
-
"
|
|
14
|
-
"types": "./src/index.ts",
|
|
13
|
+
"style": "./src/theme.css",
|
|
15
14
|
"exports": {
|
|
16
|
-
".": "./src/
|
|
15
|
+
".": "./src/theme.css",
|
|
16
|
+
"./theme.css": "./src/theme.css"
|
|
17
17
|
},
|
|
18
18
|
"files": [
|
|
19
19
|
"src"
|
|
@@ -21,18 +21,10 @@
|
|
|
21
21
|
"publishConfig": {
|
|
22
22
|
"access": "public"
|
|
23
23
|
},
|
|
24
|
-
"scripts": {
|
|
25
|
-
"typecheck": "tsc --build"
|
|
26
|
-
},
|
|
27
24
|
"dependencies": {
|
|
28
|
-
"@tailwindcss/typography": "0.5.
|
|
25
|
+
"@tailwindcss/typography": "0.5.20"
|
|
29
26
|
},
|
|
30
27
|
"peerDependencies": {
|
|
31
|
-
"tailwindcss": "^
|
|
32
|
-
},
|
|
33
|
-
"devDependencies": {
|
|
34
|
-
"tailwindcss": "3.4.19",
|
|
35
|
-
"typescript": "^5.9.3",
|
|
36
|
-
"@types/bun": "^1.3.3"
|
|
28
|
+
"tailwindcss": "^4.0.0"
|
|
37
29
|
}
|
|
38
30
|
}
|
package/src/theme.css
ADDED
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
/* @podoba/tailwind — shared Tailwind v4 theme for the design system.
|
|
2
|
+
*
|
|
3
|
+
* Binds @podoba/tokens' CSS custom properties (see @podoba/tokens/variables.css)
|
|
4
|
+
* to Tailwind's theme, so primitives reference `bg-surface` / `text-fg-muted` /
|
|
5
|
+
* `text-heading2` / `rounded-panel` and resolve to `var(--…)`.
|
|
6
|
+
*
|
|
7
|
+
* Consume it AFTER `@import "tailwindcss"` and the token variables:
|
|
8
|
+
*
|
|
9
|
+
* @import "tailwindcss";
|
|
10
|
+
* @import "@podoba/tokens/variables.css";
|
|
11
|
+
* @import "@podoba/tailwind";
|
|
12
|
+
*
|
|
13
|
+
* This is CONTENT-LESS on purpose: a shared theme must not hardcode source
|
|
14
|
+
* globs. Each consuming app declares its own `@source` directives.
|
|
15
|
+
*
|
|
16
|
+
* `@theme inline` is REQUIRED here: the theme keys share names with the tokens
|
|
17
|
+
* (e.g. theme `--color-surface` ← token `--color-surface`). `inline` makes the
|
|
18
|
+
* utilities emit `var(--color-surface)` directly instead of re-declaring a
|
|
19
|
+
* self-referential theme variable, so they resolve against @podoba/tokens.
|
|
20
|
+
*
|
|
21
|
+
* NOTE: custom scale keys here (`--text-micro`…`--text-display`/`--text-heading1-5`,
|
|
22
|
+
* `--spacing-nav-x`, `--radius-panel`) are mirrored in @podoba/react's uic
|
|
23
|
+
* tailwind-merge config so conflicting utilities dedupe correctly. Keep in sync.
|
|
24
|
+
*/
|
|
25
|
+
|
|
26
|
+
@plugin "@tailwindcss/typography";
|
|
27
|
+
|
|
28
|
+
@theme inline {
|
|
29
|
+
/* colors */
|
|
30
|
+
--color-brand: var(--color-brand-primary);
|
|
31
|
+
--color-brand-primary: var(--color-brand-primary);
|
|
32
|
+
--color-brand-secondary: var(--color-brand-secondary);
|
|
33
|
+
--color-brand-green: var(--color-brand-green);
|
|
34
|
+
|
|
35
|
+
--color-surface: var(--color-surface);
|
|
36
|
+
--color-surface-muted: var(--color-surface-muted);
|
|
37
|
+
--color-surface-card: var(--color-surface-card);
|
|
38
|
+
--color-surface-inverted: var(--color-surface-inverted);
|
|
39
|
+
--color-surface-placeholder: var(--color-surface-placeholder);
|
|
40
|
+
|
|
41
|
+
--color-fg: var(--color-fg);
|
|
42
|
+
--color-fg-muted: var(--color-fg-muted);
|
|
43
|
+
--color-fg-subtle: var(--color-fg-subtle);
|
|
44
|
+
--color-fg-inverted: var(--color-fg-inverted);
|
|
45
|
+
|
|
46
|
+
--color-accent-strong: var(--color-accent-strong);
|
|
47
|
+
--color-accent-yellow: var(--color-accent-yellow);
|
|
48
|
+
--color-accent-mint: var(--color-accent-mint);
|
|
49
|
+
--color-accent-green-light: var(--color-accent-green-light);
|
|
50
|
+
--color-accent-pink: var(--color-accent-pink);
|
|
51
|
+
|
|
52
|
+
--color-neutral-600: var(--color-neutral-600);
|
|
53
|
+
|
|
54
|
+
--color-border: var(--color-border);
|
|
55
|
+
|
|
56
|
+
--color-danger: var(--color-danger);
|
|
57
|
+
--color-danger-fg: var(--color-danger-fg);
|
|
58
|
+
|
|
59
|
+
--color-success: var(--color-success);
|
|
60
|
+
--color-success-fg: var(--color-success-fg);
|
|
61
|
+
|
|
62
|
+
--color-ring: var(--color-ring);
|
|
63
|
+
|
|
64
|
+
/* border radius */
|
|
65
|
+
--radius-sm: var(--radius-sm);
|
|
66
|
+
--radius-md: var(--radius-md);
|
|
67
|
+
--radius-lg: var(--radius-lg);
|
|
68
|
+
--radius-xl: var(--radius-xl);
|
|
69
|
+
--radius-2xl: var(--radius-2xl);
|
|
70
|
+
--radius-panel: var(--radius-panel);
|
|
71
|
+
|
|
72
|
+
/* spacing (named keys; the numeric p-4/gap-2 scale is untouched) */
|
|
73
|
+
--spacing-xs: var(--space-xs);
|
|
74
|
+
--spacing-sm: var(--space-sm);
|
|
75
|
+
--spacing-md: var(--space-md);
|
|
76
|
+
--spacing-lg: var(--space-lg);
|
|
77
|
+
--spacing-xl: var(--space-xl);
|
|
78
|
+
--spacing-nav-x: var(--space-nav-x);
|
|
79
|
+
|
|
80
|
+
/* font families */
|
|
81
|
+
--font-sans: var(--font-sans);
|
|
82
|
+
--font-mono: var(--font-mono);
|
|
83
|
+
|
|
84
|
+
/* font sizes — size-only ramp */
|
|
85
|
+
--text-micro: var(--font-size-micro);
|
|
86
|
+
--text-caption: var(--font-size-caption);
|
|
87
|
+
--text-label: var(--font-size-label);
|
|
88
|
+
--text-compact: var(--font-size-compact);
|
|
89
|
+
--text-callout: var(--font-size-callout);
|
|
90
|
+
--text-body: var(--font-size-body);
|
|
91
|
+
--text-subtitle: var(--font-size-subtitle);
|
|
92
|
+
--text-title: var(--font-size-title);
|
|
93
|
+
--text-headline: var(--font-size-headline);
|
|
94
|
+
--text-display: var(--font-size-display);
|
|
95
|
+
|
|
96
|
+
/* font sizes — heading ramp (size + paired line-height) */
|
|
97
|
+
--text-heading1: var(--font-size-heading1);
|
|
98
|
+
--text-heading1--line-height: var(--line-height-heading1);
|
|
99
|
+
--text-heading2: var(--font-size-heading2);
|
|
100
|
+
--text-heading2--line-height: var(--line-height-heading2);
|
|
101
|
+
--text-heading3: var(--font-size-heading3);
|
|
102
|
+
--text-heading3--line-height: var(--line-height-heading3);
|
|
103
|
+
--text-heading4: var(--font-size-heading4);
|
|
104
|
+
--text-heading4--line-height: var(--line-height-heading4);
|
|
105
|
+
--text-heading5: var(--font-size-heading5);
|
|
106
|
+
--text-heading5--line-height: var(--line-height-heading5);
|
|
107
|
+
|
|
108
|
+
/* letter spacing */
|
|
109
|
+
--tracking-tight: var(--tracking-tight);
|
|
110
|
+
--tracking-normal: var(--tracking-normal);
|
|
111
|
+
--tracking-wide: var(--tracking-wide);
|
|
112
|
+
--tracking-wider: var(--tracking-wider);
|
|
113
|
+
|
|
114
|
+
/* animations */
|
|
115
|
+
--animate-expand-cta: expand-cta 220ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
116
|
+
--animate-lightbox-in: lightbox-in 0.3s ease-out;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
@keyframes expand-cta {
|
|
120
|
+
from {
|
|
121
|
+
opacity: 0;
|
|
122
|
+
transform: translateY(-2px);
|
|
123
|
+
}
|
|
124
|
+
to {
|
|
125
|
+
opacity: 1;
|
|
126
|
+
transform: translateY(0);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
@keyframes lightbox-in {
|
|
131
|
+
from {
|
|
132
|
+
opacity: 0;
|
|
133
|
+
transform: translateX(24%);
|
|
134
|
+
}
|
|
135
|
+
to {
|
|
136
|
+
opacity: 1;
|
|
137
|
+
transform: translateX(0);
|
|
138
|
+
}
|
|
139
|
+
}
|
package/src/index.ts
DELETED
|
@@ -1,152 +0,0 @@
|
|
|
1
|
-
// @podoba/tailwind — shared Tailwind preset for the design system.
|
|
2
|
-
//
|
|
3
|
-
// Binds @podoba/tokens' CSS custom properties (see @podoba/tokens/variables.css)
|
|
4
|
-
// to Tailwind's theme, so primitives reference `bg-surface` / `text-fg-muted` /
|
|
5
|
-
// `text-heading2` / `rounded-panel` and resolve to `var(--…)`.
|
|
6
|
-
//
|
|
7
|
-
// Ported verbatim from @app/ui/tailwind.config.ts `theme.extend` + plugins.
|
|
8
|
-
// Deliberately CONTENT-LESS: a shared preset must not hardcode `content` globs
|
|
9
|
-
// (the source pointed at ../../apps/web). Each consuming app owns its `content`.
|
|
10
|
-
//
|
|
11
|
-
// import podobaPreset from "@podoba/tailwind";
|
|
12
|
-
// export default { presets: [podobaPreset], content: ["./src/**/*.{ts,tsx}"] };
|
|
13
|
-
//
|
|
14
|
-
// NOTE: custom scale keys here (fontSize `micro`…`display`/`heading1-5`, spacing
|
|
15
|
-
// `nav-x`, borderRadius `panel`) are mirrored in @podoba/react's uic tailwind-merge
|
|
16
|
-
// config so conflicting utilities dedupe correctly. Keep the two in sync.
|
|
17
|
-
|
|
18
|
-
import typography from "@tailwindcss/typography";
|
|
19
|
-
import plugin from "tailwindcss/plugin";
|
|
20
|
-
import type { Config } from "tailwindcss";
|
|
21
|
-
|
|
22
|
-
export const podobaPreset: Omit<Config, "content"> = {
|
|
23
|
-
theme: {
|
|
24
|
-
extend: {
|
|
25
|
-
colors: {
|
|
26
|
-
brand: {
|
|
27
|
-
DEFAULT: "var(--color-brand-primary)",
|
|
28
|
-
primary: "var(--color-brand-primary)",
|
|
29
|
-
secondary: "var(--color-brand-secondary)",
|
|
30
|
-
green: "var(--color-brand-green)",
|
|
31
|
-
},
|
|
32
|
-
surface: {
|
|
33
|
-
DEFAULT: "var(--color-surface)",
|
|
34
|
-
muted: "var(--color-surface-muted)",
|
|
35
|
-
card: "var(--color-surface-card)",
|
|
36
|
-
inverted: "var(--color-surface-inverted)",
|
|
37
|
-
placeholder: "var(--color-surface-placeholder)",
|
|
38
|
-
},
|
|
39
|
-
fg: {
|
|
40
|
-
DEFAULT: "var(--color-fg)",
|
|
41
|
-
muted: "var(--color-fg-muted)",
|
|
42
|
-
subtle: "var(--color-fg-subtle)",
|
|
43
|
-
inverted: "var(--color-fg-inverted)",
|
|
44
|
-
},
|
|
45
|
-
accent: {
|
|
46
|
-
strong: "var(--color-accent-strong)",
|
|
47
|
-
yellow: "var(--color-accent-yellow)",
|
|
48
|
-
mint: "var(--color-accent-mint)",
|
|
49
|
-
"green-light": "var(--color-accent-green-light)",
|
|
50
|
-
pink: "var(--color-accent-pink)",
|
|
51
|
-
},
|
|
52
|
-
neutral: {
|
|
53
|
-
600: "var(--color-neutral-600)",
|
|
54
|
-
},
|
|
55
|
-
border: {
|
|
56
|
-
DEFAULT: "var(--color-border)",
|
|
57
|
-
},
|
|
58
|
-
danger: {
|
|
59
|
-
DEFAULT: "var(--color-danger)",
|
|
60
|
-
fg: "var(--color-danger-fg)",
|
|
61
|
-
},
|
|
62
|
-
success: {
|
|
63
|
-
DEFAULT: "var(--color-success)",
|
|
64
|
-
fg: "var(--color-success-fg)",
|
|
65
|
-
},
|
|
66
|
-
ring: {
|
|
67
|
-
DEFAULT: "var(--color-ring)",
|
|
68
|
-
},
|
|
69
|
-
},
|
|
70
|
-
borderRadius: {
|
|
71
|
-
sm: "var(--radius-sm)",
|
|
72
|
-
md: "var(--radius-md)",
|
|
73
|
-
lg: "var(--radius-lg)",
|
|
74
|
-
xl: "var(--radius-xl)",
|
|
75
|
-
"2xl": "var(--radius-2xl)",
|
|
76
|
-
panel: "var(--radius-panel)",
|
|
77
|
-
},
|
|
78
|
-
spacing: {
|
|
79
|
-
xs: "var(--space-xs)",
|
|
80
|
-
sm: "var(--space-sm)",
|
|
81
|
-
md: "var(--space-md)",
|
|
82
|
-
lg: "var(--space-lg)",
|
|
83
|
-
xl: "var(--space-xl)",
|
|
84
|
-
"nav-x": "var(--space-nav-x)",
|
|
85
|
-
},
|
|
86
|
-
fontFamily: {
|
|
87
|
-
sans: "var(--font-sans)",
|
|
88
|
-
mono: "var(--font-mono)",
|
|
89
|
-
},
|
|
90
|
-
// NC Fontina reads best light, so the whole weight scale is shifted down one
|
|
91
|
-
// step (-100 from Tailwind's defaults): light 300→200, normal 400→300,
|
|
92
|
-
// medium 500→400, semibold 600→500, bold 700→600. Every value stays inside
|
|
93
|
-
// NC Fontina's 200–700 wght axis. The unused extremes (thin/extralight/
|
|
94
|
-
// extrabold/black) are left at Tailwind defaults — they fall outside the axis.
|
|
95
|
-
fontWeight: {
|
|
96
|
-
light: "200",
|
|
97
|
-
normal: "300",
|
|
98
|
-
medium: "400",
|
|
99
|
-
semibold: "500",
|
|
100
|
-
bold: "600",
|
|
101
|
-
},
|
|
102
|
-
fontSize: {
|
|
103
|
-
micro: "var(--font-size-micro)",
|
|
104
|
-
caption: "var(--font-size-caption)",
|
|
105
|
-
label: "var(--font-size-label)",
|
|
106
|
-
compact: "var(--font-size-compact)",
|
|
107
|
-
callout: "var(--font-size-callout)",
|
|
108
|
-
body: "var(--font-size-body)",
|
|
109
|
-
subtitle: "var(--font-size-subtitle)",
|
|
110
|
-
title: "var(--font-size-title)",
|
|
111
|
-
headline: "var(--font-size-headline)",
|
|
112
|
-
display: "var(--font-size-display)",
|
|
113
|
-
heading1: ["var(--font-size-heading1)", { lineHeight: "var(--line-height-heading1)" }],
|
|
114
|
-
heading2: ["var(--font-size-heading2)", { lineHeight: "var(--line-height-heading2)" }],
|
|
115
|
-
heading3: ["var(--font-size-heading3)", { lineHeight: "var(--line-height-heading3)" }],
|
|
116
|
-
heading4: ["var(--font-size-heading4)", { lineHeight: "var(--line-height-heading4)" }],
|
|
117
|
-
heading5: ["var(--font-size-heading5)", { lineHeight: "var(--line-height-heading5)" }],
|
|
118
|
-
},
|
|
119
|
-
letterSpacing: {
|
|
120
|
-
tight: "var(--tracking-tight)",
|
|
121
|
-
normal: "var(--tracking-normal)",
|
|
122
|
-
wide: "var(--tracking-wide)",
|
|
123
|
-
wider: "var(--tracking-wider)",
|
|
124
|
-
},
|
|
125
|
-
keyframes: {
|
|
126
|
-
"expand-cta": {
|
|
127
|
-
from: { opacity: "0", transform: "translateY(-2px)" },
|
|
128
|
-
to: { opacity: "1", transform: "translateY(0)" },
|
|
129
|
-
},
|
|
130
|
-
"lightbox-in": {
|
|
131
|
-
from: { opacity: "0", transform: "translateX(24%)" },
|
|
132
|
-
to: { opacity: "1", transform: "translateX(0)" },
|
|
133
|
-
},
|
|
134
|
-
},
|
|
135
|
-
animation: {
|
|
136
|
-
"expand-cta": "expand-cta 220ms cubic-bezier(0.16, 1, 0.3, 1)",
|
|
137
|
-
"lightbox-in": "lightbox-in 0.3s ease-out",
|
|
138
|
-
},
|
|
139
|
-
},
|
|
140
|
-
},
|
|
141
|
-
plugins: [
|
|
142
|
-
typography,
|
|
143
|
-
// Base body weight follows `font-normal` (300) so UNSTYLED text (no explicit
|
|
144
|
-
// weight class) renders at 300 rather than the browser default 400. Tied to
|
|
145
|
-
// the token via theme('fontWeight.normal') so it can't drift from the scale.
|
|
146
|
-
plugin(({ addBase, theme }) => {
|
|
147
|
-
addBase({ html: { fontWeight: theme("fontWeight.normal") } });
|
|
148
|
-
}),
|
|
149
|
-
],
|
|
150
|
-
};
|
|
151
|
-
|
|
152
|
-
export default podobaPreset;
|