@stigmer/theme 0.0.34 → 0.0.36

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 (22) hide show
  1. package/README.md +185 -10
  2. package/index.d.ts +2 -0
  3. package/index.d.ts.map +1 -1
  4. package/index.js +1 -0
  5. package/index.js.map +1 -1
  6. package/package.json +14 -4
  7. package/presets/corporate.css +79 -0
  8. package/presets/fintech.css +80 -0
  9. package/presets/friendly.css +79 -0
  10. package/presets/index.d.ts +50 -0
  11. package/presets/index.d.ts.map +1 -0
  12. package/presets/index.js +55 -0
  13. package/presets/index.js.map +1 -0
  14. package/presets/startup.css +78 -0
  15. package/src/index.ts +2 -0
  16. package/src/presets/corporate.css +79 -0
  17. package/src/presets/fintech.css +80 -0
  18. package/src/presets/friendly.css +79 -0
  19. package/src/presets/index.ts +70 -0
  20. package/src/presets/startup.css +78 -0
  21. package/src/tokens.css +88 -65
  22. package/tokens.css +88 -65
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @stigmer/theme
2
2
 
3
- Design tokens (CSS custom properties) and utility functions for Stigmer UI components.
3
+ Design tokens, color presets, and utilities for Stigmer UI components.
4
4
 
5
5
  ## Install
6
6
 
@@ -10,21 +10,190 @@ npm install @stigmer/theme
10
10
 
11
11
  Peer dependencies: `clsx`, `tailwind-merge`
12
12
 
13
- ## Usage
13
+ ## Tokens
14
14
 
15
- ### CSS tokens
15
+ Import the base token stylesheet to get all Stigmer design variables (light and dark mode):
16
16
 
17
- Import the token stylesheet to get all Stigmer color variables (light and dark mode):
17
+ ```css
18
+ @import "@stigmer/theme/tokens.css";
19
+ ```
20
+
21
+ This defines CSS custom properties on `:root` (light) and `.dark` (dark mode). All properties use the `--stgm-*` namespace to avoid collisions with host application styles.
22
+
23
+ ### Token Reference
24
+
25
+ #### Layout
26
+
27
+ | Token | Purpose |
28
+ |-------|---------|
29
+ | `--stgm-radius` | Base border radius |
30
+
31
+ #### Colors (Core)
32
+
33
+ | Token | Purpose |
34
+ |-------|---------|
35
+ | `--stgm-background` | Page / app background |
36
+ | `--stgm-foreground` | Default text color |
37
+ | `--stgm-primary` | Primary brand / action color |
38
+ | `--stgm-primary-foreground` | Text on primary |
39
+ | `--stgm-secondary` | Secondary surfaces |
40
+ | `--stgm-secondary-foreground` | Text on secondary |
41
+ | `--stgm-muted` | Muted / disabled surfaces |
42
+ | `--stgm-muted-foreground` | Text on muted |
43
+ | `--stgm-accent` | Accent highlights |
44
+ | `--stgm-accent-foreground` | Text on accent |
45
+
46
+ #### Colors (Semantic)
47
+
48
+ | Token | Purpose |
49
+ |-------|---------|
50
+ | `--stgm-destructive` | Destructive / error actions |
51
+ | `--stgm-destructive-foreground` | Text on destructive |
52
+ | `--stgm-success` | Success states |
53
+ | `--stgm-success-foreground` | Text on success |
54
+ | `--stgm-warning` | Warning states |
55
+ | `--stgm-warning-foreground` | Text on warning |
56
+ | `--stgm-info` | Informational states |
57
+ | `--stgm-info-foreground` | Text on info |
58
+
59
+ #### Colors (Surfaces)
60
+
61
+ | Token | Purpose |
62
+ |-------|---------|
63
+ | `--stgm-card` | Card background |
64
+ | `--stgm-card-foreground` | Card text |
65
+ | `--stgm-popover` | Popover / dropdown background |
66
+ | `--stgm-popover-foreground` | Popover text |
67
+
68
+ #### Colors (Form)
69
+
70
+ | Token | Purpose |
71
+ |-------|---------|
72
+ | `--stgm-border` | Default border color |
73
+ | `--stgm-input` | Input border color |
74
+ | `--stgm-ring` | Focus ring color |
75
+
76
+ #### Colors (Chart)
77
+
78
+ | Token | Purpose |
79
+ |-------|---------|
80
+ | `--stgm-chart-1` through `--stgm-chart-5` | Data visualization palette |
81
+
82
+ #### Colors (Sidebar)
83
+
84
+ | Token | Purpose |
85
+ |-------|---------|
86
+ | `--stgm-sidebar` | Sidebar background |
87
+ | `--stgm-sidebar-foreground` | Sidebar text |
88
+ | `--stgm-sidebar-primary` | Sidebar active item |
89
+ | `--stgm-sidebar-primary-foreground` | Text on sidebar active |
90
+ | `--stgm-sidebar-accent` | Sidebar hover / accent |
91
+ | `--stgm-sidebar-accent-foreground` | Text on sidebar accent |
92
+ | `--stgm-sidebar-border` | Sidebar border |
93
+ | `--stgm-sidebar-ring` | Sidebar focus ring |
94
+
95
+ ## Design Language Presets
96
+
97
+ Stigmer ships with 5 design language presets. Each represents a real-world product category's visual DNA — not just a color swap, but a complete design language with different border radius, surface treatments, border styles, sidebar appearance, and color palette.
98
+
99
+ | Preset | Archetype | Import | CSS Class |
100
+ |--------|-----------|--------|-----------|
101
+ | Default | Stigmer's own identity | (built-in) | *(none)* |
102
+ | Corporate | Enterprise SaaS (Azure, Salesforce) | `@stigmer/theme/presets/corporate.css` | `stgm-theme-corporate` |
103
+ | Startup | Dev tools (Linear, Vercel) | `@stigmer/theme/presets/startup.css` | `stgm-theme-startup` |
104
+ | Friendly | Consumer SaaS (Notion, Intercom) | `@stigmer/theme/presets/friendly.css` | `stgm-theme-friendly` |
105
+ | Fintech | Premium financial (Stripe, Mercury) | `@stigmer/theme/presets/fintech.css` | `stgm-theme-fintech` |
106
+
107
+ Each preset overrides the full token surface — radius, all surface colors, borders, sidebar, and accent palette — for both light and dark modes.
108
+
109
+ ### Using a Preset
110
+
111
+ 1. Import the base tokens and the preset CSS:
18
112
 
