@danske/sapphire-css 39.0.1 → 40.0.0

package/components/badge/badge.module.css

@@ -6,8 +6,14 @@
   white-space: nowrap;
   border-radius: var(--sapphire-semantic-size-radius-sm);
   font-family: var(--sapphire-semantic-font-name-default);
-  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
   font-style: normal;
+
+  /* default size */
+  height: var(--sapphire-semantic-size-height-control-sm);
+  padding: 0 var(--sapphire-semantic-size-spacing-sm);
+  font-size: var(--sapphire-semantic-size-font-control-md);
+
   /* 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
@@ -21,390 +27,136 @@
    */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  color: var(--sapphire-semantic-color-foreground-on-decorative-neutral);
+  background: var(--sapphire-semantic-color-background-decorative-neutral);
 }
 
 /* Sizes */
 .sapphire-badge--sm {
   height: var(--sapphire-semantic-size-height-control-xs);
-  padding: 0 var(--sapphire-semantic-size-spacing-20);
+  padding: 0 var(--sapphire-semantic-size-spacing-xs);
   font-size: var(--sapphire-semantic-size-font-control-sm);
 }
 
-.sapphire-badge--md {
-  height: var(--sapphire-semantic-size-height-control-sm);
-  padding: 0 var(--sapphire-semantic-size-spacing-30);
-  font-size: var(--sapphire-semantic-size-font-control-md);
-}
-
-.sapphire-badge--lg {
-  height: var(--sapphire-semantic-size-height-control-md);
-  padding: 0 var(--sapphire-semantic-size-spacing-40);
-  font-size: var(--sapphire-semantic-size-font-control-default);
-}
-
 /* Colors and variants */
 .sapphire-badge--primary-positive {
-  color: var(--sapphire-semantic-color-content-positive-primary-default);
-  background-color: var(
-    --sapphire-semantic-color-background-positive-primary-default
-  );
+  color: var(--sapphire-semantic-color-foreground-on-positive);
+  background: var(--sapphire-semantic-color-background-positive);
 }
 
 .sapphire-badge--secondary-positive {
-  color: var(--sapphire-semantic-color-content-positive-secondary-default);
-  background-color: var(--sapphire-global-color-green-100);
-  border: var(--sapphire-semantic-size-border-sm) solid
-    var(--sapphire-semantic-color-border-positive-secondary-default);
+  color: var(--sapphire-semantic-color-foreground-on-positive-subtle);
+  background: var(--sapphire-semantic-color-background-positive-subtle);
 }
 
 .sapphire-badge--primary-negative {
-  color: var(--sapphire-semantic-color-content-negative-primary-default);
-  background-color: var(
-    --sapphire-semantic-color-background-negative-primary-default
-  );
+  color: var(--sapphire-semantic-color-foreground-on-negative);
+  background: var(--sapphire-semantic-color-background-negative);
 }
 
 .sapphire-badge--secondary-negative {
-  color: var(--sapphire-semantic-color-content-negative-secondary-default);
-  background-color: var(--sapphire-global-color-red-100);
-  border: var(--sapphire-semantic-size-border-sm) solid
-    var(--sapphire-semantic-color-border-negative-secondary-default);
+  color: var(--sapphire-semantic-color-foreground-on-negative-subtle);
+  background: var(--sapphire-semantic-color-background-negative-subtle);
 }
 
 .sapphire-badge--primary-warning {
-  color: var(--sapphire-semantic-color-content-warning-primary-default);
-  background-color: var(
-    --sapphire-semantic-color-background-warning-primary-default
-  );
+  color: var(--sapphire-semantic-color-foreground-on-warning);
+  background: var(--sapphire-semantic-color-background-warning);
 }
 
 .sapphire-badge--secondary-warning {
-  color: var(--sapphire-semantic-color-content-warning-secondary-default);
-  background-color: var(
-    --sapphire-semantic-color-background-warning-secondary-default
-  );
-  border: var(--sapphire-semantic-size-border-sm) solid
-    var(--sapphire-semantic-color-border-warning-secondary-default);
+  color: var(--sapphire-semantic-color-foreground-on-warning-subtle);
+  background: var(--sapphire-semantic-color-background-warning-subtle);
 }
 
 .sapphire-badge--primary-informative {
-  color: var(--sapphire-semantic-color-content-informative-primary-default);
-  background-color: var(
-    --sapphire-semantic-color-background-informative-primary-default
-  );
+  color: var(--sapphire-semantic-color-foreground-on-accent);
+  background: var(--sapphire-semantic-color-background-accent);
 }
 
 .sapphire-badge--secondary-informative {
-  color: var(--sapphire-semantic-color-content-informative-secondary-default);
-  background-color: var(
-    --sapphire-semantic-color-background-informative-secondary-default
-  );
-  border: var(--sapphire-semantic-size-border-sm) solid
-    var(--sapphire-semantic-color-border-informative-secondary-default);
-}
-
-.sapphire-badge--primary-passive {
-  color: var(--sapphire-semantic-color-content-passive-primary-default);
-  background-color: var(
-    --sapphire-semantic-color-background-passive-primary-default
-  );
-}
-
-.sapphire-badge--secondary-passive {
-  color: var(--sapphire-semantic-color-content-passive-secondary-default);
-  background-color: var(
-    --sapphire-semantic-color-background-passive-secondary-default
-  );
-  border: var(--sapphire-semantic-size-border-sm) solid
-    var(--sapphire-semantic-color-border-passive-secondary-default);
-}
-
-.sapphire-badge--primary-aqua {
-  color: var(--sapphire-semantic-color-content-decorative-aqua-primary-default);
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-aqua-primary-default
-  );
-}
-
-.sapphire-badge--secondary-aqua {
-  color: var(
-    --sapphire-semantic-color-content-decorative-aqua-secondary-default
-  );
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-aqua-secondary-default
-  );
-  border: var(--sapphire-semantic-size-border-sm) solid
-    var(--sapphire-semantic-color-border-decorative-aqua-secondary-default);
-}
-
-.sapphire-badge--primary-copper {
-  color: var(
-    --sapphire-semantic-color-content-decorative-copper-primary-default
-  );
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-copper-primary-default
-  );
-}
-
-.sapphire-badge--secondary-copper {
-  color: var(
-    --sapphire-semantic-color-content-decorative-copper-secondary-default
-  );
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-copper-secondary-default
-  );
-  border: var(--sapphire-semantic-size-border-sm) solid
-    var(--sapphire-semantic-color-border-decorative-copper-secondary-default);
-}
-
-.sapphire-badge--primary-electro {
-  color: var(
-    --sapphire-semantic-color-content-decorative-electro-primary-default
-  );
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-electro-primary-default
-  );
-}
-
-.sapphire-badge--secondary-electro {
-  color: var(
-    --sapphire-semantic-color-content-decorative-electro-secondary-default
-  );
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-electro-secondary-default
-  );
-  border: var(--sapphire-semantic-size-border-sm) solid
-    var(--sapphire-semantic-color-border-decorative-electro-secondary-default);
-}
-
-.sapphire-badge--primary-indigo {
-  color: var(
-    --sapphire-semantic-color-content-decorative-indigo-primary-default
-  );
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-indigo-primary-default
-  );
-}
-
-.sapphire-badge--secondary-indigo {
-  color: var(
-    --sapphire-semantic-color-content-decorative-indigo-secondary-default
-  );
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-indigo-secondary-default
-  );
-  border: var(--sapphire-semantic-size-border-sm) solid
-    var(--sapphire-semantic-color-border-decorative-indigo-secondary-default);
-}
-
-.sapphire-badge--primary-lime {
-  color: var(--sapphire-semantic-color-content-decorative-lime-primary-default);
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-lime-primary-default
-  );
-}
-
-.sapphire-badge--secondary-lime {
-  color: var(
-    --sapphire-semantic-color-content-decorative-lime-secondary-default
-  );
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-lime-secondary-default
-  );
-  border: var(--sapphire-semantic-size-border-sm) solid
-    var(--sapphire-semantic-color-border-decorative-lime-secondary-default);
-}
-
-.sapphire-badge--primary-pink {
-  color: var(--sapphire-semantic-color-content-decorative-pink-primary-default);
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-pink-primary-default
-  );
-}
-
-.sapphire-badge--secondary-pink {
-  color: var(
-    --sapphire-semantic-color-content-decorative-pink-secondary-default
-  );
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-pink-secondary-default
-  );
-  border: var(--sapphire-semantic-size-border-sm) solid
-    var(--sapphire-semantic-color-border-decorative-pink-secondary-default);
-}
-
-.sapphire-badge--primary-violet {
-  color: var(
-    --sapphire-semantic-color-content-decorative-violet-primary-default
-  );
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-violet-primary-default
-  );
-}
-
-.sapphire-badge--secondary-violet {
-  color: var(
-    --sapphire-semantic-color-content-decorative-violet-secondary-default
-  );
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-violet-secondary-default
-  );
-  border: var(--sapphire-semantic-size-border-sm) solid
-    var(--sapphire-semantic-color-border-decorative-violet-secondary-default);
+  color: var(--sapphire-semantic-color-foreground-on-accent-subtle);
+  background: var(--sapphire-semantic-color-background-accent-subtle);
 }
 
