@danske/sapphire-css 40.2.1 → 42.0.0

package/components/accordion/accordion.module.css

@@ -61,8 +61,10 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: var(--sapphire-semantic-size-spacing-sm)
-    var(--sapphire-semantic-size-spacing-md);
+  padding: var(--sapphire-semantic-size-spacing-md)
+    var(--sapphire-semantic-size-spacing-md)
+    var(--sapphire-semantic-size-spacing-md)
+    var(--sapphire-semantic-size-spacing-lg);
   border: none;
   background: inherit;
   font-family: inherit;
@@ -72,28 +74,6 @@
   background: var(--sapphire-semantic-color-background-action-tertiary-default);
 }
 
-/* Hover header */
-
-.sapphire-accordion__item:not(.is-disabled)
-  .sapphire-accordion__item-header:not(:active):not(.is-active):not(
-    .js-hover
-  ):hover,
-.sapphire-accordion__item:not(.is-disabled)
-  .sapphire-accordion__item-header:not(:active):not(.is-active).is-hover {
-  background: var(--sapphire-semantic-color-background-action-tertiary-hover);
-}
-
-/* Active header */
-
-.sapphire-accordion__item:not(.is-disabled)
-  .sapphire-accordion__item-header.is-active,
-.sapphire-accordion__item:not(.is-disabled)
-  .sapphire-accordion__item-header:active,
-.sapphire-accordion__item:not(.is-disabled)
-  .sapphire-accordion__item-header:not(.js-focus):focus-visible:active {
-  background: var(--sapphire-semantic-color-background-action-tertiary-active);
-}
-
 /* Focus header */
 
 .sapphire-accordion__item-header:focus {
@@ -141,8 +121,6 @@
 }
 
 .sapphire-accordion__item-heading {
-  font-size: var(--sapphire-semantic-size-font-body-md);
-  font-weight: var(--sapphire-semantic-font-weight-default-medium);
   text-align: left;
   flex: 1;
   /* Wrap if title is long */
@@ -154,8 +132,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: var(--sapphire-semantic-size-height-control-md);
-  height: var(--sapphire-semantic-size-height-control-md);
+  width: var(--sapphire-semantic-size-height-control-xs);
+  height: var(--sapphire-semantic-size-height-control-xs);
   transition: transform var(--sapphire-semantic-time-motion-quick)
     var(--sapphire-semantic-transitions-dynamic);
 }
@@ -177,12 +155,13 @@
   font-weight: var(--sapphire-semantic-font-weight-default-regular);
   overflow: hidden;
   visibility: hidden;
-  transition: padding-top var(--sapphire-semantic-time-motion-quick)
-      var(--sapphire-semantic-transitions-dynamic),
+  opacity: 0;
+  transition: opacity var(--sapphire-semantic-time-fade-default)
+      var(--sapphire-semantic-transitions-fade),
     padding-bottom var(--sapphire-semantic-time-motion-quick)
       var(--sapphire-semantic-transitions-fade);
