@danske/sapphire-css 16.3.0 → 25.1.0

package/components/badge/badge.module.css

@@ -1,40 +1,10 @@
-@keyframes pop-in {
-  0% {
-    transform: scale(0) translate(50%, -50%);
-    opacity: 0;
-  }
-
-  25% {
-    opacity: 0.1;
-  }
-
-  100% {
-    transform: scale(1) translate(50%, -50%);
-  }
-}
-
-@keyframes pop-out {
-  0% {
-    transform: scale(1) translate(50%, -50%);
-  }
-
-  75% {
-    opacity: 0.1;
-  }
-
-  100% {
-    transform: scale(0) translate(50%, -50%);
-    opacity: 0;
-    display: none;
-  }
-}
-
 .sapphire-badge {
-  display: flex;
+  display: inline-flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  color: var(--sapphire-badge-color-content-default);
+  white-space: nowrap;
+  border-radius: var(--sapphire-badge-size-radius-default);
   font-family: var(--sapphire-badge-font-name);
   font-weight: var(--sapphire-badge-font-weight);
   font-style: normal;
@@ -53,69 +23,266 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.sapphire-badge--pop-in {
-  animation: pop-in var(--sapphire-badge-time-transition)
-    cubic-bezier(0.55, -0.49, 0.39, 1.49);
+/* Sizes */
+.sapphire-badge--small {
+  height: var(--sapphire-badge-size-height-s);
+  padding: 0 var(--sapphire-badge-size-spacing-horizontal-s);
+  font-size: var(--sapphire-badge-size-font-s);
 }
 
-.sapphire-badge--pop-out {
-  animation: pop-out var(--sapphire-badge-time-transition) forwards;
+.sapphire-badge--medium {
+  height: var(--sapphire-badge-size-height-m);
+  padding: 0 var(--sapphire-badge-size-spacing-horizontal-m);
+  font-size: var(--sapphire-badge-size-font-m);
 }
 
-/* Sizes */
 .sapphire-badge--large {
-  height: var(--sapphire-badge-size-height-large);
-  border-radius: var(--sapphire-badge-size-radius-large);
-  padding: var(--sapphire-badge-size-spacing-large-vertical)
-    var(--sapphire-badge-size-spacing-large-horizontal);
-  font-size: var(--sapphire-badge-size-font-primary);
+  height: var(--sapphire-badge-size-height-l);
+  padding: 0 var(--sapphire-badge-size-spacing-horizontal-l);
+  font-size: var(--sapphire-badge-size-font-l);
 }
 
-.sapphire-badge--medium {
-  height: var(--sapphire-badge-size-height-medium);
-  border-radius: var(--sapphire-badge-size-radius-medium);
-  padding: 0 var(--sapphire-badge-size-spacing-medium-horizontal);
-  font-size: var(--sapphire-badge-size-font-secondary);
-  min-width: var(--sapphire-badge-size-width-medium);
-  box-sizing: border-box;
+/* Colors and variants */
+.sapphire-badge--primary-positive {
+  color: var(--sapphire-badge-color-content-primary-positive);
+  background-color: var(--sapphire-badge-color-background-primary-positive);
 }
 
-.sapphire-badge--small {
-  min-width: var(--sapphire-badge-size-width-small);
-  height: var(--sapphire-badge-size-height-small);
-  border-radius: var(--sapphire-badge-size-radius-small);
+.sapphire-badge--secondary-positive {
+  color: var(--sapphire-badge-color-content-secondary-positive);
+  background-color: var(--sapphire-badge-color-background-secondary-positive);
+  border: var(--sapphire-badge-size-width-border) solid
+    var(--sapphire-badge-color-border-secondary-positive);
+}
+
+.sapphire-badge--primary-negative {
+  color: var(--sapphire-badge-color-content-primary-negative);
+  background-color: var(--sapphire-badge-color-background-primary-negative);
+}
+
+.sapphire-badge--secondary-negative {
+  color: var(--sapphire-badge-color-content-secondary-negative);
+  background-color: var(--sapphire-badge-color-background-secondary-negative);
+  border: var(--sapphire-badge-size-width-border) solid
+    var(--sapphire-badge-color-border-secondary-negative);
+}
+
+.sapphire-badge--primary-warning {
+  color: var(--sapphire-badge-color-content-primary-warning);
+  background-color: var(--sapphire-badge-color-background-primary-warning);
+}
+
+.sapphire-badge--secondary-warning {
+  color: var(--sapphire-badge-color-content-secondary-warning);
+  background-color: var(--sapphire-badge-color-background-secondary-warning);
+  border: var(--sapphire-badge-size-width-border) solid
+    var(--sapphire-badge-color-border-secondary-warning);
+}
+
+.sapphire-badge--primary-informative {
+  color: var(--sapphire-badge-color-content-primary-informative);
+  background-color: var(--sapphire-badge-color-background-primary-informative);
+}
+
+.sapphire-badge--secondary-informative {
+  color: var(--sapphire-badge-color-content-secondary-informative);
+  background-color: var(
+    --sapphire-badge-color-background-secondary-informative
+  );
+  border: var(--sapphire-badge-size-width-border) solid
+    var(--sapphire-badge-color-border-secondary-informative);
+}
+
+.sapphire-badge--primary-passive {
+  color: var(--sapphire-badge-color-content-primary-passive);
+  background-color: var(--sapphire-badge-color-background-primary-passive);
+}
+
+.sapphire-badge--secondary-passive {
+  color: var(--sapphire-badge-color-content-secondary-passive);
+  background-color: var(--sapphire-badge-color-background-secondary-passive);
+  border: var(--sapphire-badge-size-width-border) solid
+    var(--sapphire-badge-color-border-secondary-passive);
+}
+
+.sapphire-badge--primary-aqua {
+  color: var(--sapphire-badge-color-content-primary-aqua);
+  background-color: var(--sapphire-badge-color-background-primary-aqua);
+}
+
+.sapphire-badge--secondary-aqua {
+  color: var(--sapphire-badge-color-content-secondary-aqua);
+  background-color: var(--sapphire-badge-color-background-secondary-aqua);
+  border: var(--sapphire-badge-size-width-border) solid
+    var(--sapphire-badge-color-border-secondary-aqua);
+}
+
+.sapphire-badge--primary-copper {
+  color: var(--sapphire-badge-color-content-primary-copper);
+  background-color: var(--sapphire-badge-color-background-primary-copper);
+}
+
+.sapphire-badge--secondary-copper {
+  color: var(--sapphire-badge-color-content-secondary-copper);
+  background-color: var(--sapphire-badge-color-background-secondary-copper);
+  border: var(--sapphire-badge-size-width-border) solid
+    var(--sapphire-badge-color-border-secondary-copper);
+}
+
+.sapphire-badge--primary-electro {
+  color: var(--sapphire-badge-color-content-primary-electro);
+  background-color: var(--sapphire-badge-color-background-primary-electro);
+}
+
+.sapphire-badge--secondary-electro {
+  color: var(--sapphire-badge-color-content-secondary-electro);
+  background-color: var(--sapphire-badge-color-background-secondary-electro);
+  border: var(--sapphire-badge-size-width-border) solid
+    var(--sapphire-badge-color-border-secondary-electro);
+}
+
+.sapphire-badge--primary-indigo {
+  color: var(--sapphire-badge-color-content-primary-indigo);
+  background-color: var(--sapphire-badge-color-background-primary-indigo);
+}
+
+.sapphire-badge--secondary-indigo {
+  color: var(--sapphire-badge-color-content-secondary-indigo);
+  background-color: var(--sapphire-badge-color-background-secondary-indigo);
+  border: var(--sapphire-badge-size-width-border) solid
+    var(--sapphire-badge-color-border-secondary-indigo);
+}
+
+.sapphire-badge--primary-lime {
+  color: var(--sapphire-badge-color-content-primary-lime);
+  background-color: var(--sapphire-badge-color-background-primary-lime);
+}
+
+.sapphire-badge--secondary-lime {
+  color: var(--sapphire-badge-color-content-secondary-lime);
+  background-color: var(--sapphire-badge-color-background-secondary-lime);
+  border: var(--sapphire-badge-size-width-border) solid
+    var(--sapphire-badge-color-border-secondary-lime);
+}
+
+.sapphire-badge--primary-pink {
+  color: var(--sapphire-badge-color-content-primary-pink);
+  background-color: var(--sapphire-badge-color-background-primary-pink);
+}
+
+.sapphire-badge--secondary-pink {
+  color: var(--sapphire-badge-color-content-secondary-pink);
+  background-color: var(--sapphire-badge-color-background-secondary-pink);
+  border: var(--sapphire-badge-size-width-border) solid
+    var(--sapphire-badge-color-border-secondary-pink);
+}
+
+.sapphire-badge--primary-violet {
+  color: var(--sapphire-badge-color-content-primary-violet);
+  background-color: var(--sapphire-badge-color-background-primary-violet);
+}
+
+.sapphire-badge--secondary-violet {
+  color: var(--sapphire-badge-color-content-secondary-violet);
+  background-color: var(--sapphire-badge-color-background-secondary-violet);
+  border: var(--sapphire-badge-size-width-border) solid
+    var(--sapphire-badge-color-border-secondary-violet);
+}
+
+.sapphire-badge--primary-gold {
+  color: var(--sapphire-badge-color-content-primary-gold);
+  background-color: var(--sapphire-badge-color-background-primary-gold);
+}
+
+.sapphire-badge--secondary-gold {
+  color: var(--sapphire-badge-color-content-secondary-gold);
+  background-color: var(--sapphire-badge-color-background-secondary-gold);
+  border: var(--sapphire-badge-size-width-border) solid
+    var(--sapphire-badge-color-border-secondary-gold);
+}
+
+.sapphire-badge--primary-beige {
+  color: var(--sapphire-badge-color-content-primary-beige);
+  background-color: var(--sapphire-badge-color-background-primary-beige);
+}
+
+.sapphire-badge--secondary-beige {
+  color: var(--sapphire-badge-color-content-secondary-beige);
+  background-color: var(--sapphire-badge-color-background-secondary-beige);
+  border: var(--sapphire-badge-size-width-border) solid
+    var(--sapphire-badge-color-border-secondary-beige);
+}
+
+.sapphire-badge--primary-orchid {
+  color: var(--sapphire-badge-color-content-primary-orchid);
+  background-color: var(--sapphire-badge-color-background-primary-orchid);
+}
+
+.sapphire-badge--secondary-orchid {
+  color: var(--sapphire-badge-color-content-secondary-orchid);
+  background-color: var(--sapphire-badge-color-background-secondary-orchid);
+  border: var(--sapphire-badge-size-width-border) solid
+    var(--sapphire-badge-color-border-secondary-orchid);
+}
+
+.sapphire-badge--primary-gray {
+  color: var(--sapphire-badge-color-content-primary-gray);
+  background-color: var(--sapphire-badge-color-background-primary-gray);
+}
+
+.sapphire-badge--secondary-gray {
+  color: var(--sapphire-badge-color-content-secondary-gray);
+  background-color: var(--sapphire-badge-color-background-secondary-gray);
+  border: var(--sapphire-badge-size-width-border) solid
+    var(--sapphire-badge-color-border-secondary-gray);
+}
+
+.sapphire-badge--primary-cobalt {
+  color: var(--sapphire-badge-color-content-primary-cobalt);
+  background-color: var(--sapphire-badge-color-background-primary-cobalt);
+}
+
+.sapphire-badge--secondary-cobalt {
+  color: var(--sapphire-badge-color-content-secondary-cobalt);
+  background-color: var(--sapphire-badge-color-background-secondary-cobalt);
+  border: var(--sapphire-badge-size-width-border) solid
+    var(--sapphire-badge-color-border-secondary-cobalt);
+}
+
+.sapphire-badge--primary-forestGreen {
+  color: var(--sapphire-badge-color-content-primary-forest-green);
+  background-color: var(--sapphire-badge-color-background-primary-forest-green);
 }
 
-/* Variants */
-.sapphire-badge--primary {
-  background-color: var(--sapphire-badge-color-background-primary);
+.sapphire-badge--secondary-forestGreen {
+  color: var(--sapphire-badge-color-content-secondary-forest-green);
+  background-color: var(
+    --sapphire-badge-color-background-secondary-forest-green
+  );
+  border: var(--sapphire-badge-size-width-border) solid
+    var(--sapphire-badge-color-border-secondary-forest-green);
 }
 
-.sapphire-badge--secondary {
-  background-color: var(--sapphire-badge-color-background-secondary);
+.sapphire-badge--primary-teal {
+  color: var(--sapphire-badge-color-content-primary-teal);
+  background-color: var(--sapphire-badge-color-background-primary-teal);
 }
 
-/* Positioned */
-.sapphire-badge-container {
-  position: relative;
+.sapphire-badge--secondary-teal {
+  color: var(--sapphire-badge-color-content-secondary-teal);
+  background-color: var(--sapphire-badge-color-background-secondary-teal);
+  border: var(--sapphire-badge-size-width-border) solid
+    var(--sapphire-badge-color-border-secondary-teal);
 }
 
-/* Placement in container with circular or circular-looking content */
-.sapphire-badge-container .sapphire-badge {
-  position: absolute;
-  top: 14%;
-  right: 14%;
-  transform: scale(1) translate(50%, -50%);
-  transform-origin: 100% 0;
-  pointer-events: none;
+.sapphire-badge--primary-orange {
+  color: var(--sapphire-badge-color-content-primary-orange);
+  background-color: var(--sapphire-badge-color-background-primary-orange);
 }
 
-/* Placement in container with rectangular content */
-.sapphire-badge-container--rectangle .sapphire-badge {
-  position: absolute;
-  top: 0;
-  right: 0;
-  transform: scale(1) translate(50%, -50%);
-  transform-origin: 100% 0;
-  pointer-events: none;
+.sapphire-badge--secondary-orange {
+  color: var(--sapphire-badge-color-content-secondary-orange);
+  background-color: var(--sapphire-badge-color-background-secondary-orange);
+  border: var(--sapphire-badge-size-width-border) solid
+    var(--sapphire-badge-color-border-secondary-orange);
 }

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

@@ -1,16 +1,48 @@
 declare const styles: {
   readonly "sapphire-badge": string;
-  readonly "sapphire-badge--pop-in": string;
-  readonly "pop-in": string;
-  readonly "sapphire-badge--pop-out": string;
-  readonly "pop-out": string;
-  readonly "sapphire-badge--large": string;
-  readonly "sapphire-badge--medium": string;
   readonly "sapphire-badge--small": string;
-  readonly "sapphire-badge--primary": string;
-  readonly "sapphire-badge--secondary": string;
-  readonly "sapphire-badge-container": string;
-  readonly "sapphire-badge-container--rectangle": string;
+  readonly "sapphire-badge--medium": string;
+  readonly "sapphire-badge--large": string;
+  readonly "sapphire-badge--primary-positive": string;
+  readonly "sapphire-badge--secondary-positive": string;
+  readonly "sapphire-badge--primary-negative": string;
+  readonly "sapphire-badge--secondary-negative": string;
+  readonly "sapphire-badge--primary-warning": string;
+  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;
 };
 export = styles;