@workday/canvas-kit-css 14.0.0-alpha.1169-next.0 → 14.0.0-alpha.1174-next.0

package/card.css

@@ -0,0 +1,34 @@
+.cnvs-card-heading {
+  box-sizing: border-box;
+  color: var(--cnvs-sys-color-fg-strong);
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  margin-block: var(--cnvs-sys-space-zero);
+}
+
+
+.cnvs-card-body {
+  box-sizing: border-box;
+}
+
+
+.cnvs-card {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--cnvs-sys-space-x6);
+  padding: var(--cnvs-sys-space-x8);
+  background-color: var(--cnvs-sys-color-bg-default);
+  border-radius: var(--cnvs-sys-shape-x2);
+  border: 0.0625rem solid var(--cnvs-sys-color-border-container);
+}
+
+
+.cnvs-card.variant-borderless {
+  border-color: transparent;
+}
+
+
+.cnvs-card.variant-filled {
+  background-color: var(--cnvs-sys-color-bg-alt-soft);
+}
+

package/checkbox.css

@@ -0,0 +1,242 @@
+.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-common-error-inner);
+  --cnvs-checkbox-background-error-ring-color-outer: transparent;
+  background-color: var(--cnvs-brand-error-lightest);
+}
+
+
+.cnvs-checkbox-background.error-alert {
+  --cnvs-checkbox-background-error-ring-color-inner: var(--cnvs-brand-common-alert-inner);
+  --cnvs-checkbox-background-error-ring-color-outer: var(--cnvs-brand-common-alert-outer);
+  background-color: var(--cnvs-brand-alert-lightest);
+}
+
+
+.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-sys-color-border-inverse, 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-sys-color-border-inverse, 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/color-picker.css

