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

package/LICENSE

@@ -43,7 +43,8 @@ While redistributing the Work or Derivative Works thereof, You may choose to off
 
 END OF TERMS AND CONDITIONS
 
-©2020. Workday, Inc. All rights reserved. Workday and the Workday logo are registered trademarks of Workday, Inc. All other brand and product names are trademarks or registered trademarks of their respective holders.
+©2021 Workday, Inc. All rights reserved. Workday and the Workday logo are registered trademarks of Workday, Inc. All other brand and product names are trademarks or registered trademarks of their respective holders.
+
 
 Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
 http://www.apache.org/licenses/LICENSE-2.0

package/action-bar.css

@@ -1,20 +1,19 @@
 .cnvs-action-bar-list {
   box-sizing: border-box;
   display: flex;
-  box-shadow: var(--cnvs-sys-depth-1);
-  gap: var(--cnvs-sys-space-x4);
-  background: var(--cnvs-sys-color-bg-default);
-  border-block-start: solid 1px var(--cnvs-sys-color-border-divider);
-  padding: var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x10);
+  box-shadow: var(--cnvs-sys-depth-2);
+  gap: var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));
+  background: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
+  border-block-start: solid 0.0625rem var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));
+  padding: var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-base-size-500, 2.5rem);
   position: fixed;
   inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
+  inset-inline: 0;
 }
 
 @media (max-width: 767.5px) {
 .cnvs-action-bar-list {
-  padding: var(--cnvs-sys-space-x4);
+  padding: var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));
 }
 
 .cnvs-action-bar-list >* {

package/avatar.css

@@ -1,128 +1,130 @@
-.cnvs-avatar {
+.cnvs-avatar-name {
   box-sizing: border-box;
-  background: var(--cnvs-sys-color-bg-caution-default);
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: 0;
-  overflow: hidden;
+  text-transform: uppercase;
   cursor: default;
-  pointer-events: none;
-  border-radius: var(--cnvs-sys-shape-round);
-  width: var(--cnvs-avatar-size);
-  height: var(--cnvs-avatar-size);
 }
 
-.cnvs-avatar:focus-visible, .cnvs-avatar.focus {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)),0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
-}
 
-.cnvs-avatar :is(button) {
-  cursor: pointer;
-  pointer-events: auto;
+.cnvs-avatar-image {
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
 }
 
-.cnvs-avatar:disabled, .cnvs-avatar.disabled {
-  opacity: var(--cnvs-sys-opacity-disabled);
-}
 
-.cnvs-avatar [data-part="avatar-icon"] {
-  transition: opacity 150ms linear;
+.cnvs-base-avatar {
+  box-sizing: border-box;
+  border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
+  width: var(--cnvs-base-avatar-size, var(--cnvs-sys-size-lg, 3rem));
+  height: var(--cnvs-base-avatar-size, var(--cnvs-sys-size-lg, 3rem));
+  min-width: var(--cnvs-base-avatar-size, var(--cnvs-sys-size-lg, 3rem));
+  min-height: var(--cnvs-base-avatar-size, var(--cnvs-sys-size-lg, 3rem));
+  background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-blue-300, oklch(0.7933 0.1076 252.08 / 1)));
+  color: var(--cnvs-base-avatar-color, var(--cnvs-base-palette-blue-800, oklch(0.3908 0.128 256 / 1)));
   display: flex;
   align-items: center;
   justify-content: center;
-  --cnvs-svg-size: calc(var(--cnvs-avatar-size) * 0.625);
-  opacity: 1;
-}
-
-.cnvs-avatar [data-part="avatar-image"] {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border-radius: 999px;
-  transition: opacity 150ms linear;
-  opacity: 0;
+  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-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));
+  font-size: var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));
 }
 
 
-.cnvs-avatar.variant-light {
-  background-color: var(--cnvs-sys-color-bg-alt-default);
-}
-
-.cnvs-avatar.variant-light [data-part="avatar-icon"] {
-  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-default);
+.cnvs-base-avatar.variant-blue {
+  background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-blue-300, oklch(0.7933 0.1076 252.08 / 1)));
+  color: var(--cnvs-base-avatar-color, var(--cnvs-base-palette-blue-800, oklch(0.3908 0.128 256 / 1)));
 }
 
 
