@podoba/tailwind 0.0.11 → 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.
Files changed (3) hide show
  1. package/package.json +7 -15
  2. package/src/theme.css +139 -0
  3. package/src/index.ts +0 -131
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@podoba/tailwind",
3
- "version": "0.0.11",
3
+ "version": "0.0.12",
4
4
  "type": "module",
5
- "description": "podoba Tailwind preset — binds @podoba/tokens CSS custom properties to theme.extend.",
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
- "main": "./src/index.ts",
14
- "types": "./src/index.ts",
13
+ "style": "./src/theme.css",
15
14
  "exports": {
16
- ".": "./src/index.ts"
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.19"
25
+ "@tailwindcss/typography": "0.5.20"
29
26
  },
30
27
  "peerDependencies": {
31
- "tailwindcss": "^3.4.0"
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,131 +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 type { Config } from "tailwindcss";
20
-
21
- export const podobaPreset: Omit<Config, "content"> = {
22
- theme: {
23
- extend: {
24
- colors: {
25
- brand: {
26
- DEFAULT: "var(--color-brand-primary)",
27
- primary: "var(--color-brand-primary)",
28
- secondary: "var(--color-brand-secondary)",
29
- green: "var(--color-brand-green)",
30
- },
31
- surface: {
32
- DEFAULT: "var(--color-surface)",
33
- muted: "var(--color-surface-muted)",
34
- card: "var(--color-surface-card)",
35
- inverted: "var(--color-surface-inverted)",
36
- placeholder: "var(--color-surface-placeholder)",
37
- },
38
- fg: {
39
- DEFAULT: "var(--color-fg)",
40
- muted: "var(--color-fg-muted)",
41
- subtle: "var(--color-fg-subtle)",
42
- inverted: "var(--color-fg-inverted)",
43
- },
44
- accent: {
45
- strong: "var(--color-accent-strong)",
46
- yellow: "var(--color-accent-yellow)",
47
- mint: "var(--color-accent-mint)",
48
- "green-light": "var(--color-accent-green-light)",
49
- pink: "var(--color-accent-pink)",
50
- },
51
- neutral: {
52
- 600: "var(--color-neutral-600)",
53
- },
54
- border: {
55
- DEFAULT: "var(--color-border)",
56
- },
57
- danger: {
58
- DEFAULT: "var(--color-danger)",
59
- fg: "var(--color-danger-fg)",
60
- },
61
- success: {
62
- DEFAULT: "var(--color-success)",
63
- fg: "var(--color-success-fg)",
64
- },
65
- ring: {
66
- DEFAULT: "var(--color-ring)",
67
- },
68
- },
69
- borderRadius: {
70
- sm: "var(--radius-sm)",
71
- md: "var(--radius-md)",
72
- lg: "var(--radius-lg)",
73
- xl: "var(--radius-xl)",
74
- "2xl": "var(--radius-2xl)",
75
- panel: "var(--radius-panel)",
76
- },
77
- spacing: {
78
- xs: "var(--space-xs)",
79
- sm: "var(--space-sm)",
80
- md: "var(--space-md)",
81
- lg: "var(--space-lg)",
82
- xl: "var(--space-xl)",
83
- "nav-x": "var(--space-nav-x)",
84
- },
85
- fontFamily: {
86
- sans: "var(--font-sans)",
87
- mono: "var(--font-mono)",
88
- },
89
- fontSize: {
90
- micro: "var(--font-size-micro)",
91
- caption: "var(--font-size-caption)",
92
- label: "var(--font-size-label)",
93
- compact: "var(--font-size-compact)",
94
- callout: "var(--font-size-callout)",
95
- body: "var(--font-size-body)",
96
- subtitle: "var(--font-size-subtitle)",
97
- title: "var(--font-size-title)",
98
- headline: "var(--font-size-headline)",
99
- display: "var(--font-size-display)",
100
- heading1: ["var(--font-size-heading1)", { lineHeight: "var(--line-height-heading1)" }],
101
- heading2: ["var(--font-size-heading2)", { lineHeight: "var(--line-height-heading2)" }],
102
- heading3: ["var(--font-size-heading3)", { lineHeight: "var(--line-height-heading3)" }],
103
- heading4: ["var(--font-size-heading4)", { lineHeight: "var(--line-height-heading4)" }],
104
- heading5: ["var(--font-size-heading5)", { lineHeight: "var(--line-height-heading5)" }],
105
- },
106
- letterSpacing: {
107
- tight: "var(--tracking-tight)",
108
- normal: "var(--tracking-normal)",
109
- wide: "var(--tracking-wide)",
110
- wider: "var(--tracking-wider)",
111
- },
112
- keyframes: {
113
- "expand-cta": {
114
- from: { opacity: "0", transform: "translateY(-2px)" },
115
- to: { opacity: "1", transform: "translateY(0)" },
116
- },
117
- "lightbox-in": {
118
- from: { opacity: "0", transform: "translateX(24%)" },
119
- to: { opacity: "1", transform: "translateX(0)" },
120
- },
121
- },
122
- animation: {
123
- "expand-cta": "expand-cta 220ms cubic-bezier(0.16, 1, 0.3, 1)",
124
- "lightbox-in": "lightbox-in 0.3s ease-out",
125
- },
126
- },
127
- },
128
- plugins: [typography],
129
- };
130
-
131
- export default podobaPreset;