19
113
  ```css
20
114
  @import "@stigmer/theme/tokens.css";
115
+ @import "@stigmer/theme/presets/corporate.css";
116
+ ```
117
+
118
+ 2. Add the preset class to a root element:
119
+
120
+ ```html
121
+ <html class="stgm-theme-corporate">
122
+ ```
123
+
124
+ For dark mode, both classes coexist:
125
+
126
+ ```html
127
+ <html class="stgm-theme-corporate dark">
128
+ ```
129
+
130
+ 3. All components consuming `--stgm-*` variables automatically pick up the new colors.
131
+
132
+ ### Preset Metadata (TypeScript)
133
+
134
+ The preset list is available as a typed constant for building UI selectors:
135
+
136
+ ```typescript
137
+ import { THEME_PRESETS } from "@stigmer/theme";
138
+ // or
139
+ import { THEME_PRESETS } from "@stigmer/theme/presets";
140
+
141
+ // THEME_PRESETS is an array of:
142
+ // { id: string, name: string, className: string, description: string, swatch: string }
143
+ ```
144
+
145
+ ## Custom Theming
146
+
147
+ You can create your own theme by overriding `--stgm-*` variables. Only override the tokens you want to change — everything else falls through to the defaults.
148
+
149
+ ```css
150
+ .my-custom-theme {
151
+ --stgm-primary: oklch(0.6 0.2 220);
152
+ --stgm-primary-foreground: oklch(0.985 0 0);
153
+ --stgm-ring: oklch(0.55 0.15 220);
154
+ --stgm-sidebar-primary: oklch(0.6 0.2 220);
155
+ --stgm-sidebar-primary-foreground: oklch(0.985 0 0);
156
+ --stgm-sidebar-ring: oklch(0.55 0.15 220);
157
+ }
158
+
159
+ .my-custom-theme.dark {
160
+ --stgm-primary: oklch(0.75 0.18 220);
161
+ --stgm-primary-foreground: oklch(0.145 0 0);
162
+ --stgm-sidebar-primary: oklch(0.75 0.18 220);
163
+ --stgm-sidebar-primary-foreground: oklch(0.145 0 0);
164
+ --stgm-sidebar-ring: oklch(0.5 0.12 220);
165
+ }
166
+ ```
167
+
168
+ Apply it the same way:
169
+
170
+ ```html
171
+ <html class="my-custom-theme dark">
21
172
  ```
22
173
 
