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

package/menu.css

@@ -1,22 +1,77 @@
+.cnvs-menu-card {
+  --cnvs-menu-card-min-width: 0.0625rem;
+  --cnvs-menu-card-transform-origin-vertical: top;
+  --cnvs-menu-card-transform-origin-horizontal: left;
+  box-sizing: border-box;
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-normal);
+  font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
+  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-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));
+  color: var(--cnvs-sys-color-fg-default);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  transition: transform ease-out 150ms;
+  padding: var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));
+  border-radius: var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));
+  max-width: calc(100vw - var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem)));
+  box-shadow: var(--cnvs-sys-depth-3);
+  min-width: var(--cnvs-menu-card-min-width);
+  max-height: var(--cnvs-menu-card-max-height);
+  transform-origin: var(--cnvs-menu-card-transform-origin-vertical) var(--cnvs-menu-card-transform-origin-horizontal);
+}
+
+.wd-no-animation .cnvs-menu-card {
+  animation: none;
+}
+
+
+.cnvs-menu-divider {
+  box-sizing: border-box;
+  display: block;
+  height: 0.0625rem;
+  border: none;
+  border-top: 0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));
+  margin: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));
+}
+
+
+.cnvs-menu-group-heading {
+  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));
+  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-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));
+  padding: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
+}
+
+
 .cnvs-menu-item {
   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);
+  font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
+  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-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));
   display: flex;
   align-items: center;
   width: 100%;
-  gap: var(--cnvs-sys-space-x4);
-  padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
+  gap: var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));
+  padding: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
   cursor: pointer;
   color: var(--cnvs-sys-color-fg-default);
   border-width: 0;
+  border-radius: var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));
   text-align: start;
   transition: background-color 80ms,color 80ms;
   background-color: inherit;
-  min-height: var(--cnvs-sys-space-x10);
+  min-height: var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));
   overflow-wrap: anywhere;
   --cnvs-system-icon-color: currentColor;
 }
@@ -31,8 +86,8 @@
 }
 
 .cnvs-menu-item[aria-selected=true] {
-  color: var(--cnvs-brand-primary-dark);
-  background-color: var(--cnvs-brand-primary-lightest);
+  color: var(--cnvs-sys-color-brand-fg-primary-strong, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));
+  background-color: var(--cnvs-sys-color-brand-surface-primary-strong, oklch(0.6152 0.2108 256.1 / 0.11));
 }
 
 .cnvs-menu-item[aria-selected=true] :where([data-part="menu-item-selected"]) {
@@ -40,27 +95,27 @@
 }
 
 .cnvs-menu-item[aria-selected=true]:where(.focus, :focus-visible) {
-  --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
+  --cnvs-system-icon-color: currentColor;
   outline: none;
-  background-color: var(--cnvs-brand-primary-base);
-  color: var(--cnvs-system-icon-color);
+  background-color: var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
+  color: var(--cnvs-sys-color-fg-inverse);
 }
 
 .cnvs-menu-item:is(.hover, :hover) {
   color: var(--cnvs-sys-color-fg-strong);
-  background-color: var(--cnvs-brand-neutral-lightest);
+  background-color: var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));
 }
 
 .cnvs-menu-item:is(.focus, :focus-visible) {
-  color: var(--cnvs-brand-primary-accent);
-  background-color: var(--cnvs-brand-primary-base);
+  color: var(--cnvs-sys-color-fg-inverse);
+  background-color: var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
   outline: 0.125rem solid transparent;
   outline-offset: -0.125rem;
 }
 
 .cnvs-menu-item:is(:disabled, [aria-disabled=true]) {
-  color: var(--cnvs-sys-color-fg-disabled);
   cursor: default;
+  opacity: var(--cnvs-sys-opacity-disabled);
 }
 
 .cnvs-menu-item:is(:disabled, [aria-disabled=true]):where(.hover, :hover, [aria-selected=true]) {
@@ -68,7 +123,8 @@
 }
 
 .cnvs-menu-item:is(:disabled, [aria-disabled=true]):where(.focus, :focus-visible) {
-  background-color: var(--cnvs-brand-primary-light);
+  background-color: var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
+  opacity: var(--cnvs-sys-opacity-disabled);
 }
 
 .cnvs-menu-item :where([data-part="menu-item-text"]) {
@@ -81,40 +137,12 @@
 }
 
 
