style(badge): rearrange badge preview and update styles

Kajabi · Nov 21, 2024 · 9637cc1 · 9637cc1
1 parent 2cf8782
commit 9637cc1
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 29 deletions.
diff --git a/docs/app/views/examples/components/badge/_preview.html.erb b/docs/app/views/examples/components/badge/_preview.html.erb
@@ -4,12 +4,12 @@
 <p>Demonstrates the use of the default badge with various color options.</p>
 
 <%= sage_component SageLabelGroup, { gap: :md, spacer: { bottom: :sm }} do %>
-  <%= sage_component SageBadge, { color: "locked", value: "Accent" } %>
-  <%= sage_component SageBadge, { color: "danger", value: "Danger" } %>
-  <%= sage_component SageBadge, { color: "info", value: "Info" } %>
   <%= sage_component SageBadge, { color: "draft", value: "Neutral" } %>
+  <%= sage_component SageBadge, { color: "info", value: "Info" } %>
   <%= sage_component SageBadge, { color: "published", value: "Success" } %>
   <%= sage_component SageBadge, { color: "warning", value: "Warning" } %>
+  <%= sage_component SageBadge, { color: "danger", value: "Danger" } %>
+  <%= sage_component SageBadge, { color: "locked", value: "Accent" } %>
 <% end %>
 
 <%= sage_component SageDivider, {} %>
@@ -18,32 +18,32 @@
 <p>Illustrates a badge with an indicator dot.</p>
 
 <%= sage_component SageLabelGroup, { gap: :md, spacer: { bottom: :sm }} do %>
-  <%= sage_component SageBadge, { color: "locked", value: "Accent" } do %>
+  <%= sage_component SageBadge, { color: "draft", value: "Neutral" } do %>
     <% content_for :sage_badge_dot do %>
       <%= sage_component SageDot, { color: "primary" } %>
     <% end %>
   <% end %>
-  <%= sage_component SageBadge, { color: "danger", value: "Danger" } do %>
+  <%= sage_component SageBadge, { color: "info", value: "Info" } do %>
     <% content_for :sage_badge_dot do %>
       <%= sage_component SageDot, { color: "primary" } %>
     <% end %>
   <% end %>
-  <%= sage_component SageBadge, { color: "info", value: "Info" } do %>
+  <%= sage_component SageBadge, { color: "published", value: "Success" } do %>
     <% content_for :sage_badge_dot do %>
       <%= sage_component SageDot, { color: "primary" } %>
     <% end %>
   <% end %>
-  <%= sage_component SageBadge, { color: "draft", value: "Neutral" } do %>
+  <%= sage_component SageBadge, { color: "warning", value: "Warning" } do %>
     <% content_for :sage_badge_dot do %>
       <%= sage_component SageDot, { color: "primary" } %>
     <% end %>
   <% end %>
-  <%= sage_component SageBadge, { color: "published", value: "Success" } do %>
+  <%= sage_component SageBadge, { color: "danger", value: "Danger" } do %>
     <% content_for :sage_badge_dot do %>
       <%= sage_component SageDot, { color: "primary" } %>
     <% end %>
   <% end %>
-  <%= sage_component SageBadge, { color: "warning", value: "Warning" } do %>
+  <%= sage_component SageBadge, { color: "locked", value: "Accent" } do %>
     <% content_for :sage_badge_dot do %>
       <%= sage_component SageDot, { color: "primary" } %>
     <% end %>
@@ -56,12 +56,12 @@
 <p>Shows how to create an interactive badge with dropdown functionality.</p>
 
 <%= sage_component SageLabelGroup, { gap: :md, spacer: { bottom: :sm }} do %>
-  <%= sage_component SageBadge, { color: "locked", value: "Accent", interactive_type: :dropdown } %>
-  <%= sage_component SageBadge, { color: "danger", value: "Danger", interactive_type: :dropdown } %>
-  <%= sage_component SageBadge, { color: "info", value: "Info", interactive_type: :dropdown } %>
   <%= sage_component SageBadge, { color: "draft", value: "Neutral", interactive_type: :dropdown } %>
+  <%= sage_component SageBadge, { color: "info", value: "Info", interactive_type: :dropdown } %>
   <%= sage_component SageBadge, { color: "published", value: "Success", interactive_type: :dropdown } %>
   <%= sage_component SageBadge, { color: "warning", value: "Warning", interactive_type: :dropdown } %>
+  <%= sage_component SageBadge, { color: "danger", value: "Danger", interactive_type: :dropdown } %>
+  <%= sage_component SageBadge, { color: "locked", value: "Accent", interactive_type: :dropdown } %>
 <% end %>
 
 <%= sage_component SageDivider, {} %>

