@duyluonganduin/acl-web-components 0.0.76 → 0.0.78
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/acl-web-components.cjs +1 -1
- package/dist/acl-web-components.d.ts +196 -3
- package/dist/acl-web-components.iife.js +465 -359
- package/dist/acl-web-components.js +179 -173
- package/dist/{anduin-breadcrumb-CONvachF.cjs → anduin-breadcrumb-Cwl3YeeA.cjs} +471 -365
- package/dist/{anduin-breadcrumb-CXCPQ93S.js → anduin-breadcrumb-DrvY4YyG.js} +3730 -3193
- package/dist/jsx.d.ts +14 -0
- package/dist/react.cjs +1 -1
- package/dist/react.d.ts +208 -3
- package/dist/react.js +372 -366
- package/dist/tokens.css +33 -0
- package/package.json +1 -1
package/dist/tokens.css
CHANGED
|
@@ -293,6 +293,9 @@
|
|
|
293
293
|
--color-overlay: rgba(50, 60, 77, 0.6);
|
|
294
294
|
/* Base for custom shadows: color-mix(in srgb, var(--color-shadow) 12%, transparent) */
|
|
295
295
|
--color-shadow: var(--color-gray-9);
|
|
296
|
+
/* Scrollbar thumb (track is transparent), same as anduin.design */
|
|
297
|
+
--color-scrollbar-thumb: rgba(32, 57, 77, 0.3);
|
|
298
|
+
--color-scrollbar-thumb-hover: rgba(32, 57, 77, 0.6);
|
|
296
299
|
|
|
297
300
|
/* Box shadow — lives here so `.light` restores it inside a `.dark` subtree. */
|
|
298
301
|
--shadow-1: 0px 1px 2px rgba(29, 41, 57, 0.07);
|
|
@@ -502,6 +505,8 @@
|
|
|
502
505
|
/* The scrim has to darken the page, so black rather than a lifted gray */
|
|
503
506
|
--color-overlay: oklch(0 0 0 / 0.4);
|
|
504
507
|
--color-shadow: oklch(0 0 0);
|
|
508
|
+
--color-scrollbar-thumb: oklch(0.94 0.006 260 / 0.24);
|
|
509
|
+
--color-scrollbar-thumb-hover: oklch(0.94 0.006 260 / 0.48);
|
|
505
510
|
|
|
506
511
|
/* The design's extra roles */
|
|
507
512
|
--color-canvas: color-mix(in oklab, var(--color-gray-9), black 6%);
|
|
@@ -547,3 +552,31 @@ body {
|
|
|
547
552
|
-moz-osx-font-smoothing: grayscale;
|
|
548
553
|
font-size: var(--text-13);
|
|
549
554
|
}
|
|
555
|
+
|
|
556
|
+
/* ===================== Scrollbar =====================
|
|
557
|
+
* Same as anduin.design: transparent track, rounded thumb inset 4px inside a
|
|
558
|
+
* 16px gutter. `scrollbar-color` is inherited, so it reaches the scroll areas
|
|
559
|
+
* inside components' shadow roots (Chrome 121+, Firefox). Safari only reads
|
|
560
|
+
* `::-webkit-scrollbar`, which each component re-declares in its shadow root.
|
|
561
|
+
*/
|
|
562
|
+
* {
|
|
563
|
+
scrollbar-width: auto;
|
|
564
|
+
scrollbar-color: var(--color-scrollbar-thumb) transparent;
|
|
565
|
+
}
|
|
566
|
+
::-webkit-scrollbar {
|
|
567
|
+
width: 16px;
|
|
568
|
+
height: 16px;
|
|
569
|
+
}
|
|
570
|
+
::-webkit-scrollbar-thumb {
|
|
571
|
+
background-color: var(--color-scrollbar-thumb);
|
|
572
|
+
border-radius: 16px;
|
|
573
|
+
border: 4px solid transparent;
|
|
574
|
+
background-clip: content-box;
|
|
575
|
+
}
|
|
576
|
+
::-webkit-scrollbar-thumb:hover {
|
|
577
|
+
background-color: var(--color-scrollbar-thumb-hover);
|
|
578
|
+
}
|
|
579
|
+
::-webkit-scrollbar-track,
|
|
580
|
+
::-webkit-scrollbar-corner {
|
|
581
|
+
background-color: transparent;
|
|
582
|
+
}
|