@workday/canvas-kit-css 14.0.0-alpha.1165-next.0 → 14.0.0-alpha.1167-next.0

package/card.css

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

@@ -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-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

@@ -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/color-picker.css

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

@@ -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: var(--cnvs-base-palette-red-800);
-  --cnvs-brand-common-alert-inner: var(--cnvs-base-palette-amber-400);
-  --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-100);
-  --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-200);
-  --cnvs-brand-success-lightest: var(--cnvs-base-palette-green-100);
-  --cnvs-brand-error-accent: var(--cnvs-base-palette-neutral-0);
-  --cnvs-brand-error-dark: var(--cnvs-base-palette-red-600);
-  --cnvs-brand-error-base: var(--cnvs-base-palette-red-700);
-  --cnvs-brand-error-light: var(--cnvs-base-palette-red-200);
-  --cnvs-brand-error-lightest: var(--cnvs-base-palette-red-100);
-  --cnvs-brand-alert-accent: var(--cnvs-base-palette-neutral-900);
-  --cnvs-brand-alert-darkest: var(--cnvs-base-palette-amber-800);
-  --cnvs-brand-alert-dark: var(--cnvs-base-palette-amber-600);
-  --cnvs-brand-alert-base: var(--cnvs-base-palette-amber-400);
-  --cnvs-brand-alert-light: var(--cnvs-base-palette-amber-100);
-  --cnvs-brand-alert-lightest: var(--cnvs-base-palette-amber-50);
-  --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-100);
-  --cnvs-brand-gradient-primary: linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);
-}
-

package/expandable.css

@@ -1,97 +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-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);
-}
-