-  padding-right: var(--sapphire-semantic-size-spacing-md);
-  padding-left: var(--sapphire-semantic-size-spacing-md);
+  padding-right: var(--sapphire-semantic-size-spacing-lg);
+  padding-left: var(--sapphire-semantic-size-spacing-lg);
 }
 
 .sapphire-accordion__item--open > .sapphire-accordion__item-content-wrapper {
@@ -192,12 +171,12 @@
 .sapphire-accordion__item--open
   > .sapphire-accordion__item-content-wrapper
   > .sapphire-accordion__item-content {
-  padding-top: var(--sapphire-semantic-size-spacing-md);
-  padding-bottom: var(--sapphire-semantic-size-spacing-4xl);
+  opacity: 1;
+  padding-bottom: var(--sapphire-semantic-size-spacing-lg);
   visibility: visible;
 }
 
 .sapphire-accordion--negative-margin-self {
-  margin-left: calc(var(--sapphire-semantic-size-spacing-md) * -1);
-  width: calc(100% + (var(--sapphire-semantic-size-spacing-md) * 2));
+  margin-left: calc(var(--sapphire-semantic-size-spacing-lg) * -1);
+  width: calc(100% + (var(--sapphire-semantic-size-spacing-lg) * 2));
 }

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

@@ -5,11 +5,8 @@ declare const styles: {
   readonly "is-disabled": string;
   readonly "sapphire-accordion__item-header": string;
   readonly "sapphire-accordion__item-content-wrapper": string;
-  readonly "is-active": string;
-  readonly "js-hover": string;
-  readonly "is-hover": string;
-  readonly "js-focus": string;
   readonly "is-focus": string;
+  readonly "js-focus": string;
   readonly "sapphire-accordion__item--open": string;
   readonly "sapphire-accordion__item-heading": string;
   readonly "sapphire-accordion__item-arrow": string;

package/components/alert/alert.module.css

@@ -0,0 +1,68 @@
+.sapphire-alert {
+  box-sizing: border-box;
+  margin: 0;
+  display: grid;
+  column-gap: var(--sapphire-semantic-size-spacing-2xs);
+  row-gap: var(--sapphire-semantic-size-spacing-sm);
+  grid-template-columns: var(--sapphire-semantic-size-icon-sm) 1fr;
+  padding: var(--sapphire-semantic-size-spacing-md);
+  border-radius: var(--sapphire-semantic-size-radius-lg);
+
+  color: var(--sapphire-semantic-color-foreground-primary);
+
+  /* Default variant "info" */
+  background-color: var(--sapphire-semantic-color-background-accent-subtle);
+
+  /* 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-alert__icon {
+  grid-row: 1;
+  grid-column: 1;
+  color: var(--sapphire-semantic-color-foreground-on-accent-subtle);
+  line-height: 0;
+  padding-top: var(--sapphire-semantic-size-spacing-4xs);
+}
+
+.sapphire-alert .sapphire-alert__title {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+}
+
+.sapphire-alert__content {
+  grid-row: 2 / 3;
+  grid-column: 1 / 3;
+}
+
+.sapphire-alert--warning {
+  background-color: var(--sapphire-semantic-color-background-warning-subtle);
+}
+.sapphire-alert--warning .sapphire-alert__icon {
+  color: var(--sapphire-semantic-color-foreground-on-warning-subtle);
+}
+
+.sapphire-alert--negative {
+  background-color: var(--sapphire-semantic-color-background-negative-subtle);
+}
+.sapphire-alert--negative .sapphire-alert__icon {
+  color: var(--sapphire-semantic-color-foreground-on-negative-subtle);
+}
+
+.sapphire-alert--positive {
+  background-color: var(--sapphire-semantic-color-background-positive-subtle);
+}
+.sapphire-alert--positive .sapphire-alert__icon {
+  color: var(--sapphire-semantic-color-foreground-on-positive-subtle);
+}

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

@@ -0,0 +1,11 @@
+declare const styles: {
+  readonly "sapphire-alert": string;
+  readonly "sapphire-alert__icon": string;
+  readonly "sapphire-alert__title": string;
+  readonly "sapphire-alert__content": string;
+  readonly "sapphire-alert--warning": string;
+  readonly "sapphire-alert--negative": string;
+  readonly "sapphire-alert--positive": string;
+};
+export = styles;
+

package/components/dateField/dateField.module.css

@@ -123,7 +123,7 @@
 .sapphire-date-field__segment:not(:disabled):not(.is-disabled).is-focus {
   color: var(--sapphire-semantic-color-foreground-primary);
   background: var(
-    --sapphire-semantic-color-background-action-secondary-default
+    --sapphire-semantic-color-background-action-select-secondary-default
   );
   outline: none;
 }

package/components/dialog/dialog.module.css

@@ -39,12 +39,19 @@
   animation-fill-mode: forwards;
 }
 
+.sapphire-dialog--padded {
+  padding: var(--sapphire-semantic-size-spacing-3xl)
+    var(--sapphire-semantic-size-spacing-3xl)
+    var(--sapphire-semantic-size-spacing-2xl)
+    var(--sapphire-semantic-size-spacing-3xl);
+}
+
 .sapphire-dialog--exiting {
   animation-name: fade-out;
 }
 
 .sapphire-dialog--xs {
-  width: var(--sapphire-global-size-generic-800);
+  width: var(--sapphire-global-size-generic-900);
 }
 
 .sapphire-dialog--sm {

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

@@ -1,6 +1,7 @@
 declare const styles: {
   readonly "sapphire-dialog": string;
   readonly "fade-in": string;
+  readonly "sapphire-dialog--padded": string;
   readonly "sapphire-dialog--exiting": string;
   readonly "fade-out": string;
   readonly "sapphire-dialog--xs": string;

package/components/feedbackMessage/feedbackMessage.module.css

@@ -1,11 +1,15 @@
 .sapphire-feedback-message {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  align-items: stretch;
   margin: auto;
   max-width: var(--sapphire-global-size-generic-1000);
-  gap: var(--sapphire-semantic-size-spacing-xl);
+}
+
+.sapphire-feedback-message__header {
+  display: flex;
+  justify-content: center;
+  margin-bottom: var(--sapphire-semantic-size-spacing-xl);
 }
 
 .sapphire-feedback-message__content {
@@ -13,5 +17,11 @@
   flex-direction: column;
   align-items: center;
   text-align: center;
-  gap: var(--sapphire-semantic-size-spacing-md);
+  gap: var(--sapphire-semantic-size-spacing-sm);
+}
+
+.sapphire-feedback-message__footer {
+  display: flex;
+  justify-content: center;
+  margin-top: var(--sapphire-semantic-size-spacing-2xl);
 }

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

@@ -1,6 +1,8 @@
 declare const styles: {
   readonly "sapphire-feedback-message": string;
+  readonly "sapphire-feedback-message__header": string;
   readonly "sapphire-feedback-message__content": string;
+  readonly "sapphire-feedback-message__footer": string;
 };
 export = styles;
 

package/components/filterDropdown/filterDropdown.module.css

@@ -12,7 +12,5 @@
 }
 
 .sapphire-filter-dropdown__footer {
-  display: flex;
-  justify-content: end;
   padding: var(--sapphire-semantic-size-spacing-container-horizontal-sm);
 }

package/components/progressIndicator/progressIndicator.module.css

@@ -0,0 +1,45 @@
+/* Progress bar Track styles */
+.sapphire-progress {
+  height: 3px;
+  width: 100%;
+  overflow: hidden;
+  background: var(--sapphire-semantic-color-background-accent-subtle);
+  position: relative;
+}
+
+.sapphire-progress:has(.sapphire-progress--segments) {
+  display: flex;
+}
+
+/* Progress bar Progress styles */
+.sapphire-progress--indicator {
+  height: 100%;
+  background: var(--sapphire-semantic-color-background-accent);
+  transition: width var(--sapphire-semantic-time-motion-default)
+    var(--sapphire-semantic-transitions-dynamic);
+}
+
+/* Progress bar Segmented styles */
+.sapphire-progress--segments {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.sapphire-progress--segments span {
+  flex: 1;
+  position: relative;
+}
+
+.sapphire-progress--segments span:not(:first-child)::before {
+  background: var(--sapphire-semantic-color-background-surface);
+  content: '';
+  display: block;
+  height: 100%;
+  width: 4px;
+}

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

@@ -0,0 +1,7 @@
+declare const styles: {
+  readonly "sapphire-progress": string;
+  readonly "sapphire-progress--segments": string;
+  readonly "sapphire-progress--indicator": string;
+};
+export = styles;
+

package/components/table/table.module.css

@@ -167,9 +167,6 @@
     .js-hover
   ):hover
   .sapphire-table__headCell_container {
-  --sapphire-table-row-bg: var(
-    --sapphire-semantic-color-background-action-tertiary-hover
-  );
   color: var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);
   border-radius: var(--sapphire-semantic-size-radius-sm);
 }

package/components/tag/tag.module.css

@@ -8,9 +8,11 @@
 .sapphire-tag {
   display: inline-flex;
   height: var(--sapphire-semantic-size-height-control-sm);
-  padding: 0 var(--sapphire-semantic-size-spacing-sm);
+  padding: 0 var(--sapphire-semantic-size-spacing-md);
   align-items: center;
   border-radius: var(--sapphire-semantic-size-height-control-sm);
+  border: var(--sapphire-semantic-size-border-sm) solid
+    var(--sapphire-semantic-color-border-primary);
 
   /* typography */
   font-size: var(--sapphire-semantic-size-font-control-md);
@@ -19,11 +21,8 @@
   font-style: normal;
   text-decoration: none;
 
-  /* color default */
-  background: var(
-    --sapphire-semantic-color-background-action-secondary-default
-  );
-  color: var(--sapphire-semantic-color-foreground-primary);
+  background: var(--sapphire-semantic-color-background-action-tertiary-default);
+  color: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);
   outline: none;
 
   /* transition */
@@ -69,12 +68,14 @@
 .sapphire-tag--actionable:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
-  background: var(--sapphire-semantic-color-background-action-secondary-hover);
+  background: var(--sapphire-semantic-color-background-action-tertiary-hover);
+  color: var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);
   cursor: pointer;
 }
 
 .sapphire-tag--actionable.is-active {
-  background: var(--sapphire-semantic-color-background-action-secondary-active);
+  background: var(--sapphire-semantic-color-background-action-tertiary-active);
+  color: var(--sapphire-semantic-color-foreground-action-on-tertiary-active);
   cursor: pointer;
 }
 