-.cnvs-menu-card {
-  --cnvs-menu-card-min-width: 0.0625rem;
-  --cnvs-menu-card-transform-origin-vertical: top;
-  --cnvs-menu-card-transform-origin-horizontal: left;
-  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-default);
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  transition: transform ease-out 150ms;
-  padding: var(--cnvs-sys-space-zero);
-  max-width: calc(100vw - var(--cnvs-sys-space-x8));
-  box-shadow: var(--cnvs-sys-depth-3);
-  min-width: var(--cnvs-menu-card-min-width);
-  max-height: var(--cnvs-menu-card-max-height);
-  transform-origin: var(--cnvs-menu-card-transform-origin-vertical) var(--cnvs-menu-card-transform-origin-horizontal);
-}
-
-.wd-no-animation .cnvs-menu-card {
-  animation: none;
-}
-
-
 .cnvs-menu-list {
   box-sizing: border-box;
-  background: var(--cnvs-sys-color-bg-default);
-  border-radius: var(--cnvs-sys-shape-zero);
-  padding: var(--cnvs-sys-space-zero);
-  gap: var(--cnvs-sys-space-zero);
+  background: var(--cnvs-sys-color-surface-popover, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
+  border-radius: var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));
+  padding: 0;
+  gap: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
 }
 
 
@@ -127,28 +155,3 @@
   flex-direction: row;
 }
 
-
-.cnvs-menu-divider {
-  box-sizing: border-box;
-  display: block;
-  height: 0.0625rem;
-  border: var(--cnvs-sys-space-zero);
-  border-top: 0.0625rem solid var(--cnvs-sys-color-border-divider);
-  margin: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-zero);
-}
-
-
-.cnvs-menu-group-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-subtext-large);
-  font-size: var(--cnvs-sys-font-size-subtext-large);
-  letter-spacing: var(--cnvs-base-letter-spacing-150);
-  display: flex;
-  align-items: center;
-  width: 100%;
-  gap: var(--cnvs-sys-space-x4);
-  padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
-}
-

package/modal.css

@@ -1,10 +1,57 @@
-@keyframes animation-432yk7 {
+.cnvs-modal-body {
+  box-sizing: border-box;
+}
+
+@media screen and (max-width: 768px) {
+.cnvs-modal-body {
+  padding: var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem)) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
+}
+
+
+}
+
+
+.cnvs-modal-card {
+  box-sizing: border-box;
+  margin: var(--cnvs-base-size-500, 2.5rem);
+  width: 27.5rem;
+  border: 0;
+  outline: 0.0625rem solid transparent;
+  box-shadow: var(--cnvs-sys-depth-5);
+  border-radius: var(--cnvs-sys-shape-xxxl, 2rem);
+}
+
+@media screen and (max-width: 768px) {
+.cnvs-modal-card {
+  gap: 0;
+  margin: var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));
+  padding: var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));
+}
+
+
+}
+
+
+.cnvs-modal-heading {
+  box-sizing: border-box;
+}
+
+@media screen and (max-width: 768px) {
+.cnvs-modal-heading {
+  padding: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));
+}
+
+
+}
+
+
+@keyframes animation-1gk2lw {
   0% {
     background: none;
   }
   
   100% {
-    background: var(--cnvs-sys-color-bg-overlay);
+    background: var(--cnvs-sys-color-surface-overlay-scrim, oklch(0.0847 0 0 / 0.36));
   }
   
 }
