Badge Changes

packages/css-framework/index.scss

@@ -8,6 +8,7 @@
 @forward "src/abstracts/functions/color";
 @forward "src/abstracts/functions/spacing";
 @forward "src/abstracts/functions/typography";
+@forward "src/abstracts/functions/shadows";
 
 // Expose Mixins
 // Again, we only forward the mixins we want the consumer

packages/css-framework/src/abstracts/functions/_index.scss

@@ -1,6 +1,7 @@
 @forward "color";
 @forward "map-deep-get";
 @forward "non-destructive-map-merge";
+@forward "shadows";
 @forward "spacing";
 @forward "typography";
 @forward "map-get-default";

packages/css-framework/src/abstracts/functions/_shadows.scss

@@ -0,0 +1,12 @@
+@use "sass:map";
+@use "../../vars";
+
+@function shadows($size) {
+  @if map.has-key(vars.$shadows, $size) {
+    @return unquote(map.get(vars.$shadows, $size));
+  }
+
+  @else {
+    @error "No shadow value could be retrieved for #{$size}";
+  }
+}

packages/css-framework/src/components/_badge.scss

@@ -2,85 +2,164 @@
 @use "../abstracts/mixins" as m;
 @use "../abstracts/functions" as f;
 
-$badge-border-radius: 3px;
-$badge-font-weight: 600;
+
+$badge: (
+  border-radius: 2px,
+  border-radius-pill: 100px
+);
 
 $badge-sizes: (
   small: (
-    font-size: f.font-size("xxs"),
-    padding: f.spacing("2") f.spacing("4")
+    font-size: f.font-size("s"),
+    font-weight: 700,
+    line-height: 1.4,
+    padding: f.spacing("1") f.spacing("2"),
+    padding-pill: f.spacing("1") f.spacing("3")
   ),
   regular: (
-    font-size: f.font-size("xs"),
-    padding: f.spacing("2") f.spacing("4")
+    font-size: f.font-size("base"),
+    font-weight: 600,
+    line-height: 1.3,
+    padding: f.spacing("1") f.spacing("2"),
+    padding-pill: f.spacing("1") f.spacing("4")
   ),
   large: (
-    font-size: f.font-size("s"),
-    padding: f.spacing("2") f.spacing("6")
+    font-size: f.font-size("base"),
+    font-weight: 600,
+    line-height: 1.3,
+    padding: f.spacing("2") f.spacing("3"),
+    padding-pill: f.spacing("2") f.spacing("4")
   ),
   xlarge: (
-    font-size: f.font-size("base"),
-    padding: f.spacing("2") f.spacing("6")
+    font-size: f.font-size("m"),
+    font-weight: 600,
+    line-height: 1.3,
+    padding: f.spacing("2") f.spacing("3"),
+    padding-pill: f.spacing("2") f.spacing("4")
   )
 );
 
 $badge-states: (
   neutral: (
-    color: f.color("neutral", "900"),
-    solid: f.color("neutral", "500"),
-    faded: f.color("neutral", "100")
+    solid-text:   f.color("neutral", "white"),
+    solid-bg:     f.color("neutral", "500"),
+    solid-shadow: f.shadows("1"),
+    faded-text:   f.color("neutral", "400"),
+    faded-bg:     f.color("neutral", "100"),
+    faded-shadow: f.shadows("0")
   ),
   action: (
-    color: f.color("action", "700"),
-    solid: f.color("action", "500"),
-    faded: f.color("action", "100")
+    solid-text:   f.color("neutral", "white"),
+    solid-bg:     f.color("action", "500"),
+    solid-shadow: f.shadows("1"),
+    faded-text:   f.color("action", "500"),
+    faded-bg:     f.color("action", "100"),
+    faded-shadow: f.shadows("0")
   ),
-  danger: (
-    color: f.color("danger", "800"),
-    solid: f.color("danger", "500"),
-    faded: f.color("danger", "100")
+  success: (
+    solid-text:   f.color("neutral", "white"),
+    solid-bg:     f.color("success", "600"),
+    solid-shadow: f.shadows("1"),
+    faded-text:   f.color("success", "700"),
+    faded-bg:     f.color("success", "100"),
+    faded-shadow: f.shadows("0")
   ),
   warning: (
-    color: f.color("warning", "800"),
-    solid: f.color("warning", "600"),
-    faded: f.color("warning", "200")
+    solid-text:   f.color("warning", "800"),
+    solid-bg:     f.color("warning", "300"),
+    solid-shadow: f.shadows("0"),
+    faded-text:   f.color("warning", "700"),
+    faded-bg:     f.color("warning", "000"),
+    faded-shadow: f.shadows("0")
   ),
-  success: (
-    color: f.color("success", "800"),
-    solid: f.color("success", "600"),
-    faded: f.color("success", "100")
-  )
+  danger: (
+    solid-text:   f.color("neutral", "white"),
+    solid-bg:     f.color("danger", "600"),
+    solid-shadow: f.shadows("1"),
+    faded-text:   f.color("danger", "600"),
+    faded-bg:     f.color("danger", "100"),
+    faded-shadow: f.shadows("0")
+  ),
+  supa: (
+    solid-text:   f.color("neutral", "white"),
+    solid-bg:     f.color("supa", "500"),
+    solid-shadow: f.shadows("1"),
+    faded-text:   f.color("supa", "600"),
+    faded-bg:     f.color("supa", "000"),
+    faded-shadow: f.shadows("0")
+  ),
+  supb: (
+    solid-text:   f.color("neutral", "white"),
+    solid-bg:     f.color("supb", "500"),
+    solid-shadow: f.shadows("1"),
+    faded-text:   f.color("supb", "600"),
+    faded-bg:     f.color("supb", "100"),
+    faded-shadow: f.shadows("0")
+  ),
+  supc: (
+    solid-text:   f.color("neutral", "white"),
+    solid-bg:     f.color("supc", "500"),
+    solid-shadow: f.shadows("1"),
+    faded-text:   f.color("supc", "800"),
+    faded-bg:     f.color("supc", "100"),
+    faded-shadow: f.shadows("0")
+  ),
+  supd: (
+    solid-text:   f.color("neutral", "white"),
+    solid-bg:     f.color("supd", "500"),
+    solid-shadow: f.shadows("1"),
+    faded-text:   f.color("supd", "700"),
+    faded-bg:     f.color("supd", "100"),
+    faded-shadow: f.shadows("0")
+  ),
+  supe: (
+    solid-text:   f.color("neutral", "white"),
+    solid-bg:     f.color("supe", "600"),
+    solid-shadow: f.shadows("1"),
+    faded-text:   f.color("supe", "700"),
+    faded-bg:     f.color("supe", "200"),
+    faded-shadow: f.shadows("0")
+  ),
+  supf: (
+    solid-text:   f.color("neutral", "white"),
+    solid-bg:     f.color("supf", "600"),
+    solid-shadow: f.shadows("1"),
+    faded-text:   f.color("supf", "700"),
+    faded-bg:     f.color("supf", "200"),
+    faded-shadow: f.shadows("0")
+  ),
+
 );
 
 .rn-badge {
   display: inline-block;
-  border-radius: 3px;
-  font-weight: 700;
   vertical-align: middle;
-  text-transform: uppercase;
-  line-height: 1;
+  white-space: nowrap;
+  border-radius: map.get($badge, "border-radius");
+
+  // provide a default fallback for the `.rn-badge` class
+  padding: f.map-deep-get($badge-sizes, "regular", "padding");
+  font-size: f.map-deep-get($badge-sizes, "regular", "font-size");
+  font-weight: f.map-deep-get($badge-sizes, "regular", "font-weight");
+  line-height: f.map-deep-get($badge-sizes, "regular", "line-height");
+  background-color: f.map-deep-get($badge-states, "neutral", "solid-bg");
+  color: f.map-deep-get($badge-states, "neutral", "solid-text");
+  text-shadow: f.map-deep-get($badge-states, "neutral", "solid-shadow");
 
   @each $state, $variation in $badge-states {
     &.rn-badge--#{$state} {
-      color: f.color("neutral", "white");
-      background: map.get($variation, "solid");
-    }
-  }
-
-  &--solid {
-    @each $state, $variation in $badge-states {
-      &.rn-badge--#{$state} {
-        color: f.color("neutral", "white");
-        background: map.get($variation, "solid");
-      }
+      background-color: map.get($variation, "solid-bg");
+      color: map.get($variation, "solid-text");
+      text-shadow: map.get($variation, "solid-shadow");
     }
   }
 
   &--faded {
     @each $state, $variation in $badge-states {
       &.rn-badge--#{$state} {
-        color: map.get($variation, "color");
-        background: map.get($variation, "faded");
+        background-color: map.get($variation, "faded-bg");
+        color: map.get($variation, "faded-text");
+        text-shadow: map.get($variation, "faded-shadow");
       }
     }
   }
