@danske/sapphire-css 16.3.0 → 26.1.3

package/components/table/table.module.css

@@ -12,6 +12,10 @@
    */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .sapphire-table--overflow {
@@ -24,7 +28,6 @@
 .sapphire-table__table {
   border-collapse: collapse;
   border-spacing: 0;
-  height: inherit;
   background-color: var(--sapphire-table-color-background-table);
   width: 100%;
 }
@@ -69,9 +72,10 @@
   text-align: end;
 }
 
-.sapphire-table .sapphire-table__headCell {
+.sapphire-table__headCell {
   color: var(--sapphire-table-color-content-cell);
   box-sizing: border-box;
+  font-size: var(--sapphire-table-size-font-head-default);
   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);
@@ -80,7 +84,7 @@
   vertical-align: top;
 }
 
-.sapphire-table__headCell .sapphire-table__headCell_container {
+.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;
@@ -122,7 +126,6 @@
 .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);
 }
@@ -147,7 +150,7 @@
   cursor: pointer;
 }
 
-.sapphire-table__headCell.sapphire-table__headCell--sortable:not(sapphire-table__headCell--sorted):hover
+.sapphire-table__headCell--sortable:not(sapphire-table__headCell--sorted):hover
   .sapphire-table-sortableIcon {
   visibility: visible;
 }
@@ -192,8 +195,8 @@
   text-overflow: ellipsis;
 }
 
-.sapphire-table .sapphire-table__cell,
-.sapphire-table .sapphire-table__selectionCell {
+.sapphire-table__cell,
+.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)
@@ -201,24 +204,24 @@
 }
 
 /* Selection cells that are suppose to contain only a checkbox */
-.sapphire-table .sapphire-table__selectionCell {
+.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__cell:first-child {
+  padding-left: var(--sapphire-table-size-spacing-cell-horizontal-end);
+}
+.sapphire-table__cell:last-child {
+  padding-right: var(--sapphire-table-size-spacing-cell-horizontal-end);
+}
 .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;
@@ -236,34 +239,15 @@
 }
 
 /**
-* 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.
+* Row divider. Only shown when row is not focused, because of z-index issue with the focus ring.
 */
-.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) {
+  box-shadow: inset 0px -1px 0px 0px var(--sapphire-table-color-border-separator);
 }
-.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--without-last-divider
+  .sapphire-table__row:not(.is-focus, :not(.js-focus):focus-visible):last-child {
+  box-shadow: none;
 }
 
 .sapphire-table--interactive .sapphire-table__row {
@@ -273,12 +257,13 @@
 .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);
+  cursor: pointer;
 }
 
 /**
  * Selection actions. Optionally shown when a table uses multiple selection.
  */
