ROU-12877: Fix Badge and IconBadge color tokens

specs/plan.md

@@ -817,6 +817,7 @@ Each sub-phase is independently shippable. The architecture means components can
 | D25 | Phase 14 — `--os-color-background-footer` | ✅ Added alongside `--os-color-background-body/header/sidemenu/login` in the Surface group. New surface area — no prior var, no call-site sweep. Default `$token-bg-surface-default`. |
 | D26 | Phase 14 — `--os-color-background-sidemenu` | ✅ Added alongside sibling surface vars. New surface area — no sweep. Default `$token-bg-surface-default`. |
 | D27 | Phase 14 — focus outer / inner as bridge vars | ❌ **Excluded.** Consumers sweep directly to `$token-primitives-yellow-500` (focus-outer, `#ffd600` — closest yellow primitive, replacing legacy `#ffd337`) and `$token-text-default` (focus-inner). Dark-theme contrast preserved by the pre-existing `--token-text-default: neutral-100` override in `_theme-dark.scss:49`, which makes the formerly needed `--os-color-focus-inner` dark-theme override redundant. No dedicated focus-outer token exists today (`$token-border-focus-default` is a light blue for input focus rings, not the outer yellow highlight); `$token-semantics-warning-500` resolves to the same `#ffd600` but carries wrong semantics for focus. |
+| D28 | Extended palette base/lightest → component bg tokens (Badge alignment) | ✅ In `$osui-colors-extended`, the `''` (base) and `'lightest'` shades bind to component bg tokens per the Figma Badge spec: families without a `bg-extended-*` token map to the matching semantic (`red`→`danger`, `green`→`success`, `blue`→`info`, `yellow`→`warning`); `cyan`/`grape` stay on primitives (`aqua-900/100`, `purple-800/100`) since the legacy Color foundations page was ruled stale in favor of the Badge node's token bindings. Intermediate shades (`lighter`/`light`/`dark`/`darker`/`darkest`) keep their primitives — no component token exists for them. Side effect (accepted): `.text-{color}` and border utilities generated from the same map now read bg-token values for those two shades. |
 
 ---
 

src/scss/00-abstract/_setup-global-vars.scss

@@ -85,108 +85,112 @@ $osui-colors-semantic:
 	'info-light' $token-semantics-info-100,
 	'info' $token-semantics-info-base;
 
-// Extended palette — 12 families × 7 shades. Each OSUI shade binds to the
-// closest-ranked token primitive (lightest→100, lighter→300, light→500,
-// base→700, dark→800, darker→900, darkest→1000).
+// Extended palette — 12 families × 7 shades. The '' (base) and 'lightest'
+// shades bind to component bg tokens per the Figma Badge spec: families with
+// a bg-extended-* token use it, and families without one map to the matching
+// semantic (red→danger, green→success, blue→info, yellow→warning). The five
+// intermediate shades keep their closest-ranked primitives (no component
+// token exists for them).
 // `grape` key preserved for backward-compat utility class names, but binds
 // to `$token-primitives-purple-*` per token package naming (see D6).
