@danske/sapphire-css 39.0.0 → 40.0.0

package/components/feedbackMessage/feedbackMessage.module.css

@@ -4,39 +4,8 @@
   align-items: center;
   justify-content: center;
   margin: auto;
-  gap: var(--sapphire-semantic-size-spacing-50);
   max-width: var(--sapphire-global-size-generic-1000);
-}
-
-.sapphire-feedback-message__icon {
-  padding: var(--sapphire-semantic-size-spacing-30);
-  border-radius: 100%; /* big enough value */
-  line-height: 0; /* to make sure height won't exceed width */
-}
-
-.sapphire-feedback-message__icon--success {
-  background-color: var(
-    --sapphire-semantic-color-background-positive-secondary-default
-  );
-  color: var(--sapphire-semantic-color-content-positive-secondary-default);
-}
-.sapphire-feedback-message__icon--error {
-  background-color: var(
-    --sapphire-semantic-color-background-negative-secondary-default
-  );
-  color: var(--sapphire-semantic-color-content-negative-secondary-default);
-}
-.sapphire-feedback-message__icon--warning {
-  background-color: var(
-    --sapphire-semantic-color-background-warning-secondary-default
-  );
-  color: var(--sapphire-semantic-color-content-warning-secondary-default);
-}
-.sapphire-feedback-message__icon--informative {
-  background-color: var(
-    --sapphire-semantic-color-background-informative-secondary-default
-  );
-  color: var(--sapphire-semantic-color-content-informative-secondary-default);
+  gap: var(--sapphire-semantic-size-spacing-xl);
 }
 
 .sapphire-feedback-message__content {
@@ -44,12 +13,5 @@
   flex-direction: column;
   align-items: center;
   text-align: center;
-  gap: var(--sapphire-semantic-size-spacing-30);
-}
-
-.sapphire-feedback-message__body {
-  color: var(--sapphire-semantic-color-content-default-secondary);
-  font-family: var(--sapphire-semantic-font-name-default);
-  font-size: var(--sapphire-global-size-font-88);
-  line-height: var(--sapphire-semantic-size-line-height-md);
+  gap: var(--sapphire-semantic-size-spacing-md);
 }

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

@@ -1,12 +1,6 @@
 declare const styles: {
   readonly "sapphire-feedback-message": string;
-  readonly "sapphire-feedback-message__icon": string;
-  readonly "sapphire-feedback-message__icon--success": string;
-  readonly "sapphire-feedback-message__icon--error": string;
-  readonly "sapphire-feedback-message__icon--warning": string;
-  readonly "sapphire-feedback-message__icon--informative": string;
   readonly "sapphire-feedback-message__content": string;
-  readonly "sapphire-feedback-message__body": string;
 };
 export = styles;
 

package/components/field/field.module.css

@@ -1,12 +1,12 @@
 .sapphire-field {
   display: inline-grid;
   grid-template-columns: auto; /* One column by default */
-  row-gap: var(--sapphire-semantic-size-spacing-20);
-  column-gap: var(--sapphire-semantic-size-spacing-40);
+  row-gap: var(--sapphire-semantic-size-spacing-2xs);
+  column-gap: var(--sapphire-semantic-size-spacing-md);
   font-family: var(--sapphire-semantic-font-name-default);
   grid-auto-rows: min-content;
   /* default width */
-  width: var(--sapphire-semantic-size-width-control-default);
+  width: var(--sapphire-semantic-size-width-field);
 
   /* 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
@@ -57,6 +57,12 @@ legend.sapphire-field__label {
   order: 2;
   width: 100%;
   min-width: 0;
+  line-height: var(--sapphire-semantic-size-line-height-md);
+  font-size: var(--sapphire-semantic-size-font-control-lg);
+}
+
+.sapphire-field--md .sapphire-field__control {
+  font-size: var(--sapphire-semantic-size-font-control-md);
 }
 
 /**
@@ -96,29 +102,32 @@ legend.sapphire-field__label {
  */
 .sapphire-field__note-row {
   display: flex;
-  align-items: top;
+  align-items: flex-start;
+  gap: var(--sapphire-semantic-size-spacing-xs);
   font-size: var(--sapphire-semantic-size-font-label-md);
   line-height: var(--sapphire-semantic-size-line-height-md);
-  color: var(--sapphire-semantic-color-content-default-secondary);
+  color: var(--sapphire-semantic-color-foreground-secondary);
 }
 
 .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);
 }
 
 .sapphire-field__note {
   flex: 1;
 }
 
