@danske/sapphire-css 40.1.0 → 40.2.1

package/components/field/field.module.css

@@ -70,7 +70,11 @@ legend.sapphire-field__label {
  */
 .sapphire-field__control--group {
   display: flex;
-  gap: var(--sapphire-semantic-size-spacing-control-horizontal-lg);
+  gap: var(--sapphire-semantic-size-spacing-xs);
+}
+
+.sapphire-field--md .sapphire-field__control--group {
+  gap: var(--sapphire-semantic-size-spacing-2xs);
 }
 
 /**
@@ -94,11 +98,15 @@ legend.sapphire-field__label {
   min-width: 100%;
   max-width: min-content;
   order: 3;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sapphire-semantic-size-spacing-4xs);
+  padding: var(--sapphire-semantic-size-spacing-4xs) 0;
 }
 
 /**
  * Note
- * An error message or a note, which by design are mutually exclusive.
+ * An error message or a note. In rare cases both can appear at the same time.
  */
 .sapphire-field__note-row {
   display: flex;
@@ -111,6 +119,8 @@ legend.sapphire-field__label {
 
 .sapphire-field--md .sapphire-field__note-row {
   font-size: var(--sapphire-semantic-size-font-label-sm);
+  line-height: var(--sapphire-semantic-size-line-height-sm);
+  gap: var(--sapphire-semantic-size-spacing-2xs);
 }
 
 .sapphire-field__note {
@@ -119,9 +129,13 @@ legend.sapphire-field__label {
 
 .sapphire-field__note-icon {
   display: inline-flex;
-  align-items: center;
-  /** For alignment with text */
-  height: calc(1em * var(--sapphire-semantic-size-line-height-md));
+  /* For alignment with text */
+  line-height: 0;
+  padding-top: var(--sapphire-semantic-size-spacing-4xs);
+}
+
+.sapphire-field--md .sapphire-field__note-icon {
+  padding-top: 0;
 }
 
 /**

package/components/iconButton/iconButton.module.css

@@ -299,7 +299,9 @@ a.sapphire-icon-button {
   background: var(
     --sapphire-semantic-color-background-action-danger-tertiary-active
   );
-  color: var(--sapphire-semantic-color-foreground-action-on-danger-active);
+  color: var(
+    --sapphire-semantic-color-foreground-action-on-danger-tertiary-active
+  );
 }
 
 /**

package/components/pagination/pagination.module.css

@@ -34,6 +34,7 @@
 }
 
 .sapphire-pagination__text {
+  font-size: var(--sapphire-semantic-size-font-body-sm);
   font-weight: var(--sapphire-semantic-font-weight-default-regular);
   padding-left: var(--sapphire-semantic-size-spacing-2xs);
   padding-right: var(--sapphire-semantic-size-spacing-2xs);

package/components/tabs/tabs.module.css

@@ -59,12 +59,11 @@
 
 .sapphire-tabs {
   display: inline-flex;
+  align-items: center;
   box-sizing: border-box;
-  height: var(--sapphire-semantic-size-height-control-lg);
-  gap: var(--sapphire-semantic-size-spacing-md);
+  height: var(--sapphire-semantic-size-height-control-xl);
   position: relative;
   overflow: hidden;
-  position: relative;
   min-width: 100%;
   flex: 1;
   padding: 0 var(--sapphire-semantic-size-focus-ring);
@@ -88,11 +87,29 @@
   position: absolute;
   bottom: 0;
   width: 100%;
-  height: var(--sapphire-semantic-size-border-md);
+  height: var(--sapphire-global-size-static-2);
   background: var(--sapphire-semantic-color-border-secondary);
   border-radius: var(--sapphire-semantic-size-border-md);
 }
 
+.sapphire-tabs__underline {
+  position: absolute;
+  bottom: 0;
+  height: var(--sapphire-semantic-size-border-md);
+  background: var(--sapphire-semantic-color-foreground-action-select-default);
+  z-index: 2;
+  transform-origin: left;
+}
+
+.sapphire-tabs__underline--with-transition {
+  transition: transform var(--sapphire-semantic-time-motion-default)
+      var(--sapphire-semantic-transitions-dynamic),
+    width var(--sapphire-semantic-time-motion-default)
+      var(--sapphire-global-transitions-ease-in-out-quick);
+  transition-duration: var(--sapphire-semantic-time-fade-quick);
+  transition-timing-function: var(--sapphire-semantic-transitions-fade);
+}
+
 /**
  * No underline modifier
  */
@@ -113,12 +130,12 @@
   font-size: var(--sapphire-semantic-size-font-control-md);
   text-decoration: none;
 
-  background: none;
   color: var(--sapphire-semantic-color-foreground-primary);
   box-sizing: border-box;
   white-space: nowrap;
   border-width: 0;
-  padding: 0;
+  padding: 0 var(--sapphire-semantic-size-spacing-md);
+  height: var(--sapphire-semantic-size-height-control-md);
   /**
    * The 0 padding is for Safari which adds 2px padding to buttons (meaning gap
    * between tabs when tab is a button).
@@ -132,25 +149,47 @@
   outline: none;
 
   /* Need the border radius to round the focus ring*/
-  border-radius: var(--sapphire-semantic-size-radius-sm);
+  border-radius: var(--sapphire-semantic-size-height-control-md);
 
   /* Just to make sure it's above the grey border */
   z-index: 1;
+
+  transition: background var(--sapphire-semantic-time-motion-default)
+      var(--sapphire-semantic-transitions-dynamic),
+    color var(--sapphire-semantic-time-motion-default)
+      var(--sapphire-semantic-transitions-dynamic),
+    width var(--sapphire-semantic-time-motion-default)
+      var(--sapphire-semantic-transitions-dynamic);
+  transition-duration: var(--sapphire-semantic-time-fade-quick);
+  transition-timing-function: var(--sapphire-semantic-transitions-fade);
 }
 
 .sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
-  ):not(.js-hover):hover,
+  ):not(.sapphire-tabs__tab--active):not(.js-hover):hover,
 .sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
-  ).is-hover {
-  color: var(--sapphire-semantic-color-foreground-action-select-hover);
+  ):not(.sapphire-tabs__tab--active).is-hover {
+  background: var(--sapphire-semantic-color-background-action-tertiary-hover);
+}
+
+.sapphire-tabs__tab--active:not(:disabled):not(.is-disabled):not(
+    .js-hover
+  ):hover,
+.sapphire-tabs__tab--active:not(:disabled):not(.is-disabled).is-hover {
+  background: var(--sapphire-semantic-color-state-accent-subtle-hover);
 }
 
 .sapphire-tabs__tab:not(:disabled):not(.is-disabled):active,
-.sapphire-tabs__tab:not(:disabled):not(.is-disabled):focus-visible:active,
-.sapphire-tabs__tab:not(:disabled):not(.is-disabled).is-active {
-  color: var(--sapphire-semantic-color-foreground-action-select-active);
+.sapphire-tabs__tab:not(:disabled):not(.is-disabled):focus-visible:active {
+  background: var(--sapphire-semantic-color-background-action-tertiary-active);
+}
+
+.sapphire-tabs__tab--active:active:not(:disabled):not(.is-disabled):not(
+    .js-hover
+  ):hover,
+.sapphire-tabs__tab--active:active:not(:disabled):not(.is-disabled).is-hover {
+  background: var(--sapphire-semantic-color-state-accent-subtle-active);
 }
 
 .sapphire-tabs__tab.js-focus.is-focus,
@@ -177,13 +216,13 @@
   padding: 0 1px;
 }
 
-/**
- * Active tab
- */
-.sapphire-tabs__tab--active {
+.sapphire-tabs__tab--active,
+.sapphire-tabs__tab--active:hover,
+.sapphire-tabs__tab--active.is-hover {
   color: var(--sapphire-semantic-color-foreground-action-select-default);
 }
 
+/* Default behavior: Show individual tab underlines for active tabs */
 .sapphire-tabs__tab--active.js-focus:not(.is-focus)::after,
 .sapphire-tabs__tab--active:not(.js-focus):not(:focus-visible)::after {
   content: '';
@@ -193,30 +232,39 @@
   bottom: calc(-1 * var(--sapphire-semantic-size-focus-ring));
   width: 100%;
   height: var(--sapphire-semantic-size-border-md);
-  background: var(--sapphire-semantic-color-foreground-action-select-default);
-  border-radius: var(--sapphire-semantic-size-border-md);
+  background: var(
+    --sapphire-semantic-color-background-action-select-secondary-hover
+  );
+}
+
+/* Hide individual tab underlines when using animated underline */
+.sapphire-tabs .sapphire-tabs__tab--active.js-focus:not(.is-focus)::after,
+.sapphire-tabs
+  .sapphire-tabs__tab--active:not(.js-focus):not(:focus-visible)::after {
+  display: none;
 }
 
 /**
  * Small
  */
 .sapphire-tabs--sm {
-  height: var(--sapphire-semantic-size-height-control-md);
-  gap: var(--sapphire-semantic-size-spacing-md);
+  height: var(--sapphire-semantic-size-height-control-lg);
 }
 .sapphire-tabs--sm .sapphire-tabs__tab {
   font-size: var(--sapphire-semantic-size-font-control-sm);
+  padding: 0 var(--sapphire-semantic-size-spacing-sm);
+  height: var(--sapphire-semantic-size-height-control-sm);
 }
 
 /**
  * Large
  */
 .sapphire-tabs--lg {
-  height: var(--sapphire-semantic-size-height-control-xl);
-  gap: var(--sapphire-semantic-size-spacing-lg);
+  height: var(--sapphire-semantic-size-height-control-2xl);
 }
 .sapphire-tabs--lg .sapphire-tabs__tab {
   font-size: var(--sapphire-semantic-size-font-control-lg);
+  padding: 0 var(--sapphire-semantic-size-spacing-lg);
 }
 
 .sapphire-tab-panel {

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

@@ -9,16 +9,18 @@ declare const styles: {
   readonly "sapphire-tabs--align-left": string;
   readonly "sapphire-tabs--align-center": string;
   readonly "sapphire-tabs--align-right": string;
+  readonly "sapphire-tabs__underline": string;
+  readonly "sapphire-tabs__underline--with-transition": string;
   readonly "sapphire-tabs--no-border": string;
   readonly "sapphire-tabs__tab": string;
   readonly "is-disabled": string;
   readonly "is-active": string;
+  readonly "sapphire-tabs__tab--active": string;
   readonly "js-hover": string;
   readonly "is-hover": string;
   readonly "js-focus": string;
   readonly "is-focus": string;
   readonly "sapphire-tabs__label": string;
-  readonly "sapphire-tabs__tab--active": string;
   readonly "sapphire-tabs--sm": string;
   readonly "sapphire-tabs--lg": string;
   readonly "sapphire-tab-panel": string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "40.1.0",
+  "version": "40.2.1",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": false,
@@ -67,7 +67,7 @@
     "typescript": "~4.6.4"
   },
   "dependencies": {
-    "@danske/sapphire-design-tokens": "^42.0.0"
+    "@danske/sapphire-design-tokens": "^42.1.0"
   },
-  "gitHead": "a2fe96ba580fd6c06c3ddaac972775f59f55879b"
+  "gitHead": "612c203ea4278deafe40f5477b5b33569cf06cfb"
 }