-.sapphire-badge--primary-gold {
-  color: var(--sapphire-semantic-color-content-decorative-gold-primary-default);
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-gold-primary-default
-  );
+/* decorative badges */
+.sapphire-badge--decorative-1 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-1);
+  background: var(--sapphire-semantic-color-background-decorative-1);
 }
 
-.sapphire-badge--secondary-gold {
-  color: var(
-    --sapphire-semantic-color-content-decorative-gold-secondary-default
-  );
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-gold-secondary-default
-  );
-  border: var(--sapphire-semantic-size-border-sm) solid
-    var(--sapphire-semantic-color-border-decorative-gold-secondary-default);
+.sapphire-badge--decorative-2 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-2);
+  background: var(--sapphire-semantic-color-background-decorative-2);
 }
 
-.sapphire-badge--primary-beige {
-  color: var(
-    --sapphire-semantic-color-content-decorative-beige-primary-default
-  );
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-beige-primary-default
-  );
+.sapphire-badge--decorative-3 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-3);
+  background: var(--sapphire-semantic-color-background-decorative-3);
 }
 
-.sapphire-badge--secondary-beige {
-  color: var(
-    --sapphire-semantic-color-content-decorative-beige-secondary-default
-  );
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-beige-secondary-default
-  );
-  border: var(--sapphire-semantic-size-border-sm) solid
-    var(--sapphire-semantic-color-border-decorative-beige-secondary-default);
+.sapphire-badge--decorative-4 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-4);
+  background: var(--sapphire-semantic-color-background-decorative-4);
 }
 
