diff --git a/tokens/alias/color/index.json b/tokens/alias/color/index.json index a1cec92..d6ca1e8 100644 --- a/tokens/alias/color/index.json +++ b/tokens/alias/color/index.json @@ -306,6 +306,7 @@ }, "white": { "comment": "Alias for #FFF.", + "rgb": "255, 255, 255", "value": "#FFF" }, "yellow": { diff --git a/tokens/source/color/border.json b/tokens/source/color/border.json index 0fdf659..fb72524 100644 --- a/tokens/source/color/border.json +++ b/tokens/source/color/border.json @@ -45,6 +45,10 @@ "comment": "Border color for disabled elements (gray.20).", "value": "{color.alias.gray.20.value}" }, + "inverse": { + "comment": "Inverse border color (rgba(white, 0.2)).", + "value": "rgba({color.alias.white.rgb}, 0.2)" + }, "neutral": { "weak": { "comment": "Weak border color for neutral elements (gray.40)", diff --git a/tokens/source/color/text.json b/tokens/source/color/text.json index d1a627a..ac80b01 100644 --- a/tokens/source/color/text.json +++ b/tokens/source/color/text.json @@ -85,6 +85,10 @@ "strongest": { "comment": "Strongest text color for primary actions or messages (blue.90).", "value": "{color.alias.blue.90.value}" + }, + "weak": { + "comment": "Weak text color for primary actions or messages (blue.40).", + "value": "{color.alias.blue.40.value}" } }, "success": { diff --git a/tokens/source/components/navigation.json b/tokens/source/components/navigation.json index 82017f6..451784c 100644 --- a/tokens/source/components/navigation.json +++ b/tokens/source/components/navigation.json @@ -8,13 +8,13 @@ }, "selected": { "comment": "The background color of a selected navigation item.", - "value": "rgba(255, 255, 255, 0.12)" + "value": "rgba({color.alias.white.rgb}, 0.12)" } }, "border": { "_": { - "comment": "rgba(255, 255, 255, 0.12)", - "value": "rgba(255, 255, 255, 0.12)" + "comment": "rgba(white, 0.12)", + "value": "rgba({color.alias.white.rgb}, 0.12)" }, "child": { "comment": "The border color for a selected child navigation item.", @@ -22,7 +22,7 @@ }, "divider": { "comment": "The color of the navigation section divider.", - "value": "rgba(255, 255, 255, 0.24)" + "value": "rgba({color.alias.white.rgb}, 0.24)" } }, "text": { @@ -48,7 +48,7 @@ "border": { "_": { "comment": "The box-shadow for a focus-visible navigation link.", - "value": "0 0 0 1px rgba(255, 255, 255, 0.12) inset" + "value": "0 0 0 1px rgba({color.alias.white.rgb}, 0.12) inset" }, "child": { "comment": "The left box-shadow for an active child navigation link.", @@ -57,7 +57,7 @@ }, "focus": { "comment": "Navigation link focus-visible box-shadow.", - "value": "0 0 0 1px rgba(255, 255, 255, 0.60) inset" + "value": "0 0 0 1px rgba({color.alias.white.rgb}, 0.60) inset" } } }