From c663d87c2ee2f78a5530bb80678e2bfabdfafee0 Mon Sep 17 00:00:00 2001 From: amelia-adam-sonarsource Date: Sun, 2 Aug 2026 13:05:25 -0500 Subject: [PATCH 1/2] ECHOES-397 Add location marker semantic tokens --- design-tokens/tokens/component/dark.json | 46 +++++++++++++++++++++++ design-tokens/tokens/component/light.json | 28 ++++++++++++++ src/generated/design-tokens-dark.css | 5 +++ src/generated/design-tokens-light.css | 5 +++ src/generated/design-tokens-themed.json | 5 +++ src/utils/__tests__/design-tokens-test.ts | 3 ++ 6 files changed, 92 insertions(+) diff --git a/design-tokens/tokens/component/dark.json b/design-tokens/tokens/component/dark.json index fa6e8d69a..2aed1dfa3 100644 --- a/design-tokens/tokens/component/dark.json +++ b/design-tokens/tokens/component/dark.json @@ -56,6 +56,52 @@ } } }, + "location-marker": { + "colors": { + "background": { + "default": { + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.35", + "space": "lch" + } + } + }, + "$type": "color", + "$value": "{echoes.color.palette.red.400}" + }, + "hover": { + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.65", + "space": "lch" + } + } + }, + "$type": "color", + "$value": "{echoes.color.palette.red.400}" + }, + "selected": { + "$type": "color", + "$value": "{echoes.color.palette.red.200}" + } + }, + "foreground": { + "default": { + "$type": "color", + "$value": "{echoes.color.palette.red.200}" + }, + "selected": { + "$type": "color", + "$value": "{echoes.color.palette.red.700}" + } + } + } + }, "margin-indicator": { "colors": { "background": { diff --git a/design-tokens/tokens/component/light.json b/design-tokens/tokens/component/light.json index 37cbf757f..670eac2c6 100644 --- a/design-tokens/tokens/component/light.json +++ b/design-tokens/tokens/component/light.json @@ -56,6 +56,34 @@ } } }, + "location-marker": { + "colors": { + "background": { + "default": { + "$type": "color", + "$value": "{echoes.color.palette.red.200}" + }, + "hover": { + "$type": "color", + "$value": "{echoes.color.palette.red.300}" + }, + "selected": { + "$type": "color", + "$value": "{echoes.color.palette.red.600}" + } + }, + "foreground": { + "default": { + "$type": "color", + "$value": "{echoes.color.palette.red.700}" + }, + "selected": { + "$type": "color", + "$value": "{echoes.color.palette.red.100}" + } + } + } + }, "margin-indicator": { "colors": { "background": { diff --git a/src/generated/design-tokens-dark.css b/src/generated/design-tokens-dark.css index 9eb833d09..739eb5051 100644 --- a/src/generated/design-tokens-dark.css +++ b/src/generated/design-tokens-dark.css @@ -189,6 +189,11 @@ html[data-echoes-theme='dark'], [data-echoes-theme='dark'] { --echoes-logos-colors-text: #ffffff; --echoes-logos-colors-brand: #ffffff; --echoes-logos-colors-sonar-whale: #d3121d; + --echoes-location-marker-colors-background-default: #f9706659; + --echoes-location-marker-colors-background-hover: #f97066a6; + --echoes-location-marker-colors-background-selected: #fecdca; + --echoes-location-marker-colors-foreground-default: #fecdca; + --echoes-location-marker-colors-foreground-selected: #b42318; --echoes-margin-indicator-colors-background-duplication: #a6adc2; --echoes-margin-indicator-colors-background-covered: #d4f2b7; --echoes-margin-indicator-colors-background-partially-covered: #fadc79; diff --git a/src/generated/design-tokens-light.css b/src/generated/design-tokens-light.css index a20d52d56..d67b73888 100644 --- a/src/generated/design-tokens-light.css +++ b/src/generated/design-tokens-light.css @@ -189,6 +189,11 @@ --echoes-logos-colors-text: #290042; --echoes-logos-colors-brand: #126ed3; --echoes-logos-colors-sonar-whale: #d3121d; + --echoes-location-marker-colors-background-default: #fecdca; + --echoes-location-marker-colors-background-hover: #fda29b; + --echoes-location-marker-colors-background-selected: #d92d20; + --echoes-location-marker-colors-foreground-default: #b42318; + --echoes-location-marker-colors-foreground-selected: #fee4e2; --echoes-margin-indicator-colors-background-duplication: #c5cddf; --echoes-margin-indicator-colors-background-covered: #75a92c; --echoes-margin-indicator-colors-background-partially-covered: #ae7a29; diff --git a/src/generated/design-tokens-themed.json b/src/generated/design-tokens-themed.json index eafe01885..2abd04cf3 100644 --- a/src/generated/design-tokens-themed.json +++ b/src/generated/design-tokens-themed.json @@ -167,6 +167,11 @@ "echoes-logos-colors-text": "#290042", "echoes-logos-colors-brand": "#126ed3", "echoes-logos-colors-sonar-whale": "#d3121d", + "echoes-location-marker-colors-background-default": "#fecdca", + "echoes-location-marker-colors-background-hover": "#fda29b", + "echoes-location-marker-colors-background-selected": "#d92d20", + "echoes-location-marker-colors-foreground-default": "#b42318", + "echoes-location-marker-colors-foreground-selected": "#fee4e2", "echoes-margin-indicator-colors-background-duplication": "#c5cddf", "echoes-margin-indicator-colors-background-covered": "#75a92c", "echoes-margin-indicator-colors-background-partially-covered": "#ae7a29", diff --git a/src/utils/__tests__/design-tokens-test.ts b/src/utils/__tests__/design-tokens-test.ts index 1cc3cd936..4acf6babf 100644 --- a/src/utils/__tests__/design-tokens-test.ts +++ b/src/utils/__tests__/design-tokens-test.ts @@ -38,6 +38,9 @@ describe('cssVar utility', () => { ); expect(cssVar(FONT_TOKEN)).toBe('var(--echoes-font-family-sans)'); expect(cssVar('border-radius-100')).toBe('var(--echoes-border-radius-100)'); + expect(cssVar('location-marker-colors-background-default')).toBe( + 'var(--echoes-location-marker-colors-background-default)', + ); }); it('should handle complex fallback values', () => { From 7c8696e4016b8af48c8ede2dbc5672a39ca98954 Mon Sep 17 00:00:00 2001 From: amelia-adam-sonarsource Date: Sun, 2 Aug 2026 13:06:53 -0500 Subject: [PATCH 2/2] ECHOES-397 Rename location marker tokens --- design-tokens/tokens/component/dark.json | 2 +- design-tokens/tokens/component/light.json | 2 +- src/generated/design-tokens-dark.css | 10 +++++----- src/generated/design-tokens-light.css | 10 +++++----- src/generated/design-tokens-themed.json | 10 +++++----- src/utils/__tests__/design-tokens-test.ts | 4 ++-- 6 files changed, 19 insertions(+), 19 deletions(-) diff --git a/design-tokens/tokens/component/dark.json b/design-tokens/tokens/component/dark.json index 2aed1dfa3..137e93a37 100644 --- a/design-tokens/tokens/component/dark.json +++ b/design-tokens/tokens/component/dark.json @@ -56,7 +56,7 @@ } } }, - "location-marker": { + "issue-location-marker": { "colors": { "background": { "default": { diff --git a/design-tokens/tokens/component/light.json b/design-tokens/tokens/component/light.json index 670eac2c6..16ea56468 100644 --- a/design-tokens/tokens/component/light.json +++ b/design-tokens/tokens/component/light.json @@ -56,7 +56,7 @@ } } }, - "location-marker": { + "issue-location-marker": { "colors": { "background": { "default": { diff --git a/src/generated/design-tokens-dark.css b/src/generated/design-tokens-dark.css index 739eb5051..f9c89c5e6 100644 --- a/src/generated/design-tokens-dark.css +++ b/src/generated/design-tokens-dark.css @@ -189,11 +189,11 @@ html[data-echoes-theme='dark'], [data-echoes-theme='dark'] { --echoes-logos-colors-text: #ffffff; --echoes-logos-colors-brand: #ffffff; --echoes-logos-colors-sonar-whale: #d3121d; - --echoes-location-marker-colors-background-default: #f9706659; - --echoes-location-marker-colors-background-hover: #f97066a6; - --echoes-location-marker-colors-background-selected: #fecdca; - --echoes-location-marker-colors-foreground-default: #fecdca; - --echoes-location-marker-colors-foreground-selected: #b42318; + --echoes-issue-location-marker-colors-background-default: #f9706659; + --echoes-issue-location-marker-colors-background-hover: #f97066a6; + --echoes-issue-location-marker-colors-background-selected: #fecdca; + --echoes-issue-location-marker-colors-foreground-default: #fecdca; + --echoes-issue-location-marker-colors-foreground-selected: #b42318; --echoes-margin-indicator-colors-background-duplication: #a6adc2; --echoes-margin-indicator-colors-background-covered: #d4f2b7; --echoes-margin-indicator-colors-background-partially-covered: #fadc79; diff --git a/src/generated/design-tokens-light.css b/src/generated/design-tokens-light.css index d67b73888..093939acd 100644 --- a/src/generated/design-tokens-light.css +++ b/src/generated/design-tokens-light.css @@ -189,11 +189,11 @@ --echoes-logos-colors-text: #290042; --echoes-logos-colors-brand: #126ed3; --echoes-logos-colors-sonar-whale: #d3121d; - --echoes-location-marker-colors-background-default: #fecdca; - --echoes-location-marker-colors-background-hover: #fda29b; - --echoes-location-marker-colors-background-selected: #d92d20; - --echoes-location-marker-colors-foreground-default: #b42318; - --echoes-location-marker-colors-foreground-selected: #fee4e2; + --echoes-issue-location-marker-colors-background-default: #fecdca; + --echoes-issue-location-marker-colors-background-hover: #fda29b; + --echoes-issue-location-marker-colors-background-selected: #d92d20; + --echoes-issue-location-marker-colors-foreground-default: #b42318; + --echoes-issue-location-marker-colors-foreground-selected: #fee4e2; --echoes-margin-indicator-colors-background-duplication: #c5cddf; --echoes-margin-indicator-colors-background-covered: #75a92c; --echoes-margin-indicator-colors-background-partially-covered: #ae7a29; diff --git a/src/generated/design-tokens-themed.json b/src/generated/design-tokens-themed.json index 2abd04cf3..7c988ece8 100644 --- a/src/generated/design-tokens-themed.json +++ b/src/generated/design-tokens-themed.json @@ -167,11 +167,11 @@ "echoes-logos-colors-text": "#290042", "echoes-logos-colors-brand": "#126ed3", "echoes-logos-colors-sonar-whale": "#d3121d", - "echoes-location-marker-colors-background-default": "#fecdca", - "echoes-location-marker-colors-background-hover": "#fda29b", - "echoes-location-marker-colors-background-selected": "#d92d20", - "echoes-location-marker-colors-foreground-default": "#b42318", - "echoes-location-marker-colors-foreground-selected": "#fee4e2", + "echoes-issue-location-marker-colors-background-default": "#fecdca", + "echoes-issue-location-marker-colors-background-hover": "#fda29b", + "echoes-issue-location-marker-colors-background-selected": "#d92d20", + "echoes-issue-location-marker-colors-foreground-default": "#b42318", + "echoes-issue-location-marker-colors-foreground-selected": "#fee4e2", "echoes-margin-indicator-colors-background-duplication": "#c5cddf", "echoes-margin-indicator-colors-background-covered": "#75a92c", "echoes-margin-indicator-colors-background-partially-covered": "#ae7a29", diff --git a/src/utils/__tests__/design-tokens-test.ts b/src/utils/__tests__/design-tokens-test.ts index 4acf6babf..cb57f0bad 100644 --- a/src/utils/__tests__/design-tokens-test.ts +++ b/src/utils/__tests__/design-tokens-test.ts @@ -38,8 +38,8 @@ describe('cssVar utility', () => { ); expect(cssVar(FONT_TOKEN)).toBe('var(--echoes-font-family-sans)'); expect(cssVar('border-radius-100')).toBe('var(--echoes-border-radius-100)'); - expect(cssVar('location-marker-colors-background-default')).toBe( - 'var(--echoes-location-marker-colors-background-default)', + expect(cssVar('issue-location-marker-colors-background-default')).toBe( + 'var(--echoes-issue-location-marker-colors-background-default)', ); });