@usefidel/design-system 0.19.0 → 0.21.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.
- package/dist/admin.css +29 -0
- package/dist/extension.css +29 -0
- package/dist/fidel.manifest.json +2 -2
- package/dist/index.cjs +1 -1
- package/dist/index.css +260 -252
- package/dist/index.d.cts +4 -4
- package/dist/index.d.ts +4 -4
- package/dist/index.js +1 -1
- package/dist/landing.css +29 -0
- package/dist/theme.css +29 -0
- package/dist/webapp.css +29 -0
- package/package.json +1 -1
- package/tokens/tokens.json +120 -0
package/dist/index.d.cts
CHANGED
|
@@ -14,9 +14,9 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
14
14
|
variant?: ButtonVariant;
|
|
15
15
|
/** Size step. @default 'medium' */
|
|
16
16
|
size?: ButtonSize;
|
|
17
|
-
/** Optional leading icon (
|
|
17
|
+
/** Optional leading icon (16px slot; 20px on `big`). */
|
|
18
18
|
leftIcon?: ReactNode;
|
|
19
|
-
/** Optional trailing icon (
|
|
19
|
+
/** Optional trailing icon (16px slot; 20px on `big`). */
|
|
20
20
|
rightIcon?: ReactNode;
|
|
21
21
|
}
|
|
22
22
|
/**
|
|
@@ -537,7 +537,7 @@ interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, '
|
|
|
537
537
|
containerClassName?: string;
|
|
538
538
|
}
|
|
539
539
|
/**
|
|
540
|
-
* Fidel design-system SearchInput: a
|
|
540
|
+
* Fidel design-system SearchInput: a 36px search field with a leading
|
|
541
541
|
* magnifier. Measured from Figma "✅Project" toolbar search (node 231:59687).
|
|
542
542
|
*/
|
|
543
543
|
declare const SearchInput: react.ForwardRefExoticComponent<SearchInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
@@ -767,7 +767,7 @@ interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
|
|
|
767
767
|
'aria-label': string;
|
|
768
768
|
/** @default 'outlined' */
|
|
769
769
|
variant?: IconButtonVariant;
|
|
770
|
-
/**
|
|
770
|
+
/** 36px (`medium`, matches Button medium) or 28px (`small`). @default 'medium' */
|
|
771
771
|
size?: IconButtonSize;
|
|
772
772
|
}
|
|
773
773
|
/**
|
package/dist/index.d.ts
CHANGED
|
@@ -14,9 +14,9 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
14
14
|
variant?: ButtonVariant;
|
|
15
15
|
/** Size step. @default 'medium' */
|
|
16
16
|
size?: ButtonSize;
|
|
17
|
-
/** Optional leading icon (
|
|
17
|
+
/** Optional leading icon (16px slot; 20px on `big`). */
|
|
18
18
|
leftIcon?: ReactNode;
|
|
19
|
-
/** Optional trailing icon (
|
|
19
|
+
/** Optional trailing icon (16px slot; 20px on `big`). */
|
|
20
20
|
rightIcon?: ReactNode;
|
|
21
21
|
}
|
|
22
22
|
/**
|
|
@@ -537,7 +537,7 @@ interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, '
|
|
|
537
537
|
containerClassName?: string;
|
|
538
538
|
}
|
|
539
539
|
/**
|
|
540
|
-
* Fidel design-system SearchInput: a
|
|
540
|
+
* Fidel design-system SearchInput: a 36px search field with a leading
|
|
541
541
|
* magnifier. Measured from Figma "✅Project" toolbar search (node 231:59687).
|
|
542
542
|
*/
|
|
543
543
|
declare const SearchInput: react.ForwardRefExoticComponent<SearchInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
@@ -767,7 +767,7 @@ interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
|
|
|
767
767
|
'aria-label': string;
|
|
768
768
|
/** @default 'outlined' */
|
|
769
769
|
variant?: IconButtonVariant;
|
|
770
|
-
/**
|
|
770
|
+
/** 36px (`medium`, matches Button medium) or 28px (`small`). @default 'medium' */
|
|
771
771
|
size?: IconButtonSize;
|
|
772
772
|
}
|
|
773
773
|
/**
|
package/dist/index.js
CHANGED
|
@@ -1178,7 +1178,7 @@ import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
|
1178
1178
|
var SearchInput = forwardRef3(function SearchInput2({ shortcut, containerClassName, className, value, ...rest }, ref) {
|
|
1179
1179
|
const empty = value === void 0 || value === "";
|
|
1180
1180
|
return /* @__PURE__ */ jsxs16("div", { className: ["fds-search", containerClassName].filter(Boolean).join(" "), children: [
|
|
1181
|
-
/* @__PURE__ */ jsxs16("svg", { className: "fds-search__icon", viewBox: "0 0 24 24", width: "
|
|
1181
|
+
/* @__PURE__ */ jsxs16("svg", { className: "fds-search__icon", viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", "aria-hidden": "true", children: [
|
|
1182
1182
|
/* @__PURE__ */ jsx18("circle", { cx: "11", cy: "11", r: "8", stroke: "currentColor", strokeWidth: "2" }),
|
|
1183
1183
|
/* @__PURE__ */ jsx18("path", { d: "m21 21-4.3-4.3", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
|
|
1184
1184
|
] }),
|
package/dist/landing.css
CHANGED
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
--color-success: #059669;
|
|
33
33
|
--color-success-bg: #f0fdf4;
|
|
34
34
|
--color-success-text: #15803d;
|
|
35
|
+
--color-success-border: #bbf7d0;
|
|
35
36
|
--color-warning: #ca8a04;
|
|
36
37
|
--color-warning-bg: #fffbeb;
|
|
37
38
|
--color-warning-text: #92400e;
|
|
@@ -48,9 +49,25 @@
|
|
|
48
49
|
--color-info: #1d4ed8;
|
|
49
50
|
--color-info-strong: #2563eb;
|
|
50
51
|
--color-info-surface: #eff6ff;
|
|
52
|
+
--color-info-border: #bfdbfe;
|
|
51
53
|
--color-text-on-neutral: #404040;
|
|
52
54
|
--color-surface-subtle: #fafafa;
|
|
53
55
|
--color-accent-pressed: #9a3412;
|
|
56
|
+
--color-primary-pressed: #000000;
|
|
57
|
+
--color-error-pressed: #7f1d1d;
|
|
58
|
+
--color-error-border-hover: #fca5a5;
|
|
59
|
+
--color-error-bg-pressed: #fee2e2;
|
|
60
|
+
--color-white-alpha-6: rgba(255, 255, 255, 0.06);
|
|
61
|
+
--color-white-alpha-8: rgba(255, 255, 255, 0.08);
|
|
62
|
+
--color-white-alpha-10: rgba(255, 255, 255, 0.1);
|
|
63
|
+
--color-white-alpha-12: rgba(255, 255, 255, 0.12);
|
|
64
|
+
--color-white-alpha-35: rgba(255, 255, 255, 0.35);
|
|
65
|
+
--color-white-alpha-55: rgba(255, 255, 255, 0.55);
|
|
66
|
+
--color-white-alpha-60: rgba(255, 255, 255, 0.6);
|
|
67
|
+
--color-white-alpha-92: rgba(255, 255, 255, 0.92);
|
|
68
|
+
--color-black-alpha-4: rgba(0, 0, 0, 0.04);
|
|
69
|
+
--color-black-alpha-8: rgba(0, 0, 0, 0.08);
|
|
70
|
+
--color-black-alpha-60: rgba(0, 0, 0, 0.6);
|
|
54
71
|
--font-display: 'Rethink Sans', system-ui, -apple-system, sans-serif;
|
|
55
72
|
--font-body: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
56
73
|
--font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
|
|
@@ -75,6 +92,11 @@
|
|
|
75
92
|
--spacing-10: 40px;
|
|
76
93
|
--spacing-12: 48px;
|
|
77
94
|
--spacing-16: 64px;
|
|
95
|
+
--size-control-xs: 28px;
|
|
96
|
+
--size-control-sm: 32px;
|
|
97
|
+
--size-control-md: 36px;
|
|
98
|
+
--size-control-lg: 44px;
|
|
99
|
+
--size-nav: 56px;
|
|
78
100
|
--font-size-body: 14px;
|
|
79
101
|
--font-size-display-2xl: 70px;
|
|
80
102
|
--font-size-display-xl: 60px;
|
|
@@ -86,7 +108,9 @@
|
|
|
86
108
|
--font-size-text-lg: 18px;
|
|
87
109
|
--font-size-text-md: 16px;
|
|
88
110
|
--font-size-text-sm: 14px;
|
|
111
|
+
--font-size-text-compact: 13px;
|
|
89
112
|
--font-size-text-xs: 12px;
|
|
113
|
+
--font-size-text-2xs: 11px;
|
|
90
114
|
--font-size-label-sm: 14px;
|
|
91
115
|
--font-size-label-xs: 12px;
|
|
92
116
|
--line-height-body: 1.6;
|
|
@@ -100,7 +124,9 @@
|
|
|
100
124
|
--line-height-text-lg: 26px;
|
|
101
125
|
--line-height-text-md: 24px;
|
|
102
126
|
--line-height-text-sm: 22px;
|
|
127
|
+
--line-height-text-compact: 20px;
|
|
103
128
|
--line-height-text-xs: 18px;
|
|
129
|
+
--line-height-text-2xs: 16px;
|
|
104
130
|
--line-height-label-sm: 22px;
|
|
105
131
|
--line-height-label-xs: 18px;
|
|
106
132
|
--duration-instant: 80ms;
|
|
@@ -116,9 +142,12 @@
|
|
|
116
142
|
--shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.1);
|
|
117
143
|
--shadow-pill: 0 1px 2px rgba(15, 23, 42, 0.08);
|
|
118
144
|
--shadow-cta: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06);
|
|
145
|
+
--shadow-popover: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.14);
|
|
146
|
+
--shadow-focus-error: 0 0 0 3px rgba(220, 38, 38, 0.15);
|
|
119
147
|
--font-weight-regular: 400;
|
|
120
148
|
--font-weight-medium: 500;
|
|
121
149
|
--font-weight-semibold: 600;
|
|
122
150
|
--font-weight-bold: 700;
|
|
123
151
|
--font-weight-extrabold: 800;
|
|
152
|
+
--gradient-brand-warm: linear-gradient(160deg, #fbfbfb 34%, #f29c6f 90%);
|
|
124
153
|
}
|
package/dist/theme.css
CHANGED
|
@@ -34,6 +34,7 @@
|
|
|
34
34
|
--color-success: #059669;
|
|
35
35
|
--color-success-bg: #f0fdf4;
|
|
36
36
|
--color-success-text: #15803d;
|
|
37
|
+
--color-success-border: #bbf7d0;
|
|
37
38
|
--color-warning: #ca8a04;
|
|
38
39
|
--color-warning-bg: #fffbeb;
|
|
39
40
|
--color-warning-text: #92400e;
|
|
@@ -50,9 +51,25 @@
|
|
|
50
51
|
--color-info: #1d4ed8;
|
|
51
52
|
--color-info-strong: #2563eb;
|
|
52
53
|
--color-info-surface: #eff6ff;
|
|
54
|
+
--color-info-border: #bfdbfe;
|
|
53
55
|
--color-text-on-neutral: #404040;
|
|
54
56
|
--color-surface-subtle: #fafafa;
|
|
55
57
|
--color-accent-pressed: #9a3412;
|
|
58
|
+
--color-primary-pressed: #000000;
|
|
59
|
+
--color-error-pressed: #7f1d1d;
|
|
60
|
+
--color-error-border-hover: #fca5a5;
|
|
61
|
+
--color-error-bg-pressed: #fee2e2;
|
|
62
|
+
--color-white-alpha-6: rgba(255, 255, 255, 0.06);
|
|
63
|
+
--color-white-alpha-8: rgba(255, 255, 255, 0.08);
|
|
64
|
+
--color-white-alpha-10: rgba(255, 255, 255, 0.1);
|
|
65
|
+
--color-white-alpha-12: rgba(255, 255, 255, 0.12);
|
|
66
|
+
--color-white-alpha-35: rgba(255, 255, 255, 0.35);
|
|
67
|
+
--color-white-alpha-55: rgba(255, 255, 255, 0.55);
|
|
68
|
+
--color-white-alpha-60: rgba(255, 255, 255, 0.6);
|
|
69
|
+
--color-white-alpha-92: rgba(255, 255, 255, 0.92);
|
|
70
|
+
--color-black-alpha-4: rgba(0, 0, 0, 0.04);
|
|
71
|
+
--color-black-alpha-8: rgba(0, 0, 0, 0.08);
|
|
72
|
+
--color-black-alpha-60: rgba(0, 0, 0, 0.6);
|
|
56
73
|
--font-display: 'Rethink Sans', system-ui, -apple-system, sans-serif;
|
|
57
74
|
--font-body: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
58
75
|
--font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
|
|
@@ -77,6 +94,11 @@
|
|
|
77
94
|
--spacing-10: 40px;
|
|
78
95
|
--spacing-12: 48px;
|
|
79
96
|
--spacing-16: 64px;
|
|
97
|
+
--size-control-xs: 28px;
|
|
98
|
+
--size-control-sm: 32px;
|
|
99
|
+
--size-control-md: 36px;
|
|
100
|
+
--size-control-lg: 44px;
|
|
101
|
+
--size-nav: 56px;
|
|
80
102
|
--font-size-body: 14px;
|
|
81
103
|
--font-size-display-2xl: 70px;
|
|
82
104
|
--font-size-display-xl: 60px;
|
|
@@ -88,7 +110,9 @@
|
|
|
88
110
|
--font-size-text-lg: 18px;
|
|
89
111
|
--font-size-text-md: 16px;
|
|
90
112
|
--font-size-text-sm: 14px;
|
|
113
|
+
--font-size-text-compact: 13px;
|
|
91
114
|
--font-size-text-xs: 12px;
|
|
115
|
+
--font-size-text-2xs: 11px;
|
|
92
116
|
--font-size-label-sm: 14px;
|
|
93
117
|
--font-size-label-xs: 12px;
|
|
94
118
|
--line-height-body: 1.6;
|
|
@@ -102,7 +126,9 @@
|
|
|
102
126
|
--line-height-text-lg: 26px;
|
|
103
127
|
--line-height-text-md: 24px;
|
|
104
128
|
--line-height-text-sm: 22px;
|
|
129
|
+
--line-height-text-compact: 20px;
|
|
105
130
|
--line-height-text-xs: 18px;
|
|
131
|
+
--line-height-text-2xs: 16px;
|
|
106
132
|
--line-height-label-sm: 22px;
|
|
107
133
|
--line-height-label-xs: 18px;
|
|
108
134
|
--duration-instant: 80ms;
|
|
@@ -118,9 +144,12 @@
|
|
|
118
144
|
--shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.1);
|
|
119
145
|
--shadow-pill: 0 1px 2px rgba(15, 23, 42, 0.08);
|
|
120
146
|
--shadow-cta: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06);
|
|
147
|
+
--shadow-popover: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.14);
|
|
148
|
+
--shadow-focus-error: 0 0 0 3px rgba(220, 38, 38, 0.15);
|
|
121
149
|
--font-weight-regular: 400;
|
|
122
150
|
--font-weight-medium: 500;
|
|
123
151
|
--font-weight-semibold: 600;
|
|
124
152
|
--font-weight-bold: 700;
|
|
125
153
|
--font-weight-extrabold: 800;
|
|
154
|
+
--gradient-brand-warm: linear-gradient(160deg, #fbfbfb 34%, #f29c6f 90%);
|
|
126
155
|
}
|
package/dist/webapp.css
CHANGED
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
--color-success: #059669;
|
|
33
33
|
--color-success-bg: #f0fdf4;
|
|
34
34
|
--color-success-text: #15803d;
|
|
35
|
+
--color-success-border: #bbf7d0;
|
|
35
36
|
--color-warning: #ca8a04;
|
|
36
37
|
--color-warning-bg: #fffbeb;
|
|
37
38
|
--color-warning-text: #92400e;
|
|
@@ -48,9 +49,25 @@
|
|
|
48
49
|
--color-info: #1d4ed8;
|
|
49
50
|
--color-info-strong: #2563eb;
|
|
50
51
|
--color-info-surface: #eff6ff;
|
|
52
|
+
--color-info-border: #bfdbfe;
|
|
51
53
|
--color-text-on-neutral: #404040;
|
|
52
54
|
--color-surface-subtle: #fafafa;
|
|
53
55
|
--color-accent-pressed: #9a3412;
|
|
56
|
+
--color-primary-pressed: #000000;
|
|
57
|
+
--color-error-pressed: #7f1d1d;
|
|
58
|
+
--color-error-border-hover: #fca5a5;
|
|
59
|
+
--color-error-bg-pressed: #fee2e2;
|
|
60
|
+
--color-white-alpha-6: rgba(255, 255, 255, 0.06);
|
|
61
|
+
--color-white-alpha-8: rgba(255, 255, 255, 0.08);
|
|
62
|
+
--color-white-alpha-10: rgba(255, 255, 255, 0.1);
|
|
63
|
+
--color-white-alpha-12: rgba(255, 255, 255, 0.12);
|
|
64
|
+
--color-white-alpha-35: rgba(255, 255, 255, 0.35);
|
|
65
|
+
--color-white-alpha-55: rgba(255, 255, 255, 0.55);
|
|
66
|
+
--color-white-alpha-60: rgba(255, 255, 255, 0.6);
|
|
67
|
+
--color-white-alpha-92: rgba(255, 255, 255, 0.92);
|
|
68
|
+
--color-black-alpha-4: rgba(0, 0, 0, 0.04);
|
|
69
|
+
--color-black-alpha-8: rgba(0, 0, 0, 0.08);
|
|
70
|
+
--color-black-alpha-60: rgba(0, 0, 0, 0.6);
|
|
54
71
|
--font-display: 'Rethink Sans', system-ui, -apple-system, sans-serif;
|
|
55
72
|
--font-body: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
56
73
|
--font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
|
|
@@ -75,6 +92,11 @@
|
|
|
75
92
|
--spacing-10: 40px;
|
|
76
93
|
--spacing-12: 48px;
|
|
77
94
|
--spacing-16: 64px;
|
|
95
|
+
--size-control-xs: 28px;
|
|
96
|
+
--size-control-sm: 32px;
|
|
97
|
+
--size-control-md: 36px;
|
|
98
|
+
--size-control-lg: 44px;
|
|
99
|
+
--size-nav: 56px;
|
|
78
100
|
--font-size-body: 14px;
|
|
79
101
|
--font-size-display-2xl: 70px;
|
|
80
102
|
--font-size-display-xl: 60px;
|
|
@@ -86,7 +108,9 @@
|
|
|
86
108
|
--font-size-text-lg: 18px;
|
|
87
109
|
--font-size-text-md: 16px;
|
|
88
110
|
--font-size-text-sm: 14px;
|
|
111
|
+
--font-size-text-compact: 13px;
|
|
89
112
|
--font-size-text-xs: 12px;
|
|
113
|
+
--font-size-text-2xs: 11px;
|
|
90
114
|
--font-size-label-sm: 14px;
|
|
91
115
|
--font-size-label-xs: 12px;
|
|
92
116
|
--line-height-body: 1.6;
|
|
@@ -100,7 +124,9 @@
|
|
|
100
124
|
--line-height-text-lg: 26px;
|
|
101
125
|
--line-height-text-md: 24px;
|
|
102
126
|
--line-height-text-sm: 22px;
|
|
127
|
+
--line-height-text-compact: 20px;
|
|
103
128
|
--line-height-text-xs: 18px;
|
|
129
|
+
--line-height-text-2xs: 16px;
|
|
104
130
|
--line-height-label-sm: 22px;
|
|
105
131
|
--line-height-label-xs: 18px;
|
|
106
132
|
--duration-instant: 80ms;
|
|
@@ -116,9 +142,12 @@
|
|
|
116
142
|
--shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.1);
|
|
117
143
|
--shadow-pill: 0 1px 2px rgba(15, 23, 42, 0.08);
|
|
118
144
|
--shadow-cta: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06);
|
|
145
|
+
--shadow-popover: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.14);
|
|
146
|
+
--shadow-focus-error: 0 0 0 3px rgba(220, 38, 38, 0.15);
|
|
119
147
|
--font-weight-regular: 400;
|
|
120
148
|
--font-weight-medium: 500;
|
|
121
149
|
--font-weight-semibold: 600;
|
|
122
150
|
--font-weight-bold: 700;
|
|
123
151
|
--font-weight-extrabold: 800;
|
|
152
|
+
--gradient-brand-warm: linear-gradient(160deg, #fbfbfb 34%, #f29c6f 90%);
|
|
124
153
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@usefidel/design-system",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.21.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",
|
package/tokens/tokens.json
CHANGED
|
@@ -200,6 +200,10 @@
|
|
|
200
200
|
"$value": "#15803d",
|
|
201
201
|
"$type": "color"
|
|
202
202
|
},
|
|
203
|
+
"success-border": {
|
|
204
|
+
"$value": "#bbf7d0",
|
|
205
|
+
"$type": "color"
|
|
206
|
+
},
|
|
203
207
|
"warning": {
|
|
204
208
|
"$value": "#ca8a04",
|
|
205
209
|
"$type": "color"
|
|
@@ -264,6 +268,10 @@
|
|
|
264
268
|
"$value": "#eff6ff",
|
|
265
269
|
"$type": "color"
|
|
266
270
|
},
|
|
271
|
+
"info-border": {
|
|
272
|
+
"$value": "#bfdbfe",
|
|
273
|
+
"$type": "color"
|
|
274
|
+
},
|
|
267
275
|
"text-on-neutral": {
|
|
268
276
|
"$value": "#404040",
|
|
269
277
|
"$type": "color"
|
|
@@ -275,6 +283,66 @@
|
|
|
275
283
|
"accent-pressed": {
|
|
276
284
|
"$value": "#9a3412",
|
|
277
285
|
"$type": "color"
|
|
286
|
+
},
|
|
287
|
+
"primary-pressed": {
|
|
288
|
+
"$value": "#000000",
|
|
289
|
+
"$type": "color"
|
|
290
|
+
},
|
|
291
|
+
"error-pressed": {
|
|
292
|
+
"$value": "#7f1d1d",
|
|
293
|
+
"$type": "color"
|
|
294
|
+
},
|
|
295
|
+
"error-border-hover": {
|
|
296
|
+
"$value": "#fca5a5",
|
|
297
|
+
"$type": "color"
|
|
298
|
+
},
|
|
299
|
+
"error-bg-pressed": {
|
|
300
|
+
"$value": "#fee2e2",
|
|
301
|
+
"$type": "color"
|
|
302
|
+
},
|
|
303
|
+
"white-alpha-6": {
|
|
304
|
+
"$value": "rgba(255, 255, 255, 0.06)",
|
|
305
|
+
"$type": "color"
|
|
306
|
+
},
|
|
307
|
+
"white-alpha-8": {
|
|
308
|
+
"$value": "rgba(255, 255, 255, 0.08)",
|
|
309
|
+
"$type": "color"
|
|
310
|
+
},
|
|
311
|
+
"white-alpha-10": {
|
|
312
|
+
"$value": "rgba(255, 255, 255, 0.1)",
|
|
313
|
+
"$type": "color"
|
|
314
|
+
},
|
|
315
|
+
"white-alpha-12": {
|
|
316
|
+
"$value": "rgba(255, 255, 255, 0.12)",
|
|
317
|
+
"$type": "color"
|
|
318
|
+
},
|
|
319
|
+
"white-alpha-35": {
|
|
320
|
+
"$value": "rgba(255, 255, 255, 0.35)",
|
|
321
|
+
"$type": "color"
|
|
322
|
+
},
|
|
323
|
+
"white-alpha-55": {
|
|
324
|
+
"$value": "rgba(255, 255, 255, 0.55)",
|
|
325
|
+
"$type": "color"
|
|
326
|
+
},
|
|
327
|
+
"white-alpha-60": {
|
|
328
|
+
"$value": "rgba(255, 255, 255, 0.6)",
|
|
329
|
+
"$type": "color"
|
|
330
|
+
},
|
|
331
|
+
"white-alpha-92": {
|
|
332
|
+
"$value": "rgba(255, 255, 255, 0.92)",
|
|
333
|
+
"$type": "color"
|
|
334
|
+
},
|
|
335
|
+
"black-alpha-4": {
|
|
336
|
+
"$value": "rgba(0, 0, 0, 0.04)",
|
|
337
|
+
"$type": "color"
|
|
338
|
+
},
|
|
339
|
+
"black-alpha-8": {
|
|
340
|
+
"$value": "rgba(0, 0, 0, 0.08)",
|
|
341
|
+
"$type": "color"
|
|
342
|
+
},
|
|
343
|
+
"black-alpha-60": {
|
|
344
|
+
"$value": "rgba(0, 0, 0, 0.6)",
|
|
345
|
+
"$type": "color"
|
|
278
346
|
}
|
|
279
347
|
},
|
|
280
348
|
"font": {
|
|
@@ -387,6 +455,28 @@
|
|
|
387
455
|
"$type": "dimension"
|
|
388
456
|
}
|
|
389
457
|
},
|
|
458
|
+
"size": {
|
|
459
|
+
"control-xs": {
|
|
460
|
+
"$value": "28px",
|
|
461
|
+
"$type": "dimension"
|
|
462
|
+
},
|
|
463
|
+
"control-sm": {
|
|
464
|
+
"$value": "32px",
|
|
465
|
+
"$type": "dimension"
|
|
466
|
+
},
|
|
467
|
+
"control-md": {
|
|
468
|
+
"$value": "36px",
|
|
469
|
+
"$type": "dimension"
|
|
470
|
+
},
|
|
471
|
+
"control-lg": {
|
|
472
|
+
"$value": "44px",
|
|
473
|
+
"$type": "dimension"
|
|
474
|
+
},
|
|
475
|
+
"nav": {
|
|
476
|
+
"$value": "56px",
|
|
477
|
+
"$type": "dimension"
|
|
478
|
+
}
|
|
479
|
+
},
|
|
390
480
|
"fontSize": {
|
|
391
481
|
"body": {
|
|
392
482
|
"$value": "14px",
|
|
@@ -440,10 +530,18 @@
|
|
|
440
530
|
"$value": "14px",
|
|
441
531
|
"$type": "dimension"
|
|
442
532
|
},
|
|
533
|
+
"text-compact": {
|
|
534
|
+
"$value": "13px",
|
|
535
|
+
"$type": "dimension"
|
|
536
|
+
},
|
|
443
537
|
"text-xs": {
|
|
444
538
|
"$value": "12px",
|
|
445
539
|
"$type": "dimension"
|
|
446
540
|
},
|
|
541
|
+
"text-2xs": {
|
|
542
|
+
"$value": "11px",
|
|
543
|
+
"$type": "dimension"
|
|
544
|
+
},
|
|
447
545
|
"label-sm": {
|
|
448
546
|
"$value": "14px",
|
|
449
547
|
"$type": "dimension"
|
|
@@ -506,10 +604,18 @@
|
|
|
506
604
|
"$value": "22px",
|
|
507
605
|
"$type": "dimension"
|
|
508
606
|
},
|
|
607
|
+
"text-compact": {
|
|
608
|
+
"$value": "20px",
|
|
609
|
+
"$type": "dimension"
|
|
610
|
+
},
|
|
509
611
|
"text-xs": {
|
|
510
612
|
"$value": "18px",
|
|
511
613
|
"$type": "dimension"
|
|
512
614
|
},
|
|
615
|
+
"text-2xs": {
|
|
616
|
+
"$value": "16px",
|
|
617
|
+
"$type": "dimension"
|
|
618
|
+
},
|
|
513
619
|
"label-sm": {
|
|
514
620
|
"$value": "22px",
|
|
515
621
|
"$type": "dimension"
|
|
@@ -575,6 +681,14 @@
|
|
|
575
681
|
"cta": {
|
|
576
682
|
"$value": "0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06)",
|
|
577
683
|
"$type": "shadow"
|
|
684
|
+
},
|
|
685
|
+
"popover": {
|
|
686
|
+
"$value": "0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.14)",
|
|
687
|
+
"$type": "shadow"
|
|
688
|
+
},
|
|
689
|
+
"focus-error": {
|
|
690
|
+
"$value": "0 0 0 3px rgba(220, 38, 38, 0.15)",
|
|
691
|
+
"$type": "shadow"
|
|
578
692
|
}
|
|
579
693
|
},
|
|
580
694
|
"fontWeight": {
|
|
@@ -598,5 +712,11 @@
|
|
|
598
712
|
"$value": 800,
|
|
599
713
|
"$type": "fontWeight"
|
|
600
714
|
}
|
|
715
|
+
},
|
|
716
|
+
"gradient": {
|
|
717
|
+
"brand-warm": {
|
|
718
|
+
"$value": "linear-gradient(160deg, #fbfbfb 34%, #f29c6f 90%)",
|
|
719
|
+
"$type": "gradient"
|
|
720
|
+
}
|
|
601
721
|
}
|
|
602
722
|
}
|