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/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..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: 8px;
+ margin-right: var(--intergalactic-spacing-content-gap-medium, 6px);
flex-shrink: 0;
}
@@ -21,17 +21,18 @@ 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'] {
+/* TODO: Remove */
+/* SPointShape[shape='Line'][size='l'] {
width: 16px;
height: 4px;
border-radius: 3px;
@@ -57,24 +58,24 @@ SPointShape[shape='Square'][size='m'] {
height: 12px;
border-radius: 2px;
margin-top: 4px;
-}
+} */
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 +98,7 @@ SCount[size='m'] {
SAdditionalLabel,
SCount {
- margin-left: 4px;
+ margin-left: var(--intergalactic-spacing-content-gap-small, 4px);
}
SAdditionalLabel {
@@ -113,7 +114,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..32599fe724 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 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));
+}
+
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..576ac23422 100644
--- a/semcore/d3-chart/src/style/tooltip.shadow.css
+++ b/semcore/d3-chart/src/style/tooltip.shadow.css
@@ -3,40 +3,49 @@
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.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-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] {
background-color: var(--color);
- width: 8px;
- height: 8px;
+ width: 10px;
+ height: 10px;
border-radius: 50%;
+ box-shadow: 0 0 0 1px oklch(from var(--color) calc(l + 0.2) c h);
}
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/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/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/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 efa843eec2..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: {
@@ -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.',
@@ -2005,6 +2009,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.',
@@ -3333,6 +3341,7 @@ type SemanticColors = {
x: {
axis: {
accent: {
+ tick: Value;
period: {
active: Value;
};
@@ -3447,6 +3456,11 @@ type SemanticShadows = {
DEFAULT: Value;
hover: Value;
};
+ chart: {
+ dot: {
+ elevated: Value;
+ };
+ };
control: {
elevated: 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 e63ea7640c..18cc6e9e8c 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",
@@ -538,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": []
},
@@ -656,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": []
},
@@ -795,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"
@@ -923,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)",
@@ -2732,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"
@@ -3017,6 +3024,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 +3057,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 +3087,7 @@
"description": "Inverted version of the default Tooltip background.",
"components": [
"base-components",
+ "d3-chart",
"tooltip"
]
},
@@ -3090,10 +3101,11 @@
},
{
"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",
+ "d3-chart",
"tooltip"
]
},
@@ -3208,6 +3220,14 @@
"description": "Hover state for the shadow of the Card with hover state.",
"components": []
},
+ {
+ "name": "--intergalactic-box-shadow-chart-dot-elevated",
+ "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"
+ ]
+ },
{
"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 +3364,7 @@
"base-components",
"bulk-textarea",
"counter",
+ "d3-chart",
"dropdown",
"dropdown-menu",
"input-tags",
@@ -3384,6 +3405,7 @@
"bulk-textarea",
"button",
"card",
+ "d3-chart",
"dropdown",
"fullscreen-modal",
"input",
@@ -3443,7 +3465,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 +3476,7 @@
"components": [
"base-trigger",
"bulk-textarea",
+ "d3-chart",
"date-picker",
"dropdown-menu",
"inline-input",
@@ -3469,6 +3494,7 @@
"base-trigger",
"button",
"checkbox",
+ "d3-chart",
"dropdown",
"dropdown-menu",
"input",
@@ -3487,6 +3513,7 @@
"breadcrumbs",
"button",
"checkbox",
+ "d3-chart",
"date-picker",
"dropdown",
"fullscreen-modal",
@@ -3502,6 +3529,7 @@
"value": "12px",
"description": "Extra large gap between elements, rows, or columns.",
"components": [
+ "d3-chart",
"fullscreen-modal",
"notice-bubble",
"pagination"
@@ -3512,6 +3540,7 @@
"value": "16px",
"description": "2x large gap between elements, rows, or columns.",
"components": [
+ "d3-chart",
"pagination",
"tab-line"
]