@@ -89,18 +168,20 @@ $badge-states: (
     &.rn-badge--#{$size} {
       font-size: map.get($values, "font-size");
       padding: map.get($values, "padding");
+      font-weight: map.get($values, "font-weight");
+      line-height: map.get($values, "line-height");
     }
   }
 
 
   &.rn-badge--pill {
-    padding: f.spacing("3") f.spacing("5");
-    border-radius: 100px;
+    padding: f.map-deep-get($badge-sizes, "regular", "padding-pill");
+    border-radius: map.get($badge, "border-radius-pill");
 
     @each $size, $values in $badge-sizes {
       &.rn-badge--#{$size} {
         font-size: map.get($values, "font-size");
-        padding: map.get($values, "padding");
+        padding: map.get($values, "padding-pill");
       }
     }
   }

packages/css-framework/src/contexts/_light.scss

@@ -263,10 +263,11 @@
   );
 
   defaults.$shadows: (
-    "0": 0 0 0 transparent,
-    "1": 0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    "2": 0 6px 14px 0 rgba(0, 0, 0, 0.16),
-    "3": 0 12px 28px 0 rgba(0, 0, 0, 0.26),
+    "0": "0 0 0 transparent",
+    "1": "0 1px 3px rgba(0, 0, 0, 0.04)",
+    "2": "0 2px 4px rgba(0, 0, 0, 0.08)",
+    "3": "0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.14)",
+    "4": "0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.12)",
   );
 
   // Typography

