@workday/canvas-kit-preview-css 15.0.0-alpha.1303-next.0 → 15.0.0

package/status-indicator.css

@@ -12,87 +12,81 @@
 .cnvs-preview-status-indicator {
   box-sizing: border-box;
   display: inline-flex;
-  gap: var(--cnvs-sys-space-x1);
+  gap: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
   max-width: 12.5rem;
   align-items: center;
-  border-radius: var(--cnvs-sys-shape-round);
-  height: 1.25rem;
-  padding: var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x2);
+  border-radius: var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));
+  height: var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));
+  padding: 0 var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
   outline: 0.0625rem solid transparent;
   --cnvs-system-icon-color: currentColor;
 }
 
 
 .cnvs-preview-status-indicator.variant-info {
-  color: var(--cnvs-sys-color-fg-info-strong);
-  background-color: var(--cnvs-sys-color-bg-info-softer);
+  color: var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));
+  background-color: var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11)));
 }
 
 
 .cnvs-preview-status-indicator.variant-positive {
-  color: var(--cnvs-sys-color-fg-positive-strong);
-  background-color: var(--cnvs-sys-color-fg-positive-softer);
+  color: var(--cnvs-sys-color-fg-success-strong, oklch(0.4463 0.1422 144.58 / 1));
+  background-color: var(--cnvs-sys-color-surface-success-strong, oklch(0.8685 0.2814 143.77 / 0.15));
 }
 
 
 .cnvs-preview-status-indicator.variant-caution {
-  color: var(--cnvs-sys-color-fg-caution-soft);
-  background-color: var(--cnvs-sys-color-bg-caution-softer);
+  color: var(--cnvs-sys-color-fg-warning-strong, oklch(0.4824 0.1353 46.11 / 1));
+  background-color: var(--cnvs-sys-color-surface-warning-strong, var(--cnvs-sys-color-static-amber-stronger, oklch(0.8864 0.1845 100.28 / 0.22)));
 }
 
 
 .cnvs-preview-status-indicator.variant-critical {
-  color: var(--cnvs-sys-color-fg-critical-strong);
-  background-color: var(--cnvs-sys-color-bg-critical-softer);
+  color: var(--cnvs-sys-color-fg-danger-strong, var(--cnvs-sys-color-fg-critical-strong, oklch(0.4517 0.1847 28.2 / 1)));
+  background-color: var(--cnvs-sys-color-surface-danger-strong, oklch(0.6434 0.2428 30.17 / 0.1));
 }
 
 
 .cnvs-preview-status-indicator.variant-neutral {
   color: var(--cnvs-sys-color-fg-muted-strong);
-  background-color: var(--cnvs-sys-color-bg-alt-default);
-}
-
-
-.cnvs-preview-status-indicator.variant-ai {
-  color: var(--cnvs-sys-color-fg-ai);
-  background-color: var(--cnvs-sys-color-bg-ai-default);
+  background-color: var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)));
 }
 
 
 .cnvs-preview-status-indicator.variant-transparent {
   color: var(--cnvs-sys-color-fg-inverse);
-  background-color: var(--cnvs-sys-color-bg-translucent);
+  background-color: var(--cnvs-sys-color-surface-contrast-default, var(--cnvs-sys-color-bg-contrast-default, oklch(0.0969 0 0 / 0.84)));
 }
 
 
 
 
 .cnvs-preview-status-indicator.variant-info.emphasis-high {
-  background-color: var(--cnvs-sys-color-bg-info-default);
+  background-color: var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-info-default, oklch(0.5198 0.1782 256.11 / 1)));
   color: var(--cnvs-sys-color-fg-inverse);
 }
 
 
 .cnvs-preview-status-indicator.variant-positive.emphasis-high {
-  background-color: var(--cnvs-sys-color-bg-positive-default);
+  background-color: var(--cnvs-sys-color-accent-success, var(--cnvs-sys-color-bg-positive-default, oklch(0.5069 0.1569 145.56 / 1)));
   color: var(--cnvs-sys-color-fg-inverse);
 }
 
 
 .cnvs-preview-status-indicator.variant-caution.emphasis-high {
-  background-color: var(--cnvs-sys-color-bg-caution-default);
-  color: var(--cnvs-sys-color-fg-caution-strong);
+  background-color: var(--cnvs-sys-color-accent-warning, oklch(0.7909 0.1711 70.15 / 1));
+  color: var(--cnvs-sys-color-fg-contrast-default);
 }
 
 
 .cnvs-preview-status-indicator.variant-critical.emphasis-high {
-  background-color: var(--cnvs-sys-color-bg-critical-default);
+  background-color: var(--cnvs-sys-color-accent-danger, var(--cnvs-sys-color-bg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));
   color: var(--cnvs-sys-color-fg-inverse);
 }
 
 
 .cnvs-preview-status-indicator.variant-neutral.emphasis-high {
-  background-color: var(--cnvs-sys-color-bg-muted-default);
+  background-color: var(--cnvs-sys-color-accent-muted-default, var(--cnvs-sys-color-bg-muted-default, oklch(0.5103 0.0255 256.8 / 1)));
   color: var(--cnvs-sys-color-fg-inverse);
 }
 

