@danske/sapphire-css 16.3.0

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

@@ -0,0 +1,8 @@
+declare const styles: {
+  readonly "sapphire-icon": string;
+  readonly "sapphire-icon--small": string;
+  readonly "sapphire-icon--medium": string;
+  readonly "sapphire-icon--large": string;
+};
+export = styles;
+

package/components/iconButton/iconButton.module.css

@@ -0,0 +1,225 @@
+.sapphire-icon-button {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  /* In Safari buttons get a 2px border
+   * https://github.com/necolas/normalize.css/blob/master/normalize.css#L160-L169
+   */
+  margin: 0;
+  padding: 0;
+
+  /* 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;
+
+  /* sizing */
+  height: var(--sapphire-icon-button-size-height-medium);
+  width: var(--sapphire-icon-button-size-width-medium);
+  flex-shrink: 0; /* When part of flex layout the button will otherwise be squashed */
+
+  /* shape */
+  border-radius: var(--sapphire-icon-button-size-radius-medium);
+  border-style: solid;
+  border-width: 0;
+  border-color: transparent;
+
+  /* transition */
+  /* we don't want to transition outline-offset */
+  transition-property: opacity, background-color, color;
+  transition-duration: var(--sapphire-icon-button-time-transition);
+  transition-timing-function: ease-in-out;
+  cursor: pointer;
+}
+
+a.sapphire-icon-button {
+  text-decoration: none;
+}
+
+/* Diasbled state for all variants */
+.sapphire-icon-button:disabled,
+.sapphire-icon-button.is-disabled {
+  opacity: var(--sapphire-icon-button-opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* Focused state for all variants */
+.sapphire-icon-button:focus {
+  outline: none;
+}
+.sapphire-icon-button.is-focus,
+.sapphire-icon-button:not(.js-focus):focus-visible {
+  outline: var(--sapphire-icon-button-size-focus-ring-border) solid
+    var(--sapphire-icon-button-color-focus-ring);
+  outline-offset: var(--sapphire-icon-button-size-focus-ring-offset);
+}
+
+/**
+ * Skin rules
+ */
+/* primary */
+.sapphire-icon-button--primary {
+  background-color: var(
+    --sapphire-icon-button-color-background-primary-default
+  );
+  color: var(--sapphire-icon-button-color-content-primary-default);
+}
+.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+  background-color: var(--sapphire-icon-button-color-background-primary-hover);
+  color: var(--sapphire-icon-button-color-content-primary-hover);
+}
+.sapphire-icon-button--primary.is-focus,
+.sapphire-icon-button--primary:not(.js-focus):focus-visible {
+  background-color: var(--sapphire-icon-button-color-background-primary-focus);
+  color: var(--sapphire-icon-button-color-content-primary-focus);
+}
+.sapphire-icon-button--primary:not(:disabled):not(.is-disabled).is-active,
+.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):active,
+.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):focus-visible:active {
+  background-color: var(--sapphire-icon-button-color-background-primary-active);
+  color: var(--sapphire-icon-button-color-content-primary-active);
+}
+
+/* secondary */
+.sapphire-icon-button--secondary {
+  background-color: var(
+    --sapphire-icon-button-color-background-secondary-default
+  );
+  color: var(--sapphire-icon-button-color-content-secondary-default);
+}
+.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+  background-color: var(
+    --sapphire-icon-button-color-background-secondary-hover
+  );
+  color: var(--sapphire-icon-button-color-content-secondary-hover);
+}
+.sapphire-icon-button--secondary.is-focus,
+.sapphire-icon-button--secondary:not(.js-focus):focus-visible {
+  background-color: var(
+    --sapphire-icon-button-color-background-secondary-focus
+  );
+  color: var(--sapphire-icon-button-color-content-secondary-focus);
+}
+.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled).is-active,
+.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):active,
+.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):focus-visible:active {
+  background-color: var(
+    --sapphire-icon-button-color-background-secondary-active
+  );
+  color: var(--sapphire-icon-button-color-content-secondary-active);
+}
+
+/* neutral */
+.sapphire-icon-button--neutral {
+  background-color: var(
+    --sapphire-icon-button-color-background-neutral-default
+  );
+  color: var(--sapphire-icon-button-color-content-neutral-default);
+}
+.sapphire-icon-button--neutral:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-icon-button--neutral:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+  background-color: var(--sapphire-icon-button-color-background-neutral-hover);
+  color: var(--sapphire-icon-button-color-content-neutral-hover);
+}
+.sapphire-icon-button--neutral.is-focus,
+.sapphire-icon-button--neutral:not(.js-focus):focus-visible {
+  background-color: var(--sapphire-icon-button-color-background-neutral-focus);
+  color: var(--sapphire-icon-button-color-content-neutral-focus);
+}
+.sapphire-icon-button--neutral:not(:disabled):not(.is-disabled).is-active,
+.sapphire-icon-button--neutral:not(:disabled):not(.is-disabled):focus-visible:active,
+.sapphire-icon-button--neutral:not(:disabled):not(.is-disabled):active {
+  background-color: var(--sapphire-icon-button-color-background-neutral-active);
+  color: var(--sapphire-icon-button-color-content-neutral-active);
+}
+
+/* danger */
+.sapphire-icon-button--danger {
+  background-color: var(--sapphire-icon-button-color-background-danger-default);
+  color: var(--sapphire-icon-button-color-content-danger-default);
+}
+.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+  background-color: var(--sapphire-icon-button-color-background-danger-hover);
+  color: var(--sapphire-icon-button-color-content-danger-hover);
+}
+.sapphire-icon-button--danger.is-focus,
+.sapphire-icon-button--danger:not(.js-focus):focus-visible {
+  background-color: var(--sapphire-icon-button-color-background-danger-focus);
+  color: var(--sapphire-icon-button-color-content-danger-focus);
+}
+.sapphire-icon-button--danger:not(:disabled):not(.is-disabled).is-active,
+.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):focus-visible:active,
+.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):active {
+  background-color: var(--sapphire-icon-button-color-background-danger-active);
+  color: var(--sapphire-icon-button-color-content-danger-active);
+}
+
+/**
+ * Icon
+ */
+.sapphire-icon-button__icon {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: var(--sapphire-icon-button-size-icon-medium);
+  width: var(--sapphire-icon-button-size-icon-medium);
+}
+.sapphire-icon-button--large .sapphire-icon-button__icon {
+  height: var(--sapphire-icon-button-size-icon-large);
+  width: var(--sapphire-icon-button-size-icon-large);
+}
+.sapphire-icon-button--small .sapphire-icon-button__icon {
+  height: var(--sapphire-icon-button-size-icon-small);
+  width: var(--sapphire-icon-button-size-icon-small);
+}
+.sapphire-icon-button--extra-small .sapphire-icon-button__icon {
+  height: var(--sapphire-icon-button-size-icon-extra-small);
+  width: var(--sapphire-icon-button-size-icon-extra-small);
+}
+
+/**
+ * Size variations
+ */
+/**
+ * LARGE
+ */
+.sapphire-icon-button--large {
+  height: var(--sapphire-icon-button-size-height-large);
+  width: var(--sapphire-icon-button-size-width-large);
+  border-radius: var(--sapphire-icon-button-size-radius-large);
+}
+
+/**
+ * SMALL
+ */
+.sapphire-icon-button--small {
+  height: var(--sapphire-icon-button-size-height-small);
+  width: var(--sapphire-icon-button-size-width-small);
+  border-radius: var(--sapphire-icon-button-size-radius-small);
+}
+
+/**
+ * EXTRA SMALL
+ */
+.sapphire-icon-button--extra-small {
+  height: var(--sapphire-icon-button-size-height-extra-small);
+  width: var(--sapphire-icon-button-size-width-extra-small);
+  border-radius: var(--sapphire-icon-button-size-radius-extra-small);
+}

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