@@ -0,0 +1,87 @@
+.cnvs-color-picker-color-swatch {
+  box-sizing: border-box;
+  --cnvs-system-icon-color: var(--cnvs-color-picker-color-swatch-icon-color);
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: var(--cnvs-sys-shape-half);
+  background-color: var(--cnvs-color-picker-color-swatch-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cnvs-color-picker-color-swatch>* {
+  margin: calc(0.125rem * -1);
+}
+
+
+.cnvs-color-picker-color-swatch.with-shadow {
+  box-shadow: inset 0px 0px 0px 0.0625rem rgba(0, 0, 0, 0.25);
+}
+
+
+.cnvs-color-picker-hex-input {
+  box-sizing: border-box;
+  --cnvs-color-picker-hex-input-width: 7.25rem;
+  position: relative;
+  width: var(--cnvs-color-picker-hex-input-width);
+}
+
+.cnvs-color-picker-hex-input [data-part="color-picker-hex-input"] {
+  min-width: var(--cnvs-color-picker-hex-input-width);
+  width: var(--cnvs-color-picker-hex-input-width);
+  font-family: var(--cnvs-sys-font-family-mono);
+  padding-inline-start: calc(100% - 5.375rem);
+}
+
+.cnvs-color-picker-hex-input [data-part="color-picker-hex-input"]:focus::placeholder {
+  color: transparent;
+}
+
+.cnvs-color-picker-hex-input [data-part="color-picker-hex-input-pound-sign"] {
+  position: absolute;
+  top: 0.625rem;
+  left: 5.5rem;
+  font-family: var(--cnvs-sys-font-family-mono);
+}
+
+.cnvs-color-picker-hex-input [data-part="color-picker-hex-input-swatch"] {
+  position: absolute;
+  top: 0.625rem;
+  left: var(--cnvs-sys-space-x2);
+  box-shadow: inset 0 0 0 0.0625rem rgba(0,0,0,0.25);
+  pointer-events: none;
+}
+
+.cnvs-color-picker-hex-input :dir(ltr) [data-part="color-picker-hex-input"] {
+  padding-inline-start: 2.875rem;
+}
+
+.cnvs-color-picker-hex-input :dir(ltr) [data-part="color-picker-hex-input-pound-sign"] {
+  left: 2.25rem;
+}
+
+
+.cnvs-color-picker-hex-input.grow {
+  --cnvs-color-picker-hex-input-width: 100%;
+}
+
+
+.cnvs-color-picker-hex-input.disabled [data-part="color-picker-hex-input"] {
+  border-color: var(--cnvs-sys-color-border-input-disabled);
+  background-color: var(--cnvs-sys-color-bg-alt-soft);
+  color: var(--cnvs-sys-color-text-disabled);
+}
+
+.cnvs-color-picker-hex-input.disabled [data-part="color-picker-hex-input-pound-sign"] {
+  color: var(--cnvs-sys-color-text-disabled);
+}
+
+
+.cnvs-color-preview {
+  box-sizing: border-box;
+  background-color: var(--cnvs-sys-color-bg-default);
+  border-color: var(--cnvs-sys-color-border-inverse);
+  pointer-events: none;
+}
+

package/combobox.css

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

package/common.css

@@ -0,0 +1,54 @@
+.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: var(--cnvs-base-palette-red-800);
+  --cnvs-brand-common-alert-inner: var(--cnvs-base-palette-amber-400);
+  --cnvs-brand-common-alert-outer: var(--cnvs-base-palette-amber-500);
+  --cnvs-brand-common-error-inner: var(--cnvs-base-palette-red-500);
+  --cnvs-brand-common-focus-outline: var(--cnvs-base-palette-blue-500);
+  --cnvs-brand-neutral-accent: var(--cnvs-base-palette-neutral-0);
+  --cnvs-brand-neutral-darkest: var(--cnvs-base-palette-slate-800);
+  --cnvs-brand-neutral-dark: var(--cnvs-base-palette-slate-700);
+  --cnvs-brand-neutral-base: var(--cnvs-base-palette-slate-600);
+  --cnvs-brand-neutral-light: var(--cnvs-base-palette-slate-200);
+  --cnvs-brand-neutral-lightest: var(--cnvs-base-palette-slate-50);
+  --cnvs-brand-success-accent: var(--cnvs-base-palette-neutral-0);
+  --cnvs-brand-success-darkest: var(--cnvs-base-palette-green-800);
+  --cnvs-brand-success-dark: var(--cnvs-base-palette-green-700);
+  --cnvs-brand-success-base: var(--cnvs-base-palette-green-600);
+  --cnvs-brand-success-light: var(--cnvs-base-palette-green-100);
+  --cnvs-brand-success-lightest: var(--cnvs-base-palette-green-25);
+  --cnvs-brand-error-accent: var(--cnvs-base-palette-neutral-0);
+  --cnvs-brand-error-dark: var(--cnvs-base-palette-red-700);
+  --cnvs-brand-error-base: var(--cnvs-base-palette-red-600);
+  --cnvs-brand-error-light: var(--cnvs-base-palette-red-100);
+  --cnvs-brand-error-lightest: var(--cnvs-base-palette-red-25);
+  --cnvs-brand-alert-accent: var(--cnvs-base-palette-neutral-900);
+  --cnvs-brand-alert-darkest: var(--cnvs-base-palette-amber-600);
+  --cnvs-brand-alert-dark: var(--cnvs-base-palette-amber-500);
+  --cnvs-brand-alert-base: var(--cnvs-base-palette-amber-400);
+  --cnvs-brand-alert-light: var(--cnvs-base-palette-amber-50);
+  --cnvs-brand-alert-lightest: var(--cnvs-base-palette-amber-25);
+  --cnvs-brand-primary-accent: var(--cnvs-base-palette-neutral-0);
+  --cnvs-brand-primary-darkest: var(--cnvs-base-palette-blue-800);
+  --cnvs-brand-primary-dark: var(--cnvs-base-palette-blue-700);
+  --cnvs-brand-primary-base: var(--cnvs-base-palette-blue-600);
+  --cnvs-brand-primary-light: var(--cnvs-base-palette-blue-200);
+  --cnvs-brand-primary-lightest: var(--cnvs-base-palette-blue-25);
+  --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,97 @@
+.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-soft);
+}
+
+.cnvs-expandable-target:focus-visible, .cnvs-expandable-target.focus {
+  outline: var(--cnvs-brand-common-focus-outline) solid 0.125rem;
+}
+
+
+.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);
+}
+