-.cnvs-avatar.variant-dark {
-  background-color: var(--cnvs-sys-color-bg-primary-default);
+.cnvs-base-avatar.variant-amber {
+  background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-amber-200, oklch(0.9191 0.1547 99.7 / 1)));
+  color: var(--cnvs-base-avatar-color, var(--cnvs-base-palette-amber-700, oklch(0.4824 0.1353 46.11 / 1)));
 }
 
-.cnvs-avatar.variant-dark [data-part="avatar-icon"] {
-  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
-}
 
-
-.cnvs-avatar.size-extra-small {
-  width: var(--cnvs-sys-space-x4);
-  height: var(--cnvs-sys-space-x4);
+.cnvs-base-avatar.variant-teal {
+  background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-teal-300, oklch(0.7836 0.0874 204.93 / 1)));
+  color: var(--cnvs-base-avatar-color, var(--cnvs-base-palette-teal-800, oklch(0.3982 0.0687 209.08 / 1)));
 }
 
-.cnvs-avatar.size-extra-small [data-part="avatar-icon"] {
-  --cnvs-svg-size: calc(var(--cnvs-sys-space-x4) * 0.625);
+
+.cnvs-base-avatar.variant-purple {
+  background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-purple-300, oklch(0.8108 0.1412 315.48 / 1)));
+  color: var(--cnvs-base-avatar-color, var(--cnvs-base-palette-purple-800, oklch(0.422 0.136 315.49 / 1)));
 }
 
 
-.cnvs-avatar.size-small {
-  width: var(--cnvs-sys-space-x6);
-  height: var(--cnvs-sys-space-x6);
+.cnvs-base-avatar.size-extra-extra-small {
+  --cnvs-base-avatar-size: var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));
+  line-height: var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem));
+  font-size: var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem));
+  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small));
 }
 
-.cnvs-avatar.size-small [data-part="avatar-icon"] {
-  --cnvs-svg-size: calc(var(--cnvs-sys-space-x6) * 0.625);
+
+.cnvs-base-avatar.size-extra-small {
+  --cnvs-base-avatar-size: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
+  line-height: var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));
+  font-size: var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));
+  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));
 }
 
 
-.cnvs-avatar.size-medium {
-  width: var(--cnvs-sys-space-x8);
-  height: var(--cnvs-sys-space-x8);
+.cnvs-base-avatar.size-small {
+  --cnvs-base-avatar-size: var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));
+  line-height: var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem));
+  font-size: var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem));
+  letter-spacing: var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small));
 }
 
-.cnvs-avatar.size-medium [data-part="avatar-icon"] {
-  --cnvs-svg-size: calc(var(--cnvs-sys-space-x8) * 0.625);
+
+.cnvs-base-avatar.size-medium {
+  --cnvs-base-avatar-size: var(var(--cnvs-base-size-600, 3rem), 3rem);
+  line-height: var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));
+  font-size: var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));
 }
 
 
-.cnvs-avatar.size-large {
-  width: var(--cnvs-sys-space-x10);
-  height: var(--cnvs-sys-space-x10);
+.cnvs-base-avatar.size-large {
+  --cnvs-base-avatar-size: var(var(--cnvs-base-size-900, 4.5rem), 4.5rem);
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  line-height: var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem));
+  font-size: var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem));
 }
 
-.cnvs-avatar.size-large [data-part="avatar-icon"] {
-  --cnvs-svg-size: calc(var(--cnvs-sys-space-x10) * 0.625);
+
+.cnvs-base-avatar.size-extra-large {
+  --cnvs-base-avatar-size: var(var(--cnvs-base-size-1200, 6rem), 6rem);
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  line-height: var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem));
+  font-size: var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem));
 }
 
 
