@danske/sapphire-css 16.3.0

package/components/button/button.module.css

@@ -0,0 +1,278 @@
+/**
+ * main rules
+ */
+.sapphire-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;
+
+  /* typography */
+  font-family: var(--sapphire-button-font-name);
+  font-weight: var(--sapphire-button-font-weight);
+  font-size: var(--sapphire-button-size-font-medium);
+  text-transform: var(--sapphire-button-font-text-transform);
+  letter-spacing: var(--sapphire-button-font-letter-spacing);
+
+  /* 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 */
+  padding: 0 var(--sapphire-button-size-spacing-horizontal-medium);
+  height: var(--sapphire-button-size-height-default-medium);
+  min-width: var(--sapphire-button-size-min-width-no-icon-medium);
+  flex-shrink: 0; /* When part of flex layout the button will otherwise be squashed */
+
+  /* shape */
+  border-radius: var(--sapphire-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-button-time-transition);
+  transition-timing-function: ease-in-out;
+  cursor: pointer;
+}
+
+a.sapphire-button {
+  text-decoration: none;
+}
+
+/* Diasbled state for all variants */
+.sapphire-button:disabled,
+.sapphire-button.is-disabled {
+  opacity: var(--sapphire-button-opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* Focused state for all variants */
+.sapphire-button:focus {
+  outline: none;
+}
+.sapphire-button.is-focus,
+.sapphire-button:not(.js-focus):focus-visible {
+  outline: var(--sapphire-button-size-focus-ring-border) solid
+    var(--sapphire-button-color-focus-ring);
+  outline-offset: var(--sapphire-button-size-focus-ring-offset);
+}
+
+/* Button with icon */
+.sapphire-button--with-left-icon {
+  min-width: var(--sapphire-button-size-min-width-with-icon-default);
+}
+.sapphire-button--with-right-icon {
+  min-width: var(--sapphire-button-size-min-width-with-icon-default);
+}
+.sapphire-button--with-right-icon .sapphire-button__icon {
+  margin-left: var(--sapphire-button-size-spacing-icon-gap);
+}
+.sapphire-button--with-left-icon .sapphire-button__icon {
+  margin-right: var(--sapphire-button-size-spacing-icon-gap);
+}
+
+/**
+ * Skin rules
+ */
+/* primary */
+.sapphire-button--primary {
+  background-color: var(--sapphire-button-color-background-primary-default);
+  color: var(--sapphire-button-color-content-primary-default);
+}
+.sapphire-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+  background-color: var(--sapphire-button-color-background-primary-hover);
+}
+.sapphire-button--primary.is-focus,
+.sapphire-button--primary:not(.js-focus):focus-visible {
+  background-color: var(--sapphire-button-color-background-primary-focus);
+}
+.sapphire-button--primary:not(:disabled):not(.is-disabled).is-active,
+.sapphire-button--primary:not(:disabled):not(.is-disabled):active,
+.sapphire-button--primary:not(:disabled):not(.is-disabled):focus-visible:active {
+  background-color: var(--sapphire-button-color-background-primary-active);
+}
+
+/* secondary */
+.sapphire-button--secondary {
+  background-color: var(--sapphire-button-color-background-secondary-default);
+  color: var(--sapphire-button-color-content-secondary-default);
+}
+.sapphire-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+  background-color: var(--sapphire-button-color-background-secondary-hover);
+}
+.sapphire-button--secondary.is-focus,
+.sapphire-button--secondary:not(.js-focus):focus-visible {
+  background-color: var(--sapphire-button-color-background-secondary-focus);
+}
+.sapphire-button--secondary:not(:disabled):not(.is-disabled).is-active,
+.sapphire-button--secondary:not(:disabled):not(.is-disabled):active,
+.sapphire-button--secondary:not(:disabled):not(.is-disabled):focus-visible:active {
+  background-color: var(--sapphire-button-color-background-secondary-active);
+  color: var(--sapphire-button-color-content-secondary-active);
+}
+
+/* dangerSecondary */
+.sapphire-button--dangerSecondary {
+  background-color: var(
+    --sapphire-button-color-background-danger-secondary-default
+  );
+  color: var(--sapphire-button-color-content-danger-secondary-default);
+}
+.sapphire-button--dangerSecondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-button--dangerSecondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+  background-color: var(
+    --sapphire-button-color-background-danger-secondary-hover
+  );
+}
+.sapphire-button--dangerSecondary.is-focus,
+.sapphire-button--dangerSecondary:not(.js-focus):focus-visible {
+  background-color: var(
+    --sapphire-button-color-background-danger-secondary-focus
+  );
+}
+.sapphire-button--dangerSecondary:not(:disabled):not(.is-disabled).is-active,
+.sapphire-button--dangerSecondary:not(:disabled):not(.is-disabled):focus-visible:active,
+.sapphire-button--dangerSecondary:not(:disabled):not(.is-disabled):active {
+  background-color: var(
+    --sapphire-button-color-background-danger-secondary-active
+  );
+  color: var(--sapphire-button-color-content-danger-secondary-active);
+}
+
+/* tertiary */
+.sapphire-button--tertiary {
+  border-radius: var(--sapphire-button-size-radius-tertiary);
+  padding-right: var(--sapphire-button-size-spacing-horizontal-tertiary);
+  padding-left: var(--sapphire-button-size-spacing-horizontal-tertiary);
+  background-color: var(--sapphire-button-color-background-tertiary-default);
+  color: var(--sapphire-button-color-content-tertiary-default);
+}
+.sapphire-button--tertiary:not(:disabled):not(.is-disabled).is-active,
+.sapphire-button--tertiary:not(:disabled):not(.is-disabled):focus-visible:active,
+.sapphire-button--tertiary:not(:disabled):not(.is-disabled):active {
+  color: var(--sapphire-button-color-content-tertiary-active);
+}
+
+/* dangerTertiary */
+.sapphire-button--dangerTertiary {
+  border-radius: var(--sapphire-button-size-radius-tertiary);
+  padding-right: var(--sapphire-button-size-spacing-horizontal-danger-tertiary);
+  padding-left: var(--sapphire-button-size-spacing-horizontal-danger-tertiary);
+  background-color: var(
+    --sapphire-button-color-background-danger-tertiary-default
+  );
+  color: var(--sapphire-button-color-content-danger-tertiary-default);
+}
+.sapphire-button--dangerTertiary:not(:disabled):not(.is-disabled).is-active,
+.sapphire-button--dangerTertiary:not(:disabled):not(.is-disabled):focus-visible:active,
+.sapphire-button--dangerTertiary:not(:disabled):not(.is-disabled):active {
+  color: var(--sapphire-button-color-content-danger-tertiary-active);
+}
+
+/**
+ * Toggle Button
+ */
+.sapphire-button--selected {
+  background-color: var(--sapphire-button-color-background-selected-default);
+  color: var(--sapphire-button-color-content-selected-default);
+}
+.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+  background-color: var(--sapphire-button-color-background-selected-hover);
+}
+.sapphire-button--selected.is-focus,
+.sapphire-button--selected:not(.js-focus):focus-visible {
+  background-color: var(--sapphire-button-color-background-selected-focus);
+}
+.sapphire-button--selected:not(:disabled):not(.is-disabled).is-active,
+.sapphire-button--selected:not(:disabled):not(.is-disabled):active,
+.sapphire-button--selected:not(:disabled):not(.is-disabled):focus-visible:active {
+  background-color: var(--sapphire-button-color-background-selected-active);
+  color: var(--sapphire-button-color-content-selected-active);
+}
+
+.sapphire-button--unselected {
+  background-color: var(--sapphire-button-color-background-unselected-default);
+  color: var(--sapphire-button-color-content-unselected-default);
+}
+.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+  background-color: var(--sapphire-button-color-background-unselected-hover);
+}
+.sapphire-button--unselected.is-focus,
+.sapphire-button--unselected:not(.js-focus):focus-visible {
+  background-color: var(--sapphire-button-color-background-unselected-focus);
+}
+.sapphire-button--unselected:not(:disabled):not(.is-disabled).is-active,
+.sapphire-button--unselected:not(:disabled):not(.is-disabled):active,
+.sapphire-button--unselected:not(:disabled):not(.is-disabled):focus-visible:active {
+  background-color: var(--sapphire-button-color-background-unselected-active);
+  color: var(--sapphire-button-color-content-unselected-active);
+}
+
+/**
+ * Icon
+ */
+.sapphire-button__icon {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: var(--sapphire-button-size-icon-medium);
+  width: var(--sapphire-button-size-icon-medium);
+}
+.sapphire-button--large .sapphire-button__icon {
+  height: var(--sapphire-button-size-icon-large);
+  width: var(--sapphire-button-size-icon-large);
+}
+.sapphire-button--small .sapphire-button__icon {
+  height: var(--sapphire-button-size-icon-small);
+  width: var(--sapphire-button-size-icon-small);
+}
+
+/**
+ * Size variations
+ */
+/**
+ * LARGE
+ */
+.sapphire-button--large {
+  height: var(--sapphire-button-size-height-default-large);
+  min-width: var(--sapphire-button-size-min-width-no-icon-large);
+  padding: 0 var(--sapphire-button-size-spacing-horizontal-large);
+  font-size: var(--sapphire-button-size-font-large);
+  border-radius: var(--sapphire-button-size-radius-large);
+}
+
+/**
+ * SMALL
+ */
+.sapphire-button--small {
+  height: var(--sapphire-button-size-height-default-small);
+  min-width: var(--sapphire-button-size-min-width-no-icon-small);
+  padding: 0 var(--sapphire-button-size-spacing-horizontal-small);
+  font-size: var(--sapphire-button-size-font-small);
+  border-radius: var(--sapphire-button-size-radius-small);
+}

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

