@fastwork/xosmoz-svelte 0.0.26 → 0.0.29

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 (8) hide show
  1. package/dist/docs/GettingStarted.mdx +14 -14
  2. package/dist/docs/Welcome.mdx +21 -21
  3. package/dist/docs/foundation/BoxShadows.svelte +18 -12
  4. package/dist/docs/foundation/Colors.svelte +11 -11
  5. package/dist/docs/foundation/KitchenSink.svelte +78 -78
  6. package/dist/docs/foundation/Themes.svelte +64 -64
  7. package/dist/docs/foundation/Typography.svelte +15 -15
  8. package/package.json +1 -1
package/dist/docs/GettingStarted.mdx CHANGED
@@ -66,7 +66,7 @@ Now you can use Xosmoz design tokens in your CSS:
66
66
  ```css
67
67
  .button {
68
68
  background: var(--xz-color-primary-bg-100);
69
- color: var(--xz-color-primary-fg);
69
+ color: var(--xz-color-primary-fg-50);
70
70
  }
71
71
  ```
72
72
 
@@ -92,8 +92,8 @@ var(--xz-color-bg-400) /* Elevated surface (popovers, tooltips) */
92
92
 
93
93
  **Text/Content:**
94
94
  ```css
95
- var(--xz-color-content-100) /* Primary text */
96
- var(--xz-color-content-200) /* Secondary text (60% opacity) */
95
+ var(--xz-color-fg-100) /* Primary text */
96
+ var(--xz-color-fg-200) /* Secondary text (60% opacity) */
97
97
  ```
98
98
 
99
99
  **Lines/Borders:**
@@ -120,8 +120,8 @@ Each semantic color has **5 variants**:
120
120
  var(--xz-color-primary-soft-100) /* Light background tint */
121
121
  var(--xz-color-primary-line-200) /* Border color */
122
122
  var(--xz-color-primary-bg-100) /* Solid button background */