-.cnvs-avatar.size-extra-large {
-  width: var(--cnvs-sys-space-x16);
-  height: var(--cnvs-sys-space-x16);
+.cnvs-base-avatar.size-extra-extra-large {
+  --cnvs-base-avatar-size: 7.5rem;
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  line-height: var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem));
+  font-size: var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem));
 }
 
-.cnvs-avatar.size-extra-large [data-part="avatar-icon"] {
-  --cnvs-svg-size: calc(var(--cnvs-sys-space-x16) * 0.625);
+
+.cnvs-avatar {
+  box-sizing: border-box;
 }
 
 
-.cnvs-avatar.size-extra-extra-large {
-  width: calc(var(--cnvs-sys-space-x10) * 3);
-  height: calc(var(--cnvs-sys-space-x10) * 3);
+.cnvs-avatar.image-loaded-false [data-part="avatar-image"] {
+  display: none;
 }
 
-.cnvs-avatar.size-extra-extra-large [data-part="avatar-icon"] {
-  --cnvs-svg-size: calc(calc(var(--cnvs-sys-space-x10) * 3) * 0.625);
+
+.cnvs-avatar.image-loaded {
+  background-color: var(--cnvs-sys-color-bg-default);
 }
 
 
@@ -131,18 +133,13 @@
 }
 
 
-.cnvs-avatar.object-fit-fill [data-part="avatar-image"] {
-  object-fit: fill;
-}
-
-
 .cnvs-avatar.object-fit-cover [data-part="avatar-image"] {
   object-fit: cover;
 }
 
 
-.cnvs-avatar.object-fit [data-part="avatar-image"] {
-  object-fit: scale-down;
+.cnvs-avatar.object-fit-fill [data-part="avatar-image"] {
+  object-fit: fill;
 }
 
 
@@ -152,35 +149,31 @@
 
 
 .cnvs-avatar.object-fit [data-part="avatar-image"] {
-  object-fit: -moz-initial;
+  object-fit: scale-down;
 }
 
 
-.cnvs-avatar.object-fit [data-part="avatar-image"] {
+.cnvs-avatar.object-fit-initial [data-part="avatar-image"] {
   object-fit: initial;
 }
 
 
-.cnvs-avatar.object-fit [data-part="avatar-image"] {
+.cnvs-avatar.object-fit-inherit [data-part="avatar-image"] {
   object-fit: inherit;
 }
 
 
-.cnvs-avatar.object-fit [data-part="avatar-image"] {
-  object-fit: revert;
+.cnvs-avatar.object-fit-unset [data-part="avatar-image"] {
+  object-fit: unset;
 }
 
 
 .cnvs-avatar.object-fit [data-part="avatar-image"] {
-  object-fit: unset;
+  object-fit: -moz-initial;
 }
 
 
-.cnvs-avatar.is-image-loaded [data-part="avatar-icon"] {
-  opacity: 0;
-}
-
-.cnvs-avatar.is-image-loaded [data-part="avatar-image"] {
-  opacity: 1;
+.cnvs-avatar.object-fit [data-part="avatar-image"] {
+  object-fit: revert;
 }
 

package/badge.css

@@ -1,4 +1,4 @@
-@keyframes animation-21l480 {
+@keyframes animation-jdm52 {
   from {
     transform: scale(0.85);
   }
@@ -12,37 +12,38 @@
 .cnvs-count-badge {
   box-sizing: border-box;
   align-items: center;
-  animation: animation-21l480 0.2s ease;
-  border-radius: var(--cnvs-sys-shape-round);
+  animation: animation-jdm52 0.2s ease;
+  border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
   display: inline-flex;
   font-family: var(--cnvs-sys-font-family-default);
-  font-size: var(--cnvs-sys-font-size-subtext-medium);
+  font-size: var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));
   font-weight: var(--cnvs-sys-font-weight-bold);
   height: 1.25rem;
   justify-content: center;
-  line-height: 1.25rem;
-  min-width: 1.25rem;
+  line-height: var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));
+  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));
+  min-width: var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));
   padding: 0 0.40625rem;
-  background: var(--cnvs-sys-color-fg-critical-default);
-  color: var(--cnvs-sys-color-text-inverse);
+  background: 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-count-badge.variant-inverse {
-  background: var(--cnvs-sys-color-bg-default);
-  color: var(--cnvs-sys-color-text-primary-default);
+  background: var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
+  color: var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));
 }
 
 
 
 .cnvs-count-badge.emphasis-low {
-  background: var(--cnvs-sys-color-bg-info-softer);
-  color: var(--cnvs-sys-color-fg-info-stronger);
+  background: var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11)));
+  color: var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));
 }
 
 
 .cnvs-count-badge.variant-inverse.emphasis-low {
-  background: var(--cnvs-sys-color-bg-transparent-strong);
+  background: var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));
   color: var(--cnvs-sys-color-fg-inverse);
 }
 

