@workday/canvas-kit-css 11.0.0-alpha.761-next.0 → 11.0.0-alpha.765-next.0

package/badge.css

@@ -10,10 +10,10 @@
 }
 
 .cnvs-count-badge {
+  box-sizing: border-box;
   align-items: center;
   animation: animation-d9cb82 0.2s ease;
   border-radius: var(--cnvs-sys-shape-round);
-  box-sizing: border-box;
   display: inline-flex;
   font-family: var(--cnvs-sys-font-family-default);
   font-size: var(--cnvs-sys-font-size-subtext-medium);

package/card.css

@@ -1,4 +1,5 @@
 .cnvs-card-heading {
+  box-sizing: border-box;
   color: var(--cnvs-sys-color-text-strong);
   font-weight: var(--cnvs-sys-font-weight-bold);
   margin-bottom: var(--cnvs-sys-space-x6);
@@ -6,8 +7,13 @@
 }
 
 
+.cnvs-card-body {
+  box-sizing: border-box;
+}
+
 
 .cnvs-card {
+  box-sizing: border-box;
   box-shadow: var(--cnvs-sys-depth-1);
   padding: var(--cnvs-sys-space-x8);
   background-color: var(--cnvs-sys-color-bg-default);

package/checkbox.css

@@ -1,4 +1,5 @@
 .cnvs-checkbox-ripple {
+  box-sizing: border-box;
   border-radius: var(--cnvs-sys-shape-round);
   box-shadow: none;
   height: calc(var(--cnvs-sys-space-x4) + 0.125rem);
@@ -10,6 +11,7 @@
 
 
 .cnvs-checkbox-container {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   min-height: var(--cnvs-sys-space-x6);
@@ -30,10 +32,10 @@
 
 
 .cnvs-checkbox-background {
+  box-sizing: border-box;
   align-items: center;
-  background-color: var(--cnvs-base-palette-french-vanilla-100);
+  background-color: var(--cnvs-sys-color-bg-default);
   border-radius: var(--cnvs-sys-shape-half);
-  box-sizing: border-box;
   display: flex;
   height: calc(var(--cnvs-sys-space-x4) + 0.125rem);
   justify-content: center;
@@ -42,29 +44,30 @@
   position: absolute;
   transition: border 200ms ease,background 200ms;
   width: calc(var(--cnvs-sys-space-x4) + 0.125rem);
-  border: 0.0625rem solid var(--cnvs-base-palette-licorice-200);
+  border: 0.0625rem solid var(--cnvs-sys-color-border-input-default);
 }
 
 
 .cnvs-checkbox-background--error-error {
-  --cnvs-background-inner: var(--cnvs-brand-error-base, var(--cnvs-base-palette-cinnamon-500));
-  --cnvs-background-outer: transparent;
+  --cnvs-checkbox-background-errorRingColorInner: var(--cnvs-brand-error-base);
+  --cnvs-checkbox-background-errorRingColorOuter: transparent;
 }
 
 
 .cnvs-checkbox-background--error-alert {
-  --cnvs-background-inner: var(--cnvs-brand-alert-base, var(--cnvs-base-palette-cantaloupe-600));
-  --cnvs-background-outer: var(--cnvs-brand-alert-darkest, var(--cnvs-base-palette-cantaloupe-400));
+  --cnvs-checkbox-background-errorRingColorInner: var(--cnvs-brand-alert-base);
+  --cnvs-checkbox-background-errorRingColorOuter: var(--cnvs-brand-alert-darkest);
 }
 
 
 .cnvs-checkbox-check {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   max-width: 100%;
   pointer-events: none;
   transition: transform 200ms ease,opacity 200ms ease;
-  opacity: 0;
+  opacity: var(--cnvs-sys-opacity-zero);
   transform: scale(0.5);
 }
 
@@ -75,30 +78,37 @@
 
 
 .cnvs-checkbox-check--checked {
-  opacity: 1;
+  --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
+  opacity: var(--cnvs-sys-opacity-full);
   transform: scale(1);
 }
 
 
 .cnvs-checkbox-check--indeterminate {
-  opacity: 1;
+  opacity: var(--cnvs-sys-opacity-full);
   transform: scale(1);
 }
 
 
+.cnvs-checkbox-check--variant-inverse {
+  --cnvs-system-icon-color: var(--cnvs-brand-primary-base);
+}
+
 .cnvs-checkbox-check--variant-inverse>div {
   background-color: var(--cnvs-brand-primary-base);
 }
 
 
 .cnvs-indeterminate-box {
-  width: calc(var(--cnvs-sys-space-x2) + 0.125rem);
+  box-sizing: border-box;
+  width: 0.625rem;
   height: calc(var(--cnvs-sys-space-x1) / 2);
   background-color: var(--cnvs-brand-primary-accent);
 }
 
 
 .cnvs-checkbox-input {
+  box-sizing: border-box;
   border-radius: var(--cnvs-sys-shape-half);
   width: var(--cnvs-sys-space-x6);
   height: var(--cnvs-sys-space-x6);
@@ -106,19 +116,19 @@
   margin-top: calc(0.1875rem * -1);
   margin-inline-start: calc(0.1875rem * -1);
   position: absolute;
-  opacity: 0;
+  opacity: var(--cnvs-sys-opacity-zero);
 }
 
 .cnvs-checkbox-input:not(:disabled) {
   cursor: pointer;
 }
 
-.cnvs-checkbox-input:where(:hover, .hover)~span:first-of-type {
-  box-shadow: 0 0 0 0.4375rem var(--cnvs-base-palette-soap-200);
+.cnvs-checkbox-input:where(:hover,.hover)~span:first-of-type {
+  box-shadow: 0 0 0 0.4375rem var(--cnvs-sys-color-bg-alt-soft);
 }
 
 .cnvs-checkbox-input:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
-  border-color: var(--cnvs-base-palette-licorice-500);
+  border-color: var(--cnvs-sys-color-border-input-strong);
 }
 
 .cnvs-checkbox-input:where(:checked, :indeterminate)~div:first-of-type {
@@ -127,9 +137,9 @@
 }
 
 .cnvs-checkbox-input:disabled~div:first-of-type {
-  border-color: var(--cnvs-base-palette-licorice-100);
-  background-color: var(--cnvs-base-palette-soap-100);
-  opacity: 1;
+  border-color: var(--cnvs-sys-color-border-input-disabled);
+  background-color: var(--cnvs-sys-color-bg-alt-softer);
+  opacity: var(--cnvs-sys-opacity-full);
 }
 
 .cnvs-checkbox-input:disabled:where(:checked, :indeterminate)~div:first-of-type {
@@ -163,36 +173,36 @@
 }
 
 .cnvs-checkbox-input--variant-inverse~div:first-of-type {
-  border-color: var(--cnvs-base-palette-soap-300);
+  border-color: var(--cnvs-sys-color-border-input-inverse);
 }
 
 .cnvs-checkbox-input--variant-inverse:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
-  border-color: var(--cnvs-base-palette-soap-300);
+  border-color: var(--cnvs-sys-color-border-input-inverse);
 }
 
 .cnvs-checkbox-input--variant-inverse:where(:checked, :indeterminate)~div:first-of-type {
-  border-color: var(--cnvs-base-palette-soap-300);
-  background-color: var(--cnvs-base-palette-french-vanilla-100);
+  border-color: var(--cnvs-sys-color-border-input-inverse);
+  background-color: var(--cnvs-sys-color-bg-default);
 }
 
 .cnvs-checkbox-input--variant-inverse:disabled~div:first-of-type {
-  background-color: var(--cnvs-base-palette-soap-300);
+  background-color: var(--cnvs-sys-color-bg-alt-default);
   opacity: var(--cnvs-sys-opacity-disabled);
 }
 
 .cnvs-checkbox-input--variant-inverse:disabled:where(:checked, :indeterminate)~div:first-of-type {
-  border-color: var(--cnvs-base-palette-soap-300);
-  background-color: var(--cnvs-base-palette-soap-300);
+  border-color: var(--cnvs-sys-color-border-input-inverse);
+  background-color: var(--cnvs-sys-color-bg-alt-default);
 }
 
 .cnvs-checkbox-input--variant-inverse:where(:focus-visible, .focus)~div:first-of-type {
-  border-color: var(--cnvs-base-palette-black-pepper-400);
-  box-shadow: 0 0 0 0px var(--cnvs-base-palette-black-pepper-400),0 0 0 2px var(--cnvs-base-palette-french-vanilla-100);
+  border-color: var(--cnvs-sys-color-border-contrast-default);
+  box-shadow: 0 0 0 0px var(--cnvs-sys-color-fg-strong),0 0 0 2px var(--cnvs-sys-color-fg-inverse);
 }
 
 .cnvs-checkbox-input--variant-inverse:checked:focus-visible~div:first-of-type, .cnvs-checkbox-input--variant-inverse:checked.focus~div:first-of-type, .cnvs-checkbox-input--variant-inverse:indeterminate:focus-visible~div:first-of-type, .cnvs-checkbox-input--variant-inverse:indeterminate.focus~div:first-of-type {
-  box-shadow: 0 0 0 2px var(--cnvs-base-palette-black-pepper-400),0 0 0 4px var(--cnvs-base-palette-french-vanilla-100);
-  border-color: var(--cnvs-base-palette-french-vanilla-100);
+  box-shadow: 0 0 0 2px var(--cnvs-sys-color-fg-strong),0 0 0 4px var(--cnvs-sys-color-fg-inverse);
+  border-color: var(--cnvs-sys-color-border-inverse);
 }
 
 
@@ -201,58 +211,30 @@
 }
 
 
-.cnvs-checkbox-input--error-error:not(:where(:focus-visible, .focus))~div:first-of-type {
-  border-color: var(--cnvs-background-inner);
-  box-shadow: 0 0 0 0.0625rem var(--cnvs-background-inner),0 0 0 0.125rem var(--cnvs-background-outer);
-}
-
-.cnvs-checkbox-input--error-error:where(:checked, :indeterminate)~div:first-of-type {
-  border-color: transparent;
-  box-shadow: 0 0 0 0.125rem var(--cnvs-base-palette-french-vanilla-100),0 0 0 0.25rem var(--cnvs-background-inner),0 0 0 0.3125rem var(--cnvs-background-outer);
-}
-
-.cnvs-checkbox-input--error-error:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
-  border-color: var(--cnvs-background-inner);
-}
-
-
-.cnvs-checkbox-input--error-alert:not(:where(:focus-visible, .focus))~div:first-of-type {
-  border: 0.0625rem solid var(--cnvs-background-inner);
-  box-shadow: 0 0 0 0.0625rem var(--cnvs-background-inner),0 0 0 0.125rem var(--cnvs-background-outer);
-}
-
-.cnvs-checkbox-input--error-alert:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
-  border-color: var(--cnvs-background-inner);
+.cnvs-checkbox-input--error:not(:where(:focus-visible, .focus))~div:first-of-type {
+  border-color: var(--cnvs-checkbox-background-errorRingColorInner);
+  box-shadow: 0 0 0 0.0625rem var(--cnvs-checkbox-background-errorRingColorInner),0 0 0 0.125rem var(--cnvs-checkbox-background-errorRingColorOuter);
 }
 
-.cnvs-checkbox-input--error-alert:where(:checked, :indeterminate)~div:first-of-type {
+.cnvs-checkbox-input--error:where(:checked, :indeterminate)~div:first-of-type {
   border-color: transparent;
-  box-shadow: 0 0 0 0.125rem var(--cnvs-base-palette-french-vanilla-100),0 0 0 0.25rem var(--cnvs-background-inner),0 0 0 0.3125rem var(--cnvs-background-outer);
-}
-
-
-.cnvs-checkbox-input--variant-inverse.cnvs-checkbox-input--error-error:not(:where(:focus-visible, .focus))~div:first-of-type {
-  border: 0.0625rem solid var(--cnvs-base-palette-soap-300);
-}
-
-.cnvs-checkbox-input--variant-inverse.cnvs-checkbox-input--error-error:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
-  border-color: var(--cnvs-base-palette-soap-300);
+  box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-fg-inverse),0 0 0 0.25rem var(--cnvs-checkbox-background-errorRingColorInner),0 0 0 0.3125rem var(--cnvs-checkbox-background-errorRingColorOuter);
 }
 