-.sapphire-badge--primary-orchid {
-  color: var(
-    --sapphire-semantic-color-content-decorative-orchid-primary-default
-  );
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-orchid-primary-default
-  );
+.sapphire-badge--decorative-5 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-5);
+  background: var(--sapphire-semantic-color-background-decorative-5);
 }
 
-.sapphire-badge--secondary-orchid {
-  color: var(
-    --sapphire-semantic-color-content-decorative-orchid-secondary-default
-  );
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-orchid-secondary-default
-  );
-  border: var(--sapphire-semantic-size-border-sm) solid
-    var(--sapphire-semantic-color-border-decorative-orchid-secondary-default);
+.sapphire-badge--decorative-6 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-6);
+  background: var(--sapphire-semantic-color-background-decorative-6);
 }
 
-.sapphire-badge--primary-gray {
-  color: var(--sapphire-semantic-color-content-decorative-gray-primary-default);
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-gray-primary-default
-  );
+.sapphire-badge--decorative-7 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-7);
+  background: var(--sapphire-semantic-color-background-decorative-7);
 }
 
-.sapphire-badge--secondary-gray {
-  color: var(
-    --sapphire-semantic-color-content-decorative-gray-secondary-default
-  );
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-gray-secondary-default
-  );
-  border: var(--sapphire-semantic-size-border-sm) solid
-    var(--sapphire-semantic-color-border-decorative-gray-secondary-default);
+.sapphire-badge--decorative-8 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-8);
+  background: var(--sapphire-semantic-color-background-decorative-8);
 }
 
-.sapphire-badge--primary-cobalt {
-  color: var(
-    --sapphire-semantic-color-content-decorative-cobalt-primary-default
-  );
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-cobalt-primary-default
-  );
+.sapphire-badge--decorative-9 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-9);
+  background: var(--sapphire-semantic-color-background-decorative-9);
 }
 
-.sapphire-badge--secondary-cobalt {
-  color: var(
-    --sapphire-semantic-color-content-decorative-cobalt-secondary-default
-  );
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-cobalt-secondary-default
-  );
-  border: var(--sapphire-semantic-size-border-sm) solid
-    var(--sapphire-semantic-color-border-decorative-cobalt-secondary-default);
+.sapphire-badge--decorative-10 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-10);
+  background: var(--sapphire-semantic-color-background-decorative-10);
 }
 
-.sapphire-badge--primary-forestGreen {
-  color: var(
-    --sapphire-semantic-color-content-decorative-forest-green-primary-default
-  );
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-forest-green-primary-default
-  );
+.sapphire-badge--decorative-11 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-11);
+  background: var(--sapphire-semantic-color-background-decorative-11);
 }
 
-.sapphire-badge--secondary-forestGreen {
-  color: var(
-    --sapphire-semantic-color-content-decorative-forest-green-secondary-default
-  );
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-forest-green-secondary-default
-  );
-  border: var(--sapphire-semantic-size-border-sm) solid
-    var(
-      --sapphire-semantic-color-border-decorative-forest-green-secondary-default
-    );
+.sapphire-badge--decorative-12 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-12);
+  background: var(--sapphire-semantic-color-background-decorative-12);
 }
 
-.sapphire-badge--primary-teal {
-  color: var(--sapphire-semantic-color-content-decorative-teal-primary-default);
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-teal-primary-default
-  );
+.sapphire-badge--decorative-13 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-13);
+  background: var(--sapphire-semantic-color-background-decorative-13);
 }
 
