@usefidel/design-system 0.11.0 → 0.12.1

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 (10) hide show
  1. package/README.md +2 -0
  2. package/dist/admin.css +3 -0
  3. package/dist/extension.css +3 -0
  4. package/dist/fidel.manifest.json +2 -2
  5. package/dist/index.css +14 -10
  6. package/dist/landing.css +3 -0
  7. package/dist/theme.css +3 -0
  8. package/dist/webapp.css +3 -0
  9. package/package.json +2 -2
  10. package/tokens/tokens.json +12 -0
package/README.md CHANGED
@@ -10,5 +10,7 @@ The single source of truth for Fidel's brand design tokens.
10
10
 
11
11
  Surfaces (webapp / extension / landing / admin) are **outputs** of the one Fidel brand, not separate brands. Per-surface density is a declared Style Dictionary platform dimension.
12
12
 
13
+ The live token page (Workers Static Assets, `fidel-ds-tokens`) is the `designSystemChecks[]` URL for CI dogfood: https://fidel-ds-tokens.eodioko.workers.dev/. Source: `tokens-page/index.html`. Deploy: `npm run tokens-page:stage && npx wrangler deploy`.
14
+
13
15
  ## Build
14
16
  `npm ci && npm run build` regenerates all of `dist/`.
package/dist/admin.css CHANGED
@@ -48,6 +48,9 @@
48
48
  --color-info: #1d4ed8;
49
49
  --color-info-strong: #2563eb;
50
50
  --color-info-surface: #eff6ff;
51
+ --color-text-on-neutral: #404040;
52
+ --color-surface-subtle: #fafafa;
53
+ --color-accent-pressed: #9a3412;
51
54
  --font-display: 'Rethink Sans', system-ui, -apple-system, sans-serif;
52
55
  --font-body: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
53
56
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
package/dist/extension.css CHANGED
@@ -48,6 +48,9 @@
48
48
  --color-info: #1d4ed8;
49
49
  --color-info-strong: #2563eb;
50
50
  --color-info-surface: #eff6ff;
51
+ --color-text-on-neutral: #404040;
52
+ --color-surface-subtle: #fafafa;
53
+ --color-accent-pressed: #9a3412;
51
54
  --font-display: 'Rethink Sans', system-ui, -apple-system, sans-serif;
52
55
  --font-body: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
53
56
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
package/dist/fidel.manifest.json CHANGED
@@ -10,6 +10,6 @@
10
10
  "webapp.css"
11
11
  ],
12
12
  "storybookUrl": null,
13
- "packageVersion": "0.11.0",
14
- "resolvedSha": "40acd49195f775e019c290143a6f0b6fa27ab9c9"
13
+ "packageVersion": "0.12.1",
14
+ "resolvedSha": "c83da46c373073b0c96b7a33a0d6b6e7f1381395"
15
15
  }
package/dist/index.css CHANGED
@@ -70,7 +70,7 @@
70
70
  background-color: var(--color-accent-hover, #c2410c);
71
71
  }