package/switch.css

@@ -0,0 +1,123 @@
+.cnvs-preview-switch-background {
+  box-sizing: border-box;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+  border: 0.0625rem solid transparent;
+  height: var(--cnvs-base-size-225, 1.125rem);
+  width: 2.125rem;
+  border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
+  padding: 0 0.125rem;
+  transition: background-color 200ms ease;
+  background-color: var(--cnvs-sys-color-accent-muted-soft, var(--cnvs-sys-color-bg-muted-softer, oklch(0.754 0.0181 256.33 / 1)));
+}
+
+
+.cnvs-preview-switch-circle {
+  box-sizing: border-box;
+  width: var(--cnvs-base-size-150, 0.75rem);
+  height: var(--cnvs-base-size-150, 0.75rem);
+  border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
+  border: 0.0625rem solid transparent;
+  box-shadow: var(--cnvs-sys-depth-1);
+  transition: transform 150ms ease;
+  pointer-events: none;
+  background-color: var(--cnvs-sys-color-fg-inverse);
+  transform: translateX(0);
+}
+
+
+.cnvs-preview-switch-circle.checked {
+  transform: translateX(1rem);
+}
+
+.cnvs-preview-switch-circle.checked :dir(rtl) {
+  transform: translateX(-1rem);
+}
+
+
+.cnvs-preview-switch-container {
+  box-sizing: border-box;
+  position: relative;
+  margin-top: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
+  height: var(--cnvs-base-size-225, 1.125rem);
+  width: 2.125rem;
+}
+
+
+.cnvs-preview-switch-icon {
+  box-sizing: border-box;
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
+  --cnvs-svg-size: var(--cnvs-component-system-icon-size-sm, 1.125rem);
+  position: absolute;
+  transition: transform 0ms;
+  pointer-events: none;
+  transform: translateX(0.75rem);
+}
+
+.cnvs-preview-switch-icon :dir(rtl) {
+  transform: translateX(-0.75rem);
+}
+
+
+.cnvs-preview-switch-icon.checked {
+  transform: translateX(-0.125rem);
+}
+
+.cnvs-preview-switch-icon.checked :dir(rtl) {
+  transform: translateX(0.125rem);
+}
+
+
+.cnvs-preview-switch-input {
+  box-sizing: border-box;
+  display: flex;
+  position: absolute;
+  margin: 0;
+  height: var(--cnvs-base-size-225, 1.125rem);
+  width: 2.125rem;
+  border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
+  opacity: 0;
+  cursor: pointer;
+}
+
+.cnvs-preview-switch-input~div:first-of-type {
+  outline-offset: 0.125rem;
+}
+
+.cnvs-preview-switch-input:checked~div:first-of-type, .cnvs-preview-switch-input.checked~div:first-of-type {
+  background-color: var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
+}
+
+.cnvs-preview-switch-input:checked:disabled~div:first-of-type, .cnvs-preview-switch-input.checked:disabled~div:first-of-type, .cnvs-preview-switch-input:checked.disabled~div:first-of-type, .cnvs-preview-switch-input.checked.disabled~div:first-of-type {
+  opacity: var(--cnvs-sys-opacity-disabled);
+}
+
+.cnvs-preview-switch-input:disabled, .cnvs-preview-switch-input.disabled {
+  cursor: not-allowed;
+}
+
+.cnvs-preview-switch-input:disabled~div:first-of-type, .cnvs-preview-switch-input.disabled~div:first-of-type {
+  opacity: var(--cnvs-sys-opacity-disabled);
+}
+
+.cnvs-preview-switch-input:focus-visible, .cnvs-preview-switch-input:focus, .cnvs-preview-switch-input.focus {
+  outline: none;
+}
+
+.cnvs-preview-switch-input:focus-visible~div:first-of-type, .cnvs-preview-switch-input:focus~div:first-of-type, .cnvs-preview-switch-input.focus~div:first-of-type {
+  outline: 0.0625rem solid transparent;
+  box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)),0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
+}
+
+
+.cnvs-preview-switch-input.error-error~div:first-of-type {
+  box-shadow: 0 0 0 var(--cnvs-base-size-25, 0.125rem) var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),0 0 0 var(--cnvs-base-size-50, 0.25rem) var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1))),0 0 0 0.3125rem transparent;
+}
+
+
+.cnvs-preview-switch-input.error-caution~div:first-of-type {
+  box-shadow: 0 0 0 var(--cnvs-base-size-25, 0.125rem) var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),0 0 0 var(--cnvs-base-size-50, 0.25rem) var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),0 0 0 0.3125rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));
+}
+

