From 011d4a67d765e8fc1fe68daffeb9c6ffb3c0ca95 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Fri, 28 Aug 2026 14:20:55 +0200 Subject: [PATCH 1/8] [d3-chart] update styles for legend and tooltip --- semcore/d3-chart/src/Dots.jsx | 4 +-- .../LegendFlex/legend-flex.shadow.css | 4 +-- .../LegendItem/legend-item.shadow.css | 18 +++++------ .../LegendTable/legend-table.shadow.css | 4 +-- .../src/style/abstract-chart.shadow.css | 2 +- semcore/d3-chart/src/style/dot.shadow.css | 7 ++++- semcore/d3-chart/src/style/line.shadow.css | 2 +- semcore/d3-chart/src/style/tooltip.shadow.css | 27 +++++++++++------ tools/theme/src/theme.ts | 9 ++++++ .../style/design-tokens/design-tokens.json | 30 ++++++++++++++++--- 10 files changed, 76 insertions(+), 31 deletions(-) diff --git a/semcore/d3-chart/src/Dots.jsx b/semcore/d3-chart/src/Dots.jsx index 45cb3ef953..fda729d3d1 100644 --- a/semcore/d3-chart/src/Dots.jsx +++ b/semcore/d3-chart/src/Dots.jsx @@ -23,7 +23,7 @@ function Dots(props) { scale, duration = 500, transparent, - radius: radiusBase = 4, + radius: radiusBase = 3, resolveColor, patterns, onClick, @@ -97,7 +97,7 @@ function Dots(props) { typeof display === 'function' ? display(i, i === activeIndex, !isPrev && !isNext) : display || i === activeIndex || (!isPrev && !isNext); - const radius = radiusBase * (active ? 5 / 4 : 1); + const radius = radiusBase * (active ? 4 / 3 : 1); if (!d3.defined()(d)) return acc; if (!visible) return acc; diff --git a/semcore/d3-chart/src/component/ChartLegend/LegendFlex/legend-flex.shadow.css b/semcore/d3-chart/src/component/ChartLegend/LegendFlex/legend-flex.shadow.css index 7e981a8a7a..f62bebd282 100644 --- a/semcore/d3-chart/src/component/ChartLegend/LegendFlex/legend-flex.shadow.css +++ b/semcore/d3-chart/src/component/ChartLegend/LegendFlex/legend-flex.shadow.css @@ -2,11 +2,11 @@ SLegendFlex[direction='row'] { align-items: flex-start; align-content: flex-start; flex-wrap: wrap; - gap: 8px 16px; + gap: var(--intergalactic-spacing-content-gap-large, 8px) var(--intergalactic-spacing-content-gap-xxlarge, 16px); } SLegendFlex[direction='column'] { align-items: flex-start; flex-wrap: wrap; - gap: 8px; + gap: var(--intergalactic-spacing-content-gap-large, 8px); } diff --git a/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css b/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css index 47bf705c45..9eebd442d0 100644 --- a/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css +++ b/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css @@ -13,7 +13,7 @@ SLegendItem[disabled]:hover { SPointShape[color] { background-color: var(--color); - margin-right: 8px; + margin-right: var(--intergalactic-spacing-content-gap-large, 8px); flex-shrink: 0; } @@ -21,14 +21,14 @@ SPointShape[shape='Circle'][size='l'] { width: 16px; height: 16px; border-radius: 8px; - margin-top: 4px; + margin-top: var(--intergalactic-spacing-content-gap-small, 4px); } SPointShape[shape='Circle'][size='m'] { width: 12px; height: 12px; border-radius: 6px; - margin-top: 4px; + margin-top: var(--intergalactic-spacing-content-gap-small, 4px); } SPointShape[shape='Line'][size='l'] { @@ -61,20 +61,20 @@ SPointShape[shape='Square'][size='m'] { SPointShape[shape='Pattern'] { background-color: transparent; - margin-right: 4px; + margin-right: var(--intergalactic-spacing-content-gap-small, 4px); } SIcon { line-height: 0; - margin-right: 4px; + margin-right: var(--intergalactic-spacing-content-gap-small, 4px); } SIcon[size='l'] { - margin-top: 4px; + margin-top: var(--intergalactic-spacing-content-gap-small, 4px); } SIcon[size='m'] { - margin-top: 2px; + margin-top: var(--intergalactic-spacing-content-gap-xsmall, 2px); } SLabel { @@ -97,7 +97,7 @@ SCount[size='m'] { SAdditionalLabel, SCount { - margin-left: 4px; + margin-left: var(--intergalactic-spacing-content-gap-small, 4px); } SAdditionalLabel { @@ -113,7 +113,7 @@ SAdditionalLabel::before { height: 4px; width: 4px; border-radius: 2px; - margin-right: 4px; + margin-right: var(--intergalactic-spacing-content-gap-small, 4px); } SAdditionalLabel[size='l']::before { diff --git a/semcore/d3-chart/src/component/ChartLegend/LegendTable/legend-table.shadow.css b/semcore/d3-chart/src/component/ChartLegend/LegendTable/legend-table.shadow.css index 0dc37cee29..e1c660ebdb 100644 --- a/semcore/d3-chart/src/component/ChartLegend/LegendTable/legend-table.shadow.css +++ b/semcore/d3-chart/src/component/ChartLegend/LegendTable/legend-table.shadow.css @@ -4,8 +4,8 @@ SLegendTable[columns-count] { grid-template-columns: auto 0.2fr; align-items: center; height: fit-content; - grid-column-gap: 16px; - grid-row-gap: 8px; + grid-column-gap: var(--intergalactic-spacing-content-gap-large, 8px); + grid-row-gap: var(--intergalactic-spacing-content-gap-large, 8px); } SColumnItem[size='l'] { diff --git a/semcore/d3-chart/src/style/abstract-chart.shadow.css b/semcore/d3-chart/src/style/abstract-chart.shadow.css index 124b8494cb..f743ccee04 100644 --- a/semcore/d3-chart/src/style/abstract-chart.shadow.css +++ b/semcore/d3-chart/src/style/abstract-chart.shadow.css @@ -7,7 +7,7 @@ SChart { STooltipChildrenWrapper { display: grid; - column-gap: var(--intergalactic-spacing-2x, 8px); + column-gap: var(--intergalactic-spacing-content-gap-large, 8px); &[columnsCount='2'] { grid-template-columns: auto minmax(28px, max-content); diff --git a/semcore/d3-chart/src/style/dot.shadow.css b/semcore/d3-chart/src/style/dot.shadow.css index b18b4d76f2..1cb05295f4 100644 --- a/semcore/d3-chart/src/style/dot.shadow.css +++ b/semcore/d3-chart/src/style/dot.shadow.css @@ -10,10 +10,15 @@ SDot { stroke-width: 1px; stroke: var(--intergalactic-chart-grid-border, #ffffff); fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140)); - transition-property: cx, cy, x, y; + transition-property: cx, cy, x, y, filter; transition-timing-function: ease-in-out; } +SDot[active] { + box-shadow: var(--intergalactic-box-shadow-chart-dot-elevated, 0px 0px 1px 0px oklch(0.176 0.033 175.7 / 0.07), 0px 1px 3px 0px oklch(0.176 0.033 175.7 / 0.07)); + filter: drop-shadow(0px 0px 1px oklch(0.176 0.033 175.7 / 0.07)) drop-shadow(0px 1px 3px oklch(0.176 0.033 175.7 / 0.07)); +} + SDot[hide] { display: none; } diff --git a/semcore/d3-chart/src/style/line.shadow.css b/semcore/d3-chart/src/style/line.shadow.css index cc291b4b45..143f801827 100644 --- a/semcore/d3-chart/src/style/line.shadow.css +++ b/semcore/d3-chart/src/style/line.shadow.css @@ -2,7 +2,7 @@ SLine { fill: transparent; - stroke-width: 3; + stroke-width: 2; stroke: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140)); transition-property: d; transition-duration: var(--duration); diff --git a/semcore/d3-chart/src/style/tooltip.shadow.css b/semcore/d3-chart/src/style/tooltip.shadow.css index 0e5dc23996..ea339617eb 100644 --- a/semcore/d3-chart/src/style/tooltip.shadow.css +++ b/semcore/d3-chart/src/style/tooltip.shadow.css @@ -3,27 +3,34 @@ STooltip { font-size: var(--intergalactic-fs-100, 12px); line-height: var(--intergalactic-lh-100, 133%); + font-variant-numeric: tabular-nums; position: relative; - background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); + color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + background-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140)); border-radius: var(--intergalactic-popper-rounded, 6px); - border: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); + border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.35 0.006 140)); box-sizing: border-box; box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.176 0.033 175.7 / 0.07)); - padding: var(--intergalactic-spacing-3x, 12px); + padding: var(--intergalactic-spacing-content-padding-medium, 12px); } STitle { - color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583)); - margin-bottom: var(--intergalactic-spacing-2x, 8px); + color: var(--intergalactic-text-secondary-invert, oklch(0.997 0.004 165.9 / 0.684)); + margin-bottom: var(--intergalactic-spacing-content-gap-large, 8px); } SDotGroup { display: flex; align-items: center; + margin-bottom: var(--intergalactic-spacing-content-gap-large, 8px); +} + +SDotGroup:last-of-type { + margin-bottom: 0; } SDot { - margin-right: var(--intergalactic-spacing-2x, 8px); + margin-right: var(--intergalactic-spacing-content-gap-large, 8px); } SDotCircle[color] { @@ -31,12 +38,14 @@ SDotCircle[color] { width: 8px; height: 8px; border-radius: 50%; + border: 1px solid var(--intergalactic-chart-grid-border, #ffffff); } SFooter { - background: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180)); - padding: var(--intergalactic-spacing-1x, 4px) var(--intergalactic-spacing-3x, 12px); + background: var(--intergalactic-bg-secondary-invert, oklch(0.969 0.057 140 / 0.118)); + color: var(--intergalactic-text-secondary-invert, oklch(0.997 0.004 165.9 / 0.684)); + padding: var(--intergalactic-spacing-content-padding-xsmall, 4px) var(--intergalactic-spacing-content-padding-medium, 12px); border-radius: 0 0 var(--intergalactic-rounded-medium, 6px) var(--intergalactic-rounded-medium, 6px); - margin: var(--intergalactic-spacing-3x, 12px) calc(-1 * var(--intergalactic-spacing-3x, 12px)) calc(-1 * var(--intergalactic-spacing-3x, 12px)); + margin: var(--intergalactic-spacing-content-gap-xlarge, 12px) calc(-1 * var(--intergalactic-spacing-content-gap-xlarge, 12px)) calc(-1 * var(--intergalactic-spacing-content-gap-xlarge, 12px)); } \ No newline at end of file diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index efa843eec2..7fc4441ecd 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -2005,6 +2005,10 @@ export const theme: Theme = { value: `3px 3px 10px 0px ${neutral.opaqueAt(L_BORDER_SECONDARY)}`, description: 'Hover state for the shadow of the Card with hover state.', }, + box_shadow_chart_dot_elevated: { + value: `0px 0px 2px 0px ${neutral.opaqueAt(L_BORDER_PRIMARY)}, 0px 1px 2px 0px ${neutral.opaqueAt(L_BORDER_PRIMARY)}`, + description: 'Shadow of the elevated chart dot.', + }, box_shadow_control_elevated: { value: `0px 0px 1px 0px ${neutral.opaqueAt(L_BORDER_SECONDARY)}, 0px 1px 3px 0px ${neutral.opaqueAt(L_BORDER_SECONDARY)}`, description: 'Shadow of the Switch toggle.', @@ -3447,6 +3451,11 @@ type SemanticShadows = { DEFAULT: Value; hover: Value; }; + chart: { + dot: { + elevated: Value; + }; + }; control: { elevated: Value; }; diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index e63ea7640c..80c604faed 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -357,7 +357,6 @@ "components": [ "accordion", "bulk-textarea", - "d3-chart", "drag-and-drop", "input", "notice", @@ -384,7 +383,9 @@ "name": "--intergalactic-bg-secondary-invert", "value": "oklch(0.969 0.057 140 / 0.118)", "description": "Inverted version of the secondary background of the interface which contains the main data and information.", - "components": [] + "components": [ + "d3-chart" + ] }, { "name": "--intergalactic-bg-secondary-success", @@ -3017,6 +3018,7 @@ "value": "oklch(0.999 0.001 180 / 0.949)", "description": "Inverted version of the primary text.", "components": [ + "d3-chart", "date-picker", "feature-highlight", "notice-bubble" @@ -3049,7 +3051,9 @@ "name": "--intergalactic-text-secondary-invert", "value": "oklch(0.997 0.004 165.9 / 0.684)", "description": "Inverted version of the secondary text.", - "components": [] + "components": [ + "d3-chart" + ] }, { "name": "--intergalactic-text-success", @@ -3077,6 +3081,7 @@ "description": "Inverted version of the default Tooltip background.", "components": [ "base-components", + "d3-chart", "tooltip" ] }, @@ -3094,6 +3099,7 @@ "description": "Border of the Tooltip with dark theme.", "components": [ "base-components", + "d3-chart", "tooltip" ] }, @@ -3208,6 +3214,14 @@ "description": "Hover state for the shadow of the Card with hover state.", "components": [] }, + { + "name": "--intergalactic-box-shadow-chart-dot-elevated", + "value": "0px 0px 1px 0px oklch(0.176 0.033 175.7 / 0.07), 0px 1px 3px 0px oklch(0.176 0.033 175.7 / 0.07)", + "description": "Shadow of the elevated chart dot.", + "components": [ + "d3-chart" + ] + }, { "name": "--intergalactic-box-shadow-control-elevated", "value": "0px 0px 1px 0px oklch(0.176 0.033 175.7 / 0.07), 0px 1px 3px 0px oklch(0.176 0.033 175.7 / 0.07)", @@ -3344,6 +3358,7 @@ "base-components", "bulk-textarea", "counter", + "d3-chart", "dropdown", "dropdown-menu", "input-tags", @@ -3384,6 +3399,7 @@ "bulk-textarea", "button", "card", + "d3-chart", "dropdown", "fullscreen-modal", "input", @@ -3443,7 +3459,9 @@ "name": "--intergalactic-spacing-content-gap-xsmall", "value": "2px", "description": "Extra small gap between content elements inside controls, rows, or columns.", - "components": [] + "components": [ + "d3-chart" + ] }, { "name": "--intergalactic-spacing-content-gap-small", @@ -3452,6 +3470,7 @@ "components": [ "base-trigger", "bulk-textarea", + "d3-chart", "date-picker", "dropdown-menu", "inline-input", @@ -3487,6 +3506,7 @@ "breadcrumbs", "button", "checkbox", + "d3-chart", "date-picker", "dropdown", "fullscreen-modal", @@ -3502,6 +3522,7 @@ "value": "12px", "description": "Extra large gap between elements, rows, or columns.", "components": [ + "d3-chart", "fullscreen-modal", "notice-bubble", "pagination" @@ -3512,6 +3533,7 @@ "value": "16px", "description": "2x large gap between elements, rows, or columns.", "components": [ + "d3-chart", "pagination", "tab-line" ] From 651a6caedd9b2a82a10d124bb539f4ff01eb8d89 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Fri, 28 Aug 2026 17:14:09 +0200 Subject: [PATCH 2/8] [d3-chart] update value for invert tooltip border --- .../src/components/hint/style/hint.shadow.css | 2 +- semcore/d3-chart/src/style/dot.shadow.css | 2 +- semcore/d3-chart/src/style/tooltip.shadow.css | 2 +- semcore/tag/src/style/tag.shadow.css | 2 +- semcore/tooltip/src/style/tooltip.shadow.css | 4 ++-- tools/theme/src/colors/index.ts | 2 +- tools/theme/src/theme.ts | 9 +++++++-- .../docs/style/design-tokens/base-tokens.json | 2 +- .../docs/style/design-tokens/design-tokens.json | 16 +++++++++++----- 9 files changed, 26 insertions(+), 15 deletions(-) diff --git a/semcore/base-components/src/components/hint/style/hint.shadow.css b/semcore/base-components/src/components/hint/style/hint.shadow.css index 63c65c796f..2824a37f7d 100644 --- a/semcore/base-components/src/components/hint/style/hint.shadow.css +++ b/semcore/base-components/src/components/hint/style/hint.shadow.css @@ -9,7 +9,7 @@ SHintPopper { pointer-events: none; background: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140)); - border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.35 0.006 140)); + border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.4 0.004 140)); color: var(--intergalactic-tooltip-text-invert, oklch(0.999 0.001 180 / 0.949)); padding: var(--intergalactic-spacing-content-padding-xsmall, 4px) var(--intergalactic-spacing-content-padding-small, 8px); border-radius: var(--intergalactic-rounded-small, 4px); diff --git a/semcore/d3-chart/src/style/dot.shadow.css b/semcore/d3-chart/src/style/dot.shadow.css index 1cb05295f4..32599fe724 100644 --- a/semcore/d3-chart/src/style/dot.shadow.css +++ b/semcore/d3-chart/src/style/dot.shadow.css @@ -15,7 +15,7 @@ SDot { } SDot[active] { - box-shadow: var(--intergalactic-box-shadow-chart-dot-elevated, 0px 0px 1px 0px oklch(0.176 0.033 175.7 / 0.07), 0px 1px 3px 0px oklch(0.176 0.033 175.7 / 0.07)); + box-shadow: var(--intergalactic-box-shadow-chart-dot-elevated, 0px 0px 2px 0px oklch(0.137 0.026 175.7 / 0.161), 0px 1px 2px 0px oklch(0.137 0.026 175.7 / 0.161)); filter: drop-shadow(0px 0px 1px oklch(0.176 0.033 175.7 / 0.07)) drop-shadow(0px 1px 3px oklch(0.176 0.033 175.7 / 0.07)); } diff --git a/semcore/d3-chart/src/style/tooltip.shadow.css b/semcore/d3-chart/src/style/tooltip.shadow.css index ea339617eb..2d86f0dda2 100644 --- a/semcore/d3-chart/src/style/tooltip.shadow.css +++ b/semcore/d3-chart/src/style/tooltip.shadow.css @@ -8,7 +8,7 @@ STooltip { color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); background-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140)); border-radius: var(--intergalactic-popper-rounded, 6px); - border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.35 0.006 140)); + border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.4 0.004 140)); box-sizing: border-box; box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.176 0.033 175.7 / 0.07)); padding: var(--intergalactic-spacing-content-padding-medium, 12px); diff --git a/semcore/tag/src/style/tag.shadow.css b/semcore/tag/src/style/tag.shadow.css index 4c8c8541d5..1b45776c0e 100644 --- a/semcore/tag/src/style/tag.shadow.css +++ b/semcore/tag/src/style/tag.shadow.css @@ -220,7 +220,7 @@ STag[theme="secondary-invert"], STagContainerClose[theme="secondary-invert"] { background-color: var(--intergalactic-tag-secondary-bg-invert-normal, transparent); color: var(--intergalactic-tag-secondary-text-invert, oklch(0.997 0.004 165.9 / 0.684)); - border-color: var(--intergalactic-tag-secondary-border-invert, oklch(0.989 0.019 140 / 0.232)); + border-color: var(--intergalactic-tag-secondary-border-invert, oklch(0.994 0.011 140 / 0.283)); &::before, &::after { diff --git a/semcore/tooltip/src/style/tooltip.shadow.css b/semcore/tooltip/src/style/tooltip.shadow.css index ae1b7b9452..1fc83a56d7 100644 --- a/semcore/tooltip/src/style/tooltip.shadow.css +++ b/semcore/tooltip/src/style/tooltip.shadow.css @@ -22,7 +22,7 @@ STooltip { STooltip[theme='invert'] { color: var(--intergalactic-tooltip-text-invert, oklch(0.999 0.001 180 / 0.949)); background-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140)); - border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.35 0.006 140)); + border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.4 0.004 140)); } STooltip[theme='warning'] { @@ -52,7 +52,7 @@ SArrow { } SArrow[theme='invert'] { - border-color: var(--intergalactic-tooltip-border-invert, oklch(0.35 0.006 140)); + border-color: var(--intergalactic-tooltip-border-invert, oklch(0.4 0.004 140)); &::before { border-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140)); diff --git a/tools/theme/src/colors/index.ts b/tools/theme/src/colors/index.ts index 4f114cfada..5765ec7e39 100644 --- a/tools/theme/src/colors/index.ts +++ b/tools/theme/src/colors/index.ts @@ -280,4 +280,4 @@ export const L_INV_ICON_SECONDARY = 0.45; /** Border primary | ⚠️ APCA 15+ on secondary bg */ export const L_INV_BORDER_PRIMARY = 0.46; // inputs, buttons, spin /** Border secondary */ -export const L_INV_BORDER_SECONDARY = 0.35; +export const L_INV_BORDER_SECONDARY = 0.4; diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index 7fc4441ecd..89e4b2c483 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -735,9 +735,9 @@ export const theme: Theme = { chart_palette_order_8: { value: colors.mint['200'].value, description: '8 color in the default list of colors for charts.', - }, // stopped here + }, chart_palette_order_9: { - value: colors.blue['400'].value, + value: colors.blue['500'].value, description: '9 color in the default list of colors for charts.', }, chart_palette_order_10: { @@ -820,6 +820,10 @@ export const theme: Theme = { value: neutral.opaqueAt(L_BG_LIGHT), description: 'Background color for the clickable date on the X-axis of the chart grid.', }, + chart_x_axis_accent_tick: { + value: neutral.at(L_BG_SECONDARY_ACTIVE), + description: 'Background color for the accent tick on the X-axis.', + }, control_checkbox_bg_normal: { value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', description: 'Background color of the Checkbox.', @@ -3337,6 +3341,7 @@ type SemanticColors = { x: { axis: { accent: { + tick: Value; period: { active: Value; }; diff --git a/website/docs/style/design-tokens/base-tokens.json b/website/docs/style/design-tokens/base-tokens.json index 735ea754a7..b2e477697e 100644 --- a/website/docs/style/design-tokens/base-tokens.json +++ b/website/docs/style/design-tokens/base-tokens.json @@ -877,7 +877,7 @@ }, { "name": "--intergalactic-border-tooltip-invert", - "value": "oklch(0.35 0.006 140)" + "value": "oklch(0.4 0.004 140)" }, { "name": "--intergalactic-border-table-accent", diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 80c604faed..3a1d315ed2 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -539,7 +539,7 @@ }, { "name": "--intergalactic-border-secondary-invert", - "value": "oklch(0.989 0.019 140 / 0.232)", + "value": "oklch(0.994 0.011 140 / 0.283)", "description": "Inverted version of the neutral secondary border. Use it for borders on the dark or color background.", "components": [] }, @@ -796,7 +796,7 @@ }, { "name": "--intergalactic-chart-palette-order-9", - "value": "oklch(0.58 0.168 278.2)", + "value": "oklch(0.53 0.157 279.2)", "description": "9 color in the default list of colors for charts.", "components": [ "d3-chart" @@ -924,6 +924,12 @@ "description": "Background color for the clickable date on the X-axis of the chart grid.", "components": [] }, + { + "name": "--intergalactic-chart-x-axis-accent-tick", + "value": "oklch(0.96 0.001 180)", + "description": "Background color for the accent tick on the X-axis.", + "components": [] + }, { "name": "--intergalactic-control-checkbox-bg-normal", "value": "oklch(1 0 0)", @@ -2733,7 +2739,7 @@ }, { "name": "--intergalactic-tag-secondary-border-invert", - "value": "oklch(0.989 0.019 140 / 0.232)", + "value": "oklch(0.994 0.011 140 / 0.283)", "description": "Inverted border color of the secondary Tag.", "components": [ "tag" @@ -3095,7 +3101,7 @@ }, { "name": "--intergalactic-tooltip-border-invert", - "value": "oklch(0.35 0.006 140)", + "value": "oklch(0.4 0.004 140)", "description": "Border of the Tooltip with dark theme.", "components": [ "base-components", @@ -3216,7 +3222,7 @@ }, { "name": "--intergalactic-box-shadow-chart-dot-elevated", - "value": "0px 0px 1px 0px oklch(0.176 0.033 175.7 / 0.07), 0px 1px 3px 0px oklch(0.176 0.033 175.7 / 0.07)", + "value": "0px 0px 2px 0px oklch(0.137 0.026 175.7 / 0.161), 0px 1px 2px 0px oklch(0.137 0.026 175.7 / 0.161)", "description": "Shadow of the elevated chart dot.", "components": [ "d3-chart" From b7cee65631e4a1ce69f11ebc72a6158366faff02 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Mon, 31 Aug 2026 19:07:51 +0200 Subject: [PATCH 3/8] [d3-chart] update legend item sizes --- .../ChartLegend/LegendItem/legend-item.shadow.css | 7 ++++--- semcore/d3-chart/src/style/tooltip.shadow.css | 6 +++--- .../d3-chart/docs/examples/d3-chart/tooltip-control.tsx | 6 +++--- tools/theme/src/theme.ts | 2 +- website/docs/style/design-tokens/design-tokens.json | 3 ++- 5 files changed, 13 insertions(+), 11 deletions(-) diff --git a/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css b/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css index 9eebd442d0..979cf92a1d 100644 --- a/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css +++ b/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css @@ -13,7 +13,7 @@ SLegendItem[disabled]:hover { SPointShape[color] { background-color: var(--color); - margin-right: var(--intergalactic-spacing-content-gap-large, 8px); + margin-right: var(--intergalactic-spacing-content-gap-medium, 6px); flex-shrink: 0; } @@ -31,7 +31,8 @@ SPointShape[shape='Circle'][size='m'] { margin-top: var(--intergalactic-spacing-content-gap-small, 4px); } -SPointShape[shape='Line'][size='l'] { +/* TODO: Remove */ +/* SPointShape[shape='Line'][size='l'] { width: 16px; height: 4px; border-radius: 3px; @@ -57,7 +58,7 @@ SPointShape[shape='Square'][size='m'] { height: 12px; border-radius: 2px; margin-top: 4px; -} +} */ SPointShape[shape='Pattern'] { background-color: transparent; diff --git a/semcore/d3-chart/src/style/tooltip.shadow.css b/semcore/d3-chart/src/style/tooltip.shadow.css index 2d86f0dda2..576ac23422 100644 --- a/semcore/d3-chart/src/style/tooltip.shadow.css +++ b/semcore/d3-chart/src/style/tooltip.shadow.css @@ -35,10 +35,10 @@ SDot { SDotCircle[color] { background-color: var(--color); - width: 8px; - height: 8px; + width: 10px; + height: 10px; border-radius: 50%; - border: 1px solid var(--intergalactic-chart-grid-border, #ffffff); + box-shadow: 0 0 0 1px oklch(from var(--color) calc(l + 0.2) c h); } diff --git a/stories/components/d3-chart/docs/examples/d3-chart/tooltip-control.tsx b/stories/components/d3-chart/docs/examples/d3-chart/tooltip-control.tsx index d8a330f786..99a4557539 100644 --- a/stories/components/d3-chart/docs/examples/d3-chart/tooltip-control.tsx +++ b/stories/components/d3-chart/docs/examples/d3-chart/tooltip-control.tsx @@ -69,9 +69,6 @@ const Demo = () => { })} - - - {({ xIndex }) => { return { @@ -96,6 +93,9 @@ const Demo = () => { }; }} + + + ); }; diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index 89e4b2c483..ea050b2344 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -661,7 +661,7 @@ export const theme: Theme = { description: 'Critical data color for charts.', }, chart_data_success: { - value: colors.salad['200'].value, + value: colors.green['200'].value, description: 'Success data color for charts.', }, chart_data_warning: { diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 3a1d315ed2..18cc6e9e8c 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -657,7 +657,7 @@ }, { "name": "--intergalactic-chart-data-success", - "value": "oklch(0.82 0.19 143)", + "value": "oklch(0.82 0.15 170)", "description": "Success data color for charts.", "components": [] }, @@ -3494,6 +3494,7 @@ "base-trigger", "button", "checkbox", + "d3-chart", "dropdown", "dropdown-menu", "input", From c0f4d1d3d421adc7390612cf048739e798ee33da Mon Sep 17 00:00:00 2001 From: Slizhevsky Vladislav Date: Tue, 1 Sep 2026 15:00:19 +0200 Subject: [PATCH 4/8] [UIK-5830][d3-chart] add legend item highlight state/removed line and square shapes for LegendItem --- .../src/component/Chart/AbstractChart.tsx | 19 ++++++++++--------- .../src/component/Chart/AreaChart.tsx | 6 +++--- .../d3-chart/src/component/Chart/BarChart.tsx | 6 +++--- .../src/component/Chart/CigaretteChart.tsx | 4 ++-- .../src/component/Chart/DonutChart.tsx | 4 ++-- .../src/component/Chart/HistogramChart.tsx | 4 ++-- .../src/component/Chart/LineChart.tsx | 4 ++-- .../src/component/Chart/VennChart.tsx | 4 ++-- .../src/component/ChartLegend/BaseLegend.tsx | 8 ++++++-- .../ChartLegend/LegendItem/LegendItem.type.ts | 4 +++- .../LegendItem/legend-item.shadow.css | 4 ++++ .../d3-chart/src/style/scatterplot.shadow.css | 2 +- .../style/design-tokens/design-tokens.json | 6 +++--- 13 files changed, 43 insertions(+), 32 deletions(-) diff --git a/semcore/d3-chart/src/component/Chart/AbstractChart.tsx b/semcore/d3-chart/src/component/Chart/AbstractChart.tsx index 89013cfc6d..e1a6c482b0 100644 --- a/semcore/d3-chart/src/component/Chart/AbstractChart.tsx +++ b/semcore/d3-chart/src/component/Chart/AbstractChart.tsx @@ -25,7 +25,7 @@ import type { LegendTableProps } from '../ChartLegend/LegendTable/LegendTable.ty export type ChartState = { dataDefinitions: Array; - highlightedLine: number; + highlightedItem: number; withTrend: boolean; plotWidth: number; @@ -65,7 +65,7 @@ export abstract class AbstractChart< this.observer = new ResizeObserver(this.handleResize); } - this.setHighlightedLine = this.setHighlightedLine.bind(this); + this.setHighlightedItem = this.setHighlightedItem.bind(this); this.handleChangeVisible = this.handleChangeVisible.bind(this); this.handleMouseEnter = this.handleMouseEnter.bind(this); this.handleMouseLeave = this.handleMouseLeave.bind(this); @@ -75,7 +75,7 @@ export abstract class AbstractChart< this.state = { dataDefinitions: this.getDefaultDataDefinitions(), - highlightedLine: -1, + highlightedItem: -1, withTrend: false, plotWidth: 0, plotHeight: 0, @@ -329,8 +329,8 @@ export abstract class AbstractChart< return valueScale; } - protected setHighlightedLine(index: number) { - this.setState({ highlightedLine: index }); + protected setHighlightedItem(index: number) { + this.setState({ highlightedItem: index }); } protected handleChangeVisible(id: string, isVisible: boolean) { @@ -352,11 +352,11 @@ export abstract class AbstractChart< } protected handleMouseEnter(id: string) { - this.setHighlightedLine(this.state.dataDefinitions.findIndex((line) => line.id === id)); + this.setHighlightedItem(this.state.dataDefinitions.findIndex((line) => line.id === id)); } protected handleMouseLeave() { - this.setHighlightedLine(-1); + this.setHighlightedItem(-1); } protected resolveColor(id: string, index: number) { @@ -404,13 +404,14 @@ export abstract class AbstractChart< return null; } - const { dataDefinitions, withTrend } = this.state; + const { dataDefinitions, withTrend, highlightedItem } = this.state; const lProps = { ...this.defaultLegendProps(), ...legendProps, }; - const commonLegendProps: LegendFlexProps | LegendTableProps = { + const commonLegendProps: (LegendFlexProps | LegendTableProps) & { highlightedItem: State['highlightedItem'] } = { + highlightedItem, 'dataHints': this.dataHints, 'items': dataDefinitions, 'size': lProps.size, diff --git a/semcore/d3-chart/src/component/Chart/AreaChart.tsx b/semcore/d3-chart/src/component/Chart/AreaChart.tsx index 2c9a0203c0..2064f54957 100644 --- a/semcore/d3-chart/src/component/Chart/AreaChart.tsx +++ b/semcore/d3-chart/src/component/Chart/AreaChart.tsx @@ -67,7 +67,7 @@ class AreaChartComponent extends AbstractChart< renderChart() { const { groupKey, curve, showDots, stacked, onClickArea } = this.asProps; - const { dataDefinitions, highlightedLine } = this.state; + const { dataDefinitions, highlightedItem } = this.state; if (stacked) { return ( @@ -80,7 +80,7 @@ class AreaChartComponent extends AbstractChart< y={item.id} key={item.id} color={item.color} - transparent={highlightedLine !== -1 && highlightedLine !== index} + transparent={highlightedItem !== -1 && highlightedItem !== index} curve={curve} onClick={onClickArea} > @@ -101,7 +101,7 @@ class AreaChartComponent extends AbstractChart< y={item.id} key={item.id} color={item.color} - transparent={highlightedLine !== -1 && highlightedLine !== index} + transparent={highlightedItem !== -1 && highlightedItem !== index} curve={curve} onClick={onClickArea} > diff --git a/semcore/d3-chart/src/component/Chart/BarChart.tsx b/semcore/d3-chart/src/component/Chart/BarChart.tsx index aa8e761a11..f360aaa717 100644 --- a/semcore/d3-chart/src/component/Chart/BarChart.tsx +++ b/semcore/d3-chart/src/component/Chart/BarChart.tsx @@ -85,7 +85,7 @@ class BarChartComponent extends AbstractChart< renderChart() { const { groupKey, type = 'group', invertAxis } = this.asProps; - const { dataDefinitions, highlightedLine } = this.state; + const { dataDefinitions, highlightedItem } = this.state; if (dataDefinitions.length === 1) { const item = dataDefinitions[0]; @@ -116,7 +116,7 @@ class BarChartComponent extends AbstractChart< const commonBarComponentProps: BarProps = { color: item.color, - transparent: highlightedLine !== -1 && highlightedLine !== index, + transparent: highlightedItem !== -1 && highlightedItem !== index, onClick: this.handleClickBar, }; @@ -143,7 +143,7 @@ class BarChartComponent extends AbstractChart< const commonBarComponentProps: BarProps = { color: item.color, - transparent: highlightedLine !== -1 && highlightedLine !== index, + transparent: highlightedItem !== -1 && highlightedItem !== index, onClick: this.handleClickBar, }; diff --git a/semcore/d3-chart/src/component/Chart/CigaretteChart.tsx b/semcore/d3-chart/src/component/Chart/CigaretteChart.tsx index 00cc8d1124..a6318d3d88 100644 --- a/semcore/d3-chart/src/component/Chart/CigaretteChart.tsx +++ b/semcore/d3-chart/src/component/Chart/CigaretteChart.tsx @@ -230,7 +230,7 @@ class CigaretteChartComponent extends AbstractChart< renderChart() { const { invertAxis, data, uid, duration, patterns, onClick } = this.asProps; - const { dataDefinitions, highlightedLine } = this.state; + const { dataDefinitions, highlightedItem } = this.state; const { plotWidth, plotHeight } = this; this.offset = 0; @@ -277,7 +277,7 @@ class CigaretteChartComponent extends AbstractChart< direction={invertAxis ? 'horizontal' : 'vertical'} onClick={onClick} hovered={ - highlightedLine === index ? true : highlightedLine === -1 ? undefined : false + highlightedItem === index ? true : highlightedItem === -1 ? undefined : false } /> ); diff --git a/semcore/d3-chart/src/component/Chart/DonutChart.tsx b/semcore/d3-chart/src/component/Chart/DonutChart.tsx index 4cbf344fce..eb0f8d5f88 100644 --- a/semcore/d3-chart/src/component/Chart/DonutChart.tsx +++ b/semcore/d3-chart/src/component/Chart/DonutChart.tsx @@ -59,7 +59,7 @@ class DonutChartComponent extends AbstractChart< renderChart() { const { innerRadius, halfsize, innerLabel, onClickPie } = this.asProps; - const { dataDefinitions, highlightedLine } = this.state; + const { dataDefinitions, highlightedItem } = this.state; const checkedLegendItems = dataDefinitions.filter((item) => item.checked); @@ -73,7 +73,7 @@ class DonutChartComponent extends AbstractChart< dataKey={item.id} name={item.label} color={item.color} - active={highlightedLine === index} + active={highlightedItem === index} /> ); })} diff --git a/semcore/d3-chart/src/component/Chart/HistogramChart.tsx b/semcore/d3-chart/src/component/Chart/HistogramChart.tsx index 7bcdaf5ec6..a94285d7b6 100644 --- a/semcore/d3-chart/src/component/Chart/HistogramChart.tsx +++ b/semcore/d3-chart/src/component/Chart/HistogramChart.tsx @@ -114,7 +114,7 @@ class HistogramChartComponent extends AbstractChart< renderChart() { const { groupKey, invertAxis } = this.asProps; - const { dataDefinitions, highlightedLine } = this.state; + const { dataDefinitions, highlightedItem } = this.state; if (this.isStack) { return ( @@ -124,7 +124,7 @@ class HistogramChartComponent extends AbstractChart< const commonBarComponentProps: BarProps = { color: item.color, - transparent: highlightedLine !== -1 && highlightedLine !== index, + transparent: highlightedItem !== -1 && highlightedItem !== index, }; if (invertAxis) { diff --git a/semcore/d3-chart/src/component/Chart/LineChart.tsx b/semcore/d3-chart/src/component/Chart/LineChart.tsx index 18c199aa18..368021a8c2 100644 --- a/semcore/d3-chart/src/component/Chart/LineChart.tsx +++ b/semcore/d3-chart/src/component/Chart/LineChart.tsx @@ -68,7 +68,7 @@ class LineChartComponent extends AbstractChart< protected renderChart() { const { groupKey, curve, showDots, area, areaCurve, onClickLine } = this.asProps; - const { dataDefinitions, highlightedLine } = this.state; + const { dataDefinitions, highlightedItem } = this.state; return dataDefinitions.map((item, index) => { return ( @@ -78,7 +78,7 @@ class LineChartComponent extends AbstractChart< y={item.id} key={item.id} color={item.color} - transparent={highlightedLine !== -1 && highlightedLine !== index} + transparent={highlightedItem !== -1 && highlightedItem !== index} curve={curve} onClick={onClickLine} > diff --git a/semcore/d3-chart/src/component/Chart/VennChart.tsx b/semcore/d3-chart/src/component/Chart/VennChart.tsx index a9c150a0b8..8e1e142db8 100644 --- a/semcore/d3-chart/src/component/Chart/VennChart.tsx +++ b/semcore/d3-chart/src/component/Chart/VennChart.tsx @@ -71,7 +71,7 @@ class VennChartComponent extends AbstractChart< renderChart() { const { data, onClickVennItem } = this.asProps; - const { dataDefinitions, highlightedLine } = this.state; + const { dataDefinitions, highlightedItem } = this.state; const checkedLegendItems = dataDefinitions.filter((item) => item.checked); const checkedLegendItemsMap = checkedLegendItems.reduce>( @@ -102,7 +102,7 @@ class VennChartComponent extends AbstractChart< dataKey={item.id} name={item.label} color={item.color} - transparent={highlightedLine !== -1 && highlightedLine !== index} + transparent={highlightedItem !== -1 && highlightedItem !== index} /> ); })} diff --git a/semcore/d3-chart/src/component/ChartLegend/BaseLegend.tsx b/semcore/d3-chart/src/component/ChartLegend/BaseLegend.tsx index 9ec2cdff53..c07d15bf7c 100644 --- a/semcore/d3-chart/src/component/ChartLegend/BaseLegend.tsx +++ b/semcore/d3-chart/src/component/ChartLegend/BaseLegend.tsx @@ -5,11 +5,14 @@ import type { LegendProps } from './BaseLegend.type'; import { type LegendItemKey, type LegendItemProps, type ShapeType } from './LegendItem/LegendItem.type'; import { makeDataHintsHandlers } from '../../a11y/hints'; +type InnerProps = { + highlightedItem?: number; +}; export abstract class BaseLegend< P extends LegendProps, E extends readonly ((...args: any[]) => any)[] = never[], DP extends Intergalactic.InternalTypings.ValidDefaultProps = never, -> extends Component { +> extends Component { componentDidMount() { this.setHints(); } @@ -43,7 +46,7 @@ export abstract class BaseLegend< _: {}, index: number, ): LegendItemProps & Intergalactic.InternalTypings.ComponentPropsNesting<'div'> { - const { shape = 'Checkbox', size = 'm', patterns } = this.asProps; + const { shape = 'Checkbox', size = 'm', patterns, highlightedItem } = this.asProps; const line = this.getItem(index); return { @@ -57,6 +60,7 @@ export abstract class BaseLegend< onMouseLeave: this.bindOnMouseLeaveItem(line.id), style: { gridRowStart: `${index + 1}`, gridRowEnd: `${index + 2}` }, patterns, + transparent: highlightedItem !== undefined && (highlightedItem !== -1 && highlightedItem !== index), }; } diff --git a/semcore/d3-chart/src/component/ChartLegend/LegendItem/LegendItem.type.ts b/semcore/d3-chart/src/component/ChartLegend/LegendItem/LegendItem.type.ts index ec211b3f25..8fdf3b274e 100644 --- a/semcore/d3-chart/src/component/ChartLegend/LegendItem/LegendItem.type.ts +++ b/semcore/d3-chart/src/component/ChartLegend/LegendItem/LegendItem.type.ts @@ -76,6 +76,8 @@ export type LegendItemProps = LegendItem & { * Handler for focus out legend item */ onBlurLegendItem: (id: LegendItemKey) => void; + /** Enables element transparency */ + transparent?: boolean; }; export type LegendItemDefaultProps = { @@ -96,7 +98,7 @@ export type ShapeProps = LegendItem & } ); -export const StaticShapes = ['Circle', 'Line', 'Square', 'Pattern'] as const; +export const StaticShapes = ['Circle', 'Pattern'] as const; export type ShapeType = 'Checkbox' | typeof StaticShapes[number]; diff --git a/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css b/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css index 979cf92a1d..7176504bac 100644 --- a/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css +++ b/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css @@ -11,6 +11,10 @@ SLegendItem[disabled]:hover { cursor: default; } +SLegendItem[transparent] { + opacity: 0.3; +} + SPointShape[color] { background-color: var(--color); margin-right: var(--intergalactic-spacing-content-gap-medium, 6px); diff --git a/semcore/d3-chart/src/style/scatterplot.shadow.css b/semcore/d3-chart/src/style/scatterplot.shadow.css index 77157433e3..214357a293 100644 --- a/semcore/d3-chart/src/style/scatterplot.shadow.css +++ b/semcore/d3-chart/src/style/scatterplot.shadow.css @@ -29,7 +29,7 @@ SScatterPlot[transparent] { SValue { text-anchor: middle; font-size: var(--intergalactic-fs-50, 10px); - stroke: var(--intergalactic-chart-palette-order-9, oklch(0.58 0.168 278.2)); + stroke: var(--intergalactic-chart-palette-order-9, oklch(0.53 0.157 279.2)); } SValue[color] { diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index b46165bde4..e27ba3701d 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -3476,8 +3476,8 @@ "value": "2px", "description": "Extra small gap between content elements inside controls, rows, or columns.", "components": [ + "color-picker", "d3-chart" - "color-picker" ] }, { @@ -3505,8 +3505,8 @@ "base-trigger", "button", "checkbox", - "d3-chart", "color-picker", + "d3-chart", "dropdown", "dropdown-menu", "input", @@ -3541,8 +3541,8 @@ "value": "12px", "description": "Extra large gap between elements, rows, or columns.", "components": [ - "d3-chart", "color-picker", + "d3-chart", "fullscreen-modal", "notice-bubble", "pagination" From f84bc24b51f8744262447b6c2d42120003cc7dca Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Tue, 1 Sep 2026 18:01:52 +0200 Subject: [PATCH 5/8] [theme] add more semantic colors to chart data group vars --- semcore/d3-chart/src/style/tooltip.shadow.css | 2 +- .../core/advanced/chart-palette-data.ts | 9 ++ .../patterns/core/advanced/chart-palette.tsx | 20 +++- tools/theme/src/theme.ts | 42 +++++++ .../style/design-tokens/design-tokens.json | 106 ++++++++++++------ 5 files changed, 144 insertions(+), 35 deletions(-) diff --git a/semcore/d3-chart/src/style/tooltip.shadow.css b/semcore/d3-chart/src/style/tooltip.shadow.css index 576ac23422..920c3f1b34 100644 --- a/semcore/d3-chart/src/style/tooltip.shadow.css +++ b/semcore/d3-chart/src/style/tooltip.shadow.css @@ -38,7 +38,7 @@ SDotCircle[color] { width: 10px; height: 10px; border-radius: 50%; - box-shadow: 0 0 0 1px oklch(from var(--color) calc(l + 0.2) c h); + box-shadow: 0 0 0 1px oklch(from var(--color) calc(l + 0.15) c h); } diff --git a/stories/patterns/core/advanced/chart-palette-data.ts b/stories/patterns/core/advanced/chart-palette-data.ts index ceeef49305..fbaee329db 100644 --- a/stories/patterns/core/advanced/chart-palette-data.ts +++ b/stories/patterns/core/advanced/chart-palette-data.ts @@ -14,3 +14,12 @@ export const chartSemanticLines = Array.from({ length: 20 }, (_, i) => ({ success: Math.abs(Math.sin(Math.exp(i) + 1.5)) * 10, warning: Math.abs(Math.sin(Math.exp(i) + 3)) * 10, })); + +export const chartIntentLines = Array.from({ length: 20 }, (_, i) => ({ + x: i, + commercial: Math.abs(Math.sin(Math.exp(i) + 0.4)) * 10, + informational: Math.abs(Math.sin(Math.exp(i) + 1.2)) * 10, + navigational: Math.abs(Math.sin(Math.exp(i) + 2.1)) * 10, + task: Math.abs(Math.sin(Math.exp(i) + 2.8)) * 10, + transactional: Math.abs(Math.sin(Math.exp(i) + 3.6)) * 10, +})); diff --git a/stories/patterns/core/advanced/chart-palette.tsx b/stories/patterns/core/advanced/chart-palette.tsx index 2c0c080657..1a7be0b90d 100644 --- a/stories/patterns/core/advanced/chart-palette.tsx +++ b/stories/patterns/core/advanced/chart-palette.tsx @@ -2,7 +2,7 @@ import { Flex } from '@semcore/ui/base-components'; import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; -import { chartPaletteLines, chartSemanticLines } from './chart-palette-data'; +import { chartIntentLines, chartPaletteLines, chartSemanticLines } from './chart-palette-data'; const semanticColorMap = { critical: 'chart-data-critical', @@ -10,6 +10,14 @@ const semanticColorMap = { warning: 'chart-data-warning', }; +const intentColorMap = { + commercial: 'chart-data-intent-commercial', + informational: 'chart-data-intent-informational', + navigational: 'chart-data-intent-navigational', + task: 'chart-data-intent-task', + transactional: 'chart-data-intent-transactional', +}; + const Demo = () => { return ( @@ -32,6 +40,16 @@ const Demo = () => { showLegend aria-label='Line chart with critical, success, and warning semantic colors' /> + ); }; diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index ea050b2344..4c68082cfa 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -399,6 +399,10 @@ export const theme: Theme = { value: colors.gray['50'].value, description: 'Background color of the unavailable Badge.', }, + badge_text_primary_DEFAULT: { + value: '{semanticTokens.colors.text_primary_DEFAULT}', + description: 'Primary text color for Badge.', + }, badge_text_primary_invert: { value: '{semanticTokens.colors.text_primary_invert}', description: 'Inverted primary text color for Badge.', @@ -668,6 +672,34 @@ export const theme: Theme = { value: colors.orange['200'].value, description: 'Warning data color for charts.', }, + chart_data_new: { + value: colors.green['200'].value, + description: 'Color for the "New" data on the chart.', + }, + chart_data_lost: { + value: colors.red['300'].value, + description: 'Color for the "Lost" data on the chart.', + }, + chart_data_intent_commercial: { + value: colors.violet['300'].value, + description: 'Color for the commercial data intent on the chart.', + }, + chart_data_intent_informational: { + value: colors.blue['400'].value, + description: 'Color for the informational data intent on the chart.', + }, + chart_data_intent_navigational: { + value: colors.green['200'].value, + description: 'Color for the navigational data intent on the chart.', + }, + chart_data_intent_task: { + value: colors.pink['300'].value, + description: 'Color for the task data intent on the chart.', + }, + chart_data_intent_transactional: { + value: colors.yellow['200'].value, + description: 'Color for the transactional data intent on the chart.', + }, chart_grid_bar_chart_base_bg: { value: neutral.at(L_BG_LIGHT), description: 'Default background color of a bar in the BarChart.', @@ -3273,6 +3305,15 @@ type SemanticColors = { success: Value; warning: Value; critical: Value; + lost: Value; + new: Value; + intent: { + informational: Value; + navigational: Value; + commercial: Value; + transactional: Value; + task: Value; + }; }; palette: { order: { @@ -3411,6 +3452,7 @@ type SemanticColors = { }; text: { primary: { + DEFAULT: Value; invert: Value; }; secondary: Value; diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index e27ba3701d..d1331a73aa 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -135,13 +135,20 @@ "badge" ] }, + { + "name": "--intergalactic-badge-text-primary", + "value": "oklch(0.1 0.03 137 / 0.899)", + "description": "Primary text color for Badge.", + "components": [ + "feature-highlight" + ] + }, { "name": "--intergalactic-badge-text-primary-invert", "value": "oklch(0.999 0.001 180 / 0.949)", "description": "Inverted primary text color for Badge.", "components": [ - "badge", - "feature-highlight" + "badge" ] }, { @@ -665,6 +672,48 @@ "description": "Warning data color for charts.", "components": [] }, + { + "name": "--intergalactic-chart-data-new", + "value": "oklch(0.82 0.15 170)", + "description": "Color for the \"New\" data on the chart.", + "components": [] + }, + { + "name": "--intergalactic-chart-data-lost", + "value": "oklch(0.74 0.19 22)", + "description": "Color for the \"Lost\" data on the chart.", + "components": [] + }, + { + "name": "--intergalactic-chart-data-intent-commercial", + "value": "oklch(0.74 0.17 303)", + "description": "Color for the commercial data intent on the chart.", + "components": [] + }, + { + "name": "--intergalactic-chart-data-intent-informational", + "value": "oklch(0.58 0.168 278.2)", + "description": "Color for the informational data intent on the chart.", + "components": [] + }, + { + "name": "--intergalactic-chart-data-intent-navigational", + "value": "oklch(0.82 0.15 170)", + "description": "Color for the navigational data intent on the chart.", + "components": [] + }, + { + "name": "--intergalactic-chart-data-intent-task", + "value": "oklch(0.74 0.225 330)", + "description": "Color for the task data intent on the chart.", + "components": [] + }, + { + "name": "--intergalactic-chart-data-intent-transactional", + "value": "oklch(0.82 0.18 80)", + "description": "Color for the transactional data intent on the chart.", + "components": [] + }, { "name": "--intergalactic-chart-grid-bar-chart-base-bg", "value": "oklch(0.96 0.001 180)", @@ -1106,7 +1155,8 @@ "value": "oklch(0 0 140)", "description": "Active (selected) state of the regular primary control.", "components": [ - "button" + "button", + "feature-highlight" ] }, { @@ -1114,7 +1164,8 @@ "value": "oklch(0.32 0.007 140)", "description": "Hover state of the regular primary control.", "components": [ - "button" + "button", + "feature-highlight" ] }, { @@ -1213,6 +1264,7 @@ "description": "Background of the regular secondary control.", "components": [ "button", + "feature-highlight", "inline-input" ] }, @@ -1221,7 +1273,8 @@ "value": "oklch(0.145 0.027 176.1 / 0.135)", "description": "Active (selected) state of the regular secondary control.", "components": [ - "button" + "button", + "feature-highlight" ] }, { @@ -1229,7 +1282,8 @@ "value": "oklch(0.151 0.028 176.1 / 0.123)", "description": "Hover state of the regular secondary control.", "components": [ - "button" + "button", + "feature-highlight" ] }, { @@ -1430,7 +1484,8 @@ "value": "oklch(0.1 0.03 137 / 0.899)", "description": "Primary text color for form controls.", "components": [ - "button" + "button", + "feature-highlight" ] }, { @@ -1438,7 +1493,8 @@ "value": "oklch(0.999 0.001 180 / 0.949)", "description": "Inverted primary text color for form controls.", "components": [ - "button" + "button", + "feature-highlight" ] }, { @@ -3035,7 +3091,6 @@ "components": [ "d3-chart", "date-picker", - "feature-highlight", "notice-bubble" ] }, @@ -3376,6 +3431,7 @@ "d3-chart", "dropdown", "dropdown-menu", + "feature-highlight", "input-tags", "pills", "wizard" @@ -3850,9 +3906,7 @@ "name": "--intergalactic-border-feature-highlight-secondary", "value": "linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))", "description": "Secondary border for highlighted controls.", - "components": [ - "feature-highlight" - ] + "components": [] }, { "name": "--intergalactic-control-primary-feature-highlight", @@ -3874,49 +3928,37 @@ "name": "--intergalactic-control-primary-feature-highlight-active", "value": "linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.58 0.168 278.2))", "description": "Active (selected) state of the highlighted primary control.", - "components": [ - "feature-highlight" - ] + "components": [] }, { "name": "--intergalactic-control-secondary-feature-highlight", "value": "linear-gradient(90deg in oklch, oklch(0.97 0.019 303.4), oklch(0.969 0.016 267.7))", "description": "Background of the highlighted secondary control.", - "components": [ - "feature-highlight" - ] + "components": [] }, { "name": "--intergalactic-control-secondary-feature-highlight-hover", "value": "linear-gradient(90deg in oklch, oklch(0.9 0.065 303), oklch(0.898 0.054 268.3))", "description": "Hover state of the highlighted secondary control.", - "components": [ - "feature-highlight" - ] + "components": [] }, { "name": "--intergalactic-control-secondary-feature-highlight-active", "value": "linear-gradient(90deg in oklch, oklch(0.9 0.065 303), oklch(0.898 0.054 268.3))", "description": "Active (selected) state of the highlighted secondary control.", - "components": [ - "feature-highlight" - ] + "components": [] }, { "name": "--intergalactic-text-feature-highlight", "value": "linear-gradient(90deg in oklch, oklch(0.53 0.26 296), oklch(0.53 0.157 279.2))", "description": "Text for highlighted features.", - "components": [ - "feature-highlight" - ] + "components": [] }, { "name": "--intergalactic-text-feature-highlight-hover-active", "value": "linear-gradient(90deg in oklch, oklch(0.53 0.26 296), oklch(0.53 0.157 279.2))", "description": "Text for hover and active states of highlighted features.", - "components": [ - "feature-highlight" - ] + "components": [] }, { "name": "--intergalactic-icon-primary-feature-highlight", @@ -3930,9 +3972,7 @@ "name": "--intergalactic-icon-primary-feature-highlight-hover-active", "value": "oklch(0.53 0.26 296)", "description": "Violet background color for the hover and active states of the primary highlighted icon. It’s created using a CSS filter with a brightness(0.8), applied to the violet-500 color.", - "components": [ - "feature-highlight" - ] + "components": [] }, { "name": "--intergalactic-keyboard-focus-feature-highlight", From 341a849f250401ec4d49138781ac5d788dd80364 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Thu, 3 Sep 2026 17:57:22 +0200 Subject: [PATCH 6/8] [theme] add variables for chart-bg highlights --- tools/theme/src/theme.ts | 53 +++++++- .../style/design-tokens/design-tokens.json | 114 ++++++++++++++---- 2 files changed, 139 insertions(+), 28 deletions(-) diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index 4c68082cfa..453aabeecb 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -724,10 +724,42 @@ export const theme: Theme = { value: neutral.at(L_BORDER_SECONDARY), description: 'Stripe color for diagonal pattern background.', }, - chart_grid_text_label: { + chart_grid_bg_good: { + value: 'linear-gradient(180deg, oklch(from {baseTokens.colors.green.200} l c h / 0.1) 0%, oklch(from {baseTokens.colors.green.200} l c h / 0.09) 12.677%, oklch(from {baseTokens.colors.green.200} l c h / 0.01) 87.981%)', + description: 'Background gradient for chart areas with positive dynamics.', + }, + chart_grid_bg_bad: { + value: 'linear-gradient(180deg, oklch(from {baseTokens.colors.red.300} l c h / 0.1) 0%, oklch(from {baseTokens.colors.red.300} l c h / 0.09) 12.677%, oklch(from {baseTokens.colors.red.300} l c h / 0.01) 87.981%)', + description: 'Background gradient for chart areas with negative dynamics.', + }, + chart_grid_bg_highlight: { + value: 'linear-gradient(180deg, {baseTokens.colors.gray.50} 0%, {baseTokens.colors.gray.50} 41.827%, {baseTokens.colors.transparent} 100%)', + description: 'Background gradient for highlighted chart areas.', + }, + chart_grid_bg_insight: { + value: 'linear-gradient(180deg, oklch(from {baseTokens.colors.violet.300} l c h / 0.1) 0%, oklch(from {baseTokens.colors.violet.300} l c h / 0.1) 12.677%, oklch(from {baseTokens.colors.violet.300} l c h / 0.01) 87.981%)', + description: 'Background gradient for insight chart areas.', + }, + chart_grid_bg_pattern: { + value: 'linear-gradient(0deg, oklch(from {baseTokens.colors.gray.800} l c h / 0.1) 8.532%, {baseTokens.colors.gray.800} 29.015%)', + description: 'Pattern gradient for chart grid backgrounds.', + }, + chart_grid_bg_potential: { + value: 'linear-gradient(180deg, oklch(0.941 0.018 177 / 0.4) 0%, oklch(0.909 0.041 309 / 0.4) 75%, {baseTokens.colors.transparent} 100%)', + description: 'Background gradient for potential chart areas.', + }, + chart_grid_line_forecast: { + value: 'linear-gradient(90deg, {baseTokens.colors.violet.300} 0%, {baseTokens.colors.green.100} 100%)', + description: 'Forecast line color on the chart grid.', + }, + chart_grid_text_label_DEFAULT: { value: neutral.opaqueAt(L_TEXT_SECONDARY), description: 'Text label on the chart grid.', }, + chart_grid_text_label_accent: { + value: neutral.opaqueAt(L_TEXT_PRIMARY), + description: 'Text label with accent on the chart grid.', + }, chart_grid_x_axis: { value: neutral.at(L_BORDER_PRIMARY), description: 'X-axis line on the chart grid.', @@ -2045,6 +2077,10 @@ export const theme: Theme = { value: `0px 0px 2px 0px ${neutral.opaqueAt(L_BORDER_PRIMARY)}, 0px 1px 2px 0px ${neutral.opaqueAt(L_BORDER_PRIMARY)}`, description: 'Shadow of the elevated chart dot.', }, + box_shadow_chart_elevated: { + value: '0px 0px 2px 0px oklch(from {baseTokens.colors.gray.800} l c h / 0.165), 0px 1px 2px 0px oklch(from {baseTokens.colors.gray.800} l c h / 0.165)', + description: 'Shadow of elevated elements on charts.', + }, box_shadow_control_elevated: { value: `0px 0px 1px 0px ${neutral.opaqueAt(L_BORDER_SECONDARY)}, 0px 1px 3px 0px ${neutral.opaqueAt(L_BORDER_SECONDARY)}`, description: 'Shadow of the Switch toggle.', @@ -3352,6 +3388,7 @@ type SemanticColors = { }; grid: { line: Value; + line_forecast: Value; x: { axis: Value; }; @@ -3363,7 +3400,10 @@ type SemanticColors = { }; }; text: { - label: Value; + label: { + DEFAULT: Value; + accent: Value; + }; }; bar: { chart: { @@ -3377,6 +3417,14 @@ type SemanticColors = { bg: Value; pattern: Value; }; + bg: { + good: Value; + bad: Value; + highlight: Value; + insight: Value; + pattern: Value; + potential: Value; + }; border: Value; }; x: { @@ -3499,6 +3547,7 @@ type SemanticShadows = { hover: Value; }; chart: { + elevated: Value; dot: { elevated: Value; }; diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index d1331a73aa..1b07bad22d 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -139,16 +139,15 @@ "name": "--intergalactic-badge-text-primary", "value": "oklch(0.1 0.03 137 / 0.899)", "description": "Primary text color for Badge.", - "components": [ - "feature-highlight" - ] + "components": [] }, { "name": "--intergalactic-badge-text-primary-invert", "value": "oklch(0.999 0.001 180 / 0.949)", "description": "Inverted primary text color for Badge.", "components": [ - "badge" + "badge", + "feature-highlight" ] }, { @@ -764,6 +763,48 @@ "d3-chart" ] }, + { + "name": "--intergalactic-chart-grid-bg-good", + "value": "linear-gradient(180deg, oklch(from oklch(0.82 0.15 170) l c h / 0.1) 0%, oklch(from oklch(0.82 0.15 170) l c h / 0.09) 12.677%, oklch(from oklch(0.82 0.15 170) l c h / 0.01) 87.981%)", + "description": "Background gradient for chart areas with positive dynamics.", + "components": [] + }, + { + "name": "--intergalactic-chart-grid-bg-bad", + "value": "linear-gradient(180deg, oklch(from oklch(0.74 0.19 22) l c h / 0.1) 0%, oklch(from oklch(0.74 0.19 22) l c h / 0.09) 12.677%, oklch(from oklch(0.74 0.19 22) l c h / 0.01) 87.981%)", + "description": "Background gradient for chart areas with negative dynamics.", + "components": [] + }, + { + "name": "--intergalactic-chart-grid-bg-highlight", + "value": "linear-gradient(180deg, oklch(0.97 0.001 180) 0%, oklch(0.97 0.001 180) 41.827%, rgb(0 0 0 / 0) 100%)", + "description": "Background gradient for highlighted chart areas.", + "components": [] + }, + { + "name": "--intergalactic-chart-grid-bg-insight", + "value": "linear-gradient(180deg, oklch(from oklch(0.74 0.17 303) l c h / 0.1) 0%, oklch(from oklch(0.74 0.17 303) l c h / 0.1) 12.677%, oklch(from oklch(0.74 0.17 303) l c h / 0.01) 87.981%)", + "description": "Background gradient for insight chart areas.", + "components": [] + }, + { + "name": "--intergalactic-chart-grid-bg-pattern", + "value": "linear-gradient(0deg, oklch(from oklch(0.23 0.01 140) l c h / 0.1) 8.532%, oklch(0.23 0.01 140) 29.015%)", + "description": "Pattern gradient for chart grid backgrounds.", + "components": [] + }, + { + "name": "--intergalactic-chart-grid-bg-potential", + "value": "linear-gradient(180deg, oklch(0.941 0.018 177 / 0.4) 0%, oklch(0.909 0.041 309 / 0.4) 75%, rgb(0 0 0 / 0) 100%)", + "description": "Background gradient for potential chart areas.", + "components": [] + }, + { + "name": "--intergalactic-chart-grid-line-forecast", + "value": "linear-gradient(90deg, oklch(0.74 0.17 303) 0%, oklch(0.9 0.11 175) 100%)", + "description": "Forecast line color on the chart grid.", + "components": [] + }, { "name": "--intergalactic-chart-grid-text-label", "value": "oklch(0.088 0.026 147.7 / 0.583)", @@ -772,6 +813,12 @@ "d3-chart" ] }, + { + "name": "--intergalactic-chart-grid-text-label-accent", + "value": "oklch(0.1 0.03 137 / 0.899)", + "description": "Text label with accent on the chart grid.", + "components": [] + }, { "name": "--intergalactic-chart-grid-x-axis", "value": "oklch(0.88 0.002 175.6)", @@ -1155,8 +1202,7 @@ "value": "oklch(0 0 140)", "description": "Active (selected) state of the regular primary control.", "components": [ - "button", - "feature-highlight" + "button" ] }, { @@ -1164,8 +1210,7 @@ "value": "oklch(0.32 0.007 140)", "description": "Hover state of the regular primary control.", "components": [ - "button", - "feature-highlight" + "button" ] }, { @@ -1264,7 +1309,6 @@ "description": "Background of the regular secondary control.", "components": [ "button", - "feature-highlight", "inline-input" ] }, @@ -1273,8 +1317,7 @@ "value": "oklch(0.145 0.027 176.1 / 0.135)", "description": "Active (selected) state of the regular secondary control.", "components": [ - "button", - "feature-highlight" + "button" ] }, { @@ -1282,8 +1325,7 @@ "value": "oklch(0.151 0.028 176.1 / 0.123)", "description": "Hover state of the regular secondary control.", "components": [ - "button", - "feature-highlight" + "button" ] }, { @@ -1484,8 +1526,7 @@ "value": "oklch(0.1 0.03 137 / 0.899)", "description": "Primary text color for form controls.", "components": [ - "button", - "feature-highlight" + "button" ] }, { @@ -1493,8 +1534,7 @@ "value": "oklch(0.999 0.001 180 / 0.949)", "description": "Inverted primary text color for form controls.", "components": [ - "button", - "feature-highlight" + "button" ] }, { @@ -3091,6 +3131,7 @@ "components": [ "d3-chart", "date-picker", + "feature-highlight", "notice-bubble" ] }, @@ -3292,6 +3333,12 @@ "d3-chart" ] }, + { + "name": "--intergalactic-box-shadow-chart-elevated", + "value": "0px 0px 2px 0px oklch(from oklch(0.23 0.01 140) l c h / 0.165), 0px 1px 2px 0px oklch(from oklch(0.23 0.01 140) l c h / 0.165)", + "description": "Shadow of elevated elements on charts.", + "components": [] + }, { "name": "--intergalactic-box-shadow-control-elevated", "value": "0px 0px 1px 0px oklch(0.176 0.033 175.7 / 0.07), 0px 1px 3px 0px oklch(0.176 0.033 175.7 / 0.07)", @@ -3431,7 +3478,6 @@ "d3-chart", "dropdown", "dropdown-menu", - "feature-highlight", "input-tags", "pills", "wizard" @@ -3906,7 +3952,9 @@ "name": "--intergalactic-border-feature-highlight-secondary", "value": "linear-gradient(90deg in oklch, oklch(0.74 0.17 303), oklch(0.74 0.117 274.1))", "description": "Secondary border for highlighted controls.", - "components": [] + "components": [ + "feature-highlight" + ] }, { "name": "--intergalactic-control-primary-feature-highlight", @@ -3928,37 +3976,49 @@ "name": "--intergalactic-control-primary-feature-highlight-active", "value": "linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.58 0.168 278.2))", "description": "Active (selected) state of the highlighted primary control.", - "components": [] + "components": [ + "feature-highlight" + ] }, { "name": "--intergalactic-control-secondary-feature-highlight", "value": "linear-gradient(90deg in oklch, oklch(0.97 0.019 303.4), oklch(0.969 0.016 267.7))", "description": "Background of the highlighted secondary control.", - "components": [] + "components": [ + "feature-highlight" + ] }, { "name": "--intergalactic-control-secondary-feature-highlight-hover", "value": "linear-gradient(90deg in oklch, oklch(0.9 0.065 303), oklch(0.898 0.054 268.3))", "description": "Hover state of the highlighted secondary control.", - "components": [] + "components": [ + "feature-highlight" + ] }, { "name": "--intergalactic-control-secondary-feature-highlight-active", "value": "linear-gradient(90deg in oklch, oklch(0.9 0.065 303), oklch(0.898 0.054 268.3))", "description": "Active (selected) state of the highlighted secondary control.", - "components": [] + "components": [ + "feature-highlight" + ] }, { "name": "--intergalactic-text-feature-highlight", "value": "linear-gradient(90deg in oklch, oklch(0.53 0.26 296), oklch(0.53 0.157 279.2))", "description": "Text for highlighted features.", - "components": [] + "components": [ + "feature-highlight" + ] }, { "name": "--intergalactic-text-feature-highlight-hover-active", "value": "linear-gradient(90deg in oklch, oklch(0.53 0.26 296), oklch(0.53 0.157 279.2))", "description": "Text for hover and active states of highlighted features.", - "components": [] + "components": [ + "feature-highlight" + ] }, { "name": "--intergalactic-icon-primary-feature-highlight", @@ -3972,7 +4032,9 @@ "name": "--intergalactic-icon-primary-feature-highlight-hover-active", "value": "oklch(0.53 0.26 296)", "description": "Violet background color for the hover and active states of the primary highlighted icon. It’s created using a CSS filter with a brightness(0.8), applied to the violet-500 color.", - "components": [] + "components": [ + "feature-highlight" + ] }, { "name": "--intergalactic-keyboard-focus-feature-highlight", From 7d6904f1498463ba6e7ee947ac97820a4f0e83e2 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Fri, 4 Sep 2026 17:03:58 +0200 Subject: [PATCH 7/8] [icon] add DiffUp and DiffDown icons --- semcore/icon/package.json | 20 +++++++++++++++++++ semcore/icon/svg/icon/DiffDown/l.svg | 1 + semcore/icon/svg/icon/DiffDown/m.svg | 1 + semcore/icon/svg/icon/DiffUp/l.svg | 1 + semcore/icon/svg/icon/DiffUp/m.svg | 1 + website/docs/style/icon/icons-list.js | 28 +++++++++++++++++++++++++++ 6 files changed, 52 insertions(+) create mode 100644 semcore/icon/svg/icon/DiffDown/l.svg create mode 100644 semcore/icon/svg/icon/DiffDown/m.svg create mode 100644 semcore/icon/svg/icon/DiffUp/l.svg create mode 100644 semcore/icon/svg/icon/DiffUp/m.svg diff --git a/semcore/icon/package.json b/semcore/icon/package.json index 66419506a0..35a644bb7f 100644 --- a/semcore/icon/package.json +++ b/semcore/icon/package.json @@ -1498,6 +1498,26 @@ "import": "./lib/DesktopChart/m/index.mjs", "require": "./lib/DesktopChart/m/index.js" }, + "./DiffDown/l": { + "types": "./lib/DiffDown/l/index.d.ts", + "import": "./lib/DiffDown/l/index.mjs", + "require": "./lib/DiffDown/l/index.js" + }, + "./DiffDown/m": { + "types": "./lib/DiffDown/m/index.d.ts", + "import": "./lib/DiffDown/m/index.mjs", + "require": "./lib/DiffDown/m/index.js" + }, + "./DiffUp/l": { + "types": "./lib/DiffUp/l/index.d.ts", + "import": "./lib/DiffUp/l/index.mjs", + "require": "./lib/DiffUp/l/index.js" + }, + "./DiffUp/m": { + "types": "./lib/DiffUp/m/index.d.ts", + "import": "./lib/DiffUp/m/index.mjs", + "require": "./lib/DiffUp/m/index.js" + }, "./Document/l": { "types": "./lib/Document/l/index.d.ts", "import": "./lib/Document/l/index.mjs", diff --git a/semcore/icon/svg/icon/DiffDown/l.svg b/semcore/icon/svg/icon/DiffDown/l.svg new file mode 100644 index 0000000000..c6482a1812 --- /dev/null +++ b/semcore/icon/svg/icon/DiffDown/l.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/semcore/icon/svg/icon/DiffDown/m.svg b/semcore/icon/svg/icon/DiffDown/m.svg new file mode 100644 index 0000000000..ecf60993f4 --- /dev/null +++ b/semcore/icon/svg/icon/DiffDown/m.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/semcore/icon/svg/icon/DiffUp/l.svg b/semcore/icon/svg/icon/DiffUp/l.svg new file mode 100644 index 0000000000..a756e66c82 --- /dev/null +++ b/semcore/icon/svg/icon/DiffUp/l.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/semcore/icon/svg/icon/DiffUp/m.svg b/semcore/icon/svg/icon/DiffUp/m.svg new file mode 100644 index 0000000000..5935ea280e --- /dev/null +++ b/semcore/icon/svg/icon/DiffUp/m.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/docs/style/icon/icons-list.js b/website/docs/style/icon/icons-list.js index 5cb5ce4e2f..12343fd11f 100644 --- a/website/docs/style/icon/icons-list.js +++ b/website/docs/style/icon/icons-list.js @@ -1166,6 +1166,34 @@ const iconsList = { 'платеж', ], }, + { + name: 'DiffUp', + size: ['l', 'm'], + group: 'Status', + tags: [ + 'diff', + 'up', + 'down', + 'arrow', + 'direction', + 'lost', + 'per cent', + ], + }, + { + name: 'DiffDown', + size: ['l', 'm'], + group: 'Status', + tags: [ + 'diff', + 'up', + 'down', + 'arrow', + 'direction', + 'lost', + 'per cent', + ], + }, { name: 'Education', size: ['l', 'm'], From 4d66ee06130ffd9db743703f850f21831559a4c5 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Fri, 4 Sep 2026 19:33:54 +0200 Subject: [PATCH 8/8] [d3-chart] update styles for Area, Line and Cigarette --- .../d3-chart/src/component/Chart/CigaretteChart.tsx | 6 +++--- semcore/d3-chart/src/style/area.shadow.css | 13 ++++++++++--- semcore/d3-chart/src/style/line.shadow.css | 2 +- 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/semcore/d3-chart/src/component/Chart/CigaretteChart.tsx b/semcore/d3-chart/src/component/Chart/CigaretteChart.tsx index a6318d3d88..7d2f994e5f 100644 --- a/semcore/d3-chart/src/component/Chart/CigaretteChart.tsx +++ b/semcore/d3-chart/src/component/Chart/CigaretteChart.tsx @@ -333,7 +333,7 @@ class CigaretteChartComponent extends AbstractChart< {item.label} - { showPercentColumn && {this.percentValue(data, item.id)} } + { showPercentColumn && {this.percentValue(data, item.id)} } {this.tooltipValueFormatter(data[item.id])} , ), @@ -356,7 +356,7 @@ class CigaretteChartComponent extends AbstractChart< {item.label} - { showPercentColumn && {this.percentValue(data, item.id)} } + { showPercentColumn && {this.percentValue(data, item.id)} } {this.tooltipValueFormatter(data[item.id])} ) @@ -406,7 +406,7 @@ class CigaretteChartComponent extends AbstractChart< return ( <> Total - { showPercentValueInTooltip && total !== 0 && {Number.isNaN(total) ? NOT_A_VALUE : '100%'} } + { showPercentValueInTooltip && total !== 0 && {Number.isNaN(total) ? NOT_A_VALUE : '100%'} } {Number.isNaN(total) ? NOT_A_VALUE : total} ); diff --git a/semcore/d3-chart/src/style/area.shadow.css b/semcore/d3-chart/src/style/area.shadow.css index 1673ec6ac1..0f2e27cc7f 100644 --- a/semcore/d3-chart/src/style/area.shadow.css +++ b/semcore/d3-chart/src/style/area.shadow.css @@ -2,7 +2,14 @@ SArea { fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140)); - fill-opacity: 0.2; + fill-opacity: 0.1; + -webkit-mask-image: linear-gradient( + to bottom, + #000 0%, + rgba(0, 0, 0, 0.48) 60%, + transparent 100% + ); + mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.48) 60%, transparent 100%); } SArea[color] { @@ -20,7 +27,7 @@ SArea[transparent] { SAreaLine { stroke: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140)); - stroke-width: 3; + stroke-width: 2; fill: transparent; } @@ -41,7 +48,7 @@ SAreaLine { SNull { fill: transparent; - stroke: var(--intergalactic-chart-grid-x-axis, oklch(0.88 0.002 175.6)); + stroke: var(--intergalactic-chart-palette-order-null, oklch(0.9 0.002 177)); stroke-dasharray: 4; } diff --git a/semcore/d3-chart/src/style/line.shadow.css b/semcore/d3-chart/src/style/line.shadow.css index 143f801827..a5342370a5 100644 --- a/semcore/d3-chart/src/style/line.shadow.css +++ b/semcore/d3-chart/src/style/line.shadow.css @@ -23,7 +23,7 @@ SLine[transparent] { SNull { fill: transparent; - stroke: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + stroke: var(--intergalactic-chart-palette-order-null, oklch(0.9 0.002 177)); stroke-dasharray: 4; }