123
- var(--xz-color-primary-content-100) /* Text color */
124
- var(--xz-color-primary-fg) /* Text on solid background (white) */
123
+ var(--xz-color-primary-fg-100) /* Text color */
124
+ var(--xz-color-primary-fg-50) /* Text on solid background (white) */
125
125
  ```
126
126
 
127
127
  **Scale System:**
@@ -149,11 +149,11 @@ Now that you have Xosmoz set up, explore the Foundation section to learn more:
149
149
  border: '1px solid var(--xz-color-line-100)',
150
150
  borderRadius: 'var(--xz-radius-md)',
151
151
  }}>
152
- <h4 style={{ marginTop: 0, color: 'var(--xz-color-content-100)' }}>Foundation / Colors</h4>
153
- <p style={{ color: 'var(--xz-color-content-200)', fontSize: '0.875rem', marginBottom: '1rem' }}>
152
+ <h4 style={{ marginTop: 0, color: 'var(--xz-color-fg-100)' }}>Foundation / Colors</h4>
153
+ <p style={{ color: 'var(--xz-color-fg-200)', fontSize: '0.875rem', marginBottom: '1rem' }}>
154
154
  Browse the complete color palette with 10-step scales for each color family.
155
155
  </p>
156
- <a href="/?path=/docs/foundation-colors--docs" style={{ color: 'var(--xz-color-primary-content-100)', textDecoration: 'none', fontWeight: 600, fontSize: '0.875rem' }}>
156
+ <a href="/?path=/docs/foundation-colors--docs" style={{ color: 'var(--xz-color-primary-fg-100)', textDecoration: 'none', fontWeight: 600, fontSize: '0.875rem' }}>
157
157
  View Colors →
158
158
  </a>
159
159
  </div>
@@ -164,11 +164,11 @@ Now that you have Xosmoz set up, explore the Foundation section to learn more:
164
164
  border: '1px solid var(--xz-color-line-100)',
165
165
  borderRadius: 'var(--xz-radius-md)',
166
166
  }}>
167
- <h4 style={{ marginTop: 0, color: 'var(--xz-color-content-100)' }}>Foundation / Themes</h4>
168
- <p style={{ color: 'var(--xz-color-content-200)', fontSize: '0.875rem', marginBottom: '1rem' }}>
167
+ <h4 style={{ marginTop: 0, color: 'var(--xz-color-fg-100)' }}>Foundation / Themes</h4>
168
+ <p style={{ color: 'var(--xz-color-fg-200)', fontSize: '0.875rem', marginBottom: '1rem' }}>
169
169
  See all semantic color tokens and their usage across light and dark themes.
170
170
  </p>
171
- <a href="/?path=/docs/foundation-themes--docs" style={{ color: 'var(--xz-color-primary-content-100)', textDecoration: 'none', fontWeight: 600, fontSize: '0.875rem' }}>
171
+ <a href="/?path=/docs/foundation-themes--docs" style={{ color: 'var(--xz-color-primary-fg-100)', textDecoration: 'none', fontWeight: 600, fontSize: '0.875rem' }}>
172
172
  View Themes →
173
173
  </a>
174
174
  </div>
@@ -179,11 +179,11 @@ Now that you have Xosmoz set up, explore the Foundation section to learn more:
179
179
  border: '1px solid var(--xz-color-line-100)',
180
180
  borderRadius: 'var(--xz-radius-md)',
181
181
  }}>
182
- <h4 style={{ marginTop: 0, color: 'var(--xz-color-content-100)' }}>Foundation / APCA Contrast</h4>
183
- <p style={{ color: 'var(--xz-color-content-200)', fontSize: '0.875rem', marginBottom: '1rem' }}>
182
+ <h4 style={{ marginTop: 0, color: 'var(--xz-color-fg-100)' }}>Foundation / APCA Contrast</h4>
183
+ <p style={{ color: 'var(--xz-color-fg-200)', fontSize: '0.875rem', marginBottom: '1rem' }}>
184
184
  Learn about accessibility standards and contrast guidelines.
185
185
  </p>
186
- <a href="/?path=/docs/foundation-apca-contrast--docs" style={{ color: 'var(--xz-color-primary-content-100)', textDecoration: 'none', fontWeight: 600, fontSize: '0.875rem' }}>
186
+ <a href="/?path=/docs/foundation-apca-contrast--docs" style={{ color: 'var(--xz-color-primary-fg-100)', textDecoration: 'none', fontWeight: 600, fontSize: '0.875rem' }}>
187
187
  View APCA →
188
188
  </a>
189
189
  </div>
package/dist/docs/Welcome.mdx CHANGED
@@ -11,14 +11,14 @@ import { Meta } from '@storybook/addon-docs/blocks';
11
11
  fontSize: '3rem',
12
12
  fontWeight: 'bold',
13
13
  marginBottom: '1rem',
14
- color: 'var(--xz-color-content-100)',
14
+ color: 'var(--xz-color-fg-100)',
15
15
  }}>
16
16
  Xosmoz Design System
17
17
  </h1>
18
18
 
19
19
  <p style={{
20
20
  fontSize: '1.25rem',
21
- color: 'var(--xz-color-content-200)',
21
+ color: 'var(--xz-color-fg-200)',
22
22
  marginBottom: '2rem',
23
23
  maxWidth: '700px',
24
24
  margin: '0 auto 2rem',
@@ -42,8 +42,8 @@ import { Meta } from '@storybook/addon-docs/blocks';
42
42
  border: '1px solid var(--xz-color-line-100)',
43
43
  borderRadius: 'var(--xz-radius-md)',
44
44
  }}>
45
- <h3 style={{ fontSize: '1.125rem', marginBottom: '0.75rem', color: 'var(--xz-color-content-100)' }}>🎨 Semantic Colors</h3>
46
- <p style={{ color: 'var(--xz-color-content-200)', margin: 0, fontSize: '0.9375rem', lineHeight: '1.5' }}>
45
+ <h3 style={{ fontSize: '1.125rem', marginBottom: '0.75rem', color: 'var(--xz-color-fg-100)' }}>🎨 Semantic Colors</h3>
46
+ <p style={{ color: 'var(--xz-color-fg-200)', margin: 0, fontSize: '0.9375rem', lineHeight: '1.5' }}>
47
47
  Purpose-driven color tokens for primary actions, success states, warnings, errors, and more. Design with intent, not just colors.
48
48
  </p>
49
49
  </div>
@@ -54,8 +54,8 @@ import { Meta } from '@storybook/addon-docs/blocks';
54
54
  border: '1px solid var(--xz-color-line-100)',
55
55
  borderRadius: 'var(--xz-radius-md)',
56
56
  }}>
57
- <h3 style={{ fontSize: '1.125rem', marginBottom: '0.75rem', color: 'var(--xz-color-content-100)' }}>🌓 Built-in Themes</h3>
58
- <p style={{ color: 'var(--xz-color-content-200)', margin: 0, fontSize: '0.9375rem', lineHeight: '1.5' }}>
57
+ <h3 style={{ fontSize: '1.125rem', marginBottom: '0.75rem', color: 'var(--xz-color-fg-100)' }}>🌓 Built-in Themes</h3>
58
+ <p style={{ color: 'var(--xz-color-fg-200)', margin: 0, fontSize: '0.9375rem', lineHeight: '1.5' }}>
59
59
  Light and dark themes out of the box. Switch instantly with a single attribute change. No CSS rewrites needed.
60
60
  </p>
61
61
  </div>
@@ -66,8 +66,8 @@ import { Meta } from '@storybook/addon-docs/blocks';
66
66
  border: '1px solid var(--xz-color-line-100)',
67
67
  borderRadius: 'var(--xz-radius-md)',
68
68
  }}>
69
- <h3 style={{ fontSize: '1.125rem', marginBottom: '0.75rem', color: 'var(--xz-color-content-100)' }}>🎯 CSS Variables</h3>
70
- <p style={{ color: 'var(--xz-color-content-200)', margin: 0, fontSize: '0.9375rem', lineHeight: '1.5' }}>
69
+ <h3 style={{ fontSize: '1.125rem', marginBottom: '0.75rem', color: 'var(--xz-color-fg-100)' }}>🎯 CSS Variables</h3>
70
+ <p style={{ color: 'var(--xz-color-fg-200)', margin: 0, fontSize: '0.9375rem', lineHeight: '1.5' }}>
71
71
  Use design tokens with CSS custom properties. Theme-aware styling that updates automatically when users switch themes.
72
72
  </p>
73
73
  </div>
@@ -78,8 +78,8 @@ import { Meta } from '@storybook/addon-docs/blocks';
78
78
  border: '1px solid var(--xz-color-line-100)',
79
79
  borderRadius: 'var(--xz-radius-md)',
80
80
  }}>
81
- <h3 style={{ fontSize: '1.125rem', marginBottom: '0.75rem', color: 'var(--xz-color-content-100)' }}>📦 Framework Agnostic</h3>
82
- <p style={{ color: 'var(--xz-color-content-200)', margin: 0, fontSize: '0.9375rem', lineHeight: '1.5' }}>
81
+ <h3 style={{ fontSize: '1.125rem', marginBottom: '0.75rem', color: 'var(--xz-color-fg-100)' }}>📦 Framework Agnostic</h3>
82
+ <p style={{ color: 'var(--xz-color-fg-200)', margin: 0, fontSize: '0.9375rem', lineHeight: '1.5' }}>
83
83
  Works with React, Vue, Svelte, or vanilla JavaScript. Use it anywhere, however you build.
84
84
  </p>
85
85
  </div>
@@ -90,8 +90,8 @@ import { Meta } from '@storybook/addon-docs/blocks';
90
90
  border: '1px solid var(--xz-color-line-100)',
91
91
  borderRadius: 'var(--xz-radius-md)',
92
92
  }}>
93
- <h3 style={{ fontSize: '1.125rem', marginBottom: '0.75rem', color: 'var(--xz-color-content-100)' }}>🔧 TypeScript Support</h3>
94
- <p style={{ color: 'var(--xz-color-content-200)', margin: 0, fontSize: '0.9375rem', lineHeight: '1.5' }}>
93
+ <h3 style={{ fontSize: '1.125rem', marginBottom: '0.75rem', color: 'var(--xz-color-fg-100)' }}>🔧 TypeScript Support</h3>
94
+ <p style={{ color: 'var(--xz-color-fg-200)', margin: 0, fontSize: '0.9375rem', lineHeight: '1.5' }}>
95
95
  Fully typed theme objects with autocomplete. Access any color, spacing, or token programmatically with confidence.
96
96
  </p>
97
97
  </div>
@@ -111,13 +111,13 @@ import { Meta } from '@storybook/addon-docs/blocks';
111
111
  border: '1px solid var(--xz-color-line-200)',
112
112
  borderRadius: 'var(--xz-radius-md)',
113
113
  }}>
114
- <h3 style={{ fontSize: '1.125rem', marginBottom: '0.5rem', color: 'var(--xz-color-primary-content-100)' }}>Foundation / Colors</h3>
115
- <p style={{ color: 'var(--xz-color-content-200)', margin: '0 0 1rem', fontSize: '0.9375rem', lineHeight: '1.5' }}>
114
+ <h3 style={{ fontSize: '1.125rem', marginBottom: '0.5rem', color: 'var(--xz-color-primary-fg-100)' }}>Foundation / Colors</h3>
115
+ <p style={{ color: 'var(--xz-color-fg-200)', margin: '0 0 1rem', fontSize: '0.9375rem', lineHeight: '1.5' }}>
116
116
  Explore the complete color palette with 10-step scales for each color family. See how colors adapt across themes.
117
117
  </p>
118
118
  <a
119
119
  href="/?path=/docs/foundation-colors--docs"
120
- style={{ color: 'var(--xz-color-primary-content-100)', textDecoration: 'none', fontSize: '0.875rem', fontWeight: 600 }}
120
+ style={{ color: 'var(--xz-color-primary-fg-100)', textDecoration: 'none', fontSize: '0.875rem', fontWeight: 600 }}
121
121
  >
122
122
  View Colors →
123
123
  </a>
@@ -129,13 +129,13 @@ import { Meta } from '@storybook/addon-docs/blocks';
129
129
  border: '1px solid var(--xz-color-line-200)',
130
130
  borderRadius: 'var(--xz-radius-md)',
131
131
  }}>
132
- <h3 style={{ fontSize: '1.125rem', marginBottom: '0.5rem', color: 'var(--xz-color-primary-content-100)' }}>Foundation / Themes</h3>
133
- <p style={{ color: 'var(--xz-color-content-200)', margin: '0 0 1rem', fontSize: '0.9375rem', lineHeight: '1.5' }}>
132
+ <h3 style={{ fontSize: '1.125rem', marginBottom: '0.5rem', color: 'var(--xz-color-primary-fg-100)' }}>Foundation / Themes</h3>
133
+ <p style={{ color: 'var(--xz-color-fg-200)', margin: '0 0 1rem', fontSize: '0.9375rem', lineHeight: '1.5' }}>
134
134
  Learn about semantic color tokens and how to implement theme switching in your application.
135
135
  </p>
136
136
  <a
137
137
  href="/?path=/docs/foundation-themes--docs"
138
- style={{ color: 'var(--xz-color-primary-content-100)', textDecoration: 'none', fontSize: '0.875rem', fontWeight: 600 }}
138
+ style={{ color: 'var(--xz-color-primary-fg-100)', textDecoration: 'none', fontSize: '0.875rem', fontWeight: 600 }}
139
139
  >
140
140
  View Themes →
141
141
  </a>
@@ -147,13 +147,13 @@ import { Meta } from '@storybook/addon-docs/blocks';
147
147
  border: '1px solid var(--xz-color-line-200)',
148
148
  borderRadius: 'var(--xz-radius-md)',
149
149
  }}>
150
- <h3 style={{ fontSize: '1.125rem', marginBottom: '0.5rem', color: 'var(--xz-color-primary-content-100)' }}>Foundation / APCA Contrast</h3>
151
- <p style={{ color: 'var(--xz-color-content-200)', margin: '0 0 1rem', fontSize: '0.9375rem', lineHeight: '1.5' }}>
150
+ <h3 style={{ fontSize: '1.125rem', marginBottom: '0.5rem', color: 'var(--xz-color-primary-fg-100)' }}>Foundation / APCA Contrast</h3>
151
+ <p style={{ color: 'var(--xz-color-fg-200)', margin: '0 0 1rem', fontSize: '0.9375rem', lineHeight: '1.5' }}>
152
152
  Understand how Xosmoz ensures accessibility with modern contrast standards and guidelines.
153
153
  </p>
154
154
  <a
155
155
  href="/?path=/docs/foundation-apca-contrast--docs"
156
- style={{ color: 'var(--xz-color-primary-content-100)', textDecoration: 'none', fontSize: '0.875rem', fontWeight: 600 }}
156
+ style={{ color: 'var(--xz-color-primary-fg-100)', textDecoration: 'none', fontSize: '0.875rem', fontWeight: 600 }}
157
157
  >
158
158
  View APCA →
159
159
  </a>
package/dist/docs/foundation/BoxShadows.svelte CHANGED
@@ -27,13 +27,17 @@
27
27
  </p>
28
28
  <div class="usage-examples">
29
29
  <span class="usage-label">CSS</span>
30
- <pre class="usage-code"><code>{`.card {
30
+ <pre class="usage-code"><code
31
+ >{`.card {
31
32
  box-shadow: var(--xz-box-shadow-200);
32
- }`}</code></pre>
33
+ }`}</code
34
+ ></pre>
33
35
  <span class="usage-label">JS</span>
34
- <pre class="usage-code"><code>{`import { boxShadows } from '@fastwork/xosmoz-theme';
36
+ <pre class="usage-code"><code
37
+ >{`import { boxShadows } from '@fastwork/xosmoz-theme';
35
38
 
36
- boxShadows[200]; // '0 2px 6px 0 rgba(0, 0, 0, 0.10)'`}</code></pre>
39
+ boxShadows[200]; // '0 2px 6px 0 rgba(0, 0, 0, 0.10)'`}</code
40
+ ></pre>
37
41
  </div>
