@danske/sapphire-css 16.3.0

package/components/calendar/calendar.module.css

@@ -0,0 +1,406 @@
+.sapphire-calendar {
+  font-family: var(--sapphire-calendar-font-name);
+  display: inline-flex;
+  background-color: var(--sapphire-calendar-color-background-calendar);
+  box-sizing: border-box;
+}
+.sapphire-calendar__table-container {
+  /*
+  min-width needed for months and years view. Otherwise the calendar's width changes as view is
+  switched
+  */
+  min-width: calc(7 * var(--sapphire-calendar-size-width-default));
+  /*
+  For now we have decided to not support flexible width for the calendar grid.
+  If we want that, we only need to add a `flex: 1` here. The width of Months/Years table is
+  also fixed now, which we would need to change, or at least add `margin: auto` to it.
+  */
+}
+
+.sapphire-calendar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: var(--sapphire-calendar-size-spacing-header-bottom);
+}
+
+.sapphire-calendar__header--left .sapphire-calendar__header-next-month {
+  visibility: hidden;
+}
+
+.sapphire-calendar__header--right .sapphire-calendar__header-prev-month {
+  visibility: hidden;
+}
+
+.sapphire-calendar__header-title {
+  margin: 0 auto;
+}
+
+.sapphire-calendar__tables-row {
+  display: flex;
+  gap: var(--sapphire-calendar-size-spacing-calendar-double-container-gap);
+}
+
+.sapphire-calendar__table {
+  width: 100%;
+  border-spacing: 0;
+}
+
+.sapphire-calendar__table--month-year {
+  width: calc(7 * var(--sapphire-calendar-size-width-default));
+  table-layout: fixed;
+}
+
+.sapphire-calendar__table
+  .sapphire-calendar__table-body-row:not(:last-child)
+  .sapphire-calendar__table-body-cell {
+  padding-bottom: var(
+    --sapphire-calendar-size-spacing-body-cell-bottom-default
+  );
+}
+
+.sapphire-calendar__table--month-year
+  .sapphire-calendar__table-body-row:not(:last-child)
+  .sapphire-calendar__table-body-cell {
+  padding-bottom: var(
+    --sapphire-calendar-size-spacing-body-cell-bottom-month-year
+  );
+}
+
+.sapphire-calendar__table--with-week-numbers th:first-child {
+  padding-right: var(--sapphire-calendar-size-spacing-week-numbers-gap);
+  border-right: var(--sapphire-calendar-size-width-border) solid
+    var(--sapphire-calendar-color-border);
+}
+
+.sapphire-calendar__table--with-week-numbers th:first-child + td {
+  padding-left: var(--sapphire-calendar-size-spacing-week-numbers-gap);
+}
+
+.sapphire-calendar__table-head-cell {
+  height: var(--sapphire-calendar-size-height-head-cell);
+  text-align: center;
+  padding: 0;
+}
+
+.sapphire-calendar__table-body-cell {
+  height: var(--sapphire-calendar-size-height-default);
+  text-align: center;
+  padding: 0;
+}
+
+.sapphire-calendar__custom-ranges {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sapphire-calendar-size-spacing-custom-ranges-gap);
+  border-left: var(--sapphire-calendar-size-width-border) solid
+    var(--sapphire-calendar-color-border);
+  margin-left: var(--sapphire-calendar-size-spacing-custom-ranges-margin-left);
+  padding-left: var(
+    --sapphire-calendar-size-spacing-custom-ranges-padding-left
+  );
+  padding-right: var(
+    --sapphire-calendar-size-spacing-custom-ranges-padding-right
+  );
+}
+
+.sapphire-calendar__day-of-week {
+  text-decoration: none;
+  color: var(--sapphire-calendar-color-content-day-of-week);
+  font-weight: var(--sapphire-calendar-font-weight-day-of-week);
+  font-size: var(--sapphire-calendar-size-font-default);
+}
+
+.sapphire-calendar__week-number {
+  display: block;
+  text-decoration: none;
+  color: var(--sapphire-calendar-color-content-week-number);
+  font-weight: var(--sapphire-calendar-font-weight-week-number);
+  font-size: var(--sapphire-calendar-size-font-default);
+  width: var(--sapphire-calendar-size-width-default);
+}
+
+.sapphire-calendar__button {
+  all: unset;
+  display: flex;
+  height: var(--sapphire-calendar-size-height-default);
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  position: relative;
+  margin: auto;
+  box-sizing: border-box;
+
+  /* to prevent focus rings from overlapping with the neighbor button*/
+  padding: var(--sapphire-calendar-size-focus-ring-border);
+
+  width: 100%;
+}
+
+.sapphire-calendar__button .sapphire-calendar__button-text {
+  font-size: var(--sapphire-calendar-size-font-default);
+  color: var(--sapphire-calendar-color-content-default);
+  font-weight: var(--sapphire-calendar-font-weight-default);
+  background-color: var(--sapphire-calendar-color-background-button-default);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--sapphire-calendar-size-radius);
+  transition-property: opacity, background-color, color;
+  transition-duration: 0s;
+  transition-timing-function: ease-in-out;
+  padding: 0 var(--sapphire-calendar-size-spacing-title-horizontal);
+}
+
+.sapphire-calendar__header-title,
+.sapphire-calendar__button--title .sapphire-calendar__button-text {
+  font-weight: var(--sapphire-calendar-font-weight-title);
+  font-size: var(--sapphire-calendar-size-font-title);
+}
+
+/* Customizations for day buttons */
+.sapphire-calendar__button--day .sapphire-calendar__button-text {
+  width: calc(
+    var(--sapphire-calendar-size-width-default) - 2 *
+      var(--sapphire-calendar-size-focus-ring-border)
+  );
+  height: calc(
+    var(--sapphire-calendar-size-width-default) - 2 *
+      var(--sapphire-calendar-size-focus-ring-border)
+  );
+  padding: 0;
+}
+
+.sapphire-calendar__button:disabled,
+.sapphire-calendar__button.is-disabled {
+  opacity: var(--sapphire-calendar-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.sapphire-calendar__button.is-focus .sapphire-calendar__button-text,
+.sapphire-calendar__button:not(.js-focus):focus-visible
+  .sapphire-calendar__button-text {
+  outline: var(--sapphire-calendar-size-focus-ring-border) solid
+    var(--sapphire-calendar-color-focus-ring);
+  outline-offset: var(--sapphire-calendar-size-focus-ring-offset);
+  z-index: 2;
+  background-color: var(--sapphire-calendar-color-background-button-focus);
+  transition-duration: var(--sapphire-calendar-time-transition);
+}
+
+.sapphire-calendar__button:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover
+  .sapphire-calendar__button-text {
+  background-color: var(--sapphire-calendar-color-background-button-hover);
+  transition-duration: var(--sapphire-calendar-time-transition);
+}
+
+.sapphire-calendar__button:not(:disabled):not(.is-disabled).is-active
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button:not(:disabled):not(.is-disabled):active
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button:not(:disabled):not(.is-disabled):focus-visible:active
+  .sapphire-calendar__button-text {
+  background-color: var(--sapphire-calendar-color-background-button-active);
+  transition-duration: var(--sapphire-calendar-time-transition);
+}
+
+.sapphire-calendar__table[aria-readonly='true'] .sapphire-calendar__button {
+  pointer-events: none;
+}
+
+.sapphire-calendar__button.sapphire-calendar__button--range-selection
+  .sapphire-calendar__button-text {
+  color: var(--sapphire-calendar-color-content-range-selection);
+  background-color: var(
+    --sapphire-calendar-color-background-range-selection-default
+  );
+}
+
+.sapphire-calendar__button.sapphire-calendar__button--range-selection {
+  background-color: var(
+    --sapphire-calendar-color-background-range-selection-default
+  );
+}
+
+.sapphire-calendar__button.sapphire-calendar__button--range-selection:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button.sapphire-calendar__button--range-selection:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover
+  .sapphire-calendar__button-text {
+  background-color: var(
+    --sapphire-calendar-color-background-range-selection-hover
+  );
+}
+
+.sapphire-calendar__button.sapphire-calendar__button--range-selection:not(:disabled):not(.is-disabled).is-active
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button.sapphire-calendar__button--range-selection:not(:disabled):not(.is-disabled):active
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button.sapphire-calendar__button--range-selection:not(:disabled):not(.is-disabled):focus-visible:active
+  .sapphire-calendar__button-text {
+  background-color: var(
+    --sapphire-calendar-color-background-range-selection-active
+  );
+}
+
+.sapphire-calendar__button.sapphire-calendar__button--range-selection.is-focus
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button.sapphire-calendar__button--range-selection:not(.js-focus):focus-visible
+  .sapphire-calendar__button-text {
+  background-color: var(
+    --sapphire-calendar-color-background-range-selection-focus
+  );
+}
+
+.sapphire-calendar__button.sapphire-calendar__button--selected:not(.sapphire-calendar__button--range-selection)
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end
+  .sapphire-calendar__button-text {
+  background-color: var(--sapphire-calendar-color-background-selected-default);
+  color: var(--sapphire-calendar-color-content-selected);
+  font-weight: var(--sapphire-calendar-font-weight-selected);
+}
+
+.sapphire-calendar__button:focus {
+  outline: none;
+}
+
+.sapphire-calendar__button.sapphire-calendar__button--selected:not(.sapphire-calendar__button--range-selection):not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button.sapphire-calendar__button--selected:not(.sapphire-calendar__button--range-selection):not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover
+  .sapphire-calendar__button-text {
+  background-color: var(--sapphire-calendar-color-background-selected-hover);
+}
+
+.sapphire-calendar__button.sapphire-calendar__button--selected:not(.sapphire-calendar__button--range-selection):not(:disabled):not(.is-disabled).is-active
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button.sapphire-calendar__button--selected:not(.sapphire-calendar__button--range-selection):not(:disabled):not(.is-disabled):active
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button.sapphire-calendar__button--selected:not(.sapphire-calendar__button--range-selection):not(:disabled):not(.is-disabled):focus-visible:active
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start:not(:disabled):not(.is-disabled).is-active
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start:not(:disabled):not(.is-disabled):active
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start:not(:disabled):not(.is-disabled):focus-visible:active
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end:not(:disabled):not(.is-disabled).is-active
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end:not(:disabled):not(.is-disabled):active
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end:not(:disabled):not(.is-disabled):focus-visible:active
+  .sapphire-calendar__button-text {
+  background-color: var(--sapphire-calendar-color-background-selected-active);
+}
+
+.sapphire-calendar__button.sapphire-calendar__button--selected:not(.sapphire-calendar__button--range-selection).is-focus
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button.sapphire-calendar__button--selected:not(.sapphire-calendar__button--range-selection):not(.js-focus):focus-visible
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start.is-focus
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start:not(.js-focus):focus-visible
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end.is-focus
+  .sapphire-calendar__button-text,
+.sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end:not(.js-focus):focus-visible
+  .sapphire-calendar__button-text {
+  background-color: var(--sapphire-calendar-color-background-selected-focus);
+}
+
+.sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start,
+.sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--range-start {
+  border-bottom-left-radius: var(--sapphire-calendar-size-radius);
+  border-top-left-radius: var(--sapphire-calendar-size-radius);
+}
+
+.sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end,
+.sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--range-end {
+  border-bottom-right-radius: var(--sapphire-calendar-size-radius);
+  border-top-right-radius: var(--sapphire-calendar-size-radius);
+}
+
+.sapphire-calendar__button.sapphire-calendar__button--current::after {
+  content: '';
+  position: absolute;
+  z-index: 2;
+  height: var(--sapphire-calendar-size-height-current-indicator);
+  width: var(--sapphire-calendar-size-width-current-indicator);
+  border-radius: var(--sapphire-calendar-size-radius);
+  background-color: var(
+    --sapphire-calendar-color-background-current-indicator-default
+  );
+  bottom: var(--sapphire-calendar-size-spacing-current-indicator-bottom);
+}
+
+.sapphire-calendar__button.sapphire-calendar__button--selected:not(.sapphire-calendar__button--range-selection).sapphire-calendar__button--current::after,
+.sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start.sapphire-calendar__button--current::after,
+.sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-end.sapphire-calendar__button--current::after {
+  background-color: var(
+    --sapphire-calendar-color-background-current-indicator-selected
+  );
+}
+
+.sapphire-calendar__button.sapphire-calendar__button--outside-month {
+  visibility: hidden;
+}
+
+/* Wrapper element for the grid(s) that animate */
+.sapphire-calendar__grid-page-animation {
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+.sapphire-calendar__grid-page-animation:not(:has(.enter, .exit)) {
+  /* Minor improvement for browsers that support :has selector, to let focus ring on calendar cells
+  be visible, while not animating */
+  overflow: initial;
+}
+
+/* Next page animation, applied on the wrapper, when next grid(s) are animating in */
+.sapphire-calendar__grid-page-animation--next .enter {
+  transform: translateX(100%);
+}
+.sapphire-calendar__grid-page-animation--next .enter-active {
+  transform: translateX(0%);
+  transition: transform var(--sapphire-calendar-time-slide) ease-in-out;
+}
+.sapphire-calendar__grid-page-animation--next .exit {
+  transform: translateX(0%);
+  position: absolute;
+}
+.sapphire-calendar__grid-page-animation--next .exit-active {
+  transform: translateX(-100%);
+  transition: transform var(--sapphire-calendar-time-slide) ease-in-out;
+}
+
+/* Previous page animation, applied on the wrapper, when previous grid(s) are animating in */
+.sapphire-calendar__grid-page-animation--prev .enter {
+  transform: translateX(-100%);
+}
+.sapphire-calendar__grid-page-animation--prev .enter-active {
+  transform: translateX(0%);
+  transition: transform var(--sapphire-calendar-time-slide) ease-in-out;
+}
+.sapphire-calendar__grid-page-animation--prev .exit {
+  transform: translateX(0%);
+  position: absolute;
+}
+.sapphire-calendar__grid-page-animation--prev .exit-active {
+  transform: translateX(100%);
+  transition: transform var(--sapphire-calendar-time-slide) ease-in-out;
+}

package/components/calendar/calendar.module.css.d.ts

@@ -0,0 +1,47 @@
+declare const styles: {
+  readonly "sapphire-calendar": string;
+  readonly "sapphire-calendar__table-container": string;
+  readonly "sapphire-calendar__header": string;
+  readonly "sapphire-calendar__header--left": string;
+  readonly "sapphire-calendar__header-next-month": string;
+  readonly "sapphire-calendar__header--right": string;
+  readonly "sapphire-calendar__header-prev-month": string;
+  readonly "sapphire-calendar__header-title": string;
+  readonly "sapphire-calendar__tables-row": string;
+  readonly "sapphire-calendar__table": string;
+  readonly "sapphire-calendar__table--month-year": string;
+  readonly "sapphire-calendar__table-body-row": string;
+  readonly "sapphire-calendar__table-body-cell": string;
+  readonly "sapphire-calendar__table--with-week-numbers": string;
+  readonly "sapphire-calendar__table-head-cell": string;
+  readonly "sapphire-calendar__custom-ranges": string;
+  readonly "sapphire-calendar__day-of-week": string;
+  readonly "sapphire-calendar__week-number": string;
+  readonly "sapphire-calendar__button": string;
+  readonly "sapphire-calendar__button-text": string;
+  readonly "sapphire-calendar__button--title": string;
+  readonly "sapphire-calendar__button--day": string;
+  readonly "is-disabled": string;
+  readonly "is-focus": string;
+  readonly "js-focus": string;
+  readonly "is-active": string;
+  readonly "js-hover": string;
+  readonly "is-hover": string;
+  readonly "sapphire-calendar__button--range-selection": string;
+  readonly "sapphire-calendar__button--selected": string;
+  readonly "sapphire-calendar__button--selection-start": string;
+  readonly "sapphire-calendar__button--selection-end": string;
+  readonly "sapphire-calendar__button--range-start": string;
+  readonly "sapphire-calendar__button--range-end": string;
+  readonly "sapphire-calendar__button--current": string;
+  readonly "sapphire-calendar__button--outside-month": string;
+  readonly "sapphire-calendar__grid-page-animation": string;
+  readonly "enter": string;
+  readonly "exit": string;
+  readonly "sapphire-calendar__grid-page-animation--next": string;
+  readonly "enter-active": string;
+  readonly "exit-active": string;
+  readonly "sapphire-calendar__grid-page-animation--prev": string;
+};
+export = styles;
+

package/components/checkbox/checkbox.module.css

@@ -0,0 +1,182 @@
+.sapphire-checkbox {
+  font-family: var(--sapphire-checkbox-font-label-name);
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  max-width: 100%;
+}
+
+.sapphire-checkbox__input {
+  margin: 0;
+  overflow: visible;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+
+  /*
+   * Not setting opacity to 0 as it could be ignored by some screen readers
+   */
+  opacity: 0.0001;
+  z-index: 1;
+
+  cursor: pointer;
+}
+
+.sapphire-checkbox__label {
+  /* The below is meant to address a font rendering quirk in OSX where the text
+   * looks bolder than intended due to subpixel rendering. This quirk generally
+   * occurs for bold fonts on dark backgrounds but depending on the font, it
+   * can happen in other contexts as well.
+   *
+   * These do not do anything except in webkit browsers & firefox on OSX.
+   *
+   * For more details see:
+   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
+   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
+   */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  margin-left: var(--sapphire-checkbox-size-spacing-label);
+  font-size: var(--sapphire-checkbox-size-font-default);
+  color: var(--sapphire-checkbox-color-label);
+  line-height: var(--sapphire-checkbox-size-height-label);
+}
+
+.sapphire-checkbox__label:empty {
+  margin-left: 0;
+}
+
+.sapphire-checkbox__error-text {
+  display: block;
+  font-family: var(--sapphire-checkbox-font-error-text-name);
+  font-weight: var(--sapphire-checkbox-font-error-text-weight);
+  font-size: var(--sapphire-checkbox-size-font-error-text);
+  color: var(--sapphire-checkbox-color-error-text);
+  margin-top: var(--sapphire-checkbox-size-spacing-error-text-vertical);
+  margin-left: calc(
+    var(--sapphire-checkbox-size-spacing-label) +
+      var(--sapphire-checkbox-size-width-box)
+  );
+}
+
+/* The checkbox box */
+
+.sapphire-checkbox__box {
+  box-sizing: border-box;
+  position: relative;
+  width: var(--sapphire-checkbox-size-width-box);
+  height: var(--sapphire-checkbox-size-height-box);
+  border-radius: var(--sapphire-checkbox-size-radius);
+  border: var(--sapphire-checkbox-size-width-border-unchecked) solid
+    var(--sapphire-checkbox-color-border-unchecked-default);
+  background-color: var(--sapphire-checkbox-color-background-unchecked);
+  transition: all var(--sapphire-checkbox-time-transition);
+  flex-shrink: 0;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.sapphire-checkbox__box-icon {
+  display: inherit;
+  line-height: 0;
+  color: var(--sapphire-checkbox-color-icon);
+  margin: calc(var(--sapphire-checkbox-size-width-border-unchecked) * -1);
+  height: var(--sapphire-checkbox-size-height-box);
+  width: var(--sapphire-checkbox-size-width-box);
+}
+
+.sapphire-checkbox--error .sapphire-checkbox__box {
+  border-color: var(--sapphire-checkbox-color-border-unchecked-error-default);
+}
+
+/* Checked (same UI as indeterminate) */
+
+.sapphire-checkbox--checked .sapphire-checkbox__box,
+.sapphire-checkbox--indeterminate .sapphire-checkbox__box {
+  border-width: var(--sapphire-checkbox-size-width-border-checked);
+  background-color: var(--sapphire-checkbox-color-background-checked-default);
+}
+
+.sapphire-checkbox--checked.sapphire-checkbox--error .sapphire-checkbox__box,
+.sapphire-checkbox--indeterminate.sapphire-checkbox--error
+  .sapphire-checkbox__box {
+  background-color: var(
+    --sapphire-checkbox-color-background-checked-error-default
+  );
+}
+
+/* HOVER */
+
+/* Hover when not checked */
+
+.sapphire-checkbox:not(:active):not(.is-active):not(.sapphire-checkbox--checked).is-hover
+  .sapphire-checkbox__box,
+.sapphire-checkbox:not(:active):not(.is-active):not(.sapphire-checkbox--checked):not(.js-hover):hover
+  .sapphire-checkbox__input:not(:disabled)
+  ~ .sapphire-checkbox__box {
+  border-color: var(--sapphire-checkbox-color-border-unchecked-hover);
+}
+
+.sapphire-checkbox--error:not(:active):not(.is-active):not(.sapphire-checkbox--checked).is-hover
+  .sapphire-checkbox__box,
+.sapphire-checkbox--error:not(:active):not(.is-active):not(.sapphire-checkbox--checked):not(.js-hover):hover
+  .sapphire-checkbox__input:not(:disabled)
+  ~ .sapphire-checkbox__box {
+  border-color: var(--sapphire-checkbox-color-border-unchecked-error-hover);
+}
+
+/* Hover when checked (same UI as indeterminate) */
+
+.sapphire-checkbox--checked:not(:active):not(.is-active).is-hover
+  .sapphire-checkbox__box,
+.sapphire-checkbox--checked:not(:active):not(.is-active):not(.js-hover):hover
+  .sapphire-checkbox__input:not(:disabled)
+  ~ .sapphire-checkbox__box,
+.sapphire-checkbox--indeterminate:not(:active):not(.is-active).is-hover
+  .sapphire-checkbox__box,
+.sapphire-checkbox--indeterminate:not(:active):not(.is-active):not(.js-hover):hover
+  .sapphire-checkbox__input:not(:disabled)
+  ~ .sapphire-checkbox__box {
+  background-color: var(--sapphire-checkbox-color-background-checked-hover);
+}
+
+.sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(.is-active).is-hover
+  .sapphire-checkbox__box,
+.sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(.is-active):not(.js-hover):hover
+  .sapphire-checkbox__input:not(:disabled)
+  ~ .sapphire-checkbox__box,
+.sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(.is-active).is-hover
+  .sapphire-checkbox__box,
+.sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(.is-active):not(.js-hover):hover
+  .sapphire-checkbox__input:not(:disabled)
+  ~ .sapphire-checkbox__box {
+  background-color: var(
+    --sapphire-checkbox-color-background-checked-error-hover
+  );
+}
+
+/* FOCUS */
+
+.sapphire-checkbox.is-focus .sapphire-checkbox__box,
+.sapphire-checkbox:not(.js-focus)
+  .sapphire-checkbox__input:focus-visible
+  ~ .sapphire-checkbox__box {
+  outline: var(--sapphire-checkbox-size-focus-ring-border) solid
+    var(--sapphire-checkbox-color-focus-ring);
+  outline-offset: var(--sapphire-checkbox-size-focus-ring-offset);
+}
+
+/* DISABLED */
+
+.sapphire-checkbox__input:disabled {
+  cursor: not-allowed;
+}
+
+.sapphire-checkbox__input:disabled ~ .sapphire-checkbox__box,
+.sapphire-checkbox__input:disabled ~ .sapphire-checkbox__label {
+  opacity: var(--sapphire-checkbox-opacity-disabled);
+}

package/components/checkbox/checkbox.module.css.d.ts

@@ -0,0 +1,18 @@
+declare const styles: {
+  readonly "sapphire-checkbox": string;
+  readonly "sapphire-checkbox__input": string;
+  readonly "sapphire-checkbox__label": string;
+  readonly "sapphire-checkbox__error-text": string;
+  readonly "sapphire-checkbox__box": string;
+  readonly "sapphire-checkbox__box-icon": string;
+  readonly "sapphire-checkbox--error": string;
+  readonly "sapphire-checkbox--checked": string;
+  readonly "sapphire-checkbox--indeterminate": string;
+  readonly "is-active": string;
+  readonly "is-hover": string;
+  readonly "js-hover": string;
+  readonly "is-focus": string;
+  readonly "js-focus": string;
+};
+export = styles;
+

package/components/contextualHelp/contextualHelp.module.css

@@ -0,0 +1,35 @@
+.sapphire-contextual-help {
+  color: var(--sapphire-contextual-help-color-content);
+  line-height: var(--sapphire-contextual-help-size-line-height);
+  max-width: var(--sapphire-contextual-help-size-width-max);
+  font-family: var(--sapphire-contextual-help-font-name);
+  font-weight: var(--sapphire-contextual-help-font-weight);
+  font-size: var(--sapphire-contextual-help-size-font);
+  padding: var(--sapphire-contextual-help-size-spacing-vertical)
+    var(--sapphire-contextual-help-size-spacing-horizontal);
+  /* if implemented as focusable, we don't want the outline because this is not
+   * an an interactive element in itself */
+  outline: none;
+
+  /* The below is meant to address a font rendering quirk in OSX where the text
+   * looks bolder than intended due to subpixel rendering. This quirk generally
+   * occurs for bold fonts on dark backgrounds but depending on the font, it
+   * can happen in other contexts as well.
+   *
+   * These do not do anything except in webkit browsers & firefox on OSX.
+   *
+   * For more details see:
+   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
+   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
+   */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.sapphire-contextual-help__header {
+  padding-bottom: var(--sapphire-contextual-help-size-spacing-header);
+}
+
+.sapphire-contextual-help__footer {
+  padding-top: var(--sapphire-contextual-help-size-spacing-footer);
+}