package/banner.css

@@ -1,25 +1,25 @@
-.cnvs-banner-icon {
+.cnvs-action-bar-text {
   box-sizing: border-box;
-  margin-inline-end: var(--cnvs-sys-space-x3);
+  text-decoration: underline;
+  display: inline;
 }
 
 
-.cnvs-banner-label {
-  box-sizing: border-box;
-  display: flex;
-  flex: 1 1 0%;
+.cnvs-action-bar-text.is-sticky {
+  display: none;
 }
 
 
-.cnvs-action-bar-text {
+.cnvs-banner-icon {
   box-sizing: border-box;
-  text-decoration: underline;
-  display: inline;
+  margin-inline-end: 0;
 }
 
 
-.cnvs-action-bar-text.is-sticky {
-  display: none;
+.cnvs-banner-label {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 0%;
 }
 
 
@@ -27,58 +27,59 @@
   box-sizing: border-box;
   font-family: var(--cnvs-sys-font-family-default),Helvetica Neue,Helvetica,Arial,sans-serif;
   font-weight: var(--cnvs-sys-font-weight-medium);
-  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);
-  padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
+  line-height: var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));
+  font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
+  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));
+  padding: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
   border: 0;
   display: flex;
   align-items: center;
   text-align: left;
-  border-start-start-radius: var(--cnvs-sys-shape-x1);
-  border-start-end-radius: var(--cnvs-sys-shape-x1);
-  border-end-start-radius: var(--cnvs-sys-shape-x1);
-  border-end-end-radius: var(--cnvs-sys-shape-x1);
+  border-start-start-radius: var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));
+  border-start-end-radius: var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));
+  border-end-start-radius: var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));
+  border-end-end-radius: var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));
+  gap: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
   cursor: pointer;
-  transition: background-color 120ms;
-  outline: var(--cnvs-sys-space-x1) solid transparent;
+  transition: background-color 120ms linear;
+  outline: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) solid transparent;
 }
 
 .cnvs-banner:focus-visible, .cnvs-banner.focus {
-  outline: var(--cnvs-sys-shape-x1) double transparent;
-  box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)),0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
+  outline: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) double 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-banner.has-errors {
-  background-color: var(--cnvs-brand-error-base);
-  color: var(--cnvs-brand-error-accent);
+  background-color: var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));
+  color: var(--cnvs-sys-color-fg-inverse);
 }
 
 .cnvs-banner.has-errors:hover, .cnvs-banner.has-errors.hover {
-  background: var(--cnvs-brand-error-dark);
+  background: color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));
 }
 
 .cnvs-banner.has-errors [data-part="exclamation-circle-icon"] {
-  --cnvs-system-icon-accent-color: currentColor;
-  --cnvs-system-icon-color: currentColor;
-  --cnvs-system-icon-background-color: none;
+  --cnvs-system-icon-accent-color: var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
+  --cnvs-system-icon-background-color: var(--cnvs-sys-color-fg-inverse);
 }
 
 
 .cnvs-banner.has-errors-false {
-  background-color: var(--cnvs-brand-alert-base);
-  color: var(--cnvs-brand-alert-accent);
+  background-color: var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1));
+  color: var(--cnvs-sys-color-fg-contrast-default);
 }
 
 .cnvs-banner.has-errors-false:hover, .cnvs-banner.has-errors-false.hover {
-  background: var(--cnvs-brand-alert-dark);
+  background: color-mix(in srgb, var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1)) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));
 }
 
 .cnvs-banner.has-errors-false [data-part="exclamation-triangle-icon"] {
-  --cnvs-system-icon-accent-color: currentColor;
-  --cnvs-system-icon-color: currentColor;
-  --cnvs-system-icon-background-color: none;
+  --cnvs-system-icon-accent-color: var(--cnvs-sys-color-fg-inverse, currentColor);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1));
+  --cnvs-system-icon-background-color: var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1));
 }
 
 

