@danske/sapphire-css 16.3.0

package/components/searchField/searchField.module.css

@@ -0,0 +1,148 @@
+.sapphire-search-field {
+  box-sizing: border-box;
+  font-family: var(--sapphire-search-field-font-name);
+  width: var(--sapphire-search-field-size-width-control);
+  /* 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;
+
+  /*
+  showing border with box-shadow, since the width changes between focused and
+  non-focused state. Using border will cause content to jump, due to resize.
+  Using outline will render border and focus ring outside the component's
+  boundary, which can lead to issues where it's clipped or overlapped with
+  the adjacent element.
+  */
+  box-shadow: inset 0 0 0 var(--sapphire-search-field-size-width-border)
+    var(--sapphire-search-field-color-border-default);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sapphire-search-field-size-spacing-control-gap);
+  border-radius: var(--sapphire-search-field-size-radius);
+  cursor: text;
+  color: var(--sapphire-search-field-color-content-input);
+  font-size: var(--sapphire-search-field-size-font-content);
+  height: var(--sapphire-search-field-size-height-field);
+  background-color: var(--sapphire-search-field-color-background);
+}
+
+.sapphire-search-field .sapphire-search-field__input:last-child {
+  padding-right: var(--sapphire-search-field-size-spacing-control-horizontal);
+}
+
+.sapphire-search-field__input {
+  all: unset;
+  flex: 1;
+  height: 100%;
+  font-weight: var(--sapphire-search-field-size-font-weight-input);
+  caret-color: var(--sapphire-search-field-color-caret);
+  position: relative;
+  padding-left: calc(var(--sapphire-search-field-size-height-field));
+}
+
+/**
+ * Placeholder
+ */
+.sapphire-search-field__input::placeholder {
+  opacity: 1; /* some browsers set a lower than 1 opacity */
+  color: var(--sapphire-search-field-color-content-placeholder);
+}
+
+/**
+ * Focus
+ */
+.sapphire-search-field.is-focus,
+.sapphire-search-field:focus-within {
+  box-shadow: inset 0 0 0 var(--sapphire-search-field-size-focus-ring)
+    var(--sapphire-search-field-color-focus-ring);
+}
+
+/**
+ * Disabled
+ */
+.sapphire-search-field.is-disabled {
+  opacity: var(--sapphire-search-field-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.sapphire-search-field.is-disabled .sapphire-search-field__input {
+  cursor: not-allowed;
+}
+
+/**
+ * Clear button
+ */
+/* Remove the inner padding and cancel buttons for input[type="search"] in Chrome and Safari on macOS. */
+.sapphire-search-field__input::-webkit-search-cancel-button,
+.sapphire-search-field__input::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+.sapphire-search-field__button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: var(--sapphire-search-field-size-height-field);
+  width: var(--sapphire-search-field-size-height-field);
+  color: var(--sapphire-search-field-color-content-button-default);
+  cursor: default;
+
+  transition: transform var(--sapphire-search-field-time-transition);
+}
+
+.sapphire-search-field__button:not(.js-hover):hover,
+.sapphire-search-field__button.is-hover {
+  color: var(--sapphire-search-field-color-content-button-hover);
+}
+
+.sapphire-search-field__button:active,
+.sapphire-search-field__button:not(.js-hover):active,
+.sapphire-search-field__button.is-active {
+  color: var(--sapphire-search-field-color-content-button-active);
+}
+
+.sapphire-search-field.is-disabled .sapphire-search-field__button,
+.sapphire-search-field__input:read-only + .sapphire-search-field__button {
+  display: none;
+}
+
+.sapphire-search-field__input:placeholder-shown
+  + .sapphire-search-field__button,
+.sapphire-search-field__input--empty + .sapphire-search-field__button {
+  /*
+   * Css only solution to:
+   *  - hide the clear button when the input is empty.
+   *  - Apply a gentle transition on appearance/disappearance
+   * IMPORTANT: there must be a placeholder provided for :placeholder-shown to
+   * work. " " can be set as placeholder as a fallback, or
+   * sapphire-search-field__input--empty class can be used instead.
+   */
+  opacity: 0;
+  width: 0; /* To not cover the input when invisible. */
+  transform: scale(0.85);
+  transition: transform var(--sapphire-search-field-time-transition),
+    opacity var(--sapphire-search-field-time-transition),
+    width var(--sapphire-search-field-time-transition)
+      /* Zero duration will kill the transition */
+      var(--sapphire-search-field-time-transition)
+      /* Delaying to prevent width transition*/;
+}
+
+/*
+ * Search icon
+ */
+.sapphire-search-field__icon {
+  color: var(--sapphire-search-field-color-content-icon);
+  display: inline-flex; /* Not to take more height than the icon */
+  position: absolute;
+  margin-left: var(--sapphire-search-field-size-spacing-control-horizontal);
+}

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

@@ -0,0 +1,14 @@
+declare const styles: {
+  readonly "sapphire-search-field": string;
+  readonly "sapphire-search-field__input": string;
+  readonly "is-focus": string;
+  readonly "is-disabled": string;
+  readonly "sapphire-search-field__button": string;
+  readonly "js-hover": string;
+  readonly "is-hover": string;
+  readonly "is-active": string;
+  readonly "sapphire-search-field__input--empty": string;
+  readonly "sapphire-search-field__icon": string;
+};
+export = styles;
+

package/components/segmentedControl/segmentedControl.module.css

@@ -0,0 +1,140 @@
+.sapphire-segmented-control {
+  background-color: var(--sapphire-segmented-control-color-tray);
+  border-radius: var(--sapphire-segmented-control-size-radius);
+  padding: var(--sapphire-segmented-control-size-spacing-tray);
+  display: inline-block;
+  height: var(--sapphire-segmented-control-size-height-medium);
+  box-sizing: border-box;
+}
+
+.sapphire-segmented-control__button-container {
+  display: inline-flex;
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.sapphire-segmented-control__glider {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  display: block;
+  background-color: var(--sapphire-segmented-control-color-glider);
+  box-shadow: var(--sapphire-global-shadow-small);
+  box-sizing: border-box;
+  z-index: 1;
+  border-radius: var(--sapphire-segmented-control-size-radius);
+}
+
+.sapphire-segmented-control__glider--with-transition {
+  transition: width var(--sapphire-segmented-control-time-transition)
+      ease-in-out,
+    left var(--sapphire-segmented-control-time-transition) ease-in-out;
+}
+
+.sapphire-segmented-control__button {
+  font-family: var(--sapphire-segmented-control-font-name);
+  font-weight: var(--sapphire-segmented-control-font-weight);
+  font-size: var(--sapphire-segmented-control-size-font-medium);
+  /* 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;
+  flex: 1 1 auto;
+  box-sizing: content-box;
+  margin: 0;
+  border: 0;
+  height: 100%;
+  min-width: var(--sapphire-segmented-control-size-min-width-tab);
+  padding: 0 var(--sapphire-segmented-control-size-spacing-tab-horizontal);
+  background-color: transparent;
+  color: var(--sapphire-segmented-control-color-content-inactive);
+  cursor: pointer;
+  outline: none;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  transition: color var(--sapphire-segmented-control-time-transition)
+    ease-in-out;
+}
+
+.sapphire-segmented-control__button--active {
+  color: var(--sapphire-segmented-control-color-content-active);
+}
+
+.sapphire-segmented-control__button--disabled {
+  opacity: var(--sapphire-segmented-control-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.sapphire-segmented-control.focus-visible:focus-within
+  .sapphire-segmented-control__glider {
+  outline: var(--sapphire-segmented-control-size-focus-ring) solid
+    var(--sapphire-segmented-control-color-focus-ring);
+}
+
+/* Manual keyboard navigation */
+.sapphire-segmented-control--manual-keyboard-activation.focus-visible
+  .sapphire-segmented-control__glider {
+  transition: none;
+}
+
+.sapphire-segmented-control--manual-keyboard-activation.focus-visible
+  .sapphire-segmented-control__button:focus {
+  outline: var(--sapphire-segmented-control-size-focus-ring) solid
+    var(--sapphire-segmented-control-color-focus-ring);
+  border-radius: var(--sapphire-segmented-control-size-radius);
+}
+
+.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation
+  .sapphire-segmented-control__glider {
+  outline: none;
+}
+
+/* Sizes */
+.sapphire-segmented-control--large {
+  height: var(--sapphire-segmented-control-size-height-large);
+}
+
+.sapphire-segmented-control--large .sapphire-segmented-control__button {
+  font-size: var(--sapphire-segmented-control-size-font-large);
+}
+
+.sapphire-segmented-control--small {
+  height: var(--sapphire-segmented-control-size-height-small);
+}
+
+.sapphire-segmented-control--small .sapphire-segmented-control__button {
+  font-size: var(--sapphire-segmented-control-size-font-small);
+}
+
+/* Radio-specific */
+.sapphire-segmented-control__radio-input {
+  margin: 0;
+  overflow: visible;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  opacity: 0.0001; /** Some of the screen readers may ignore element with opacity:0 */
+  z-index: 1;
+  cursor: pointer;
+}
+
+.sapphire-segmented-control__button--disabled
+  .sapphire-segmented-control__radio-input {
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,16 @@
+declare const styles: {
+  readonly "sapphire-segmented-control": string;
+  readonly "sapphire-segmented-control__button-container": string;
+  readonly "sapphire-segmented-control__glider": string;
+  readonly "sapphire-segmented-control__glider--with-transition": string;
+  readonly "sapphire-segmented-control__button": string;
+  readonly "sapphire-segmented-control__button--active": string;
+  readonly "sapphire-segmented-control__button--disabled": string;
+  readonly "focus-visible": string;
+  readonly "sapphire-segmented-control--manual-keyboard-activation": string;
+  readonly "sapphire-segmented-control--large": string;
+  readonly "sapphire-segmented-control--small": string;
+  readonly "sapphire-segmented-control__radio-input": string;
+};
+export = styles;
+

package/components/select/select.module.css

@@ -0,0 +1,166 @@
+.sapphire-select {
+  font-family: var(--sapphire-select-font-name);
+  color: var(--sapphire-select-color-content);
+  width: var(--sapphire-select-size-width-control);
+  display: inline-block;
+  position: relative;
+
+  /* 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-select__button-container {
+  position: relative;
+  width: 100%;
+}
+
+.sapphire-select__button {
+  display: flex;
+  align-items: center;
+  height: var(--sapphire-select-size-height-field-default);
+  box-sizing: border-box;
+  cursor: pointer;
+  padding: 0 var(--sapphire-select-size-spacing-control-horizontal);
+  border: none;
+  background-color: var(--sapphire-select-color-background-field);
+  width: 100%;
+  outline: 0;
+  text-align: left;
+  color: inherit;
+  font-family: inherit;
+  box-shadow: inset 0px 0px 0px 1px
+    var(--sapphire-select-color-border-field-default);
+  border-radius: var(--sapphire-select-size-radius-field);
+}
+
+.sapphire-select__label-container {
+  display: flex;
+  align-items: center;
+  gap: var(--sapphire-select-size-spacing-label-horizontal-default);
+  min-height: var(--sapphire-select-size-height-label);
+  margin-bottom: var(--sapphire-select-size-spacing-label-vertical-default);
+}
+
+.sapphire-select__label-text {
+  font-size: var(--sapphire-select-size-font-label-default);
+  font-weight: var(--sapphire-select-size-font-weight-label-default);
+  line-height: var(--sapphire-select-size-line-height-label-default);
+}
+
+.sapphire-select__value {
+  flex: 1 0 0;
+  min-width: 0;
+  font-size: var(--sapphire-select-size-font-content-default);
+  width: 100%;
+  font-weight: var(--sapphire-select-size-font-weight-item);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sapphire-select__placeholder {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--sapphire-select-color-placeholder);
+}
+
+.sapphire-select__icon-container {
+  line-height: 0;
+}
+
+.sapphire-select__avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sapphire-select-size-width-avatar);
+  height: var(--sapphire-select-size-height-avatar);
+  flex: 0 0 auto;
+  background-color: var(--sapphire-select-color-background-avatar);
+  border-radius: 50%;
+  overflow: hidden;
+  font-weight: var(--sapphire-select-size-font-weight-item);
+  color: var(--sapphire-select-color-content);
+}
+
+/*
+ * Search input
+ */
+.sapphire-select__search-input {
+  all: inherit;
+}
+.sapphire-select__search-input::placeholder {
+  color: var(--sapphire-select-color-placeholder);
+}
+
+.sapphire-select__native-select {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0.01;
+  width: 100%;
+  z-index: 1;
+}
+
+/**
+ * Note
+ */
+
+.sapphire-select__note {
+  color: var(--sapphire-select-color-note-default);
+  font-size: var(--sapphire-select-size-font-note-default);
+  line-height: var(--sapphire-select-size-line-height-note-default);
+  margin-top: var(--sapphire-select-size-spacing-note-vertical-default);
+}
+
+/**
+ * Error
+ */
+
+.sapphire-select--error:not(.is-disabled) .sapphire-select__button {
+  box-shadow: inset 0px 0px 0px 1px
+    var(--sapphire-select-color-border-field-error);
+}
+
+.sapphire-select--error .sapphire-select__note {
+  color: var(--sapphire-select-color-note-error);
+}
+
+/*
+ * Focus
+ */
+
+.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button {
+  box-shadow: inset 0px 0px 0px var(--sapphire-select-size-focus-ring)
+    var(--sapphire-select-color-focus-ring);
+}
+
+.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button {
+  box-shadow: inset 0px 0px 0px var(--sapphire-select-size-focus-ring)
+    var(--sapphire-select-color-border-field-error);
+}
+
+/**
+ * Disabled
+ */
+.sapphire-select.is-disabled {
+  opacity: var(--sapphire-select-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.sapphire-select.is-disabled .sapphire-select__button {
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,19 @@
+declare const styles: {
+  readonly "sapphire-select": string;
+  readonly "sapphire-select__button-container": string;
+  readonly "sapphire-select__button": string;
+  readonly "sapphire-select__label-container": string;
+  readonly "sapphire-select__label-text": string;
+  readonly "sapphire-select__value": string;
+  readonly "sapphire-select__placeholder": string;
+  readonly "sapphire-select__icon-container": string;
+  readonly "sapphire-select__avatar": string;
+  readonly "sapphire-select__search-input": string;
+  readonly "sapphire-select__native-select": string;
+  readonly "sapphire-select__note": string;
+  readonly "sapphire-select--error": string;
+  readonly "is-disabled": string;
+  readonly "is-focus": string;
+};
+export = styles;
+

package/components/skeleton/skeleton.module.css

@@ -0,0 +1,52 @@
+@keyframes skeletonPulse {
+  0%,
+  25% {
+    opacity: 1;
+  }
+  60%,
+  65% {
+    opacity: var(--sapphire-skeleton-opacity-faded);
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.sapphire-skeleton {
+  width: 100%;
+
+  background-color: var(--sapphire-skeleton-color-background);
+
+  animation: skeletonPulse infinite cubic-bezier(0.25, 0, 0.25, 1);
+  animation-duration: var(--sapphire-skeleton-time-animation);
+}
+
+.sapphire-skeleton--text {
+  /* Design spec required 14px height in context of 16px text
+   * We thus calculate that ratio from 1em to cater for
+   * cases where context has other size than 16px.
+   */
+  height: calc(var(--sapphire-skeleton-size-text-height-context-ratio) * 1em);
+  /* We're translating on y-axis half of the remaining space from above ratio up to 1
+   * Thus in this case pushing bar 1/16 down to leave that space above and below.
+   * Ie. center it vertically, but still according to font-size in context.
+   */
+  transform: translateY(
+    calc(
+      (1 - var(--sapphire-skeleton-size-text-height-context-ratio)) / 2 * 1em
+    )
+  );
+  /* For responding to text-align on parent */
+  display: inline-block;
+  border-radius: var(--sapphire-skeleton-size-text-radius);
+}
+
+.sapphire-skeleton--circle {
+  height: 100%;
+  border-radius: 50%;
+}
+
+.sapphire-skeleton--block {
+  height: 100%;
+  width: 100%;
+}

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

@@ -0,0 +1,9 @@
+declare const styles: {
+  readonly "sapphire-skeleton": string;
+  readonly "skeletonPulse": string;
+  readonly "sapphire-skeleton--text": string;
+  readonly "sapphire-skeleton--circle": string;
+  readonly "sapphire-skeleton--block": string;
+};
+export = styles;
+

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

@@ -0,0 +1,14 @@
+declare const styles: {
+  readonly "sapphire-spinner": string;
+  readonly "rotate": string;
+  readonly "sapphire-spinner__track": string;
+  readonly "sapphire-spinner__accent": string;
+  readonly "sapphire-spinner--xxxs": string;
+  readonly "sapphire-spinner--xxs": string;
+  readonly "sapphire-spinner--xs": string;
+  readonly "sapphire-spinner--s": string;
+  readonly "sapphire-spinner--l": string;
+  readonly "sapphire-spinner--xl": string;
+};
+export = styles;
+

package/components/surface/surface.module.css

@@ -0,0 +1,19 @@
+.sapphire-surface {
+  font-family: var(--sapphire-surface-font-name);
+  background-color: var(--sapphire-surface-color-background);
+  color: var(--sapphire-surface-color-content);
+
+  /* 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;
+}

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

@@ -0,0 +1,5 @@
+declare const styles: {
+  readonly "sapphire-surface": string;
+};
+export = styles;
+