package/avatar.css

@@ -1,188 +0,0 @@
-.cnvs-preview-avatar-image {
-  box-sizing: border-box;
-  height: 100%;
-  width: 100%;
-  object-fit: cover;
-}
-
-
-.cnvs-preview-avatar-name {
-  box-sizing: border-box;
-  text-transform: uppercase;
-  cursor: default;
-}
-
-
-.cnvs-preview-base-avatar {
-  box-sizing: border-box;
-  border-radius: var(--cnvs-sys-shape-round);
-  width: var(--cnvs-preview-base-avatar-size, calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2)));
-  height: var(--cnvs-preview-base-avatar-size, calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2)));
-  background-color: var(--cnvs-preview-base-avatar-background-color, var(--cnvs-base-palette-blue-300));
-  color: var(--cnvs-preview-base-avatar-color, var(--cnvs-base-palette-blue-800));
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  border: none;
-  font-family: var(--cnvs-sys-font-family-default);
-  font-weight: var(--cnvs-sys-font-weight-normal);
-  line-height: var(--cnvs-sys-line-height-body-medium);
-  font-size: var(--cnvs-sys-font-size-body-medium);
-}
-
-
-.cnvs-preview-base-avatar.variant-blue {
-  background-color: var(--cnvs-preview-base-avatar-background-color, var(--cnvs-base-palette-blue-300));
-  color: var(--cnvs-preview-base-avatar-color, var(--cnvs-base-palette-blue-800));
-}
-
-
-.cnvs-preview-base-avatar.variant-amber {
-  background-color: var(--cnvs-preview-base-avatar-background-color, var(--cnvs-base-palette-amber-200));
-  color: var(--cnvs-preview-base-avatar-color, var(--cnvs-base-palette-amber-700));
-}
-
-
-.cnvs-preview-base-avatar.variant-teal {
-  background-color: var(--cnvs-preview-base-avatar-background-color, var(--cnvs-base-palette-teal-300));
-  color: var(--cnvs-preview-base-avatar-color, var(--cnvs-base-palette-teal-800));
-}
-
-
-.cnvs-preview-base-avatar.variant-purple {
-  background-color: var(--cnvs-preview-base-avatar-background-color, var(--cnvs-base-palette-purple-300));
-  color: var(--cnvs-preview-base-avatar-color, var(--cnvs-base-palette-purple-800));
-}
-
-
-.cnvs-preview-base-avatar.size-extra-extra-small {
-  --cnvs-preview-base-avatar-size: var(--cnvs-sys-space-x6);
-  font-family: var(--cnvs-sys-font-family-default);
-  font-weight: var(--cnvs-sys-font-weight-normal);
-  line-height: var(--cnvs-sys-line-height-subtext-small);
-  font-size: var(--cnvs-sys-font-size-subtext-small);
-  letter-spacing: var(--cnvs-base-letter-spacing-50);
-}
-
-
-.cnvs-preview-base-avatar.size-extra-small {
-  --cnvs-preview-base-avatar-size: var(--cnvs-sys-space-x8);
-  font-family: var(--cnvs-sys-font-family-default);
-  font-weight: var(--cnvs-sys-font-weight-normal);
-  line-height: var(--cnvs-sys-line-height-subtext-medium);
-  font-size: var(--cnvs-sys-font-size-subtext-medium);
-  letter-spacing: var(--cnvs-base-letter-spacing-100);
-}
-
-
-.cnvs-preview-base-avatar.size-small {
-  --cnvs-preview-base-avatar-size: var(--cnvs-sys-space-x10);
-  font-family: var(--cnvs-sys-font-family-default);
-  font-weight: var(--cnvs-sys-font-weight-normal);
-  line-height: var(--cnvs-sys-line-height-body-small);
-  font-size: var(--cnvs-sys-font-size-body-small);
-  letter-spacing: var(--cnvs-base-letter-spacing-200);
-}
-
-
-.cnvs-preview-base-avatar.size-medium {
-  --cnvs-preview-base-avatar-size: calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));
-  font-family: var(--cnvs-sys-font-family-default);
-  font-weight: var(--cnvs-sys-font-weight-normal);
-  line-height: var(--cnvs-sys-line-height-body-medium);
-  font-size: var(--cnvs-sys-font-size-body-medium);
-}
-
-
-.cnvs-preview-base-avatar.size-large {
-  --cnvs-preview-base-avatar-size: calc(var(--cnvs-sys-space-x16) + var(--cnvs-sys-space-x2));
-  font-family: var(--cnvs-sys-font-family-default);
-  font-weight: var(--cnvs-sys-font-weight-bold);
-  line-height: var(--cnvs-sys-line-height-heading-medium);
-  font-size: var(--cnvs-sys-font-size-heading-medium);
-}
-
-
-.cnvs-preview-base-avatar.size-extra-large {
-  --cnvs-preview-base-avatar-size: calc(var(--cnvs-sys-space-x20) + var(--cnvs-sys-space-x4));
-  font-family: var(--cnvs-sys-font-family-default);
-  font-weight: var(--cnvs-sys-font-weight-bold);
-  line-height: var(--cnvs-sys-line-height-title-small);
-  font-size: var(--cnvs-sys-font-size-title-small);
-}
-
-
-.cnvs-preview-base-avatar.size-extra-extra-large {
-  --cnvs-preview-base-avatar-size: calc(var(--cnvs-sys-space-x10) * 3);
-  font-family: var(--cnvs-sys-font-family-default);
-  font-weight: var(--cnvs-sys-font-weight-bold);
-  line-height: var(--cnvs-sys-line-height-title-medium);
-  font-size: var(--cnvs-sys-font-size-title-medium);
-}
-
-
-.cnvs-preview-avatar {
-  box-sizing: border-box;
-}
-
-
-.cnvs-preview-avatar.image-loaded-false [data-part="avatar-image"] {
-  display: none;
-}
-
-
-.cnvs-preview-avatar.image-loaded {
-  background-color: var(--cnvs-sys-color-bg-default);
-}
-
-
-.cnvs-preview-avatar.object-fit-contain [data-part="avatar-image"] {
-  object-fit: contain;
-}
-
-
-.cnvs-preview-avatar.object-fit-cover [data-part="avatar-image"] {
-  object-fit: cover;
-}
-
-
-.cnvs-preview-avatar.object-fit-fill [data-part="avatar-image"] {
-  object-fit: fill;
-}
-
-
-.cnvs-preview-avatar.object-fit-none [data-part="avatar-image"] {
-  object-fit: none;
-}
-
-
-.cnvs-preview-avatar.object-fit [data-part="avatar-image"] {
-  object-fit: scale-down;
-}
-
-
-.cnvs-preview-avatar.object-fit-initial [data-part="avatar-image"] {
-  object-fit: initial;
-}
-
-
-.cnvs-preview-avatar.object-fit-inherit [data-part="avatar-image"] {
-  object-fit: inherit;
-}
-
-
-.cnvs-preview-avatar.object-fit-unset [data-part="avatar-image"] {
-  object-fit: unset;
-}
-
-
-.cnvs-preview-avatar.object-fit [data-part="avatar-image"] {
-  object-fit: -moz-initial;
-}
-
-
-.cnvs-preview-avatar.object-fit [data-part="avatar-image"] {
-  object-fit: revert;
-}
-

