@dynatrace/strato-components 0.85.110 → 1.0.0

package/content/progress/ProgressCircle.css

@@ -1,4 +1,4 @@
-@keyframes _kvldjh3-0-85-110 {
+@keyframes _kvldjh3-1-0-0 {
   0% {
     transform: rotate(0deg);
   }
@@ -6,79 +6,79 @@
     transform: rotate(360deg);
   }
 }
-._kvldjh4-0-85-110 {
+._kvldjh4-1-0-0 {
   display: inline-block;
 }
-._kvldjh5-0-85-110 {
+._kvldjh5-1-0-0 {
   display: block;
   transform: rotate(-90deg);
 }
-._kvldjh6-0-85-110 {
-  stroke: var(--_kvldjh2-0-85-110);
+._kvldjh6-1-0-0 {
+  stroke: var(--_kvldjh2-1-0-0);
   transform-origin: center;
 }
-._kvldjh7-0-85-110 {
+._kvldjh7-1-0-0 {
   stroke-dasharray: 90 360;
   transform-origin: 50% 50%;
-  animation-name: _kvldjh3-0-85-110;
+  animation-name: _kvldjh3-1-0-0;
   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;
 }
-._kvldjh8-0-85-110 {
+._kvldjh8-1-0-0 {
   animation-duration: var(--dt-timings-fast-moderate, 200ms);
   transition-property: stroke-dashoffset;
 }
-._kvldjh9-0-85-110 {
-  stroke: var(--_kvldjh1-0-85-110);
+._kvldjh9-1-0-0 {
+  stroke: var(--_kvldjh1-1-0-0);
 }
-._kvldjha-0-85-110 {
+._kvldjha-1-0-0 {
   display: flex;
   flex-direction: column;
   align-items: center;
-  color: var(--_kvldjh0-0-85-110);
+  color: var(--_kvldjh0-1-0-0);
 }
-._kvldjhb-0-85-110 {
+._kvldjhb-1-0-0 {
   gap: var(--dt-spacings-size-8, 8px);
 }
-._kvldjhc-0-85-110 {
+._kvldjhc-1-0-0 {
   gap: var(--dt-spacings-size-12, 12px);
 }
-._kvldjhd-0-85-110 {
-  --_kvldjh2-0-85-110: var(--dt-colors-border-critical-accent, #b80031);
+._kvldjhd-1-0-0 {
+  --_kvldjh2-1-0-0: var(--dt-colors-border-critical-accent, #b80031);
 }
-._kvldjhe-0-85-110 {
-  --_kvldjh2-0-85-110: var(--dt-colors-border-neutral-accent, #545587);
+._kvldjhe-1-0-0 {
+  --_kvldjh2-1-0-0: var(--dt-colors-border-neutral-accent, #545587);
 }
-._kvldjhf-0-85-110 {
-  --_kvldjh2-0-85-110: var(--dt-colors-border-primary-accent, #454cc9);
+._kvldjhf-1-0-0 {
+  --_kvldjh2-1-0-0: var(--dt-colors-border-primary-accent, #454cc9);
 }
-._kvldjhg-0-85-110 {
-  --_kvldjh2-0-85-110: var(--dt-colors-border-success-accent, #2c6360);
+._kvldjhg-1-0-0 {
+  --_kvldjh2-1-0-0: var(--dt-colors-border-success-accent, #2c6360);
 }
-._kvldjhh-0-85-110 {
-  --_kvldjh2-0-85-110: var(--dt-colors-border-warning-accent, #805100);
+._kvldjhh-1-0-0 {
+  --_kvldjh2-1-0-0: 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);
+._kvldjhi-1-0-0 {
+  --_kvldjh0-1-0-0: var(--dt-colors-text-neutral-default, #2b2a58);
+  --_kvldjh1-1-0-0: 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);
+._kvldjhj-1-0-0 {
+  --_kvldjh0-1-0-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_kvldjh1-1-0-0: 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);
+._kvldjhk-1-0-0 {
+  --_kvldjh2-1-0-0: 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);
+._kvldjhl-1-0-0 {
+  --_kvldjh2-1-0-0: 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);
+._kvldjhm-1-0-0 {
+  --_kvldjh2-1-0-0: 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);
+._kvldjhn-1-0-0 {
+  --_kvldjh2-1-0-0: 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);
+._kvldjho-1-0-0 {
+  --_kvldjh2-1-0-0: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
 }

package/content/progress/ProgressCircle.d.ts

@@ -3,7 +3,6 @@ import { type AriaLabelingProps } from '../../core/types/a11y-props.js';
 import { type DataTestId } from '../../core/types/data-props.js';
 import { type DOMProps } from '../../core/types/dom.js';
 import { type MaskingProps } from '../../core/types/masking-props.js';
-import { type RoleVariantType } from '../../core/types/role-variant.js';
 import { type StylingProps } from '../../core/types/styling-props.js';
 import { type WithChildren } from '../../core/types/with-children.js';
 /**
@@ -31,12 +30,6 @@ export interface ProgressCircleProps extends WithChildren, DOMProps, AriaLabelin
      * @defaultValue 'large'
      */
     size?: 'small' | 'large';
-    /**
-     * 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.

package/content/progress/ProgressCircle.js

@@ -51,7 +51,6 @@ const ProgressCircle = (0, import_react.forwardRef)(
       min = 0,
       max = 100,
       size = "large",
-      variant,
       color,
       children,
       id: propId,
@@ -70,16 +69,9 @@ const ProgressCircle = (0, import_react.forwardRef)(
       ariaValuetext
     );
     const containerColoring = (0, import_Container.useContainerColoring)();
-    const cascadedVariant = variant !== void 0 && variant === "onAccent" ? "accent" : containerColoring.variant;
-    const derivedVariant = cascadedVariant === "accent" ? "accent" : "default";
+    const derivedVariant = containerColoring.variant === "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 derivedColor = color ?? fallbackColor;
     const ariaLabelingProps = (0, import_useAriaLabelingProps.useAriaLabelingProps)(remainingProps);
     const forwardProps = (0, import_useSafeForwardProps.useSafeForwardProps)(remainingProps, ariaLabelingProps);
     const generatedId = (0, import_react.useId)();

package/content/progress/ProgressCircle.sty.js

@@ -26,8 +26,8 @@ __export(ProgressCircle_css_exports, {
 module.exports = __toCommonJS(ProgressCircle_css_exports);
 var import_ProgressCircle_css_ts_vanilla = require("./ProgressCircle.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-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";
+var progressCircleBackgroundCSS = "_kvldjh9-1-0-0";
+var progressCircleCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjh6-1-0-0", variantClassNames: { indeterminate: { true: "_kvldjh7-1-0-0", false: "_kvldjh8-1-0-0" } }, defaultVariants: {}, compoundVariants: [] });
+var progressCircleContainerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjha-1-0-0", variantClassNames: { size: { small: "_kvldjhb-1-0-0", large: "_kvldjhc-1-0-0" }, color: { critical: "_kvldjhd-1-0-0", neutral: "_kvldjhe-1-0-0", primary: "_kvldjhf-1-0-0", success: "_kvldjhg-1-0-0", warning: "_kvldjhh-1-0-0" }, variant: { "default": "_kvldjhi-1-0-0", accent: "_kvldjhj-1-0-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_kvldjhk-1-0-0"], [{ color: "success", variant: "accent" }, "_kvldjhl-1-0-0"], [{ color: "warning", variant: "accent" }, "_kvldjhm-1-0-0"], [{ color: "critical", variant: "accent" }, "_kvldjhn-1-0-0"], [{ color: "neutral", variant: "accent" }, "_kvldjho-1-0-0"]] });
+var progressCircleRootCSS = "_kvldjh4-1-0-0";
+var progressCircleSvgCss = "_kvldjh5-1-0-0";

package/content/progress/hooks/useProgressBarPropsContext.d.ts

@@ -1,2 +1,5 @@
-import { SharedProgressBarProps } from '../contexts/SharedProgressBarPropsContext.js';
-export declare function _useSharedProgressBarPropsContext(): SharedProgressBarProps;
+import { type SharedProgressBarProps } from '../contexts/SharedProgressBarPropsContext.js';
+/**
+ * @internal
+ */
+export declare function useSharedProgressBarPropsContext(): SharedProgressBarProps;

package/content/progress/hooks/useProgressBarPropsContext.js

@@ -17,12 +17,12 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var useProgressBarPropsContext_exports = {};
 __export(useProgressBarPropsContext_exports, {
-  _useSharedProgressBarPropsContext: () => _useSharedProgressBarPropsContext
+  useSharedProgressBarPropsContext: () => useSharedProgressBarPropsContext
 });
 module.exports = __toCommonJS(useProgressBarPropsContext_exports);
 var import_react = require("react");
 var import_SharedProgressBarPropsContext = require("../contexts/SharedProgressBarPropsContext.js");
-function _useSharedProgressBarPropsContext() {
+function useSharedProgressBarPropsContext() {
   const context = (0, import_react.useContext)(import_SharedProgressBarPropsContext.SharedProgressBarPropsContext);
   return {
     id: context.id,

package/content/skeleton/Skeleton.css

@@ -1,4 +1,4 @@
-@keyframes _1a1ozfd0-0-85-110 {
+@keyframes _1a1ozfd0-1-0-0 {
   0% {
     transform: translateX(-100%) scaleX(0);
   }
@@ -6,12 +6,12 @@
     transform: translateX(100%) scaleX(1.5);
   }
 }
-._1a1ozfd1-0-85-110 {
+._1a1ozfd1-1-0-0 {
   position: relative;
   overflow: hidden;
   background-color: var(--dt-colors-background-field-neutral-disabled, #dadbe780);
 }
-._1a1ozfd1-0-85-110:after {
+._1a1ozfd1-1-0-0: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-0-85-110;
+  animation-name: _1a1ozfd0-1-0-0;
   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-0-85-110 {
+._1a1ozfd2-1-0-0 {
   border-radius: var(--dt-borders-radius-container-subdued, 8px);
 }
-._1a1ozfd3-0-85-110 {
+._1a1ozfd3-1-0-0 {
   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-0-85-110", variantClassNames: { variant: { "default": "_1a1ozfd2-0-85-110", rounded: "_1a1ozfd3-0-85-110" } }, defaultVariants: {}, compoundVariants: [] });
+var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd1-1-0-0", variantClassNames: { variant: { "default": "_1a1ozfd2-1-0-0", rounded: "_1a1ozfd3-1-0-0" } }, defaultVariants: {}, compoundVariants: [] });

package/core/components/app-root/AppRoot.css

@@ -146,13 +146,6 @@
   --dt-colors-background-field-critical-accent: #c4233b;
   --dt-colors-background-field-critical-accent-hover: #b2012d;
   --dt-colors-background-field-critical-accent-active: #a0001f;
-  --dt-colors-background-field-on-accent-disabled: #f3f3f71a;
-  --dt-colors-background-field-on-accent-default: #f3f3f700;
-  --dt-colors-background-field-on-accent-default-hover: #f3f3f74d;
-  --dt-colors-background-field-on-accent-default-active: #f3f3f766;
-  --dt-colors-background-field-on-accent-emphasized: #f3f3f733;
-  --dt-colors-background-field-on-accent-emphasized-hover: #f3f3f74d;
-  --dt-colors-background-field-on-accent-emphasized-active: #f3f3f766;
   --dt-colors-border-neutral-disabled: #d2d3e180;
   --dt-colors-border-neutral-default: #d2d3e1;
   --dt-colors-border-neutral-default-hover: #cacbdc;
@@ -208,10 +201,6 @@
   --dt-colors-border-critical-on-accent-default: #f9f1f3;
   --dt-colors-border-critical-on-accent-default-hover: #f9f1f3cc;
   --dt-colors-border-critical-on-accent-default-active: #f9f1f399;
-  --dt-colors-border-on-accent-disabled: #f3f3f733;
-  --dt-colors-border-on-accent-default: #f3f3f7;
-  --dt-colors-border-on-accent-default-hover: #f3f3f7cc;
-  --dt-colors-border-on-accent-default-active: #f3f3f799;
   --dt-colors-text-neutral-disabled: #54558780;
   --dt-colors-text-neutral-subdued: #545587;
   --dt-colors-text-neutral-subdued-hover: #3f3f6f;
@@ -255,10 +244,6 @@
   --dt-colors-text-critical-on-accent-default: #f9f1f3;
   --dt-colors-text-critical-on-accent-default-hover: #f9f1f3cc;
   --dt-colors-text-critical-on-accent-default-active: #f9f1f399;
-  --dt-colors-text-on-accent-disabled: #f3f3f780;
-  --dt-colors-text-on-accent-default: #f3f3f7;
-  --dt-colors-text-on-accent-default-hover: #f3f3f7cc;
-  --dt-colors-text-on-accent-default-active: #f3f3f799;
   --dt-colors-icon-neutral-disabled: #54558780;
   --dt-colors-icon-neutral-subdued: #545587;
   --dt-colors-icon-neutral-subdued-hover: #3f3f6f;
@@ -302,10 +287,6 @@
   --dt-colors-icon-critical-on-accent-default: #f9f1f3;
   --dt-colors-icon-critical-on-accent-default-hover: #f9f1f3cc;
   --dt-colors-icon-critical-on-accent-default-active: #f9f1f399;
-  --dt-colors-icon-on-accent-disabled: #f3f3f780;
-  --dt-colors-icon-on-accent-default: #f3f3f7;
-  --dt-colors-icon-on-accent-default-hover: #f3f3f7cc;
-  --dt-colors-icon-on-accent-default-active: #f3f3f799;
   --dt-colors-syntax-comment: #545586;
   --dt-colors-syntax-string: #086467;
   --dt-colors-syntax-variable: #2754b5;
@@ -994,13 +975,6 @@
   --dt-colors-background-field-critical-accent: #c82d40;
   --dt-colors-background-field-critical-accent-hover: #b61532;
   --dt-colors-background-field-critical-accent-active: #a50024;
-  --dt-colors-background-field-on-accent-disabled: #19192c1a;
-  --dt-colors-background-field-on-accent-default: #19192c00;
-  --dt-colors-background-field-on-accent-default-hover: #19192c4d;
-  --dt-colors-background-field-on-accent-default-active: #19192c66;
-  --dt-colors-background-field-on-accent-emphasized: #19192c33;
-  --dt-colors-background-field-on-accent-emphasized-hover: #19192c4d;
-  --dt-colors-background-field-on-accent-emphasized-active: #19192c66;
   --dt-colors-border-neutral-disabled: #3b3b5280;
   --dt-colors-border-neutral-default: #3b3b52;
   --dt-colors-border-neutral-default-hover: #44445c;
@@ -1056,10 +1030,6 @@
   --dt-colors-border-critical-on-accent-default: #f9f1f3;
   --dt-colors-border-critical-on-accent-default-hover: #f9f1f3cc;
   --dt-colors-border-critical-on-accent-default-active: #f9f1f399;
-  --dt-colors-border-on-accent-disabled: #19192c33;
-  --dt-colors-border-on-accent-default: #19192c;
-  --dt-colors-border-on-accent-default-hover: #19192ccc;
-  --dt-colors-border-on-accent-default-active: #19192c99;
   --dt-colors-text-neutral-disabled: #b1b2d280;
   --dt-colors-text-neutral-subdued: #b1b2d2;
   --dt-colors-text-neutral-subdued-hover: #cecff0;
@@ -1103,10 +1073,6 @@
   --dt-colors-text-critical-on-accent-default: #f9f1f3;
   --dt-colors-text-critical-on-accent-default-hover: #f9f1f3cc;
   --dt-colors-text-critical-on-accent-default-active: #f9f1f399;
-  --dt-colors-text-on-accent-disabled: #19192c80;
-  --dt-colors-text-on-accent-default: #19192c;
-  --dt-colors-text-on-accent-default-hover: #19192ccc;
-  --dt-colors-text-on-accent-default-active: #19192c99;
   --dt-colors-icon-neutral-disabled: #b1b2d280;
   --dt-colors-icon-neutral-subdued: #b1b2d2;
   --dt-colors-icon-neutral-subdued-hover: #cecff0;
@@ -1150,10 +1116,6 @@
   --dt-colors-icon-critical-on-accent-default: #f9f1f3;
   --dt-colors-icon-critical-on-accent-default-hover: #f9f1f3cc;
   --dt-colors-icon-critical-on-accent-default-active: #f9f1f399;
-  --dt-colors-icon-on-accent-disabled: #19192c80;
-  --dt-colors-icon-on-accent-default: #19192c;
-  --dt-colors-icon-on-accent-default-hover: #19192ccc;
-  --dt-colors-icon-on-accent-default-active: #19192c99;
   --dt-colors-syntax-comment: #b2b3cd;
   --dt-colors-syntax-string: #80dbca;
   --dt-colors-syntax-variable: #abb1ed;
@@ -1877,13 +1839,6 @@ body {
     --dt-colors-background-field-critical-accent: #c4233b;
     --dt-colors-background-field-critical-accent-hover: #b2012d;
     --dt-colors-background-field-critical-accent-active: #a0001f;
-    --dt-colors-background-field-on-accent-disabled: #f3f3f71a;
-    --dt-colors-background-field-on-accent-default: #f3f3f700;
-    --dt-colors-background-field-on-accent-default-hover: #f3f3f74d;
-    --dt-colors-background-field-on-accent-default-active: #f3f3f766;
-    --dt-colors-background-field-on-accent-emphasized: #f3f3f733;
-    --dt-colors-background-field-on-accent-emphasized-hover: #f3f3f74d;
-    --dt-colors-background-field-on-accent-emphasized-active: #f3f3f766;
     --dt-colors-border-neutral-disabled: #d2d3e180;
     --dt-colors-border-neutral-default: #d2d3e1;
     --dt-colors-border-neutral-default-hover: #cacbdc;
@@ -1939,10 +1894,6 @@ body {
     --dt-colors-border-critical-on-accent-default: #f9f1f3;
     --dt-colors-border-critical-on-accent-default-hover: #f9f1f3cc;
     --dt-colors-border-critical-on-accent-default-active: #f9f1f399;
-    --dt-colors-border-on-accent-disabled: #f3f3f733;
-    --dt-colors-border-on-accent-default: #f3f3f7;
-    --dt-colors-border-on-accent-default-hover: #f3f3f7cc;
-    --dt-colors-border-on-accent-default-active: #f3f3f799;
     --dt-colors-text-neutral-disabled: #54558780;
     --dt-colors-text-neutral-subdued: #545587;
     --dt-colors-text-neutral-subdued-hover: #3f3f6f;
@@ -1986,10 +1937,6 @@ body {
     --dt-colors-text-critical-on-accent-default: #f9f1f3;
     --dt-colors-text-critical-on-accent-default-hover: #f9f1f3cc;
     --dt-colors-text-critical-on-accent-default-active: #f9f1f399;
-    --dt-colors-text-on-accent-disabled: #f3f3f780;
-    --dt-colors-text-on-accent-default: #f3f3f7;
-    --dt-colors-text-on-accent-default-hover: #f3f3f7cc;
-    --dt-colors-text-on-accent-default-active: #f3f3f799;
     --dt-colors-icon-neutral-disabled: #54558780;
     --dt-colors-icon-neutral-subdued: #545587;
     --dt-colors-icon-neutral-subdued-hover: #3f3f6f;
@@ -2033,10 +1980,6 @@ body {
     --dt-colors-icon-critical-on-accent-default: #f9f1f3;
     --dt-colors-icon-critical-on-accent-default-hover: #f9f1f3cc;
     --dt-colors-icon-critical-on-accent-default-active: #f9f1f399;
-    --dt-colors-icon-on-accent-disabled: #f3f3f780;
-    --dt-colors-icon-on-accent-default: #f3f3f7;
-    --dt-colors-icon-on-accent-default-hover: #f3f3f7cc;
-    --dt-colors-icon-on-accent-default-active: #f3f3f799;
     --dt-colors-syntax-comment: #545586;
     --dt-colors-syntax-string: #086467;
     --dt-colors-syntax-variable: #2754b5;

package/core/hooks/useFontsUpdated.d.ts

@@ -6,4 +6,4 @@
  * @returns boolean whether the fonts have changed
  * @internal
  */
-export declare function _useFontsUpdated(callback?: () => void): boolean;
+export declare function useFontsUpdated(callback?: () => void): boolean;

package/core/hooks/useFontsUpdated.js

@@ -17,12 +17,12 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var useFontsUpdated_exports = {};
 __export(useFontsUpdated_exports, {
-  _useFontsUpdated: () => _useFontsUpdated
+  useFontsUpdated: () => useFontsUpdated
 });
 module.exports = __toCommonJS(useFontsUpdated_exports);
 var import_lodash_es = require("lodash");
 var import_react = require("react");
-function _useFontsUpdated(callback) {
+function useFontsUpdated(callback) {
   const [fontsUpdated, setFontsUpdated] = (0, import_react.useState)(false);
   const prevFontFamilies = (0, import_react.useRef)();
   const fontFamilies = [];

package/core/index.d.ts

@@ -23,8 +23,6 @@ export { useSafeForwardProps as _useSafeForwardProps } from './hooks/useSafeForw
 export type { UseSafeForwardReturnProps as _UseSafeForwardReturnProps } from './hooks/useSafeForwardProps.js';
 export type { AriaDisabledProps, AriaLabelingProps, } from './types/a11y-props.js';
 export type { DOMProps } from './types/dom.js';
-export { roleVariants } from './types/role-variant.js';
-export type { RoleVariantType } from './types/role-variant.js';
 export { uuidv4 as _uuidv4 } from './utils/uuidv4.js';
 export { isStringChildren as _isStringChildren } from './utils/_is-string-children.js';
 export { parseBoolean as _parseBoolean } from './utils/parse-boolean.js';

package/core/index.js

@@ -35,7 +35,6 @@ __export(core_exports, {
   _useId: () => import_useId.useId,
   _useSafeForwardProps: () => import_useSafeForwardProps.useSafeForwardProps,
   _uuidv4: () => import_uuidv4.uuidv4,
-  roleVariants: () => import_role_variant.roleVariants,
   useCurrentTheme: () => import_useCurrentTheme.useCurrentTheme
 });
 module.exports = __toCommonJS(core_exports);
@@ -54,7 +53,6 @@ var import_merge_props = require("./utils/merge-props.js");
 var import_useAriaLabelingProps = require("./hooks/useAriaLabelingProps.js");
 var import_useId = require("./hooks/useId.js");
 var import_useSafeForwardProps = require("./hooks/useSafeForwardProps.js");
-var import_role_variant = require("./types/role-variant.js");
 var import_uuidv4 = require("./utils/uuidv4.js");
 var import_is_string_children = require("./utils/_is-string-children.js");
 var import_parse_boolean = require("./utils/parse-boolean.js");

package/core/styles/focusRing.css

@@ -1,75 +1,75 @@
-._z2r50s3-0-85-110 {
+._z2r50s3-1-0-0 {
   outline: none;
 }
-._z2r50s3-0-85-110:focus-visible {
+._z2r50s3-1-0-0:focus-visible {
   outline: none;
 }
-._z2r50s4-0-85-110 {
+._z2r50s4-1-0-0 {
   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-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 {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-0-0);
+  background-color: var(--_z2r50s2-1-0-0);
+}
+._z2r50s5-1-0-0._z2r50s5-1-0-0 {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-0-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-1-0-0);
+}
+._z2r50s6-1-0-0 {
+  --_z2r50s0-1-0-0: var(--dt-colors-border-neutral-accent, #545587);
+  --_z2r50s1-1-0-0: var(--dt-colors-border-neutral-default, #d2d3e1);
+  --_z2r50s2-1-0-0: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
+}
+._z2r50s7-1-0-0 {
+  --_z2r50s0-1-0-0: var(--dt-colors-border-primary-accent, #454cc9);
+  --_z2r50s1-1-0-0: var(--dt-colors-border-primary-default, #ccd3f3);
+  --_z2r50s2-1-0-0: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
+}
+._z2r50s8-1-0-0 {
+  --_z2r50s0-1-0-0: var(--dt-colors-border-success-accent, #2c6360);
+  --_z2r50s1-1-0-0: var(--dt-colors-border-success-default, #cad6d7);
+  --_z2r50s2-1-0-0: var(--dt-colors-background-field-success-emphasized, #d4dddf);
+}
+._z2r50s9-1-0-0 {
+  --_z2r50s0-1-0-0: var(--dt-colors-border-warning-accent, #805100);
+  --_z2r50s1-1-0-0: var(--dt-colors-border-warning-default, #f4e5d5);
+  --_z2r50s2-1-0-0: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
+}
+._z2r50sa-1-0-0 {
+  --_z2r50s0-1-0-0: var(--dt-colors-border-critical-accent, #b80031);
+  --_z2r50s1-1-0-0: var(--dt-colors-border-critical-default, #f1cdcf);
+  --_z2r50s2-1-0-0: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
+}
+._z2r50sb-1-0-0:focus-within {
   outline: none;
 }
-._z2r50sc-0-85-110:focus-within {
+._z2r50sc-1-0-0: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-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);
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-0-0);
+  background-color: var(--_z2r50s2-1-0-0);
+}
+._z2r50sd-1-0-0:focus-within {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-0-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-1-0-0);
+}
+._z2r50se-1-0-0 {
+  --_z2r50s0-1-0-0: var(--dt-colors-border-neutral-accent, #545587);
+  --_z2r50s1-1-0-0: var(--dt-colors-border-neutral-default, #d2d3e1);
+  --_z2r50s2-1-0-0: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
+}
+._z2r50sf-1-0-0 {
+  --_z2r50s0-1-0-0: var(--dt-colors-border-primary-accent, #454cc9);
+  --_z2r50s1-1-0-0: var(--dt-colors-border-primary-default, #ccd3f3);
+  --_z2r50s2-1-0-0: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
+}
+._z2r50sg-1-0-0 {
+  --_z2r50s0-1-0-0: var(--dt-colors-border-success-accent, #2c6360);
+  --_z2r50s1-1-0-0: var(--dt-colors-border-success-default, #cad6d7);
+  --_z2r50s2-1-0-0: var(--dt-colors-background-field-success-emphasized, #d4dddf);
+}
+._z2r50sh-1-0-0 {
+  --_z2r50s0-1-0-0: var(--dt-colors-border-warning-accent, #805100);
+  --_z2r50s1-1-0-0: var(--dt-colors-border-warning-default, #f4e5d5);
+  --_z2r50s2-1-0-0: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
+}
+._z2r50si-1-0-0 {
+  --_z2r50s0-1-0-0: var(--dt-colors-border-critical-accent, #b80031);
+  --_z2r50s1-1-0-0: var(--dt-colors-border-critical-default, #f1cdcf);
+  --_z2r50s2-1-0-0: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
 }

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-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: [] });
+var focusRingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50s3-1-0-0", variantClassNames: { minimal: { true: "_z2r50s4-1-0-0", false: "_z2r50s5-1-0-0" }, variant: { neutral: "_z2r50s6-1-0-0", primary: "_z2r50s7-1-0-0", success: "_z2r50s8-1-0-0", warning: "_z2r50s9-1-0-0", critical: "_z2r50sa-1-0-0" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRingFocusWithinCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50sb-1-0-0", variantClassNames: { minimal: { true: "_z2r50sc-1-0-0", false: "_z2r50sd-1-0-0" }, variant: { neutral: "_z2r50se-1-0-0", primary: "_z2r50sf-1-0-0", success: "_z2r50sg-1-0-0", warning: "_z2r50sh-1-0-0", critical: "_z2r50si-1-0-0" } }, defaultVariants: {}, compoundVariants: [] });