-.sapphire-table .sapphire-table__selection-action-bar {
+.sapphire-table__selection-action-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;

package/components/tabs/tabs.module.css

@@ -1,20 +1,92 @@
-.sapphire-tabs {
+.sapphire-tabs-scroll-container {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+  overflow-x: scroll;
+  overflow-y: hidden;
+  white-space: nowrap;
+  position: relative;
+  scroll-padding: 0
+    calc(2 * var(--sapphire-tabs-size-spacing-arrows-horizontal) + 1px);
+  min-width: 0;
+  flex: 1;
+
+  /* prevent scroll from navigating browser history on touchpad */
+  overscroll-behavior-x: contain;
+}
+
+.sapphire-tabs-scroll-container::-webkit-scrollbar {
+  display: none;
+}
+
+.sapphire-tabs-overflow-arrows {
   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);
+  align-items: center;
+  min-width: 0;
+  flex: 1;
+  position: relative;
 }
 
-.sapphire-tabs--inline {
+.sapphire-tabs-overflow-arrows--inline {
   display: inline-flex;
 }
 
+.sapphire-tabs-overflow-arrows__arrow {
+  position: absolute;
+  z-index: 10;
+  pointer-events: none;
+}
+
+.sapphire-tabs-overflow-arrows__arrow--left {
+  left: 0;
+  padding-right: var(--sapphire-tabs-size-spacing-arrows-horizontal);
+  background: linear-gradient(
+    90deg,
+    var(--sapphire-tabs-color-gradient-opaque) 0%,
+    var(--sapphire-tabs-color-gradient-opaque) 40%,
+    var(--sapphire-tabs-color-gradient-transparent) 100%
+  );
+}
+
+.sapphire-tabs-overflow-arrows__arrow--right {
+  right: 0;
+  padding-left: var(--sapphire-tabs-size-spacing-arrows-horizontal);
+  background: linear-gradient(
+    90deg,
+    var(--sapphire-tabs-color-gradient-transparent) 0%,
+    var(--sapphire-tabs-color-gradient-opaque) 60%,
+    var(--sapphire-tabs-color-gradient-opaque) 100%
+  );
+}
+
+.sapphire-tabs {
+  display: inline-flex;
+  box-sizing: border-box;
+  height: var(--sapphire-tabs-size-height-m);
+  gap: var(--sapphire-tabs-size-gap-m);
+  position: relative;
+  overflow: hidden;
+  position: relative;
+  min-width: 100%;
+  flex: 1;
+  padding: 0 var(--sapphire-tabs-size-focus-ring-offset);
+}
+
+.sapphire-tabs::after {
+  content: '';
+  display: block;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: var(--sapphire-tabs-size-border);
+  background-color: var(--sapphire-tabs-color-border-default);
+  border-radius: var(--sapphire-tabs-size-border);
+}
+
 /**
  * No underline modifier
  */
-.sapphire-tabs--no-border {
-  box-shadow: none;
+.sapphire-tabs--no-border::after {
+  display: none;
 }
 
 /**
@@ -23,21 +95,36 @@
 .sapphire-tabs__tab {
   display: flex;
   align-items: center;
+  position: relative;
+
+  font-family: var(--sapphire-tabs-font-name);
+  font-weight: var(--sapphire-tabs-font-weight);
+  font-size: var(--sapphire-tabs-size-font-m);
   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;
+  padding: 0;
+  /**
+   * The 0 padding is for Safari which adds 2px padding to buttons (meaning gap
+   * between tabs when tab is a button).
+   *
+   * The focus ring offset as vertical margin is used to make the focus ring
+   * offset so it overlaps the grey separator and doesn't overflow the container.
+   */
+  margin: var(--sapphire-tabs-size-focus-ring-offset) 0
+    var(--sapphire-tabs-size-focus-ring-offset) 0;
   cursor: pointer;
+  outline: none;
+
+  /* Need the border radius to round the focus ring*/
+  border-radius: var(--sapphire-tabs-size-focus-ring-radius);
+
+  /* Just to make sure it's above the grey border */
+  z-index: 1;
 }
 
 .sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
@@ -45,11 +132,10 @@
   color: var(--sapphire-tabs-color-content-inactive-hover);
 }
 
-.sapphire-tabs__tab.is-focus,
+.sapphire-tabs__tab.js-focus.is-focus,
 .sapphire-tabs__tab:not(.js-focus):focus-visible {
-  outline: var(--sapphire-tabs-size-focus-ring) solid
+  outline: var(--sapphire-tabs-size-focus-ring-border) solid
     var(--sapphire-tabs-color-focus-ring);
-  outline-offset: calc(-1 * var(--sapphire-tabs-size-focus-ring));
 }
 
 /**
@@ -65,19 +151,65 @@
   opacity: var(--sapphire-tabs-opacity-disabled);
 }
 
+.sapphire-tabs__label {
+  /* Visual adjustment of text alignment */
+  padding: 0 1px;
+}
+
 /**
  * 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);
+}
+
+.sapphire-tabs__tab--active.js-focus:not(.is-focus)::after,
+.sapphire-tabs__tab--active:not(.js-focus):not(:focus-visible)::after {
+  content: '';
+  display: block;
+  position: absolute;
+  /* To offset the space created by the tab's margin */
+  bottom: calc(-1 * var(--sapphire-tabs-size-focus-ring-offset));
+  width: 100%;
+  height: var(--sapphire-tabs-size-border);
+  background-color: var(--sapphire-tabs-color-border-active);
+  border-radius: var(--sapphire-tabs-size-border);
+}
+
+/**
+ * Small
+ */
+.sapphire-tabs--small {
+  height: var(--sapphire-tabs-size-height-s);
+  gap: var(--sapphire-tabs-size-gap-s);
+}
+.sapphire-tabs--small .sapphire-tabs__tab {
+  font-size: var(--sapphire-tabs-size-font-s);
+}
+
+/**
+ * Large
+ */
+.sapphire-tabs--large {
+  height: var(--sapphire-tabs-size-height-l);
+  gap: var(--sapphire-tabs-size-gap-l);
+}
+.sapphire-tabs--large .sapphire-tabs__tab {
+  font-size: var(--sapphire-tabs-size-font-l);
+}
+
+.sapphire-tab-panel {
+  /* Allows scrollable overflow inside of a flex layout */
+  min-height: 0;
+
+  /* Fills the remaining space in a flex layout */
+  flex-grow: 1;
 }
 
 /* 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
+  outline: var(--sapphire-tabs-size-focus-ring-border) solid
     var(--sapphire-tabs-color-focus-ring);
-  border-radius: var(--sapphire-tabs-size-focus-ring);
+  outline-offset: var(--sapphire-tabs-size-focus-ring-offset);
 }

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

@@ -1,16 +1,23 @@
 declare const styles: {
+  readonly "sapphire-tabs-scroll-container": string;
+  readonly "sapphire-tabs-overflow-arrows": string;
+  readonly "sapphire-tabs-overflow-arrows--inline": string;
+  readonly "sapphire-tabs-overflow-arrows__arrow": string;
+  readonly "sapphire-tabs-overflow-arrows__arrow--left": string;
+  readonly "sapphire-tabs-overflow-arrows__arrow--right": string;
   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 "is-focus": string;
   readonly "sapphire-tabs__label": string;
   readonly "sapphire-tabs__tab--active": string;
+  readonly "sapphire-tabs--small": string;
+  readonly "sapphire-tabs--large": string;
   readonly "sapphire-tab-panel": string;
 };
 export = styles;

package/components/text/text.module.css

@@ -0,0 +1,207 @@
+.sapphire-text {
+  font-family: var(--sapphire-text-font-name-default);
+
+  /* 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-text--strong {
+  font-weight: var(--sapphire-text-font-weight-strong);
+}
+
+.sapphire-text--underlined {
+  text-decoration: underline;
+}
+
+/* Heading */
+.sapphire-text--heading-1,
+.sapphire-text--heading-2,
+.sapphire-text--heading-3,
+.sapphire-text--heading-4,
+.sapphire-text--heading-5,
+.sapphire-text--heading-6 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+  color: var(--sapphire-text-color-content-heading);
+  line-height: var(--sapphire-text-size-line-height-heading);
+}
+
+.sapphire-text--heading-1 {
+  font-family: var(--sapphire-text-font-name-heading-default-1);
+  font-weight: var(--sapphire-text-font-weight-heading-default-1);
+  font-size: var(--sapphire-text-size-font-heading-1);
+  text-transform: var(--sapphire-text-font-text-transform-heading-default-1);
+  letter-spacing: var(--sapphire-text-font-letter-spacing-heading-default-1);
+}
+
+.sapphire-text--heading-2 {
+  font-family: var(--sapphire-text-font-name-heading-default-2);
+  font-weight: var(--sapphire-text-font-weight-heading-default-2);
+  font-size: var(--sapphire-text-size-font-heading-2);
+  text-transform: var(--sapphire-text-font-text-transform-heading-default-2);
+  letter-spacing: var(--sapphire-text-font-letter-spacing-heading-default-2);
+}
+
+.sapphire-text--heading-3 {
+  font-family: var(--sapphire-text-font-name-heading-default-3);
+  font-weight: var(--sapphire-text-font-weight-heading-default-3);
+  font-size: var(--sapphire-text-size-font-heading-3);
+  text-transform: var(--sapphire-text-font-text-transform-heading-default-3);
+  letter-spacing: var(--sapphire-text-font-letter-spacing-heading-default-3);
+}
+
+.sapphire-text--heading-4 {
+  font-family: var(--sapphire-text-font-name-heading-default-4);
+  font-weight: var(--sapphire-text-font-weight-heading-default-4);
+  font-size: var(--sapphire-text-size-font-heading-4);
+  text-transform: var(--sapphire-text-font-text-transform-heading-default-4);
+  letter-spacing: var(--sapphire-text-font-letter-spacing-heading-default-4);
+}
+
+.sapphire-text--heading-5 {
+  font-family: var(--sapphire-text-font-name-heading-default-5);
+  font-weight: var(--sapphire-text-font-weight-heading-default-5);
+  font-size: var(--sapphire-text-size-font-heading-5);
+  text-transform: var(--sapphire-text-font-text-transform-heading-default-5);
+  letter-spacing: var(--sapphire-text-font-letter-spacing-heading-default-5);
+}
+
+.sapphire-text--heading-6 {
+  font-family: var(--sapphire-text-font-name-heading-default-6);
+  font-weight: var(--sapphire-text-font-weight-heading-default-6);
+  font-size: var(--sapphire-text-size-font-heading-6);
+  text-transform: var(--sapphire-text-font-text-transform-heading-default-6);
+  letter-spacing: var(--sapphire-text-font-letter-spacing-heading-default-6);
+}
+
+/* Alternative Heading */
+
+.sapphire-text--heading-1.sapphire-text--heading-alternative {
+  font-family: var(--sapphire-text-font-name-heading-alternative-1);
+  font-weight: var(--sapphire-text-font-weight-heading-alternative-1);
+  text-transform: var(
+    --sapphire-text-font-text-transform-heading-alternative-1
+  );
+  letter-spacing: var(
+    --sapphire-text-font-letter-spacing-heading-alternative-1
+  );
+}
+
+.sapphire-text--heading-2.sapphire-text--heading-alternative {
+  font-family: var(--sapphire-text-font-name-heading-alternative-2);
+  font-weight: var(--sapphire-text-font-weight-heading-alternative-2);
+  text-transform: var(
+    --sapphire-text-font-text-transform-heading-alternative-2
+  );
+  letter-spacing: var(
+    --sapphire-text-font-letter-spacing-heading-alternative-2
+  );
+}
+
+.sapphire-text--heading-3.sapphire-text--heading-alternative {
+  font-family: var(--sapphire-text-font-name-heading-alternative-3);
+  font-weight: var(--sapphire-text-font-weight-heading-alternative-3);
+  text-transform: var(
+    --sapphire-text-font-text-transform-heading-alternative-3
+  );
+  letter-spacing: var(
+    --sapphire-text-font-letter-spacing-heading-alternative-3
+  );
+}
+
+.sapphire-text--heading-4.sapphire-text--heading-alternative {
+  font-family: var(--sapphire-text-font-name-heading-alternative-4);
+  font-weight: var(--sapphire-text-font-weight-heading-alternative-4);
+  text-transform: var(
+    --sapphire-text-font-text-transform-heading-alternative-4
+  );
+  letter-spacing: var(
+    --sapphire-text-font-letter-spacing-heading-alternative-4
+  );
+}
+
+.sapphire-text--heading-5.sapphire-text--heading-alternative {
+  font-family: var(--sapphire-text-font-name-heading-alternative-5);
+  font-weight: var(--sapphire-text-font-weight-heading-alternative-5);
+  text-transform: var(
+    --sapphire-text-font-text-transform-heading-alternative-5
+  );
+  letter-spacing: var(
+    --sapphire-text-font-letter-spacing-heading-alternative-5
+  );
+}
+
+.sapphire-text--heading-6.sapphire-text--heading-alternative {
+  font-family: var(--sapphire-text-font-name-heading-alternative-6);
+  font-weight: var(--sapphire-text-font-weight-heading-alternative-6);
+  text-transform: var(
+    --sapphire-text-font-text-transform-heading-alternative-6
+  );
+  letter-spacing: var(
+    --sapphire-text-font-letter-spacing-heading-alternative-6
+  );
+}
+
+/* Subheading */
+.sapphire-text--subheading-1,
+.sapphire-text--subheading-2 {
+  color: var(--sapphire-text-color-content-subheading);
+  line-height: var(--sapphire-text-size-line-height-subheading);
+}
+
+.sapphire-text--subheading-1 {
+  font-size: var(--sapphire-text-size-font-subheading-1);
+}
+
+.sapphire-text--subheading-2 {
+  font-size: var(--sapphire-text-size-font-subheading-2);
+}
+
+/* Body text */
+.sapphire-text--body-1,
+.sapphire-text--body-2,
+.sapphire-text--body-3 {
+  color: var(--sapphire-text-color-content-body);
+  line-height: var(--sapphire-text-size-line-height-body);
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.sapphire-text--body-1 {
+  font-size: var(--sapphire-text-size-font-body-1);
+}
+
+.sapphire-text--body-2 {
+  font-size: var(--sapphire-text-size-font-body-2);
+}
+
+.sapphire-text--body-3 {
+  font-size: var(--sapphire-text-size-font-body-3);
+}
+
+/* Caption text */
+.sapphire-text--caption-1,
+.sapphire-text--caption-2 {
+  color: var(--sapphire-text-color-content-caption);
+  font-weight: var(--sapphire-text-font-weight-caption);
+  line-height: var(--sapphire-text-size-line-height-caption);
+}
+
+.sapphire-text--caption-1 {
+  font-size: var(--sapphire-text-size-font-caption-1);
+}
+
+.sapphire-text--caption-2 {
+  font-size: var(--sapphire-text-size-font-caption-2);
+}