@workday/canvas-kit-css 13.2.2 → 13.2.4

package/checkbox.css

@@ -0,0 +1,240 @@
+.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

@@ -0,0 +1,25 @@
+.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

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

package/common.css

@@ -0,0 +1,53 @@
+.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

@@ -0,0 +1,93 @@
+.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

@@ -0,0 +1,190 @@
+.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;
+}
+