-.sapphire-field--error .sapphire-field__note {
-  color: var(--sapphire-semantic-color-content-negative-secondary-default);
+.sapphire-field__note-icon {
+  display: inline-flex;
+  align-items: center;
+  /** For alignment with text */
+  height: calc(1em * var(--sapphire-semantic-size-line-height-md));
 }
 
 /**
  * Disabled
  */
-.sapphire-field.is-disabled {
+.sapphire-field.is-disabled .sapphire-field__control {
   opacity: var(--sapphire-semantic-opacity-disabled);
   cursor: not-allowed;
 }
@@ -136,7 +145,7 @@ legend.sapphire-field__label {
 .sapphire-field--label-placement-side:not(.sapphire-field--no-width)
   .sapphire-field__control {
   /* default width */
-  width: var(--sapphire-semantic-size-width-control-default);
+  width: var(--sapphire-semantic-size-width-field);
 }
 .sapphire-field--label-placement-side .sapphire-field__message {
   grid-column: 2;
@@ -147,12 +156,12 @@ legend.sapphire-field__label {
   /* label is center aligned with control by default. But if the control is too long (e.g. textarea)
    * the label stays at the top (max-height)
    */
-  max-height: var(--sapphire-semantic-size-height-input-lg);
+  max-height: var(--sapphire-semantic-size-height-control-lg);
 }
 
 .sapphire-field--label-placement-side.sapphire-field--md
   .sapphire-field__label {
-  max-height: var(--sapphire-semantic-size-height-input-md);
+  max-height: var(--sapphire-semantic-size-height-control-md);
 }
 
 .sapphire-field--label-placement-side.sapphire-field--label-alignment-top
@@ -169,7 +178,7 @@ legend.sapphire-field__label {
   display: inline-flex;
   flex-direction: column;
   width: min-content; /* this is needed to have the labels column shrunk to the largest one */
-  gap: var(--sapphire-semantic-size-spacing-50);
+  gap: var(--sapphire-semantic-size-spacing-lg);
 }
 
 .sapphire-fieldset .sapphire-field--label-placement-side {

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

@@ -3,13 +3,13 @@ declare const styles: {
   readonly "sapphire-field--no-width": string;
   readonly "sapphire-field__label": string;
   readonly "sapphire-field__control": string;
+  readonly "sapphire-field--md": string;
   readonly "sapphire-field__control--group": string;
   readonly "sapphire-field--no-shrink": string;
   readonly "sapphire-field__message": string;
   readonly "sapphire-field__note-row": string;
-  readonly "sapphire-field--md": string;
   readonly "sapphire-field__note": string;
-  readonly "sapphire-field--error": string;
+  readonly "sapphire-field__note-icon": string;
   readonly "is-disabled": string;
   readonly "sapphire-field--label-placement-side": string;
   readonly "sapphire-field--label-alignment-top": string;

package/components/fieldGroup/fieldGroup.module.css

@@ -1,8 +1,8 @@
 .sapphire-field-group {
   display: flex;
   flex-wrap: wrap;
-  column-gap: var(--sapphire-semantic-size-spacing-50);
-  row-gap: var(--sapphire-semantic-size-spacing-30);
+  column-gap: var(--sapphire-semantic-size-spacing-lg);
+  row-gap: var(--sapphire-semantic-size-spacing-sm);
 }
 
 .sapphire-field-group--horizontal {
@@ -14,5 +14,5 @@
 }
 
 .sapphire-field-group--md {
-  row-gap: var(--sapphire-semantic-size-spacing-20);
+  row-gap: var(--sapphire-semantic-size-spacing-2xs);
 }

package/components/filterDropdown/filterDropdown.module.css

@@ -13,6 +13,6 @@
 
 .sapphire-filter-dropdown__footer {
   display: flex;
-  justify-content: space-between;
+  justify-content: end;
   padding: var(--sapphire-semantic-size-spacing-container-horizontal-sm);
 }

package/components/flag/flag.module.css

@@ -1,7 +1,7 @@
 .sapphire-flag {
   flex-shrink: 0;
   border: var(--sapphire-semantic-size-border-sm) solid
-    var(--sapphire-semantic-color-border-separator-default);
+    var(--sapphire-semantic-color-border-secondary);
 }
 
 .sapphire-flag.sapphire-flag--xs {
@@ -20,13 +20,13 @@
 }
 
 .sapphire-flag.sapphire-flag--lg {
-  height: var(--sapphire-global-size-generic-100);
-  width: var(--sapphire-global-size-generic-100);
+  height: var(--sapphire-semantic-size-height-control-md);
+  width: var(--sapphire-semantic-size-height-control-md);
 }
 
 .sapphire-flag.sapphire-flag--xl {
-  height: var(--sapphire-global-size-generic-120);
-  width: var(--sapphire-global-size-generic-120);
+  height: var(--sapphire-semantic-size-height-control-lg);
+  width: var(--sapphire-semantic-size-height-control-lg);
 }
 
 .sapphire-flag.sapphire-flag--rounded {
@@ -34,5 +34,5 @@
     * This is a hack to fix the antialiasing issue when some flag are rendered rounded.
     */
   transform: rotate(0.01deg);
-  border-radius: var(--sapphire-semantic-size-radius-xl);
+  border-radius: 50%;
 }

package/components/icon/icon.module.css

@@ -2,22 +2,49 @@
   flex-shrink: 0;
 }
 
-.sapphire-icon.sapphire-icon--sm {
+/* sizes */
+
+.sapphire-icon--sm {
   height: var(--sapphire-semantic-size-icon-sm);
   width: var(--sapphire-semantic-size-icon-sm);
 }
 
-.sapphire-icon.sapphire-icon--md {
+.sapphire-icon--md {
   height: var(--sapphire-semantic-size-icon-md);
   width: var(--sapphire-semantic-size-icon-md);
 }
 
-.sapphire-icon.sapphire-icon--lg {
+.sapphire-icon--lg {
   height: var(--sapphire-semantic-size-icon-lg);
   width: var(--sapphire-semantic-size-icon-lg);
 }
 
-.sapphire-icon.sapphire-icon--xl {
+.sapphire-icon--xl {
   height: var(--sapphire-semantic-size-icon-xl);
   width: var(--sapphire-semantic-size-icon-xl);
 }
+
+/* Semantic Colors */
+.sapphire-icon--primary {
+  color: var(--sapphire-semantic-color-foreground-primary);
+}
+
+.sapphire-icon--secondary {
+  color: var(--sapphire-semantic-color-foreground-secondary);
+}
+
+.sapphire-icon--informative {
+  color: var(--sapphire-semantic-color-foreground-accent);
+}
+
+.sapphire-icon--positive {
+  color: var(--sapphire-semantic-color-foreground-positive);
+}
+
+.sapphire-icon--warning {
+  color: var(--sapphire-semantic-color-foreground-warning);
+}
+
+.sapphire-icon--negative {
+  color: var(--sapphire-semantic-color-foreground-negative);
+}

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

@@ -4,6 +4,12 @@ declare const styles: {
   readonly "sapphire-icon--md": string;
   readonly "sapphire-icon--lg": string;
   readonly "sapphire-icon--xl": string;
+  readonly "sapphire-icon--primary": string;
+  readonly "sapphire-icon--secondary": string;
+  readonly "sapphire-icon--informative": string;
+  readonly "sapphire-icon--positive": string;
+  readonly "sapphire-icon--warning": string;
+  readonly "sapphire-icon--negative": string;
 };
 export = styles;