@workday/canvas-kit-css 13.2.1 → 13.2.2

package/checkbox.css

@@ -1,240 +0,0 @@
-.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);
-  width: calc(var(--cnvs-sys-space-x4) + 0.125rem);
-  transition: box-shadow 150ms ease-out;
-  position: absolute;
-  pointer-events: none;
-}
-
-
-.cnvs-checkbox-container {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  min-height: var(--cnvs-sys-space-x6);
-  position: relative;
-}
-
-.cnvs-checkbox-container>div {
-  display: flex;
-  height: calc(var(--cnvs-sys-space-x4) + 0.125rem);
-  min-width: calc(var(--cnvs-sys-space-x4) + 0.125rem);
-  margin-top: 0.1875rem;
-  align-self: flex-start;
-}
-
-.cnvs-checkbox-container>label {
-  padding-inline-start: var(--cnvs-sys-space-x3);
-}
-
-
-.cnvs-checkbox-background {
-  box-sizing: border-box;
-  align-items: center;
-  background-color: var(--cnvs-sys-color-bg-default);
-  border-radius: var(--cnvs-sys-shape-half);
-  display: flex;
-  height: calc(var(--cnvs-sys-space-x4) + 0.125rem);
-  justify-content: center;
-  padding: var(--cnvs-sys-space-zero) calc(var(--cnvs-sys-space-x1) / 2);
-  pointer-events: none;
-  position: absolute;
-  transition: border 200ms ease,background 200ms;
-  width: calc(var(--cnvs-sys-space-x4) + 0.125rem);
-  border: 0.0625rem solid var(--cnvs-sys-color-border-input-default);
-}
-
-
-.cnvs-checkbox-background.error-error {
-  --cnvs-checkbox-background-error-ring-color-inner: var(--cnvs-brand-error-base);
-  --cnvs-checkbox-background-error-ring-color-outer: transparent;
-}
-
-
-.cnvs-checkbox-background.error-alert {
-  --cnvs-checkbox-background-error-ring-color-inner: var(--cnvs-brand-alert-base);
-  --cnvs-checkbox-background-error-ring-color-outer: 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: var(--cnvs-sys-opacity-zero);
-  transform: scale(0.5);
-}
-
-.cnvs-checkbox-check span {
-  margin-inline-start: calc(0.375rem * -1);
-  transition: margin 200ms ease;
-}
-
-
-.cnvs-checkbox-check.checked {
-  --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
-  opacity: var(--cnvs-sys-opacity-full);
-  transform: scale(1);
-}
-
-
-.cnvs-checkbox-check.indeterminate {
-  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 {
-  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);
-  margin: var(--cnvs-sys-space-zero);
-  margin-top: calc(0.1875rem * -1);
-  margin-inline-start: calc(0.1875rem * -1);
-  position: absolute;
-  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-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-sys-color-border-input-strong);
-}
-
-.cnvs-checkbox-input:where(:checked, :indeterminate)~div:first-of-type {
-  border-color: var(--cnvs-brand-primary-base);
-  background-color: var(--cnvs-brand-primary-base);
-}
-
-.cnvs-checkbox-input:disabled~div:first-of-type {
-  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 {
-  border-color: var(--cnvs-brand-primary-light);
-  background-color: var(--cnvs-brand-primary-light);
-}
-
-.cnvs-checkbox-input:where(:focus-visible, :active, .focus, .active) {
-  outline: none;
-}
-
-.cnvs-checkbox-input:where(:focus-visible, .focus)~div:first-of-type {
-  border-color: var(--cnvs-brand-primary-base);
-  border-width: 0.125rem;
-  box-shadow: 0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),0 0 0 0px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
-}
-
-.cnvs-checkbox-input:checked:focus-visible~div:first-of-type, .cnvs-checkbox-input:indeterminate:focus-visible~div:first-of-type, .cnvs-checkbox-input:checked.focus~div:first-of-type, .cnvs-checkbox-input:indeterminate.focus~div:first-of-type {
-  box-shadow: 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),0 0 0 4px var(--cnvs-brand-common-focus-outline);
-  border-color: var(--cnvs-brand-primary-base);
-  border-width: 0.125rem;
-}
-
-.cnvs-checkbox-input:checked:focus-visible~div:first-of-type span, .cnvs-checkbox-input:indeterminate:focus-visible~div:first-of-type span, .cnvs-checkbox-input:checked.focus~div:first-of-type span, .cnvs-checkbox-input:indeterminate.focus~div:first-of-type span {
-  margin-inline-start: calc(0.4375rem * -1);
-}
-
-
-.cnvs-checkbox-input.variant-inverse~span:first-of-type {
-  opacity: var(--cnvs-sys-opacity-disabled);
-}
-
-.cnvs-checkbox-input.variant-inverse~div:first-of-type {
-  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-sys-color-border-input-inverse);
-}
-
-.cnvs-checkbox-input.variant-inverse:where(:checked, :indeterminate)~div:first-of-type {
-  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-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-sys-color-border-input-inverse);
-  background-color: var(--cnvs-sys-color-bg-default);
-}
-
-.cnvs-checkbox-input.variant-inverse:where(:focus-visible, .focus)~div:first-of-type {
-  border-color: var(--cnvs-sys-color-border-contrast-default);
-  box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-contrast-default),0 0 0 2px var(--cnvs-sys-color-border-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-sys-color-border-contrast-default),0 0 0 4px var(--cnvs-sys-color-border-inverse);
-  border-color: var(--cnvs-sys-color-border-inverse);
-}
-
-
-.cnvs-checkbox-input.disabled:where(:hover, .hover)~span:first-of-type {
-  box-shadow: none;
-}
-
-
-.cnvs-checkbox-input.error:not(:where(:focus-visible, .focus))~div:first-of-type {
-  border-color: var(--cnvs-checkbox-background-error-ring-color-inner);
-  box-shadow: 0 0 0 0.0625rem var(--cnvs-checkbox-background-error-ring-color-inner),0 0 0 0.125rem var(--cnvs-checkbox-background-error-ring-color-outer);
-}
-
-.cnvs-checkbox-input.error:where(:checked, :indeterminate)~div:first-of-type {
-  border-color: transparent;
-  box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),0 0 0 0.25rem var(--cnvs-checkbox-background-error-ring-color-inner),0 0 0 0.3125rem var(--cnvs-checkbox-background-error-ring-color-outer);
-}
-
-.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-error-ring-color-inner);
-}
-
-
-.cnvs-checkbox-input.variant-inverse.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.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.error:where(:checked, :indeterminate)~div:first-of-type {
-  border-color: var(--cnvs-sys-color-border-input-inverse);
-}
-

