@danske/sapphire-css 16.3.0

package/components/switch/switch.module.css

@@ -0,0 +1,170 @@
+/**
+ * wrapper
+ * Can be html label element to be able to drop "for" and "id" on label and input.
+*/
+.sapphire-switch {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  min-height: var(--sapphire-switch-size-height);
+  max-width: 100%;
+  gap: var(--sapphire-switch-size-spacing-label);
+}
+
+/**
+ * hidden html input
+ */
+.sapphire-switch-input {
+  margin: 0;
+  box-sizing: border-box;
+  padding: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: 0.0001;
+  z-index: 1;
+  cursor: pointer;
+}
+
+/**
+ * label
+ */
+.sapphire-switch-label {
+  display: flex;
+  align-items: center;
+  gap: var(--sapphire-switch-size-spacing-label);
+  font-family: var(--sapphire-switch-font-label-name);
+  font-weight: var(--sapphire-switch-font-label-weight);
+  font-size: var(--sapphire-switch-size-font);
+  line-height: var(--sapphire-switch-size-line-height);
+  color: var(--sapphire-switch-color-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;
+}
+
+/**
+ * knob track
+ */
+.sapphire-switch-track {
+  background: var(--sapphire-switch-color-background-off-default);
+  box-sizing: border-box;
+  position: relative;
+  width: var(--sapphire-switch-size-width);
+  transition: background var(--sapphire-switch-time-transition) ease-in-out;
+  height: var(--sapphire-switch-size-height);
+  border-radius: calc(var(--sapphire-switch-size-height) / 2);
+}
+.sapphire-switch-track::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateY(-50%) translateX(-50%);
+}
+.sapphire-switch-input:checked ~ .sapphire-switch-track {
+  background-color: var(--sapphire-switch-color-background-on-default);
+}
+/* hover (unchecked) */
+.sapphire-switch:not(:active):not(.is-active):not(.js-hover):hover
+  .sapphire-switch-input:not(:disabled)
+  ~ .sapphire-switch-track,
+.sapphire-switch:not(:active):not(.is-active).is-hover .sapphire-switch-track {
+  background-color: var(--sapphire-switch-color-background-off-hover);
+}
+/* hover (checked) */
+.sapphire-switch:not(:active):not(.is-active):not(.js-hover):hover
+  .sapphire-switch-input:not(:disabled):checked
+  ~ .sapphire-switch-track,
+.sapphire-switch:not(:active):not(.is-active).is-hover
+  .sapphire-switch-input:checked
+  ~ .sapphire-switch-track {
+  background-color: var(--sapphire-switch-color-background-on-hover);
+}
+/* focus */
+.sapphire-switch:not(.js-focus)
+  .sapphire-switch-input:focus-visible
+  ~ .sapphire-switch-track::before,
+.sapphire-switch.is-focus .sapphire-switch-track::before {
+  width: calc(
+    var(--sapphire-switch-size-width) + 2 *
+      var(--sapphire-switch-size-focus-ring-outer-border) + 2 *
+      var(--sapphire-switch-size-focus-ring-inner-border)
+  );
+  height: calc(
+    var(--sapphire-switch-size-height) + 2 *
+      var(--sapphire-switch-size-focus-ring-outer-border) + 2 *
+      var(--sapphire-switch-size-focus-ring-inner-border)
+  );
+  border: var(--sapphire-switch-size-focus-ring-outer-border) solid
+    var(--sapphire-switch-color-focus-ring-outer-border);
+  border-radius: 1000px; /* percentage value does not work here */
+  box-sizing: border-box;
+  box-shadow: inset 0px 0px 0px
+    var(--sapphire-switch-size-focus-ring-inner-border)
+    var(--sapphire-switch-color-focus-ring-inner-border);
+}
+/* active (checked) */
+.sapphire-switch:active
+  .sapphire-switch-input:not(:disabled):checked
+  ~ .sapphire-switch-track,
+.sapphire-switch.is-active
+  .sapphire-switch-input:not(:disabled):checked
+  ~ .sapphire-switch-track {
+  background-color: var(--sapphire-switch-color-background-on-active);
+}
+/* active (unchecked) */
+.sapphire-switch:active
+  .sapphire-switch-input:not(:disabled)
+  ~ .sapphire-switch-track,
+.sapphire-switch.is-active
+  .sapphire-switch-input:not(:disabled)
+  ~ .sapphire-switch-track {
+  background-color: var(--sapphire-switch-color-background-off-active);
+}
+/* disabled */
+.sapphire-switch-input:disabled {
+  cursor: default;
+}
+
+.sapphire-switch-input:disabled ~ .sapphire-switch-track,
+.sapphire-switch-input:disabled ~ .sapphire-switch-label {
+  opacity: var(--sapphire-switch-opacity-disabled);
+}
+
+/**
+ * knob handle
+ */
+.sapphire-switch-track::after {
+  content: '';
+  position: absolute;
+  width: var(--sapphire-switch-size-knob);
+  height: var(--sapphire-switch-size-knob);
+  border: solid
+    calc(
+      (var(--sapphire-switch-size-height) - var(--sapphire-switch-size-knob)) /
+        2
+    )
+    transparent;
+  border-radius: 50%;
+  background-color: var(--sapphire-switch-color-background-knob);
+  background-clip: content-box;
+  left: 0;
+  transition: left var(--sapphire-switch-time-transition) ease-in-out;
+}
+.sapphire-switch-input:checked ~ .sapphire-switch-track::after {
+  left: calc(100% - var(--sapphire-switch-size-height));
+}

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

