@tenphi/tasty 0.0.0-snapshot.1afab2a → 0.0.0-snapshot.1c5dff6
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/styles/scrollbar.d.ts +3 -8
- package/dist/styles/scrollbar.js +6 -77
- package/dist/styles/scrollbar.js.map +1 -1
- package/docs/styles.md +12 -12
- package/package.json +1 -1
|
@@ -6,15 +6,10 @@ interface ScrollbarStyleProps {
|
|
|
6
6
|
overflow?: string;
|
|
7
7
|
}
|
|
8
8
|
/**
|
|
9
|
-
* Standards-
|
|
9
|
+
* Standards-based scrollbar styling using `scrollbar-width`, `scrollbar-color`,
|
|
10
|
+
* and `scrollbar-gutter`.
|
|
10
11
|
*
|
|
11
|
-
*
|
|
12
|
-
* primary approach. Adds `::-webkit-scrollbar-*` pseudo-elements only when
|
|
13
|
-
* the `styled` modifier or a custom size value is specified — for features
|
|
14
|
-
* the standard API cannot express (border-radius, transitions, explicit
|
|
15
|
-
* dimensions).
|
|
16
|
-
*
|
|
17
|
-
* Returns CSSMap[] where pseudo-element rules use $ for sub-selectors.
|
|
12
|
+
* Returns CSSMap[] where each entry maps to CSS declarations on the element.
|
|
18
13
|
*/
|
|
19
14
|
declare function scrollbarStyle({
|
|
20
15
|
scrollbar,
|
package/dist/styles/scrollbar.js
CHANGED
|
@@ -3,15 +3,10 @@ import { parseStyle } from "../utils/styles.js";
|
|
|
3
3
|
|
|
4
4
|
//#region src/styles/scrollbar.ts
|
|
5
5
|
/**
|
|
6
|
-
* Standards-
|
|
6
|
+
* Standards-based scrollbar styling using `scrollbar-width`, `scrollbar-color`,
|
|
7
|
+
* and `scrollbar-gutter`.
|
|
7
8
|
*
|
|
8
|
-
*
|
|
9
|
-
* primary approach. Adds `::-webkit-scrollbar-*` pseudo-elements only when
|
|
10
|
-
* the `styled` modifier or a custom size value is specified — for features
|
|
11
|
-
* the standard API cannot express (border-radius, transitions, explicit
|
|
12
|
-
* dimensions).
|
|
13
|
-
*
|
|
14
|
-
* Returns CSSMap[] where pseudo-element rules use $ for sub-selectors.
|
|
9
|
+
* Returns CSSMap[] where each entry maps to CSS declarations on the element.
|
|
15
10
|
*/
|
|
16
11
|
function scrollbarStyle({ scrollbar, overflow }) {
|
|
17
12
|
if (!scrollbar && scrollbar !== 0) return;
|
|
@@ -19,84 +14,18 @@ function scrollbarStyle({ scrollbar, overflow }) {
|
|
|
19
14
|
const { mods, colors, values } = parseStyle(String(value)).groups[0] ?? makeEmptyDetails();
|
|
20
15
|
const defaultThumbColor = "var(--scrollbar-thumb-color)";
|
|
21
16
|
const defaultTrackColor = "var(--scrollbar-track-color, transparent)";
|
|
22
|
-
if (mods.includes("none")) return [{ "scrollbar-width": "none" }
|
|
23
|
-
$: "::-webkit-scrollbar",
|
|
24
|
-
width: "0px",
|
|
25
|
-
height: "0px",
|
|
26
|
-
display: "none"
|
|
27
|
-
}];
|
|
17
|
+
if (mods.includes("none")) return [{ "scrollbar-width": "none" }];
|
|
28
18
|
const root = {};
|
|
29
19
|
const isAuto = values.includes("auto");
|
|
30
20
|
if (mods.includes("thin")) root["scrollbar-width"] = "thin";
|
|
31
21
|
else if (isAuto) root["scrollbar-width"] = "auto";
|
|
32
|
-
|
|
33
|
-
const trackColor = colors?.[1] || defaultTrackColor;
|
|
34
|
-
root["scrollbar-color"] = `${thumbColor} ${trackColor}`;
|
|
22
|
+
root["scrollbar-color"] = `${colors?.[0] || defaultThumbColor} ${colors?.[1] || defaultTrackColor}`;
|
|
35
23
|
if (mods.includes("stable") || mods.includes("both-edges")) root["scrollbar-gutter"] = mods.includes("both-edges") ? "stable both-edges" : "stable";
|
|
36
24
|
if (mods.includes("always")) {
|
|
37
25
|
root["overflow"] = overflow || "auto";
|
|
38
26
|
if (!root["scrollbar-gutter"]) root["scrollbar-gutter"] = "stable";
|
|
39
27
|
}
|
|
40
|
-
|
|
41
|
-
const hasCustomSize = sizeValues.length > 0;
|
|
42
|
-
const isStyled = mods.includes("styled");
|
|
43
|
-
const needsWebkit = isStyled || hasCustomSize;
|
|
44
|
-
if (needsWebkit && !root["scrollbar-width"]) root["scrollbar-width"] = "thin";
|
|
45
|
-
const result = [root];
|
|
46
|
-
if (needsWebkit) {
|
|
47
|
-
const sizeValue = sizeValues[0] || "8px";
|
|
48
|
-
const cornerColor = colors?.[2] || trackColor;
|
|
49
|
-
const webkitScrollbar = {
|
|
50
|
-
width: sizeValue,
|
|
51
|
-
height: sizeValue
|
|
52
|
-
};
|
|
53
|
-
const webkitTrack = {};
|
|
54
|
-
const webkitThumb = {};
|
|
55
|
-
const webkitCorner = {};
|
|
56
|
-
if (colors?.length) {
|
|
57
|
-
webkitScrollbar["background"] = trackColor;
|
|
58
|
-
webkitTrack["background"] = trackColor;
|
|
59
|
-
webkitThumb["background"] = thumbColor;
|
|
60
|
-
webkitCorner["background"] = cornerColor;
|
|
61
|
-
}
|
|
62
|
-
if (isStyled) {
|
|
63
|
-
const baseTransition = [
|
|
64
|
-
"background var(--transition)",
|
|
65
|
-
"border-radius var(--transition)",
|
|
66
|
-
"box-shadow var(--transition)",
|
|
67
|
-
"width var(--transition)",
|
|
68
|
-
"height var(--transition)",
|
|
69
|
-
"border var(--transition)"
|
|
70
|
-
].join(", ");
|
|
71
|
-
webkitScrollbar["transition"] = baseTransition;
|
|
72
|
-
if (!webkitScrollbar["background"]) webkitScrollbar["background"] = defaultTrackColor;
|
|
73
|
-
if (!webkitThumb["background"]) webkitThumb["background"] = defaultThumbColor;
|
|
74
|
-
webkitThumb["border-radius"] = "8px";
|
|
75
|
-
webkitThumb["min-height"] = "24px";
|
|
76
|
-
webkitThumb["transition"] = baseTransition;
|
|
77
|
-
if (!webkitTrack["background"]) webkitTrack["background"] = defaultTrackColor;
|
|
78
|
-
webkitTrack["transition"] = baseTransition;
|
|
79
|
-
if (!webkitCorner["background"]) webkitCorner["background"] = defaultTrackColor;
|
|
80
|
-
webkitCorner["transition"] = baseTransition;
|
|
81
|
-
}
|
|
82
|
-
result.push({
|
|
83
|
-
$: "::-webkit-scrollbar",
|
|
84
|
-
...webkitScrollbar
|
|
85
|
-
});
|
|
86
|
-
if (Object.keys(webkitTrack).length) result.push({
|
|
87
|
-
$: "::-webkit-scrollbar-track",
|
|
88
|
-
...webkitTrack
|
|
89
|
-
});
|
|
90
|
-
if (Object.keys(webkitThumb).length) result.push({
|
|
91
|
-
$: "::-webkit-scrollbar-thumb",
|
|
92
|
-
...webkitThumb
|
|
93
|
-
});
|
|
94
|
-
if (Object.keys(webkitCorner).length) result.push({
|
|
95
|
-
$: "::-webkit-scrollbar-corner",
|
|
96
|
-
...webkitCorner
|
|
97
|
-
});
|
|
98
|
-
}
|
|
99
|
-
return result;
|
|
28
|
+
return [root];
|
|
100
29
|
}
|
|
101
30
|
scrollbarStyle.__lookupStyles = ["scrollbar", "overflow"];
|
|
102
31
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scrollbar.js","names":[],"sources":["../../src/styles/scrollbar.ts"],"sourcesContent":["import { makeEmptyDetails } from '../parser/types';\nimport type { CSSMap } from '../utils/styles';\nimport { parseStyle } from '../utils/styles';\n\ninterface ScrollbarStyleProps {\n scrollbar?: string | boolean | number;\n overflow?: string;\n}\n\n/**\n * Standards-
|
|
1
|
+
{"version":3,"file":"scrollbar.js","names":[],"sources":["../../src/styles/scrollbar.ts"],"sourcesContent":["import { makeEmptyDetails } from '../parser/types';\nimport type { CSSMap } from '../utils/styles';\nimport { parseStyle } from '../utils/styles';\n\ninterface ScrollbarStyleProps {\n scrollbar?: string | boolean | number;\n overflow?: string;\n}\n\n/**\n * Standards-based scrollbar styling using `scrollbar-width`, `scrollbar-color`,\n * and `scrollbar-gutter`.\n *\n * Returns CSSMap[] where each entry maps to CSS declarations on the element.\n */\nexport function scrollbarStyle({\n scrollbar,\n overflow,\n}: ScrollbarStyleProps): CSSMap[] | undefined {\n if (!scrollbar && scrollbar !== 0) return;\n\n const value = scrollbar === true || scrollbar === '' ? 'thin' : scrollbar;\n const processed = parseStyle(String(value));\n const { mods, colors, values } = processed.groups[0] ?? makeEmptyDetails();\n\n const defaultThumbColor = 'var(--scrollbar-thumb-color)';\n const defaultTrackColor = 'var(--scrollbar-track-color, transparent)';\n\n if (mods.includes('none')) {\n return [{ 'scrollbar-width': 'none' }];\n }\n\n const root: Record<string, string> = {};\n\n const isAuto = values.includes('auto');\n\n if (mods.includes('thin')) {\n root['scrollbar-width'] = 'thin';\n } else if (isAuto) {\n root['scrollbar-width'] = 'auto';\n }\n\n const thumbColor = colors?.[0] || defaultThumbColor;\n const trackColor = colors?.[1] || defaultTrackColor;\n root['scrollbar-color'] = `${thumbColor} ${trackColor}`;\n\n if (mods.includes('stable') || mods.includes('both-edges')) {\n root['scrollbar-gutter'] = mods.includes('both-edges')\n ? 'stable both-edges'\n : 'stable';\n }\n\n if (mods.includes('always')) {\n root['overflow'] = overflow || 'auto';\n\n if (!root['scrollbar-gutter']) {\n root['scrollbar-gutter'] = 'stable';\n }\n }\n\n return [root];\n}\n\nscrollbarStyle.__lookupStyles = ['scrollbar', 'overflow'];\n"],"mappings":";;;;;;;;;;AAeA,SAAgB,eAAe,EAC7B,WACA,YAC4C;AAC5C,KAAI,CAAC,aAAa,cAAc,EAAG;CAEnC,MAAM,QAAQ,cAAc,QAAQ,cAAc,KAAK,SAAS;CAEhE,MAAM,EAAE,MAAM,QAAQ,WADJ,WAAW,OAAO,MAAM,CAAC,CACA,OAAO,MAAM,kBAAkB;CAE1E,MAAM,oBAAoB;CAC1B,MAAM,oBAAoB;AAE1B,KAAI,KAAK,SAAS,OAAO,CACvB,QAAO,CAAC,EAAE,mBAAmB,QAAQ,CAAC;CAGxC,MAAM,OAA+B,EAAE;CAEvC,MAAM,SAAS,OAAO,SAAS,OAAO;AAEtC,KAAI,KAAK,SAAS,OAAO,CACvB,MAAK,qBAAqB;UACjB,OACT,MAAK,qBAAqB;AAK5B,MAAK,qBAAqB,GAFP,SAAS,MAAM,kBAEM,GADrB,SAAS,MAAM;AAGlC,KAAI,KAAK,SAAS,SAAS,IAAI,KAAK,SAAS,aAAa,CACxD,MAAK,sBAAsB,KAAK,SAAS,aAAa,GAClD,sBACA;AAGN,KAAI,KAAK,SAAS,SAAS,EAAE;AAC3B,OAAK,cAAc,YAAY;AAE/B,MAAI,CAAC,KAAK,oBACR,MAAK,sBAAsB;;AAI/B,QAAO,CAAC,KAAK;;AAGf,eAAe,iBAAiB,CAAC,aAAa,WAAW"}
|
package/docs/styles.md
CHANGED
|
@@ -489,33 +489,33 @@ If the name is not a semantic name, it is used as a literal CSS property name.
|
|
|
489
489
|
|
|
490
490
|
### `scrollbar`
|
|
491
491
|
|
|
492
|
-
|
|
492
|
+
Standards-based scrollbar styling using `scrollbar-width`, `scrollbar-color`, and `scrollbar-gutter`.
|
|
493
493
|
|
|
494
|
-
**Syntax:** `[modifiers...] [
|
|
494
|
+
**Syntax:** `[modifiers...] [thumb-color] [track-color]`
|
|
495
495
|
|
|
496
496
|
**Modifiers:**
|
|
497
497
|
|
|
498
498
|
| Modifier | Effect |
|
|
499
499
|
|----------|--------|
|
|
500
500
|
| `thin` | Thin scrollbar (`scrollbar-width: thin`) |
|
|
501
|
-
| `none` | Hide scrollbar (
|
|
502
|
-
| `auto` | Browser-default scrollbar width |
|
|
501
|
+
| `none` | Hide scrollbar (content remains scrollable) |
|
|
502
|
+
| `auto` | Browser-default scrollbar width (`scrollbar-width: auto`) |
|
|
503
503
|
| `stable` | Reserve space for scrollbar (`scrollbar-gutter: stable`) |
|
|
504
504
|
| `both-edges` | Reserve space on both sides (`scrollbar-gutter: stable both-edges`) |
|
|
505
|
-
| `always` |
|
|
506
|
-
| `styled` | Enhanced appearance with rounded thumb, transitions, and custom sizing |
|
|
505
|
+
| `always` | Keep scrollbar visible when content overflows (`overflow: auto` + `scrollbar-gutter: stable`) |
|
|
507
506
|
|
|
508
|
-
**Colors:** Up to
|
|
507
|
+
**Colors:** Up to 2 color values for thumb and track (optional).
|
|
509
508
|
|
|
510
|
-
**Defaults:**
|
|
509
|
+
**Defaults:** thumb = `$scrollbar-thumb-color`, track = `$scrollbar-track-color` (falls back to `transparent`)
|
|
511
510
|
|
|
512
511
|
| Value | Effect |
|
|
513
512
|
|-------|--------|
|
|
514
513
|
| `true` | Thin scrollbar with default thumb/track colors |
|
|
515
|
-
| `"none"` | Hidden scrollbar (
|
|
516
|
-
| `"thin
|
|
517
|
-
| `"
|
|
518
|
-
| `"
|
|
514
|
+
| `"none"` | Hidden scrollbar (content remains scrollable) |
|
|
515
|
+
| `"thin #purple.40 #dark.04"` | Thin, thumb `#purple.40`, track `#dark.04` |
|
|
516
|
+
| `"always #primary.50 #white.02"` | Always visible with stable gutter, thumb `#primary.50`, track `#white.02` |
|
|
517
|
+
| `"thin stable"` | Thin scrollbar with reserved gutter space |
|
|
518
|
+
| `"thin both-edges"` | Thin scrollbar with gutter space on both sides |
|
|
519
519
|
|
|
520
520
|
### `fade`
|
|
521
521
|
|
package/package.json
CHANGED