@@ -0,0 +1,23 @@
+declare const styles: {
+  readonly "sapphire-button": string;
+  readonly "is-disabled": string;
+  readonly "is-focus": string;
+  readonly "js-focus": string;
+  readonly "sapphire-button--with-left-icon": string;
+  readonly "sapphire-button--with-right-icon": string;
+  readonly "sapphire-button__icon": string;
+  readonly "sapphire-button--primary": string;
+  readonly "is-active": string;
+  readonly "js-hover": string;
+  readonly "is-hover": string;
+  readonly "sapphire-button--secondary": string;
+  readonly "sapphire-button--dangerSecondary": string;
+  readonly "sapphire-button--tertiary": string;
+  readonly "sapphire-button--dangerTertiary": string;
+  readonly "sapphire-button--selected": string;
+  readonly "sapphire-button--unselected": string;
+  readonly "sapphire-button--large": string;
+  readonly "sapphire-button--small": string;
+};
+export = styles;
+

package/components/buttonGroup/buttonGroup.module.css

@@ -0,0 +1,24 @@
+.sapphire-button-group {
+  display: flex;
+  gap: var(--sapphire-button-group-size-spacing-large);
+}
+
+.sapphire-button-group--normal {
+  gap: var(--sapphire-button-group-size-spacing-medium);
+}
+
+.sapphire-button-group--dense {
+  gap: var(--sapphire-button-group-size-spacing-small);
+}
+
+.sapphire-button-group--align-center {
+  justify-content: center;
+}
+
+.sapphire-button-group--align-right {
+  justify-content: flex-end;
+}
+
+.sapphire-button-group--align-left {
+  justify-content: flex-start;
+}

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

@@ -0,0 +1,10 @@
+declare const styles: {
+  readonly "sapphire-button-group": string;
+  readonly "sapphire-button-group--normal": string;
+  readonly "sapphire-button-group--dense": string;
+  readonly "sapphire-button-group--align-center": string;
+  readonly "sapphire-button-group--align-right": string;
+  readonly "sapphire-button-group--align-left": string;
+};
+export = styles;
+