@@ -0,0 +1,13 @@
+declare const styles: {
+  readonly "sapphire-switch": string;
+  readonly "sapphire-switch-input": string;
+  readonly "sapphire-switch-label": string;
+  readonly "sapphire-switch-track": string;
+  readonly "is-active": string;
+  readonly "js-hover": string;
+  readonly "is-hover": string;
+  readonly "js-focus": string;
+  readonly "is-focus": string;
+};
+export = styles;
+

package/components/table/table.module.css

@@ -0,0 +1,303 @@
+.sapphire-table {
+  /* 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-table--overflow {
+  /*
+   * If the "sapphire-table" has a set height the table needs to overflow.
+   */
+  overflow: auto;
+}
+
+.sapphire-table__table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  height: inherit;
+  background-color: var(--sapphire-table-color-background-table);
+  width: 100%;
+}
+
+.sapphire-table-sortedIcon {
+  display: inline-flex;
+  visibility: hidden;
+  vertical-align: top;
+}
+
+.sapphire-table-sortableIcon {
+  display: inline-flex;
+  visibility: hidden;
+  vertical-align: top;
+}
+
+.sapphire-table__head {
+  top: 0;
+  z-index: 2; /* Setting to two because body rows are positioned relative */
+  line-height: var(--sapphire-table-size-line-height-cell-default);
+  background-color: var(--sapphire-table-color-background-head);
+}
+
+.sapphire-table__head--sticky {
+  /*
+   * If the "sapphire-table" needs the header to be sticky relative to some
+   * other ancestor which is not the table itself, then the table should not
+   * have the `--overflow` modifier.
+   */
+  position: sticky;
+}
+
+.sapphire-table__cell--alignLeft {
+  text-align: left;
+}
+
+.sapphire-table__cell--alignCenter {
+  text-align: center;
+}
+
+.sapphire-table__cell--alignRight {
+  text-align: end;
+}
+
+.sapphire-table .sapphire-table__headCell {
+  color: var(--sapphire-table-color-content-cell);
+  box-sizing: border-box;
+  font-family: var(--sapphire-table-font-name);
+  font-weight: var(--sapphire-table-font-weight-head);
+  line-height: var(--sapphire-table-size-line-height-cell-default);
+  padding: var(--sapphire-table-size-spacing-head-cell-vertical-default)
+    var(--sapphire-table-size-spacing-head-cell-horizontal-default);
+  vertical-align: top;
+}
+
+.sapphire-table__headCell .sapphire-table__headCell_container {
+  padding: var(--sapphire-table-size-spacing-head-cell-container-vertical)
+    var(--sapphire-table-size-spacing-head-cell-container-horizontal);
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.sapphire-table__cell--alignRight .sapphire-table__headCell_container {
+  justify-content: flex-end;
+}
+.sapphire-table__cell--alignLeft .sapphire-table__headCell_container {
+  justify-content: flex-start;
+}
+.sapphire-table__cell--alignCenter .sapphire-table__headCell_container {
+  justify-content: center;
+}
+
+/* focus styles */
+.sapphire-table__row,
+.sapphire-table__cell,
+.sapphire-table__headCell,
+.sapphire-table__selectionCell {
+  outline: none;
+
+  /* In order to have the focus ring be displayed over the row divider */
+  position: relative;
+  z-index: 1;
+}
+
+.sapphire-table__headCell.is-focus .sapphire-table__headCell_container,
+.sapphire-table__headCell:not(.js-focus):focus-visible
+  .sapphire-table__headCell_container,
+.sapphire-table__cell.is-focus,
+.sapphire-table__cell:not(.js-focus):focus-visible,
+.sapphire-table__selectionCell.is-focus,
+.sapphire-table__selectionCell:not(.js-focus):focus-visible,
+.sapphire-table__row.is-focus,
+.sapphire-table__row:not(.js-focus):focus-visible {
+  outline: none;
+  border-radius: var(--sapphire-table-size-radius-focus);
+  background-color: var(--sapphire-table-color-background-focus);
+  box-shadow: inset 0px 0px 0px var(--sapphire-table-size-width-border-focus)
+    var(--sapphire-table-color-border-focus);
+}
+
+.sapphire-table__headCell.is-focus .sapphire-table__headCell_container,
+.sapphire-table__headCell:not(.js-focus):focus-visible
+  .sapphire-table__headCell_container {
+  /* According to the designs, for header cells only, focus has a border radius. */
+  border-radius: var(--sapphire-table-size-radius-focus);
+}
+/* end of focus styles */
+
+.sapphire-table__headCell.sapphire-table__headCell--sortable.is-hover
+  .sapphire-table__headCell_container,
+.sapphire-table__headCell.sapphire-table__headCell--sortable:not(.js-hover):hover
+  .sapphire-table__headCell_container {
+  background-color: var(--sapphire-table-color-background-hover);
+  border-radius: var(--sapphire-table-size-radius-hover);
+}
+
+.sapphire-table__headCell.sapphire-table__headCell--sortable {
+  cursor: pointer;
+}
+
+.sapphire-table__headCell.sapphire-table__headCell--sortable:not(sapphire-table__headCell--sorted):hover
+  .sapphire-table-sortableIcon {
+  visibility: visible;
+}
+
+.sapphire-table__headCell--sorted .sapphire-table-sortedIcon {
+  visibility: visible;
+  padding-left: var(--sapphire-table-size-spacing-icon-left-default);
+}
+
+.sapphire-table__headCell .sapphire-table-sortedIcon,
+.sapphire-table__headCell .sapphire-table-sortableIcon {
+  padding-left: var(--sapphire-table-size-spacing-icon-left-default);
+}
+.sapphire-table__cell--alignRight .sapphire-table-sortedIcon,
+.sapphire-table__cell--alignRight .sapphire-table-sortableIcon {
+  padding-right: var(--sapphire-table-size-spacing-icon-left-default);
+}
+
+.sapphire-table__headCell__text,
+.sapphire-table__headCell__icon {
+  vertical-align: top;
+  display: inline-block;
+}
+
+.sapphire-table__body {
+  position: relative;
+  overflow: auto;
+}
+
+.sapphire-table__cell {
+  box-sizing: border-box;
+  color: var(--sapphire-table-color-content-cell);
+  font-family: var(--sapphire-table-font-name);
+  font-weight: var(--sapphire-table-font-weight-data);
+}
+
+/* Overflow behaviour */
+.sapphire-table__cell--ellipsed,
+.sapphire-table__headCell_content--ellipsed {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sapphire-table .sapphire-table__cell,
+.sapphire-table .sapphire-table__selectionCell {
+  font-size: var(--sapphire-table-size-font-data-default);
+  line-height: var(--sapphire-table-size-line-height-cell-default);
+  padding: var(--sapphire-table-size-spacing-cell-vertical-default)
+    var(--sapphire-table-size-spacing-cell-horizontal-default);
+}
+
+/* Selection cells that are suppose to contain only a checkbox */
+.sapphire-table .sapphire-table__selectionCell {
+  line-height: 0;
+  padding-left: var(--sapphire-table-size-spacing-cell-horizontal-end);
+  width: var(--sapphire-table-size-width-selection-cell);
+}
+
+.sapphire-table__headCell:first-child {
+  padding-left: var(--sapphire-table-size-spacing-head-cell-horizontal-end);
+}
+.sapphire-table__row .sapphire-table__cell:first-child {
+  padding-left: var(--sapphire-table-size-spacing-cell-horizontal-end);
+}
+.sapphire-table__headCell:last-child {
+  padding-right: var(--sapphire-table-size-spacing-head-cell-horizontal-end);
+}
+.sapphire-table__row .sapphire-table__cell:last-child {
+  padding-right: var(--sapphire-table-size-spacing-cell-horizontal-end);
+}
+
+.sapphire-table__row {
+  position: relative;
+}
+
+.sapphire-table__row--active {
+  /* We want active to override, focus, hover or selected. Using css selectors or priority to
+   * to achieve that adds a lot complexity which seems to justify the use of "!important" here.
+   */
+  background-color: var(--sapphire-table-color-background-active) !important;
+}
+
+.sapphire-table__row--selected {
+  background-color: var(--sapphire-table-color-background-selected);
+}
+
+/**
+* Row divider. Only shown when row is not focused, because of z-index issue with the focus ring
+* which didn't seem to be solvable otherwise.
+* NOTE: The reason we are using pseudo elements for row separator instead of a simple border is 
+* the distance of the separator to the edges. There is no such option on border.
+* NOTE: If we use ::after on a tr with relative position, positioning won't work relative to tr,
+* in Safari. So we are applying the ::after pseudo-element on cells, overriding left/right on
+* first/last cell.
+*/
+.sapphire-table__row:not(.is-focus, :not(.js-focus):focus-visible) td::after {
+  content: '';
+  position: absolute;
+  height: 1px;
+  background: var(--sapphire-table-color-border-separator);
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.sapphire-table--without-last-divider.sapphire-table__row:not(.is-focus, :not(.js-focus):focus-visible):last-child
+  td::after {
+  height: 0px;
+}
+.sapphire-table__row:not(.is-focus, :not(.js-focus):focus-visible)
+  td:first-child::after {
+  left: var(--sapphire-table-size-spacing-cell-horizontal-end);
+}
+.sapphire-table__row:not(.is-focus, :not(.js-focus):focus-visible)
+  td:last-child::after {
+  right: var(--sapphire-table-size-spacing-cell-horizontal-end);
+}
+
+.sapphire-table--interactive .sapphire-table__row {
+  cursor: default; /* by default cursor is text selection, which is unintuitive when rows are clickable */
+}
+
+.sapphire-table--interactive .sapphire-table__row.is-hover,
+.sapphire-table--interactive .sapphire-table__row:not(.js-hover):hover {
+  background-color: var(--sapphire-table-color-background-hover);
+}
+
+/**
+ * Selection actions. Optionally shown when a table uses multiple selection.
+ */
+.sapphire-table .sapphire-table__selection-action-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--sapphire-table-size-spacing-selection-action-bar-vertical)
+    var(--sapphire-table-size-spacing-selection-action-bar-horizontal);
+  background-color: var(--sapphire-table-color-background-selection-action-bar);
+}
+
+/**
+ * Footer.
+ * Normally used as a container for the pagination.
+ */
+.sapphire-table__footer {
+  position: relative;
+  z-index: 2; /* Setting to two because body rows are positioned relative */
+}
+
+.sapphire-table__footer--sticky {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+}

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

@@ -0,0 +1,37 @@
+declare const styles: {
+  readonly "sapphire-table": string;
+  readonly "sapphire-table--overflow": string;
+  readonly "sapphire-table__table": string;
+  readonly "sapphire-table-sortedIcon": string;
+  readonly "sapphire-table-sortableIcon": string;
+  readonly "sapphire-table__head": string;
+  readonly "sapphire-table__head--sticky": string;
+  readonly "sapphire-table__cell--alignLeft": string;
+  readonly "sapphire-table__cell--alignCenter": string;
+  readonly "sapphire-table__cell--alignRight": string;
+  readonly "sapphire-table__headCell": string;
+  readonly "sapphire-table__headCell_container": string;
+  readonly "sapphire-table__row": string;
+  readonly "sapphire-table__cell": string;
+  readonly "sapphire-table__selectionCell": string;
+  readonly "is-focus": string;
+  readonly "js-focus": string;
+  readonly "sapphire-table__headCell--sortable": string;
+  readonly "is-hover": string;
+  readonly "js-hover": string;
+  readonly "sapphire-table__headCell--sorted": string;
+  readonly "sapphire-table__headCell__text": string;
+  readonly "sapphire-table__headCell__icon": string;
+  readonly "sapphire-table__body": string;
+  readonly "sapphire-table__cell--ellipsed": string;
+  readonly "sapphire-table__headCell_content--ellipsed": string;
+  readonly "sapphire-table__row--active": string;
+  readonly "sapphire-table__row--selected": string;
+  readonly "sapphire-table--without-last-divider": string;
+  readonly "sapphire-table--interactive": string;
+  readonly "sapphire-table__selection-action-bar": string;
+  readonly "sapphire-table__footer": string;
+  readonly "sapphire-table__footer--sticky": string;
+};
+export = styles;
+

package/components/tabs/tabs.module.css

@@ -0,0 +1,83 @@
+.sapphire-tabs {
+  display: flex;
+  box-sizing: border-box;
+  height: var(--sapphire-tabs-size-height);
+  box-shadow: inset 0px calc(-1 * var(--sapphire-tabs-size-border))
+    var(--sapphire-tabs-color-border-default);
+}
+
+.sapphire-tabs--inline {
+  display: inline-flex;
+}
+
+/**
+ * No underline modifier
+ */
+.sapphire-tabs--no-border {
+  box-shadow: none;
+}
+
+/**
+ * Single tab element
+ */
+.sapphire-tabs__tab {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  background: none;
+  color: var(--sapphire-tabs-color-content-inactive-default);
+  font-family: var(--sapphire-tabs-font-name);
+  font-weight: var(--sapphire-tabs-font-weight);
+  font-size: var(--sapphire-tabs-size-font);
+  box-sizing: border-box;
+  white-space: nowrap;
+  border-width: 0;
+  padding: var(--sapphire-tabs-size-spacing-vertical)
+    var(--sapphire-tabs-size-spacing-horizontal);
+  outline: none;
+  /* Safari adds 2px padding to buttons (meaning gap between tabs when tab is a button) */
+  margin: 0;
+  cursor: pointer;
+}
+
+.sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+  color: var(--sapphire-tabs-color-content-inactive-hover);
+}
+
+.sapphire-tabs__tab.is-focus,
+.sapphire-tabs__tab:not(.js-focus):focus-visible {
+  outline: var(--sapphire-tabs-size-focus-ring) solid
+    var(--sapphire-tabs-color-focus-ring);
+  outline-offset: calc(-1 * var(--sapphire-tabs-size-focus-ring));
+}
+
+/**
+ * Disabled
+ */
+
+.sapphire-tabs__tab:disabled,
+.sapphire-tabs__tab.is-disabled {
+  cursor: not-allowed;
+}
+.sapphire-tabs__tab:disabled .sapphire-tabs__label,
+.sapphire-tabs__tab.is-disabled .sapphire-tabs__label {
+  opacity: var(--sapphire-tabs-opacity-disabled);
+}
+
+/**
+ * Active tab
+ */
+.sapphire-tabs__tab--active {
+  color: var(--sapphire-tabs-color-content-active-default);
+  box-shadow: inset 0px calc(-1 * var(--sapphire-tabs-size-border))
+    var(--sapphire-tabs-color-border-active);
+}
+
+/* tab panel focus styling */
+.sapphire-tab-panel.js-focus.is-focus,
+.sapphire-tab-panel:not(.js-focus):focus-visible {
+  outline: var(--sapphire-tabs-size-border) solid
+    var(--sapphire-tabs-color-focus-ring);
+  border-radius: var(--sapphire-tabs-size-focus-ring);
+}

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