package/information-highlight.css

@@ -1,124 +0,0 @@
-.cnvs-preview-information-highlight-heading {
-  box-sizing: border-box;
-  font-family: var(--cnvs-sys-font-family-default);
-  font-weight: var(--cnvs-sys-font-weight-bold);
-  line-height: var(--cnvs-sys-line-height-body-small);
-  font-size: var(--cnvs-sys-font-size-body-small);
-  letter-spacing: var(--cnvs-base-letter-spacing-200);
-  color: var(--cnvs-sys-color-text-strong);
-  grid-column: 2;
-  margin-top: var(--cnvs-sys-space-zero);
-  margin-bottom: var(--cnvs-sys-space-zero);
-}
-
-
-.cnvs-preview-information-highlight-body {
-  box-sizing: border-box;
-  font-family: var(--cnvs-sys-font-family-default);
-  font-weight: var(--cnvs-sys-font-weight-normal);
-  line-height: var(--cnvs-sys-line-height-subtext-large);
-  font-size: var(--cnvs-sys-font-size-subtext-large);
-  letter-spacing: var(--cnvs-base-letter-spacing-150);
-  color: var(--cnvs-sys-color-text-strong);
-  grid-column: 2;
-  margin-block-end: var(--cnvs-sys-space-x2);
-}
-
-
-.cnvs-preview-information-highlight-link {
-  box-sizing: border-box;
-  font-family: var(--cnvs-sys-font-family-default);
-  font-weight: var(--cnvs-sys-font-weight-bold);
-  line-height: var(--cnvs-sys-line-height-subtext-large);
-  font-size: var(--cnvs-sys-font-size-subtext-large);
-  letter-spacing: var(--cnvs-base-letter-spacing-150);
-  grid-column: 2;
-  justify-self: start;
-  color: var(--cnvs-sys-color-text-strong);
-}
-
-
-.cnvs-preview-information-highlight {
-  box-sizing: border-box;
-  display: grid;
-  grid-template-columns: min-content;
-  column-gap: var(--cnvs-sys-space-x4);
-  row-gap: var(--cnvs-sys-space-x2);
-  padding: var(--cnvs-sys-space-x4);
-  border-radius: var(--cnvs-sys-shape-x1);
-  outline: 0.0625rem solid transparent;
-  border-inline-start: var(--cnvs-sys-space-x1) solid transparent;
-}
-
-
-.cnvs-preview-information-highlight.informational-low {
-  border-inline-start-color: var(--cnvs-sys-color-border-info-default);
-  background-color: var(--cnvs-sys-color-bg-alt-soft);
-}
-
-.cnvs-preview-information-highlight.informational-low [data-part="information-highlight-icon"] {
-  --cnvs-system-icon-accent-color: var(--cnvs-sys-color-icon-info-default);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-info-default);
-  --cnvs-system-icon-background-color: transparent;
-}
-
-
-.cnvs-preview-information-highlight.informational-high {
-  border-inline-start-color: var(--cnvs-sys-color-border-info-default);
-  background-color: var(--cnvs-sys-color-bg-info-softest);
-}
-
-.cnvs-preview-information-highlight.informational-high [data-part="information-highlight-icon"] {
-  --cnvs-system-icon-accent-color: var(--cnvs-sys-color-icon-inverse);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-info-default);
-  --cnvs-system-icon-background-color: var(--cnvs-sys-color-icon-info-default);
-}
-
-
-.cnvs-preview-information-highlight.caution-low {
-  border-inline-start-color: var(--cnvs-sys-color-border-caution-default);
-  background-color: var(--cnvs-sys-color-bg-alt-soft);
-}
-
-.cnvs-preview-information-highlight.caution-low [data-part="information-highlight-icon"] {
-  --cnvs-system-icon-accent-color: var(--cnvs-sys-color-icon-strong);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-strong);
-  --cnvs-system-icon-background-color: transparent;
-}
-
-
-.cnvs-preview-information-highlight.caution-high {
-  border-inline-start-color: var(--cnvs-sys-color-border-caution-default);
-  background-color: var(--cnvs-sys-color-bg-caution-softest);
-}
-
-.cnvs-preview-information-highlight.caution-high [data-part="information-highlight-icon"] {
-  --cnvs-system-icon-accent-color: var(--cnvs-sys-color-icon-inverse);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-caution-softer);
-  --cnvs-system-icon-background-color: var(--cnvs-sys-color-icon-caution-softer);
-}
-
-
-.cnvs-preview-information-highlight.critical-low {
-  border-inline-start-color: var(--cnvs-sys-color-border-critical-default);
-  background-color: var(--cnvs-sys-color-bg-alt-soft);
-}
-
-.cnvs-preview-information-highlight.critical-low [data-part="information-highlight-icon"] {
-  --cnvs-system-icon-accent-color: var(--cnvs-sys-color-icon-critical-default);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-critical-default);
-  --cnvs-system-icon-background-color: transparent;
-}
-
-
-.cnvs-preview-information-highlight.critical-high {
-  border-inline-start-color: var(--cnvs-sys-color-border-critical-default);
-  background-color: var(--cnvs-sys-color-bg-critical-softest);
-}
-
-.cnvs-preview-information-highlight.critical-high [data-part="information-highlight-icon"] {
-  --cnvs-system-icon-accent-color: var(--cnvs-sys-color-icon-inverse);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-critical-default);
-  --cnvs-system-icon-background-color: var(--cnvs-sys-color-icon-critical-default);
-}
-