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;