@@ -0,0 +1,17 @@
+declare const styles: {
+  readonly "sapphire-tabs": string;
+  readonly "sapphire-tabs--inline": string;
+  readonly "sapphire-tabs--no-border": string;
+  readonly "sapphire-tabs__tab": string;
+  readonly "is-disabled": string;
+  readonly "is-active": string;
+  readonly "js-hover": string;
+  readonly "is-hover": string;
+  readonly "is-focus": string;
+  readonly "js-focus": string;
+  readonly "sapphire-tabs__label": string;
+  readonly "sapphire-tabs__tab--active": string;
+  readonly "sapphire-tab-panel": string;
+};
+export = styles;
+

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

@@ -0,0 +1,21 @@
+declare const styles: {
+  readonly "sapphire-text": string;
+  readonly "sapphire-text--strong": string;
+  readonly "sapphire-text--underlined": string;
+  readonly "sapphire-text--heading-1": string;
+  readonly "sapphire-text--heading-2": string;
+  readonly "sapphire-text--heading-3": string;
+  readonly "sapphire-text--heading-4": string;
+  readonly "sapphire-text--heading-5": string;
+  readonly "sapphire-text--heading-6": string;
+  readonly "sapphire-text--heading-alternative": string;
+  readonly "sapphire-text--subheading-1": string;
+  readonly "sapphire-text--subheading-2": string;
+  readonly "sapphire-text--body-1": string;
+  readonly "sapphire-text--body-2": string;
+  readonly "sapphire-text--body-3": string;
+  readonly "sapphire-text--caption-1": string;
+  readonly "sapphire-text--caption-2": string;
+};
+export = styles;
+