@@ -95,12 +96,17 @@
 .sapphire-tag__error-icon {
   display: flex;
   align-items: center;
-  color: var(--sapphire-semantic-color-foreground-on-negative-subtle);
+  color: var(--sapphire-semantic-color-foreground-negative);
 }
 
 /**
  * Button
  */
+
+.sapphire-tag:has(.sapphire-tag__button) {
+  padding-right: var(--sapphire-semantic-size-spacing-sm);
+}
+
 .sapphire-tag__button {
   box-sizing: border-box;
   display: inline-flex;
@@ -120,7 +126,7 @@
 
   /* style */
   background: transparent;
-  color: var(--sapphire-semantic-color-foreground-on-neutral-subtle);
+  color: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);
 }
 
 .sapphire-tag__button:focus {

package/components/text/text.module.css

@@ -22,6 +22,10 @@
   font-weight: var(--sapphire-semantic-font-weight-default-bold);
 }
 
+.sapphire-text--semibold {
+  font-weight: var(--sapphire-semantic-font-weight-default-medium);
+}
+
 .sapphire-text--underlined {
   text-decoration: underline;
 }

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

@@ -1,6 +1,7 @@
 declare const styles: {
   readonly "sapphire-text": string;
   readonly "sapphire-text--strong": string;
+  readonly "sapphire-text--semibold": string;
   readonly "sapphire-text--underlined": string;
   readonly "sapphire-text--secondary": string;
   readonly "sapphire-text--informative": string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "40.2.1",
+  "version": "42.0.0",
   "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.1.0"
+    "@danske/sapphire-design-tokens": "^42.1.1"
   },
-  "gitHead": "612c203ea4278deafe40f5477b5b33569cf06cfb"
+  "gitHead": "afb5a25463f39012c3599e6242c8d308786d11e1"
 }