72
72
  .fds-button--primary:active:not(:disabled) {
73
- background-color: #9a3412;
73
+ background-color: var(--color-accent-pressed, #9a3412);
74
74
  }
75
75
  .fds-button--primary:disabled {
76
76
  background-color: var(--color-surface, #fff7ed);
@@ -80,10 +80,10 @@
80
80
  .fds-button--outlined {
81
81
  background-color: #ffffff;
82
82
  border-color: var(--color-border-strong, #d4d4d4);
83
- color: #404040;
83
+ color: var(--color-text-on-neutral, #404040);
84
84
  }
85
85
  .fds-button--outlined:hover:not(:disabled) {
86
- background-color: #fafafa;
86
+ background-color: var(--color-surface-subtle, #fafafa);
87
87
  }
88
88
  .fds-button--outlined:active:not(:disabled) {
89
89
  background-color: #f5f5f5;
@@ -96,10 +96,10 @@
96
96
  }
97
97
  .fds-button--text {
98
98
  background-color: transparent;
99
- color: #404040;
99
+ color: var(--color-text-on-neutral, #404040);
100
100
  }
101
101
  .fds-button--text:hover:not(:disabled) {
102
- background-color: #fafafa;
102
+ background-color: var(--color-surface-subtle, #fafafa);
103
103
  }
104
104
  .fds-button--text:active:not(:disabled) {
105
105
  background-color: #f5f5f5;
@@ -109,8 +109,8 @@
109
109
  cursor: not-allowed;
110
110
  }
111
111
  .fds-button--neutral {
112
- background-color: #fafafa;
113
- color: #404040;
112
+ background-color: var(--color-surface-subtle, #fafafa);
113
+ color: var(--color-text-on-neutral, #404040);
114
114
  }
115
115
  .fds-button--neutral:hover:not(:disabled) {
116
116
  background-color: #f5f5f5;
@@ -119,7 +119,7 @@
119
119
  background-color: #e5e5e5;
120
120
  }
121
121
  .fds-button--neutral:disabled {
122
- background-color: #fafafa;
122
+ background-color: var(--color-surface-subtle, #fafafa);
123
123
  color: #a3a3a3;
124
124
  cursor: not-allowed;
125
125
  }
@@ -257,7 +257,7 @@
257
257
  padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) var(--spacing-6);
258
258
  border: 0;
259
259
  border-bottom: 1px solid var(--color-border);
260
- background: #fafafa;
260
+ background: var(--color-surface-subtle, #fafafa);
261
261
  cursor: pointer;
262
262
  text-align: left;
263
263
  font-family: inherit;
@@ -325,7 +325,7 @@
325
325
  transition: background var(--duration-quick, 150ms) ease;
326
326
  }
327
327
  .fds-diff-section__element[data-highlighted=true] {
328
- background: var(--color-accent-subtle, var(--color-surface-hover));
328
+ background: var(--color-surface-hover);
329
329
  box-shadow: inset 2px 0 0 var(--color-accent);
330
330
  }
331
331
  .fds-diff-section__element-head {
@@ -347,6 +347,10 @@
347
347
  .fds-diff-section__element-head--button:hover {
348
348
  background: var(--color-surface-hover);
349
349
  }
350
+ .fds-diff-section__element[data-highlighted=true] .fds-diff-section__element-head--button:hover {
351
+ background: var(--color-border);
352
+ box-shadow: inset 2px 0 0 var(--color-accent);
353
+ }
350
354
  .fds-diff-section__element-head-inner {
351
355
  display: flex;
352
356
  align-items: center;
package/dist/landing.css CHANGED
@@ -48,6 +48,9 @@
48
48
  --color-info: #1d4ed8;
49
49
  --color-info-strong: #2563eb;
50
50
  --color-info-surface: #eff6ff;
51
+ --color-text-on-neutral: #404040;
52
+ --color-surface-subtle: #fafafa;
53
+ --color-accent-pressed: #9a3412;
51
54
  --font-display: 'Rethink Sans', system-ui, -apple-system, sans-serif;
52
55
  --font-body: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
53
56
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
package/dist/theme.css CHANGED
@@ -50,6 +50,9 @@
50
50
  --color-info: #1d4ed8;
51
51
  --color-info-strong: #2563eb;
52
52
  --color-info-surface: #eff6ff;
53
+ --color-text-on-neutral: #404040;
54
+ --color-surface-subtle: #fafafa;
55
+ --color-accent-pressed: #9a3412;
53
56
  --font-display: 'Rethink Sans', system-ui, -apple-system, sans-serif;
54
57
  --font-body: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
55
58
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
package/dist/webapp.css CHANGED
@@ -48,6 +48,9 @@
48
48
  --color-info: #1d4ed8;
49
49
  --color-info-strong: #2563eb;
50
50
  --color-info-surface: #eff6ff;
51
+ --color-text-on-neutral: #404040;
52
+ --color-surface-subtle: #fafafa;
53
+ --color-accent-pressed: #9a3412;
51
54
  --font-display: 'Rethink Sans', system-ui, -apple-system, sans-serif;
52
55
  --font-body: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
53
56
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@usefidel/design-system",
3
- "version": "0.11.0",
3
+ "version": "0.12.1",
4
4
  "description": "Fidel brand design tokens + React component library — DTCG token source of truth, generated per-surface CSS + Tailwind-v4 parser-compatibility output, and on-brand React components (Button, MismatchCard, DiffSection).",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -35,12 +35,12 @@
35
35
  "tokens/tokens.json"
36
36
  ],
37
37
  "scripts": {
38
+ "tokens-page:stage": "cp dist/webapp.css dist/index.css tokens-page/",
38
39
  "build": "npm run build:tokens && npm run build:lib",
39
40
  "build:tokens": "node style-dictionary.config.js && node build/gen-manifest.mjs",
40
41
  "build:lib": "tsup",
41
42
  "typecheck": "tsc --noEmit",
42
43
  "surface-check": "node build/surface-check.mjs",
43
- "parser-check": "deno test --allow-read test/parser-compat.test.ts",
44
44
  "test": "node --test test/*.test.mjs",
45
45
  "gitleaks": "gitleaks detect --no-banner --redact -v"
46
46
  },
package/tokens/tokens.json CHANGED
@@ -263,6 +263,18 @@
263
263
  "info-surface": {
264
264
  "$value": "#eff6ff",
265
265
  "$type": "color"
266
+ },
267
+ "text-on-neutral": {
268
+ "$value": "#404040",
269
+ "$type": "color"
270
+ },
271
+ "surface-subtle": {
272
+ "$value": "#fafafa",
273
+ "$type": "color"
274
+ },
275
+ "accent-pressed": {
276
+ "$value": "#9a3412",
277
+ "$type": "color"
266
278
  }
267
279
  },
268
280
  "font": {