@workday/canvas-kit-css 11.0.0-alpha.696-next.0 → 11.0.0-alpha.699-next.0

package/badge.css

@@ -22,7 +22,7 @@
   justify-content: center;
   line-height: 1.25rem;
   min-width: 1.25rem;
-  padding: 0 0.375rem;
+  padding: 0 0.40625rem;
 }
 
 

package/button.css

@@ -220,7 +220,7 @@
   padding-inline: var(--cnvs-sys-space-x2, calc(0.25rem * 2));
   min-width: auto;
   text-decoration: underline;
-  border: 0px;
+  border: 0;
   --cnvs-button-default-background: transparent;
   --cnvs-button-default-border: transparent;
   --cnvs-button-default-borderRadius: var(--cnvs-sys-shape-x1, 0.25rem);

package/card.css

@@ -1,7 +1,7 @@
 .cnvs-card-heading-base {
   font-weight: var(--cnvs-sys-font-weight-bold, 700);
   margin-bottom: var(--cnvs-sys-space-x6, calc(0.25rem * 6));
-  margin-top: 0px;
+  margin-top: 0;
 }
 
 

package/checkbox.css

@@ -64,7 +64,7 @@
   max-width: 100%;
   pointer-events: none;
   transition: transform 200ms ease,opacity 200ms ease;
-  opacity: 0px;
+  opacity: 0;
   transform: scale(0.5);
 }
 
@@ -75,13 +75,13 @@
 
 
 .cnvs-checkbox-check--checked {
-  opacity: 1px;
+  opacity: 1;
   transform: scale(1);
 }
 
 
 .cnvs-checkbox-check--indeterminate {
-  opacity: 1px;
+  opacity: 1;
   transform: scale(1);
 }
 
@@ -106,7 +106,7 @@
   margin-top: calc(0.1875rem * -1);
   margin-inline-start: calc(0.1875rem * -1);
   position: absolute;
-  opacity: 0px;
+  opacity: 0;
 }
 
 .cnvs-checkbox-input:not(:disabled) {
@@ -129,7 +129,7 @@
 .cnvs-checkbox-input:disabled~div:first-of-type {
   border-color: var(--cnvs-base-palette-licorice-100, rgba(161,170,179,1));
   background-color: var(--cnvs-base-palette-soap-100, rgba(246,247,248,1));
-  opacity: 1px;
+  opacity: 1;
 }
 
 .cnvs-checkbox-input:disabled:where(:checked, :indeterminate)~div:first-of-type {

package/common.css

@@ -7,8 +7,8 @@
   height: 1px;
   width: 1px;
   margin: -1px;
-  padding: 0px;
-  border: 0px;
+  padding: 0;
+  border: 0;
 }
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-css",
-  "version": "11.0.0-alpha.696-next.0",
+  "version": "11.0.0-alpha.699-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": "2b897235cbf8b889cd1e7f750e8c905b56944368"
+  "gitHead": "6dca00808a902605bad2c3c2f083ad6ba310bf4b"
 }

package/select.css

@@ -10,11 +10,11 @@
 
 .cnvs-hidden-select {
   position: absolute;
-  top: 0px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  opacity: 0px;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: 0;
   cursor: default;
   pointer-events: none;
 }

package/switch.css

@@ -0,0 +1,86 @@
+.cnvs-switch-container {
+  position: relative;
+  height: var(--cnvs-sys-space-x6, calc(0.25rem * 6));
+  width: var(--cnvs-sys-space-x8, calc(0.25rem * 8));
+}
+
+
+.cnvs-switch-input {
+  display: flex;
+  position: absolute;
+  height: var(--cnvs-sys-space-x6, calc(0.25rem * 6));
+  width: var(--cnvs-sys-space-x8, calc(0.25rem * 8));
+  margin: var(--cnvs-sys-space-zero, 0);
+  margin-left: var(--cnvs-sys-space-x1, 0.25rem);
+  border-radius: var(--cnvs-sys-shape-round, calc(0.25rem * 250));
+  opacity: 0;
+  cursor: pointer;
+}
+
+.cnvs-switch-input:checked~div:first-of-type, .cnvs-switch-input.checked~div:first-of-type {
+  background-color: var(--cnvs-brand-primary-base, rgba(8,117,225,1));
+}
+
+.cnvs-switch-input:checked:disabled~div:first-of-type, .cnvs-switch-input.checked:disabled~div:first-of-type, .cnvs-switch-input:checked.disabled~div:first-of-type, .cnvs-switch-input.checked.disabled~div:first-of-type {
+  background-color: var(--cnvs-brand-primary-light, rgba(166,210,255,1));
+}
+
+.cnvs-switch-input:disabled, .cnvs-switch-input.disabled {
+  cursor: not-allowed;
+}
+
+.cnvs-switch-input:disabled~div:first-of-type, .cnvs-switch-input.disabled~div:first-of-type {
+  background-color: var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));
+}
+
+.cnvs-switch-input:focus-visible, .cnvs-switch-input:focus, .cnvs-switch-input.focus {
+  outline: none;
+}
+
+.cnvs-switch-input:focus-visible~div:first-of-type, .cnvs-switch-input:focus~div:first-of-type, .cnvs-switch-input.focus~div:first-of-type {
+  box-shadow: 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100),0 0 0 4px var(--cnvs-brand-common-focus-outline);
+}
+
+
+.cnvs-switch-input--error-error~div:first-of-type {
+  box-shadow: 0 0 0 0.125rem var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),0 0 0 var(--cnvs-sys-space-x1, 0.25rem) var(--cnvs-brand-error-base, rgba(222,46,33,1)),0 0 0 0.3125rem transparent;
+}
+
+
+.cnvs-switch-input--error-alert~div:first-of-type {
+  box-shadow: 0 0 0 0.125rem var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),0 0 0 var(--cnvs-sys-space-x1, 0.25rem) var(--cnvs-brand-alert-base, rgba(255,161,38,1)),0 0 0 0.3125rem var(--cnvs-brand-alert-darkest, rgba(192,108,0,1));
+}
+
+
+.cnvs-switch-background {
+  box-sizing: border-box;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+  margin-top: var(--cnvs-sys-space-x1, 0.25rem);
+  width: var(--cnvs-sys-space-x8, calc(0.25rem * 8));
+  height: var(--cnvs-sys-space-x4, calc(0.25rem * 4));
+  border-radius: var(--cnvs-sys-shape-round, calc(0.25rem * 250));
+  padding: var(--cnvs-sys-space-zero, 0) 0.125rem;
+  transition: background-color 200ms ease;
+  background-color: var(--cnvs-base-palette-licorice-200, rgba(123,133,143,1));
+}
+
+
+.cnvs-switch-circle {
+  width: var(--cnvs-sys-space-x3, calc(0.25rem * 3));
+  height: var(--cnvs-sys-space-x3, calc(0.25rem * 3));
+  border-radius: var(--cnvs-sys-shape-round, calc(0.25rem * 250));
+  box-shadow: var(--cnvs-sys-depth-1, 0 0.0625rem 0.25rem 0 rgba(31,38,46,0.12),0 0.125rem 0.5rem 0 rgba(31,38,46,0.08));
+  transition: transform 150ms ease;
+  pointer-events: none;
+  background-color: var(--cnvs-brand-primary-accent, rgba(255,255,255,1));
+  transform: translateX(var(--cnvs-sys-space-zero, 0));
+}
+
+
+.cnvs-switch-circle--checked {
+  transform: translateX(var(--cnvs-sys-space-x4, calc(0.25rem * 4)));
+}
+