@workday/canvas-kit-css 16.0.0-alpha.0477-next.0 → 16.0.0-alpha.0479-next.0

package/breadcrumbs.css

@@ -2,10 +2,10 @@
   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-medium);
+  font-weight: var(--cnvs-sys-font-weight-normal);
   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);
+  color: var(--cnvs-sys-color-fg-muted-default);
   display: inline-block;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -21,12 +21,24 @@
   font-weight: var(--cnvs-sys-font-weight-normal);
   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);
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   max-width: var(--cnvs-breadcrumbs-link-max-width);
 }
 
+.cnvs-breadcrumbs-link:hover, .cnvs-breadcrumbs-link.hover {
+  color: var(--cnvs-sys-color-fg-strong);
+  background-color: var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));
+  text-decoration: underline;
+}
+
+.cnvs-breadcrumbs-link:active, .cnvs-breadcrumbs-link.active {
+  color: var(--cnvs-sys-color-fg-strong);
+  background-color: var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));
+}
+
 
 .cnvs-breadcrumbs-item {
   box-sizing: border-box;
@@ -34,7 +46,7 @@
   display: inline-flex;
   white-space: nowrap;
   --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-system-icon-color: var(--cnvs-sys-color-fg-muted-default);
 }
 
 .cnvs-breadcrumbs-item [data-part="breadcrumbs-item-chevron-right-icon"] {
@@ -80,10 +92,14 @@
   box-sizing: border-box;
   align-items: center;
   display: flex;
-  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-default);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-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"] {
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
+}
+
 .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));

package/button.css

@@ -494,7 +494,7 @@
   box-sizing: border-box;
   font-family: var(--cnvs-sys-font-family-default);
   text-decoration: underline;
-  color: var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));
+  color: var(--cnvs-sys-color-fg-link-default);
   cursor: pointer;
   border-radius: 0.125rem;
   padding: 0 0.125rem;
@@ -504,8 +504,8 @@
 }
 
 .cnvs-hyperlink:hover, .cnvs-hyperlink.hover {
-  color: var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));
-  background: var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));
+  color: var(--cnvs-sys-color-fg-link-hover);
+  background: var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));
 }
 
 .cnvs-hyperlink:focus, .cnvs-hyperlink.focus, .cnvs-hyperlink:focus-visible {
@@ -513,9 +513,17 @@
   outline: none;
 }
 
+@media (forced-colors: active) {
+.cnvs-hyperlink:focus, .cnvs-hyperlink.focus, .cnvs-hyperlink:focus-visible {
+  outline: solid 0.125rem ButtonBorder;
+}
+
+
+}
+
 .cnvs-hyperlink:active, .cnvs-hyperlink.active {
-  color: var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));
-  background: var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));
+  color: var(--cnvs-sys-color-fg-link-hover);
+  background: var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));
 }
 
 
@@ -533,33 +541,29 @@
 }
 
 .cnvs-hyperlink.variant-inverse:active, .cnvs-hyperlink.variant-inverse.active {
-  color: var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));
+  color: var(--cnvs-sys-color-fg-link-hover);
   background: var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1));
 }
 
 
-.cnvs-hyperlink.variant-standalone {
-  text-decoration: none;
+.cnvs-hyperlink.variant-secondary {
+  color: var(--cnvs-sys-color-fg-default);
 }
 
-
-.cnvs-hyperlink.variant-standalone-inverse {
-  text-decoration: none;
-  color: var(--cnvs-sys-color-fg-inverse);
+.cnvs-hyperlink.variant-secondary:hover, .cnvs-hyperlink.variant-secondary.hover {
+  color: var(--cnvs-sys-color-fg-strong);
+  background: var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));
 }
 
-.cnvs-hyperlink.variant-standalone-inverse:hover, .cnvs-hyperlink.variant-standalone-inverse.hover {
-  color: var(--cnvs-sys-color-fg-inverse);
-  background: rgba(255, 255, 255, 0.1);
+.cnvs-hyperlink.variant-secondary:active, .cnvs-hyperlink.variant-secondary.active {
+  color: var(--cnvs-sys-color-fg-strong);
+  background: var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));
 }
 
