@rimelight/ui 0.0.38 → 0.0.40
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/package.json +3 -3
- package/src/components/button/RLAButton.astro +2 -0
- package/src/components/button/button.theme.ts +12 -3
- package/src/components/button/button.ts +4 -0
- package/src/components/icon/icon.theme.ts +8 -1
- package/src/components/image/RLAImage.astro +1 -3
- package/src/components/page-section/RLAPageSection.astro +8 -0
- package/src/components/post/RLAPost.astro +70 -70
- package/src/components/tabs/RLATabs.astro +116 -32
- package/src/components/tabs/tabs.theme.ts +61 -23
- package/src/components/tabs/tabs.ts +47 -6
- package/src/components/timeline/RLATimeline.astro +194 -20
- package/src/components/timeline/timeline.theme.ts +307 -9
- package/src/components/timeline/timeline.ts +54 -4
- package/src/components/video/RLAVideo.astro +1 -1
- package/src/presets/index.ts +38 -8
package/src/presets/index.ts
CHANGED
|
@@ -202,14 +202,14 @@ export default definePreset((options?: RimelightPresetOptions) => {
|
|
|
202
202
|
}
|
|
203
203
|
],
|
|
204
204
|
[
|
|
205
|
-
/^(text)-(default|
|
|
205
|
+
/^(text)-(default|muted|dimmed|toned|highlighted|elevated|accented|inverted)(?:\/(\d+))?$/,
|
|
206
206
|
([, , name, opacity]) =>
|
|
207
207
|
opacity
|
|
208
208
|
? { color: `color-mix(in srgb, var(--text-color-${name}) ${opacity}%, transparent)` }
|
|
209
209
|
: { color: `var(--text-color-${name})` }
|
|
210
210
|
],
|
|
211
211
|
[
|
|
212
|
-
/^(bg)-(default|
|
|
212
|
+
/^(bg)-(default|muted|elevated|accented|dimmed|toned|highlighted)(?:\/(\d+))?$/,
|
|
213
213
|
([, , name, opacity]) =>
|
|
214
214
|
opacity
|
|
215
215
|
? {
|
|
@@ -218,7 +218,20 @@ export default definePreset((options?: RimelightPresetOptions) => {
|
|
|
218
218
|
: { "background-color": `var(--background-color-${name})` }
|
|
219
219
|
],
|
|
220
220
|
[
|
|
221
|
-
/^
|
|
221
|
+
/^bg-inverted(?:\/(\d+))?$/,
|
|
222
|
+
([, opacity]) =>
|
|
223
|
+
opacity
|
|
224
|
+
? {
|
|
225
|
+
"background-color": `color-mix(in srgb, var(--background-color-inverted) ${opacity}%, transparent)`,
|
|
226
|
+
"color": "var(--text-color-inverted)"
|
|
227
|
+
}
|
|
228
|
+
: {
|
|
229
|
+
"background-color": "var(--background-color-inverted)",
|
|
230
|
+
"color": "var(--text-color-inverted)"
|
|
231
|
+
}
|
|
232
|
+
],
|
|
233
|
+
[
|
|
234
|
+
/^(ring)-(default|muted|elevated|accented|dimmed|toned|highlighted|inverted)(?:\/(\d+))?$/,
|
|
222
235
|
([, , name, opacity]) =>
|
|
223
236
|
opacity
|
|
224
237
|
? {
|
|
@@ -227,7 +240,7 @@ export default definePreset((options?: RimelightPresetOptions) => {
|
|
|
227
240
|
: { "--un-ring-color": `var(--ring-color-${name})` }
|
|
228
241
|
],
|
|
229
242
|
[
|
|
230
|
-
/^(border)-(default|
|
|
243
|
+
/^(border)-(default|muted|elevated|accented|dimmed|toned|highlighted|inverted)(?:\/(\d+))?$/,
|
|
231
244
|
([, , name, opacity]) =>
|
|
232
245
|
opacity
|
|
233
246
|
? {
|
|
@@ -460,24 +473,41 @@ export default definePreset((options?: RimelightPresetOptions) => {
|
|
|
460
473
|
|
|
461
474
|
/* Text / background / border / ring semantic tokens using responsive neutral variables */
|
|
462
475
|
--text-color-default: var(--color-neutral-700);
|
|
463
|
-
--text-color-muted: var(--color-neutral-
|
|
464
|
-
--text-color-dimmed: var(--color-neutral-
|
|
465
|
-
--text-color-toned: var(--color-neutral-
|
|
476
|
+
--text-color-muted: var(--color-neutral-600);
|
|
477
|
+
--text-color-dimmed: var(--color-neutral-500);
|
|
478
|
+
--text-color-toned: var(--color-neutral-800);
|
|
466
479
|
--text-color-highlighted: var(--color-neutral-950);
|
|
467
|
-
--text-color-
|
|
480
|
+
--text-color-elevated: var(--color-neutral-800);
|
|
481
|
+
--text-color-accented: var(--color-neutral-900);
|
|
482
|
+
--text-color-inverted: var(--color-neutral-50);
|
|
483
|
+
|
|
468
484
|
--background-color-default: light-dark(#ffffff, var(--color-neutral-50));
|
|
469
485
|
--background-color-muted: var(--color-neutral-100);
|
|
470
486
|
--background-color-elevated: var(--color-neutral-200);
|
|
471
487
|
--background-color-accented: var(--color-neutral-300);
|
|
488
|
+
--background-color-dimmed: var(--color-neutral-400);
|
|
489
|
+
--background-color-toned: var(--color-neutral-800);
|
|
490
|
+
--background-color-highlighted: var(--color-neutral-900);
|
|
472
491
|
--background-color-inverted: var(--color-neutral-950);
|
|
492
|
+
|
|
473
493
|
--border-color-default: var(--color-neutral-200);
|
|
474
494
|
--border-color-muted: var(--color-neutral-100);
|
|
495
|
+
--border-color-elevated: var(--color-neutral-200);
|
|
475
496
|
--border-color-accented: var(--color-neutral-300);
|
|
497
|
+
--border-color-dimmed: var(--color-neutral-400);
|
|
498
|
+
--border-color-toned: var(--color-neutral-800);
|
|
499
|
+
--border-color-highlighted: var(--color-neutral-900);
|
|
476
500
|
--border-color-inverted: var(--color-neutral-950);
|
|
501
|
+
|
|
477
502
|
--ring-color-default: var(--color-neutral-200);
|
|
478
503
|
--ring-color-muted: var(--color-neutral-100);
|
|
504
|
+
--ring-color-elevated: var(--color-neutral-200);
|
|
479
505
|
--ring-color-accented: var(--color-neutral-300);
|
|
506
|
+
--ring-color-dimmed: var(--color-neutral-400);
|
|
507
|
+
--ring-color-toned: var(--color-neutral-800);
|
|
508
|
+
--ring-color-highlighted: var(--color-neutral-900);
|
|
480
509
|
--ring-color-inverted: var(--color-neutral-950);
|
|
510
|
+
|
|
481
511
|
--divide-color-default: var(--color-neutral-200);
|
|
482
512
|
--divide-color-inverted: var(--color-neutral-950);
|
|
483
513
|
|