@vantageos/mosaic-tokens 0.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 (15) hide show
  1. package/README.md +5 -0
  2. package/dist/index.cjs +95 -0
  3. package/dist/index.cjs.map +1 -0
  4. package/dist/index.d.cts +35 -0
  5. package/dist/index.d.ts +35 -0
  6. package/dist/index.js +84 -0
  7. package/dist/index.js.map +1 -0
  8. package/dist/tailwind-plugin.cjs +103 -0
  9. package/dist/tailwind-plugin.cjs.map +1 -0
  10. package/dist/tailwind-plugin.d.cts +15 -0
  11. package/dist/tailwind-plugin.d.ts +15 -0
  12. package/dist/tailwind-plugin.js +98 -0
  13. package/dist/tailwind-plugin.js.map +1 -0
  14. package/package.json +56 -0
  15. package/src/tokens.css +84 -0
package/README.md ADDED
@@ -0,0 +1,5 @@
1
+ # @vantageos/mosaic-tokens
2
+
3
+ Framework-free design tokens (colors, spacing, typography, shadows, radii, motion) for `@vantageos/mosaic`. Zero runtime dependencies. Consumable as CSS custom properties (`@vantageos/mosaic-tokens/css`), typed JS exports (`@vantageos/mosaic-tokens`), or a Tailwind v4 plugin (`@vantageos/mosaic-tokens/tailwind`). See the v0.2.0 spec for the cross-runtime architecture: `/tmp/mosaic-v0.2.0-spec.md` (§2, §6 §18.2).
4
+
5
+ Status: skeleton (T3-A). Token tables and 11-test suite land in T3-B.
package/dist/index.cjs ADDED
@@ -0,0 +1,95 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ // src/tokens.ts
6
+ var colors = Object.freeze({
7
+ "success-50": "oklch(0.965 0.040 145)",
8
+ "success-500": "oklch(0.660 0.180 145)",
9
+ "success-700": "oklch(0.470 0.140 145)",
10
+ "warning-50": "oklch(0.975 0.045 85)",
11
+ "warning-500": "oklch(0.770 0.170 85)",
12
+ "warning-700": "oklch(0.560 0.145 65)",
13
+ "danger-50": "oklch(0.965 0.035 25)",
14
+ "danger-500": "oklch(0.640 0.205 25)",
15
+ "danger-700": "oklch(0.460 0.180 25)",
16
+ "info-50": "oklch(0.970 0.035 250)",
17
+ "info-500": "oklch(0.650 0.170 250)",
18
+ "info-700": "oklch(0.460 0.150 250)",
19
+ "neutral-50": "oklch(0.980 0.005 250)",
20
+ "neutral-500": "oklch(0.580 0.012 250)",
21
+ "neutral-700": "oklch(0.380 0.010 250)"
22
+ });
23
+ var spacing = Object.freeze({
24
+ "1": "4px",
25
+ "2": "8px",
26
+ "3": "12px",
27
+ "4": "16px",
28
+ "6": "24px",
29
+ "8": "32px",
30
+ "12": "48px",
31
+ "16": "64px"
32
+ });
33
+ var typography = Object.freeze({
34
+ "size-xs": "12px",
35
+ "size-sm": "14px",
36
+ "size-base": "16px",
37
+ "size-lg": "20px",
38
+ "size-xl": "24px",
39
+ "size-2xl": "30px",
40
+ "size-3xl": "38px",
41
+ "lh-tight": "1.2",
42
+ "lh-normal": "1.5",
43
+ "lh-relaxed": "1.6",
44
+ "weight-regular": "400",
45
+ "weight-medium": "500",
46
+ "weight-semibold": "600",
47
+ "weight-bold": "700"
48
+ });
49
+ var shadows = Object.freeze({
50
+ "0": "none",
51
+ "1": "0 1px 2px 0 oklch(0.200 0.010 250 / 0.05)",
52
+ "2": "0 2px 4px -1px oklch(0.200 0.010 250 / 0.08), 0 1px 2px -1px oklch(0.200 0.010 250 / 0.06)",
53
+ "3": "0 4px 8px -2px oklch(0.200 0.010 250 / 0.10), 0 2px 4px -2px oklch(0.200 0.010 250 / 0.06)",
54
+ "4": "0 8px 16px -4px oklch(0.200 0.010 250 / 0.12), 0 4px 8px -4px oklch(0.200 0.010 250 / 0.08)",
55
+ "5": "0 16px 32px -8px oklch(0.200 0.010 250 / 0.16), 0 8px 16px -8px oklch(0.200 0.010 250 / 0.10)"
56
+ });
57
+ var radii = Object.freeze({
58
+ none: "0px",
59
+ xs: "2px",
60
+ sm: "4px",
61
+ md: "6px",
62
+ lg: "8px",
63
+ xl: "12px",
64
+ full: "9999px"
65
+ });
66
+ var motion = Object.freeze({
67
+ "duration-fast": "75ms",
68
+ "duration-base": "150ms",
69
+ "duration-slow": "300ms",
70
+ "easing-linear": "linear",
71
+ "easing-ease": "cubic-bezier(0.4, 0, 0.2, 1)",
72
+ "easing-in": "cubic-bezier(0.4, 0, 1, 1)",
73
+ "easing-out": "cubic-bezier(0, 0, 0.2, 1)",
74
+ "easing-in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
75
+ });
76
+ var tokens = Object.freeze({
77
+ colors,
78
+ spacing,
79
+ typography,
80
+ shadows,
81
+ radii,
82
+ motion
83
+ });
84
+ var tokens_default = tokens;
85
+
86
+ exports.colors = colors;
87
+ exports.default = tokens_default;
88
+ exports.motion = motion;
89
+ exports.radii = radii;
90
+ exports.shadows = shadows;
91
+ exports.spacing = spacing;
92
+ exports.tokens = tokens;
93
+ exports.typography = typography;
94
+ //# sourceMappingURL=index.cjs.map
95
+ //# sourceMappingURL=index.cjs.map
package/dist/index.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/tokens.ts"],"names":[],"mappings":";;;;;AA8BO,IAAM,MAAA,GAAiC,OAAO,MAAA,CAAO;AAAA,EAC1D,YAAA,EAAc,wBAAA;AAAA,EACd,aAAA,EAAe,wBAAA;AAAA,EACf,aAAA,EAAe,wBAAA;AAAA,EACf,YAAA,EAAc,uBAAA;AAAA,EACd,aAAA,EAAe,uBAAA;AAAA,EACf,aAAA,EAAe,uBAAA;AAAA,EACf,WAAA,EAAa,uBAAA;AAAA,EACb,YAAA,EAAc,uBAAA;AAAA,EACd,YAAA,EAAc,uBAAA;AAAA,EACd,SAAA,EAAW,wBAAA;AAAA,EACX,UAAA,EAAY,wBAAA;AAAA,EACZ,UAAA,EAAY,wBAAA;AAAA,EACZ,YAAA,EAAc,wBAAA;AAAA,EACd,aAAA,EAAe,wBAAA;AAAA,EACf,aAAA,EAAe;AACjB,CAAC;AAGM,IAAM,OAAA,GAAmC,OAAO,MAAA,CAAO;AAAA,EAC5D,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,MAAA;AAAA,EACL,GAAA,EAAK,MAAA;AAAA,EACL,GAAA,EAAK,MAAA;AAAA,EACL,GAAA,EAAK,MAAA;AAAA,EACL,IAAA,EAAM,MAAA;AAAA,EACN,IAAA,EAAM;AACR,CAAC;AAGM,IAAM,UAAA,GAAyC,OAAO,MAAA,CAAO;AAAA,EAClE,SAAA,EAAW,MAAA;AAAA,EACX,SAAA,EAAW,MAAA;AAAA,EACX,WAAA,EAAa,MAAA;AAAA,EACb,SAAA,EAAW,MAAA;AAAA,EACX,SAAA,EAAW,MAAA;AAAA,EACX,UAAA,EAAY,MAAA;AAAA,EACZ,UAAA,EAAY,MAAA;AAAA,EACZ,UAAA,EAAY,KAAA;AAAA,EACZ,WAAA,EAAa,KAAA;AAAA,EACb,YAAA,EAAc,KAAA;AAAA,EACd,gBAAA,EAAkB,KAAA;AAAA,EAClB,eAAA,EAAiB,KAAA;AAAA,EACjB,iBAAA,EAAmB,KAAA;AAAA,EACnB,aAAA,EAAe;AACjB,CAAC;AAGM,IAAM,OAAA,GAAmC,OAAO,MAAA,CAAO;AAAA,EAC5D,GAAA,EAAK,MAAA;AAAA,EACL,GAAA,EAAK,2CAAA;AAAA,EACL,GAAA,EAAK,4FAAA;AAAA,EACL,GAAA,EAAK,4FAAA;AAAA,EACL,GAAA,EAAK,6FAAA;AAAA,EACL,GAAA,EAAK;AACP,CAAC;AAGM,IAAM,KAAA,GAA+B,OAAO,MAAA,CAAO;AAAA,EACxD,IAAA,EAAM,KAAA;AAAA,EACN,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,MAAA;AAAA,EACJ,IAAA,EAAM;AACR,CAAC;AAGM,IAAM,MAAA,GAAiC,OAAO,MAAA,CAAO;AAAA,EAC1D,eAAA,EAAiB,MAAA;AAAA,EACjB,eAAA,EAAiB,OAAA;AAAA,EACjB,eAAA,EAAiB,OAAA;AAAA,EACjB,eAAA,EAAiB,QAAA;AAAA,EACjB,aAAA,EAAe,8BAAA;AAAA,EACf,WAAA,EAAa,4BAAA;AAAA,EACb,YAAA,EAAc,4BAAA;AAAA,EACd,eAAA,EAAiB;AACnB,CAAC;AAEM,IAAM,MAAA,GAAuB,OAAO,MAAA,CAAO;AAAA,EAChD,MAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAC;AAED,IAAO,cAAA,GAAQ","file":"index.cjs","sourcesContent":["/**\n * @vantageos/mosaic-tokens — design tokens (T3-B implementation).\n *\n * Framework-free, OKLCH-based, mirror of the CSS custom properties in\n * tokens.css. Consumers can opt for either the CSS surface (Tailwind v4\n * + @theme inline) or the JS surface (typed runtime access in JSX styles,\n * Storybook stories, Playwright assertions, snapshot tests).\n *\n * Size targets (.size-limit.json): JS bundle ≤5 KB gz, CSS ≤3 KB gz.\n *\n * Schema invariants (enforced by mosaic-tokens-coherence-test in T3-C):\n * - Every CSS var has a JS counterpart (and vice versa).\n * - Color shades 50 < 500 < 700 monotonic luminance.\n * - Spacing scale ascending, ratio 1.5x average (4 → 64 px).\n * - Typography scale uses 1.25x ratio (12 → 38 px).\n * - Shadow elevation 0 < 1 < 2 < 3 < 4 < 5 monotonic blur radius.\n * - Radii strictly ascending (none → full).\n */\n\nexport interface MosaicTokens {\n readonly colors: Readonly<Record<string, string>>;\n readonly spacing: Readonly<Record<string, string>>;\n readonly typography: Readonly<Record<string, string>>;\n readonly shadows: Readonly<Record<string, string>>;\n readonly radii: Readonly<Record<string, string>>;\n readonly motion: Readonly<Record<string, string>>;\n}\n\n// Colors — semantic statuses × 3 shades (50/500/700), OKLCH.\n// 50 = surface tint, 500 = brand body, 700 = accessible contrast on light bg.\nexport const colors: MosaicTokens[\"colors\"] = Object.freeze({\n \"success-50\": \"oklch(0.965 0.040 145)\",\n \"success-500\": \"oklch(0.660 0.180 145)\",\n \"success-700\": \"oklch(0.470 0.140 145)\",\n \"warning-50\": \"oklch(0.975 0.045 85)\",\n \"warning-500\": \"oklch(0.770 0.170 85)\",\n \"warning-700\": \"oklch(0.560 0.145 65)\",\n \"danger-50\": \"oklch(0.965 0.035 25)\",\n \"danger-500\": \"oklch(0.640 0.205 25)\",\n \"danger-700\": \"oklch(0.460 0.180 25)\",\n \"info-50\": \"oklch(0.970 0.035 250)\",\n \"info-500\": \"oklch(0.650 0.170 250)\",\n \"info-700\": \"oklch(0.460 0.150 250)\",\n \"neutral-50\": \"oklch(0.980 0.005 250)\",\n \"neutral-500\": \"oklch(0.580 0.012 250)\",\n \"neutral-700\": \"oklch(0.380 0.010 250)\",\n});\n\n// Spacing — 4 → 64 px scale.\nexport const spacing: MosaicTokens[\"spacing\"] = Object.freeze({\n \"1\": \"4px\",\n \"2\": \"8px\",\n \"3\": \"12px\",\n \"4\": \"16px\",\n \"6\": \"24px\",\n \"8\": \"32px\",\n \"12\": \"48px\",\n \"16\": \"64px\",\n});\n\n// Typography — 1.25x font-size scale + line-height + weight.\nexport const typography: MosaicTokens[\"typography\"] = Object.freeze({\n \"size-xs\": \"12px\",\n \"size-sm\": \"14px\",\n \"size-base\": \"16px\",\n \"size-lg\": \"20px\",\n \"size-xl\": \"24px\",\n \"size-2xl\": \"30px\",\n \"size-3xl\": \"38px\",\n \"lh-tight\": \"1.2\",\n \"lh-normal\": \"1.5\",\n \"lh-relaxed\": \"1.6\",\n \"weight-regular\": \"400\",\n \"weight-medium\": \"500\",\n \"weight-semibold\": \"600\",\n \"weight-bold\": \"700\",\n});\n\n// Shadows — 6 elevation steps, OKLCH neutral tint.\nexport const shadows: MosaicTokens[\"shadows\"] = Object.freeze({\n \"0\": \"none\",\n \"1\": \"0 1px 2px 0 oklch(0.200 0.010 250 / 0.05)\",\n \"2\": \"0 2px 4px -1px oklch(0.200 0.010 250 / 0.08), 0 1px 2px -1px oklch(0.200 0.010 250 / 0.06)\",\n \"3\": \"0 4px 8px -2px oklch(0.200 0.010 250 / 0.10), 0 2px 4px -2px oklch(0.200 0.010 250 / 0.06)\",\n \"4\": \"0 8px 16px -4px oklch(0.200 0.010 250 / 0.12), 0 4px 8px -4px oklch(0.200 0.010 250 / 0.08)\",\n \"5\": \"0 16px 32px -8px oklch(0.200 0.010 250 / 0.16), 0 8px 16px -8px oklch(0.200 0.010 250 / 0.10)\",\n});\n\n// Radii — strictly ascending (none → full).\nexport const radii: MosaicTokens[\"radii\"] = Object.freeze({\n none: \"0px\",\n xs: \"2px\",\n sm: \"4px\",\n md: \"6px\",\n lg: \"8px\",\n xl: \"12px\",\n full: \"9999px\",\n});\n\n// Motion — durations + easing curves.\nexport const motion: MosaicTokens[\"motion\"] = Object.freeze({\n \"duration-fast\": \"75ms\",\n \"duration-base\": \"150ms\",\n \"duration-slow\": \"300ms\",\n \"easing-linear\": \"linear\",\n \"easing-ease\": \"cubic-bezier(0.4, 0, 0.2, 1)\",\n \"easing-in\": \"cubic-bezier(0.4, 0, 1, 1)\",\n \"easing-out\": \"cubic-bezier(0, 0, 0.2, 1)\",\n \"easing-in-out\": \"cubic-bezier(0.4, 0, 0.2, 1)\",\n});\n\nexport const tokens: MosaicTokens = Object.freeze({\n colors,\n spacing,\n typography,\n shadows,\n radii,\n motion,\n});\n\nexport default tokens;\n"]}
package/dist/index.d.cts ADDED
@@ -0,0 +1,35 @@
1
+ /**
2
+ * @vantageos/mosaic-tokens — design tokens (T3-B implementation).
3
+ *
4
+ * Framework-free, OKLCH-based, mirror of the CSS custom properties in
5
+ * tokens.css. Consumers can opt for either the CSS surface (Tailwind v4
6
+ * + @theme inline) or the JS surface (typed runtime access in JSX styles,
7
+ * Storybook stories, Playwright assertions, snapshot tests).
8
+ *
9
+ * Size targets (.size-limit.json): JS bundle ≤5 KB gz, CSS ≤3 KB gz.
10
+ *
11
+ * Schema invariants (enforced by mosaic-tokens-coherence-test in T3-C):
12
+ * - Every CSS var has a JS counterpart (and vice versa).
13
+ * - Color shades 50 < 500 < 700 monotonic luminance.
14
+ * - Spacing scale ascending, ratio 1.5x average (4 → 64 px).
15
+ * - Typography scale uses 1.25x ratio (12 → 38 px).
16
+ * - Shadow elevation 0 < 1 < 2 < 3 < 4 < 5 monotonic blur radius.
17
+ * - Radii strictly ascending (none → full).
18
+ */
19
+ interface MosaicTokens {
20
+ readonly colors: Readonly<Record<string, string>>;
21
+ readonly spacing: Readonly<Record<string, string>>;
22
+ readonly typography: Readonly<Record<string, string>>;
23
+ readonly shadows: Readonly<Record<string, string>>;
24
+ readonly radii: Readonly<Record<string, string>>;
25
+ readonly motion: Readonly<Record<string, string>>;
26
+ }
27
+ declare const colors: MosaicTokens["colors"];
28
+ declare const spacing: MosaicTokens["spacing"];
29
+ declare const typography: MosaicTokens["typography"];
30
+ declare const shadows: MosaicTokens["shadows"];
31
+ declare const radii: MosaicTokens["radii"];
32
+ declare const motion: MosaicTokens["motion"];
33
+ declare const tokens: MosaicTokens;
34
+
35
+ export { type MosaicTokens, colors, tokens as default, motion, radii, shadows, spacing, tokens, typography };
package/dist/index.d.ts ADDED
@@ -0,0 +1,35 @@
1
+ /**
2
+ * @vantageos/mosaic-tokens — design tokens (T3-B implementation).
3
+ *
4
+ * Framework-free, OKLCH-based, mirror of the CSS custom properties in
5
+ * tokens.css. Consumers can opt for either the CSS surface (Tailwind v4
6
+ * + @theme inline) or the JS surface (typed runtime access in JSX styles,
7
+ * Storybook stories, Playwright assertions, snapshot tests).
8
+ *
9
+ * Size targets (.size-limit.json): JS bundle ≤5 KB gz, CSS ≤3 KB gz.
10
+ *
11
+ * Schema invariants (enforced by mosaic-tokens-coherence-test in T3-C):
12
+ * - Every CSS var has a JS counterpart (and vice versa).
13
+ * - Color shades 50 < 500 < 700 monotonic luminance.
14
+ * - Spacing scale ascending, ratio 1.5x average (4 → 64 px).
15
+ * - Typography scale uses 1.25x ratio (12 → 38 px).
16
+ * - Shadow elevation 0 < 1 < 2 < 3 < 4 < 5 monotonic blur radius.
17
+ * - Radii strictly ascending (none → full).
18
+ */
19
+ interface MosaicTokens {
20
+ readonly colors: Readonly<Record<string, string>>;
21
+ readonly spacing: Readonly<Record<string, string>>;
22
+ readonly typography: Readonly<Record<string, string>>;
23
+ readonly shadows: Readonly<Record<string, string>>;
24
+ readonly radii: Readonly<Record<string, string>>;
25
+ readonly motion: Readonly<Record<string, string>>;
26
+ }
27
+ declare const colors: MosaicTokens["colors"];
28
+ declare const spacing: MosaicTokens["spacing"];
29
+ declare const typography: MosaicTokens["typography"];
30
+ declare const shadows: MosaicTokens["shadows"];
31
+ declare const radii: MosaicTokens["radii"];
32
+ declare const motion: MosaicTokens["motion"];
33
+ declare const tokens: MosaicTokens;
34
+
35
+ export { type MosaicTokens, colors, tokens as default, motion, radii, shadows, spacing, tokens, typography };
package/dist/index.js ADDED
@@ -0,0 +1,84 @@
1
+ // src/tokens.ts
2
+ var colors = Object.freeze({
3
+ "success-50": "oklch(0.965 0.040 145)",
4
+ "success-500": "oklch(0.660 0.180 145)",
5
+ "success-700": "oklch(0.470 0.140 145)",
6
+ "warning-50": "oklch(0.975 0.045 85)",
7
+ "warning-500": "oklch(0.770 0.170 85)",
8
+ "warning-700": "oklch(0.560 0.145 65)",
9
+ "danger-50": "oklch(0.965 0.035 25)",
10
+ "danger-500": "oklch(0.640 0.205 25)",
11
+ "danger-700": "oklch(0.460 0.180 25)",
12
+ "info-50": "oklch(0.970 0.035 250)",
13
+ "info-500": "oklch(0.650 0.170 250)",
14
+ "info-700": "oklch(0.460 0.150 250)",
15
+ "neutral-50": "oklch(0.980 0.005 250)",
16
+ "neutral-500": "oklch(0.580 0.012 250)",
17
+ "neutral-700": "oklch(0.380 0.010 250)"
18
+ });
19
+ var spacing = Object.freeze({
20
+ "1": "4px",
21
+ "2": "8px",
22
+ "3": "12px",
23
+ "4": "16px",
24
+ "6": "24px",
25
+ "8": "32px",
26
+ "12": "48px",
27
+ "16": "64px"
28
+ });
29
+ var typography = Object.freeze({
30
+ "size-xs": "12px",
31
+ "size-sm": "14px",
32
+ "size-base": "16px",
33
+ "size-lg": "20px",
34
+ "size-xl": "24px",
35
+ "size-2xl": "30px",
36
+ "size-3xl": "38px",
37
+ "lh-tight": "1.2",
38
+ "lh-normal": "1.5",
39
+ "lh-relaxed": "1.6",
40
+ "weight-regular": "400",
41
+ "weight-medium": "500",
42
+ "weight-semibold": "600",
43
+ "weight-bold": "700"
44
+ });
45
+ var shadows = Object.freeze({
46
+ "0": "none",
47
+ "1": "0 1px 2px 0 oklch(0.200 0.010 250 / 0.05)",
48
+ "2": "0 2px 4px -1px oklch(0.200 0.010 250 / 0.08), 0 1px 2px -1px oklch(0.200 0.010 250 / 0.06)",
49
+ "3": "0 4px 8px -2px oklch(0.200 0.010 250 / 0.10), 0 2px 4px -2px oklch(0.200 0.010 250 / 0.06)",
50
+ "4": "0 8px 16px -4px oklch(0.200 0.010 250 / 0.12), 0 4px 8px -4px oklch(0.200 0.010 250 / 0.08)",
51
+ "5": "0 16px 32px -8px oklch(0.200 0.010 250 / 0.16), 0 8px 16px -8px oklch(0.200 0.010 250 / 0.10)"
52
+ });
53
+ var radii = Object.freeze({
54
+ none: "0px",
55
+ xs: "2px",
56
+ sm: "4px",
57
+ md: "6px",
58
+ lg: "8px",
59
+ xl: "12px",
60
+ full: "9999px"
61
+ });
62
+ var motion = Object.freeze({
63
+ "duration-fast": "75ms",
64
+ "duration-base": "150ms",
65
+ "duration-slow": "300ms",
66
+ "easing-linear": "linear",
67
+ "easing-ease": "cubic-bezier(0.4, 0, 0.2, 1)",
68
+ "easing-in": "cubic-bezier(0.4, 0, 1, 1)",
69
+ "easing-out": "cubic-bezier(0, 0, 0.2, 1)",
70
+ "easing-in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
71
+ });
72
+ var tokens = Object.freeze({
73
+ colors,
74
+ spacing,
75
+ typography,
76
+ shadows,
77
+ radii,
78
+ motion
79
+ });
80
+ var tokens_default = tokens;
81
+
82
+ export { colors, tokens_default as default, motion, radii, shadows, spacing, tokens, typography };
83
+ //# sourceMappingURL=index.js.map
84
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/tokens.ts"],"names":[],"mappings":";AA8BO,IAAM,MAAA,GAAiC,OAAO,MAAA,CAAO;AAAA,EAC1D,YAAA,EAAc,wBAAA;AAAA,EACd,aAAA,EAAe,wBAAA;AAAA,EACf,aAAA,EAAe,wBAAA;AAAA,EACf,YAAA,EAAc,uBAAA;AAAA,EACd,aAAA,EAAe,uBAAA;AAAA,EACf,aAAA,EAAe,uBAAA;AAAA,EACf,WAAA,EAAa,uBAAA;AAAA,EACb,YAAA,EAAc,uBAAA;AAAA,EACd,YAAA,EAAc,uBAAA;AAAA,EACd,SAAA,EAAW,wBAAA;AAAA,EACX,UAAA,EAAY,wBAAA;AAAA,EACZ,UAAA,EAAY,wBAAA;AAAA,EACZ,YAAA,EAAc,wBAAA;AAAA,EACd,aAAA,EAAe,wBAAA;AAAA,EACf,aAAA,EAAe;AACjB,CAAC;AAGM,IAAM,OAAA,GAAmC,OAAO,MAAA,CAAO;AAAA,EAC5D,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,MAAA;AAAA,EACL,GAAA,EAAK,MAAA;AAAA,EACL,GAAA,EAAK,MAAA;AAAA,EACL,GAAA,EAAK,MAAA;AAAA,EACL,IAAA,EAAM,MAAA;AAAA,EACN,IAAA,EAAM;AACR,CAAC;AAGM,IAAM,UAAA,GAAyC,OAAO,MAAA,CAAO;AAAA,EAClE,SAAA,EAAW,MAAA;AAAA,EACX,SAAA,EAAW,MAAA;AAAA,EACX,WAAA,EAAa,MAAA;AAAA,EACb,SAAA,EAAW,MAAA;AAAA,EACX,SAAA,EAAW,MAAA;AAAA,EACX,UAAA,EAAY,MAAA;AAAA,EACZ,UAAA,EAAY,MAAA;AAAA,EACZ,UAAA,EAAY,KAAA;AAAA,EACZ,WAAA,EAAa,KAAA;AAAA,EACb,YAAA,EAAc,KAAA;AAAA,EACd,gBAAA,EAAkB,KAAA;AAAA,EAClB,eAAA,EAAiB,KAAA;AAAA,EACjB,iBAAA,EAAmB,KAAA;AAAA,EACnB,aAAA,EAAe;AACjB,CAAC;AAGM,IAAM,OAAA,GAAmC,OAAO,MAAA,CAAO;AAAA,EAC5D,GAAA,EAAK,MAAA;AAAA,EACL,GAAA,EAAK,2CAAA;AAAA,EACL,GAAA,EAAK,4FAAA;AAAA,EACL,GAAA,EAAK,4FAAA;AAAA,EACL,GAAA,EAAK,6FAAA;AAAA,EACL,GAAA,EAAK;AACP,CAAC;AAGM,IAAM,KAAA,GAA+B,OAAO,MAAA,CAAO;AAAA,EACxD,IAAA,EAAM,KAAA;AAAA,EACN,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,MAAA;AAAA,EACJ,IAAA,EAAM;AACR,CAAC;AAGM,IAAM,MAAA,GAAiC,OAAO,MAAA,CAAO;AAAA,EAC1D,eAAA,EAAiB,MAAA;AAAA,EACjB,eAAA,EAAiB,OAAA;AAAA,EACjB,eAAA,EAAiB,OAAA;AAAA,EACjB,eAAA,EAAiB,QAAA;AAAA,EACjB,aAAA,EAAe,8BAAA;AAAA,EACf,WAAA,EAAa,4BAAA;AAAA,EACb,YAAA,EAAc,4BAAA;AAAA,EACd,eAAA,EAAiB;AACnB,CAAC;AAEM,IAAM,MAAA,GAAuB,OAAO,MAAA,CAAO;AAAA,EAChD,MAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAC;AAED,IAAO,cAAA,GAAQ","file":"index.js","sourcesContent":["/**\n * @vantageos/mosaic-tokens — design tokens (T3-B implementation).\n *\n * Framework-free, OKLCH-based, mirror of the CSS custom properties in\n * tokens.css. Consumers can opt for either the CSS surface (Tailwind v4\n * + @theme inline) or the JS surface (typed runtime access in JSX styles,\n * Storybook stories, Playwright assertions, snapshot tests).\n *\n * Size targets (.size-limit.json): JS bundle ≤5 KB gz, CSS ≤3 KB gz.\n *\n * Schema invariants (enforced by mosaic-tokens-coherence-test in T3-C):\n * - Every CSS var has a JS counterpart (and vice versa).\n * - Color shades 50 < 500 < 700 monotonic luminance.\n * - Spacing scale ascending, ratio 1.5x average (4 → 64 px).\n * - Typography scale uses 1.25x ratio (12 → 38 px).\n * - Shadow elevation 0 < 1 < 2 < 3 < 4 < 5 monotonic blur radius.\n * - Radii strictly ascending (none → full).\n */\n\nexport interface MosaicTokens {\n readonly colors: Readonly<Record<string, string>>;\n readonly spacing: Readonly<Record<string, string>>;\n readonly typography: Readonly<Record<string, string>>;\n readonly shadows: Readonly<Record<string, string>>;\n readonly radii: Readonly<Record<string, string>>;\n readonly motion: Readonly<Record<string, string>>;\n}\n\n// Colors — semantic statuses × 3 shades (50/500/700), OKLCH.\n// 50 = surface tint, 500 = brand body, 700 = accessible contrast on light bg.\nexport const colors: MosaicTokens[\"colors\"] = Object.freeze({\n \"success-50\": \"oklch(0.965 0.040 145)\",\n \"success-500\": \"oklch(0.660 0.180 145)\",\n \"success-700\": \"oklch(0.470 0.140 145)\",\n \"warning-50\": \"oklch(0.975 0.045 85)\",\n \"warning-500\": \"oklch(0.770 0.170 85)\",\n \"warning-700\": \"oklch(0.560 0.145 65)\",\n \"danger-50\": \"oklch(0.965 0.035 25)\",\n \"danger-500\": \"oklch(0.640 0.205 25)\",\n \"danger-700\": \"oklch(0.460 0.180 25)\",\n \"info-50\": \"oklch(0.970 0.035 250)\",\n \"info-500\": \"oklch(0.650 0.170 250)\",\n \"info-700\": \"oklch(0.460 0.150 250)\",\n \"neutral-50\": \"oklch(0.980 0.005 250)\",\n \"neutral-500\": \"oklch(0.580 0.012 250)\",\n \"neutral-700\": \"oklch(0.380 0.010 250)\",\n});\n\n// Spacing — 4 → 64 px scale.\nexport const spacing: MosaicTokens[\"spacing\"] = Object.freeze({\n \"1\": \"4px\",\n \"2\": \"8px\",\n \"3\": \"12px\",\n \"4\": \"16px\",\n \"6\": \"24px\",\n \"8\": \"32px\",\n \"12\": \"48px\",\n \"16\": \"64px\",\n});\n\n// Typography — 1.25x font-size scale + line-height + weight.\nexport const typography: MosaicTokens[\"typography\"] = Object.freeze({\n \"size-xs\": \"12px\",\n \"size-sm\": \"14px\",\n \"size-base\": \"16px\",\n \"size-lg\": \"20px\",\n \"size-xl\": \"24px\",\n \"size-2xl\": \"30px\",\n \"size-3xl\": \"38px\",\n \"lh-tight\": \"1.2\",\n \"lh-normal\": \"1.5\",\n \"lh-relaxed\": \"1.6\",\n \"weight-regular\": \"400\",\n \"weight-medium\": \"500\",\n \"weight-semibold\": \"600\",\n \"weight-bold\": \"700\",\n});\n\n// Shadows — 6 elevation steps, OKLCH neutral tint.\nexport const shadows: MosaicTokens[\"shadows\"] = Object.freeze({\n \"0\": \"none\",\n \"1\": \"0 1px 2px 0 oklch(0.200 0.010 250 / 0.05)\",\n \"2\": \"0 2px 4px -1px oklch(0.200 0.010 250 / 0.08), 0 1px 2px -1px oklch(0.200 0.010 250 / 0.06)\",\n \"3\": \"0 4px 8px -2px oklch(0.200 0.010 250 / 0.10), 0 2px 4px -2px oklch(0.200 0.010 250 / 0.06)\",\n \"4\": \"0 8px 16px -4px oklch(0.200 0.010 250 / 0.12), 0 4px 8px -4px oklch(0.200 0.010 250 / 0.08)\",\n \"5\": \"0 16px 32px -8px oklch(0.200 0.010 250 / 0.16), 0 8px 16px -8px oklch(0.200 0.010 250 / 0.10)\",\n});\n\n// Radii — strictly ascending (none → full).\nexport const radii: MosaicTokens[\"radii\"] = Object.freeze({\n none: \"0px\",\n xs: \"2px\",\n sm: \"4px\",\n md: \"6px\",\n lg: \"8px\",\n xl: \"12px\",\n full: \"9999px\",\n});\n\n// Motion — durations + easing curves.\nexport const motion: MosaicTokens[\"motion\"] = Object.freeze({\n \"duration-fast\": \"75ms\",\n \"duration-base\": \"150ms\",\n \"duration-slow\": \"300ms\",\n \"easing-linear\": \"linear\",\n \"easing-ease\": \"cubic-bezier(0.4, 0, 0.2, 1)\",\n \"easing-in\": \"cubic-bezier(0.4, 0, 1, 1)\",\n \"easing-out\": \"cubic-bezier(0, 0, 0.2, 1)\",\n \"easing-in-out\": \"cubic-bezier(0.4, 0, 0.2, 1)\",\n});\n\nexport const tokens: MosaicTokens = Object.freeze({\n colors,\n spacing,\n typography,\n shadows,\n radii,\n motion,\n});\n\nexport default tokens;\n"]}
package/dist/tailwind-plugin.cjs ADDED
@@ -0,0 +1,103 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ // src/tokens.ts
6
+ var colors = Object.freeze({
7
+ "success-50": "oklch(0.965 0.040 145)",
8
+ "success-500": "oklch(0.660 0.180 145)",
9
+ "success-700": "oklch(0.470 0.140 145)",
10
+ "warning-50": "oklch(0.975 0.045 85)",
11
+ "warning-500": "oklch(0.770 0.170 85)",
12
+ "warning-700": "oklch(0.560 0.145 65)",
13
+ "danger-50": "oklch(0.965 0.035 25)",
14
+ "danger-500": "oklch(0.640 0.205 25)",
15
+ "danger-700": "oklch(0.460 0.180 25)",
16
+ "info-50": "oklch(0.970 0.035 250)",
17
+ "info-500": "oklch(0.650 0.170 250)",
18
+ "info-700": "oklch(0.460 0.150 250)",
19
+ "neutral-50": "oklch(0.980 0.005 250)",
20
+ "neutral-500": "oklch(0.580 0.012 250)",
21
+ "neutral-700": "oklch(0.380 0.010 250)"
22
+ });
23
+ var spacing = Object.freeze({
24
+ "1": "4px",
25
+ "2": "8px",
26
+ "3": "12px",
27
+ "4": "16px",
28
+ "6": "24px",
29
+ "8": "32px",
30
+ "12": "48px",
31
+ "16": "64px"
32
+ });
33
+ var typography = Object.freeze({
34
+ "size-xs": "12px",
35
+ "size-sm": "14px",
36
+ "size-base": "16px",
37
+ "size-lg": "20px",
38
+ "size-xl": "24px",
39
+ "size-2xl": "30px",
40
+ "size-3xl": "38px",
41
+ "lh-tight": "1.2",
42
+ "lh-normal": "1.5",
43
+ "lh-relaxed": "1.6",
44
+ "weight-regular": "400",
45
+ "weight-medium": "500",
46
+ "weight-semibold": "600",
47
+ "weight-bold": "700"
48
+ });
49
+ var shadows = Object.freeze({
50
+ "0": "none",
51
+ "1": "0 1px 2px 0 oklch(0.200 0.010 250 / 0.05)",
52
+ "2": "0 2px 4px -1px oklch(0.200 0.010 250 / 0.08), 0 1px 2px -1px oklch(0.200 0.010 250 / 0.06)",
53
+ "3": "0 4px 8px -2px oklch(0.200 0.010 250 / 0.10), 0 2px 4px -2px oklch(0.200 0.010 250 / 0.06)",
54
+ "4": "0 8px 16px -4px oklch(0.200 0.010 250 / 0.12), 0 4px 8px -4px oklch(0.200 0.010 250 / 0.08)",
55
+ "5": "0 16px 32px -8px oklch(0.200 0.010 250 / 0.16), 0 8px 16px -8px oklch(0.200 0.010 250 / 0.10)"
56
+ });
57
+ var radii = Object.freeze({
58
+ none: "0px",
59
+ xs: "2px",
60
+ sm: "4px",
61
+ md: "6px",
62
+ lg: "8px",
63
+ xl: "12px",
64
+ full: "9999px"
65
+ });
66
+ var motion = Object.freeze({
67
+ "duration-fast": "75ms",
68
+ "duration-base": "150ms",
69
+ "duration-slow": "300ms",
70
+ "easing-linear": "linear",
71
+ "easing-ease": "cubic-bezier(0.4, 0, 0.2, 1)",
72
+ "easing-in": "cubic-bezier(0.4, 0, 1, 1)",
73
+ "easing-out": "cubic-bezier(0, 0, 0.2, 1)",
74
+ "easing-in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
75
+ });
76
+ var tokens = Object.freeze({
77
+ colors,
78
+ spacing,
79
+ typography,
80
+ shadows,
81
+ radii,
82
+ motion
83
+ });
84
+
85
+ // src/tailwind-plugin.ts
86
+ var mosaicPlugin = Object.freeze({
87
+ theme: {
88
+ extend: {
89
+ colors: tokens.colors,
90
+ spacing: tokens.spacing,
91
+ fontSize: tokens.typography,
92
+ boxShadow: tokens.shadows,
93
+ borderRadius: tokens.radii,
94
+ transitionDuration: tokens.motion
95
+ }
96
+ }
97
+ });
98
+ var tailwind_plugin_default = mosaicPlugin;
99
+
100
+ exports.default = tailwind_plugin_default;
101
+ exports.mosaicPlugin = mosaicPlugin;
102
+ //# sourceMappingURL=tailwind-plugin.cjs.map
103
+ //# sourceMappingURL=tailwind-plugin.cjs.map
package/dist/tailwind-plugin.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/tokens.ts","../src/tailwind-plugin.ts"],"names":[],"mappings":"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","file":"tailwind-plugin.cjs","sourcesContent":["/**\n * @vantageos/mosaic-tokens — design tokens (T3-B implementation).\n *\n * Framework-free, OKLCH-based, mirror of the CSS custom properties in\n * tokens.css. Consumers can opt for either the CSS surface (Tailwind v4\n * + @theme inline) or the JS surface (typed runtime access in JSX styles,\n * Storybook stories, Playwright assertions, snapshot tests).\n *\n * Size targets (.size-limit.json): JS bundle ≤5 KB gz, CSS ≤3 KB gz.\n *\n * Schema invariants (enforced by mosaic-tokens-coherence-test in T3-C):\n * - Every CSS var has a JS counterpart (and vice versa).\n * - Color shades 50 < 500 < 700 monotonic luminance.\n * - Spacing scale ascending, ratio 1.5x average (4 → 64 px).\n * - Typography scale uses 1.25x ratio (12 → 38 px).\n * - Shadow elevation 0 < 1 < 2 < 3 < 4 < 5 monotonic blur radius.\n * - Radii strictly ascending (none → full).\n */\n\nexport interface MosaicTokens {\n readonly colors: Readonly<Record<string, string>>;\n readonly spacing: Readonly<Record<string, string>>;\n readonly typography: Readonly<Record<string, string>>;\n readonly shadows: Readonly<Record<string, string>>;\n readonly radii: Readonly<Record<string, string>>;\n readonly motion: Readonly<Record<string, string>>;\n}\n\n// Colors — semantic statuses × 3 shades (50/500/700), OKLCH.\n// 50 = surface tint, 500 = brand body, 700 = accessible contrast on light bg.\nexport const colors: MosaicTokens[\"colors\"] = Object.freeze({\n \"success-50\": \"oklch(0.965 0.040 145)\",\n \"success-500\": \"oklch(0.660 0.180 145)\",\n \"success-700\": \"oklch(0.470 0.140 145)\",\n \"warning-50\": \"oklch(0.975 0.045 85)\",\n \"warning-500\": \"oklch(0.770 0.170 85)\",\n \"warning-700\": \"oklch(0.560 0.145 65)\",\n \"danger-50\": \"oklch(0.965 0.035 25)\",\n \"danger-500\": \"oklch(0.640 0.205 25)\",\n \"danger-700\": \"oklch(0.460 0.180 25)\",\n \"info-50\": \"oklch(0.970 0.035 250)\",\n \"info-500\": \"oklch(0.650 0.170 250)\",\n \"info-700\": \"oklch(0.460 0.150 250)\",\n \"neutral-50\": \"oklch(0.980 0.005 250)\",\n \"neutral-500\": \"oklch(0.580 0.012 250)\",\n \"neutral-700\": \"oklch(0.380 0.010 250)\",\n});\n\n// Spacing — 4 → 64 px scale.\nexport const spacing: MosaicTokens[\"spacing\"] = Object.freeze({\n \"1\": \"4px\",\n \"2\": \"8px\",\n \"3\": \"12px\",\n \"4\": \"16px\",\n \"6\": \"24px\",\n \"8\": \"32px\",\n \"12\": \"48px\",\n \"16\": \"64px\",\n});\n\n// Typography — 1.25x font-size scale + line-height + weight.\nexport const typography: MosaicTokens[\"typography\"] = Object.freeze({\n \"size-xs\": \"12px\",\n \"size-sm\": \"14px\",\n \"size-base\": \"16px\",\n \"size-lg\": \"20px\",\n \"size-xl\": \"24px\",\n \"size-2xl\": \"30px\",\n \"size-3xl\": \"38px\",\n \"lh-tight\": \"1.2\",\n \"lh-normal\": \"1.5\",\n \"lh-relaxed\": \"1.6\",\n \"weight-regular\": \"400\",\n \"weight-medium\": \"500\",\n \"weight-semibold\": \"600\",\n \"weight-bold\": \"700\",\n});\n\n// Shadows — 6 elevation steps, OKLCH neutral tint.\nexport const shadows: MosaicTokens[\"shadows\"] = Object.freeze({\n \"0\": \"none\",\n \"1\": \"0 1px 2px 0 oklch(0.200 0.010 250 / 0.05)\",\n \"2\": \"0 2px 4px -1px oklch(0.200 0.010 250 / 0.08), 0 1px 2px -1px oklch(0.200 0.010 250 / 0.06)\",\n \"3\": \"0 4px 8px -2px oklch(0.200 0.010 250 / 0.10), 0 2px 4px -2px oklch(0.200 0.010 250 / 0.06)\",\n \"4\": \"0 8px 16px -4px oklch(0.200 0.010 250 / 0.12), 0 4px 8px -4px oklch(0.200 0.010 250 / 0.08)\",\n \"5\": \"0 16px 32px -8px oklch(0.200 0.010 250 / 0.16), 0 8px 16px -8px oklch(0.200 0.010 250 / 0.10)\",\n});\n\n// Radii — strictly ascending (none → full).\nexport const radii: MosaicTokens[\"radii\"] = Object.freeze({\n none: \"0px\",\n xs: \"2px\",\n sm: \"4px\",\n md: \"6px\",\n lg: \"8px\",\n xl: \"12px\",\n full: \"9999px\",\n});\n\n// Motion — durations + easing curves.\nexport const motion: MosaicTokens[\"motion\"] = Object.freeze({\n \"duration-fast\": \"75ms\",\n \"duration-base\": \"150ms\",\n \"duration-slow\": \"300ms\",\n \"easing-linear\": \"linear\",\n \"easing-ease\": \"cubic-bezier(0.4, 0, 0.2, 1)\",\n \"easing-in\": \"cubic-bezier(0.4, 0, 1, 1)\",\n \"easing-out\": \"cubic-bezier(0, 0, 0.2, 1)\",\n \"easing-in-out\": \"cubic-bezier(0.4, 0, 0.2, 1)\",\n});\n\nexport const tokens: MosaicTokens = Object.freeze({\n colors,\n spacing,\n typography,\n shadows,\n radii,\n motion,\n});\n\nexport default tokens;\n","/**\n * @vantageos/mosaic-tokens/tailwind — Tailwind v4 plugin (skeleton).\n *\n * Full mapping (theme.extend.colors / spacing / etc → mosaic-* CSS vars)\n * lands in T3-B. This skeleton fixes the export shape so consumers can\n * already wire `import mosaicPlugin from \"@vantageos/mosaic-tokens/tailwind\"`.\n */\nimport { tokens } from \"./tokens\";\n\nexport interface MosaicTailwindPlugin {\n readonly theme: {\n readonly extend: {\n readonly colors: Readonly<Record<string, string>>;\n readonly spacing: Readonly<Record<string, string>>;\n readonly fontSize: Readonly<Record<string, string>>;\n readonly boxShadow: Readonly<Record<string, string>>;\n readonly borderRadius: Readonly<Record<string, string>>;\n readonly transitionDuration: Readonly<Record<string, string>>;\n };\n };\n}\n\nexport const mosaicPlugin: MosaicTailwindPlugin = Object.freeze({\n theme: {\n extend: {\n colors: tokens.colors,\n spacing: tokens.spacing,\n fontSize: tokens.typography,\n boxShadow: tokens.shadows,\n borderRadius: tokens.radii,\n transitionDuration: tokens.motion,\n },\n },\n});\n\nexport default mosaicPlugin;\n"]}
package/dist/tailwind-plugin.d.cts ADDED
@@ -0,0 +1,15 @@
1
+ interface MosaicTailwindPlugin {
2
+ readonly theme: {
3
+ readonly extend: {
4
+ readonly colors: Readonly<Record<string, string>>;
5
+ readonly spacing: Readonly<Record<string, string>>;
6
+ readonly fontSize: Readonly<Record<string, string>>;
7
+ readonly boxShadow: Readonly<Record<string, string>>;
8
+ readonly borderRadius: Readonly<Record<string, string>>;
9
+ readonly transitionDuration: Readonly<Record<string, string>>;
10
+ };
11
+ };
12
+ }
13
+ declare const mosaicPlugin: MosaicTailwindPlugin;
14
+
15
+ export { type MosaicTailwindPlugin, mosaicPlugin as default, mosaicPlugin };
package/dist/tailwind-plugin.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ interface MosaicTailwindPlugin {
2
+ readonly theme: {
3
+ readonly extend: {
4
+ readonly colors: Readonly<Record<string, string>>;
5
+ readonly spacing: Readonly<Record<string, string>>;
6
+ readonly fontSize: Readonly<Record<string, string>>;
7
+ readonly boxShadow: Readonly<Record<string, string>>;
8
+ readonly borderRadius: Readonly<Record<string, string>>;
9
+ readonly transitionDuration: Readonly<Record<string, string>>;
10
+ };
11
+ };
12
+ }
13
+ declare const mosaicPlugin: MosaicTailwindPlugin;
14
+
15
+ export { type MosaicTailwindPlugin, mosaicPlugin as default, mosaicPlugin };
package/dist/tailwind-plugin.js ADDED
@@ -0,0 +1,98 @@
1
+ // src/tokens.ts
2
+ var colors = Object.freeze({
3
+ "success-50": "oklch(0.965 0.040 145)",
4
+ "success-500": "oklch(0.660 0.180 145)",
5
+ "success-700": "oklch(0.470 0.140 145)",
6
+ "warning-50": "oklch(0.975 0.045 85)",
7
+ "warning-500": "oklch(0.770 0.170 85)",
8
+ "warning-700": "oklch(0.560 0.145 65)",
9
+ "danger-50": "oklch(0.965 0.035 25)",
10
+ "danger-500": "oklch(0.640 0.205 25)",
11
+ "danger-700": "oklch(0.460 0.180 25)",
12
+ "info-50": "oklch(0.970 0.035 250)",
13
+ "info-500": "oklch(0.650 0.170 250)",
14
+ "info-700": "oklch(0.460 0.150 250)",
15
+ "neutral-50": "oklch(0.980 0.005 250)",
16
+ "neutral-500": "oklch(0.580 0.012 250)",
17
+ "neutral-700": "oklch(0.380 0.010 250)"
18
+ });
19
+ var spacing = Object.freeze({
20
+ "1": "4px",
21
+ "2": "8px",
22
+ "3": "12px",
23
+ "4": "16px",
24
+ "6": "24px",
25
+ "8": "32px",
26
+ "12": "48px",
27
+ "16": "64px"
28
+ });
29
+ var typography = Object.freeze({
30
+ "size-xs": "12px",
31
+ "size-sm": "14px",
32
+ "size-base": "16px",
33
+ "size-lg": "20px",
34
+ "size-xl": "24px",
35
+ "size-2xl": "30px",
36
+ "size-3xl": "38px",
37
+ "lh-tight": "1.2",
38
+ "lh-normal": "1.5",
39
+ "lh-relaxed": "1.6",
40
+ "weight-regular": "400",
41
+ "weight-medium": "500",
42
+ "weight-semibold": "600",
43
+ "weight-bold": "700"
44
+ });
45
+ var shadows = Object.freeze({
46
+ "0": "none",
47
+ "1": "0 1px 2px 0 oklch(0.200 0.010 250 / 0.05)",
48
+ "2": "0 2px 4px -1px oklch(0.200 0.010 250 / 0.08), 0 1px 2px -1px oklch(0.200 0.010 250 / 0.06)",
49
+ "3": "0 4px 8px -2px oklch(0.200 0.010 250 / 0.10), 0 2px 4px -2px oklch(0.200 0.010 250 / 0.06)",
50
+ "4": "0 8px 16px -4px oklch(0.200 0.010 250 / 0.12), 0 4px 8px -4px oklch(0.200 0.010 250 / 0.08)",
51
+ "5": "0 16px 32px -8px oklch(0.200 0.010 250 / 0.16), 0 8px 16px -8px oklch(0.200 0.010 250 / 0.10)"
52
+ });
53
+ var radii = Object.freeze({
54
+ none: "0px",
55
+ xs: "2px",
56
+ sm: "4px",
57
+ md: "6px",
58
+ lg: "8px",
59
+ xl: "12px",
60
+ full: "9999px"
61
+ });
62
+ var motion = Object.freeze({
63
+ "duration-fast": "75ms",
64
+ "duration-base": "150ms",
65
+ "duration-slow": "300ms",
66
+ "easing-linear": "linear",
67
+ "easing-ease": "cubic-bezier(0.4, 0, 0.2, 1)",
68
+ "easing-in": "cubic-bezier(0.4, 0, 1, 1)",
69
+ "easing-out": "cubic-bezier(0, 0, 0.2, 1)",
70
+ "easing-in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
71
+ });
72
+ var tokens = Object.freeze({
73
+ colors,
74
+ spacing,
75
+ typography,
76
+ shadows,
77
+ radii,
78
+ motion
79
+ });
80
+
81
+ // src/tailwind-plugin.ts
82
+ var mosaicPlugin = Object.freeze({
83
+ theme: {
84
+ extend: {
85
+ colors: tokens.colors,
86
+ spacing: tokens.spacing,
87
+ fontSize: tokens.typography,
88
+ boxShadow: tokens.shadows,
89
+ borderRadius: tokens.radii,
90
+ transitionDuration: tokens.motion
91
+ }
92
+ }
93
+ });
94
+ var tailwind_plugin_default = mosaicPlugin;
95
+
96
+ export { tailwind_plugin_default as default, mosaicPlugin };
97
+ //# sourceMappingURL=tailwind-plugin.js.map
98
+ //# sourceMappingURL=tailwind-plugin.js.map
package/dist/tailwind-plugin.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/tokens.ts","../src/tailwind-plugin.ts"],"names":[],"mappings":";AA8BO,IAAM,MAAA,GAAiC,OAAO,MAAA,CAAO;AAAA,EAC1D,YAAA,EAAc,wBAAA;AAAA,EACd,aAAA,EAAe,wBAAA;AAAA,EACf,aAAA,EAAe,wBAAA;AAAA,EACf,YAAA,EAAc,uBAAA;AAAA,EACd,aAAA,EAAe,uBAAA;AAAA,EACf,aAAA,EAAe,uBAAA;AAAA,EACf,WAAA,EAAa,uBAAA;AAAA,EACb,YAAA,EAAc,uBAAA;AAAA,EACd,YAAA,EAAc,uBAAA;AAAA,EACd,SAAA,EAAW,wBAAA;AAAA,EACX,UAAA,EAAY,wBAAA;AAAA,EACZ,UAAA,EAAY,wBAAA;AAAA,EACZ,YAAA,EAAc,wBAAA;AAAA,EACd,aAAA,EAAe,wBAAA;AAAA,EACf,aAAA,EAAe;AACjB,CAAC,CAAA;AAGM,IAAM,OAAA,GAAmC,OAAO,MAAA,CAAO;AAAA,EAC5D,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,MAAA;AAAA,EACL,GAAA,EAAK,MAAA;AAAA,EACL,GAAA,EAAK,MAAA;AAAA,EACL,GAAA,EAAK,MAAA;AAAA,EACL,IAAA,EAAM,MAAA;AAAA,EACN,IAAA,EAAM;AACR,CAAC,CAAA;AAGM,IAAM,UAAA,GAAyC,OAAO,MAAA,CAAO;AAAA,EAClE,SAAA,EAAW,MAAA;AAAA,EACX,SAAA,EAAW,MAAA;AAAA,EACX,WAAA,EAAa,MAAA;AAAA,EACb,SAAA,EAAW,MAAA;AAAA,EACX,SAAA,EAAW,MAAA;AAAA,EACX,UAAA,EAAY,MAAA;AAAA,EACZ,UAAA,EAAY,MAAA;AAAA,EACZ,UAAA,EAAY,KAAA;AAAA,EACZ,WAAA,EAAa,KAAA;AAAA,EACb,YAAA,EAAc,KAAA;AAAA,EACd,gBAAA,EAAkB,KAAA;AAAA,EAClB,eAAA,EAAiB,KAAA;AAAA,EACjB,iBAAA,EAAmB,KAAA;AAAA,EACnB,aAAA,EAAe;AACjB,CAAC,CAAA;AAGM,IAAM,OAAA,GAAmC,OAAO,MAAA,CAAO;AAAA,EAC5D,GAAA,EAAK,MAAA;AAAA,EACL,GAAA,EAAK,2CAAA;AAAA,EACL,GAAA,EAAK,4FAAA;AAAA,EACL,GAAA,EAAK,4FAAA;AAAA,EACL,GAAA,EAAK,6FAAA;AAAA,EACL,GAAA,EAAK;AACP,CAAC,CAAA;AAGM,IAAM,KAAA,GAA+B,OAAO,MAAA,CAAO;AAAA,EACxD,IAAA,EAAM,KAAA;AAAA,EACN,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,MAAA;AAAA,EACJ,IAAA,EAAM;AACR,CAAC,CAAA;AAGM,IAAM,MAAA,GAAiC,OAAO,MAAA,CAAO;AAAA,EAC1D,eAAA,EAAiB,MAAA;AAAA,EACjB,eAAA,EAAiB,OAAA;AAAA,EACjB,eAAA,EAAiB,OAAA;AAAA,EACjB,eAAA,EAAiB,QAAA;AAAA,EACjB,aAAA,EAAe,8BAAA;AAAA,EACf,WAAA,EAAa,4BAAA;AAAA,EACb,YAAA,EAAc,4BAAA;AAAA,EACd,eAAA,EAAiB;AACnB,CAAC,CAAA;AAEM,IAAM,MAAA,GAAuB,OAAO,MAAA,CAAO;AAAA,EAChD,MAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAC,CAAA;;;AChGM,IAAM,YAAA,GAAqC,OAAO,MAAA,CAAO;AAAA,EAC9D,KAAA,EAAO;AAAA,IACL,MAAA,EAAQ;AAAA,MACN,QAAQ,MAAA,CAAO,MAAA;AAAA,MACf,SAAS,MAAA,CAAO,OAAA;AAAA,MAChB,UAAU,MAAA,CAAO,UAAA;AAAA,MACjB,WAAW,MAAA,CAAO,OAAA;AAAA,MAClB,cAAc,MAAA,CAAO,KAAA;AAAA,MACrB,oBAAoB,MAAA,CAAO;AAAA;AAC7B;AAEJ,CAAC;AAED,IAAO,uBAAA,GAAQ","file":"tailwind-plugin.js","sourcesContent":["/**\n * @vantageos/mosaic-tokens — design tokens (T3-B implementation).\n *\n * Framework-free, OKLCH-based, mirror of the CSS custom properties in\n * tokens.css. Consumers can opt for either the CSS surface (Tailwind v4\n * + @theme inline) or the JS surface (typed runtime access in JSX styles,\n * Storybook stories, Playwright assertions, snapshot tests).\n *\n * Size targets (.size-limit.json): JS bundle ≤5 KB gz, CSS ≤3 KB gz.\n *\n * Schema invariants (enforced by mosaic-tokens-coherence-test in T3-C):\n * - Every CSS var has a JS counterpart (and vice versa).\n * - Color shades 50 < 500 < 700 monotonic luminance.\n * - Spacing scale ascending, ratio 1.5x average (4 → 64 px).\n * - Typography scale uses 1.25x ratio (12 → 38 px).\n * - Shadow elevation 0 < 1 < 2 < 3 < 4 < 5 monotonic blur radius.\n * - Radii strictly ascending (none → full).\n */\n\nexport interface MosaicTokens {\n readonly colors: Readonly<Record<string, string>>;\n readonly spacing: Readonly<Record<string, string>>;\n readonly typography: Readonly<Record<string, string>>;\n readonly shadows: Readonly<Record<string, string>>;\n readonly radii: Readonly<Record<string, string>>;\n readonly motion: Readonly<Record<string, string>>;\n}\n\n// Colors — semantic statuses × 3 shades (50/500/700), OKLCH.\n// 50 = surface tint, 500 = brand body, 700 = accessible contrast on light bg.\nexport const colors: MosaicTokens[\"colors\"] = Object.freeze({\n \"success-50\": \"oklch(0.965 0.040 145)\",\n \"success-500\": \"oklch(0.660 0.180 145)\",\n \"success-700\": \"oklch(0.470 0.140 145)\",\n \"warning-50\": \"oklch(0.975 0.045 85)\",\n \"warning-500\": \"oklch(0.770 0.170 85)\",\n \"warning-700\": \"oklch(0.560 0.145 65)\",\n \"danger-50\": \"oklch(0.965 0.035 25)\",\n \"danger-500\": \"oklch(0.640 0.205 25)\",\n \"danger-700\": \"oklch(0.460 0.180 25)\",\n \"info-50\": \"oklch(0.970 0.035 250)\",\n \"info-500\": \"oklch(0.650 0.170 250)\",\n \"info-700\": \"oklch(0.460 0.150 250)\",\n \"neutral-50\": \"oklch(0.980 0.005 250)\",\n \"neutral-500\": \"oklch(0.580 0.012 250)\",\n \"neutral-700\": \"oklch(0.380 0.010 250)\",\n});\n\n// Spacing — 4 → 64 px scale.\nexport const spacing: MosaicTokens[\"spacing\"] = Object.freeze({\n \"1\": \"4px\",\n \"2\": \"8px\",\n \"3\": \"12px\",\n \"4\": \"16px\",\n \"6\": \"24px\",\n \"8\": \"32px\",\n \"12\": \"48px\",\n \"16\": \"64px\",\n});\n\n// Typography — 1.25x font-size scale + line-height + weight.\nexport const typography: MosaicTokens[\"typography\"] = Object.freeze({\n \"size-xs\": \"12px\",\n \"size-sm\": \"14px\",\n \"size-base\": \"16px\",\n \"size-lg\": \"20px\",\n \"size-xl\": \"24px\",\n \"size-2xl\": \"30px\",\n \"size-3xl\": \"38px\",\n \"lh-tight\": \"1.2\",\n \"lh-normal\": \"1.5\",\n \"lh-relaxed\": \"1.6\",\n \"weight-regular\": \"400\",\n \"weight-medium\": \"500\",\n \"weight-semibold\": \"600\",\n \"weight-bold\": \"700\",\n});\n\n// Shadows — 6 elevation steps, OKLCH neutral tint.\nexport const shadows: MosaicTokens[\"shadows\"] = Object.freeze({\n \"0\": \"none\",\n \"1\": \"0 1px 2px 0 oklch(0.200 0.010 250 / 0.05)\",\n \"2\": \"0 2px 4px -1px oklch(0.200 0.010 250 / 0.08), 0 1px 2px -1px oklch(0.200 0.010 250 / 0.06)\",\n \"3\": \"0 4px 8px -2px oklch(0.200 0.010 250 / 0.10), 0 2px 4px -2px oklch(0.200 0.010 250 / 0.06)\",\n \"4\": \"0 8px 16px -4px oklch(0.200 0.010 250 / 0.12), 0 4px 8px -4px oklch(0.200 0.010 250 / 0.08)\",\n \"5\": \"0 16px 32px -8px oklch(0.200 0.010 250 / 0.16), 0 8px 16px -8px oklch(0.200 0.010 250 / 0.10)\",\n});\n\n// Radii — strictly ascending (none → full).\nexport const radii: MosaicTokens[\"radii\"] = Object.freeze({\n none: \"0px\",\n xs: \"2px\",\n sm: \"4px\",\n md: \"6px\",\n lg: \"8px\",\n xl: \"12px\",\n full: \"9999px\",\n});\n\n// Motion — durations + easing curves.\nexport const motion: MosaicTokens[\"motion\"] = Object.freeze({\n \"duration-fast\": \"75ms\",\n \"duration-base\": \"150ms\",\n \"duration-slow\": \"300ms\",\n \"easing-linear\": \"linear\",\n \"easing-ease\": \"cubic-bezier(0.4, 0, 0.2, 1)\",\n \"easing-in\": \"cubic-bezier(0.4, 0, 1, 1)\",\n \"easing-out\": \"cubic-bezier(0, 0, 0.2, 1)\",\n \"easing-in-out\": \"cubic-bezier(0.4, 0, 0.2, 1)\",\n});\n\nexport const tokens: MosaicTokens = Object.freeze({\n colors,\n spacing,\n typography,\n shadows,\n radii,\n motion,\n});\n\nexport default tokens;\n","/**\n * @vantageos/mosaic-tokens/tailwind — Tailwind v4 plugin (skeleton).\n *\n * Full mapping (theme.extend.colors / spacing / etc → mosaic-* CSS vars)\n * lands in T3-B. This skeleton fixes the export shape so consumers can\n * already wire `import mosaicPlugin from \"@vantageos/mosaic-tokens/tailwind\"`.\n */\nimport { tokens } from \"./tokens\";\n\nexport interface MosaicTailwindPlugin {\n readonly theme: {\n readonly extend: {\n readonly colors: Readonly<Record<string, string>>;\n readonly spacing: Readonly<Record<string, string>>;\n readonly fontSize: Readonly<Record<string, string>>;\n readonly boxShadow: Readonly<Record<string, string>>;\n readonly borderRadius: Readonly<Record<string, string>>;\n readonly transitionDuration: Readonly<Record<string, string>>;\n };\n };\n}\n\nexport const mosaicPlugin: MosaicTailwindPlugin = Object.freeze({\n theme: {\n extend: {\n colors: tokens.colors,\n spacing: tokens.spacing,\n fontSize: tokens.typography,\n boxShadow: tokens.shadows,\n borderRadius: tokens.radii,\n transitionDuration: tokens.motion,\n },\n },\n});\n\nexport default mosaicPlugin;\n"]}
package/package.json ADDED
@@ -0,0 +1,56 @@
1
+ {
2
+ "name": "@vantageos/mosaic-tokens",
3
+ "version": "0.2.0",
4
+ "description": "Framework-free design tokens (colors, spacing, typography, shadows, radii, motion) for @vantageos/mosaic — CSS custom props + JS exports + Tailwind v4 plugin.",
5
+ "type": "module",
6
+ "main": "./dist/index.cjs",
7
+ "module": "./dist/index.js",
8
+ "types": "./dist/index.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "types": "./dist/index.d.ts",
12
+ "import": "./dist/index.js",
13
+ "require": "./dist/index.cjs"
14
+ },
15
+ "./css": "./src/tokens.css",
16
+ "./tailwind": {
17
+ "types": "./dist/tailwind-plugin.d.ts",
18
+ "import": "./dist/tailwind-plugin.js"
19
+ }
20
+ },
21
+ "files": [
22
+ "dist",
23
+ "src/tokens.css",
24
+ "README.md"
25
+ ],
26
+ "sideEffects": [
27
+ "**/*.css"
28
+ ],
29
+ "dependencies": {},
30
+ "peerDependencies": {
31
+ "tailwindcss": "^4.1.0"
32
+ },
33
+ "peerDependenciesMeta": {
34
+ "tailwindcss": {
35
+ "optional": true
36
+ }
37
+ },
38
+ "devDependencies": {
39
+ "@biomejs/biome": "1.9.4",
40
+ "@size-limit/preset-small-lib": "11.2.0",
41
+ "@vitest/coverage-v8": "3.2.2",
42
+ "jsdom": "26.0.0",
43
+ "size-limit": "11.2.0",
44
+ "tailwindcss": "4.1.8",
45
+ "tsup": "8.4.0",
46
+ "typescript": "5.8.3",
47
+ "vitest": "3.2.2"
48
+ },
49
+ "scripts": {
50
+ "build": "tsup",
51
+ "dev": "tsup --watch",
52
+ "test": "vitest run",
53
+ "lint": "biome check --error-on-warnings src",
54
+ "size-limit": "size-limit"
55
+ }
56
+ }
package/src/tokens.css ADDED
@@ -0,0 +1,84 @@
1
+ /*
2
+ * @vantageos/mosaic-tokens — CSS custom properties (T3-B implementation).
3
+ *
4
+ * Mirror of tokens.ts. Consumers can:
5
+ * 1. import "@vantageos/mosaic-tokens/css" — surface in :root globally
6
+ * 2. apply the Tailwind v4 plugin (./tailwind) for @theme inline integration
7
+ * 3. import the JS tokens for typed runtime access
8
+ *
9
+ * Naming convention: --mosaic-<category>-<key>. Categories: color, space,
10
+ * text, lh, fw, shadow, radius, duration, easing. All vars declared on :root.
11
+ *
12
+ * Size target: ≤3 KB gz (enforced via size-limit gate).
13
+ */
14
+ :root {
15
+ /* Colors — semantic × 3 shades, OKLCH */
16
+ --mosaic-color-success-50: oklch(0.965 0.040 145);
17
+ --mosaic-color-success-500: oklch(0.660 0.180 145);
18
+ --mosaic-color-success-700: oklch(0.470 0.140 145);
19
+ --mosaic-color-warning-50: oklch(0.975 0.045 85);
20
+ --mosaic-color-warning-500: oklch(0.770 0.170 85);
21
+ --mosaic-color-warning-700: oklch(0.560 0.145 65);
22
+ --mosaic-color-danger-50: oklch(0.965 0.035 25);
23
+ --mosaic-color-danger-500: oklch(0.640 0.205 25);
24
+ --mosaic-color-danger-700: oklch(0.460 0.180 25);
25
+ --mosaic-color-info-50: oklch(0.970 0.035 250);
26
+ --mosaic-color-info-500: oklch(0.650 0.170 250);
27
+ --mosaic-color-info-700: oklch(0.460 0.150 250);
28
+ --mosaic-color-neutral-50: oklch(0.980 0.005 250);
29
+ --mosaic-color-neutral-500: oklch(0.580 0.012 250);
30
+ --mosaic-color-neutral-700: oklch(0.380 0.010 250);
31
+
32
+ /* Spacing — 4 → 64 px */
33
+ --mosaic-space-1: 4px;
34
+ --mosaic-space-2: 8px;
35
+ --mosaic-space-3: 12px;
36
+ --mosaic-space-4: 16px;
37
+ --mosaic-space-6: 24px;
38
+ --mosaic-space-8: 32px;
39
+ --mosaic-space-12: 48px;
40
+ --mosaic-space-16: 64px;
41
+
42
+ /* Typography — 1.25x scale + line-height + weight */
43
+ --mosaic-text-xs: 12px;
44
+ --mosaic-text-sm: 14px;
45
+ --mosaic-text-base: 16px;
46
+ --mosaic-text-lg: 20px;
47
+ --mosaic-text-xl: 24px;
48
+ --mosaic-text-2xl: 30px;
49
+ --mosaic-text-3xl: 38px;
50
+ --mosaic-lh-tight: 1.2;
51
+ --mosaic-lh-normal: 1.5;
52
+ --mosaic-lh-relaxed: 1.6;
53
+ --mosaic-fw-regular: 400;
54
+ --mosaic-fw-medium: 500;
55
+ --mosaic-fw-semibold: 600;
56
+ --mosaic-fw-bold: 700;
57
+
58
+ /* Shadows — 6 elevation, OKLCH neutral tint */
59
+ --mosaic-shadow-0: none;
60
+ --mosaic-shadow-1: 0 1px 2px 0 oklch(0.200 0.010 250 / 0.05);
61
+ --mosaic-shadow-2: 0 2px 4px -1px oklch(0.200 0.010 250 / 0.08), 0 1px 2px -1px oklch(0.200 0.010 250 / 0.06);
62
+ --mosaic-shadow-3: 0 4px 8px -2px oklch(0.200 0.010 250 / 0.10), 0 2px 4px -2px oklch(0.200 0.010 250 / 0.06);
63
+ --mosaic-shadow-4: 0 8px 16px -4px oklch(0.200 0.010 250 / 0.12), 0 4px 8px -4px oklch(0.200 0.010 250 / 0.08);
64
+ --mosaic-shadow-5: 0 16px 32px -8px oklch(0.200 0.010 250 / 0.16), 0 8px 16px -8px oklch(0.200 0.010 250 / 0.10);
65
+
66
+ /* Radii — strictly ascending */
67
+ --mosaic-radius-none: 0px;
68
+ --mosaic-radius-xs: 2px;
69
+ --mosaic-radius-sm: 4px;
70
+ --mosaic-radius-md: 6px;
71
+ --mosaic-radius-lg: 8px;
72
+ --mosaic-radius-xl: 12px;
73
+ --mosaic-radius-full: 9999px;
74
+
75
+ /* Motion — durations + easing */
76
+ --mosaic-duration-fast: 75ms;
77
+ --mosaic-duration-base: 150ms;
78
+ --mosaic-duration-slow: 300ms;
79
+ --mosaic-easing-linear: linear;
80
+ --mosaic-easing-ease: cubic-bezier(0.4, 0, 0.2, 1);
81
+ --mosaic-easing-in: cubic-bezier(0.4, 0, 1, 1);
82
+ --mosaic-easing-out: cubic-bezier(0, 0, 0.2, 1);
83
+ --mosaic-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
84
+ }