@@ -12,13 +59,13 @@
 .cnvs-modal-overlay-container {
   box-sizing: border-box;
   position: fixed;
-  top: var(--cnvs-sys-space-zero);
-  left: var(--cnvs-sys-space-zero);
+  top: 0;
+  left: 0;
   width: 100vw;
   height: 100vh;
-  background: var(--cnvs-sys-color-bg-overlay);
+  background: var(--cnvs-sys-color-surface-overlay-scrim, oklch(0.0847 0 0 / 0.36));
   animation-duration: 0.3s;
-  animation-name: animation-432yk7;
+  animation-name: animation-1gk2lw;
 }
 
 .wd-no-animation .cnvs-modal-overlay-container {
@@ -29,8 +76,8 @@
   max-height: 100%;
   display: flex;
   position: absolute;
-  left: var(--cnvs-sys-space-zero);
-  top: var(--cnvs-sys-space-zero);
+  left: 0;
+  top: 0;
   justify-content: center;
   align-items: center;
   height: 100%;
@@ -50,40 +97,6 @@
 }
 
 
-.cnvs-modal-card {
-  box-sizing: border-box;
-  margin: var(--cnvs-sys-space-x10);
-  width: calc(calc(var(--cnvs-sys-space-x20) * 5) + var(--cnvs-sys-space-x10));
-  border-width: var(--cnvs-sys-space-zero);
-  outline: 0.0625rem solid transparent;
-  box-shadow: var(--cnvs-sys-depth-6);
-}
-
-@media screen and (max-width: 768px) {
-.cnvs-modal-card {
-  gap: var(--cnvs-sys-space-zero);
-  margin: var(--cnvs-sys-space-x4);
-  padding: var(--cnvs-sys-space-x4);
-  border-radius: var(--cnvs-sys-space-x6);
-}
-
-
-}
-
-
-.cnvs-modal-heading {
-  box-sizing: border-box;
-}
-
-@media screen and (max-width: 768px) {
-.cnvs-modal-heading {
-  padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x1);
-}
-
-
-}
-
-
 .cnvs-modal-overflow-overlay {
   box-sizing: border-box;
   overflow: hidden auto;
@@ -93,16 +106,3 @@
   max-height: inherit;
 }
 
-
-.cnvs-modal-body {
-  box-sizing: border-box;
-}
-
-@media screen and (max-width: 768px) {
-.cnvs-modal-body {
-  padding: var(--cnvs-sys-space-x1) var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2);
-}
-
-
-}
-

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@workday/canvas-kit-css",
-  "version": "15.0.0-alpha.1303-next.0",
+  "version": "15.0.0",
+  "type": "module",
   "description": "The parent module that contains all Workday Canvas Kit CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
   "sideEffects": false,
   "repository": {
     "type": "git",
-    "url": "https://github.com/workday/canvas-kit.git",
+    "url": "https://github.com/Workday/canvas-kit.git",
     "directory": "modules/css"
   },
   "files": [
@@ -25,5 +26,5 @@
     "components",
     "workday"
   ],
-  "gitHead": "4dc1e2083d2767fd402c2d014bedd8b35a014490"
+  "gitHead": "d7401bd7648fa6dbe66fdf3400e05770b77b030b"
 }

package/pagination.css

@@ -1,47 +1,86 @@
+.cnvs-pagination-additional-details {
+  box-sizing: border-box;
+  display: flex;
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-normal);
+  font-size: var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));
+  line-height: var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));
+  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));
+  color: var(--cnvs-sys-color-fg-muted-default);
+  margin-block-start: 0.75rem;
+}
+
+
+.cnvs-pagination-additional-details.should-hide-details {
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  height: 1px;
+  min-height: 1px;
+  width: 1px;
+  min-width: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  margin-block-start: 0;
+}
+
+
 .cnvs-pagination-controls {
   box-sizing: border-box;
   display: flex;
-  gap: var(--cnvs-sys-space-x1);
+  gap: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
   align-items: center;
 }
 
 