-.cnvs-checkbox-input--variant-inverse.cnvs-checkbox-input--error-error:where(:checked, :indeterminate)~div:first-of-type {
-  border-color: var(--cnvs-base-palette-soap-300);
+.cnvs-checkbox-input--error:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
+  border-color: var(--cnvs-checkbox-background-errorRingColorInner);
 }
 
 
-.cnvs-checkbox-input--variant-inverse.cnvs-checkbox-input--error-alert:not(:where(:focus-visible, .focus))~div:first-of-type {
-  border: 0.0625rem solid var(--cnvs-base-palette-soap-300);
+.cnvs-checkbox-input--variant-inverse.cnvs-checkbox-input--error:not(:where(:focus-visible, .focus))~div:first-of-type {
+  border: 0.0625rem solid var(--cnvs-sys-color-border-input-inverse);
 }
 
-.cnvs-checkbox-input--variant-inverse.cnvs-checkbox-input--error-alert:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
-  border-color: var(--cnvs-base-palette-soap-300);
+.cnvs-checkbox-input--variant-inverse.cnvs-checkbox-input--error:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
+  border-color: var(--cnvs-sys-color-border-input-inverse);
 }
 
-.cnvs-checkbox-input--variant-inverse.cnvs-checkbox-input--error-alert:where(:checked, :indeterminate)~div:first-of-type {
-  border-color: var(--cnvs-base-palette-soap-300);
+.cnvs-checkbox-input--variant-inverse.cnvs-checkbox-input--error:where(:checked, :indeterminate)~div:first-of-type {
+  border-color: var(--cnvs-sys-color-border-input-inverse);
 }
 

package/collection.css

@@ -14,6 +14,7 @@
 
 
 .cnvs-list-box {
+  box-sizing: border-box;
   flex-direction: column;
   margin-top: var(--cnvs-sys-space-zero);
   margin-bottom: var(--cnvs-sys-space-zero);

package/combobox.css

@@ -1,10 +1,16 @@
+.cnvs-combobox-menu-list {
+  box-sizing: border-box;
+}
+
 
 .cnvs-combobox-menu-item-icon {
+  box-sizing: border-box;
   align-self: start;
 }
 
 
 .cnvs-combobox-menu-item {
+  box-sizing: border-box;
   min-height: var(--cnvs-sys-space-x10);
 }
 

package/icon.css

@@ -16,6 +16,7 @@
 
 
 .cnvs-accent-icon {
+  box-sizing: border-box;
   --cnvs-svg-size: 3.5rem;
 }
 
@@ -34,6 +35,7 @@
 
 
 .cnvs-applet-icon {
+  box-sizing: border-box;
   --cnvs-svg-size: 5.75rem;
 }
 
@@ -64,6 +66,7 @@
 
 .cnvs-system-icon {
   --cnvs-system-icon-backgroundColor: transparent;
+  box-sizing: border-box;
 }
 
 .cnvs-system-icon .wd-icon-fill {
@@ -92,6 +95,7 @@
 
 
 .cnvs-system-icon-circle {
+  box-sizing: border-box;
   background: var(--cnvs-system-icon-circle-backgroundColor, var(--cnvs-base-palette-soap-200));
   display: flex;
   align-items: center;
@@ -99,7 +103,6 @@
   padding: var(--cnvs-sys-space-zero);
   border: none;
   border-radius: var(--cnvs-sys-shape-round);
-  box-sizing: border-box;
   overflow: hidden;
   width: var(--cnvs-system-icon-circle-containerSize, var(--cnvs-sys-space-x10));
   height: var(--cnvs-system-icon-circle-containerSize, var(--cnvs-sys-space-x10));
@@ -113,6 +116,10 @@
 }
 
 
+.cnvs-graphic {
+  box-sizing: border-box;
+}
+
 .cnvs-graphic svg {
   width: var(--cnvs-graphic-width, 100%);
   height: var(--cnvs-graphic-height, 100%);

package/menu.css

@@ -2,6 +2,7 @@
   --cnvs-menu-card-minWidth: 0.0625rem;
   --cnvs-menu-card-transformOriginVertical: top;
   --cnvs-menu-card-transformOriginHorizontal: left;
+  box-sizing: border-box;
   font-family: var(--cnvs-base-font-family-50);
   font-weight: var(--cnvs-base-font-weight-400);
   line-height: var(--cnvs-base-line-height-100);
@@ -16,7 +17,6 @@
   max-width: calc(100vw - var(--cnvs-sys-space-x8));
   box-shadow: var(--cnvs-sys-depth-3);
   min-width: var(--cnvs-menu-card-minWidth);
-  box-sizing: border-box;
   transform-origin: var(--cnvs-menu-card-transformOriginVertical) var(--cnvs-menu-card-transformOriginHorizontal);
 }
 
@@ -26,6 +26,7 @@
 
 
 .cnvs-menu-list {
+  box-sizing: border-box;
   background: var(--cnvs-base-palette-french-vanilla-100);
   border-radius: var(--cnvs-sys-shape-zero);
   padding: var(--cnvs-sys-space-zero);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-css",
-  "version": "11.0.0-alpha.761-next.0",
+  "version": "11.0.0-alpha.765-next.0",
   "description": "The parent module that contains all Workday Canvas Kit CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -25,5 +25,5 @@
     "components",
     "workday"
   ],
-  "gitHead": "fce337a36c94589dfa4b7cd04f9b3557a044b609"
+  "gitHead": "75a590b82446ba010969a3beb9a74df0571b163c"
 }

package/select.css

@@ -1,4 +1,5 @@
 .cnvs-select-input {
+  box-sizing: border-box;
   caret-color: transparent;
   cursor: default;
 }
@@ -9,12 +10,14 @@
 
 
 .cnvs-select-icons {
+  box-sizing: border-box;
   position: absolute;
   pointer-events: none;
 }
 
 
 .cnvs-hidden-select-input {
+  box-sizing: border-box;
   position: absolute;
   top: var(--cnvs-sys-space-zero);
   bottom: var(--cnvs-sys-space-zero);

package/switch.css

@@ -1,4 +1,5 @@
 .cnvs-switch-container {
+  box-sizing: border-box;
   position: relative;
   height: var(--cnvs-sys-space-x6);
   width: var(--cnvs-sys-space-x8);
@@ -6,6 +7,7 @@
 
 
 .cnvs-switch-input {
+  box-sizing: border-box;
   display: flex;
   position: absolute;
   height: var(--cnvs-sys-space-x6);
@@ -69,6 +71,7 @@
 
 
 .cnvs-switch-circle {
+  box-sizing: border-box;
   width: var(--cnvs-sys-space-x3);
   height: var(--cnvs-sys-space-x3);
   border-radius: var(--cnvs-sys-shape-round);

package/table.css

@@ -1,8 +1,8 @@
 .cnvs-table-head {
+  box-sizing: border-box;
   display: grid;
   background-color: var(--cnvs-base-palette-soap-100);
   min-height: 3rem;
-  box-sizing: border-box;
 }
 
 .cnvs-table-head th:first-of-type {
@@ -15,8 +15,8 @@
 
 
 .cnvs-table-body {
-  display: grid;
   box-sizing: border-box;
+  display: grid;
 }
 
 .cnvs-table-body tr:last-of-type td, .cnvs-table-body tr:last-of-type th {
@@ -37,14 +37,15 @@
 
 
 .cnvs-table-row {
+  box-sizing: border-box;
   display: grid;
   grid-auto-flow: column;
   grid-template-columns: repeat(var(--cnvs-children-cellNumber), minmax(10rem, 1fr));
-  box-sizing: border-box;
 }
 
 
 .cnvs-table-header {
+  box-sizing: border-box;
   display: grid;
   align-items: center;
   background-color: var(--cnvs-base-palette-french-vanilla-100);
@@ -54,11 +55,11 @@
   padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
   word-break: break-word;
   font-weight: var(--cnvs-sys-font-weight-medium);
-  box-sizing: border-box;
 }
 
 
 .cnvs-table-cell {
+  box-sizing: border-box;
   display: grid;
   align-items: center;
   background-color: var(--cnvs-base-palette-french-vanilla-100);
@@ -68,25 +69,25 @@
   min-height: 3.5rem;
   padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
   word-break: break-word;
-  box-sizing: border-box;
 }
 
 
 .cnvs-table-footer {
-  display: grid;
   box-sizing: border-box;
+  display: grid;
 }
 
 
 .cnvs-table-caption {
+  box-sizing: border-box;
   display: flex;
   border-bottom: 0.0625rem solid var(--cnvs-base-palette-soap-500);
   padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
-  box-sizing: border-box;
 }
 
 
 .cnvs-table {
+  box-sizing: border-box;
   font-family: var(--cnvs-base-font-family-50);
   font-weight: var(--cnvs-base-font-weight-400);
   line-height: var(--cnvs-base-line-height-100);
@@ -97,6 +98,5 @@
   border-radius: var(--cnvs-sys-shape-x2);
   overflow: auto;
   color: var(--cnvs-base-palette-black-pepper-300);
-  box-sizing: border-box;
 }
 

package/text.css

@@ -1,3 +1,7 @@
+.cnvs-text {
+  box-sizing: border-box;
+}
+
 
 .cnvs-text--type-level-title-large {
   font-family: var(--cnvs-base-font-family-50);
@@ -127,6 +131,7 @@
 
 
 .cnvs-label-text {
+  box-sizing: border-box;
   font-family: var(--cnvs-base-font-family-50);
   font-weight: var(--cnvs-base-font-weight-400);
   line-height: var(--cnvs-base-line-height-100);