💄 Update various Lume styles

Adyen · Apr 24, 2024 · 268fcfb · 268fcfb
1 parent b3c22bf
commit 268fcfb
Show file tree

Hide file tree

Showing 21 changed files with 65 additions and 35 deletions.
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
@@ -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
@@ -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
@@ -7,7 +7,7 @@
     <div
       v-for="(dataset, index) in data"
       :key="`legend-item-${index}`"
-      class="lume-chart-legend__item lume-typography--body"
+      class="lume-chart-legend__item lume-typography--caption"
       tabindex="0"
       data-j-chart-legend__symbol-wrapper
       @click="emit('click', { index, dataset, event: $event })"

diff --git a/packages/lib/src/components/core/lume-chart-legend/styles.scss b/packages/lib/src/components/core/lume-chart-legend/styles.scss
@@ -1,6 +1,6 @@
 @use '@/styles/variables' as *;
 
-$legend-symbol-size: $lume-spacing-10 !default;
+$legend-symbol-size: $lume-spacing-8 !default;
 
 .lume-chart-legend {
   display: flex;
@@ -11,9 +11,9 @@ $legend-symbol-size: $lume-spacing-10 !default;
     align-items: center;
 
     padding: 0.25rem 0.5rem;
-    gap: 0.25rem;
+    gap: 0.5rem;
 
-    color: $lume-color-grey-80;
+    color: $lume-color-neutral-100;
 
     cursor: default;
   }

diff --git a/packages/lib/src/components/core/lume-chart/lume-chart.vue b/packages/lib/src/components/core/lume-chart/lume-chart.vue
@@ -33,7 +33,7 @@
           <!-- y axis title -->
           <h3
             v-if="showYAxisTitle"
-            class="lume-chart__axis-title lume-axis-title lume-typography--body"
+            class="lume-chart__axis-title lume-axis-title lume-typography--caption"
           >
             {{ yAxisTitle }}
           </h3>
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 → packages/lib/src/fonts/inter-400.woff b/packages/lib/src/fonts/inter-regular.woff → packages/lib/src/fonts/inter-400.woff
diff --git a/packages/lib/src/fonts/inter-regular.woff2 → packages/lib/src/fonts/inter-400.woff2 b/packages/lib/src/fonts/inter-regular.woff2 → 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
diff --git a/packages/lib/src/fonts/inter-600.woff2 b/packages/lib/src/fonts/inter-600.woff2
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;