@dynatrace/strato-components 0.85.70 → 0.85.110

package/content/progress/ProgressBarValue.sty.d.ts

@@ -1,24 +1,4 @@
 export declare const progressBarValueCSS: import("@vanilla-extract/recipes").RuntimeFn<{
-    variant: {
-        onAccent: {
-            color: string;
-        };
-        primary: {
-            color: string;
-        };
-        success: {
-            color: string;
-        };
-        warning: {
-            color: string;
-        };
-        critical: {
-            color: string;
-        };
-        neutral: {
-            color: string;
-        };
-    };
     size: {
         condensed: {};
         default: {

package/content/progress/ProgressBarValue.sty.js

@@ -20,7 +20,8 @@ __export(ProgressBarValue_css_exports, {
   progressBarValueCSS: () => progressBarValueCSS
 });
 module.exports = __toCommonJS(ProgressBarValue_css_exports);
+var import_ProgressBar_css_ts_vanilla = require("./ProgressBar.css");
 var import_ellipsis_css_ts_vanilla = require("../../styles/ellipsis.css");
 var import_ProgressBarValue_css_ts_vanilla = require("./ProgressBarValue.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var progressBarValueCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ri4i7o0", variantClassNames: { variant: { onAccent: "_1ri4i7o1", primary: "_1ri4i7o2", success: "_1ri4i7o3", warning: "_1ri4i7o4", critical: "_1ri4i7o5", neutral: "_1ri4i7o6" }, size: { condensed: "_1ri4i7o7", "default": "_1ri4i7o8" }, childIsText: { true: "_1ri4i7o9", false: "_1ri4i7oa" } }, defaultVariants: {}, compoundVariants: [[{ size: "condensed", childIsText: true }, "_1ri4i7ob oqqp1n0"]] });
+var progressBarValueCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ri4i7o0-0-85-110", variantClassNames: { size: { condensed: "_1ri4i7o1-0-85-110", "default": "_1ri4i7o2-0-85-110" }, childIsText: { true: "_1ri4i7o3-0-85-110", false: "_1ri4i7o4-0-85-110" } }, defaultVariants: {}, compoundVariants: [[{ size: "condensed", childIsText: true }, "_1ri4i7o5-0-85-110 _oqqp1n0-0-85-110"]] });

package/content/progress/ProgressCircle.css

@@ -1,4 +1,4 @@
-@keyframes kvldjh0 {
+@keyframes _kvldjh3-0-85-110 {
   0% {
     transform: rotate(0deg);
   }
@@ -6,47 +6,79 @@
     transform: rotate(360deg);
   }
 }
-.kvldjh1 {
+._kvldjh4-0-85-110 {
   display: inline-block;
-  color: var(--_17bwkb02);
 }
-.kvldjh2 {
+._kvldjh5-0-85-110 {
   display: block;
   transform: rotate(-90deg);
 }
-.kvldjh3 {
-  stroke: currentColor;
+._kvldjh6-0-85-110 {
+  stroke: var(--_kvldjh2-0-85-110);
   transform-origin: center;
 }
-.kvldjh4 {
+._kvldjh7-0-85-110 {
   stroke-dasharray: 90 360;
   transform-origin: 50% 50%;
-  animation-name: kvldjh0;
+  animation-name: _kvldjh3-0-85-110;
   animation-duration: var(--dt-timings-slow-gentle, 800ms);
   animation-timing-function: cubic-bezier(0.5, 0.15, 0.5, 0.8);
   animation-iteration-count: infinite;
 }
-.kvldjh5 {
+._kvldjh8-0-85-110 {
   animation-duration: var(--dt-timings-fast-moderate, 200ms);
   transition-property: stroke-dashoffset;
 }
-.kvldjh6 {
-  stroke: var(--dt-colors-border-neutral-default, #d2d3e1);
+._kvldjh9-0-85-110 {
+  stroke: var(--_kvldjh1-0-85-110);
 }
-.kvldjh7 {
-  stroke: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
-}
-.kvldjhd {
+._kvldjha-0-85-110 {
   display: flex;
   flex-direction: column;
   align-items: center;
+  color: var(--_kvldjh0-0-85-110);
 }
-.kvldjhe {
+._kvldjhb-0-85-110 {
   gap: var(--dt-spacings-size-8, 8px);
 }
-.kvldjhf {
+._kvldjhc-0-85-110 {
   gap: var(--dt-spacings-size-12, 12px);
 }
-.kvldjhg {
-  color: var(--_6levse0);
+._kvldjhd-0-85-110 {
+  --_kvldjh2-0-85-110: var(--dt-colors-border-critical-accent, #b80031);
+}
+._kvldjhe-0-85-110 {
+  --_kvldjh2-0-85-110: var(--dt-colors-border-neutral-accent, #545587);
+}
+._kvldjhf-0-85-110 {
+  --_kvldjh2-0-85-110: var(--dt-colors-border-primary-accent, #454cc9);
+}
+._kvldjhg-0-85-110 {
+  --_kvldjh2-0-85-110: var(--dt-colors-border-success-accent, #2c6360);
+}
+._kvldjhh-0-85-110 {
+  --_kvldjh2-0-85-110: var(--dt-colors-border-warning-accent, #805100);
+}
+._kvldjhi-0-85-110 {
+  --_kvldjh0-0-85-110: var(--dt-colors-text-neutral-default, #2b2a58);
+  --_kvldjh1-0-85-110: var(--dt-colors-border-neutral-default, #d2d3e1);
+}
+._kvldjhj-0-85-110 {
+  --_kvldjh0-0-85-110: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_kvldjh1-0-85-110: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
+}
+._kvldjhk-0-85-110 {
+  --_kvldjh2-0-85-110: var(--dt-colors-border-primary-on-accent-default, #f4f4fb);
+}
+._kvldjhl-0-85-110 {
+  --_kvldjh2-0-85-110: var(--dt-colors-border-success-on-accent-default, #f1f4f4);
+}
+._kvldjhm-0-85-110 {
+  --_kvldjh2-0-85-110: var(--dt-colors-border-warning-on-accent-default, #272025);
+}
+._kvldjhn-0-85-110 {
+  --_kvldjh2-0-85-110: var(--dt-colors-border-critical-on-accent-default, #f9f1f3);
+}
+._kvldjho-0-85-110 {
+  --_kvldjh2-0-85-110: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
 }

package/content/progress/ProgressCircle.d.ts

@@ -34,8 +34,14 @@ export interface ProgressCircleProps extends WithChildren, DOMProps, AriaLabelin
     /**
      * Controls the appearance of the progress.
      * @defaultValue 'primary'
+     * @deprecated Will be removed and replaced by the color prop.
      */
     variant?: RoleVariantType;
+    /**
+     * Controls the color of the progress.
+     * @defaultValue 'primary' or a container's color.
+     */
+    color?: 'neutral' | 'primary' | 'success' | 'warning' | 'critical';
     /**
      * The aria-valuetext attribute defines the human-readable text alternative of aria-valuenow for a range widget.
      * Default the value as percentage will be provided. If the value is not a percentage please provide the aria-valuetext.

package/content/progress/ProgressCircle.js

@@ -36,7 +36,7 @@ var import_useProgressAriaProps = require("./hooks/useProgressAriaProps.js");
 var import_ProgressCircle_css = require("./ProgressCircle.sty.js");
 var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
 var import_useSafeForwardProps = require("../../core/hooks/useSafeForwardProps.js");
-var import_colorUtils_css = require("../../styles/colorUtils.sty.js");
+var import_Container = require("../../layouts/container/Container.js");
 var import_container_css = require("../../styles/container.sty.js");
 var import_textStyle_css = require("../../styles/textStyle.sty.js");
 const progressCircleSizes = {
@@ -51,7 +51,8 @@ const ProgressCircle = (0, import_react.forwardRef)(
       min = 0,
       max = 100,
       size = "large",
-      variant = "primary",
+      variant,
+      color,
       children,
       id: propId,
       "aria-valuetext": ariaValuetext,
@@ -68,6 +69,17 @@ const ProgressCircle = (0, import_react.forwardRef)(
       max,
       ariaValuetext
     );
+    const containerColoring = (0, import_Container.useContainerColoring)();
+    const cascadedVariant = variant !== void 0 && variant === "onAccent" ? "accent" : containerColoring.variant;
+    const derivedVariant = cascadedVariant === "accent" ? "accent" : "default";
+    const fallbackColor = containerColoring.default ? "primary" : containerColoring.color;
+    let derivedColor = fallbackColor;
+    if (variant !== void 0 && variant !== "onAccent") {
+      derivedColor = variant;
+    }
+    if (color !== void 0) {
+      derivedColor = color;
+    }
     const ariaLabelingProps = (0, import_useAriaLabelingProps.useAriaLabelingProps)(remainingProps);
     const forwardProps = (0, import_useSafeForwardProps.useSafeForwardProps)(remainingProps, ariaLabelingProps);
     const generatedId = (0, import_react.useId)();
@@ -98,10 +110,14 @@ const ProgressCircle = (0, import_react.forwardRef)(
         className: (0, import_clsx.default)(
           consumerClassName,
           (0, import_container_css.containerColorsCSS)({
-            color: "neutral",
-            variant: variant === "onAccent" ? "accent" : "default"
+            color: derivedColor,
+            variant: derivedVariant
           }),
-          (0, import_ProgressCircle_css.progressCircleContainerCSS)({ size })
+          (0, import_ProgressCircle_css.progressCircleContainerCSS)({
+            size,
+            color: derivedColor,
+            variant: derivedVariant
+          })
         ),
         style: consumerStyle,
         ...forwardProps
@@ -110,10 +126,7 @@ const ProgressCircle = (0, import_react.forwardRef)(
         "span",
         {
           id,
-          className: (0, import_clsx.default)(
-            (0, import_colorUtils_css.colorUtilsCSS)({ color: variant, variant: "accent" }),
-            import_ProgressCircle_css.progressCircleRootCSS
-          ),
+          className: (0, import_clsx.default)(import_ProgressCircle_css.progressCircleRootCSS),
           style: {
             height: `${progressCircleSizes[size]}px`,
             width: `${progressCircleSizes[size]}px`
@@ -125,7 +138,7 @@ const ProgressCircle = (0, import_react.forwardRef)(
         /* @__PURE__ */ import_react.default.createElement(
           "svg",
           {
-            className: import_ProgressCircle_css.ProgressCircleSVGCSS,
+            className: import_ProgressCircle_css.progressCircleSvgCss,
             viewBox: `0 0 ${progressCircleSizes[size]} ${progressCircleSizes[size]}`,
             width: "100%",
             height: "100%"
@@ -134,7 +147,7 @@ const ProgressCircle = (0, import_react.forwardRef)(
             "circle",
             {
               fill: "none",
-              className: (0, import_clsx.default)((0, import_ProgressCircle_css.progressCircleBackgroundCSS)({ variant })),
+              className: (0, import_clsx.default)(import_ProgressCircle_css.progressCircleBackgroundCSS),
               cx: progressCircleSizes[size] / 2,
               cy: progressCircleSizes[size] / 2,
               r: (progressCircleSizes[size] - progressCircleThickness) / 2,
@@ -160,7 +173,6 @@ const ProgressCircle = (0, import_react.forwardRef)(
         "label",
         {
           className: (0, import_clsx.default)(
-            import_ProgressCircle_css.progressCircleChildCSS,
             (0, import_textStyle_css.textStyleCSS)({ textStyle: size === "small" ? "small" : "base" })
           ),
           htmlFor: id

package/content/progress/ProgressCircle.sty.d.ts

@@ -1,5 +1,5 @@
 export declare const progressCircleRootCSS: string;
-export declare const ProgressCircleSVGCSS: string;
+export declare const progressCircleSvgCss: string;
 export declare const progressCircleCSS: import("@vanilla-extract/recipes").RuntimeFn<{
     indeterminate: {
         true: {
@@ -16,18 +16,7 @@ export declare const progressCircleCSS: import("@vanilla-extract/recipes").Runti
         };
     };
 }>;
-export declare const progressCircleBackgroundCSS: import("@vanilla-extract/recipes").RuntimeFn<{
-    variant: {
-        onAccent: {
-            stroke: string;
-        };
-        primary: {};
-        success: {};
-        warning: {};
-        critical: {};
-        neutral: {};
-    };
-}>;
+export declare const progressCircleBackgroundCSS: string;
 export declare const progressCircleContainerCSS: import("@vanilla-extract/recipes").RuntimeFn<{
     size: {
         small: {
@@ -37,5 +26,43 @@ export declare const progressCircleContainerCSS: import("@vanilla-extract/recipe
             gap: string;
         };
     };
+    color: {
+        critical: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        neutral: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        primary: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        success: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        warning: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+    };
+    variant: {
+        default: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        accent: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+    };
 }>;
-export declare const progressCircleChildCSS: string;

package/content/progress/ProgressCircle.sty.js

@@ -17,21 +17,17 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var ProgressCircle_css_exports = {};
 __export(ProgressCircle_css_exports, {
-  ProgressCircleSVGCSS: () => ProgressCircleSVGCSS,
   progressCircleBackgroundCSS: () => progressCircleBackgroundCSS,
   progressCircleCSS: () => progressCircleCSS,
-  progressCircleChildCSS: () => progressCircleChildCSS,
   progressCircleContainerCSS: () => progressCircleContainerCSS,
-  progressCircleRootCSS: () => progressCircleRootCSS
+  progressCircleRootCSS: () => progressCircleRootCSS,
+  progressCircleSvgCss: () => progressCircleSvgCss
 });
 module.exports = __toCommonJS(ProgressCircle_css_exports);
-var import_colorUtils_css_ts_vanilla = require("../../styles/colorUtils.css");
-var import_container_css_ts_vanilla = require("../../styles/container.css");
 var import_ProgressCircle_css_ts_vanilla = require("./ProgressCircle.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var ProgressCircleSVGCSS = "kvldjh2";
-var progressCircleBackgroundCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "kvldjh6", variantClassNames: { variant: { onAccent: "kvldjh7", primary: "kvldjh8", success: "kvldjh9", warning: "kvldjha", critical: "kvldjhb", neutral: "kvldjhc" } }, defaultVariants: {}, compoundVariants: [] });
-var progressCircleCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "kvldjh3", variantClassNames: { indeterminate: { true: "kvldjh4", false: "kvldjh5" } }, defaultVariants: {}, compoundVariants: [] });
-var progressCircleChildCSS = "kvldjhg";
-var progressCircleContainerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "kvldjhd", variantClassNames: { size: { small: "kvldjhe", large: "kvldjhf" } }, defaultVariants: {}, compoundVariants: [] });
-var progressCircleRootCSS = "kvldjh1";
+var progressCircleBackgroundCSS = "_kvldjh9-0-85-110";
+var progressCircleCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjh6-0-85-110", variantClassNames: { indeterminate: { true: "_kvldjh7-0-85-110", false: "_kvldjh8-0-85-110" } }, defaultVariants: {}, compoundVariants: [] });
+var progressCircleContainerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjha-0-85-110", variantClassNames: { size: { small: "_kvldjhb-0-85-110", large: "_kvldjhc-0-85-110" }, color: { critical: "_kvldjhd-0-85-110", neutral: "_kvldjhe-0-85-110", primary: "_kvldjhf-0-85-110", success: "_kvldjhg-0-85-110", warning: "_kvldjhh-0-85-110" }, variant: { "default": "_kvldjhi-0-85-110", accent: "_kvldjhj-0-85-110" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_kvldjhk-0-85-110"], [{ color: "success", variant: "accent" }, "_kvldjhl-0-85-110"], [{ color: "warning", variant: "accent" }, "_kvldjhm-0-85-110"], [{ color: "critical", variant: "accent" }, "_kvldjhn-0-85-110"], [{ color: "neutral", variant: "accent" }, "_kvldjho-0-85-110"]] });
+var progressCircleRootCSS = "_kvldjh4-0-85-110";
+var progressCircleSvgCss = "_kvldjh5-0-85-110";

package/content/progress/contexts/SharedProgressBarPropsContext.d.ts

@@ -1,8 +1,6 @@
 import React from 'react';
-import { RoleVariantType } from '../../../core/types/role-variant.js';
 export type SharedProgressBarProps = {
     id: string;
-    variant: RoleVariantType;
     density: 'default' | 'condensed';
 };
 /** Context provider for `ProgressBarProps` props meant to be provided to all its progressbar-related child nodes. */

package/content/progress/contexts/SharedProgressBarPropsContext.js

@@ -33,6 +33,5 @@ module.exports = __toCommonJS(SharedProgressBarPropsContext_exports);
 var import_react = __toESM(require("react"));
 const SharedProgressBarPropsContext = import_react.default.createContext({
   id: "",
-  density: "default",
-  variant: "neutral"
+  density: "default"
 });

package/content/progress/hooks/useProgressBarPropsContext.js

@@ -26,7 +26,6 @@ function _useSharedProgressBarPropsContext() {
   const context = (0, import_react.useContext)(import_SharedProgressBarPropsContext.SharedProgressBarPropsContext);
   return {
     id: context.id,
-    variant: context.variant,
     density: context.density
   };
 }

package/content/skeleton/Skeleton.css

@@ -1,4 +1,4 @@
-@keyframes _1a1ozfd0 {
+@keyframes _1a1ozfd0-0-85-110 {
   0% {
     transform: translateX(-100%) scaleX(0);
   }
@@ -6,12 +6,12 @@
     transform: translateX(100%) scaleX(1.5);
   }
 }
-._1a1ozfd1 {
+._1a1ozfd1-0-85-110 {
   position: relative;
   overflow: hidden;
   background-color: var(--dt-colors-background-field-neutral-disabled, #dadbe780);
 }
-._1a1ozfd1:after {
+._1a1ozfd1-0-85-110:after {
   content: "";
   position: absolute;
   top: 0;
@@ -21,13 +21,13 @@
   background-color: var(--dt-colors-background-field-neutral-disabled, #dadbe780);
   animation-iteration-count: infinite;
   transform-origin: left center;
-  animation-name: _1a1ozfd0;
+  animation-name: _1a1ozfd0-0-85-110;
   animation-duration: var(--dt-timings-slow-gentle, 800ms);
   animation-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._1a1ozfd2 {
+._1a1ozfd2-0-85-110 {
   border-radius: var(--dt-borders-radius-container-subdued, 8px);
 }
-._1a1ozfd3 {
+._1a1ozfd3-0-85-110 {
   border-radius: 9999px;
 }

package/content/skeleton/Skeleton.sty.js

@@ -22,4 +22,4 @@ __export(Skeleton_css_exports, {
 module.exports = __toCommonJS(Skeleton_css_exports);
 var import_Skeleton_css_ts_vanilla = require("./Skeleton.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd1", variantClassNames: { variant: { "default": "_1a1ozfd2", rounded: "_1a1ozfd3" } }, defaultVariants: {}, compoundVariants: [] });
+var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd1-0-85-110", variantClassNames: { variant: { "default": "_1a1ozfd2-0-85-110", rounded: "_1a1ozfd3-0-85-110" } }, defaultVariants: {}, compoundVariants: [] });

package/core/components/focus-scope/FocusScope.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { WithChildren } from '../../types/with-children.js';
 /**
  * Prop definition of the `FocusScope` component.
- * @internal
+ * @public
  */
 export interface FocusScopeProps extends WithChildren {
     /**
@@ -21,7 +21,7 @@ export interface FocusScopeProps extends WithChildren {
  * want to create a custom overlay, you can wrap the content of your overlay in the
  * `FocusScope` to help you make the overlay accessible and handle focus
  * appropriately.
- * @internal
+ * @public
  */
 export declare const FocusScope: {
     (props: FocusScopeProps): React.JSX.Element;

package/core/index.d.ts

@@ -1,5 +1,5 @@
 export { AppRoot, type AppRootProps } from './components/app-root/AppRoot.js';
-export { FocusScope as _FocusScope, type FocusScopeProps as _FocusScopeProps, } from './components/focus-scope/FocusScope.js';
+export { FocusScope, type FocusScopeProps, } from './components/focus-scope/FocusScope.js';
 export { type FocusContextProps as _FocusContextProps } from './contexts/FocusContext.js';
 export { useCurrentTheme } from './hooks/useCurrentTheme.js';
 export { useFocusContext as _useFocusContext } from './hooks/useFocusContext.js';

package/core/index.js

@@ -18,8 +18,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var core_exports = {};
 __export(core_exports, {
   AppRoot: () => import_AppRoot.AppRoot,
+  FocusScope: () => import_FocusScope.FocusScope,
   _FocusProvider: () => import_FocusProvider.FocusProvider,
-  _FocusScope: () => import_FocusScope.FocusScope,
   _attemptFocus: () => import_attempt_focus.attemptFocus,
   _focusFirstDescendant: () => import_focus_first_descendant.focusFirstDescendant,
   _getFirstFocusableChild: () => import_get_first_focusable_child.getFirstFocusableChild,

package/core/styles/focusRing.css

@@ -1,88 +1,75 @@
-.z2r50s3 {
+._z2r50s3-0-85-110 {
   outline: none;
 }
-.z2r50s3:focus-visible {
+._z2r50s3-0-85-110:focus-visible {
   outline: none;
 }
-.z2r50s4 {
+._z2r50s4-0-85-110 {
   border-radius: calc(var(--dt-borders-radius-field-subdued, 4px) / 2);
-  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--z2r50s0);
-  background-color: var(--z2r50s2);
-}
-.z2r50s5.z2r50s5 {
-  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--z2r50s0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--z2r50s1);
-}
-.z2r50s6 {
-  --z2r50s0: var(--dt-colors-border-neutral-accent, #545587);
-  --z2r50s1: var(--dt-colors-border-neutral-default, #d2d3e1);
-  --z2r50s2: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
-}
-.z2r50s7 {
-  --z2r50s0: var(--dt-colors-border-primary-accent, #454cc9);
-  --z2r50s1: var(--dt-colors-border-primary-default, #ccd3f3);
-  --z2r50s2: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
-}
-.z2r50s8 {
-  --z2r50s0: var(--dt-colors-border-success-accent, #2c6360);
-  --z2r50s1: var(--dt-colors-border-success-default, #cad6d7);
-  --z2r50s2: var(--dt-colors-background-field-success-emphasized, #d4dddf);
-}
-.z2r50s9 {
-  --z2r50s0: var(--dt-colors-border-warning-accent, #805100);
-  --z2r50s1: var(--dt-colors-border-warning-default, #f4e5d5);
-  --z2r50s2: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
-}
-.z2r50sa {
-  --z2r50s0: var(--dt-colors-border-critical-accent, #b80031);
-  --z2r50s1: var(--dt-colors-border-critical-default, #f1cdcf);
-  --z2r50s2: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
-}
-.z2r50sb {
-  --z2r50s0: var(--dt-colors-border-on-accent-default, #f3f3f7);
-  --z2r50s1: var(--dt-colors-border-on-accent-default, #f3f3f7);
-  --z2r50s2: var(--dt-colors-background-field-on-accent-emphasized, #f3f3f733);
-}
-.z2r50sc:focus-within {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-0-85-110);
+  background-color: var(--_z2r50s2-0-85-110);
+}
+._z2r50s5-0-85-110._z2r50s5-0-85-110 {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-0-85-110), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-0-85-110);
+}
+._z2r50s6-0-85-110 {
+  --_z2r50s0-0-85-110: var(--dt-colors-border-neutral-accent, #545587);
+  --_z2r50s1-0-85-110: var(--dt-colors-border-neutral-default, #d2d3e1);
+  --_z2r50s2-0-85-110: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
+}
+._z2r50s7-0-85-110 {
+  --_z2r50s0-0-85-110: var(--dt-colors-border-primary-accent, #454cc9);
+  --_z2r50s1-0-85-110: var(--dt-colors-border-primary-default, #ccd3f3);
+  --_z2r50s2-0-85-110: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
+}
+._z2r50s8-0-85-110 {
+  --_z2r50s0-0-85-110: var(--dt-colors-border-success-accent, #2c6360);
+  --_z2r50s1-0-85-110: var(--dt-colors-border-success-default, #cad6d7);
+  --_z2r50s2-0-85-110: var(--dt-colors-background-field-success-emphasized, #d4dddf);
+}
+._z2r50s9-0-85-110 {
+  --_z2r50s0-0-85-110: var(--dt-colors-border-warning-accent, #805100);
+  --_z2r50s1-0-85-110: var(--dt-colors-border-warning-default, #f4e5d5);
+  --_z2r50s2-0-85-110: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
+}
+._z2r50sa-0-85-110 {
+  --_z2r50s0-0-85-110: var(--dt-colors-border-critical-accent, #b80031);
+  --_z2r50s1-0-85-110: var(--dt-colors-border-critical-default, #f1cdcf);
+  --_z2r50s2-0-85-110: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
+}
+._z2r50sb-0-85-110:focus-within {
   outline: none;
-  :focus-visible {
-    outline: none;
-  }
 }
-.z2r50sd:focus-within {
+._z2r50sc-0-85-110:focus-within {
   border-radius: calc(var(--dt-borders-radius-field-subdued, 4px) / 2);
-  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--z2r50s0);
-  background-color: var(--z2r50s2);
-}
-.z2r50se:focus-within {
-  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--z2r50s0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--z2r50s1);
-}
-.z2r50sf {
-  --z2r50s0: var(--dt-colors-border-neutral-accent, #545587);
-  --z2r50s1: var(--dt-colors-border-neutral-default, #d2d3e1);
-  --z2r50s2: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
-}
-.z2r50sg {
-  --z2r50s0: var(--dt-colors-border-primary-accent, #454cc9);
-  --z2r50s1: var(--dt-colors-border-primary-default, #ccd3f3);
-  --z2r50s2: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
-}
-.z2r50sh {
-  --z2r50s0: var(--dt-colors-border-success-accent, #2c6360);
-  --z2r50s1: var(--dt-colors-border-success-default, #cad6d7);
-  --z2r50s2: var(--dt-colors-background-field-success-emphasized, #d4dddf);
-}
-.z2r50si {
-  --z2r50s0: var(--dt-colors-border-warning-accent, #805100);
-  --z2r50s1: var(--dt-colors-border-warning-default, #f4e5d5);
-  --z2r50s2: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
-}
-.z2r50sj {
-  --z2r50s0: var(--dt-colors-border-critical-accent, #b80031);
-  --z2r50s1: var(--dt-colors-border-critical-default, #f1cdcf);
-  --z2r50s2: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
-}
-.z2r50sk {
-  --z2r50s0: var(--dt-colors-border-on-accent-default, #f3f3f7);
-  --z2r50s1: var(--dt-colors-border-on-accent-default, #f3f3f7);
-  --z2r50s2: var(--dt-colors-background-field-on-accent-emphasized, #f3f3f733);
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-0-85-110);
+  background-color: var(--_z2r50s2-0-85-110);
+}
+._z2r50sd-0-85-110:focus-within {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-0-85-110), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-0-85-110);
+}
+._z2r50se-0-85-110 {
+  --_z2r50s0-0-85-110: var(--dt-colors-border-neutral-accent, #545587);
+  --_z2r50s1-0-85-110: var(--dt-colors-border-neutral-default, #d2d3e1);
+  --_z2r50s2-0-85-110: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
+}
+._z2r50sf-0-85-110 {
+  --_z2r50s0-0-85-110: var(--dt-colors-border-primary-accent, #454cc9);
+  --_z2r50s1-0-85-110: var(--dt-colors-border-primary-default, #ccd3f3);
+  --_z2r50s2-0-85-110: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
+}
+._z2r50sg-0-85-110 {
+  --_z2r50s0-0-85-110: var(--dt-colors-border-success-accent, #2c6360);
+  --_z2r50s1-0-85-110: var(--dt-colors-border-success-default, #cad6d7);
+  --_z2r50s2-0-85-110: var(--dt-colors-background-field-success-emphasized, #d4dddf);
+}
+._z2r50sh-0-85-110 {
+  --_z2r50s0-0-85-110: var(--dt-colors-border-warning-accent, #805100);
+  --_z2r50s1-0-85-110: var(--dt-colors-border-warning-default, #f4e5d5);
+  --_z2r50s2-0-85-110: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
+}
+._z2r50si-0-85-110 {
+  --_z2r50s0-0-85-110: var(--dt-colors-border-critical-accent, #b80031);
+  --_z2r50s1-0-85-110: var(--dt-colors-border-critical-default, #f1cdcf);
+  --_z2r50s2-0-85-110: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
 }

package/core/styles/focusRing.sty.d.ts

@@ -39,11 +39,6 @@ export declare const focusRingCSS: import("@vanilla-extract/recipes").RuntimeFn<
                 [x: string]: string;
             };
         };
-        onAccent: {
-            vars: {
-                [x: string]: string;
-            };
-        };
     };
 }>;
 export declare const focusRingFocusWithinCSS: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -87,10 +82,5 @@ export declare const focusRingFocusWithinCSS: import("@vanilla-extract/recipes")
                 [x: string]: string;
             };
         };
-        onAccent: {
-            vars: {
-                [x: string]: string;
-            };
-        };
     };
 }>;

package/core/styles/focusRing.sty.js

@@ -23,5 +23,5 @@ __export(focusRing_css_exports, {
 module.exports = __toCommonJS(focusRing_css_exports);
 var import_focusRing_css_ts_vanilla = require("./focusRing.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var focusRingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "z2r50s3", variantClassNames: { minimal: { true: "z2r50s4", false: "z2r50s5" }, variant: { neutral: "z2r50s6", primary: "z2r50s7", success: "z2r50s8", warning: "z2r50s9", critical: "z2r50sa", onAccent: "z2r50sb" } }, defaultVariants: {}, compoundVariants: [] });
-var focusRingFocusWithinCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "z2r50sc", variantClassNames: { minimal: { true: "z2r50sd", false: "z2r50se" }, variant: { neutral: "z2r50sf", primary: "z2r50sg", success: "z2r50sh", warning: "z2r50si", critical: "z2r50sj", onAccent: "z2r50sk" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50s3-0-85-110", variantClassNames: { minimal: { true: "_z2r50s4-0-85-110", false: "_z2r50s5-0-85-110" }, variant: { neutral: "_z2r50s6-0-85-110", primary: "_z2r50s7-0-85-110", success: "_z2r50s8-0-85-110", warning: "_z2r50s9-0-85-110", critical: "_z2r50sa-0-85-110" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRingFocusWithinCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50sb-0-85-110", variantClassNames: { minimal: { true: "_z2r50sc-0-85-110", false: "_z2r50sd-0-85-110" }, variant: { neutral: "_z2r50se-0-85-110", primary: "_z2r50sf-0-85-110", success: "_z2r50sg-0-85-110", warning: "_z2r50sh-0-85-110", critical: "_z2r50si-0-85-110" } }, defaultVariants: {}, compoundVariants: [] });