38
42
  </div>
39
43
 
@@ -43,7 +47,10 @@ boxShadows[200]; // '0 2px 6px 0 rgba(0, 0, 0, 0.10)'`}</code></pre>
43
47
  <div class="shadow-grid">
44
48
  {#each shadowEntries as shadow (shadow.key)}
45
49
  <div class="shadow-card">
46
- <div class="shadow-preview" style="box-shadow: {shadow.value};">
50
+ <div
51
+ class="shadow-preview"
52
+ style="box-shadow: {shadow.value};"
53
+ >
47
54
  <span class="shadow-level">{shadow.key}</span>
48
55
  </div>
49
56
  <div class="shadow-info">
@@ -91,7 +98,7 @@ boxShadows[200]; // '0 2px 6px 0 rgba(0, 0, 0, 0.10)'`}</code></pre>
91
98
 
92
99
  .lead {
93
100
  font-size: 0.9375rem;
94
- color: var(--xz-color-content-200);
101
+ color: var(--xz-color-fg-200);
95
102
  line-height: 1.5;
96
103
  margin-bottom: 0.75rem;
97
104
  }
@@ -108,7 +115,7 @@ boxShadows[200]; // '0 2px 6px 0 rgba(0, 0, 0, 0.10)'`}</code></pre>
108
115
  font-weight: 600;
109
116
  text-transform: uppercase;
110
117
  letter-spacing: 0.05em;
111
- color: var(--xz-color-content-200);
118
+ color: var(--xz-color-fg-200);
112
119
  background: var(--xz-color-bg-300);
113
120
  padding: 0.125rem 0.375rem;
114
121
  border-radius: 0.25rem;
@@ -126,7 +133,7 @@ boxShadows[200]; // '0 2px 6px 0 rgba(0, 0, 0, 0.10)'`}</code></pre>
126
133
  .usage-code code {
127
134
  font-family: var(--xz-font-family-mono, monospace);
128
135
  font-size: 0.8125rem;
129
- color: var(--xz-color-content-100);
136
+ color: var(--xz-color-fg-100);
130
137
  line-height: 1.6;
131
138
  white-space: pre;
132
139
  }
@@ -161,7 +168,7 @@ boxShadows[200]; // '0 2px 6px 0 rgba(0, 0, 0, 0.10)'`}</code></pre>
161
168
  .shadow-level {
162
169
  font-size: 1.5rem;
163
170
  font-weight: 700;
164
- color: var(--xz-color-content-100);
171
+ color: var(--xz-color-fg-100);
165
172
  }
166
173
 
167
174
  .shadow-info {
@@ -178,7 +185,7 @@ boxShadows[200]; // '0 2px 6px 0 rgba(0, 0, 0, 0.10)'`}</code></pre>
178
185
  font-family: var(--xz-font-family-mono, monospace);
179
186
  font-size: 0.875rem;
180
187
  font-weight: 500;
181
- color: var(--xz-color-primary-content-100);
188
+ color: var(--xz-color-primary-fg-100);
182
189
  cursor: pointer;
183
190
  border-radius: 0.25rem;
184
191
  transition: all 0.1s;
@@ -197,8 +204,7 @@ boxShadows[200]; // '0 2px 6px 0 rgba(0, 0, 0, 0.10)'`}</code></pre>
197
204
  .shadow-value {
198
205
  font-family: var(--xz-font-family-mono, monospace);
199
206
  font-size: 0.75rem;
200
- color: var(--xz-color-content-200);
207
+ color: var(--xz-color-fg-200);
201
208
  padding-left: 0.5rem;
202
209
  }
203
210
  </style>
204
-
package/dist/docs/foundation/Colors.svelte CHANGED
@@ -492,7 +492,7 @@
492
492
 
493
493
  .lead {
494
494
  font-size: 1.125rem;
495
- color: var(--xz-color-content-200);
495
+ color: var(--xz-color-fg-200);
496
496
  line-height: 1.6;
497
497
  max-width: 800px;
498
498
  }
@@ -512,7 +512,7 @@
512
512
  .indicator-label {
513
513
  font-size: 0.875rem;
514
514
  font-weight: 600;
515
- color: var(--xz-color-content-100);
515
+ color: var(--xz-color-fg-100);
516
516
  }
517
517
 
518
518
  .indicator-badge {
@@ -521,18 +521,18 @@
521
521
  font-size: 0.875rem;
522
522
  font-weight: 600;
523
523
  background: var(--xz-color-primary-soft-200);
524
- color: var(--xz-color-primary-content-100);
524
+ color: var(--xz-color-primary-fg-100);
525
525
  transition: all 0.2s;
526
526
  }
527
527
 
528
528
  .indicator-badge.dark {
529
529
  background: var(--xz-color-primary-soft-300);
530
- color: var(--xz-color-primary-content-200);
530
+ color: var(--xz-color-primary-fg-200);
531
531
  }
532
532
 
533
533
  .indicator-hint {
534
534
  font-size: 0.8125rem;
535
- color: var(--xz-color-content-200);
535
+ color: var(--xz-color-fg-200);
536
536
  font-style: italic;
537
537
  }
538
538
 
@@ -553,7 +553,7 @@
553
553
 
554
554
  .scale-intro {
555
555
  font-size: 1rem;
556
- color: var(--xz-color-content-200);
556
+ color: var(--xz-color-fg-200);
557
557
  line-height: 1.6;
558
558
  margin-bottom: 2rem;
559
559
  }
@@ -641,7 +641,7 @@
641
641
 
642
642
  .scale-description {
643
643
  font-size: 0.9375rem;
644
- color: var(--xz-color-content-200);
644
+ color: var(--xz-color-fg-200);
645
645
  line-height: 1.6;
646
646
  margin: 0;
647
647
  }
@@ -667,7 +667,7 @@
667
667
 
668
668
  .group-header p {
669
669
  font-size: 0.9375rem;
670
- color: var(--xz-color-content-200);
670
+ color: var(--xz-color-fg-200);
671
671
  margin: 0;
672
672
  }
673
673
 
@@ -702,7 +702,7 @@
702
702
  border-radius: var(--xz-radius-md, 0.375rem);
703
703
  font-weight: 600;
704
704
  font-size: 0.875rem;
705
- color: var(--xz-color-content-100, #333);
705
+ color: var(--xz-color-fg-100, #333);
706
706
  margin-bottom: 0.5rem;
707
707
  }
708
708
 
@@ -795,7 +795,7 @@
795
795
  padding: 0.375rem 0.5rem;
796
796
  font-family: var(--xz-font-family-mono, monospace);
797
797
  font-size: 0.875rem;
798
- color: var(--xz-color-primary-content-100);
798
+ color: var(--xz-color-primary-fg-100);
799
799
  cursor: pointer;
800
800
  border-radius: var(--xz-radius-sm, 0.25rem);
801
801
  transition: all 0.15s;
@@ -816,7 +816,7 @@
816
816
  .out-of-gamut {
817
817
  font-family: var(--xz-font-family-mono, monospace);
818
818
  font-size: 0.875rem;
819
- color: var(--xz-color-content-200, #666);
819
+ color: var(--xz-color-fg-200, #666);
820
820
  font-style: italic;
821
821
  cursor: help;
822
822
  }