From 9637cc19d1274830f755b619e3ccf84c0579df00 Mon Sep 17 00:00:00 2001 From: Monica Wheeler Date: Thu, 21 Nov 2024 13:57:02 -0600 Subject: [PATCH] style(badge): rearrange badge preview and update styles --- .../components/badge/_preview.html.erb | 24 +++++++++---------- .../lib/stylesheets/components/_badge.scss | 12 +++------- .../lib/stylesheets/dictionary/_tokens.scss | 16 ++++++------- 3 files changed, 23 insertions(+), 29 deletions(-) diff --git a/docs/app/views/examples/components/badge/_preview.html.erb b/docs/app/views/examples/components/badge/_preview.html.erb index f4e12e1f10..c80192ae33 100644 --- a/docs/app/views/examples/components/badge/_preview.html.erb +++ b/docs/app/views/examples/components/badge/_preview.html.erb @@ -4,12 +4,12 @@

Demonstrates the use of the default badge with various color options.

<%= 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 @@

Illustrates a badge with an indicator dot.

<%= 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 @@

Shows how to create an interactive badge with dropdown functionality.

<%= 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 index ebefebadc2..e956de3f86 100644 --- 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 index f7a726fbb0..163bb79046 100644 --- 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,7 +2280,7 @@ $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 /// @@ -2288,7 +2288,7 @@ $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