@@ -0,0 +1,19 @@
+declare const styles: {
+  readonly "sapphire-icon-button": string;
+  readonly "is-disabled": string;
+  readonly "is-focus": string;
+  readonly "js-focus": string;
+  readonly "sapphire-icon-button--primary": string;
+  readonly "is-active": string;
+  readonly "js-hover": string;
+  readonly "is-hover": string;
+  readonly "sapphire-icon-button--secondary": string;
+  readonly "sapphire-icon-button--neutral": string;
+  readonly "sapphire-icon-button--danger": string;
+  readonly "sapphire-icon-button__icon": string;
+  readonly "sapphire-icon-button--large": string;
+  readonly "sapphire-icon-button--small": string;
+  readonly "sapphire-icon-button--extra-small": string;
+};
+export = styles;
+

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

@@ -0,0 +1,9 @@
+declare const styles: {
+  readonly "sapphire-label": string;
+  readonly "sapphire-label--medium": string;
+  readonly "sapphire-label__text": string;
+  readonly "sapphire-label__required-indicator": string;
+  readonly "sapphire-label__optional-indicator": string;
+};
+export = styles;
+

package/components/link/link.module.css

@@ -0,0 +1,35 @@
+.sapphire-link {
+  /* 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;
+
+  font-family: var(--sapphire-link-font-name);
+  color: var(--sapphire-link-color-text-default);
+  text-decoration: none;
+  cursor: pointer;
+  outline: 0;
+  text-decoration: underline;
+}
+
+.sapphire-link:active .sapphire-link.is-active {
+  color: var(--sapphire-link-color-text-active);
+}
+.sapphire-link:not(.js-focus):focus-visible,
+.sapphire-link.is-focus {
+  color: var(--sapphire-link-color-text-default);
+  outline: 2px solid var(--sapphire-link-color-focus-ring);
+}
+.sapphire-link:not(.js-hover):hover,
+.sapphire-link.is-hover {
+  color: var(--sapphire-link-color-text-hover);
+}

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

@@ -0,0 +1,10 @@
+declare const styles: {
+  readonly "sapphire-link": string;
+  readonly "is-active": string;
+  readonly "js-focus": string;
+  readonly "is-focus": string;
+  readonly "js-hover": string;
+  readonly "is-hover": string;
+};
+export = styles;
+

package/components/list/list.module.css

@@ -0,0 +1,160 @@
+.sapphire-list {
+  box-sizing: border-box;
+  width: 100%;
+
+  /* sizing */
+  padding: 0;
+  margin: 0;
+
+  /* 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-list__item {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  padding: var(--sapphire-list-spacing-item-vertical-default)
+    var(--sapphire-list-spacing-item-horizontal-default);
+  background-color: var(--sapphire-list-color-background-item-default);
+}
+
+/* pure css approach, not properly supported in all browsers at the moment */
+.sapphire-list__item:has(.sapphire-list__item-content-wrapper) {
+  padding: 0;
+}
+/* fallback js-based solution */
+.sapphire-list__item--content-wrapped {
+  padding: 0;
+}
+
+.sapphire-list__item-content-wrapper {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  /* 
+   * Same as outermost element (li) as this should control padding instead 
+   * if element is a (href prop has value) or button (action prop has value).
+   */
+  padding: var(--sapphire-list-spacing-item-vertical-default)
+    var(--sapphire-list-spacing-item-horizontal-default);
+
+  /* Counterstyling anything passed as custom content wrapper */
+  text-decoration: none;
+  cursor: pointer;
+  background-color: inherit;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  border: none;
+  text-align: inherit;
+  align-items: inherit;
+}
+.sapphire-list__item-content-wrapper:disabled,
+.sapphire-list__item-content-wrapper[aria-disabled='true'] {
+  cursor: inherit;
+  /* TODO: Ask designers to provide disabled styles and apply them here */
+}
+
+.sapphire-list__item-content-wrapper:not(.is-focus, :not(.js-focus):focus-visible)::after,
+.sapphire-list__item:not(.sapphire-list__item--content-wrapped)::after {
+  content: '';
+  position: absolute;
+  height: var(--sapphire-list-size-width-border-item-default);
+  background: var(--sapphire-list-color-border-item-default);
+  bottom: 0;
+  left: var(--sapphire-list-spacing-item-horizontal-default);
+  right: var(--sapphire-list-spacing-item-horizontal-default);
+}
+
+.sapphire-list--without-last-divider
+  .sapphire-list__item:last-child
+  .sapphire-list__item-content-wrapper::after,
+.sapphire-list--without-last-divider .sapphire-list__item:last-child::after {
+  height: 0;
+}
+
+/*
+ * Hover
+ */
+.sapphire-list__item-content-wrapper.is-hover,
+.sapphire-list__item-content-wrapper:not(.js-hover):not([aria-disabled='true']):not(:disabled):hover {
+  background-color: var(--sapphire-list-color-background-item-hover);
+}
+
+/*
+ * Focus
+ */
+.sapphire-list__item-content-wrapper:focus,
+.sapphire-list__item-content-wrapper:focus-visible {
+  outline: none;
+}
+
+.sapphire-list__item-content-wrapper.is-focus,
+.sapphire-list__item-content-wrapper:not(.js-focus):focus {
+  outline: none;
+  box-shadow: inset 0px 0px 0px
+    var(--sapphire-list-size-width-border-item-focus)
+    var(--sapphire-list-color-border-item-focus);
+  border: 0;
+  background-color: var(--sapphire-list-color-background-item-focus);
+}
+
+.sapphire-list__item-content-left {
+  display: flex;
+  align-items: center;
+  margin-right: var(--sapphire-list-spacing-item-horizontal-content);
+}
+
+.sapphire-list__item-content-right {
+  display: flex;
+  align-items: center;
+  text-align: right;
+  margin-left: var(--sapphire-list-spacing-item-horizontal-content);
+  color: var(--sapphire-list-color-content-primary-text);
+}
+
+.sapphire-list__item-text {
+  display: flex;
+  flex-direction: column;
+  font-family: var(--sapphire-list-font-name);
+}
+
+.sapphire-list__item-text--reversedOrder {
+  flex-direction: column-reverse;
+}
+
+/* If sibling is present before the text, we apply margin to the left on the text */
+* + .sapphire-list__item-text {
+  margin-left: var(--sapphire-list-spacing-item-horizontal-content);
+}
+
+/* If sibling is present after the text, we apply margin to the left on that sibling */
+.sapphire-list__item-text + * {
+  margin-left: var(--sapphire-list-spacing-item-horizontal-content);
+}
+
+.sapphire-list__item-text-primary {
+  color: var(--sapphire-list-color-content-primary-text);
+  line-height: var(--sapphire-list-size-line-height);
+  font-size: var(--sapphire-list-size-font-primary-text);
+  font-weight: var(--sapphire-list-font-weight-primary-text);
+}
+
+.sapphire-list__item-text-secondary {
+  color: var(--sapphire-list-color-content-secondary-text);
+  line-height: var(--sapphire-list-size-line-height);
+  font-size: var(--sapphire-list-size-font-secondary-text);
+}

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

@@ -0,0 +1,19 @@
+declare const styles: {
+  readonly "sapphire-list": string;
+  readonly "sapphire-list__item": string;
+  readonly "sapphire-list__item-content-wrapper": string;
+  readonly "sapphire-list__item--content-wrapped": string;
+  readonly "is-focus": string;
+  readonly "js-focus": string;
+  readonly "sapphire-list--without-last-divider": string;
+  readonly "is-hover": string;
+  readonly "js-hover": string;
+  readonly "sapphire-list__item-content-left": string;
+  readonly "sapphire-list__item-content-right": string;
+  readonly "sapphire-list__item-text": string;
+  readonly "sapphire-list__item-text--reversedOrder": string;
+  readonly "sapphire-list__item-text-primary": string;
+  readonly "sapphire-list__item-text-secondary": string;
+};
+export = styles;
+