package/collection.css

@@ -1,25 +0,0 @@
-.cnvs-list-box-container {
-  box-sizing: border-box;
-}
-
-.cnvs-list-box-container :where([data-part="list"]) {
-  display: flex;
-  flex-direction: column;
-  margin-block-start: var(--cnvs-sys-space-zero);
-  margin-block-end: var(--cnvs-sys-space-zero);
-}
-
-
-.cnvs-list-box-container.orientation-vertical {
-  overflow-y: auto;
-}
-
-
-.cnvs-list-box-container.orientation-horizontal {
-  overflow-y: undefined;
-}
-
-.cnvs-list-box-container.orientation-horizontal :where([data-part="list"]) {
-  flex-direction: row;
-}
-

package/combobox.css

@@ -1,4 +0,0 @@
-.cnvs-combobox-menu-list {
-  box-sizing: border-box;
-}
-

package/common.css

@@ -1,53 +0,0 @@
-.cnvs-accessible-hide {
-  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;
-}
-
-
-.cnvs-default-branding {
-  --cnvs-brand-error-darkest: rgba(128,22,14,1);
-  --cnvs-brand-common-alert-inner: var(--cnvs-base-palette-cantaloupe-400);
-  --cnvs-brand-common-error-inner: var(--cnvs-base-palette-cinnamon-500);
-  --cnvs-brand-common-focus-outline: var(--cnvs-base-palette-blueberry-400);
-  --cnvs-brand-neutral-accent: var(--cnvs-base-palette-french-vanilla-100);
-  --cnvs-brand-neutral-darkest: var(--cnvs-base-palette-licorice-400);
-  --cnvs-brand-neutral-dark: var(--cnvs-base-palette-licorice-300);
-  --cnvs-brand-neutral-base: var(--cnvs-base-palette-soap-600);
-  --cnvs-brand-neutral-light: var(--cnvs-base-palette-soap-300);
-  --cnvs-brand-neutral-lightest: var(--cnvs-base-palette-soap-200);
-  --cnvs-brand-success-accent: var(--cnvs-base-palette-french-vanilla-100);
-  --cnvs-brand-success-darkest: var(--cnvs-base-palette-green-apple-600);
-  --cnvs-brand-success-dark: var(--cnvs-base-palette-green-apple-500);
-  --cnvs-brand-success-base: var(--cnvs-base-palette-green-apple-400);
-  --cnvs-brand-success-light: var(--cnvs-base-palette-green-apple-300);
-  --cnvs-brand-success-lightest: var(--cnvs-base-palette-green-apple-100);
-  --cnvs-brand-error-accent: var(--cnvs-base-palette-french-vanilla-100);
-  --cnvs-brand-error-dark: var(--cnvs-base-palette-cinnamon-600);
-  --cnvs-brand-error-base: var(--cnvs-base-palette-cinnamon-500);
-  --cnvs-brand-error-light: var(--cnvs-base-palette-cinnamon-200);
-  --cnvs-brand-error-lightest: var(--cnvs-base-palette-cinnamon-100);
-  --cnvs-brand-alert-accent: var(--cnvs-base-palette-french-vanilla-100);
-  --cnvs-brand-alert-darkest: var(--cnvs-base-palette-cantaloupe-600);
-  --cnvs-brand-alert-dark: var(--cnvs-base-palette-cantaloupe-500);
-  --cnvs-brand-alert-base: var(--cnvs-base-palette-cantaloupe-400);
-  --cnvs-brand-alert-light: var(--cnvs-base-palette-cantaloupe-200);
-  --cnvs-brand-alert-lightest: var(--cnvs-base-palette-cantaloupe-100);
-  --cnvs-brand-primary-accent: var(--cnvs-base-palette-french-vanilla-100);
-  --cnvs-brand-primary-darkest: var(--cnvs-base-palette-blueberry-600);
-  --cnvs-brand-primary-dark: var(--cnvs-base-palette-blueberry-500);
-  --cnvs-brand-primary-base: var(--cnvs-base-palette-blueberry-400);
-  --cnvs-brand-primary-light: var(--cnvs-base-palette-blueberry-200);
-  --cnvs-brand-primary-lightest: var(--cnvs-base-palette-blueberry-100);
-  --cnvs-brand-gradient-primary: linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);
-}
-