-.cnvs-pagination-list {
+.cnvs-control-button {
   box-sizing: border-box;
-  display: flex;
-  margin-block: var(--cnvs-sys-space-zero);
-  margin-inline: var(--cnvs-sys-space-zero);
-  padding: var(--cnvs-sys-space-zero);
-  list-style: none;
 }
 
+.cnvs-control-button:dir(rtl) .wd-icon {
+  transform: scaleX(-1);
+}
 
-.cnvs-pagination-list-item {
+
+.cnvs-pagination-go-to-form {
   box-sizing: border-box;
   display: flex;
+  align-items: center;
+  gap: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
 }
 
+.cnvs-pagination-go-to-form :dir(rtl) {
+  padding-inline: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
+}
 
-.cnvs-pagination-page-list {
+
+.cnvs-pagination-go-to-label {
   box-sizing: border-box;
-  display: flex;
-  margin: var(--cnvs-sys-space-zero);
-  padding-inline-start: var(--cnvs-sys-space-zero);
-  padding-inline-end: var(--cnvs-sys-space-zero);
-  gap: var(--cnvs-sys-space-x1);
+  white-space: nowrap;
+}
+
+
+.cnvs-pagination-go-to-text-input {
+  box-sizing: border-box;
+  min-width: 3.4375rem;
+  width: 3.4375rem;
 }
 
 
 .cnvs-pagination-page-button {
   box-sizing: border-box;
-  min-width: var(--cnvs-sys-space-x8);
-  padding: var(--cnvs-sys-space-zero);
+  min-width: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
+  height: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
+  padding: 0;
   font-weight: var(--cnvs-sys-font-weight-normal);
   --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-bg-alt-soft);
+  --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-button-label: var(--cnvs-sys-color-fg-strong);
 }
 
@@ -56,12 +95,12 @@
 
 .cnvs-pagination-page-button.toggled {
   font-weight: var(--cnvs-sys-font-weight-bold);
-  --cnvs-button-background: var(--cnvs-brand-primary-base);
+  --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);
 }
 
 .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-brand-primary-base);
+  --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);
 }
 
@@ -70,59 +109,27 @@
 }
 
 
-.cnvs-pagination-additional-details {
+.cnvs-pagination-list {
   box-sizing: border-box;
   display: flex;
-  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);
-  color: var(--cnvs-sys-color-text-hint);
-  margin-block-start: var(--cnvs-sys-space-x3);
-}
-
-
-.cnvs-pagination-additional-details.should-hide-details {
-  clip: rect(1px, 1px, 1px, 1px);
-  clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
-  position: absolute;
-  overflow: hidden;
-  white-space: nowrap;
-  height: 1px;
-  min-height: 1px;
-  width: 1px;
-  min-width: 1px;
-  margin: -1px;
+  margin: 0;
   padding: 0;
-  border: 0;
-  margin-block-start: var(--cnvs-sys-space-zero);
+  list-style: none;
 }
 
 
-.cnvs-pagination-go-to-form {
+.cnvs-pagination-list-item {
   box-sizing: border-box;
   display: flex;
-  align-items: center;
-  gap: var(--cnvs-sys-space-x2);
 }
 
-.cnvs-pagination-go-to-form :dir(rtl) {
-  padding-inline-start: var(--cnvs-sys-space-x2);
-  padding-inline-end: var(--cnvs-sys-space-x2);
-}
 
-
-.cnvs-pagination-go-to-text-input {
-  box-sizing: border-box;
-  min-width: 3.4375rem;
-  width: 3.4375rem;
-}
-
-
-.cnvs-pagination-go-to-label {
+.cnvs-pagination-page-list {
   box-sizing: border-box;
-  white-space: nowrap;
+  display: flex;
+  margin: 0;
+  padding-inline: 0;
+  gap: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
 }