-.cnvs-hyperlink.variant-standalone-inverse:focus, .cnvs-hyperlink.variant-standalone-inverse.focus, .cnvs-hyperlink.variant-standalone-inverse:focus-visible {
-  box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
-}
 
-.cnvs-hyperlink.variant-standalone-inverse:active, .cnvs-hyperlink.variant-standalone-inverse.active {
-  color: var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));
-  background: var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1));
+
+.cnvs-hyperlink.link-type-standalone {
+  text-decoration: none;
 }
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-css",
-  "version": "16.0.0-alpha.0477-next.0",
+  "version": "16.0.0-alpha.0479-next.0",
   "type": "module",
   "description": "The parent module that contains all Workday Canvas Kit CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
@@ -26,5 +26,5 @@
     "components",
     "workday"
   ],
-  "gitHead": "bae01a1c78cf7e68292fc4d37368147af79932af"
+  "gitHead": "1345e0f544f5bbd437409e92c3002f77e866306c"
 }

package/pagination.css

@@ -40,6 +40,11 @@
   box-sizing: border-box;
 }
 
+.cnvs-control-button>span {
+  --cnvs-svg-size: var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4, 1rem));
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
+}
+
 .cnvs-control-button:dir(rtl) .wd-icon {
   transform: scaleX(-1);
 }
@@ -50,6 +55,7 @@
   display: flex;
   align-items: center;
   gap: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
+  margin-inline-start: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
 }
 
 .cnvs-pagination-go-to-form :dir(rtl) {
@@ -67,6 +73,7 @@
   box-sizing: border-box;
   min-width: 3.4375rem;
   width: 3.4375rem;
+  text-align: center;
 }
 
 
@@ -79,13 +86,21 @@
   --cnvs-button-label: var(--cnvs-sys-color-fg-default);
 }
 
-.cnvs-pagination-page-button:hover, .cnvs-pagination-page-button.hover {
-  --cnvs-button-background: var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));
+.cnvs-pagination-page-button:focus-visible, .cnvs-pagination-page-button.focus {
+  --cnvs-button-background: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
   --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
+  --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
+  --cnvs-button-box-shadow-outer: var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));
 }
 
-.cnvs-pagination-page-button:active, .cnvs-pagination-page-button.active, .cnvs-pagination-page-button:focus-visible, .cnvs-pagination-page-button.focus {
-  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
+.cnvs-pagination-page-button:hover, .cnvs-pagination-page-button.hover {
+  --cnvs-button-background: var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));
+  --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
+}
+
+.cnvs-pagination-page-button:active, .cnvs-pagination-page-button.active {
+  --cnvs-button-background: var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));
+  --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
 }
 
 .cnvs-pagination-page-button:disabled, .cnvs-pagination-page-button.disabled {
@@ -99,6 +114,15 @@
   --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
 }
 
+@media (prefers-contrast: more) {
+.cnvs-pagination-page-button.toggled {
+  outline: 0.125rem solid transparent;
+  outline-offset: -0.0625rem;
+}
+
+
+}
+
 .cnvs-pagination-page-button.toggled:hover, .cnvs-pagination-page-button.toggled.hover, .cnvs-pagination-page-button.toggled:active, .cnvs-pagination-page-button.toggled.active, .cnvs-pagination-page-button.toggled:focus-visible, .cnvs-pagination-page-button.toggled.focus {
   --cnvs-button-background: var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
   --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);

package/text-input.css

@@ -118,6 +118,7 @@
   height: var(--cnvs-input-group-inner-height);
   inset-inline-start: var(--cnvs-input-group-inner-inset-inline-start);
   inset-inline-end: var(--cnvs-input-group-inner-inset-inline-end);
+  --cnvs-svg-size: var(--cnvs-component-system-icon-size-xs);
 }
 
 
@@ -143,6 +144,15 @@
 }
 
 
+.cnvs-clear-button {
+  box-sizing: border-box;
+}
+
+.cnvs-clear-button svg {
+  --cnvs-svg-size: var(--cnvs-component-system-icon-size-xs);
+}
+
+
 .cnvs-input-group {
   box-sizing: border-box;
   display: flex;