@aleph-alpha/config-css 0.15.3 → 0.17.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/CHANGELOG.md +20 -0
- package/dist/index.js +190 -143
- package/package.json +1 -1
- package/src/index.ts +48 -1
package/package.json
CHANGED
package/src/index.ts
CHANGED
|
@@ -31,6 +31,52 @@ const tokenPreset: Preset<Theme> = definePreset<Theme>(() => {
|
|
|
31
31
|
-webkit-font-smoothing: antialiased;
|
|
32
32
|
-moz-osx-font-smoothing: grayscale;
|
|
33
33
|
}
|
|
34
|
+
|
|
35
|
+
/* Scrollbar styles for webkit browsers */
|
|
36
|
+
.scrollbar-thin::-webkit-scrollbar {
|
|
37
|
+
width: ${spacingsSet.L};
|
|
38
|
+
height: ${spacingsSet.L};
|
|
39
|
+
}
|
|
40
|
+
.scrollbar-thin::-webkit-scrollbar-track {
|
|
41
|
+
background: transparent;
|
|
42
|
+
border-radius: ${spacingsSet.XS};
|
|
43
|
+
}
|
|
44
|
+
.scrollbar-thin::-webkit-scrollbar-thumb {
|
|
45
|
+
background: ${lightModeSet['core-bg-skeleton']};
|
|
46
|
+
border-radius: ${spacingsSet.XS};
|
|
47
|
+
border: ${spacingsSet.DEFAULT} solid transparent;
|
|
48
|
+
background-clip: content-box;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* Cross-browser scrollbar styles for non-webkit browsers */
|
|
52
|
+
.scrollbar-thin {
|
|
53
|
+
scrollbar-color: ${lightModeSet['core-bg-skeleton']} transparent !important;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.scrollbar-none {
|
|
57
|
+
scrollbar-width: none;
|
|
58
|
+
}
|
|
59
|
+
.scrollbar-none::-webkit-scrollbar {
|
|
60
|
+
display: none;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* Dark theme overrides */
|
|
64
|
+
html.dark .scrollbar-thin::-webkit-scrollbar-thumb {
|
|
65
|
+
background: ${darkModeSet['core-bg-skeleton']};
|
|
66
|
+
border-radius: ${spacingsSet.XS};
|
|
67
|
+
border: ${spacingsSet.DEFAULT} solid transparent;
|
|
68
|
+
background-clip: content-box;
|
|
69
|
+
}
|
|
70
|
+
html.dark .scrollbar-thin {
|
|
71
|
+
scrollbar-color: ${darkModeSet['core-bg-skeleton']} transparent !important;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
html.dark .scrollbar-none {
|
|
75
|
+
scrollbar-width: none;
|
|
76
|
+
}
|
|
77
|
+
html.dark .scrollbar-none::-webkit-scrollbar {
|
|
78
|
+
display: none;
|
|
79
|
+
}
|
|
34
80
|
`;
|
|
35
81
|
},
|
|
36
82
|
},
|
|
@@ -53,7 +99,8 @@ const createPresets = (): Preset<Theme>[] => {
|
|
|
53
99
|
presets.push(
|
|
54
100
|
presetTheme({
|
|
55
101
|
theme: {
|
|
56
|
-
|
|
102
|
+
// clone the darkModeSet to avoid mutating the original object. the original object is currently being used in the getCSS function.
|
|
103
|
+
dark: { colors: structuredClone(darkModeSet) },
|
|
57
104
|
},
|
|
58
105
|
}) as unknown as Preset<Theme>
|
|
59
106
|
);
|