package/breadcrumbs.css

@@ -1,43 +1,26 @@
-.cnvs-breadcrumbs-list {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  display: inline-flex;
-  align-items: center;
-  min-height: var(--cnvs-sys-space-x10);
-  list-style: none;
-  width: 100%;
-}
-
-
-.cnvs-breadcrumbs-overflow-button {
+.cnvs-breadcrumbs-current-item {
   box-sizing: border-box;
-  align-items: center;
-  display: flex;
-  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-default);
-  --cnvs-svg-size: 1.25rem;
-}
-
-.cnvs-breadcrumbs-overflow-button [data-part="breadcrumbs-overflow-button-chevron-right-icon"] {
-  height: var(--cnvs-sys-space-x8);
-  width: var(--cnvs-sys-space-x8);
-  justify-content: center;
-  align-items: center;
-  display: inline-flex;
-}
-
-.cnvs-breadcrumbs-overflow-button [data-part="breadcrumbs-overflow-button-chevron-right-icon"] :dir(rtl) {
-  transform: scaleX(-1);
+  font-family: var(--cnvs-sys-font-family-default);
+  font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
+  font-weight: var(--cnvs-sys-font-weight-medium);
+  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));
+  line-height: var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));
+  color: var(--cnvs-sys-color-fg-default);
+  display: inline-block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: var(--cnvs-breadcrumbs-current-item-max-width);
 }
 
 
 .cnvs-breadcrumbs-link {
   box-sizing: border-box;
   font-family: var(--cnvs-sys-font-family-default);
+  font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
   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);
+  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));
+  line-height: var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -50,13 +33,13 @@
   align-items: center;
   display: inline-flex;
   white-space: nowrap;
-  --cnvs-svg-size: 1.25rem;
-  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-default);
+  --cnvs-svg-size: var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-default);
 }
 
 .cnvs-breadcrumbs-item [data-part="breadcrumbs-item-chevron-right-icon"] {
-  height: var(--cnvs-sys-space-x8);
-  width: var(--cnvs-sys-space-x8);
+  height: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
+  width: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
   justify-content: center;
   align-items: center;
   display: inline-flex;
@@ -67,19 +50,15 @@
 }
 
 
-.cnvs-breadcrumbs-current-item {
+.cnvs-breadcrumbs-list {
   box-sizing: border-box;
-  font-family: var(--cnvs-sys-font-family-default);
-  font-weight: var(--cnvs-sys-font-weight-medium);
-  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-default);
-  display: inline-block;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  max-width: var(--cnvs-breadcrumbs-current-item-max-width);
+  padding: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) 0;
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--cnvs-sys-size-lg, 3rem);
+  list-style: none;
+  width: 100%;
 }
 
 
@@ -96,3 +75,24 @@
   max-height: 18.5rem;
 }
 
+
+.cnvs-breadcrumbs-overflow-button {
+  box-sizing: border-box;
+  align-items: center;
+  display: flex;
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-default);
+  --cnvs-svg-size: var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));
+}
+
+.cnvs-breadcrumbs-overflow-button [data-part="breadcrumbs-overflow-button-chevron-right-icon"] {
+  height: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
+  width: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.cnvs-breadcrumbs-overflow-button [data-part="breadcrumbs-overflow-button-chevron-right-icon"] :dir(rtl) {
+  transform: scaleX(-1);
+}
+