23
- This provides `:root` and `.dark` CSS custom properties for all design tokens (`--background`, `--foreground`, `--primary`, etc.).
174
+ ### What a Full Preset Overrides
175
+
176
+ A complete design language preset overrides the entire token surface:
177
+
178
+ - **Shape**: `--stgm-radius` (sharp `0.25rem` to very rounded `0.875rem`)
179
+ - **Surfaces**: `--stgm-background`, `--stgm-card`, `--stgm-popover`, `--stgm-muted`, `--stgm-secondary`, `--stgm-accent`
180
+ - **Text**: `--stgm-foreground`, `--stgm-card-foreground`, `--stgm-muted-foreground`, etc.
181
+ - **Accent**: `--stgm-primary` / `--stgm-primary-foreground`, `--stgm-ring`
182
+ - **Borders**: `--stgm-border`, `--stgm-input`
183
+ - **Sidebar**: `--stgm-sidebar`, `--stgm-sidebar-primary`, `--stgm-sidebar-accent`, `--stgm-sidebar-border`
184
+ - **Charts**: `--stgm-chart-1` through `--stgm-chart-5`
185
+
186
+ You can also create minimal presets that override only a subset of tokens.
187
+
188
+ ### Color Format
189
+
190
+ All built-in tokens use [OKLCH](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) for perceptually uniform color manipulation. You can use any CSS color format in your overrides.
191
+
192
+ ## Utilities
24
193
 
25
- ### `cn()` utility
194
+ ### `cn()` — Class Name Merge
26
195
 
27
- Merge Tailwind CSS class names with conflict resolution:
196
+ Combines class names with Tailwind conflict resolution (powered by `clsx` + `tailwind-merge`):
28
197
 