package/expandable.css

@@ -1,93 +0,0 @@
-.cnvs-expandable-content {
-  box-sizing: border-box;
-  background: var(--cnvs-sys-color-bg-transparent);
-  padding: var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2);
-}
-
-
-.cnvs-expandable-target {
-  box-sizing: border-box;
-  background: var(--cnvs-sys-color-bg-transparent);
-  border-color: var(--cnvs-sys-color-bg-transparent);
-  border-radius: var(--cnvs-sys-shape-x1);
-  border-width: 0;
-  display: flex;
-  align-items: flex-start;
-  flex-direction: row;
-  justify-content: start;
-  padding: var(--cnvs-sys-space-x2);
-  cursor: pointer;
-  width: 100%;
-}
-
-.cnvs-expandable-target:hover, .cnvs-expandable-target.hover {
-  background-color: var(--cnvs-sys-color-bg-alt-default);
-}
-
-
-.cnvs-expandable-icon {
-  box-sizing: border-box;
-  padding: var(--cnvs-sys-space-x1);
-}
-
-
-
-
-
-
-
-.cnvs-expandable-icon.position-end.is-expanded {
-  margin-inline-start: auto;
-  transform: rotate(180deg);
-  padding-inline-end: var(--cnvs-sys-space-x3);
-}
-
-
-.cnvs-expandable-icon.position-end.is-expanded {
-  margin-inline-start: auto;
-  padding-inline-start: var(--cnvs-sys-space-x3);
-}
-
-
-.cnvs-expandable-icon.position-start.is-expanded {
-  margin-inline-end: var(--cnvs-sys-space-x2);
-  transform: rotate(90deg);
-}
-
-.cnvs-expandable-icon.position-start.is-expanded :dir(rtl) {
-  transform: rotate(-90deg);
-}
-
-
-.cnvs-expandable-icon.position-start.is-expanded {
-  margin-inline-end: var(--cnvs-sys-space-x2);
-  transform: rotate(180deg);
-}
-
-
-.cnvs-expandable-title {
-  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-body-medium);
-  font-size: var(--cnvs-sys-font-size-body-medium);
-  color: var(--cnvs-sys-color-text-strong);
-  padding: 0.125rem var(--cnvs-sys-space-zero);
-  text-align: left;
-}
-
-
-.cnvs-expandable-avatar {
-  box-sizing: border-box;
-  margin-inline-end: var(--cnvs-sys-space-x2);
-  flex-shrink: 0;
-}
-
-
-.cnvs-expandable-container {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  padding: var(--cnvs-sys-space-x2);
-}
-

package/form-field.css

