@usefidel/design-system 0.11.1 → 0.13.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 (12) 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 +28 -9
  6. package/dist/index.d.cts +1 -1
  7. package/dist/index.d.ts +1 -1
  8. package/dist/landing.css +3 -0
  9. package/dist/theme.css +3 -0
  10. package/dist/webapp.css +3 -0
  11. package/package.json +2 -2
  12. 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.1",
14
- "resolvedSha": "7ee39a37df038135fa0e6a8271a6ce2ff0a91a95"
13
+ "packageVersion": "0.13.0",
14
+ "resolvedSha": "a9ed7fb5a355ee414279eb17bf75df5cc18a7dc1"
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;
@@ -108,9 +108,28 @@
108
108
  color: #a3a3a3;
109
109
  cursor: not-allowed;
110
110
  }
111
+ .fds-button--link {
112
+ padding: 0;
113
+ border: none;
114
+ border-radius: 2px;
115
+ background-color: transparent;
116
+ font-size: inherit;
117
+ line-height: inherit;
118
+ letter-spacing: inherit;
119
+ vertical-align: baseline;
120
+ color: var(--color-accent, #ea580c);
121
+ }
122
+ .fds-button--link:where(:hover:not(:disabled)),
123
+ .fds-button--link:where(:active:not(:disabled)) {
124
+ color: var(--color-text, #171717);
125
+ }
126
+ .fds-button--link:disabled {
127
+ color: #a3a3a3;
128
+ cursor: not-allowed;
129
+ }
111
130
  .fds-button--neutral {
112
- background-color: #fafafa;
113
- color: #404040;
131
+ background-color: var(--color-surface-subtle, #fafafa);
132
+ color: var(--color-text-on-neutral, #404040);
114
133
  }
115
134
  .fds-button--neutral:hover:not(:disabled) {
116
135
  background-color: #f5f5f5;
@@ -119,7 +138,7 @@
119
138
  background-color: #e5e5e5;
120
139
  }
121
140
  .fds-button--neutral:disabled {
122
- background-color: #fafafa;
141
+ background-color: var(--color-surface-subtle, #fafafa);
123
142
  color: #a3a3a3;
124
143
  cursor: not-allowed;
125
144
  }
@@ -257,7 +276,7 @@
257
276
  padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) var(--spacing-6);
258
277
  border: 0;
259
278
  border-bottom: 1px solid var(--color-border);
260
- background: #fafafa;
279
+ background: var(--color-surface-subtle, #fafafa);
261
280
  cursor: pointer;
262
281
  text-align: left;
263
282
  font-family: inherit;
package/dist/index.d.cts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as react from 'react';
2
2
  import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes } from 'react';
3
3
 
4
- type ButtonVariant = 'primary' | 'outlined' | 'text' | 'neutral';
4
+ type ButtonVariant = 'primary' | 'outlined' | 'text' | 'neutral' | 'link';
5
5
  type ButtonSize = 'x-small' | 'small' | 'medium' | 'big';
6
6
  interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
7
7
  /** Visual style. @default 'primary' */
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as react from 'react';
2
2
  import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes } from 'react';
3
3
 
4
- type ButtonVariant = 'primary' | 'outlined' | 'text' | 'neutral';
4
+ type ButtonVariant = 'primary' | 'outlined' | 'text' | 'neutral' | 'link';
5
5
  type ButtonSize = 'x-small' | 'small' | 'medium' | 'big';
6
6
  interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
7
7
  /** Visual style. @default 'primary' */
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.1",
3
+ "version": "0.13.0",
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": {