29
198
  ```typescript
30
199
  import { cn } from "@stigmer/theme";
@@ -34,9 +203,15 @@ import { cn } from "@stigmer/theme";
34
203
 
35
204
  ## Exports
36
205
 
37
- - `cn(...inputs)` — class name merge utility (clsx + tailwind-merge)
38
- - `ClassValue` — TypeScript type for `cn()` inputs
39
- - `./tokens.css` — CSS custom properties for the Stigmer design system
206
+ | Export | Content |
207
+ |--------|---------|
208
+ | `@stigmer/theme` | `cn()`, `ClassValue`, `THEME_PRESETS`, `ThemePreset` |
209
+ | `@stigmer/theme/tokens.css` | Base CSS custom properties (light + dark) |
210
+ | `@stigmer/theme/presets` | `THEME_PRESETS` array and `ThemePreset` type |
211
+ | `@stigmer/theme/presets/corporate.css` | Corporate (Enterprise SaaS) design language |
212
+ | `@stigmer/theme/presets/startup.css` | Startup (Modern dev tools) design language |
213
+ | `@stigmer/theme/presets/friendly.css` | Friendly (Consumer SaaS) design language |
214
+ | `@stigmer/theme/presets/fintech.css` | Fintech (Premium financial) design language |
40
215
 
41
216
  ## License
42
217
 
package/index.d.ts CHANGED
@@ -1,3 +1,5 @@
1
1
  export { cn } from "./utils";
2
2
  export type { ClassValue } from "./utils";
3
+ export { THEME_PRESETS, resolvePresetClass } from "./presets/index";
4
+ export type { ThemePreset, ThemePresetId } from "./presets/index";
3
5
  //# sourceMappingURL=index.d.ts.map
package/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACpE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
package/index.js CHANGED
@@ -1,2 +1,3 @@
1
1
  export { cn } from "./utils";
2
+ export { THEME_PRESETS, resolvePresetClass } from "./presets/index";
2
3
  //# sourceMappingURL=index.js.map
package/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAE7B,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}
package/package.json CHANGED
@@ -1,14 +1,16 @@
1
1
  {
2
2
  "name": "@stigmer/theme",
3
- "version": "0.0.34",
3
+ "version": "0.0.36",
4
4
  "description": "Design tokens, CSS custom properties, and utility functions for Stigmer UI components",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
7
- "sideEffects": false,
7
+ "sideEffects": [
8
+ "*.css"
9
+ ],
8
10
  "repository": {
9
11
  "type": "git",
10
12
  "url": "git+https://github.com/stigmer/stigmer.git",
11
- "directory": "client-apps/web/_libs/ui/theme"
13
+ "directory": "sdk/theme"
12
14
  },
13
15
  "engines": {
14
16
  "node": ">=18"
@@ -27,7 +29,15 @@
27
29
  "types": "./index.d.ts",
28
30
  "import": "./index.js"
29
31
  },
30
- "./tokens.css": "./tokens.css"
32
+ "./tokens.css": "./tokens.css",
33
+ "./presets": {
34
+ "types": "./presets/index.d.ts",
35
+ "import": "./presets/index.js"
36
+ },
37
+ "./presets/corporate.css": "./presets/corporate.css",
38
+ "./presets/startup.css": "./presets/startup.css",
39
+ "./presets/friendly.css": "./presets/friendly.css",
40
+ "./presets/fintech.css": "./presets/fintech.css"
31
41
  },
32
42
  "peerDependencies": {
33
43
  "clsx": "^2.0.0",
package/presets/corporate.css ADDED
@@ -0,0 +1,79 @@
1
+ /* Corporate — Enterprise SaaS design language (Azure, Salesforce, ServiceNow)
2
+ Tight radius, corporate blue, cool surfaces, prominent borders, dark blue sidebar */
3
+
4
+ .stgm-theme-corporate {
5
+ --stgm-font-sans: var(--font-inter, "Inter", system-ui, sans-serif);
6
+ --stgm-radius: 0.375rem;
7
+ --stgm-background: oklch(0.97 0.01 250);
8
+ --stgm-foreground: oklch(0.18 0.03 250);
9
+ --stgm-card: oklch(1 0.005 250);
10
+ --stgm-card-foreground: oklch(0.18 0.03 250);
11
+ --stgm-popover: oklch(1 0.005 250);
12
+ --stgm-popover-foreground: oklch(0.18 0.03 250);
13
+ --stgm-primary: oklch(0.48 0.18 250);
14
+ --stgm-primary-foreground: oklch(0.98 0 0);
15
+ --stgm-secondary: oklch(0.93 0.02 250);
16
+ --stgm-secondary-foreground: oklch(0.25 0.03 250);
17
+ --stgm-muted: oklch(0.93 0.02 250);
18
+ --stgm-muted-foreground: oklch(0.48 0.03 250);
19
+ --stgm-accent: oklch(0.91 0.03 250);
20
+ --stgm-accent-foreground: oklch(0.25 0.03 250);
21
+ --stgm-border: oklch(0.85 0.025 250);
22
+ --stgm-input: oklch(0.85 0.025 250);
23
+ --stgm-ring: oklch(0.48 0.15 250);
24
+ --stgm-chart-1: oklch(0.55 0.20 250);
25
+ --stgm-chart-2: oklch(0.60 0.16 200);
26
+ --stgm-chart-3: oklch(0.50 0.15 300);
27
+ --stgm-chart-4: oklch(0.72 0.16 150);
28
+ --stgm-chart-5: oklch(0.68 0.18 60);
29
+ --stgm-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.12), 0 1px 2px -1px rgb(0 0 0 / 0.1);
30
+ --stgm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.12), 0 2px 4px -2px rgb(0 0 0 / 0.1);
31
+ --stgm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.12), 0 4px 6px -4px rgb(0 0 0 / 0.08);
32
+ --stgm-transition-duration: 200ms;
33
+ --stgm-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
34
+ --stgm-sidebar: oklch(0.20 0.06 250);
35
+ --stgm-sidebar-foreground: oklch(0.93 0 0);
36
+ --stgm-sidebar-primary: oklch(0.75 0.14 250);
37
+ --stgm-sidebar-primary-foreground: oklch(0.15 0 0);
38
+ --stgm-sidebar-accent: oklch(0.28 0.06 250);
39
+ --stgm-sidebar-accent-foreground: oklch(0.93 0 0);
40
+ --stgm-sidebar-border: oklch(1 0 0 / 10%);
41
+ --stgm-sidebar-ring: oklch(0.48 0.15 250);
42
+ }
43
+
44
+ .dark .stgm-theme-corporate,
45
+ .stgm-theme-corporate.dark {
46
+ --stgm-background: oklch(0.16 0.04 250);
47
+ --stgm-foreground: oklch(0.93 0.01 250);
48
+ --stgm-card: oklch(0.22 0.05 250);
49
+ --stgm-card-foreground: oklch(0.93 0.01 250);
50
+ --stgm-popover: oklch(0.26 0.05 250);
51
+ --stgm-popover-foreground: oklch(0.93 0.01 250);
52
+ --stgm-primary: oklch(0.68 0.16 250);
53
+ --stgm-primary-foreground: oklch(0.12 0 0);
54
+ --stgm-secondary: oklch(0.26 0.04 250);
55
+ --stgm-secondary-foreground: oklch(0.93 0.01 250);
56
+ --stgm-muted: oklch(0.26 0.04 250);
57
+ --stgm-muted-foreground: oklch(0.65 0.04 250);
58
+ --stgm-accent: oklch(0.32 0.05 250);
59
+ --stgm-accent-foreground: oklch(0.93 0.01 250);
60
+ --stgm-border: oklch(0.40 0.05 250);
61
+ --stgm-input: oklch(0.40 0.05 250);
62
+ --stgm-ring: oklch(0.55 0.14 250);
63
+ --stgm-chart-1: oklch(0.60 0.20 250);
64
+ --stgm-chart-2: oklch(0.62 0.17 200);
65
+ --stgm-chart-3: oklch(0.58 0.18 300);
66
+ --stgm-chart-4: oklch(0.70 0.17 150);
67
+ --stgm-chart-5: oklch(0.68 0.20 60);
68
+ --stgm-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.28);
69
+ --stgm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.3);
70
+ --stgm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.35);
71
+ --stgm-sidebar: oklch(0.13 0.05 250);
72
+ --stgm-sidebar-foreground: oklch(0.93 0 0);
73
+ --stgm-sidebar-primary: oklch(0.68 0.16 250);
74
+ --stgm-sidebar-primary-foreground: oklch(0.12 0 0);
75
+ --stgm-sidebar-accent: oklch(0.22 0.06 250);
76
+ --stgm-sidebar-accent-foreground: oklch(0.93 0 0);
77
+ --stgm-sidebar-border: oklch(0.35 0.05 250);
78
+ --stgm-sidebar-ring: oklch(0.50 0.12 250);
79
+ }
package/presets/fintech.css ADDED
@@ -0,0 +1,80 @@
1
+ /* Fintech — Premium financial design language (Stripe, Mercury, Brex)
2
+ Nearly square corners, indigo, crisp surfaces, prominent dark sidebar */
3
+
4
+ .stgm-theme-fintech {
5
+ --stgm-font-sans: var(--font-ibm-plex-sans, "IBM Plex Sans", system-ui, sans-serif);
6
+ --stgm-font-mono: var(--font-ibm-plex-mono, "IBM Plex Mono", ui-monospace, monospace);
7
+ --stgm-radius: 0.125rem;
8
+ --stgm-background: oklch(0.98 0.005 280);
9
+ --stgm-foreground: oklch(0.15 0.04 280);
10
+ --stgm-card: oklch(1 0.003 280);
11
+ --stgm-card-foreground: oklch(0.15 0.04 280);
12
+ --stgm-popover: oklch(1 0.003 280);
13
+ --stgm-popover-foreground: oklch(0.15 0.04 280);
14
+ --stgm-primary: oklch(0.48 0.24 280);
15
+ --stgm-primary-foreground: oklch(0.98 0 0);
16
+ --stgm-secondary: oklch(0.95 0.01 280);
17
+ --stgm-secondary-foreground: oklch(0.25 0.04 280);
18
+ --stgm-muted: oklch(0.95 0.01 280);
19
+ --stgm-muted-foreground: oklch(0.50 0.03 280);
20
+ --stgm-accent: oklch(0.93 0.02 280);
21
+ --stgm-accent-foreground: oklch(0.25 0.04 280);
22
+ --stgm-border: oklch(0.90 0.01 280);
23
+ --stgm-input: oklch(0.88 0.015 280);
24
+ --stgm-ring: oklch(0.48 0.18 280);
25
+ --stgm-chart-1: oklch(0.52 0.24 280);
26
+ --stgm-chart-2: oklch(0.58 0.20 230);
27
+ --stgm-chart-3: oklch(0.50 0.16 340);
28
+ --stgm-chart-4: oklch(0.68 0.15 170);
29
+ --stgm-chart-5: oklch(0.74 0.16 60);
30
+ --stgm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.08), 0 1px 1px 0 rgb(0 0 0 / 0.06);
31
+ --stgm-shadow-md: 0 3px 4px -1px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.08);
32
+ --stgm-shadow-lg: 0 8px 10px -3px rgb(0 0 0 / 0.1), 0 3px 4px -3px rgb(0 0 0 / 0.08);
33
+ --stgm-transition-duration: 150ms;
34
+ --stgm-transition-timing: cubic-bezier(0.25, 0.1, 0.25, 1);
35
+ --stgm-sidebar: oklch(0.12 0.06 280);
36
+ --stgm-sidebar-foreground: oklch(0.90 0.01 280);
37
+ --stgm-sidebar-primary: oklch(0.72 0.20 280);
38
+ --stgm-sidebar-primary-foreground: oklch(0.12 0 0);
39
+ --stgm-sidebar-accent: oklch(0.20 0.07 280);
40
+ --stgm-sidebar-accent-foreground: oklch(0.90 0.01 280);
41
+ --stgm-sidebar-border: oklch(0.25 0.05 280);
42
+ --stgm-sidebar-ring: oklch(0.48 0.18 280);
43
+ }
44
+
45
+ .dark .stgm-theme-fintech,
46
+ .stgm-theme-fintech.dark {
47
+ --stgm-background: oklch(0.12 0.05 280);
48
+ --stgm-foreground: oklch(0.92 0.01 280);
49
+ --stgm-card: oklch(0.18 0.06 280);
50
+ --stgm-card-foreground: oklch(0.92 0.01 280);
51
+ --stgm-popover: oklch(0.23 0.05 280);
52
+ --stgm-popover-foreground: oklch(0.92 0.01 280);
53
+ --stgm-primary: oklch(0.70 0.22 280);
54
+ --stgm-primary-foreground: oklch(0.10 0 0);
55
+ --stgm-secondary: oklch(0.23 0.05 280);
56
+ --stgm-secondary-foreground: oklch(0.92 0.01 280);
57
+ --stgm-muted: oklch(0.23 0.05 280);
58
+ --stgm-muted-foreground: oklch(0.58 0.04 280);
59
+ --stgm-accent: oklch(0.28 0.06 280);
60
+ --stgm-accent-foreground: oklch(0.92 0.01 280);
61
+ --stgm-border: oklch(0.35 0.06 280);
62
+ --stgm-input: oklch(0.35 0.06 280);
63
+ --stgm-ring: oklch(0.55 0.18 280);
64
+ --stgm-chart-1: oklch(0.62 0.24 280);
65
+ --stgm-chart-2: oklch(0.58 0.20 230);
66
+ --stgm-chart-3: oklch(0.56 0.18 340);
67
+ --stgm-chart-4: oklch(0.66 0.17 170);
68
+ --stgm-chart-5: oklch(0.70 0.18 60);
69
+ --stgm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.28), 0 1px 1px 0 rgb(0 0 0 / 0.24);
70
+ --stgm-shadow-md: 0 3px 4px -1px rgb(0 0 0 / 0.32), 0 1px 2px -1px rgb(0 0 0 / 0.28);
71
+ --stgm-shadow-lg: 0 8px 10px -3px rgb(0 0 0 / 0.36), 0 3px 4px -3px rgb(0 0 0 / 0.3);
72
+ --stgm-sidebar: oklch(0.08 0.06 280);
73
+ --stgm-sidebar-foreground: oklch(0.88 0.01 280);
74
+ --stgm-sidebar-primary: oklch(0.70 0.22 280);
75
+ --stgm-sidebar-primary-foreground: oklch(0.10 0 0);
76
+ --stgm-sidebar-accent: oklch(0.16 0.07 280);
77
+ --stgm-sidebar-accent-foreground: oklch(0.88 0.01 280);
78
+ --stgm-sidebar-border: oklch(0.22 0.06 280);
79
+ --stgm-sidebar-ring: oklch(0.50 0.14 280);
80
+ }
package/presets/friendly.css ADDED
@@ -0,0 +1,79 @@
1
+ /* Friendly — Consumer SaaS design language (Notion, Intercom, Slack)
2
+ Very rounded, warm coral, cream-tinted surfaces, soft borders, approachable */
3
+
4
+ .stgm-theme-friendly {
5
+ --stgm-font-sans: var(--font-nunito, "Nunito", system-ui, sans-serif);
6
+ --stgm-radius: 1.25rem;
7
+ --stgm-background: oklch(0.97 0.015 65);
8
+ --stgm-foreground: oklch(0.22 0.03 50);
9
+ --stgm-card: oklch(0.99 0.01 65);
10
+ --stgm-card-foreground: oklch(0.22 0.03 50);
11
+ --stgm-popover: oklch(0.99 0.01 65);
12
+ --stgm-popover-foreground: oklch(0.22 0.03 50);
13
+ --stgm-primary: oklch(0.62 0.20 40);
14
+ --stgm-primary-foreground: oklch(0.98 0 0);
15
+ --stgm-secondary: oklch(0.94 0.02 65);
16
+ --stgm-secondary-foreground: oklch(0.30 0.03 50);
17
+ --stgm-muted: oklch(0.93 0.025 65);
18
+ --stgm-muted-foreground: oklch(0.50 0.03 50);
19
+ --stgm-accent: oklch(0.92 0.03 65);
20
+ --stgm-accent-foreground: oklch(0.30 0.03 50);
21
+ --stgm-border: oklch(0.88 0.02 65);
22
+ --stgm-input: oklch(0.88 0.02 65);
23
+ --stgm-ring: oklch(0.62 0.15 40);
24
+ --stgm-chart-1: oklch(0.62 0.20 40);
25
+ --stgm-chart-2: oklch(0.58 0.16 150);
26
+ --stgm-chart-3: oklch(0.55 0.18 280);
27
+ --stgm-chart-4: oklch(0.72 0.18 90);
28
+ --stgm-chart-5: oklch(0.58 0.16 200);
29
+ --stgm-shadow-sm: 0 1px 4px 0 rgb(0 0 0 / 0.07), 0 1px 3px -1px rgb(0 0 0 / 0.07);
30
+ --stgm-shadow-md: 0 4px 8px -1px rgb(0 0 0 / 0.08), 0 2px 5px -2px rgb(0 0 0 / 0.07);
31
+ --stgm-shadow-lg: 0 10px 20px -3px rgb(0 0 0 / 0.08), 0 4px 8px -4px rgb(0 0 0 / 0.06);
32
+ --stgm-transition-duration: 200ms;
33
+ --stgm-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
34
+ --stgm-sidebar: oklch(0.95 0.02 65);
35
+ --stgm-sidebar-foreground: oklch(0.22 0.03 50);
36
+ --stgm-sidebar-primary: oklch(0.62 0.20 40);
37
+ --stgm-sidebar-primary-foreground: oklch(0.98 0 0);
38
+ --stgm-sidebar-accent: oklch(0.92 0.025 65);
39
+ --stgm-sidebar-accent-foreground: oklch(0.30 0.03 50);
40
+ --stgm-sidebar-border: oklch(0.88 0.02 65);
41
+ --stgm-sidebar-ring: oklch(0.62 0.15 40);
42
+ }
43
+
44
+ .dark .stgm-theme-friendly,
45
+ .stgm-theme-friendly.dark {
46
+ --stgm-background: oklch(0.18 0.03 50);
47
+ --stgm-foreground: oklch(0.93 0.01 65);
48
+ --stgm-card: oklch(0.24 0.04 50);
49
+ --stgm-card-foreground: oklch(0.93 0.01 65);
50
+ --stgm-popover: oklch(0.28 0.035 50);
51
+ --stgm-popover-foreground: oklch(0.93 0.01 65);
52
+ --stgm-primary: oklch(0.72 0.18 40);
53
+ --stgm-primary-foreground: oklch(0.15 0 0);
54
+ --stgm-secondary: oklch(0.27 0.03 50);
55
+ --stgm-secondary-foreground: oklch(0.93 0.01 65);
56
+ --stgm-muted: oklch(0.27 0.03 50);
57
+ --stgm-muted-foreground: oklch(0.62 0.03 50);
58
+ --stgm-accent: oklch(0.33 0.04 50);
59
+ --stgm-accent-foreground: oklch(0.93 0.01 65);
60
+ --stgm-border: oklch(0.38 0.04 50);
61
+ --stgm-input: oklch(0.38 0.04 50);
62
+ --stgm-ring: oklch(0.60 0.14 40);
63
+ --stgm-chart-1: oklch(0.68 0.20 40);
64
+ --stgm-chart-2: oklch(0.62 0.17 150);
65
+ --stgm-chart-3: oklch(0.60 0.18 280);
66
+ --stgm-chart-4: oklch(0.70 0.18 90);
67
+ --stgm-chart-5: oklch(0.60 0.17 200);
68
+ --stgm-shadow-sm: 0 1px 4px 0 rgb(0 0 0 / 0.22), 0 1px 3px -1px rgb(0 0 0 / 0.2);
69
+ --stgm-shadow-md: 0 4px 8px -1px rgb(0 0 0 / 0.26), 0 2px 5px -2px rgb(0 0 0 / 0.22);
70
+ --stgm-shadow-lg: 0 10px 20px -3px rgb(0 0 0 / 0.3), 0 4px 8px -4px rgb(0 0 0 / 0.25);
71
+ --stgm-sidebar: oklch(0.15 0.03 50);
72
+ --stgm-sidebar-foreground: oklch(0.90 0.01 65);
73
+ --stgm-sidebar-primary: oklch(0.72 0.18 40);
74
+ --stgm-sidebar-primary-foreground: oklch(0.15 0 0);
75
+ --stgm-sidebar-accent: oklch(0.24 0.04 50);
76
+ --stgm-sidebar-accent-foreground: oklch(0.90 0.01 65);
77
+ --stgm-sidebar-border: oklch(0.32 0.04 50);
78
+ --stgm-sidebar-ring: oklch(0.55 0.12 40);
79
+ }
package/presets/index.d.ts ADDED
@@ -0,0 +1,50 @@
1
+ export interface ThemePreset {
2
+ readonly id: string;
3
+ readonly name: string;
4
+ /** CSS class added to the root element. Empty string for the built-in default. */
5
+ readonly className: string;
6
+ readonly description: string;
7
+ /** Representative OKLCH color string used for swatch rendering. */
8
+ readonly swatch: string;
9
+ }
10
+ export declare const THEME_PRESETS: readonly [{
11
+ readonly id: "default";
12
+ readonly name: "Default";
13
+ readonly className: "";
14
+ readonly description: "Stigmer's built-in teal palette";
15
+ readonly swatch: "oklch(0.55 0.12 190)";
16
+ }, {
17
+ readonly id: "corporate";
18
+ readonly name: "Corporate";
19
+ readonly className: "stgm-theme-corporate";
20
+ readonly description: "Enterprise SaaS — tight radius, blue, cool grays, dark sidebar";
21
+ readonly swatch: "oklch(0.48 0.15 250)";
22
+ }, {
23
+ readonly id: "startup";
24
+ readonly name: "Startup";
25
+ readonly className: "stgm-theme-startup";
26
+ readonly description: "Modern dev tools — clean, monochrome, violet accent, minimal";
27
+ readonly swatch: "oklch(0.50 0.22 285)";
28
+ }, {
29
+ readonly id: "friendly";
30
+ readonly name: "Friendly";
31
+ readonly className: "stgm-theme-friendly";
32
+ readonly description: "Consumer SaaS — very rounded, warm coral, cream surfaces";
33
+ readonly swatch: "oklch(0.62 0.19 45)";
34
+ }, {
35
+ readonly id: "fintech";
36
+ readonly name: "Fintech";
37
+ readonly className: "stgm-theme-fintech";
38
+ readonly description: "Premium financial — sharp corners, indigo, crisp, dark sidebar";
39
+ readonly swatch: "oklch(0.50 0.22 280)";
40
+ }];
41
+ /** Union of built-in preset identifiers. */
42
+ export type ThemePresetId = (typeof THEME_PRESETS)[number]["id"];
43
+ /**
44
+ * Resolve a preset ID to its CSS class name.
45
+ *
46
+ * Returns `""` for `"default"` (no additional class needed).
47
+ * Emits a dev-mode warning for unrecognised IDs (guards JS consumers).
48
+ */
49
+ export declare function resolvePresetClass(id: ThemePresetId): string;
50
+ //# sourceMappingURL=index.d.ts.map
package/presets/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/presets/index.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,kFAAkF;IAClF,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,mEAAmE;IACnE,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCiB,CAAC;AAE5C,4CAA4C;AAC5C,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC;AAEjE;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,aAAa,GAAG,MAAM,CAY5D"}
package/presets/index.js ADDED
@@ -0,0 +1,55 @@
1
+ export const THEME_PRESETS = [
2
+ {
3
+ id: "default",
4
+ name: "Default",
5
+ className: "",
6
+ description: "Stigmer's built-in teal palette",
7
+ swatch: "oklch(0.55 0.12 190)",
8
+ },
9
+ {
10
+ id: "corporate",
11
+ name: "Corporate",
12
+ className: "stgm-theme-corporate",
13
+ description: "Enterprise SaaS — tight radius, blue, cool grays, dark sidebar",
14
+ swatch: "oklch(0.48 0.15 250)",
15
+ },
16
+ {
17
+ id: "startup",
18
+ name: "Startup",
19
+ className: "stgm-theme-startup",
20
+ description: "Modern dev tools — clean, monochrome, violet accent, minimal",
21
+ swatch: "oklch(0.50 0.22 285)",
22
+ },
23
+ {
24
+ id: "friendly",
25
+ name: "Friendly",
26
+ className: "stgm-theme-friendly",
27
+ description: "Consumer SaaS — very rounded, warm coral, cream surfaces",
28
+ swatch: "oklch(0.62 0.19 45)",
29
+ },
30
+ {
31
+ id: "fintech",
32
+ name: "Fintech",
33
+ className: "stgm-theme-fintech",
34
+ description: "Premium financial — sharp corners, indigo, crisp, dark sidebar",
35
+ swatch: "oklch(0.50 0.22 280)",
36
+ },
37
+ ];
38
+ /**
39
+ * Resolve a preset ID to its CSS class name.
40
+ *
41
+ * Returns `""` for `"default"` (no additional class needed).
42
+ * Emits a dev-mode warning for unrecognised IDs (guards JS consumers).
43
+ */
44
+ export function resolvePresetClass(id) {
45
+ const preset = THEME_PRESETS.find((p) => p.id === id);
46
+ if (!preset) {
47
+ if (process.env.NODE_ENV !== "production") {
48
+ console.warn(`[@stigmer/theme] Unknown preset "${String(id)}". ` +
49
+ `Available: ${THEME_PRESETS.map((p) => p.id).join(", ")}`);
50
+ }
51
+ return "";
52
+ }
53
+ return preset.className;
54
+ }
55
+ //# sourceMappingURL=index.js.map
package/presets/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/presets/index.ts"],"names":[],"mappings":"AAUA,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B;QACE,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,EAAE;QACb,WAAW,EAAE,iCAAiC;QAC9C,MAAM,EAAE,sBAAsB;KAC/B;IACD;QACE,EAAE,EAAE,WAAW;QACf,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,sBAAsB;QACjC,WAAW,EAAE,gEAAgE;QAC7E,MAAM,EAAE,sBAAsB;KAC/B;IACD;QACE,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,oBAAoB;QAC/B,WAAW,EAAE,8DAA8D;QAC3E,MAAM,EAAE,sBAAsB;KAC/B;IACD;QACE,EAAE,EAAE,UAAU;QACd,IAAI,EAAE,UAAU;QAChB,SAAS,EAAE,qBAAqB;QAChC,WAAW,EAAE,0DAA0D;QACvE,MAAM,EAAE,qBAAqB;KAC9B;IACD;QACE,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,oBAAoB;QAC/B,WAAW,EAAE,gEAAgE;QAC7E,MAAM,EAAE,sBAAsB;KAC/B;CACwC,CAAC;AAK5C;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAAiB;IAClD,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IACtD,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;YAC1C,OAAO,CAAC,IAAI,CACV,oCAAoC,MAAM,CAAC,EAAE,CAAC,KAAK;gBACjD,cAAc,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAC5D,CAAC;QACJ,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,OAAO,MAAM,CAAC,SAAS,CAAC;AAC1B,CAAC"}