@arcadeai/design-system 4.1.0 → 5.0.0

package/dist/assets/tokens.css

@@ -1 +1 @@
-@custom-variant dark (&:is(.dark *));@theme inline{--animate-gateway-flow: gateway-flow 14s linear infinite; --animate-gateway-flow-dotted: gateway-flow-dotted 14s linear infinite; --animate-gateway-flow-dot: gateway-flow-dot 2.8s linear infinite; --font-heading: var(--font-sans); --font-sans: "Geist Variable", ui-sans-serif, sans-serif; --radius-sm: calc(var(--radius) * .6); --radius-md: calc(var(--radius) * .8); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) * 1.4); --radius-2xl: calc(var(--radius) * 1.8); --radius-3xl: calc(var(--radius) * 2.2); --radius-4xl: calc(var(--radius) * 2.6); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-brand-text: var(--brand-text); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-tertiary: var(--tertiary); --color-tertiary-foreground: var(--tertiary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-brand-green: var(--brand-green); --color-brand-fuchsia: var(--brand-fuchsia); --color-brand-red: var(--brand-red); --color-brand-purple: var(--brand-purple); --color-brand-navy: var(--brand-navy); --color-brand-yellow: var(--brand-yellow); --color-brand-arcade-red: var(--brand-arcade-red); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-link: var(--link); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --spacing: var(--spacing);}:root{--radius:.625rem;--spacing:.25rem;--ease-smooth:cubic-bezier(.22, 1, .36, 1);--ease-spring:cubic-bezier(.35, 1.55, .65, 1);--duration-fast:.15s;--duration-normal:.2s;--duration-slow:.28s;--shadow-color:oklch(14.5% 0 0);--shadow-card:0 1px 2px color-mix(in oklch, var(--shadow-color) 5%, transparent), 0 2px 4px color-mix(in oklch, var(--shadow-color) 2%, transparent), 0 0 0 .5px color-mix(in oklch, var(--shadow-color) 8%, transparent);--shadow-card-hover:0 2px 4px color-mix(in oklch, var(--shadow-color) 5%, transparent), 0 6px 12px color-mix(in oklch, var(--shadow-color) 3%, transparent), 0 0 0 .5px color-mix(in oklch, var(--shadow-color) 10%, transparent);--ds-sparkle-duration:.8s;--background:oklch(100% 0 0);--foreground:oklch(14.5% 0 0);--card:oklch(100% 0 0);--card-foreground:oklch(14.5% 0 0);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.5% 0 0);--primary:oklch(92.5% .2326 125.05);--primary-foreground:oklch(20.5% 0 0);--brand-text:oklch(53.2% .157 131.589);--secondary:oklch(97% 0 0);--secondary-foreground:oklch(20.5% 0 0);--tertiary:oklch(47.36% .2914 276.23);--tertiary-foreground:oklch(98.5% 0 0);--muted:oklch(97% 0 0);--muted-foreground:oklch(55.6% 0 0);--accent:oklch(97% 0 0);--accent-foreground:oklch(20.5% 0 0);--destructive:oklch(57.7% .245 27.325);--border:oklch(92.2% 0 0);--input:oklch(92.2% 0 0);--ring:oklch(92.5% .2326 125.05);--link:var(--tertiary);--chart-1:oklch(64.6% .222 41.116);--chart-2:oklch(60% .118 184.704);--chart-3:oklch(39.8% .07 227.392);--chart-4:oklch(82.8% .189 84.429);--chart-5:oklch(76.9% .188 70.08);--sidebar:oklch(98.5% 0 0);--sidebar-foreground:oklch(50% 0 0);--sidebar-primary:oklch(20.5% 0 0);--sidebar-primary-foreground:oklch(20.5% 0 0);--sidebar-accent:oklch(92.5% .2326 125.05);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(92.2% 0 0);--sidebar-ring:oklch(70.8% 0 0);--warning:oklch(75% .1707 63.43);--warning-foreground:oklch(100% 0 0);--success:oklch(64.01% .1751 146.74);--success-foreground:oklch(100% 0 0);--brand-green:oklch(87.19% .254 147.75);--brand-fuchsia:oklch(67.43% .2742 344.98);--brand-red:oklch(62.86% .2568 27.89);--brand-purple:oklch(57.51% .2941 304.75);--brand-navy:oklch(47.36% .2914 276.23);--brand-yellow:oklch(96.81% .21 109.76);--brand-arcade-red:oklch(63.11% .2546 22.82)}.dark{--spacing:.25rem;--shadow-color:oklch(0% 0 0);--background:oklch(14.5% 0 0);--foreground:oklch(98.5% 0 0);--card:oklch(20.5% 0 0);--card-foreground:oklch(98.5% 0 0);--popover:oklch(20.5% 0 0);--popover-foreground:oklch(98.5% 0 0);--primary:oklch(92.5% .2326 125.05);--primary-foreground:oklch(20.5% 0 0);--brand-text:var(--primary);--secondary:oklch(26.9% 0 0);--secondary-foreground:oklch(98.5% 0 0);--tertiary:oklch(47.36% .2914 276.23);--tertiary-foreground:oklch(98.5% 0 0);--muted:oklch(26.9% 0 0);--muted-foreground:oklch(70.8% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--destructive:oklch(70.4% .191 22.216);--border:oklch(100% 0 0/.1);--input:oklch(100% 0 0/.15);--ring:oklch(92.5% .2326 125.05);--link:var(--primary);--chart-1:oklch(73.74% .1669 63.82);--chart-2:oklch(51.71% .1067 166.24);--chart-3:oklch(39.76% .1371 309.62);--chart-4:oklch(46.42% .0848 227.39);--chart-5:oklch(64.5% .246 16.439);--sidebar:oklch(20.5% 0 0);--sidebar-foreground:oklch(98.5% 0 0);--sidebar-primary:oklch(48.8% .243 264.376);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(92.5% .2326 125.05);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(100% 0 0/.1);--sidebar-ring:oklch(55.6% 0 0);--success:oklch(64.01% .1751 146.74);--success-foreground:oklch(100% 0 0);--warning:oklch(75% .1707 63.43);--warning-foreground:oklch(100% 0 0)}@keyframes spinner-fade{0%{opacity:1}to{opacity:0}}@keyframes thin-pulse{0%,to{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}}@keyframes bounce-dots{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes gateway-flow{0%{stroke-dashoffset:0}to{stroke-dashoffset:-120px}}@keyframes gateway-flow-dotted{0%{stroke-dashoffset:0}to{stroke-dashoffset:-112.5px}}@keyframes gateway-flow-dot{0%{stroke-dashoffset:0}to{stroke-dashoffset:-120px}}@keyframes typing{0%,to{opacity:.2}50%{opacity:1}}@keyframes wave{0%,to{transform:scaleY(.5)}50%{transform:scaleY(1)}}@keyframes wave-bars{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes text-blink{0%,to{opacity:1}50%{opacity:.3}}@keyframes shimmer{0%{background-position:200%}to{background-position:-200%}}@keyframes loading-dots{0%,to{opacity:0}50%{opacity:1}}@keyframes braille-spin{0%{content:"⠋"}10%{content:"⠙"}20%{content:"⠹"}30%{content:"⠸"}40%{content:"⠼"}50%{content:"⠴"}60%{content:"⠦"}70%{content:"⠧"}80%{content:"⠇"}90%{content:"⠏"}to{content:"⠋"}}.shiki,.shiki span{font-style:var(--shiki-light-font-style);font-weight:var(--shiki-light-font-weight);color:var(--shiki-light);-webkit-text-decoration:var(--shiki-light-text-decoration);text-decoration:var(--shiki-light-text-decoration);background-color:var(--shiki-light-bg)}.dark .shiki,.dark .shiki span{font-style:var(--shiki-dark-font-style);font-weight:var(--shiki-dark-font-weight);color:var(--shiki-dark);-webkit-text-decoration:var(--shiki-dark-text-decoration);text-decoration:var(--shiki-dark-text-decoration);background-color:var(--shiki-dark-bg)}@keyframes ds-sparkle-particle{0%{opacity:1;transform:translate(-50%,-50%)translate(0)}to{opacity:0;transform:translate(-50%, -50%) translate(var(--sparkle-tx,0px), var(--sparkle-ty,0px))}}@keyframes ds-sparkle-particle-fade{0%{opacity:1}to{opacity:0}}@keyframes ds-focus-in{0%{opacity:0;filter:blur(2px);transform:translateY(4px)}to{opacity:1;filter:blur();transform:translateY(0)}}@keyframes ds-pop-in{0%{opacity:0;filter:blur(2px);transform:scale(.94)}70%{transform:scale(1.02)}to{opacity:1;filter:blur();transform:scale(1)}}@layer design-system{.ds-focus-in{animation:ds-focus-in var(--duration-slow) var(--ease-smooth) both}.ds-pop-in{animation:ds-pop-in var(--duration-normal) var(--ease-spring) both}.ds-sparkle-particle{animation:ds-sparkle-particle var(--ds-sparkle-duration,.8s) ease-out 1 forwards;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media (prefers-reduced-motion:reduce){.ds-focus-in,.ds-pop-in{animation:none}.ds-sparkle-particle{animation-name:ds-sparkle-particle-fade}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:oklch(from var(--background) l c h)}::-webkit-scrollbar-thumb{background:oklch(from var(--muted) l c h);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:oklch(from var(--muted-foreground) l c h)}}
+@custom-variant dark (&:is(.dark *));@theme inline{--animate-gateway-flow: gateway-flow 14s linear infinite; --animate-gateway-flow-dotted: gateway-flow-dotted 14s linear infinite; --animate-gateway-flow-dot: gateway-flow-dot 2.8s linear infinite; --font-heading: var(--font-sans); --font-sans: "Geist Variable", ui-sans-serif, sans-serif; --radius-sm: calc(var(--radius) * .6); --radius-md: calc(var(--radius) * .8); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) * 1.4); --radius-2xl: calc(var(--radius) * 1.8); --radius-3xl: calc(var(--radius) * 2.2); --radius-4xl: calc(var(--radius) * 2.6); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-brand-text: var(--brand-text); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-tertiary: var(--tertiary); --color-tertiary-foreground: var(--tertiary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-brand-green: var(--brand-green); --color-brand-fuchsia: var(--brand-fuchsia); --color-brand-red: var(--brand-red); --color-brand-purple: var(--brand-purple); --color-brand-navy: var(--brand-navy); --color-brand-yellow: var(--brand-yellow); --color-brand-arcade-red: var(--brand-arcade-red); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-link: var(--link); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --spacing: var(--spacing);}:root{--radius:.625rem;--spacing:.25rem;--ease-smooth:cubic-bezier(.22, 1, .36, 1);--ease-spring:cubic-bezier(.35, 1.55, .65, 1);--duration-fast:.15s;--duration-normal:.2s;--duration-slow:.28s;--shadow-color:oklch(14.5% 0 0);--shadow-card:0 1px 2px color-mix(in oklch, var(--shadow-color) 5%, transparent), 0 2px 4px color-mix(in oklch, var(--shadow-color) 2%, transparent), 0 0 0 .5px color-mix(in oklch, var(--shadow-color) 8%, transparent);--shadow-card-hover:0 2px 4px color-mix(in oklch, var(--shadow-color) 5%, transparent), 0 6px 12px color-mix(in oklch, var(--shadow-color) 3%, transparent), 0 0 0 .5px color-mix(in oklch, var(--shadow-color) 10%, transparent);--ds-sparkle-duration:.8s;--background:oklch(100% 0 0);--foreground:oklch(14.5% 0 0);--card:oklch(100% 0 0);--card-foreground:oklch(14.5% 0 0);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.5% 0 0);--primary:oklch(92.5% .2326 125.05);--primary-foreground:oklch(20.5% 0 0);--brand-text:oklch(53.2% .157 131.589);--secondary:oklch(97% 0 0);--secondary-foreground:oklch(20.5% 0 0);--tertiary:oklch(47.36% .2914 276.23);--tertiary-foreground:oklch(98.5% 0 0);--muted:oklch(97% 0 0);--muted-foreground:oklch(55.6% 0 0);--accent:oklch(97% 0 0);--accent-foreground:oklch(20.5% 0 0);--destructive:oklch(57.7% .245 27.325);--border:oklch(92.2% 0 0);--input:oklch(92.2% 0 0);--ring:oklch(92.5% .2326 125.05);--link:var(--tertiary);--chart-1:oklch(64.6% .222 41.116);--chart-2:oklch(60% .118 184.704);--chart-3:oklch(39.8% .07 227.392);--chart-4:oklch(82.8% .189 84.429);--chart-5:oklch(76.9% .188 70.08);--sidebar:oklch(98.5% 0 0);--sidebar-foreground:oklch(50% 0 0);--sidebar-primary:oklch(20.5% 0 0);--sidebar-primary-foreground:oklch(20.5% 0 0);--sidebar-accent:oklch(92.5% .2326 125.05);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(92.2% 0 0);--sidebar-ring:oklch(70.8% 0 0);--warning:oklch(75% .1707 63.43);--warning-foreground:oklch(100% 0 0);--success:oklch(64.01% .1751 146.74);--success-foreground:oklch(100% 0 0);--brand-green:oklch(87.19% .254 147.75);--brand-fuchsia:oklch(67.43% .2742 344.98);--brand-red:oklch(62.86% .2568 27.89);--brand-purple:oklch(57.51% .2941 304.75);--brand-navy:oklch(47.36% .2914 276.23);--brand-yellow:oklch(96.81% .21 109.76);--brand-arcade-red:oklch(63.11% .2546 22.82)}.dark{--spacing:.25rem;--shadow-color:oklch(0% 0 0);--background:oklch(14.5% 0 0);--foreground:oklch(98.5% 0 0);--card:oklch(20.5% 0 0);--card-foreground:oklch(98.5% 0 0);--popover:oklch(20.5% 0 0);--popover-foreground:oklch(98.5% 0 0);--primary:oklch(92.5% .2326 125.05);--primary-foreground:oklch(20.5% 0 0);--brand-text:var(--primary);--secondary:oklch(26.9% 0 0);--secondary-foreground:oklch(98.5% 0 0);--tertiary:oklch(47.36% .2914 276.23);--tertiary-foreground:oklch(98.5% 0 0);--muted:oklch(26.9% 0 0);--muted-foreground:oklch(70.8% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--destructive:oklch(70.4% .191 22.216);--border:oklch(100% 0 0/.1);--input:oklch(100% 0 0/.15);--ring:oklch(92.5% .2326 125.05);--link:var(--primary);--chart-1:oklch(73.74% .1669 63.82);--chart-2:oklch(51.71% .1067 166.24);--chart-3:oklch(39.76% .1371 309.62);--chart-4:oklch(46.42% .0848 227.39);--chart-5:oklch(64.5% .246 16.439);--sidebar:oklch(20.5% 0 0);--sidebar-foreground:oklch(98.5% 0 0);--sidebar-primary:oklch(48.8% .243 264.376);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(92.5% .2326 125.05);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(100% 0 0/.1);--sidebar-ring:oklch(55.6% 0 0);--success:oklch(64.01% .1751 146.74);--success-foreground:oklch(100% 0 0);--warning:oklch(75% .1707 63.43);--warning-foreground:oklch(100% 0 0)}@keyframes spinner-fade{0%{opacity:1}to{opacity:0}}@keyframes thin-pulse{0%,to{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}}@keyframes bounce-dots{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes gateway-flow{0%{stroke-dashoffset:0}to{stroke-dashoffset:-120px}}@keyframes gateway-flow-dotted{0%{stroke-dashoffset:0}to{stroke-dashoffset:-112.5px}}@keyframes gateway-flow-dot{0%{stroke-dashoffset:0}to{stroke-dashoffset:-120px}}@keyframes typing{0%,to{opacity:.2}50%{opacity:1}}@keyframes wave{0%,to{transform:scaleY(.5)}50%{transform:scaleY(1)}}@keyframes wave-bars{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes text-blink{0%,to{opacity:1}50%{opacity:.3}}@keyframes shimmer{0%{background-position:200%}to{background-position:-200%}}@keyframes loading-dots{0%,to{opacity:0}50%{opacity:1}}@keyframes braille-spin{0%{content:"⠋"}10%{content:"⠙"}20%{content:"⠹"}30%{content:"⠸"}40%{content:"⠼"}50%{content:"⠴"}60%{content:"⠦"}70%{content:"⠧"}80%{content:"⠇"}90%{content:"⠏"}to{content:"⠋"}}.shiki,.shiki span{font-style:var(--shiki-light-font-style);font-weight:var(--shiki-light-font-weight);color:var(--shiki-light);-webkit-text-decoration:var(--shiki-light-text-decoration);text-decoration:var(--shiki-light-text-decoration);background-color:var(--shiki-light-bg)}.dark .shiki,.dark .shiki span{font-style:var(--shiki-dark-font-style);font-weight:var(--shiki-dark-font-weight);color:var(--shiki-dark);-webkit-text-decoration:var(--shiki-dark-text-decoration);text-decoration:var(--shiki-dark-text-decoration);background-color:var(--shiki-dark-bg)}@keyframes ds-sparkle-particle{0%{opacity:1;transform:translate(-50%,-50%)translate(0)}to{opacity:0;transform:translate(-50%, -50%) translate(var(--sparkle-tx,0px), var(--sparkle-ty,0px))}}@keyframes ds-sparkle-particle-fade{0%{opacity:1}to{opacity:0}}@keyframes ds-focus-in{0%{opacity:0;filter:blur(2px);transform:translateY(4px)}to{opacity:1;filter:blur();transform:translateY(0)}}@keyframes ds-pop-in{0%{opacity:0;filter:blur(2px);transform:scale(.94)}70%{transform:scale(1.02)}to{opacity:1;filter:blur();transform:scale(1)}}@layer design-system{.ds-focus-in{animation:ds-focus-in var(--duration-slow) var(--ease-smooth) both}.ds-pop-in{animation:ds-pop-in var(--duration-normal) var(--ease-spring) both}.ds-sparkle-particle{animation:ds-sparkle-particle var(--ds-sparkle-duration,.8s) ease-out 1 forwards;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media (prefers-reduced-motion:reduce){.ds-focus-in,.ds-pop-in{animation:none}.ds-sparkle-particle{animation-name:ds-sparkle-particle-fade}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:oklch(from var(--background) l c h)}::-webkit-scrollbar-thumb{background:oklch(from var(--muted) l c h);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:oklch(from var(--muted-foreground) l c h)}}@property --scroll-fade-t{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --scroll-fade-b{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --scroll-fade-s{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --scroll-fade-e{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --scroll-fade-mask{syntax:"*";inherits:false}@keyframes scroll-fade-reveal-t{0%{--scroll-fade-t:0px}to{--scroll-fade-t:var(--_scroll-fade-size-t,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10))))}}@keyframes scroll-fade-reveal-b{0%{--scroll-fade-b:var(--_scroll-fade-size-b,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10))))}to{--scroll-fade-b:0px}}@keyframes scroll-fade-reveal-s{0%{--scroll-fade-s:0px}to{--scroll-fade-s:var(--_scroll-fade-size-s,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10))))}}@keyframes scroll-fade-reveal-e{0%{--scroll-fade-e:var(--_scroll-fade-size-e,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10))))}to{--scroll-fade-e:0px}}@utility scroll-fade{--_scroll-fade-size-t: var(--scroll-fade-t-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); --_scroll-fade-size-b: var(--scroll-fade-b-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); --scroll-fade-block: linear-gradient(to bottom, transparent 0, #000 var(--scroll-fade-t,0px), #000 calc(100% - var(--scroll-fade-b,0px)), transparent 100%); -webkit-mask-image: var(--scroll-fade-mask,var(--scroll-fade-block)); mask-image: var(--scroll-fade-mask,var(--scroll-fade-block)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-composite: source-in; mask-composite: intersect; @supports (animation-timeline: scroll()) { animation: scroll-fade-reveal-t 1ms ease-in-out, scroll-fade-reveal-b 1ms ease-in-out; animation-timeline: scroll(self y), scroll(self y); animation-range: 0 var(--scroll-fade-reveal,calc(var(--spacing) * 24)), calc(100% - var(--scroll-fade-reveal,calc(var(--spacing) * 24))) 100%; animation-fill-mode: both; } @supports not (animation-timeline: scroll()) { --scroll-fade-t: var(--_scroll-fade-size-t); --scroll-fade-b: var(--_scroll-fade-size-b); }}@utility scroll-fade-y{--_scroll-fade-size-t: var(--scroll-fade-t-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); --_scroll-fade-size-b: var(--scroll-fade-b-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); --scroll-fade-block: linear-gradient(to bottom, transparent 0, #000 var(--scroll-fade-t,0px), #000 calc(100% - var(--scroll-fade-b,0px)), transparent 100%); -webkit-mask-image: var(--scroll-fade-mask,var(--scroll-fade-block)); mask-image: var(--scroll-fade-mask,var(--scroll-fade-block)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-composite: source-in; mask-composite: intersect; @supports (animation-timeline: scroll()) { animation: scroll-fade-reveal-t 1ms ease-in-out, scroll-fade-reveal-b 1ms ease-in-out; animation-timeline: scroll(self y), scroll(self y); animation-range: 0 var(--scroll-fade-reveal,calc(var(--spacing) * 24)), calc(100% - var(--scroll-fade-reveal,calc(var(--spacing) * 24))) 100%; animation-fill-mode: both; } @supports not (animation-timeline: scroll()) { --scroll-fade-t: var(--_scroll-fade-size-t); --scroll-fade-b: var(--_scroll-fade-size-b); }}@utility scroll-fade-x{--_scroll-fade-size-s: var(--scroll-fade-s-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); --_scroll-fade-size-e: var(--scroll-fade-e-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); --scroll-fade-inline: linear-gradient(to right, transparent 0, #000 var(--scroll-fade-s,0px), #000 calc(100% - var(--scroll-fade-e,0px)), transparent 100%); -webkit-mask-image: var(--scroll-fade-mask,var(--scroll-fade-inline)); mask-image: var(--scroll-fade-mask,var(--scroll-fade-inline)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-composite: source-in; mask-composite: intersect; &:where([dir="rtl"], [dir="rtl"] *) { --scroll-fade-inline: linear-gradient(to left, transparent 0, #000 var(--scroll-fade-s,0px), #000 calc(100% - var(--scroll-fade-e,0px)), transparent 100%); } @supports (animation-timeline: scroll()) { animation: scroll-fade-reveal-s 1ms ease-in-out, scroll-fade-reveal-e 1ms ease-in-out; animation-timeline: scroll(self inline), scroll(self inline); animation-range: 0 var(--scroll-fade-reveal,calc(var(--spacing) * 24)), calc(100% - var(--scroll-fade-reveal,calc(var(--spacing) * 24))) 100%; animation-fill-mode: both; } @supports not (animation-timeline: scroll()) { --scroll-fade-s: var(--_scroll-fade-size-s); --scroll-fade-e: var(--_scroll-fade-size-e); }}@utility scroll-fade-t{--_scroll-fade-size-t: var(--scroll-fade-t-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); --scroll-fade-mask: linear-gradient(to bottom, transparent 0, #000 var(--scroll-fade-t,0px), #000 100%); -webkit-mask-image: var(--scroll-fade-mask); mask-image: var(--scroll-fade-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-composite: source-in; mask-composite: intersect; @supports (animation-timeline: scroll()) { animation: scroll-fade-reveal-t 1ms ease-in-out; animation-timeline: scroll(self y); animation-range: 0 var(--scroll-fade-reveal,calc(var(--spacing) * 24)); animation-fill-mode: both; } @supports not (animation-timeline: scroll()) { --scroll-fade-t: var(--_scroll-fade-size-t); }}@utility scroll-fade-b{--_scroll-fade-size-b: var(--scroll-fade-b-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); --scroll-fade-mask: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--scroll-fade-b,0px)), transparent 100%); -webkit-mask-image: var(--scroll-fade-mask); mask-image: var(--scroll-fade-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-composite: source-in; mask-composite: intersect; @supports (animation-timeline: scroll()) { animation: scroll-fade-reveal-b 1ms ease-in-out; animation-timeline: scroll(self y); animation-range: calc(100% - var(--scroll-fade-reveal,calc(var(--spacing) * 24))) 100%; animation-fill-mode: both; } @supports not (animation-timeline: scroll()) { --scroll-fade-b: var(--_scroll-fade-size-b); }}@utility scroll-fade-l{--_scroll-fade-size-s: var(--scroll-fade-s-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); --scroll-fade-mask: linear-gradient(to right, transparent 0, #000 var(--scroll-fade-s,0px), #000 100%); -webkit-mask-image: var(--scroll-fade-mask); mask-image: var(--scroll-fade-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-composite: source-in; mask-composite: intersect; @supports (animation-timeline: scroll()) { animation: scroll-fade-reveal-s 1ms ease-in-out; animation-timeline: scroll(self x); animation-range: 0 var(--scroll-fade-reveal,calc(var(--spacing) * 24)); animation-fill-mode: both; } @supports not (animation-timeline: scroll()) { --scroll-fade-s: var(--_scroll-fade-size-s); }}@utility scroll-fade-r{--_scroll-fade-size-e: var(--scroll-fade-e-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); --scroll-fade-mask: linear-gradient(to right, #000 0, #000 calc(100% - var(--scroll-fade-e,0px)), transparent 100%); -webkit-mask-image: var(--scroll-fade-mask); mask-image: var(--scroll-fade-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-composite: source-in; mask-composite: intersect; @supports (animation-timeline: scroll()) { animation: scroll-fade-reveal-e 1ms ease-in-out; animation-timeline: scroll(self x); animation-range: calc(100% - var(--scroll-fade-reveal,calc(var(--spacing) * 24))) 100%; animation-fill-mode: both; } @supports not (animation-timeline: scroll()) { --scroll-fade-e: var(--_scroll-fade-size-e); }}@utility scroll-fade-s{--_scroll-fade-size-s: var(--scroll-fade-s-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); --scroll-fade-mask: linear-gradient(to right, transparent 0, #000 var(--scroll-fade-s,0px), #000 100%); -webkit-mask-image: var(--scroll-fade-mask); mask-image: var(--scroll-fade-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-composite: source-in; mask-composite: intersect; &:where([dir="rtl"], [dir="rtl"] *) { --scroll-fade-mask: linear-gradient(to left, transparent 0, #000 var(--scroll-fade-s,0px), #000 100%); } @supports (animation-timeline: scroll()) { animation: scroll-fade-reveal-s 1ms ease-in-out; animation-timeline: scroll(self inline); animation-range: 0 var(--scroll-fade-reveal,calc(var(--spacing) * 24)); animation-fill-mode: both; } @supports not (animation-timeline: scroll()) { --scroll-fade-s: var(--_scroll-fade-size-s); }}@utility scroll-fade-e{--_scroll-fade-size-e: var(--scroll-fade-e-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); --scroll-fade-mask: linear-gradient(to right, #000 0, #000 calc(100% - var(--scroll-fade-e,0px)), transparent 100%); -webkit-mask-image: var(--scroll-fade-mask); mask-image: var(--scroll-fade-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-composite: source-in; mask-composite: intersect; &:where([dir="rtl"], [dir="rtl"] *) { --scroll-fade-mask: linear-gradient(to left, #000 0, #000 calc(100% - var(--scroll-fade-e,0px)), transparent 100%); } @supports (animation-timeline: scroll()) { animation: scroll-fade-reveal-e 1ms ease-in-out; animation-timeline: scroll(self inline); animation-range: calc(100% - var(--scroll-fade-reveal,calc(var(--spacing) * 24))) 100%; animation-fill-mode: both; } @supports not (animation-timeline: scroll()) { --scroll-fade-e: var(--_scroll-fade-size-e); }}@utility scroll-fade-*{--scroll-fade-size: calc(var(--spacing) * --value(integer)); --scroll-fade-size: --value([length], [percentage]);}@utility scroll-fade-t-*{--scroll-fade-t-size: calc(var(--spacing) * --value(integer)); --scroll-fade-t-size: --value([length], [percentage]);}@utility scroll-fade-b-*{--scroll-fade-b-size: calc(var(--spacing) * --value(integer)); --scroll-fade-b-size: --value([length], [percentage]);}@utility scroll-fade-s-*{--scroll-fade-s-size: calc(var(--spacing) * --value(integer)); --scroll-fade-s-size: --value([length], [percentage]);}@utility scroll-fade-e-*{--scroll-fade-e-size: calc(var(--spacing) * --value(integer)); --scroll-fade-e-size: --value([length], [percentage]);}@utility scroll-fade-none{--scroll-fade-mask: none;}