@react-spectrum/s2 0.5.0 → 0.6.0

package/src/Tooltip.tsx

@@ -24,7 +24,6 @@ import {ColorScheme} from '@react-types/provider';
 import {ColorSchemeContext} from './Provider';
 import {createContext, forwardRef, MutableRefObject, ReactNode, useCallback, useContext, useState} from 'react';
 import {DOMRef} from '@react-types/shared';
-import {keyframes} from '../style/style-macro' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 
@@ -44,18 +43,6 @@ export interface TooltipProps extends Omit<AriaTooltipProps, 'children' | 'class
   children?: ReactNode
 }
 
-const slide = keyframes(`
-  from {
-    transform: translate(var(--originX), var(--originY));
-    opacity: 0;
-  }
-
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-`);
-
 const tooltip = style<TooltipRenderProps & {colorScheme: ColorScheme | 'light dark' | null}>({
   ...colorScheme(),
   justifyContent: 'center',
@@ -82,42 +69,38 @@ const tooltip = style<TooltipRenderProps & {colorScheme: ColorScheme | 'light da
   paddingX: 'edge-to-text',
   paddingY: centerPadding(),
   margin: 8,
-  animation: {
-    isEntering: slide,
-    isExiting: slide
-  },
-  animationDuration: {
-    isEntering: 200,
-    isExiting: 200
-  },
-  animationDirection: {
-    isEntering: 'normal',
-    isExiting: 'reverse'
-  },
-  animationTimingFunction: {
+  transition: 'default',
+  transitionDuration: 200,
+  transitionTimingFunction: {
     isExiting: 'in'
   },
-  '--originX': {
-    type: 'marginTop',
-    value: {
-      placement: {
-        top: 0,
-        bottom: 0,
-        left: 4,
-        right: -4
+  translateX: {
+    placement: {
+      left: {
+        isEntering: 4,
+        isExiting: 4
+      },
+      right: {
+        isEntering: -4,
+        isExiting: -4
       }
     }
   },
-  '--originY': {
-    type: 'marginTop',
-    value: {
-      placement: {
-        top: 4,
-        bottom: -4,
-        left: 0,
-        right: -0
+  translateY: {
+    placement: {
+      top: {
+        isEntering: 4,
+        isExiting: 4
+      },
+      bottom: {
+        isEntering: -4,
+        isExiting: -4
       }
     }
+  },
+  opacity: {
+    isEntering: 0,
+    isExiting: 0
   }
 });
 
@@ -142,7 +125,10 @@ const arrowStyles = style<TooltipRenderProps>({
 
 let InternalTooltipTriggerContext = createContext<TooltipTriggerProps>({});
 
-function Tooltip(props: TooltipProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * Display container for Tooltip content. Has a directional arrow dependent on its placement.
+ */
+export const Tooltip = forwardRef(function Tooltip(props: TooltipProps, ref: DOMRef<HTMLDivElement>) {
   let {children, UNSAFE_style, UNSAFE_className = ''} = props;
   let domRef = useDOMRef(ref);
   let {
@@ -193,7 +179,7 @@ function Tooltip(props: TooltipProps, ref: DOMRef<HTMLDivElement>) {
       )}
     </AriaTooltip>
   );
-}
+});
 
 /**
  * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing
@@ -227,13 +213,6 @@ export function TooltipTrigger(props: TooltipTriggerProps) {
 }
 
 
-/**
- * Display container for Tooltip content. Has a directional arrow dependent on its placement.
- */
-let _Tooltip = forwardRef(Tooltip);
-export {_Tooltip as Tooltip};
-
-
 // This is purely so that storybook generates the types for both Menu and MenuTrigger
 interface ICombined extends Omit<TooltipProps, 'placement'>, TooltipTriggerProps {}
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/src/bar-utils.ts

@@ -10,9 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {centerPadding, fieldInput} from './style-utils' with {type: 'macro'};
+import {centerPadding, fieldInput, staticColor} from './style-utils' with {type: 'macro'};
 
 export const bar = () => ({
+  ...staticColor(),
   position: 'relative',
   display: 'grid',
   gridTemplateColumns: {
@@ -64,15 +65,7 @@ export const track = () => ({
   borderRadius: 'full',
   backgroundColor: {
     default: 'gray-300',
-    staticColor: {
-      white: {
-        default: 'transparent-white-100'
-      },
-      // TODO: Is there a black static color in S2?
-      black: {
-        default: 'transparent-black-400'
-      }
-    },
+    isStaticColor: 'transparent-overlay-300',
     forcedColors: 'ButtonFace'
   },
   outlineWidth: {

package/src/index.ts

@@ -11,6 +11,7 @@
  */
 
 export {Accordion, AccordionContext} from './Accordion';
+export {ActionBar, ActionBarContext} from './ActionBar';
 export {ActionButton, ActionButtonContext} from './ActionButton';
 export {ActionButtonGroup, ActionButtonGroupContext} from './ActionButtonGroup';
 export {ActionMenu, ActionMenuContext} from './ActionMenu';
@@ -82,6 +83,7 @@ export {Collection} from 'react-aria-components';
 export {FileTrigger} from 'react-aria-components';
 
 export type {AccordionProps} from './Accordion';
+export type {ActionBarProps} from './ActionBar';
 export type {ActionButtonProps} from './ActionButton';
 export type {ActionButtonGroupProps} from './ActionButtonGroup';
 export type {ActionMenuProps} from './ActionMenu';

package/src/style-utils.ts

@@ -83,14 +83,7 @@ export const fieldLabel = () => ({
   color: {
     default: 'neutral-subdued',
     isDisabled: 'disabled',
-    staticColor: {
-      white: {
-        default: 'transparent-white-700'
-      },
-      black: {
-        default: 'transparent-black-900'
-      }
-    },
+    isStaticColor: 'transparent-overlay-1000',
     forcedColors: 'ButtonText'
   }
 } as const);
@@ -131,6 +124,20 @@ export const colorScheme = () => ({
   }
 } as const);
 
+export function staticColor() {
+  return {
+    '--s2-container-bg': {
+      type: 'backgroundColor',
+      value: {
+        staticColor: {
+          black: 'white',
+          white: 'black'
+        }
+      }
+    }
+  } as const;
+}
+
 const allowedOverrides = [
   'margin',
   'marginStart',

package/style/dist/main.cjs

@@ -12,6 +12,7 @@ $parcel$export(module.exports, "focusRing", () => $68f77cfae04dca88$export$8e245
 $parcel$export(module.exports, "baseColor", () => $7dddb03c6ef7d79c$exports.baseColor);
 $parcel$export(module.exports, "edgeToText", () => $7dddb03c6ef7d79c$exports.edgeToText);
 $parcel$export(module.exports, "lightDark", () => $7dddb03c6ef7d79c$exports.lightDark);
+$parcel$export(module.exports, "linearGradient", () => $7dddb03c6ef7d79c$exports.linearGradient);
 $parcel$export(module.exports, "colorMix", () => $7dddb03c6ef7d79c$exports.colorMix);
 $parcel$export(module.exports, "style", () => $7dddb03c6ef7d79c$exports.style);
 /*

package/style/dist/main.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;AAOM,SAAS,0CAAK,EAAU;IAC7B,OAAO,CAAC,CAAC,EAAE,CAAA,GAAA,8BAAW,EAAE,IAAI,CAAC,CAAC;AAChC;AAEO,SAAS,0CAAM,EAAU;IAC9B,OAAO,CAAC,CAAC,EAAE,CAAA,GAAA,+BAAY,EAAE,IAAI,CAAC,CAAC;AACjC;AAEO,SAAS,0CAAa,IAAY,EAAE,YAAqB;IAC9D,OAAO,CAAC,CAAC,EAAE,CAAA,GAAA,sCAAmB,EAAE,MAAM,cAAc,CAAC,CAAC;AACxD;AAEO,MAAM,4CAAY,IAAO,CAAA;QAC9B,cAAc;YACZ,SAAS;YACT,gBAAgB;QAClB;QACA,cAAc;QACd,cAAc;QACd,eAAe;IACjB,CAAA","sources":["packages/@react-spectrum/s2/style/index.ts"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {fontRelative as internalFontRelative, size as internalSize, space as internalSpace} from './spectrum-theme';\nexport {baseColor, edgeToText, lightDark, colorMix, style} from './spectrum-theme';\nexport type {StyleString} from './types';\n\n// Wrap these functions in arbitrary value syntax when called from the outside.\nexport function size(px: number): `[${string}]` {\n  return `[${internalSize(px)}]`;\n}\n\nexport function space(px: number): `[${string}]` {\n  return `[${internalSpace(px)}]`;\n}\n\nexport function fontRelative(base: number, baseFontSize?: number): `[${string}]` {\n  return `[${internalFontRelative(base, baseFontSize)}]`;\n}\n\nexport const focusRing = () => ({\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid'\n  },\n  outlineColor: 'focus-ring',\n  outlineWidth: 2,\n  outlineOffset: 2\n} as const);\n"],"names":[],"version":3,"file":"main.cjs.map","sourceRoot":"../../../../../"}
+{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;AAOM,SAAS,0CAAK,EAAU;IAC7B,OAAO,CAAC,CAAC,EAAE,CAAA,GAAA,8BAAW,EAAE,IAAI,CAAC,CAAC;AAChC;AAEO,SAAS,0CAAM,EAAU;IAC9B,OAAO,CAAC,CAAC,EAAE,CAAA,GAAA,+BAAY,EAAE,IAAI,CAAC,CAAC;AACjC;AAEO,SAAS,0CAAa,IAAY,EAAE,YAAqB;IAC9D,OAAO,CAAC,CAAC,EAAE,CAAA,GAAA,sCAAmB,EAAE,MAAM,cAAc,CAAC,CAAC;AACxD;AAEO,MAAM,4CAAY,IAAO,CAAA;QAC9B,cAAc;YACZ,SAAS;YACT,gBAAgB;QAClB;QACA,cAAc;QACd,cAAc;QACd,eAAe;IACjB,CAAA","sources":["packages/@react-spectrum/s2/style/index.ts"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {fontRelative as internalFontRelative, size as internalSize, space as internalSpace} from './spectrum-theme';\nexport {baseColor, edgeToText, lightDark, linearGradient, colorMix, style} from './spectrum-theme';\nexport type {StyleString} from './types';\n\n// Wrap these functions in arbitrary value syntax when called from the outside.\nexport function size(px: number): `[${string}]` {\n  return `[${internalSize(px)}]`;\n}\n\nexport function space(px: number): `[${string}]` {\n  return `[${internalSpace(px)}]`;\n}\n\nexport function fontRelative(base: number, baseFontSize?: number): `[${string}]` {\n  return `[${internalFontRelative(base, baseFontSize)}]`;\n}\n\nexport const focusRing = () => ({\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid'\n  },\n  outlineColor: 'focus-ring',\n  outlineWidth: 2,\n  outlineOffset: 2\n} as const);\n"],"names":[],"version":3,"file":"main.cjs.map","sourceRoot":"../../../../../"}

package/style/dist/module.mjs

@@ -1,4 +1,4 @@
-import {baseColor as $468034641bb536ce$export$49bbad2a916ab57c, colorMix as $468034641bb536ce$export$9b476054b78b89cd, edgeToText as $468034641bb536ce$export$17b63977b35bb6d2, fontRelative as $468034641bb536ce$export$ba024f4caf693d15, lightDark as $468034641bb536ce$export$d19e682d444755ed, size as $468034641bb536ce$export$346677f925de839c, space as $468034641bb536ce$export$a941ed4b947d12f8, style as $468034641bb536ce$export$1d567c320f4763bc} from "./spectrum-theme.mjs";
+import {baseColor as $468034641bb536ce$export$49bbad2a916ab57c, colorMix as $468034641bb536ce$export$9b476054b78b89cd, edgeToText as $468034641bb536ce$export$17b63977b35bb6d2, fontRelative as $468034641bb536ce$export$ba024f4caf693d15, lightDark as $468034641bb536ce$export$d19e682d444755ed, linearGradient as $468034641bb536ce$export$46def8197cf4dd4c, size as $468034641bb536ce$export$346677f925de839c, space as $468034641bb536ce$export$a941ed4b947d12f8, style as $468034641bb536ce$export$1d567c320f4763bc} from "./spectrum-theme.mjs";
 
 /*
  * Copyright 2024 Adobe. All rights reserved.
@@ -31,5 +31,5 @@ const $b308eef0abc42945$export$8e24544ddba725ee = ()=>({
     });
 
 
-export {$b308eef0abc42945$export$346677f925de839c as size, $b308eef0abc42945$export$a941ed4b947d12f8 as space, $b308eef0abc42945$export$ba024f4caf693d15 as fontRelative, $b308eef0abc42945$export$8e24544ddba725ee as focusRing, $468034641bb536ce$export$49bbad2a916ab57c as baseColor, $468034641bb536ce$export$17b63977b35bb6d2 as edgeToText, $468034641bb536ce$export$d19e682d444755ed as lightDark, $468034641bb536ce$export$9b476054b78b89cd as colorMix, $468034641bb536ce$export$1d567c320f4763bc as style};
+export {$b308eef0abc42945$export$346677f925de839c as size, $b308eef0abc42945$export$a941ed4b947d12f8 as space, $b308eef0abc42945$export$ba024f4caf693d15 as fontRelative, $b308eef0abc42945$export$8e24544ddba725ee as focusRing, $468034641bb536ce$export$49bbad2a916ab57c as baseColor, $468034641bb536ce$export$17b63977b35bb6d2 as edgeToText, $468034641bb536ce$export$d19e682d444755ed as lightDark, $468034641bb536ce$export$46def8197cf4dd4c as linearGradient, $468034641bb536ce$export$9b476054b78b89cd as colorMix, $468034641bb536ce$export$1d567c320f4763bc as style};
 //# sourceMappingURL=module.mjs.map

package/style/dist/module.mjs.map

@@ -1 +1 @@
-{"mappings":";;AAAA;;;;;;;;;;CAUC;AAOM,SAAS,0CAAK,EAAU;IAC7B,OAAO,CAAC,CAAC,EAAE,CAAA,GAAA,yCAAW,EAAE,IAAI,CAAC,CAAC;AAChC;AAEO,SAAS,0CAAM,EAAU;IAC9B,OAAO,CAAC,CAAC,EAAE,CAAA,GAAA,yCAAY,EAAE,IAAI,CAAC,CAAC;AACjC;AAEO,SAAS,0CAAa,IAAY,EAAE,YAAqB;IAC9D,OAAO,CAAC,CAAC,EAAE,CAAA,GAAA,yCAAmB,EAAE,MAAM,cAAc,CAAC,CAAC;AACxD;AAEO,MAAM,4CAAY,IAAO,CAAA;QAC9B,cAAc;YACZ,SAAS;YACT,gBAAgB;QAClB;QACA,cAAc;QACd,cAAc;QACd,eAAe;IACjB,CAAA","sources":["packages/@react-spectrum/s2/style/index.ts"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {fontRelative as internalFontRelative, size as internalSize, space as internalSpace} from './spectrum-theme';\nexport {baseColor, edgeToText, lightDark, colorMix, style} from './spectrum-theme';\nexport type {StyleString} from './types';\n\n// Wrap these functions in arbitrary value syntax when called from the outside.\nexport function size(px: number): `[${string}]` {\n  return `[${internalSize(px)}]`;\n}\n\nexport function space(px: number): `[${string}]` {\n  return `[${internalSpace(px)}]`;\n}\n\nexport function fontRelative(base: number, baseFontSize?: number): `[${string}]` {\n  return `[${internalFontRelative(base, baseFontSize)}]`;\n}\n\nexport const focusRing = () => ({\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid'\n  },\n  outlineColor: 'focus-ring',\n  outlineWidth: 2,\n  outlineOffset: 2\n} as const);\n"],"names":[],"version":3,"file":"module.mjs.map","sourceRoot":"../../../../../"}
+{"mappings":";;AAAA;;;;;;;;;;CAUC;AAOM,SAAS,0CAAK,EAAU;IAC7B,OAAO,CAAC,CAAC,EAAE,CAAA,GAAA,yCAAW,EAAE,IAAI,CAAC,CAAC;AAChC;AAEO,SAAS,0CAAM,EAAU;IAC9B,OAAO,CAAC,CAAC,EAAE,CAAA,GAAA,yCAAY,EAAE,IAAI,CAAC,CAAC;AACjC;AAEO,SAAS,0CAAa,IAAY,EAAE,YAAqB;IAC9D,OAAO,CAAC,CAAC,EAAE,CAAA,GAAA,yCAAmB,EAAE,MAAM,cAAc,CAAC,CAAC;AACxD;AAEO,MAAM,4CAAY,IAAO,CAAA;QAC9B,cAAc;YACZ,SAAS;YACT,gBAAgB;QAClB;QACA,cAAc;QACd,cAAc;QACd,eAAe;IACjB,CAAA","sources":["packages/@react-spectrum/s2/style/index.ts"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {fontRelative as internalFontRelative, size as internalSize, space as internalSpace} from './spectrum-theme';\nexport {baseColor, edgeToText, lightDark, linearGradient, colorMix, style} from './spectrum-theme';\nexport type {StyleString} from './types';\n\n// Wrap these functions in arbitrary value syntax when called from the outside.\nexport function size(px: number): `[${string}]` {\n  return `[${internalSize(px)}]`;\n}\n\nexport function space(px: number): `[${string}]` {\n  return `[${internalSpace(px)}]`;\n}\n\nexport function fontRelative(base: number, baseFontSize?: number): `[${string}]` {\n  return `[${internalFontRelative(base, baseFontSize)}]`;\n}\n\nexport const focusRing = () => ({\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid'\n  },\n  outlineColor: 'focus-ring',\n  outlineWidth: 2,\n  outlineOffset: 2\n} as const);\n"],"names":[],"version":3,"file":"module.mjs.map","sourceRoot":"../../../../../"}

package/style/dist/spectrum-theme.cjs

@@ -9,6 +9,7 @@ function $parcel$export(e, n, v, s) {
 $parcel$export(module.exports, "baseColor", () => $7dddb03c6ef7d79c$export$49bbad2a916ab57c);
 $parcel$export(module.exports, "lightDark", () => $7dddb03c6ef7d79c$export$d19e682d444755ed);
 $parcel$export(module.exports, "colorMix", () => $7dddb03c6ef7d79c$export$9b476054b78b89cd);
+$parcel$export(module.exports, "linearGradient", () => $7dddb03c6ef7d79c$export$46def8197cf4dd4c);
 $parcel$export(module.exports, "fontRelative", () => $7dddb03c6ef7d79c$export$ba024f4caf693d15);
 $parcel$export(module.exports, "edgeToText", () => $7dddb03c6ef7d79c$export$17b63977b35bb6d2);
 $parcel$export(module.exports, "space", () => $7dddb03c6ef7d79c$export$a941ed4b947d12f8);
@@ -440,6 +441,19 @@ const $7dddb03c6ef7d79c$var$color = {
     "transparent-black-800": "rgba(0, 0, 0, 0.84)",
     "transparent-black-900": "rgba(0, 0, 0, 0.93)",
     "transparent-black-1000": "rgb(0, 0, 0)",
+    "transparent-overlay-25": "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0)",
+    "transparent-overlay-50": "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.04)",
+    "transparent-overlay-75": "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.07)",
+    "transparent-overlay-100": "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.11)",
+    "transparent-overlay-200": "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.14)",
+    "transparent-overlay-300": "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.17)",
+    "transparent-overlay-400": "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.21)",
+    "transparent-overlay-500": "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.39)",
+    "transparent-overlay-600": "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.51)",
+    "transparent-overlay-700": "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.66)",
+    "transparent-overlay-800": "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.85)",
+    "transparent-overlay-900": "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.94)",
+    "transparent-overlay-1000": "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 1)",
     // High contrast mode.
     Background: 'Background',
     ButtonBorder: 'ButtonBorder',
@@ -477,6 +491,26 @@ function $7dddb03c6ef7d79c$export$d19e682d444755ed(light, dark) {
 function $7dddb03c6ef7d79c$export$9b476054b78b89cd(a, b, percent) {
     return `[color-mix(in srgb, ${$7dddb03c6ef7d79c$var$parseColor(a)}, ${$7dddb03c6ef7d79c$var$parseColor(b)} ${percent}%)]`;
 }
+function $7dddb03c6ef7d79c$export$46def8197cf4dd4c(angle, ...tokens) {
+    // Generate @property rules for each gradient stop color. This allows the gradient to be animated.
+    let propertyDefinitions = [];
+    for(let i = 0; i < tokens.length; i++)propertyDefinitions.push(`@property --g${i} {
+  syntax: '<color>';
+  initial-value: #0000;
+  inherits: false;
+}`);
+    if (this && typeof this.addAsset === 'function') this.addAsset({
+        type: 'css',
+        content: propertyDefinitions.join('\n\n')
+    });
+    return [
+        {
+            type: 'linear-gradient',
+            angle: angle,
+            stops: tokens
+        }
+    ];
+}
 function $7dddb03c6ef7d79c$var$generateSpacing(px) {
     let res = {};
     for (let p of px)res[p] = $7dddb03c6ef7d79c$var$pxToRem(p);
@@ -654,8 +688,10 @@ let $7dddb03c6ef7d79c$var$gridTrackSize = (value)=>{
     return value in $7dddb03c6ef7d79c$var$baseSpacing ? $7dddb03c6ef7d79c$var$baseSpacing[value] : value;
 };
 const $7dddb03c6ef7d79c$var$transitionProperty = {
-    default: 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter',
-    colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
+    // var(--gp) is generated by the backgroundImage property when setting a gradient.
+    // It includes a list of all of the custom properties used for each color stop.
+    default: 'color, background-color, var(--gp), border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter',
+    colors: 'color, background-color, var(--gp), border-color, text-decoration-color, fill, stroke',
     opacity: 'opacity',
     shadow: 'box-shadow',
     transform: 'transform, translate, scale, rotate',
@@ -914,7 +950,8 @@ const $7dddb03c6ef7d79c$export$1d567c320f4763bc = (0, $b3643cb9d2948e30$exports.
             title: "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
             body: "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
             detail: "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
-            code: "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))"
+            code: "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+            auto: "lch(from self(backgroundColor, var(--s2-container-bg)) calc((49.44 - l) * infinity) 0 0 / 1)"
         }),
         backgroundColor: (0, $b3643cb9d2948e30$exports.createColorProperty)({
             ...$7dddb03c6ef7d79c$var$color,
@@ -1129,7 +1166,14 @@ const $7dddb03c6ef7d79c$export$1d567c320f4763bc = (0, $b3643cb9d2948e30$exports.
         rotate: (0, $b3643cb9d2948e30$exports.createArbitraryProperty)((value, property)=>({
                 [property]: typeof value === 'number' ? `${value}deg` : value
             })),
-        scale: (0, $b3643cb9d2948e30$exports.createArbitraryProperty)(),
+        scaleX: (0, $b3643cb9d2948e30$exports.createArbitraryProperty)((value)=>({
+                '--scaleX': value,
+                scale: 'var(--scaleX, 1) var(--scaleY, 1)'
+            })),
+        scaleY: (0, $b3643cb9d2948e30$exports.createArbitraryProperty)((value)=>({
+                '--scaleY': value,
+                scale: 'var(--scaleX, 1) var(--scaleY, 1)'
+            })),
         transform: (0, $b3643cb9d2948e30$exports.createArbitraryProperty)(),
         position: [
             'absolute',
@@ -1318,7 +1362,26 @@ const $7dddb03c6ef7d79c$export$1d567c320f4763bc = (0, $b3643cb9d2948e30$exports.
             'dark',
             'light dark'
         ],
-        backgroundImage: (0, $b3643cb9d2948e30$exports.createArbitraryProperty)(),
+        backgroundImage: (0, $b3643cb9d2948e30$exports.createArbitraryProperty)((value, property)=>{
+            if (typeof value === 'string') return {
+                [property]: value
+            };
+            else if (Array.isArray(value) && value[0]?.type === 'linear-gradient') {
+                let values = {
+                    [property]: `linear-gradient(${value[0].angle}, ${value[0].stops.map(([, stop], i)=>`var(--g${i}) ${stop}%`)})`
+                };
+                // Create a CSS var for each color stop so the gradient can be transitioned.
+                // These are registered via @property in the `linearGradient` macro.
+                let properties = [];
+                value[0].stops.forEach(([color], i)=>{
+                    properties.push(`--g${i}`);
+                    values[`--g${i}`] = $7dddb03c6ef7d79c$var$parseColor(color);
+                });
+                // This is used by transition-property so we automatically transition all of the color stops.
+                values['--gp'] = properties.join(', ');
+                return values;
+            } else throw new Error('Unexpected backgroundImage value: ' + JSON.stringify(value));
+        }),
         // TODO: do we need separate x and y properties?
         backgroundPosition: [
             'bottom',
@@ -1890,6 +1953,10 @@ const $7dddb03c6ef7d79c$export$1d567c320f4763bc = (0, $b3643cb9d2948e30$exports.
             'translateX',
             'translateY'
         ],
+        scale: [
+            'scaleX',
+            'scaleY'
+        ],
         inset: [
             'top',
             'bottom',