@workday/canvas-kit-css/common.css

The parent module that contains all Workday Canvas Kit CSS components

.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-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-lighter: var(--cnvs-base-palette-slate-50);
  --cnvs-brand-neutral-lightest: var(--cnvs-base-palette-slate-25);
  --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-lighter: var(--cnvs-base-palette-green-50);
  --cnvs-brand-success-lightest: var(--cnvs-base-palette-green-25);
  --cnvs-brand-error-accent: var(--cnvs-base-palette-neutral-0);
  --cnvs-brand-error-darkest: var(--cnvs-base-palette-red-800);
  --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-200);
  --cnvs-brand-error-lighter: var(--cnvs-base-palette-red-50);
  --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-200);
  --cnvs-brand-alert-lighter: 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-lighter: var(--cnvs-base-palette-blue-50);
  --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%);
}