-// `cyan` has no token equivalent; bound to closest `teal` primitives.
+// `cyan` binds to `aqua` primitives on base/lightest (per Figma) and to the
+// closest `teal` primitives on the intermediate shades.
 $osui-colors-extended: 'red'
 		(
-			'lightest' $token-primitives-red-100,
+			'lightest' $token-bg-danger-subtle-default,
 			'lighter' $token-primitives-red-300,
 			'light' $token-primitives-red-500,
-			'' $token-primitives-red-700,
+			'' $token-bg-danger-base-default,
 			'dark' $token-primitives-red-800,
 			'darker' $token-primitives-red-900,
 			'darkest' $token-primitives-red-1000
 		),
 	'orange'
 		(
-			'lightest' $token-primitives-orange-100,
+			'lightest' $token-bg-extended-orange-subtle-default,
 			'lighter' $token-primitives-orange-300,
 			'light' $token-primitives-orange-500,
-			'' $token-primitives-orange-700,
+			'' $token-bg-extended-orange-base-default,
 			'dark' $token-primitives-orange-800,
 			'darker' $token-primitives-orange-900,
 			'darkest' $token-primitives-orange-1000
 		),
 	'yellow'
 		(
-			'lightest' $token-primitives-yellow-100,
+			'lightest' $token-bg-warning-subtle-default,
 			'lighter' $token-primitives-yellow-300,
 			'light' $token-primitives-yellow-500,
-			'' $token-primitives-yellow-700,
+			'' $token-bg-warning-base-default,
 			'dark' $token-primitives-yellow-800,
 			'darker' $token-primitives-yellow-900,
 			'darkest' $token-primitives-yellow-1000
 		),
 	'lime'
 		(
-			'lightest' $token-primitives-lime-100,
+			'lightest' $token-bg-extended-lime-subtle-default,
 			'lighter' $token-primitives-lime-300,
 			'light' $token-primitives-lime-500,
-			'' $token-primitives-lime-700,
+			'' $token-bg-extended-lime-base-default,
 			'dark' $token-primitives-lime-800,
 			'darker' $token-primitives-lime-900,
 			'darkest' $token-primitives-lime-1000
 		),
 	'green'
 		(
-			'lightest' $token-primitives-green-100,
+			'lightest' $token-bg-success-subtle-default,
 			'lighter' $token-primitives-green-300,
 			'light' $token-primitives-green-500,
-			'' $token-primitives-green-700,
+			'' $token-bg-success-base-default,
 			'dark' $token-primitives-green-800,
 			'darker' $token-primitives-green-900,
 			'darkest' $token-primitives-green-1000
 		),
 	'teal'
 		(
-			'lightest' $token-primitives-teal-100,
+			'lightest' $token-bg-extended-teal-subtle-default,
 			'lighter' $token-primitives-teal-300,
 			'light' $token-primitives-teal-500,
-			'' $token-primitives-teal-700,
+			'' $token-bg-extended-teal-base-default,
 			'dark' $token-primitives-teal-800,
 			'darker' $token-primitives-teal-900,
 			'darkest' $token-primitives-teal-1000
 		),
 	'cyan'
 		(
-			'lightest' $token-primitives-teal-100,
+			'lightest' $token-primitives-aqua-100,
 			'lighter' $token-primitives-teal-300,
 			'light' $token-primitives-teal-500,
-			'' $token-primitives-teal-700,
+			'' $token-primitives-aqua-900,
 			'dark' $token-primitives-teal-800,
 			'darker' $token-primitives-teal-900,
 			'darkest' $token-primitives-teal-1000
 		),
 	'blue'
 		(
-			'lightest' $token-primitives-blue-100,
+			'lightest' $token-bg-info-subtle-default,
 			'lighter' $token-primitives-blue-300,
 			'light' $token-primitives-blue-500,
-			'' $token-primitives-blue-700,
+			'' $token-bg-info-base-default,
 			'dark' $token-primitives-blue-800,
 			'darker' $token-primitives-blue-900,
 			'darkest' $token-primitives-blue-1000
 		),
 	'indigo'
 		(
-			'lightest' $token-primitives-indigo-100,
+			'lightest' $token-bg-extended-indigo-subtle-default,
 			'lighter' $token-primitives-indigo-300,
 			'light' $token-primitives-indigo-500,
-			'' $token-primitives-indigo-700,
+			'' $token-bg-extended-indigo-base-default,
 			'dark' $token-primitives-indigo-800,
 			'darker' $token-primitives-indigo-900,
 			'darkest' $token-primitives-indigo-1000
 		),
 	'violet'
 		(
-			'lightest' $token-primitives-violet-100,
+			'lightest' $token-bg-extended-violet-subtle-default,
 			'lighter' $token-primitives-violet-300,
 			'light' $token-primitives-violet-500,
-			'' $token-primitives-violet-700,
+			'' $token-bg-extended-violet-base-default,
 			'dark' $token-primitives-violet-800,
 			'darker' $token-primitives-violet-900,
 			'darkest' $token-primitives-violet-1000
@@ -196,17 +200,17 @@ $osui-colors-extended: 'red'
 			'lightest' $token-primitives-purple-100,
 			'lighter' $token-primitives-purple-300,
 			'light' $token-primitives-purple-500,
-			'' $token-primitives-purple-700,
+			'' $token-primitives-purple-800,
 			'dark' $token-primitives-purple-800,
 			'darker' $token-primitives-purple-900,
 			'darkest' $token-primitives-purple-1000
 		),
 	'pink'
 		(
-			'lightest' $token-primitives-pink-100,
+			'lightest' $token-bg-extended-pink-subtle-default,
 			'lighter' $token-primitives-pink-300,
 			'light' $token-primitives-pink-500,
-			'' $token-primitives-pink-700,
+			'' $token-bg-extended-pink-base-default,
 			'dark' $token-primitives-pink-800,
 			'darker' $token-primitives-pink-900,
 			'darkest' $token-primitives-pink-1000

src/scss/01-foundations/_root.scss

@@ -40,7 +40,7 @@
 	--color-primary-hover: #{$token-semantics-primary-800};
 	--color-primary-selected: #{$token-semantics-primary-900}; // translucent-wash role for selected rows/items; apps override this
 	--color-primary-active: #{$token-semantics-primary-900}; // solid pressed/active-state role — do not alias to -selected above
-	--color-secondary: #303d60;
+	--color-secondary: #{$token-bg-neutral-bold-default};
 	--color-neutral: #{$token-primitives-neutral-500};
 	--color-neutral-0: #{$token-primitives-neutral-100};
 	--color-neutral-1: #{$token-primitives-neutral-200};

src/scss/04-patterns/05-numbers/_badge.scss

@@ -3,11 +3,30 @@
 /// @group Patterns-Badge
 /// Patterns - Numbers - Badge
 
+// Per-family IsLight=true text colors, per the Figma Badge spec: families
+// mapped to a semantic read the semantic text token, token-backed extended
+// families read text-extended-*, and cyan/grape read the primitives matching
+// their background family (no text token exists for them).
+$osui-badge-lightest-text-colors: (
+	'red': $token-text-danger,
+	'orange': $token-text-extended-orange,
+	'yellow': $token-text-warning,
+	'lime': $token-text-extended-lime,
+	'green': $token-text-success,
+	'teal': $token-text-extended-teal,
+	'cyan': $token-primitives-aqua-900,
+	'blue': $token-text-info,
+	'indigo': $token-text-extended-indigo,
+	'violet': $token-text-extended-violet,
+	'grape': $token-primitives-purple-900,
+	'pink': $token-text-extended-pink,
+);
+
 ///
 .badge {
 	// ─── Component CSS API ─────────────────────────────────────────────
 	--osui-badge-color: var(--color-text-inverse);
-	--osui-badge-primary-color: var(--color-primary);
+	--osui-badge-primary-color: #{$token-text-primary};
 	--osui-badge-on-light-color: var(--color-text);
 	// ───────────────────────────────────────────────────────────────────
 
@@ -23,56 +42,85 @@
 
 	&.background {
 		&-neutral {
-			&-0 {
-				color: var(--osui-badge-primary-color);
-			}
-
+			&-0,
 			&-1,
 			&-2,
 			&-3,
-			&-4 {
-				color: var(--osui-badge-on-light-color);
+			&-4,
+			&-5 {
+				background-color: $token-bg-neutral-base-default;
+				color: $token-text-default;
+			}
+
+			&-6,
+			&-7,
+			&-8,
+			&-9,
+			&-10 {
+				background-color: $token-bg-neutral-bold-default;
+				color: $token-text-inverse;
+			}
+
+			&-0-lightest,
+			&-1-lightest,
+			&-2-lightest,
+			&-3-lightest,
+			&-4-lightest,
+			&-5-lightest {
+				background-color: $token-bg-neutral-subtle-default;
+				color: $token-text-subtle;
+			}
+
+			&-6-lightest,
+			&-7-lightest,
+			&-8-lightest,
+			&-9-lightest,
+			&-10-lightest {
+				background-color: $token-bg-neutral-base-default;
+				color: $token-text-default;
 			}
 		}
 
-		&-transparent {
-			color: var(--osui-badge-primary-color);
+		// Warning backgrounds are light enough to need dark text (Figma).
+		&-warning,
+		&-yellow {
+			color: var(--osui-badge-on-light-color);
 		}
 
-		&-primary-lightest {
-			background-color: $token-semantics-primary-100;
+		&-transparent {
+			color: var(--osui-badge-primary-color);
 		}
 	}
 
-	// IsLight=true renders `background-{color}-lightest`. Brand and neutral light
-	// variants invert their text to the dark on-light color for readability —
-	// palette colors keep their own darker text via the `text-{color}-darker` class.
+	// IsLight=true renders `background-{color}-lightest`. Text switches to the
+	// per-family text token (semantic families use text-{semantic}; extended
+	// families use text-extended-{family} via $osui-badge-lightest-text-colors).
 	// Backgrounds come from the `background-*-lightest` utility classes (subtle tokens).
 
 	// Semantic colors (primary, danger, success, info, warning)
 	&.background-primary-lightest {
 		background-color: #{$token-bg-primary-subtle-default};
-		color: var(--osui-badge-on-light-color);
+		color: $token-text-primary;
 	}
 
 	&.background-danger-lightest {
 		background-color: #{$token-bg-danger-subtle-default};
-		color: var(--osui-badge-on-light-color);
+		color: $token-text-danger;
 	}
 
 	&.background-success-lightest {
 		background-color: #{$token-bg-success-subtle-default};
-		color: var(--osui-badge-on-light-color);
+		color: $token-text-success;
 	}
 
 	&.background-info-lightest {
 		background-color: #{$token-bg-info-subtle-default};
-		color: var(--osui-badge-on-light-color);
+		color: $token-text-info;
 	}
 
 	&.background-warning-lightest {
 		background-color: #{$token-bg-warning-subtle-default};
-		color: var(--osui-badge-on-light-color);
+		color: $token-text-warning;
 	}
 
 	&.background-secondary-lightest {
@@ -81,25 +129,21 @@
 	}
 
 	&.background-transparent-lightest {
-		color: var(--osui-badge-primary-color);
+		color: $token-text-inverse;
 	}
 
 	// Extended palette colors (red, orange, yellow, etc.)
 	@each $color, $variations in $osui-colors-extended {
-		$base-color: null;
 		$lightest-value: null;
 		@each $type, $value in $variations {
-			@if ($type == '') {
-				$base-color: $value;
-			}
 			@if ($type == 'lightest') {
 				$lightest-value: $value;
 			}
 		}
-		@if ($lightest-value != null and $base-color != null) {
+		@if ($lightest-value != null) {
 			&.background-#{$color}-lightest {
 				background-color: #{$lightest-value};
-				color: #{$base-color};
+				color: #{map-get($osui-badge-lightest-text-colors, $color)};
 			}
 		}
 	}

src/scss/04-patterns/05-numbers/_icon-badge.scss

@@ -6,7 +6,8 @@
 ///
 .icon-badge {
 	// ─── Component CSS API ─────────────────────────────────────────────
-	--osui-icon-badge-ring-color: var(--color-background-surface);
+	--osui-icon-badge-ring-color: #{$token-border-subtlest};
+	--osui-icon-badge-shadow: 0 0 0 1px var(--osui-icon-badge-ring-color);
 	// ───────────────────────────────────────────────────────────────────
 
 	display: inline-block;
@@ -20,7 +21,7 @@
 
 		align-items: center;
 		border-radius: var(--border-radius-rounded);
-		box-shadow: 0 0 0 2px var(--osui-icon-badge-ring-color);
+		box-shadow: var(--osui-icon-badge-shadow);
 		display: inline-flex;
 		font-size: var(--osui-font-size-200);
 		font-weight: $token-font-weight-bold;

src/scss/05-useful/_colors-brand.scss

@@ -6,15 +6,15 @@
 ///
 .background {
 	&-primary {
-		background-color: $token-semantics-primary-base;
+		background-color: var(--color-primary);
 
 		&-lightest {
-			background-color: $token-bg-surface-default;
+			background-color: $token-bg-surface-default; // TODO review need to theme layer variable for lightest
 		}
 	}
 
 	&-secondary {
-		background-color: #303d60;
+		background-color: var(--color-secondary);
 
 		&-lightest {
 			background-color: $token-bg-surface-default;
@@ -34,7 +34,7 @@
 	&-secondary {
 		&,
 		&-darker {
-			color: #303d60;
+			color: var(--color-text-subtle)
 		}
 	}
 }