@@ -1,190 +0,0 @@
-.cnvs-form-field-label {
-  box-sizing: border-box;
-  font-weight: var(--cnvs-sys-font-weight-medium);
-  color: var(--cnvs-sys-color-text-default);
-  padding-inline-start: var(--cnvs-sys-space-zero);
-  display: flex;
-  align-items: center;
-  min-width: 11.25rem;
-}
-
-
-.cnvs-form-field-label.is-required::after {
-  content: "*";
-  font-size: var(--cnvs-sys-font-size-body-large);
-  font-weight: var(--cnvs-sys-font-weight-normal);
-  color: var(--cnvs-brand-error-base);
-  text-decoration: unset;
-  margin-inline-start: var(--cnvs-sys-space-x1);
-}
-
-
-.cnvs-form-field-label.orientation-horizontal-start {
-  justify-content: flex-start;
-  float: left;
-  max-height: var(--cnvs-sys-space-x10);
-}
-
-
-.cnvs-form-field-label.orientation-horizontal-end {
-  max-height: var(--cnvs-sys-space-x10);
-  float: left;
-  justify-content: flex-end;
-}
-
-
-.cnvs-form-field-label.orientation-vertical {
-  width: 100%;
-}
-
-
-.cnvs-form-field-label.is-hidden {
-  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;
-}
-
-
-.cnvs-form-field-hint {
-  box-sizing: border-box;
-  margin: var(--cnvs-sys-space-zero);
-}
-
-
-.cnvs-form-field-hint.error-error {
-  color: var(--cnvs-brand-error-base);
-}
-
-
-
-.cnvs-form-field-container {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: var(--cnvs-sys-space-x2);
-}
-
-
-.cnvs-form-field {
-  box-sizing: border-box;
-  display: flex;
-  border: none;
-  padding: var(--cnvs-sys-space-zero);
-  margin: var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x6);
-}
-
-
-.cnvs-form-field.grow {
-  width: 100%;
-}
-
-.cnvs-form-field.grow [data-width="ck-formfield-width"] {
-  width: 100%;
-}
-
-.cnvs-form-field.grow:has(div[data-width="ck-formfield-width"]) {
-  width: 100%;
-}
-
-
-.cnvs-form-field.orientation-horizontal-start {
-  flex-direction: row;
-  gap: var(--cnvs-sys-space-x8);
-}
-
-
-.cnvs-form-field.orientation-horizontal-end {
-  flex-direction: row;
-  gap: var(--cnvs-sys-space-x8);
-}
-
-
-.cnvs-form-field.orientation-vertical {
-  flex-direction: column;
-  gap: var(--cnvs-sys-space-x1);
-  align-items: flex-start;
-}
-
-
-
-
-
-.cnvs-form-field-field {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: var(--cnvs-sys-space-x2);
-}
-
-
-.cnvs-form-field-group-list {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  border-radius: var(--cnvs-sys-shape-x1);
-  gap: var(--cnvs-sys-space-x2);
-  padding: 0.625rem var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x2);
-  margin: 0 calc(var(--cnvs-sys-space-x3) * -1);
-  transition: 100ms box-shadow;
-  width: fit-content;
-}
-
-
-.cnvs-form-field-group-list.error-error {
-  box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-error-base);
-}
-
-
-.cnvs-form-field-group-list.error-alert {
-  box-shadow: inset 0 0 0 0.0625rem var(--cnvs-brand-alert-darkest),inset 0 0 0 0.1875rem var(--cnvs-brand-alert-base);
-}
-
-
-.cnvs-form-field-group-label {
-  box-sizing: border-box;
-  font-weight: var(--cnvs-sys-font-weight-medium);
-  color: var(--cnvs-sys-color-text-default);
-  padding-inline-start: var(--cnvs-sys-space-zero);
-  display: flex;
-  align-items: center;
-  min-width: 11.25rem;
-}
-
-
-.cnvs-form-field-group-label.is-required::after {
-  content: "*";
-  font-size: var(--cnvs-sys-font-size-body-large);
-  font-weight: var(--cnvs-sys-font-weight-normal);
-  color: var(--cnvs-brand-error-base);
-  text-decoration: unset;
-  margin-inline-start: var(--cnvs-sys-space-x1);
-}
-
-
-.cnvs-form-field-group-label.orientation-vertical {
-  width: 100%;
-}
-
-
-.cnvs-form-field-group-label.orientation-horizontal-start {
-  justify-content: flex-start;
-  float: left;
-  max-height: var(--cnvs-sys-space-x10);
-}
-
-
-.cnvs-form-field-group-label.orientation-horizontal-end {
-  max-height: var(--cnvs-sys-space-x10);
-  float: left;
-  justify-content: flex-end;
-}
-