style: use semantic focus-ring token across components (#2168)

pixelflips · web-flow · commit 24754233cc61 · 2026-02-23T09:09:15.000-08:00
* style: replace hardcoded purple-600 with focus-ring token

* style(breadcrumbs): add focus ring to progressbar variant
diff --git a/packages/sage-assets/lib/stylesheets/components/_alert.scss b/packages/sage-assets/lib/stylesheets/components/_alert.scss
@@ -196,7 +196,7 @@ $-alert-text-colors: (
     }
 
     &:focus-visible {
-      @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+      @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
     }
   }
 
@@ -224,7 +224,7 @@ $-alert-text-colors: (
     }
 
     &:focus-visible {
-      @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+      @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
     }
   }
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss b/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss
@@ -6,7 +6,7 @@
 
 $-breadcrumb-current-color: var(--pine-color-text);
 $-breadcrumb-interactive-color: var(--pine-color-text);
-$-breadcrumb-outline-color: var(--pine-color-purple-600);
+$-breadcrumb-outline-color: var(--pine-color-focus-ring);
 
 .sage-breadcrumbs {
   display: flex;
@@ -77,6 +77,7 @@ $-breadcrumb-outline-color: var(--pine-color-purple-600);
   .sage-breadcrumbs--progressbar & {
     position: relative;
     padding-block-end: sage-spacing(2xs);
+    @include sage-focus-ring($-breadcrumb-outline-color);
 
     &:active {
       color: $-breadcrumb-interactive-color;
diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss
@@ -51,7 +51,7 @@ $-btn-base-styles: (
       color: var(--pine-color-text-primary),
       background-color: var(--pine-color-primary),
       border-color: var(--pine-color-primary),
-      ring-color: var(--pine-color-purple-600),
+      ring-color: var(--pine-color-focus-ring),
     ),
     hover: (
       color: var(--pine-color-text-primary),
@@ -119,23 +119,23 @@ $-btn-subtle-styles: (
     hover: var(--pine-color-primary),
     hover-background: var(--pine-color-blue-150),
     focus: var(--pine-color-primary),
-    focus-outline: var(--pine-color-purple-600),
+    focus-outline: var(--pine-color-focus-ring),
     disabled: var(--pine-color-blue-300),
   ),
   primary: (
     default: var(--pine-color-text),
     hover: var(--pine-color-primary),
     hover-background: var(--pine-color-primary-disabled),
     focus: var(--pine-color-primary),
-    focus-outline: var(--pine-color-purple-600),
+    focus-outline: var(--pine-color-focus-ring),
     disabled: var(--pine-color-text-tertiary),
   ),
   secondary: (
     default: var(--pine-color-text),
     hover: var(--pine-color-primary),
     hover-background: var(--pine-color-primary-disabled),
     focus: var(--pine-color-primary),
-    focus-outline: var(--pine-color-purple-600),
+    focus-outline: var(--pine-color-focus-ring),
     disabled: var(--pine-color-text-tertiary),
   ),
   danger: (
diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss
@@ -70,7 +70,7 @@ $-choice-radio-color-checked-inner: sage-radio-color(checked-inner);
   }
 
   &:focus-visible {
-    border-color: var(--pine-color-purple-600);
+    border-color: var(--pine-color-focus-ring);
     outline: none;
   }
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
@@ -131,7 +131,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
   &:focus-within {
     outline: none;
 
-    @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+    @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
   }
 }
 
@@ -149,7 +149,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 
 .sage-dropdown__item--disabled {
   &:active {
-    @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+    @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
   }
 }
 
@@ -166,7 +166,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 .sage-dropdown__item-control {
   @include sage-button-style-reset();
   @include sage-focus-outline($outline-offset-inline: 4px, $outline-offset-block: -2px);
-  @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+  @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
 
   @extend %t-sage-body-med;
 
@@ -197,7 +197,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 
   &:focus-within {
     @include sage-focus-outline($outline-offset-inline: 4px, $outline-offset-block: -2px);
-    @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+    @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
 
     &::after {
       opacity: 1;
diff --git a/packages/sage-assets/lib/stylesheets/components/_hero.scss b/packages/sage-assets/lib/stylesheets/components/_hero.scss
@@ -142,7 +142,7 @@ $-hero-play-icon-background-color: var(--pine-color-background-container);
   @include sage-focus-ring;
 
   &:focus {
-    @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+    @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
   }
 }
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_link.scss b/packages/sage-assets/lib/stylesheets/components/_link.scss
@@ -77,7 +77,7 @@ $-link-base-styles: (
   &:focus-visible {
     color: var(--pine-color-primary);
 
-    @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+    @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
   }
 
   .sage-card--interactive & {
@@ -224,7 +224,7 @@ $-link-base-styles: (
     $outline-offset-block: 4px,
     $outline-border-radius: sage-border(radius-round),
   );
-  @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+  @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
 }
 
 .sage-link--remove-underline {
diff --git a/packages/sage-assets/lib/stylesheets/components/_media_tile.scss b/packages/sage-assets/lib/stylesheets/components/_media_tile.scss
@@ -86,7 +86,7 @@ $-media-tile-breakpoints: (
 
     &::after {
       border-width: rem(2px);
-      border-color: var(--pine-color-purple-600);
+      border-color: var(--pine-color-focus-ring);
     }
   }
 }
diff --git a/packages/sage-assets/lib/stylesheets/components/_nav.scss b/packages/sage-assets/lib/stylesheets/components/_nav.scss
@@ -36,7 +36,7 @@ $-nav-subitem-border-width: rem(2px);
     $outline-offset-block: -1,
     $outline-border-radius: sage-border(radius-medium),
   );
-  @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+  @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
 
   display: flex;
   align-items: center;
@@ -63,7 +63,7 @@ $-nav-subitem-border-width: rem(2px);
   @extend %t-sage-body-small-med;
 
   &.sage-nav__link--active {
-    @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+    @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
 
     background: $-nav-color-background;
   }
@@ -88,7 +88,7 @@ $-nav-subitem-border-width: rem(2px);
 
   &:not(.sage-nav__list--sub) {
     .sage-nav__link--active {
-      @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+      @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
     }
 
     .sage-nav__link--active::after {
diff --git a/packages/sage-assets/lib/stylesheets/components/_pagination.scss b/packages/sage-assets/lib/stylesheets/components/_pagination.scss
@@ -12,7 +12,7 @@ $-pagination-text-color: var(--pine-color-text);
 $-pagination-text-color-disabled: var(--pine-color-grey-600);
 $-pagination-bg-color-current: var(--pine-color-background-muted);
 $-pagination-bg-color-hover: var(--pine-color-border-disabled);
-$-pagination-focus-ring-color: var(--pine-color-purple-600);
+$-pagination-focus-ring-color: var(--pine-color-focus-ring);
 
 
 .sage-pagination {
diff --git a/packages/sage-assets/lib/stylesheets/components/_status_icon.scss b/packages/sage-assets/lib/stylesheets/components/_status_icon.scss
@@ -20,7 +20,7 @@
     $outline-offset-block: 4px,
     $outline-border-radius: sage-border(radius-round),
   );
-  @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+  @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
 
   &:hover:not(:focus):not(:active) {
     color: var(--pine-color-text);

Original file line number	Diff line number	Diff line change
`@@ -196,7 +196,7 @@ $-alert-text-colors: (`
`196`	`196`	`}`
`197`	`197`
`198`	`198`	`&:focus-visible {`
`199`		`- @include sage-focus-outline--update-color(var(--pine-color-purple-600));`
	`199`	`+ @include sage-focus-outline--update-color(var(--pine-color-focus-ring));`
`200`	`200`	`}`
`201`	`201`	`}`
`202`	`202`
`@@ -224,7 +224,7 @@ $-alert-text-colors: (`
`224`	`224`	`}`
`225`	`225`
`226`	`226`	`&:focus-visible {`
`227`		`- @include sage-focus-outline--update-color(var(--pine-color-purple-600));`
	`227`	`+ @include sage-focus-outline--update-color(var(--pine-color-focus-ring));`
`228`	`228`	`}`
`229`	`229`	`}`
`230`	`230`
Original file line number	Diff line number	Diff line change
`@@ -70,7 +70,7 @@ $-choice-radio-color-checked-inner: sage-radio-color(checked-inner);`
`70`	`70`	`}`
`71`	`71`
`72`	`72`	`&:focus-visible {`
`73`		`- border-color: var(--pine-color-purple-600);`
	`73`	`+ border-color: var(--pine-color-focus-ring);`
`74`	`74`	`outline: none;`
`75`	`75`	`}`
`76`	`76`
Original file line number	Diff line number	Diff line change
`@@ -142,7 +142,7 @@ $-hero-play-icon-background-color: var(--pine-color-background-container);`
`142`	`142`	`@include sage-focus-ring;`
`143`	`143`
`144`	`144`	`&:focus {`
`145`		`- @include sage-focus-outline--update-color(var(--pine-color-purple-600));`
	`145`	`+ @include sage-focus-outline--update-color(var(--pine-color-focus-ring));`
`146`	`146`	`}`
`147`	`147`	`}`
`148`	`148`
Original file line number	Diff line number	Diff line change
`@@ -77,7 +77,7 @@ $-link-base-styles: (`
`77`	`77`	`&:focus-visible {`
`78`	`78`	`color: var(--pine-color-primary);`
`79`	`79`
`80`		`- @include sage-focus-outline--update-color(var(--pine-color-purple-600));`
	`80`	`+ @include sage-focus-outline--update-color(var(--pine-color-focus-ring));`
`81`	`81`	`}`
`82`	`82`
`83`	`83`	`.sage-card--interactive & {`
`@@ -224,7 +224,7 @@ $-link-base-styles: (`
`224`	`224`	`$outline-offset-block: 4px,`
`225`	`225`	`$outline-border-radius: sage-border(radius-round),`
`226`	`226`	`);`
`227`		`- @include sage-focus-outline--update-color(var(--pine-color-purple-600));`
	`227`	`+ @include sage-focus-outline--update-color(var(--pine-color-focus-ring));`
`228`	`228`	`}`
`229`	`229`
`230`	`230`	`.sage-link--remove-underline {`
Original file line number	Diff line number	Diff line change
`@@ -86,7 +86,7 @@ $-media-tile-breakpoints: (`
`86`	`86`
`87`	`87`	`&::after {`
`88`	`88`	`border-width: rem(2px);`
`89`		`- border-color: var(--pine-color-purple-600);`
	`89`	`+ border-color: var(--pine-color-focus-ring);`
`90`	`90`	`}`
`91`	`91`	`}`
`92`	`92`	`}`