packages/react-component-library/src/components/Badge/Badge.stories.tsx

@@ -26,6 +26,12 @@ const badgeColorTextMap = {
   [BADGE_COLOR.NEUTRAL]: 'Neutral',
   [BADGE_COLOR.SUCCESS]: 'Success',
   [BADGE_COLOR.WARNING]: 'Warning',
+  [BADGE_COLOR.SUPA]: 'Sup A',
+  [BADGE_COLOR.SUPB]: 'Sup B',
+  [BADGE_COLOR.SUPC]: 'Sup C',
+  [BADGE_COLOR.SUPD]: 'Sup D',
+  [BADGE_COLOR.SUPE]: 'Sup E',
+  [BADGE_COLOR.SUPF]: 'Sup F',
 }
 
 const badgeSizeTextMap = {
@@ -65,7 +71,7 @@ Object.keys(badgeSizeTextMap).forEach(key => {
   sizesExamples.add(badgeSizeTextMap[key], () => (
     <Badge
       color={BADGE_COLOR.NEUTRAL}
-      colorVariant={BADGE_COLOR_VARIANT.FADED}
+      colorVariant={BADGE_COLOR_VARIANT.SOLID}
       size={key as BadgeSizeType}
     >
       {badgeSizeTextMap[key]}

packages/react-component-library/src/components/Badge/constants.ts

@@ -4,6 +4,12 @@ const BADGE_COLOR = {
   NEUTRAL: 'neutral',
   SUCCESS: 'success',
   WARNING: 'warning',
+  SUPA: 'supa',
+  SUPB: 'supb',
+  SUPC: 'supc',
+  SUPD: 'supd',
+  SUPE: 'supe',
+  SUPF: 'supf',
 } as const
 
 const BADGE_COLOR_VARIANT = {