diff --git a/design-tokens/tokens/component/dark.json b/design-tokens/tokens/component/dark.json index fa6e8d69..137e93a3 100644 --- a/design-tokens/tokens/component/dark.json +++ b/design-tokens/tokens/component/dark.json @@ -56,6 +56,52 @@ } } }, + "issue-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 37cbf757..16ea5646 100644 --- a/design-tokens/tokens/component/light.json +++ b/design-tokens/tokens/component/light.json @@ -56,6 +56,34 @@ } } }, + "issue-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 9eb833d0..f9c89c5e 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-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 a20d52d5..093939ac 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-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 eafe0188..7c988ece 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-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 1cc3cd93..cb57f0ba 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('issue-location-marker-colors-background-default')).toBe( + 'var(--echoes-issue-location-marker-colors-background-default)', + ); }); it('should handle complex fallback values', () => {