@dgithiomi/sbui-web 1.0.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 (16) hide show
  1. package/dist/chunk-3QS3WKRC.mjs +31 -0
  2. package/dist/chunk-3QS3WKRC.mjs.map +1 -0
  3. package/dist/index.cjs +3649 -0
  4. package/dist/index.cjs.map +1 -0
  5. package/dist/index.d.cts +225 -0
  6. package/dist/index.d.ts +225 -0
  7. package/dist/index.mjs +3613 -0
  8. package/dist/index.mjs.map +1 -0
  9. package/dist/styles.css +1245 -0
  10. package/dist/tailwind-preset.cjs +266 -0
  11. package/dist/tailwind-preset.cjs.map +1 -0
  12. package/dist/tailwind-preset.d.cts +23 -0
  13. package/dist/tailwind-preset.d.ts +23 -0
  14. package/dist/tailwind-preset.mjs +246 -0
  15. package/dist/tailwind-preset.mjs.map +1 -0
  16. package/package.json +76 -0
package/dist/tailwind-preset.cjs ADDED
@@ -0,0 +1,266 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __getOwnPropNames = Object.getOwnPropertyNames;
4
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
5
+ var __export = (target, all) => {
6
+ for (var name in all)
7
+ __defProp(target, name, { get: all[name], enumerable: true });
8
+ };
9
+ var __copyProps = (to, from, except, desc) => {
10
+ if (from && typeof from === "object" || typeof from === "function") {
11
+ for (let key of __getOwnPropNames(from))
12
+ if (!__hasOwnProp.call(to, key) && key !== except)
13
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
14
+ }
15
+ return to;
16
+ };
17
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
18
+
19
+ // tailwind.preset.ts
20
+ var tailwind_preset_exports = {};
21
+ __export(tailwind_preset_exports, {
22
+ default: () => tailwind_preset_default
23
+ });
24
+ module.exports = __toCommonJS(tailwind_preset_exports);
25
+
26
+ // ../../packages/assets/colors.ts
27
+ var primary = {
28
+ 900: "#002a3b",
29
+ 800: "#00435e",
30
+ 700: "#004560",
31
+ 600: "#005374",
32
+ 500: "#00829d",
33
+ 400: "#009cbc"
34
+ };
35
+ var accent = {
36
+ 500: "#ffed00",
37
+ 400: "#fff351",
38
+ 300: "#d6d3a2"
39
+ };
40
+ var success = {
41
+ 700: "#01583E",
42
+ 600: "#047857",
43
+ 500: "#10B981",
44
+ 400: "#069668",
45
+ 300: "#3fa41a",
46
+ 200: "#0FE630"
47
+ };
48
+ var error = {
49
+ 700: "#561000",
50
+ 600: "#931F06",
51
+ 500: "#dc3545",
52
+ 400: "#F80505"
53
+ };
54
+ var warning = {
55
+ 700: "#583300",
56
+ 600: "#935801",
57
+ 500: "#f9a201"
58
+ };
59
+ var neutral = {
60
+ 900: "#000000",
61
+ 800: "#002a3b",
62
+ 700: "#004560",
63
+ 600: "#707070",
64
+ 500: "#a2a8a8",
65
+ 400: "#cccccc",
66
+ 300: "#F5F5F5",
67
+ 200: "#ffffff"
68
+ };
69
+ var opacity = {
70
+ black: {
71
+ 100: "rgba(0,0,0,0.3)",
72
+ 200: "rgba(0,0,0,0.5)",
73
+ 300: "rgba(0,0,0,0.7)",
74
+ 400: "rgba(0,0,0,0.75)"
75
+ },
76
+ primary: {
77
+ 100: "rgba(0,156,188,0.02)",
78
+ 200: "rgba(0,156,188,0.03)",
79
+ 300: "rgba(0,156,188,0.3)",
80
+ 400: "rgba(0,156,188,0.4)"
81
+ },
82
+ neutral: {
83
+ 100: "rgba(112,112,112,0.1)",
84
+ 200: "rgba(112,112,112,0.2)",
85
+ 300: "rgba(112,112,112,0.6)"
86
+ }
87
+ };
88
+ var gradients = {
89
+ body: "radial-gradient(circle, #004560 0%, #00435e 33%, #002a3b 100%)",
90
+ overlayLeft: "linear-gradient(270deg, rgba(0,42,59,0) 0%, rgba(0,42,59,0.5) 48.8%, #002a3b 97.66%)",
91
+ overlayRight: "linear-gradient(90deg, rgba(0,42,59,0) 0%, rgba(0,42,59,0.5) 48.8%, #002a3b 97.66%)"
92
+ };
93
+ var light = {
94
+ background: {
95
+ primary: neutral[200],
96
+ secondary: neutral[300],
97
+ tertiary: neutral[400],
98
+ surface: "#ffffff",
99
+ inverse: primary[900]
100
+ },
101
+ text: {
102
+ primary: neutral[900],
103
+ secondary: neutral[600],
104
+ tertiary: neutral[500],
105
+ inverse: neutral[200],
106
+ brand: primary[700],
107
+ link: accent[500]
108
+ },
109
+ border: {
110
+ default: opacity.neutral[200],
111
+ subtle: opacity.neutral[100],
112
+ strong: neutral[500]
113
+ },
114
+ button: {
115
+ primary: {
116
+ bg: accent[500],
117
+ hover: accent[400],
118
+ text: primary[700],
119
+ disabledBg: accent[300]
120
+ },
121
+ secondary: {
122
+ bg: primary[600],
123
+ hover: primary[700],
124
+ text: neutral[200]
125
+ },
126
+ ghost: {
127
+ text: primary[700],
128
+ hoverBg: opacity.neutral[100]
129
+ }
130
+ },
131
+ status: {
132
+ success: success[500],
133
+ error: error[500],
134
+ warning: warning[500],
135
+ neutral: neutral[500]
136
+ }
137
+ };
138
+ var dark = {
139
+ background: {
140
+ primary: primary[900],
141
+ secondary: primary[800],
142
+ tertiary: primary[700],
143
+ surface: primary[800],
144
+ inverse: neutral[200]
145
+ },
146
+ text: {
147
+ primary: neutral[200],
148
+ secondary: neutral[500],
149
+ tertiary: neutral[400],
150
+ inverse: neutral[900],
151
+ brand: primary[400],
152
+ link: accent[500]
153
+ },
154
+ border: {
155
+ default: opacity.primary[200],
156
+ subtle: opacity.primary[100],
157
+ strong: primary[600]
158
+ },
159
+ button: {
160
+ primary: {
161
+ bg: accent[500],
162
+ hover: accent[400],
163
+ text: primary[700],
164
+ disabledBg: accent[300]
165
+ },
166
+ secondary: {
167
+ bg: primary[600],
168
+ hover: primary[700],
169
+ text: neutral[200]
170
+ },
171
+ ghost: {
172
+ text: neutral[200],
173
+ hoverBg: opacity.black[100]
174
+ }
175
+ },
176
+ status: {
177
+ success: success[500],
178
+ error: error[500],
179
+ warning: warning[500],
180
+ neutral: neutral[500]
181
+ }
182
+ };
183
+ var colors = {
184
+ // primitives
185
+ primary,
186
+ accent,
187
+ success,
188
+ error,
189
+ warning,
190
+ neutral,
191
+ opacity,
192
+ gradients,
193
+ // themes
194
+ themes: {
195
+ light,
196
+ dark
197
+ }
198
+ };
199
+
200
+ // tailwind-theme.ts
201
+ var {
202
+ themes,
203
+ opacity: _opacity,
204
+ gradients: _gradients,
205
+ ...primitives
206
+ } = colors;
207
+ var PRIMITIVE_DEFAULT_SHADE = {
208
+ primary: "500",
209
+ accent: "500",
210
+ success: "500",
211
+ error: "500",
212
+ warning: "500",
213
+ neutral: "500"
214
+ };
215
+ var ALPHA_PLACEHOLDER = "<alpha-value>";
216
+ function withAlpha(varName) {
217
+ return `rgb(var(${varName}) / ${ALPHA_PLACEHOLDER})`;
218
+ }
219
+ function primitiveToTailwind(name, shades) {
220
+ const out = {
221
+ DEFAULT: withAlpha(`--color-${name}-${PRIMITIVE_DEFAULT_SHADE[name]}`)
222
+ };
223
+ for (const shade of Object.keys(shades)) {
224
+ out[shade] = withAlpha(`--color-${name}-${shade}`);
225
+ }
226
+ return out;
227
+ }
228
+ function buildTailwindThemeColors() {
229
+ const primitiveTokens = Object.fromEntries(
230
+ Object.keys(primitives).map((name) => [
231
+ name,
232
+ primitiveToTailwind(name, primitives[name])
233
+ ])
234
+ );
235
+ const semanticTokens = {
236
+ fg: withAlpha("--color-fg"),
237
+ "fg-muted": withAlpha("--color-fg-muted"),
238
+ "fg-subtle": withAlpha("--color-fg-subtle"),
239
+ "fg-inverse": withAlpha("--color-fg-inverse"),
240
+ link: withAlpha("--color-link"),
241
+ brand: withAlpha("--color-brand"),
242
+ surface: withAlpha("--color-surface"),
243
+ "surface-elevated": withAlpha("--color-surface-elevated"),
244
+ "surface-inverse": withAlpha("--color-surface-inverse"),
245
+ canvas: withAlpha("--color-canvas"),
246
+ outline: withAlpha("--color-outline"),
247
+ "outline-subtle": withAlpha("--color-outline-subtle"),
248
+ "outline-strong": withAlpha("--color-outline-strong")
249
+ };
250
+ return {
251
+ ...primitiveTokens,
252
+ ...semanticTokens
253
+ };
254
+ }
255
+
256
+ // tailwind.preset.ts
257
+ var TailwindPreset = {
258
+ darkMode: "media",
259
+ theme: {
260
+ extend: {
261
+ colors: buildTailwindThemeColors()
262
+ }
263
+ }
264
+ };
265
+ var tailwind_preset_default = TailwindPreset;
266
+ //# sourceMappingURL=tailwind-preset.cjs.map
package/dist/tailwind-preset.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../tailwind.preset.ts","../../../packages/assets/colors.ts","../tailwind-theme.ts"],"sourcesContent":["import type { Config } from \"tailwindcss\";\nimport { buildTailwindThemeColors } from \"./tailwind-theme\";\n\n/**\n * Tailwind preset for consumer apps.\n *\n * Usage (in a consuming app's tailwind.config):\n * ```ts\n * import uiPreset from \"@dgithiomi/sbui-web/tailwind-preset\";\n * export default {\n * presets: [uiPreset],\n * content: [\"./src/**\\/*.{ts,tsx}\"],\n * };\n * ```\n *\n * The consumer should ALSO import the shipped stylesheet once, so the CSS\n * variables that back these tokens are defined:\n * ```ts\n * import \"@dgithiomi/sbui-web/styles.css\";\n * ```\n */\nconst TailwindPreset: Partial<Config> = {\n darkMode: \"media\",\n theme: {\n extend: {\n colors: buildTailwindThemeColors(),\n },\n },\n};\n\nexport default TailwindPreset;\n","/* =========================================================\n PRIMITIVE COLORS\n ========================================================= */\nconst primary = {\n 900: \"#002a3b\",\n 800: \"#00435e\",\n 700: \"#004560\",\n 600: \"#005374\",\n 500: \"#00829d\",\n 400: \"#009cbc\",\n};\n\nconst accent = {\n 500: \"#ffed00\",\n 400: \"#fff351\",\n 300: \"#d6d3a2\",\n};\n\nconst success = {\n 700: \"#01583E\",\n 600: \"#047857\",\n 500: \"#10B981\",\n 400: \"#069668\",\n 300: \"#3fa41a\",\n 200: \"#0FE630\",\n};\n\nconst error = {\n 700: \"#561000\",\n 600: \"#931F06\",\n 500: \"#dc3545\",\n 400: \"#F80505\",\n};\n\nconst warning = {\n 700: \"#583300\",\n 600: \"#935801\",\n 500: \"#f9a201\",\n};\n\nconst neutral = {\n 900: \"#000000\",\n 800: \"#002a3b\",\n 700: \"#004560\",\n 600: \"#707070\",\n 500: \"#a2a8a8\",\n 400: \"#cccccc\",\n 300: \"#F5F5F5\",\n 200: \"#ffffff\",\n};\n\n/* =========================================================\n OPACITY TOKENS (STANDARDIZED RGBA)\n ========================================================= */\nconst opacity = {\n black: {\n 100: \"rgba(0,0,0,0.3)\",\n 200: \"rgba(0,0,0,0.5)\",\n 300: \"rgba(0,0,0,0.7)\",\n 400: \"rgba(0,0,0,0.75)\",\n },\n\n primary: {\n 100: \"rgba(0,156,188,0.02)\",\n 200: \"rgba(0,156,188,0.03)\",\n 300: \"rgba(0,156,188,0.3)\",\n 400: \"rgba(0,156,188,0.4)\",\n },\n\n neutral: {\n 100: \"rgba(112,112,112,0.1)\",\n 200: \"rgba(112,112,112,0.2)\",\n 300: \"rgba(112,112,112,0.6)\",\n },\n};\n\n/* =========================================================\n GRADIENTS\n ========================================================= */\n\nconst gradients = {\n body: \"radial-gradient(circle, #004560 0%, #00435e 33%, #002a3b 100%)\",\n overlayLeft:\n \"linear-gradient(270deg, rgba(0,42,59,0) 0%, rgba(0,42,59,0.5) 48.8%, #002a3b 97.66%)\",\n overlayRight:\n \"linear-gradient(90deg, rgba(0,42,59,0) 0%, rgba(0,42,59,0.5) 48.8%, #002a3b 97.66%)\",\n};\n\n/* =========================================================\n SEMANTIC TOKENS (LIGHT THEME)\n ========================================================= */\nconst light = {\n background: {\n primary: neutral[200],\n secondary: neutral[300],\n tertiary: neutral[400],\n surface: \"#ffffff\",\n inverse: primary[900],\n },\n\n text: {\n primary: neutral[900],\n secondary: neutral[600],\n tertiary: neutral[500],\n inverse: neutral[200],\n brand: primary[700],\n link: accent[500],\n },\n\n border: {\n default: opacity.neutral[200],\n subtle: opacity.neutral[100],\n strong: neutral[500],\n },\n\n button: {\n primary: {\n bg: accent[500],\n hover: accent[400],\n text: primary[700],\n disabledBg: accent[300],\n },\n\n secondary: {\n bg: primary[600],\n hover: primary[700],\n text: neutral[200],\n },\n\n ghost: {\n text: primary[700],\n hoverBg: opacity.neutral[100],\n },\n },\n\n status: {\n success: success[500],\n error: error[500],\n warning: warning[500],\n neutral: neutral[500],\n },\n};\n\n/* =========================================================\n SEMANTIC TOKENS (DARK THEME)\n ========================================================= */\nconst dark = {\n background: {\n primary: primary[900],\n secondary: primary[800],\n tertiary: primary[700],\n surface: primary[800],\n inverse: neutral[200],\n },\n\n text: {\n primary: neutral[200],\n secondary: neutral[500],\n tertiary: neutral[400],\n inverse: neutral[900],\n brand: primary[400],\n link: accent[500],\n },\n\n border: {\n default: opacity.primary[200],\n subtle: opacity.primary[100],\n strong: primary[600],\n },\n\n button: {\n primary: {\n bg: accent[500],\n hover: accent[400],\n text: primary[700],\n disabledBg: accent[300],\n },\n\n secondary: {\n bg: primary[600],\n hover: primary[700],\n text: neutral[200],\n },\n\n ghost: {\n text: neutral[200],\n hoverBg: opacity.black[100],\n },\n },\n\n status: {\n success: success[500],\n error: error[500],\n warning: warning[500],\n neutral: neutral[500],\n },\n};\n\n/* =========================================================\n FINAL EXPORT\n ========================================================= */\n\nexport const colors = {\n // primitives\n primary,\n accent,\n success,\n error,\n warning,\n neutral,\n opacity,\n gradients,\n\n // themes\n themes: {\n light,\n dark,\n },\n};\n\nexport type ColorTheme = typeof light;\nexport type ThemeMode = keyof typeof colors.themes;\n","import { colors } from \"@uniicy/assets\";\n\n/**\n * Single source of truth for how `@uniicy/assets` tokens become Tailwind colors.\n *\n * - All color values are stored as space-separated RGB triplets in CSS variables\n * (e.g. `--color-primary-500: 0 130 157`). Storing the channels — rather than\n * a fully-formed `#rrggbb` or `rgb(...)` — is what lets Tailwind apply its\n * `<alpha-value>` opacity modifier (`bg-primary-500/40`, `border-accent/20`, …).\n * - Every primitive shade is exposed via `rgb(var(--color-{name}-{shade}) /\n * <alpha-value>)`. Tailwind replaces `<alpha-value>` with the requested alpha\n * (defaults to `1`) at build time.\n * - Each primitive gets a `DEFAULT` key (mapped to the 500 shade), so utilities\n * like `bg-primary` resolve, in addition to `bg-primary-500`.\n * - Semantic tokens (`fg`, `link`, `brand`, `surface`, `outline`, …) follow the\n * same pattern, but their underlying RGB triplets swap between light and dark\n * themes so class names stay theme-independent (`text-link` works in both).\n *\n * NOTE on raw-`var()` consumption: because the CSS variables hold tuples and\n * not complete color strings, anything reading them directly must wrap them in\n * `rgb(...)` — e.g. `color: rgb(var(--color-fg));`.\n */\n\nconst {\n themes,\n opacity: _opacity,\n gradients: _gradients,\n ...primitives\n} = colors;\n\ntype PrimitiveName = keyof typeof primitives;\ntype ShadeMap = Record<string, string>;\n\nconst PRIMITIVE_DEFAULT_SHADE: Record<PrimitiveName, string> = {\n primary: \"500\",\n accent: \"500\",\n success: \"500\",\n error: \"500\",\n warning: \"500\",\n neutral: \"500\",\n};\n\nconst ALPHA_PLACEHOLDER = \"<alpha-value>\";\n\n/** Returns a Tailwind-friendly color reference that respects opacity modifiers. */\nfunction withAlpha(varName: string): string {\n return `rgb(var(${varName}) / ${ALPHA_PLACEHOLDER})`;\n}\n\n/* ------------------------------------------------------------------ */\n/* Color-value normalization */\n/* ------------------------------------------------------------------ */\n\nfunction hexToRgbTuple(hex: string): string {\n const cleaned = hex.replace(/^#/, \"\");\n const expanded =\n cleaned.length === 3\n ? cleaned\n .split(\"\")\n .map((c) => c + c)\n .join(\"\")\n : cleaned;\n\n if (expanded.length !== 6) {\n throw new Error(`Unsupported hex color: \"${hex}\"`);\n }\n\n const r = parseInt(expanded.slice(0, 2), 16);\n const g = parseInt(expanded.slice(2, 4), 16);\n const b = parseInt(expanded.slice(4, 6), 16);\n\n return `${r} ${g} ${b}`;\n}\n\nfunction rgbStringToRgbTuple(value: string): string {\n const match = value.match(\n /rgba?\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*(?:,\\s*[0-9.]+\\s*)?\\)/,\n );\n if (!match) {\n throw new Error(`Unsupported rgb()/rgba() color: \"${value}\"`);\n }\n return `${match[1]} ${match[2]} ${match[3]}`;\n}\n\n/**\n * Converts any palette color (`#rrggbb`, `#rgb`, `rgb(...)`, `rgba(...)`) into\n * the `R G B` triplet Tailwind expects when used with `<alpha-value>`. Note\n * that pre-existing alpha channels on `rgba(...)` inputs are **discarded** —\n * apply opacity at the call site with `/N` instead (e.g. `border-outline/20`).\n */\nfunction toRgbTuple(value: string): string {\n if (value.startsWith(\"#\")) return hexToRgbTuple(value);\n if (value.startsWith(\"rgb\")) return rgbStringToRgbTuple(value);\n throw new Error(`Unsupported color value: \"${value}\"`);\n}\n\n/* ------------------------------------------------------------------ */\n/* Tailwind theme colors */\n/* ------------------------------------------------------------------ */\n\nfunction primitiveToTailwind(name: PrimitiveName, shades: ShadeMap) {\n const out: Record<string, string> = {\n DEFAULT: withAlpha(`--color-${name}-${PRIMITIVE_DEFAULT_SHADE[name]}`),\n };\n for (const shade of Object.keys(shades)) {\n out[shade] = withAlpha(`--color-${name}-${shade}`);\n }\n return out;\n}\n\n/**\n * The flat Tailwind color object consumed by both the local `tailwind.config.ts`\n * and the published `tailwind.preset.ts`. Returns ONLY `rgb(var(--…) / <alpha-value>)`\n * references — the actual RGB triplets live in `:root` (declared by `buildThemeCss()`).\n */\nexport function buildTailwindThemeColors() {\n const primitiveTokens = Object.fromEntries(\n (Object.keys(primitives) as PrimitiveName[]).map((name) => [\n name,\n primitiveToTailwind(name, primitives[name] as ShadeMap),\n ]),\n );\n\n const semanticTokens = {\n fg: withAlpha(\"--color-fg\"),\n \"fg-muted\": withAlpha(\"--color-fg-muted\"),\n \"fg-subtle\": withAlpha(\"--color-fg-subtle\"),\n \"fg-inverse\": withAlpha(\"--color-fg-inverse\"),\n link: withAlpha(\"--color-link\"),\n brand: withAlpha(\"--color-brand\"),\n surface: withAlpha(\"--color-surface\"),\n \"surface-elevated\": withAlpha(\"--color-surface-elevated\"),\n \"surface-inverse\": withAlpha(\"--color-surface-inverse\"),\n canvas: withAlpha(\"--color-canvas\"),\n outline: withAlpha(\"--color-outline\"),\n \"outline-subtle\": withAlpha(\"--color-outline-subtle\"),\n \"outline-strong\": withAlpha(\"--color-outline-strong\"),\n };\n\n return {\n ...primitiveTokens,\n ...semanticTokens,\n };\n}\n\n/* ------------------------------------------------------------------ */\n/* CSS variable generation */\n/* ------------------------------------------------------------------ */\n\nfunction primitiveVariables(): Record<string, string> {\n const vars: Record<string, string> = {};\n for (const name of Object.keys(primitives) as PrimitiveName[]) {\n const shades = primitives[name] as ShadeMap;\n for (const [shade, value] of Object.entries(shades)) {\n vars[`--color-${name}-${shade}`] = toRgbTuple(value);\n }\n }\n return vars;\n}\n\nfunction semanticVariables(mode: \"light\" | \"dark\"): Record<string, string> {\n const t = themes[mode];\n return {\n \"--color-fg\": toRgbTuple(t.text.primary),\n \"--color-fg-muted\": toRgbTuple(t.text.secondary),\n \"--color-fg-subtle\": toRgbTuple(t.text.tertiary),\n \"--color-fg-inverse\": toRgbTuple(t.text.inverse),\n \"--color-link\": toRgbTuple(t.text.link),\n \"--color-brand\": toRgbTuple(t.text.brand),\n \"--color-surface\": toRgbTuple(t.background.surface),\n \"--color-surface-elevated\": toRgbTuple(t.background.secondary),\n \"--color-surface-inverse\": toRgbTuple(t.background.inverse),\n \"--color-canvas\": toRgbTuple(t.background.primary),\n \"--color-outline\": toRgbTuple(t.border.default),\n \"--color-outline-subtle\": toRgbTuple(t.border.subtle),\n \"--color-outline-strong\": toRgbTuple(t.border.strong),\n };\n}\n\nfunction block(selector: string, vars: Record<string, string>) {\n const lines = Object.entries(vars).map(\n ([key, value]) => ` ${key}: ${value};`,\n );\n return `${selector} {\\n${lines.join(\"\\n\")}\\n}`;\n}\n\n/**\n * Returns the full CSS variable layer:\n * - `:root` declares primitives + light-mode semantics.\n * - `@media (prefers-color-scheme: dark)` overrides semantics for users\n * whose OS is in dark mode.\n * - `.dark` lets apps force dark mode explicitly (e.g. for a theme toggle).\n */\nexport function buildThemeCss() {\n const primitives = primitiveVariables();\n const light = semanticVariables(\"light\");\n const dark = semanticVariables(\"dark\");\n\n return [\n \"/* Auto-generated from @uniicy/assets — do not edit by hand. */\",\n block(\":root\", { ...primitives, ...light }),\n `@media (prefers-color-scheme: dark) {\\n${block(\n \" :root\",\n dark,\n ).replace(/^/gm, \" \")}\\n}`,\n block(\".dark\", dark),\n \"\",\n ].join(\"\\n\\n\");\n}\n"],"mappings":"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","names":[]}
package/dist/tailwind-preset.d.cts ADDED
@@ -0,0 +1,23 @@
1
+ import { Config } from 'tailwindcss';
2
+
3
+ /**
4
+ * Tailwind preset for consumer apps.
5
+ *
6
+ * Usage (in a consuming app's tailwind.config):
7
+ * ```ts
8
+ * import uiPreset from "@dgithiomi/sbui-web/tailwind-preset";
9
+ * export default {
10
+ * presets: [uiPreset],
11
+ * content: ["./src/**\/*.{ts,tsx}"],
12
+ * };
13
+ * ```
14
+ *
15
+ * The consumer should ALSO import the shipped stylesheet once, so the CSS
16
+ * variables that back these tokens are defined:
17
+ * ```ts
18
+ * import "@dgithiomi/sbui-web/styles.css";
19
+ * ```
20
+ */
21
+ declare const TailwindPreset: Partial<Config>;
22
+
23
+ export { TailwindPreset as default };
package/dist/tailwind-preset.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ import { Config } from 'tailwindcss';
2
+
3
+ /**
4
+ * Tailwind preset for consumer apps.
5
+ *
6
+ * Usage (in a consuming app's tailwind.config):
7
+ * ```ts
8
+ * import uiPreset from "@dgithiomi/sbui-web/tailwind-preset";
9
+ * export default {
10
+ * presets: [uiPreset],
11
+ * content: ["./src/**\/*.{ts,tsx}"],
12
+ * };
13
+ * ```
14
+ *
15
+ * The consumer should ALSO import the shipped stylesheet once, so the CSS
16
+ * variables that back these tokens are defined:
17
+ * ```ts
18
+ * import "@dgithiomi/sbui-web/styles.css";
19
+ * ```
20
+ */
21
+ declare const TailwindPreset: Partial<Config>;
22
+
23
+ export { TailwindPreset as default };
package/dist/tailwind-preset.mjs ADDED
@@ -0,0 +1,246 @@
1
+ import "./chunk-3QS3WKRC.mjs";
2
+
3
+ // ../../packages/assets/colors.ts
4
+ var primary = {
5
+ 900: "#002a3b",
6
+ 800: "#00435e",
7
+ 700: "#004560",
8
+ 600: "#005374",
9
+ 500: "#00829d",
10
+ 400: "#009cbc"
11
+ };
12
+ var accent = {
13
+ 500: "#ffed00",
14
+ 400: "#fff351",
15
+ 300: "#d6d3a2"
16
+ };
17
+ var success = {
18
+ 700: "#01583E",
19
+ 600: "#047857",
20
+ 500: "#10B981",
21
+ 400: "#069668",
22
+ 300: "#3fa41a",
23
+ 200: "#0FE630"
24
+ };
25
+ var error = {
26
+ 700: "#561000",
27
+ 600: "#931F06",
28
+ 500: "#dc3545",
29
+ 400: "#F80505"
30
+ };
31
+ var warning = {
32
+ 700: "#583300",
33
+ 600: "#935801",
34
+ 500: "#f9a201"
35
+ };
36
+ var neutral = {
37
+ 900: "#000000",
38
+ 800: "#002a3b",
39
+ 700: "#004560",
40
+ 600: "#707070",
41
+ 500: "#a2a8a8",
42
+ 400: "#cccccc",
43
+ 300: "#F5F5F5",
44
+ 200: "#ffffff"
45
+ };
46
+ var opacity = {
47
+ black: {
48
+ 100: "rgba(0,0,0,0.3)",
49
+ 200: "rgba(0,0,0,0.5)",
50
+ 300: "rgba(0,0,0,0.7)",
51
+ 400: "rgba(0,0,0,0.75)"
52
+ },
53
+ primary: {
54
+ 100: "rgba(0,156,188,0.02)",
55
+ 200: "rgba(0,156,188,0.03)",
56
+ 300: "rgba(0,156,188,0.3)",
57
+ 400: "rgba(0,156,188,0.4)"
58
+ },
59
+ neutral: {
60
+ 100: "rgba(112,112,112,0.1)",
61
+ 200: "rgba(112,112,112,0.2)",
62
+ 300: "rgba(112,112,112,0.6)"
63
+ }
64
+ };
65
+ var gradients = {
66
+ body: "radial-gradient(circle, #004560 0%, #00435e 33%, #002a3b 100%)",
67
+ overlayLeft: "linear-gradient(270deg, rgba(0,42,59,0) 0%, rgba(0,42,59,0.5) 48.8%, #002a3b 97.66%)",
68
+ overlayRight: "linear-gradient(90deg, rgba(0,42,59,0) 0%, rgba(0,42,59,0.5) 48.8%, #002a3b 97.66%)"
69
+ };
70
+ var light = {
71
+ background: {
72
+ primary: neutral[200],
73
+ secondary: neutral[300],
74
+ tertiary: neutral[400],
75
+ surface: "#ffffff",
76
+ inverse: primary[900]
77
+ },
78
+ text: {
79
+ primary: neutral[900],
80
+ secondary: neutral[600],
81
+ tertiary: neutral[500],
82
+ inverse: neutral[200],
83
+ brand: primary[700],
84
+ link: accent[500]
85
+ },
86
+ border: {
87
+ default: opacity.neutral[200],
88
+ subtle: opacity.neutral[100],
89
+ strong: neutral[500]
90
+ },
91
+ button: {
92
+ primary: {
93
+ bg: accent[500],
94
+ hover: accent[400],
95
+ text: primary[700],
96
+ disabledBg: accent[300]
97
+ },
98
+ secondary: {
99
+ bg: primary[600],
100
+ hover: primary[700],
101
+ text: neutral[200]
102
+ },
103
+ ghost: {
104
+ text: primary[700],
105
+ hoverBg: opacity.neutral[100]
106
+ }
107
+ },
108
+ status: {
109
+ success: success[500],
110
+ error: error[500],
111
+ warning: warning[500],
112
+ neutral: neutral[500]
113
+ }
114
+ };
115
+ var dark = {
116
+ background: {
117
+ primary: primary[900],
118
+ secondary: primary[800],
119
+ tertiary: primary[700],
120
+ surface: primary[800],
121
+ inverse: neutral[200]
122
+ },
123
+ text: {
124
+ primary: neutral[200],
125
+ secondary: neutral[500],
126
+ tertiary: neutral[400],
127
+ inverse: neutral[900],
128
+ brand: primary[400],
129
+ link: accent[500]
130
+ },
131
+ border: {
132
+ default: opacity.primary[200],
133
+ subtle: opacity.primary[100],
134
+ strong: primary[600]
135
+ },
136
+ button: {
137
+ primary: {
138
+ bg: accent[500],
139
+ hover: accent[400],
140
+ text: primary[700],
141
+ disabledBg: accent[300]
142
+ },
143
+ secondary: {
144
+ bg: primary[600],
145
+ hover: primary[700],
146
+ text: neutral[200]
147
+ },
148
+ ghost: {
149
+ text: neutral[200],
150
+ hoverBg: opacity.black[100]
151
+ }
152
+ },
153
+ status: {
154
+ success: success[500],
155
+ error: error[500],
156
+ warning: warning[500],
157
+ neutral: neutral[500]
158
+ }
159
+ };
160
+ var colors = {
161
+ // primitives
162
+ primary,
163
+ accent,
164
+ success,
165
+ error,
166
+ warning,
167
+ neutral,
168
+ opacity,
169
+ gradients,
170
+ // themes
171
+ themes: {
172
+ light,
173
+ dark
174
+ }
175
+ };
176
+
177
+ // tailwind-theme.ts
178
+ var {
179
+ themes,
180
+ opacity: _opacity,
181
+ gradients: _gradients,
182
+ ...primitives
183
+ } = colors;
184
+ var PRIMITIVE_DEFAULT_SHADE = {
185
+ primary: "500",
186
+ accent: "500",
187
+ success: "500",
188
+ error: "500",
189
+ warning: "500",
190
+ neutral: "500"
191
+ };
192
+ var ALPHA_PLACEHOLDER = "<alpha-value>";
193
+ function withAlpha(varName) {
194
+ return `rgb(var(${varName}) / ${ALPHA_PLACEHOLDER})`;
195
+ }
196
+ function primitiveToTailwind(name, shades) {
197
+ const out = {
198
+ DEFAULT: withAlpha(`--color-${name}-${PRIMITIVE_DEFAULT_SHADE[name]}`)
199
+ };
200
+ for (const shade of Object.keys(shades)) {
201
+ out[shade] = withAlpha(`--color-${name}-${shade}`);
202
+ }
203
+ return out;
204
+ }
205
+ function buildTailwindThemeColors() {
206
+ const primitiveTokens = Object.fromEntries(
207
+ Object.keys(primitives).map((name) => [
208
+ name,
209
+ primitiveToTailwind(name, primitives[name])
210
+ ])
211
+ );
212
+ const semanticTokens = {
213
+ fg: withAlpha("--color-fg"),
214
+ "fg-muted": withAlpha("--color-fg-muted"),
215
+ "fg-subtle": withAlpha("--color-fg-subtle"),
216
+ "fg-inverse": withAlpha("--color-fg-inverse"),
217
+ link: withAlpha("--color-link"),
218
+ brand: withAlpha("--color-brand"),
219
+ surface: withAlpha("--color-surface"),
220
+ "surface-elevated": withAlpha("--color-surface-elevated"),
221
+ "surface-inverse": withAlpha("--color-surface-inverse"),
222
+ canvas: withAlpha("--color-canvas"),
223
+ outline: withAlpha("--color-outline"),
224
+ "outline-subtle": withAlpha("--color-outline-subtle"),
225
+ "outline-strong": withAlpha("--color-outline-strong")
226
+ };
227
+ return {
228
+ ...primitiveTokens,
229
+ ...semanticTokens
230
+ };
231
+ }
232
+
233
+ // tailwind.preset.ts
234
+ var TailwindPreset = {
235
+ darkMode: "media",
236
+ theme: {
237
+ extend: {
238
+ colors: buildTailwindThemeColors()
239
+ }
240
+ }
241
+ };
242
+ var tailwind_preset_default = TailwindPreset;
243
+ export {
244
+ tailwind_preset_default as default
245
+ };
246
+ //# sourceMappingURL=tailwind-preset.mjs.map
package/dist/tailwind-preset.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../packages/assets/colors.ts","../tailwind-theme.ts","../tailwind.preset.ts"],"sourcesContent":["/* =========================================================\n PRIMITIVE COLORS\n ========================================================= */\nconst primary = {\n 900: \"#002a3b\",\n 800: \"#00435e\",\n 700: \"#004560\",\n 600: \"#005374\",\n 500: \"#00829d\",\n 400: \"#009cbc\",\n};\n\nconst accent = {\n 500: \"#ffed00\",\n 400: \"#fff351\",\n 300: \"#d6d3a2\",\n};\n\nconst success = {\n 700: \"#01583E\",\n 600: \"#047857\",\n 500: \"#10B981\",\n 400: \"#069668\",\n 300: \"#3fa41a\",\n 200: \"#0FE630\",\n};\n\nconst error = {\n 700: \"#561000\",\n 600: \"#931F06\",\n 500: \"#dc3545\",\n 400: \"#F80505\",\n};\n\nconst warning = {\n 700: \"#583300\",\n 600: \"#935801\",\n 500: \"#f9a201\",\n};\n\nconst neutral = {\n 900: \"#000000\",\n 800: \"#002a3b\",\n 700: \"#004560\",\n 600: \"#707070\",\n 500: \"#a2a8a8\",\n 400: \"#cccccc\",\n 300: \"#F5F5F5\",\n 200: \"#ffffff\",\n};\n\n/* =========================================================\n OPACITY TOKENS (STANDARDIZED RGBA)\n ========================================================= */\nconst opacity = {\n black: {\n 100: \"rgba(0,0,0,0.3)\",\n 200: \"rgba(0,0,0,0.5)\",\n 300: \"rgba(0,0,0,0.7)\",\n 400: \"rgba(0,0,0,0.75)\",\n },\n\n primary: {\n 100: \"rgba(0,156,188,0.02)\",\n 200: \"rgba(0,156,188,0.03)\",\n 300: \"rgba(0,156,188,0.3)\",\n 400: \"rgba(0,156,188,0.4)\",\n },\n\n neutral: {\n 100: \"rgba(112,112,112,0.1)\",\n 200: \"rgba(112,112,112,0.2)\",\n 300: \"rgba(112,112,112,0.6)\",\n },\n};\n\n/* =========================================================\n GRADIENTS\n ========================================================= */\n\nconst gradients = {\n body: \"radial-gradient(circle, #004560 0%, #00435e 33%, #002a3b 100%)\",\n overlayLeft:\n \"linear-gradient(270deg, rgba(0,42,59,0) 0%, rgba(0,42,59,0.5) 48.8%, #002a3b 97.66%)\",\n overlayRight:\n \"linear-gradient(90deg, rgba(0,42,59,0) 0%, rgba(0,42,59,0.5) 48.8%, #002a3b 97.66%)\",\n};\n\n/* =========================================================\n SEMANTIC TOKENS (LIGHT THEME)\n ========================================================= */\nconst light = {\n background: {\n primary: neutral[200],\n secondary: neutral[300],\n tertiary: neutral[400],\n surface: \"#ffffff\",\n inverse: primary[900],\n },\n\n text: {\n primary: neutral[900],\n secondary: neutral[600],\n tertiary: neutral[500],\n inverse: neutral[200],\n brand: primary[700],\n link: accent[500],\n },\n\n border: {\n default: opacity.neutral[200],\n subtle: opacity.neutral[100],\n strong: neutral[500],\n },\n\n button: {\n primary: {\n bg: accent[500],\n hover: accent[400],\n text: primary[700],\n disabledBg: accent[300],\n },\n\n secondary: {\n bg: primary[600],\n hover: primary[700],\n text: neutral[200],\n },\n\n ghost: {\n text: primary[700],\n hoverBg: opacity.neutral[100],\n },\n },\n\n status: {\n success: success[500],\n error: error[500],\n warning: warning[500],\n neutral: neutral[500],\n },\n};\n\n/* =========================================================\n SEMANTIC TOKENS (DARK THEME)\n ========================================================= */\nconst dark = {\n background: {\n primary: primary[900],\n secondary: primary[800],\n tertiary: primary[700],\n surface: primary[800],\n inverse: neutral[200],\n },\n\n text: {\n primary: neutral[200],\n secondary: neutral[500],\n tertiary: neutral[400],\n inverse: neutral[900],\n brand: primary[400],\n link: accent[500],\n },\n\n border: {\n default: opacity.primary[200],\n subtle: opacity.primary[100],\n strong: primary[600],\n },\n\n button: {\n primary: {\n bg: accent[500],\n hover: accent[400],\n text: primary[700],\n disabledBg: accent[300],\n },\n\n secondary: {\n bg: primary[600],\n hover: primary[700],\n text: neutral[200],\n },\n\n ghost: {\n text: neutral[200],\n hoverBg: opacity.black[100],\n },\n },\n\n status: {\n success: success[500],\n error: error[500],\n warning: warning[500],\n neutral: neutral[500],\n },\n};\n\n/* =========================================================\n FINAL EXPORT\n ========================================================= */\n\nexport const colors = {\n // primitives\n primary,\n accent,\n success,\n error,\n warning,\n neutral,\n opacity,\n gradients,\n\n // themes\n themes: {\n light,\n dark,\n },\n};\n\nexport type ColorTheme = typeof light;\nexport type ThemeMode = keyof typeof colors.themes;\n","import { colors } from \"@uniicy/assets\";\n\n/**\n * Single source of truth for how `@uniicy/assets` tokens become Tailwind colors.\n *\n * - All color values are stored as space-separated RGB triplets in CSS variables\n * (e.g. `--color-primary-500: 0 130 157`). Storing the channels — rather than\n * a fully-formed `#rrggbb` or `rgb(...)` — is what lets Tailwind apply its\n * `<alpha-value>` opacity modifier (`bg-primary-500/40`, `border-accent/20`, …).\n * - Every primitive shade is exposed via `rgb(var(--color-{name}-{shade}) /\n * <alpha-value>)`. Tailwind replaces `<alpha-value>` with the requested alpha\n * (defaults to `1`) at build time.\n * - Each primitive gets a `DEFAULT` key (mapped to the 500 shade), so utilities\n * like `bg-primary` resolve, in addition to `bg-primary-500`.\n * - Semantic tokens (`fg`, `link`, `brand`, `surface`, `outline`, …) follow the\n * same pattern, but their underlying RGB triplets swap between light and dark\n * themes so class names stay theme-independent (`text-link` works in both).\n *\n * NOTE on raw-`var()` consumption: because the CSS variables hold tuples and\n * not complete color strings, anything reading them directly must wrap them in\n * `rgb(...)` — e.g. `color: rgb(var(--color-fg));`.\n */\n\nconst {\n themes,\n opacity: _opacity,\n gradients: _gradients,\n ...primitives\n} = colors;\n\ntype PrimitiveName = keyof typeof primitives;\ntype ShadeMap = Record<string, string>;\n\nconst PRIMITIVE_DEFAULT_SHADE: Record<PrimitiveName, string> = {\n primary: \"500\",\n accent: \"500\",\n success: \"500\",\n error: \"500\",\n warning: \"500\",\n neutral: \"500\",\n};\n\nconst ALPHA_PLACEHOLDER = \"<alpha-value>\";\n\n/** Returns a Tailwind-friendly color reference that respects opacity modifiers. */\nfunction withAlpha(varName: string): string {\n return `rgb(var(${varName}) / ${ALPHA_PLACEHOLDER})`;\n}\n\n/* ------------------------------------------------------------------ */\n/* Color-value normalization */\n/* ------------------------------------------------------------------ */\n\nfunction hexToRgbTuple(hex: string): string {\n const cleaned = hex.replace(/^#/, \"\");\n const expanded =\n cleaned.length === 3\n ? cleaned\n .split(\"\")\n .map((c) => c + c)\n .join(\"\")\n : cleaned;\n\n if (expanded.length !== 6) {\n throw new Error(`Unsupported hex color: \"${hex}\"`);\n }\n\n const r = parseInt(expanded.slice(0, 2), 16);\n const g = parseInt(expanded.slice(2, 4), 16);\n const b = parseInt(expanded.slice(4, 6), 16);\n\n return `${r} ${g} ${b}`;\n}\n\nfunction rgbStringToRgbTuple(value: string): string {\n const match = value.match(\n /rgba?\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*(?:,\\s*[0-9.]+\\s*)?\\)/,\n );\n if (!match) {\n throw new Error(`Unsupported rgb()/rgba() color: \"${value}\"`);\n }\n return `${match[1]} ${match[2]} ${match[3]}`;\n}\n\n/**\n * Converts any palette color (`#rrggbb`, `#rgb`, `rgb(...)`, `rgba(...)`) into\n * the `R G B` triplet Tailwind expects when used with `<alpha-value>`. Note\n * that pre-existing alpha channels on `rgba(...)` inputs are **discarded** —\n * apply opacity at the call site with `/N` instead (e.g. `border-outline/20`).\n */\nfunction toRgbTuple(value: string): string {\n if (value.startsWith(\"#\")) return hexToRgbTuple(value);\n if (value.startsWith(\"rgb\")) return rgbStringToRgbTuple(value);\n throw new Error(`Unsupported color value: \"${value}\"`);\n}\n\n/* ------------------------------------------------------------------ */\n/* Tailwind theme colors */\n/* ------------------------------------------------------------------ */\n\nfunction primitiveToTailwind(name: PrimitiveName, shades: ShadeMap) {\n const out: Record<string, string> = {\n DEFAULT: withAlpha(`--color-${name}-${PRIMITIVE_DEFAULT_SHADE[name]}`),\n };\n for (const shade of Object.keys(shades)) {\n out[shade] = withAlpha(`--color-${name}-${shade}`);\n }\n return out;\n}\n\n/**\n * The flat Tailwind color object consumed by both the local `tailwind.config.ts`\n * and the published `tailwind.preset.ts`. Returns ONLY `rgb(var(--…) / <alpha-value>)`\n * references — the actual RGB triplets live in `:root` (declared by `buildThemeCss()`).\n */\nexport function buildTailwindThemeColors() {\n const primitiveTokens = Object.fromEntries(\n (Object.keys(primitives) as PrimitiveName[]).map((name) => [\n name,\n primitiveToTailwind(name, primitives[name] as ShadeMap),\n ]),\n );\n\n const semanticTokens = {\n fg: withAlpha(\"--color-fg\"),\n \"fg-muted\": withAlpha(\"--color-fg-muted\"),\n \"fg-subtle\": withAlpha(\"--color-fg-subtle\"),\n \"fg-inverse\": withAlpha(\"--color-fg-inverse\"),\n link: withAlpha(\"--color-link\"),\n brand: withAlpha(\"--color-brand\"),\n surface: withAlpha(\"--color-surface\"),\n \"surface-elevated\": withAlpha(\"--color-surface-elevated\"),\n \"surface-inverse\": withAlpha(\"--color-surface-inverse\"),\n canvas: withAlpha(\"--color-canvas\"),\n outline: withAlpha(\"--color-outline\"),\n \"outline-subtle\": withAlpha(\"--color-outline-subtle\"),\n \"outline-strong\": withAlpha(\"--color-outline-strong\"),\n };\n\n return {\n ...primitiveTokens,\n ...semanticTokens,\n };\n}\n\n/* ------------------------------------------------------------------ */\n/* CSS variable generation */\n/* ------------------------------------------------------------------ */\n\nfunction primitiveVariables(): Record<string, string> {\n const vars: Record<string, string> = {};\n for (const name of Object.keys(primitives) as PrimitiveName[]) {\n const shades = primitives[name] as ShadeMap;\n for (const [shade, value] of Object.entries(shades)) {\n vars[`--color-${name}-${shade}`] = toRgbTuple(value);\n }\n }\n return vars;\n}\n\nfunction semanticVariables(mode: \"light\" | \"dark\"): Record<string, string> {\n const t = themes[mode];\n return {\n \"--color-fg\": toRgbTuple(t.text.primary),\n \"--color-fg-muted\": toRgbTuple(t.text.secondary),\n \"--color-fg-subtle\": toRgbTuple(t.text.tertiary),\n \"--color-fg-inverse\": toRgbTuple(t.text.inverse),\n \"--color-link\": toRgbTuple(t.text.link),\n \"--color-brand\": toRgbTuple(t.text.brand),\n \"--color-surface\": toRgbTuple(t.background.surface),\n \"--color-surface-elevated\": toRgbTuple(t.background.secondary),\n \"--color-surface-inverse\": toRgbTuple(t.background.inverse),\n \"--color-canvas\": toRgbTuple(t.background.primary),\n \"--color-outline\": toRgbTuple(t.border.default),\n \"--color-outline-subtle\": toRgbTuple(t.border.subtle),\n \"--color-outline-strong\": toRgbTuple(t.border.strong),\n };\n}\n\nfunction block(selector: string, vars: Record<string, string>) {\n const lines = Object.entries(vars).map(\n ([key, value]) => ` ${key}: ${value};`,\n );\n return `${selector} {\\n${lines.join(\"\\n\")}\\n}`;\n}\n\n/**\n * Returns the full CSS variable layer:\n * - `:root` declares primitives + light-mode semantics.\n * - `@media (prefers-color-scheme: dark)` overrides semantics for users\n * whose OS is in dark mode.\n * - `.dark` lets apps force dark mode explicitly (e.g. for a theme toggle).\n */\nexport function buildThemeCss() {\n const primitives = primitiveVariables();\n const light = semanticVariables(\"light\");\n const dark = semanticVariables(\"dark\");\n\n return [\n \"/* Auto-generated from @uniicy/assets — do not edit by hand. */\",\n block(\":root\", { ...primitives, ...light }),\n `@media (prefers-color-scheme: dark) {\\n${block(\n \" :root\",\n dark,\n ).replace(/^/gm, \" \")}\\n}`,\n block(\".dark\", dark),\n \"\",\n ].join(\"\\n\\n\");\n}\n","import type { Config } from \"tailwindcss\";\nimport { buildTailwindThemeColors } from \"./tailwind-theme\";\n\n/**\n * Tailwind preset for consumer apps.\n *\n * Usage (in a consuming app's tailwind.config):\n * ```ts\n * import uiPreset from \"@dgithiomi/sbui-web/tailwind-preset\";\n * export default {\n * presets: [uiPreset],\n * content: [\"./src/**\\/*.{ts,tsx}\"],\n * };\n * ```\n *\n * The consumer should ALSO import the shipped stylesheet once, so the CSS\n * variables that back these tokens are defined:\n * ```ts\n * import \"@dgithiomi/sbui-web/styles.css\";\n * ```\n */\nconst TailwindPreset: Partial<Config> = {\n darkMode: \"media\",\n theme: {\n extend: {\n colors: buildTailwindThemeColors(),\n },\n },\n};\n\nexport default TailwindPreset;\n"],"mappings":"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","names":[]}