diff --git a/packages/lib/src/components/core/lume-axis/components/lume-tick/styles.scss b/packages/lib/src/components/core/lume-axis/components/lume-tick/styles.scss
index 344c7dcd..69c8bd3f 100644
--- a/packages/lib/src/components/core/lume-axis/components/lume-tick/styles.scss
+++ b/packages/lib/src/components/core/lume-axis/components/lume-tick/styles.scss
@@ -1,9 +1,9 @@
@use '@/styles/variables' as *;
-$axis-label-color: $lume-color-grey-50;
-$axis-label-hover-color: $lume-color-grey-70;
+$axis-label-color: $lume-color-neutral-80;
+$axis-label-hover-color: $lume-color-neutral-100;
-$axis-line-color: $lume-color-grey-20;
+$axis-line-color: $lume-color-neutral-20;
.axis {
&__grid-line {
diff --git a/packages/lib/src/components/core/lume-axis/defaults.ts b/packages/lib/src/components/core/lume-axis/defaults.ts
index 9b88de99..a8b0a020 100644
--- a/packages/lib/src/components/core/lume-axis/defaults.ts
+++ b/packages/lib/src/components/core/lume-axis/defaults.ts
@@ -15,7 +15,7 @@ const options: AxisOptions = {
/** Formatting string/function for the tick label. */
tickFormat: null,
/** Space between the tick label and the axis line. */
- tickPadding: 8,
+ tickPadding: 12,
};
export const xOptions: AxisOptions = {
diff --git a/packages/lib/src/components/core/lume-chart-legend/lume-chart-legend.vue b/packages/lib/src/components/core/lume-chart-legend/lume-chart-legend.vue
index 1d6e886b..f61a575f 100644
--- a/packages/lib/src/components/core/lume-chart-legend/lume-chart-legend.vue
+++ b/packages/lib/src/components/core/lume-chart-legend/lume-chart-legend.vue
@@ -7,7 +7,7 @@
{{ yAxisTitle }}
@@ -423,12 +423,14 @@ const shouldHideTooltip = computed(() => {
});
function handleInternalHover(index: number) {
+ if (allOptions.value.withHover === false) return;
+
// Skip the rest if the index didn't change
if (index === internalHoveredIndex.value) return;
// Update hoveredIndex
const oldIndex = internalHoveredIndex.value;
- allOptions.value.withHover !== false && (internalHoveredIndex.value = index);
+ internalHoveredIndex.value = index;
if (allOptions.value.withTooltip !== false) {
// Show/update tooltip
diff --git a/packages/lib/src/components/core/lume-chart/styles.scss b/packages/lib/src/components/core/lume-chart/styles.scss
index e67570b1..03096204 100644
--- a/packages/lib/src/components/core/lume-chart/styles.scss
+++ b/packages/lib/src/components/core/lume-chart/styles.scss
@@ -3,7 +3,7 @@
.lume-chart {
&__header {
&-section {
- display: flex;
+ display: grid;
align-items: center;
grid-template-columns: auto auto;
grid-template-areas: 'left right';
diff --git a/packages/lib/src/components/core/lume-tooltip/styles.scss b/packages/lib/src/components/core/lume-tooltip/styles.scss
index 92b05538..e1928189 100644
--- a/packages/lib/src/components/core/lume-tooltip/styles.scss
+++ b/packages/lib/src/components/core/lume-tooltip/styles.scss
@@ -8,17 +8,16 @@ $lume-tooltip-border-radius: $lume-border-radius-8 !default;
$lume-tooltip-box-shadow: $lume-box-shadow !default;
$lume-tooltip-max-width: 288px !default;
-$lume-tooltip-content-padding: $lume-spacing-10 !default;
+$lume-tooltip-content-padding: $lume-spacing-8 $lume-spacing-12 !default;
$lume-tooltip-z-index: 500 !default;
-$lume-tooltip-title-color: $lume-color-grey-100 !default;
+$lume-tooltip-title-color: $lume-color-neutral-100 !default;
-$lume-tooltip-item-color: $lume-color-grey-90 !default;
-$lume-tooltip-value-color: $lume-color-grey-100 !default;
+$lume-tooltip-item-color: $lume-color-neutral-100 !default;
+$lume-tooltip-value-color: $lume-color-neutral-100 !default;
-$lume-tooltip-item-line-height: $lume-line-height-sm !default;
$lume-tooltip-item-min-width: 112px !default;
-$lume-tooltip-symbol-size: $lume-spacing-10 !default;
+$lume-tooltip-symbol-size: $lume-spacing-8 !default;
.lume-tooltip {
position: absolute;
@@ -45,13 +44,15 @@ $lume-tooltip-symbol-size: $lume-spacing-10 !default;
margin-top: $lume-spacing-4;
margin-bottom: $lume-spacing-4;
border: 0;
- border-top: 1px solid $lume-color-grey-30;
+ border-top: 1px solid $lume-color-neutral-40;
}
}
&__title {
- margin-bottom: $lume-spacing-4;
- font-weight: $lume-font-weight-medium;
+ margin-bottom: $lume-spacing-6;
+ font-size: $lume-font-size-sm;
+ line-height: $lume-line-height-sm;
+ font-weight: $lume-font-weight-semi-bold;
color: $lume-tooltip-title-color;
}
@@ -65,6 +66,8 @@ $lume-tooltip-symbol-size: $lume-spacing-10 !default;
display: flex;
min-width: $lume-tooltip-item-min-width;
margin-bottom: $lume-spacing-4;
+ font-size: $lume-font-size-sm;
+ line-height: $lume-line-height-sm;
color: $lume-tooltip-item-color;
&:last-child {
@@ -74,7 +77,7 @@ $lume-tooltip-symbol-size: $lume-spacing-10 !default;
&__symbol {
margin-top: math.div(
- $lume-tooltip-item-line-height - $lume-tooltip-symbol-size,
+ $lume-line-height-sm - $lume-tooltip-symbol-size,
2
); // default: 3px
margin-right: $lume-spacing-8;
diff --git a/packages/lib/src/components/groups/lume-alluvial-group/styles.scss b/packages/lib/src/components/groups/lume-alluvial-group/styles.scss
index 1110fb5c..8d1e33a3 100644
--- a/packages/lib/src/components/groups/lume-alluvial-group/styles.scss
+++ b/packages/lib/src/components/groups/lume-alluvial-group/styles.scss
@@ -1,6 +1,6 @@
@use '@/styles/variables' as *;
-$lume-alluvial-text-color: $lume-color-grey-80;
+$lume-alluvial-text-color: $lume-color-neutral-100;
$lume-alluvial-node-opacity: 0.7 !default;
$lume-alluvial-node-opacity-faded: 0.3 !default;
diff --git a/packages/lib/src/components/groups/lume-line-group/styles.scss b/packages/lib/src/components/groups/lume-line-group/styles.scss
index b01829c5..c583828b 100644
--- a/packages/lib/src/components/groups/lume-line-group/styles.scss
+++ b/packages/lib/src/components/groups/lume-line-group/styles.scss
@@ -2,7 +2,7 @@
.lume-line-group {
&__overlay-line {
- stroke: $lume-color-grey-30;
+ stroke: $lume-color-neutral-60;
stroke-width: 1px;
stroke-dasharray: 2 2;
diff --git a/packages/lib/src/fonts/inter-regular.woff b/packages/lib/src/fonts/inter-400.woff
similarity index 100%
rename from packages/lib/src/fonts/inter-regular.woff
rename to packages/lib/src/fonts/inter-400.woff
diff --git a/packages/lib/src/fonts/inter-regular.woff2 b/packages/lib/src/fonts/inter-400.woff2
similarity index 100%
rename from packages/lib/src/fonts/inter-regular.woff2
rename to packages/lib/src/fonts/inter-400.woff2
diff --git a/packages/lib/src/fonts/inter-600.woff b/packages/lib/src/fonts/inter-600.woff
new file mode 100644
index 00000000..f44a508b
Binary files /dev/null and b/packages/lib/src/fonts/inter-600.woff differ
diff --git a/packages/lib/src/fonts/inter-600.woff2 b/packages/lib/src/fonts/inter-600.woff2
new file mode 100644
index 00000000..a89e46d5
Binary files /dev/null and b/packages/lib/src/fonts/inter-600.woff2 differ
diff --git a/packages/lib/src/styles/_titles.scss b/packages/lib/src/styles/_titles.scss
index 3e254823..24a88d2a 100644
--- a/packages/lib/src/styles/_titles.scss
+++ b/packages/lib/src/styles/_titles.scss
@@ -1,7 +1,7 @@
@use 'variables' as *;
-$lume-chart-title-color: $lume-color-grey-100 !default;
-$lume-axis-title-color: $lume-color-grey-80 !default;
+$lume-chart-title-color: $lume-color-neutral-100 !default;
+$lume-axis-title-color: $lume-color-neutral-100 !default;
.lume-chart-title {
color: $lume-chart-title-color;
diff --git a/packages/lib/src/styles/_typography.scss b/packages/lib/src/styles/_typography.scss
index 141141e3..860f3399 100644
--- a/packages/lib/src/styles/_typography.scss
+++ b/packages/lib/src/styles/_typography.scss
@@ -3,13 +3,13 @@
.lume-typography--display {
font-family: $lume-font-family;
font-size: $lume-font-size-lg;
- font-weight: $lume-font-weight-medium;
+ font-weight: $lume-font-weight-semi-bold;
line-height: $lume-line-height-lg;
}
.lume-typography--body {
font-family: $lume-font-family;
- font-size: $lume-font-size-md;
+ font-size: $lume-font-size-sm;
font-weight: $lume-font-weight-regular;
line-height: $lume-line-height-md;
}
diff --git a/packages/lib/src/styles/_utilities.scss b/packages/lib/src/styles/_utilities.scss
index 3488069f..d49ed318 100644
--- a/packages/lib/src/styles/_utilities.scss
+++ b/packages/lib/src/styles/_utilities.scss
@@ -77,7 +77,7 @@
}
&--negative {
- fill: $lume-color-grey-10;
+ fill: $lume-color-neutral-10;
pointer-events: none;
}
diff --git a/packages/lib/src/styles/_variables.scss b/packages/lib/src/styles/_variables.scss
index 723b6086..2530069d 100644
--- a/packages/lib/src/styles/_variables.scss
+++ b/packages/lib/src/styles/_variables.scss
@@ -10,7 +10,7 @@
$lume-border-width: 1px !default;
$lume-border-style: solid !default;
-$lume-border-color: $lume-color-grey-20 !default;
+$lume-border-color: $lume-color-neutral-40 !default;
$lume-border-radius-4: 4px !default;
$lume-border-radius-8: 8px !default;
$lume-border: $lume-border-width $lume-border-style $lume-border-color !default;
diff --git a/packages/lib/src/styles/font.scss b/packages/lib/src/styles/font.scss
index 6eb9e4cb..c05c69c1 100644
--- a/packages/lib/src/styles/font.scss
+++ b/packages/lib/src/styles/font.scss
@@ -11,8 +11,8 @@
font-family: 'Inter';
font-style: normal;
font-weight: 400;
- src: url('../fonts/inter-regular.woff2') format('woff2'),
- url('../fonts/inter-regular.woff') format('woff');
+ src: url('../fonts/inter-400.woff2') format('woff2'),
+ url('../fonts/inter-400.woff') format('woff');
}
/* inter-500 */
@@ -23,3 +23,12 @@
src: url('../fonts/inter-500.woff2') format('woff2'),
url('../fonts/inter-500.woff') format('woff');
}
+
+/* inter-600 */
+@font-face {
+ font-family: 'Inter';
+ font-style: normal;
+ font-weight: 600;
+ src: url('../fonts/inter-600.woff2') format('woff2'),
+ url('../fonts/inter-600.woff') format('woff');
+}
diff --git a/packages/lib/src/styles/variables/_colors.scss b/packages/lib/src/styles/variables/_colors.scss
index 3cd11194..f890268f 100644
--- a/packages/lib/src/styles/variables/_colors.scss
+++ b/packages/lib/src/styles/variables/_colors.scss
@@ -152,6 +152,13 @@ $lume-color-gold-map: (
$lume-color-white: #ffffff !default;
$lume-color-black: #00112c !default;
+$lume-color-neutral-10: #f7f7f8 !default;
+$lume-color-neutral-20: #eeeff1 !default;
+$lume-color-neutral-40: #dbdee2 !default;
+$lume-color-neutral-60: #8d95a3 !default;
+$lume-color-neutral-80: #5c687c !default;
+$lume-color-neutral-100: #00112c !default;
+
// Greys
$lume-color-grey-10: #f7f8f9 !default;
@@ -187,6 +194,13 @@ $lume-other-colors: (
'grey-100': $lume-color-grey-100,
'grey': $lume-color-grey-50,
+ 'neutral-10': $lume-color-neutral-10,
+ 'neutral-20': $lume-color-neutral-20,
+ 'neutral-40': $lume-color-neutral-40,
+ 'neutral-60': $lume-color-neutral-60,
+ 'neutral-80': $lume-color-neutral-80,
+ 'neutral-100': $lume-color-neutral-100,
+
'green': $lume-color-green,
'orange': $lume-color-orange,
'red': $lume-color-red,
diff --git a/packages/lib/src/styles/variables/_spacing.scss b/packages/lib/src/styles/variables/_spacing.scss
index 68286c71..90b03fa9 100644
--- a/packages/lib/src/styles/variables/_spacing.scss
+++ b/packages/lib/src/styles/variables/_spacing.scss
@@ -1,4 +1,5 @@
$lume-spacing-4: 4px !default;
+$lume-spacing-6: 6px !default;
$lume-spacing-8: 8px !default;
$lume-spacing-10: 10px !default;
$lume-spacing-12: 12px !default;
diff --git a/packages/lib/src/styles/variables/_typography.scss b/packages/lib/src/styles/variables/_typography.scss
index db76369f..f54d7552 100644
--- a/packages/lib/src/styles/variables/_typography.scss
+++ b/packages/lib/src/styles/variables/_typography.scss
@@ -11,12 +11,13 @@ $lume-font-size-lg: 20px !default;
// Line height
-$lume-line-height-xs: 14px !default;
-$lume-line-height-sm: 16px !default;
-$lume-line-height-md: 22px !default;
-$lume-line-height-lg: 28px !default;
+$lume-line-height-xs: 16px !default;
+$lume-line-height-sm: 18px !default;
+$lume-line-height-md: 20px !default;
+$lume-line-height-lg: 30px !default;
// Weight
$lume-font-weight-regular: 400 !default;
$lume-font-weight-medium: 500 !default;
+$lume-font-weight-semi-bold: 600 !default;