diff --git a/packages/sage-assets/lib/stylesheets/components/_badge.scss b/packages/sage-assets/lib/stylesheets/components/_badge.scss
@@ -8,7 +8,7 @@
 $-badge-min-height: rem(20px);
 $-badge-interactive-icon-size: rem(24px);
 $-badge-interactive-icon-size-decor: rem(28px);
-$-badge-padding: 1px rem(10px) 1px sage-spacing(xs);
+$-badge-padding: 1px sage-spacing(xs);
 $-badge-padding-lg: sage-spacing(2xs) rem(12px);
 $-badge-border-radius: sage-border(radius-x-large);
 $-badge-statuses: (
@@ -31,17 +31,11 @@ $-badge-statuses: (
   &[class*="sage-badge--icon-only"] {
     background-color: transparent;
   }
-
-  &:not(.sage-badge--large) {
-    .sage-badge__value-text {
-      letter-spacing: sage-letter-spacing(md);
-    }
-  }
 }
 
 .sage-badge__value {
   @extend %t-sage-body-med;
-
+  letter-spacing: sage-letter-spacing(md);
   appearance: none;
   display: flex;
   align-items: center;
@@ -65,7 +59,7 @@ $-badge-statuses: (
   }
 
   .sage-badge--large & {
-    @extend %t-sage-body-med;
+    @extend %t-sage-heading-6;
     padding: $-badge-padding-lg;
     font-family: $-heading-font;
 

diff --git a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss
@@ -60,7 +60,7 @@ $sd-sage-color-base-blue-200-classname: "t-sage--color-blue-200";
 ///
 /// color color-base-blue-300-hex
 ///
-$sd-sage-color-base-blue-300-hex: #92c5fd;
+$sd-sage-color-base-blue-300-hex: #93c5fd;
 ///
 /// color color-base-blue-300-code
 ///
@@ -468,7 +468,7 @@ $sd-sage-color-base-primary-100-classname: "t-sage--color-primary-100";
 ///
 /// color color-base-primary-200-hex
 ///
-$sd-sage-color-base-primary-200-hex: #92c5fd;
+$sd-sage-color-base-primary-200-hex: #93c5fd;
 ///
 /// color color-base-primary-200-code
 ///
@@ -2028,7 +2028,7 @@ $sd-sage-color-combos-draft-default-foreground-accent: #1a1a19;
 ///
 /// color combos color-combos-draft-default-background
 ///
-$sd-sage-color-combos-draft-default-background: #e4e4e4;
+$sd-sage-color-combos-draft-default-background: #f0f0f0;
 ///
 /// color combos color-combos-draft-default-background-accent
 ///
@@ -2112,7 +2112,7 @@ $sd-sage-color-combos-info-default-background: #dbe9fe;
 ///
 /// color combos color-combos-info-default-background-accent
 ///
-$sd-sage-color-combos-info-default-background-accent: #92c5fd;
+$sd-sage-color-combos-info-default-background-accent: #93c5fd;
 ///
 /// color combos color-combos-info-default-icon-background-accent
 ///
@@ -2128,7 +2128,7 @@ $sd-sage-color-combos-info-subtle-foreground-accent: #2463eb;
 ///
 /// color combos color-combos-info-subtle-background
 ///
-$sd-sage-color-combos-info-subtle-background: #92c5fd;
+$sd-sage-color-combos-info-subtle-background: #93c5fd;
 ///
 /// color combos color-combos-info-bold-foreground
 ///
@@ -2268,7 +2268,7 @@ $sd-sage-color-combos-primary-default-foreground-accent: #fff;
 ///
 /// color combos color-combos-primary-default-background
 ///
-$sd-sage-color-combos-primary-default-background: #92c5fd;
+$sd-sage-color-combos-primary-default-background: #93c5fd;
 ///
 /// color combos color-combos-primary-subtle-foreground
 ///
@@ -2280,15 +2280,15 @@ $sd-sage-color-combos-primary-subtle-foreground-accent: #fff;
 ///
 /// color combos color-combos-primary-subtle-background
 ///
-$sd-sage-color-combos-primary-subtle-background: #92c5fd;
+$sd-sage-color-combos-primary-subtle-background: #93c5fd;
 ///
 /// color combos color-combos-primary-bold-foreground
 ///
 $sd-sage-color-combos-primary-bold-foreground: #fff;
 ///
 /// color combos color-combos-primary-bold-background
 ///
-$sd-sage-color-combos-primary-bold-background: #92c5fd;
+$sd-sage-color-combos-primary-bold-background: #93c5fd;
 
 ///
 /// Map for color combos