@keboola/tailwind-config 1.0.0 → 1.0.2
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/colors.ts +4 -0
- package/package.json +1 -1
- package/scrollFade.ts +8 -2
package/colors.ts
CHANGED
|
@@ -59,8 +59,12 @@ export default {
|
|
|
59
59
|
|
|
60
60
|
border: 'rgb(var(--color-border) / <alpha-value>)',
|
|
61
61
|
|
|
62
|
+
// `DEFAULT` is the input *border*; `background` is the control's own fill.
|
|
63
|
+
// Both are their own token because a form control is not a card — `card` is
|
|
64
|
+
// raised container chrome and re-skins independently of the field surface.
|
|
62
65
|
input: {
|
|
63
66
|
DEFAULT: 'rgb(var(--color-input) / <alpha-value>)',
|
|
67
|
+
background: 'rgb(var(--color-input-background) / <alpha-value>)',
|
|
64
68
|
},
|
|
65
69
|
|
|
66
70
|
// Focus ring (brand blue).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@keboola/tailwind-config",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Shared Tailwind CSS v4 design tokens for the Keboola UI platform — semantic color palette, type scale, radii and shadows as a `theme` object.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
package/scrollFade.ts
CHANGED
|
@@ -27,8 +27,14 @@ export const scrollFadePlugin = plugin(function ({ addUtilities, addBase }) {
|
|
|
27
27
|
},
|
|
28
28
|
});
|
|
29
29
|
|
|
30
|
+
// The leading edge takes its own size, defaulting to the shared one. A region that pins a
|
|
31
|
+
// `position: sticky` header at its top sets it shallow: the mask dims whatever it covers, header
|
|
32
|
+
// included, and only a mask actually dissolves content — a background-coloured overlay just tints
|
|
33
|
+
// it, which is invisible over a card barely lighter than the page.
|
|
34
|
+
const START_SIZE = 'var(--tw-scroll-fade-size-start, var(--tw-scroll-fade-size))';
|
|
35
|
+
|
|
30
36
|
const scrollFadeMask = (direction: 'bottom' | 'right') =>
|
|
31
|
-
`linear-gradient(to ${direction}, rgb(0 0 0 / var(--tw-scroll-fade-start)) 0, #000
|
|
37
|
+
`linear-gradient(to ${direction}, rgb(0 0 0 / var(--tw-scroll-fade-start)) 0, #000 ${START_SIZE}, #000 calc(100% - var(--tw-scroll-fade-size)), rgb(0 0 0 / var(--tw-scroll-fade-end)) 100%)`;
|
|
32
38
|
|
|
33
39
|
const scrollFade = (direction: 'bottom' | 'right', axis: 'x' | 'y') => ({
|
|
34
40
|
'--tw-scroll-fade-size': '1.5rem',
|
|
@@ -36,7 +42,7 @@ export const scrollFadePlugin = plugin(function ({ addUtilities, addBase }) {
|
|
|
36
42
|
maskImage: scrollFadeMask(direction),
|
|
37
43
|
animation: 'tw-scroll-fade-reveal-start linear both, tw-scroll-fade-reveal-end linear both',
|
|
38
44
|
animationTimeline: `scroll(self ${axis}), scroll(self ${axis})`,
|
|
39
|
-
animationRange:
|
|
45
|
+
animationRange: `0 ${START_SIZE}, calc(100% - var(--tw-scroll-fade-size)) 100%`,
|
|
40
46
|
// Browsers without scroll-driven animations show a static fade on both edges.
|
|
41
47
|
'@supports not (animation-timeline: scroll())': {
|
|
42
48
|
'--tw-scroll-fade-start': '0',
|