-.sapphire-badge--secondary-teal {
-  color: var(
-    --sapphire-semantic-color-content-decorative-teal-secondary-default
-  );
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-teal-secondary-default
-  );
-  border: var(--sapphire-semantic-size-border-sm) solid
-    var(--sapphire-semantic-color-border-decorative-teal-secondary-default);
+.sapphire-badge--decorative-14 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-14);
+  background: var(--sapphire-semantic-color-background-decorative-14);
 }
 
-.sapphire-badge--primary-orange {
-  color: var(
-    --sapphire-semantic-color-content-decorative-orange-primary-default
-  );
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-orange-primary-default
-  );
+.sapphire-badge--decorative-15 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-15);
+  background: var(--sapphire-semantic-color-background-decorative-15);
 }
 
-.sapphire-badge--secondary-orange {
-  color: var(
-    --sapphire-semantic-color-content-decorative-orange-secondary-default
-  );
-  background-color: var(
-    --sapphire-semantic-color-background-decorative-orange-secondary-default
-  );
-  border: var(--sapphire-semantic-size-border-sm) solid
-    var(--sapphire-semantic-color-border-decorative-orange-secondary-default);
+.sapphire-badge--decorative-16 {
+  color: var(--sapphire-semantic-color-foreground-on-decorative-16);
+  background: var(--sapphire-semantic-color-background-decorative-16);
 }

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

@@ -1,8 +1,6 @@
 declare const styles: {
   readonly "sapphire-badge": string;
   readonly "sapphire-badge--sm": string;
-  readonly "sapphire-badge--md": string;
-  readonly "sapphire-badge--lg": string;
   readonly "sapphire-badge--primary-positive": string;
   readonly "sapphire-badge--secondary-positive": string;
   readonly "sapphire-badge--primary-negative": string;
@@ -11,38 +9,22 @@ declare const styles: {
   readonly "sapphire-badge--secondary-warning": string;
   readonly "sapphire-badge--primary-informative": string;
   readonly "sapphire-badge--secondary-informative": string;
-  readonly "sapphire-badge--primary-passive": string;
-  readonly "sapphire-badge--secondary-passive": string;
-  readonly "sapphire-badge--primary-aqua": string;
-  readonly "sapphire-badge--secondary-aqua": string;
-  readonly "sapphire-badge--primary-copper": string;
-  readonly "sapphire-badge--secondary-copper": string;
-  readonly "sapphire-badge--primary-electro": string;
-  readonly "sapphire-badge--secondary-electro": string;
-  readonly "sapphire-badge--primary-indigo": string;
-  readonly "sapphire-badge--secondary-indigo": string;
-  readonly "sapphire-badge--primary-lime": string;
-  readonly "sapphire-badge--secondary-lime": string;
-  readonly "sapphire-badge--primary-pink": string;
-  readonly "sapphire-badge--secondary-pink": string;
-  readonly "sapphire-badge--primary-violet": string;
-  readonly "sapphire-badge--secondary-violet": string;
-  readonly "sapphire-badge--primary-gold": string;
-  readonly "sapphire-badge--secondary-gold": string;
-  readonly "sapphire-badge--primary-beige": string;
-  readonly "sapphire-badge--secondary-beige": string;
-  readonly "sapphire-badge--primary-orchid": string;
-  readonly "sapphire-badge--secondary-orchid": string;
-  readonly "sapphire-badge--primary-gray": string;
-  readonly "sapphire-badge--secondary-gray": string;
-  readonly "sapphire-badge--primary-cobalt": string;
-  readonly "sapphire-badge--secondary-cobalt": string;
-  readonly "sapphire-badge--primary-forestGreen": string;
-  readonly "sapphire-badge--secondary-forestGreen": string;
-  readonly "sapphire-badge--primary-teal": string;
-  readonly "sapphire-badge--secondary-teal": string;
-  readonly "sapphire-badge--primary-orange": string;
-  readonly "sapphire-badge--secondary-orange": string;
+  readonly "sapphire-badge--decorative-1": string;
+  readonly "sapphire-badge--decorative-2": string;
+  readonly "sapphire-badge--decorative-3": string;
+  readonly "sapphire-badge--decorative-4": string;
+  readonly "sapphire-badge--decorative-5": string;
+  readonly "sapphire-badge--decorative-6": string;
+  readonly "sapphire-badge--decorative-7": string;
+  readonly "sapphire-badge--decorative-8": string;
+  readonly "sapphire-badge--decorative-9": string;
+  readonly "sapphire-badge--decorative-10": string;
+  readonly "sapphire-badge--decorative-11": string;
+  readonly "sapphire-badge--decorative-12": string;
+  readonly "sapphire-badge--decorative-13": string;
+  readonly "sapphire-badge--decorative-14": string;
+  readonly "sapphire-badge--decorative-15": string;
+  readonly "sapphire-badge--decorative-16": string;
 };
 export = styles;