From fedf5643a5bbd91de4d96a91ee13a3c7b9385116 Mon Sep 17 00:00:00 2001 From: Mukesh Date: Wed, 20 Aug 2025 17:53:24 +0200 Subject: [PATCH 1/2] feat: upgrading colours & font in wave 2.0 | SUP-49317 --- .../__snapshots__/FilePicker.spec.tsx.snap | 4 +- .../TabBar/__snapshots__/Link.spec.tsx.snap | 4 +- src/essentials/Colors/Colors.ts | 163 +++----- src/essentials/Colors/ModernColors.ts | 384 ++++++++---------- src/essentials/theme.ts | 2 +- 5 files changed, 235 insertions(+), 322 deletions(-) diff --git a/src/components/FilePicker/__snapshots__/FilePicker.spec.tsx.snap b/src/components/FilePicker/__snapshots__/FilePicker.spec.tsx.snap index 7ad06ec0c..81adc8358 100644 --- a/src/components/FilePicker/__snapshots__/FilePicker.spec.tsx.snap +++ b/src/components/FilePicker/__snapshots__/FilePicker.spec.tsx.snap @@ -66,7 +66,7 @@ exports[`when a file gets submitted component removes the initial button 1`] = ` .c7 { color: inherit; font-size: 1rem; - font-family: "Open Sans",sans-serif; + font-family: "Roboto Flex","Open Sans",sans-serif; line-height: 1.4; margin: 0; font-size: 0.875rem; @@ -75,7 +75,7 @@ exports[`when a file gets submitted component removes the initial button 1`] = ` .c8 { color: var(--wave-s-color-foreground-neutral-emphasized); font-size: 1rem; - font-family: "Open Sans",sans-serif; + font-family: "Roboto Flex","Open Sans",sans-serif; line-height: 1.4; margin: 0; font-size: 0.875rem; diff --git a/src/components/TabBar/__snapshots__/Link.spec.tsx.snap b/src/components/TabBar/__snapshots__/Link.spec.tsx.snap index f251891d0..c5542b529 100644 --- a/src/components/TabBar/__snapshots__/Link.spec.tsx.snap +++ b/src/components/TabBar/__snapshots__/Link.spec.tsx.snap @@ -12,7 +12,7 @@ exports[`TabBar.Link has a bright color if selected 1`] = ` cursor: pointer; font-size: 0.875rem; font-weight: 600; - font-family: "Open Sans",sans-serif; + font-family: "Roboto Flex","Open Sans",sans-serif; margin-right: 1.5rem; -webkit-text-decoration: none; text-decoration: none; @@ -53,7 +53,7 @@ exports[`TabBar.Link renders with default props 1`] = ` cursor: pointer; font-size: 0.875rem; font-weight: 600; - font-family: "Open Sans",sans-serif; + font-family: "Roboto Flex","Open Sans",sans-serif; margin-right: 1.5rem; -webkit-text-decoration: none; text-decoration: none; diff --git a/src/essentials/Colors/Colors.ts b/src/essentials/Colors/Colors.ts index 196a787e5..1435a1fe3 100644 --- a/src/essentials/Colors/Colors.ts +++ b/src/essentials/Colors/Colors.ts @@ -5,33 +5,7 @@ import { createThemeGlobalStyle } from './globalStyles'; export const Colors = { white: 'hsl(0, 0%, 100%)', black: 'hsl(0, 0%, 0%)', - neutral: { - 10: 'hsl(0, 0%, 11%)', - 20: 'hsl(0, 0%, 19%)', - 30: 'hsl(0, 0%, 28%)', - 40: 'hsl(0, 0%, 37%)', - 50: 'hsl(0, 0%, 47%)', - 60: 'hsl(0, 0%, 57%)', - 70: 'hsl(0, 0%, 67%)', - 80: 'hsl(0, 0%, 78%)', - 90: 'hsl(0, 0%, 89%)', - 95: 'hsl(0, 0%, 95%)', - 97: 'hsl(0, 0%, 98%)', - 99: 'hsl(0, 0%, 99%)' - }, blue: { - 10: 'hsl(214, 77%, 10%)', - 20: 'hsl(215, 75%, 20%)', - 30: 'hsl(214, 76%, 31%)', - 40: 'hsl(214, 75%, 41%)', - 50: 'hsl(214, 78%, 51%)', - 60: 'hsl(214, 78%, 61%)', - 70: 'hsl(214, 79%, 71%)', - 80: 'hsl(215, 78%, 80%)', - 90: 'hsl(215, 80%, 90%)', - 95: 'hsl(215, 76%, 95%)', - 97: 'hsl(218, 80%, 98%)', - primary: { 1100: 'hsl(211, 100%, 6%)', 900: 'hsl(211, 100%, 12%)', @@ -45,23 +19,14 @@ export const Colors = { 1000: 'hsl(212, 92%, 34%)', 900: 'hsl(212, 92%, 45%)', 350: 'hsl(212, 75%, 78%)', - 150: 'hsl(213, 74%, 91%)', + 150: 'hsl(214, 74%, 91%)', 100: 'hsl(211, 74%, 94%)', - 50: 'hsl(210, 75%, 97%)' + 50: 'hsl(210, 73%, 97%)' } }, red: { - 10: 'hsl(348, 100%, 13%)', - 20: 'hsl(345, 100%, 20%)', - 30: 'hsl(344, 100%, 29%)', - 40: 'hsl(342, 100%, 37%)', - 50: 'hsl(342, 100%, 45%)', - 60: 'hsl(352, 100%, 66%)', - 70: 'hsl(355, 100%, 76%)', - 80: 'hsl(357, 100%, 85%)', - 90: 'hsl(0, 100%, 93%)', - 95: 'hsl(3, 100%, 96%)', - 97: 'hsl(0, 100%, 98%)' + 1000: 'hsl(352, 92%, 39%)', + 900: 'hsl(352, 100%, 52%)' }, magenta: { 1000: 'hsl(302, 100%, 37%)', @@ -73,44 +38,18 @@ export const Colors = { 1000: 'hsl(149, 92%, 24%)', 900: 'hsl(149, 93%, 32%)', 350: 'hsl(149, 44%, 74%)', - - 10: 'hsl(124, 47%, 7%)', - 20: 'hsl(122, 47%, 13%)', - 30: 'hsl(124, 48%, 20%)', - 40: 'hsl(123, 48%, 26%)', - 50: 'hsl(123, 48%, 33%)', - 60: 'hsl(123, 27%, 46%)', - 70: 'hsl(124, 23%, 60%)', - 80: 'hsl(122, 24%, 73%)', - 90: 'hsl(124, 24%, 87%)', - 95: 'hsl(120, 24%, 93%)', - 97: 'hsl(120, 20%, 97%)' + 50: 'hsl(144, 50%, 96%)' }, yellow: { - 10: 'hsl(45, 92%, 5%)', - 20: 'hsl(45, 95%, 15%)', - 30: 'hsl(46, 94%, 25%)', - 40: 'hsl(46, 93%, 36%)', - 50: 'hsl(46, 94%, 46%)', - 60: 'hsl(46, 98%, 51%)', - 70: 'hsl(46, 98%, 61%)', - 80: 'hsl(46, 97%, 71%)', - 90: 'hsl(46, 98%, 80%)', - 95: 'hsl(46, 96%, 90%)', - 97: 'hsl(46, 100%, 95%)' + 900: 'hsl(48, 100%, 50%)', + 350: 'hsl(48, 100%, 81%)', + 50: 'hsl(48, 100%, 97%)' }, orange: { - 10: 'hsl(32, 92%, 10%)', - 20: 'hsl(32, 92%, 20%)', - 30: 'hsl(33, 92%, 30%)', - 40: 'hsl(32, 92%, 45%)', - 50: 'hsl(32, 92%, 50%)', - 60: 'hsl(32, 91%, 55%)', - 70: 'hsl(32, 91%, 65%)', - 80: 'hsl(32, 92%, 75%)', - 90: 'hsl(32, 92%, 85%)', - 95: 'hsl(32, 92%, 90%)', - 97: 'hsl(30, 100%, 96%)' + 1000: 'hsl(21, 96%, 38%)', + 900: 'hsl(21, 100%, 51%)', + 350: 'hsl(21, 100%, 81%)', + 50: 'hsl(20, 100%, 97%)' }, transparent: 'transparent' } as const; @@ -153,11 +92,11 @@ export const SemanticColors = { default: Colors.green[900] }, warning: { - default: Colors.yellow[60] + default: Colors.yellow[900] }, danger: { - default: Colors.orange[40], - emphasized: Colors.orange[30] + default: Colors.orange[900], + emphasized: Colors.orange[1000] } }, background: { @@ -191,15 +130,15 @@ export const SemanticColors = { emphasized: Colors.blue.secondary[900] }, success: { - default: Colors.green[97] + default: Colors.green[50] }, warning: { - default: Colors.yellow[97] + default: Colors.yellow[50] }, danger: { - faded: Colors.orange[97], - default: Colors.orange[40], - emphasized: Colors.orange[30] + faded: Colors.orange[50], + default: Colors.orange[900], + emphasized: Colors.orange[1000] } }, surface: { @@ -219,17 +158,17 @@ export const SemanticColors = { emphasized: Colors.blue.secondary[900] }, success: { - default: Colors.green[97], + default: Colors.green[50], emphasized: Colors.green[900] }, warning: { - default: Colors.yellow[97], - emphasized: Colors.yellow[60] + default: Colors.yellow[50], + emphasized: Colors.yellow[900] }, danger: { - faded: Colors.orange[97], - default: Colors.orange[97], - emphasized: Colors.orange[40] + faded: Colors.orange[50], + default: Colors.orange[50], + emphasized: Colors.orange[900] } }, backdrop: Colors.blue.primary[900] @@ -257,18 +196,18 @@ export const SemanticColors = { default: Colors.green[900] }, warning: { - banner: Colors.yellow[90], - default: Colors.yellow[60] + banner: Colors.yellow[350], + default: Colors.yellow[900] }, danger: { - banner: Colors.orange[80], - faded: Colors.orange[80], - default: Colors.orange[40] + banner: Colors.orange[350], + faded: Colors.orange[350], + default: Colors.orange[900] } }, logo: { - free: 'hsl(350, 91%, 41%)', - now: 'hsl(350, 91%, 41%)', + free: 'hsl(342, 100%, 45%)', + now: 'hsl(342, 100%, 45%)', subtitle: Colors.black, lyft: 'hsl(316, 81%, 56%)' }, @@ -320,11 +259,11 @@ export const SemanticColorsDarkSchema = { default: Colors.green[900] }, warning: { - default: Colors.yellow[60] + default: Colors.yellow[900] }, danger: { - default: Colors.orange[40], - emphasized: Colors.orange[30] + default: Colors.orange[900], + emphasized: Colors.orange[1000] } }, background: { @@ -358,15 +297,15 @@ export const SemanticColorsDarkSchema = { emphasized: Colors.blue.secondary[1000] }, success: { - default: Colors.green[97] + default: Colors.green[50] }, warning: { - default: Colors.yellow[97] + default: Colors.yellow[50] }, danger: { - faded: Colors.orange[30], - default: Colors.orange[40], - emphasized: Colors.orange[30] + faded: Colors.orange[1000], + default: Colors.orange[900], + emphasized: Colors.orange[1000] } }, surface: { @@ -391,12 +330,12 @@ export const SemanticColorsDarkSchema = { }, warning: { default: Colors.blue.primary[750], - emphasized: Colors.yellow[60] + emphasized: Colors.yellow[900] }, danger: { - faded: Colors.orange[80], + faded: Colors.orange[350], default: Colors.blue.primary[750], - emphasized: Colors.red[40] + emphasized: Colors.red[1000] } }, backdrop: Colors.blue.primary[50] @@ -424,20 +363,20 @@ export const SemanticColorsDarkSchema = { default: Colors.green[900] }, warning: { - banner: Colors.yellow[90], - default: Colors.yellow[60] + banner: Colors.yellow[350], + default: Colors.yellow[900] }, danger: { - banner: Colors.orange[80], - faded: Colors.orange[40], - default: Colors.orange[40] + banner: Colors.orange[350], + faded: Colors.orange[900], + default: Colors.orange[900] } }, logo: { - free: 'hsl(350, 91%, 41%)', + free: 'hsl(342, 100%, 45%)', now: Colors.white, subtitle: Colors.white, - lyft: Colors.white + lyft: 'hsl(316, 81%, 56%)' }, shadow: { default: Colors.blue.primary[550] diff --git a/src/essentials/Colors/ModernColors.ts b/src/essentials/Colors/ModernColors.ts index b3c4deb1c..bea6c1d48 100644 --- a/src/essentials/Colors/ModernColors.ts +++ b/src/essentials/Colors/ModernColors.ts @@ -6,80 +6,54 @@ export const Colors = { white: 'hsl(0, 0%, 99%)', black: 'hsl(0, 0%, 0%)', neutral: { - 10: 'hsl(0, 0%, 11%)', - 20: 'hsl(0, 0%, 19%)', - 30: 'hsl(0, 0%, 28%)', - 40: 'hsl(0, 0%, 37%)', - 50: 'hsl(0, 0%, 47%)', - 60: 'hsl(0, 0%, 57%)', - 70: 'hsl(0, 0%, 67%)', - 80: 'hsl(0, 0%, 78%)', - 90: 'hsl(0, 0%, 89%)', - 95: 'hsl(0, 0%, 95%)', - 97: 'hsl(0, 0%, 98%)', - 99: 'hsl(0, 0%, 99%)' + 900: 'hsl(0, 0%, 11%)', + 800: 'hsl(0, 0%, 19%)', + 750: 'hsl(0, 0%, 28%)', + 650: 'hsl(0, 0%, 37%)', + 550: 'hsl(0, 0%, 47%)', + 350: 'hsl(0, 0%, 67%)', + 200: 'hsl(0, 0%, 78%)', + 50: 'hsl(0, 0%, 95%)', + 10: 'hsl(0, 0%, 98%)' }, primary: { - 10: 'hsl(348, 100%, 13%)', - 20: 'hsl(345, 100%, 20%)', - 30: 'hsl(344, 100%, 29%)', - 40: 'hsl(342, 100%, 37%)', - 50: 'hsl(342, 100%, 45%)', - 60: 'hsl(352, 100%, 66%)', - 70: 'hsl(355, 100%, 76%)', - 80: 'hsl(357, 100%, 85%)', - 90: 'hsl(0, 100%, 93%)', - 95: 'hsl(3, 100%, 96%)', - 97: 'hsl(0, 100%, 98%)' + 1100: 'hsl(348, 100%, 13%)', + 1000: 'hsl(345, 100%, 20%)', + 950: 'hsl(344, 100%, 29%)', + 900: 'hsl(342, 100%, 37%)', + 500: 'hsl(342, 100%, 45%)', + 350: 'hsl(352, 100%, 66%)', + 150: 'hsl(355, 100%, 76%)', + 120: 'hsl(357, 100%, 85%)', + 100: 'hsl(0, 100%, 93%)', + 50: 'hsl(3, 100%, 96%)', + 10: 'hsl(0, 100%, 98%)' }, brand: { - freenow: 'hsl(342, 100%, 45%)', // RED-50 + rushhour: 'hsl(342, 100%, 45%)', lyft: 'hsl(316, 81%, 56%)' }, magenta: { - 1000: 'hsl(302, 100%, 18%)', - 900: 'hsl(302, 100%, 33%)', - 350: 'hsl(311, 100%, 84%)', - 50: 'hsl(324, 100%, 96%)' + 1000: 'hsl(302, 100%, 37%)', + 900: 'hsl(302, 100%, 50%)', + 350: 'hsl(302, 100%, 81%)', + 50: 'hsl(300, 100%, 97%)' }, green: { - 10: 'hsl(124, 47%, 7%)', - 20: 'hsl(122, 47%, 13%)', - 30: 'hsl(124, 48%, 20%)', - 40: 'hsl(123, 48%, 26%)', - 50: 'hsl(123, 48%, 33%)', - 60: 'hsl(123, 27%, 46%)', - 70: 'hsl(124, 23%, 60%)', - 80: 'hsl(122, 24%, 73%)', - 90: 'hsl(124, 24%, 87%)', - 95: 'hsl(120, 24%, 93%)', - 97: 'hsl(120, 20%, 97%)' + 1000: 'hsl(124, 47%, 7%)', + 900: 'hsl(123, 48%, 33%)', + 350: 'hsl(123, 27%, 46%)', + 50: 'hsl(120, 24%, 93%)' }, yellow: { - 10: 'hsl(45, 92%, 5%)', - 20: 'hsl(45, 95%, 15%)', - 30: 'hsl(46, 94%, 25%)', - 40: 'hsl(46, 93%, 36%)', - 50: 'hsl(46, 94%, 46%)', - 60: 'hsl(46, 98%, 51%)', - 70: 'hsl(46, 98%, 61%)', - 80: 'hsl(46, 97%, 71%)', - 90: 'hsl(46, 98%, 80%)', - 95: 'hsl(46, 96%, 90%)', - 97: 'hsl(46, 100%, 95%)' + 900: 'hsl(46, 94%, 46%)', + 350: 'hsl(46, 98%, 61%)', + 50: 'hsl(46, 100%, 95%)' }, red: { - 10: 'hsl(348, 100%, 13%)', - 20: 'hsl(345, 100%, 20%)', - 30: 'hsl(344, 100%, 29%)', - 40: 'hsl(342, 100%, 37%)', - 50: 'hsl(342, 100%, 45%)', - 60: 'hsl(352, 100%, 66%)', - 70: 'hsl(355, 100%, 76%)', - 80: 'hsl(357, 100%, 85%)', - 90: 'hsl(0, 100%, 93%)', - 95: 'hsl(3, 100%, 96%)', - 97: 'hsl(0, 100%, 98%)' + 1000: 'hsl(345, 100%, 20%)', + 900: 'hsl(342, 100%, 37%)', + 350: 'hsl(357, 100%, 85%)' }, transparent: 'transparent' } as const; @@ -90,72 +64,72 @@ export const SemanticColors = { white: Colors.white, transparent: Colors.transparent, foreground: { - primary: Colors.neutral[10], + primary: Colors.neutral[900], accent: { - default: Colors.primary[40], - emphasized: Colors.primary[20] + default: Colors.primary[900], + emphasized: Colors.primary[950] }, neutral: { - faded: Colors.neutral[80], - default: Colors.neutral[60], - emphasized: Colors.neutral[40] + faded: Colors.neutral[200], + default: Colors.neutral[350], + emphasized: Colors.neutral[550] }, 'on-background': { primary: Colors.white, accent: Colors.white, - neutral: Colors.neutral[10], + neutral: Colors.neutral[900], disabled: Colors.white, info: Colors.white, success: Colors.white, - warning: Colors.neutral[10], + warning: Colors.neutral[900], danger: Colors.white }, - disabled: Colors.neutral[80], - focus: Colors.neutral[40], + disabled: Colors.neutral[200], + focus: Colors.neutral[550], info: { - faded: Colors.neutral[40], - default: Colors.neutral[10] + faded: Colors.neutral[550], + default: Colors.neutral[900] }, success: { - default: Colors.green[40] + default: Colors.green[900] }, warning: { - default: Colors.yellow[60] + default: Colors.yellow[900] }, danger: { - default: Colors.red[40], - emphasized: Colors.red[30] + default: Colors.red[900], + emphasized: Colors.red[1000] } }, background: { page: { default: Colors.white, - 'elevation-0': Colors.neutral[95], + 'elevation-0': Colors.neutral[10], 'elevation-1': Colors.white, 'elevation-2': Colors.white, 'elevation-3': Colors.white }, element: { primary: { - default: Colors.primary[40], - emphasized: Colors.primary[20] + default: Colors.primary[500], + emphasized: Colors.primary[900] }, disabled: { - faded: Colors.neutral[90], - default: Colors.neutral[80] + faded: Colors.neutral[50], + default: Colors.neutral[200] }, neutral: { default: Colors.white, - emphasized: Colors.neutral[90] + emphasized: Colors.neutral[50] }, accent: { faded: Colors.primary[50], - default: Colors.primary[70], - emphasized: Colors.primary[40] + default: Colors.primary[500], + emphasized: Colors.primary[900] }, info: { - default: Colors.neutral[90], - emphasized: Colors.neutral[40] + default: Colors.neutral[50], + emphasized: Colors.neutral[550] }, success: { default: Colors.white @@ -165,90 +139,90 @@ export const SemanticColors = { }, danger: { faded: Colors.primary[50], - default: Colors.red[40], - emphasized: Colors.red[30] + default: Colors.red[900], + emphasized: Colors.red[1000] } }, surface: { primary: { - default: Colors.neutral[40], - emphasized: Colors.neutral[10] + default: Colors.neutral[550], + emphasized: Colors.neutral[900] }, neutral: { - faded: Colors.neutral[90], - default: Colors.white, - emphasized: Colors.neutral[40] + faded: Colors.neutral[10], + default: Colors.neutral[50], + emphasized: Colors.neutral[200] }, info: { - faded: Colors.primary[95], - active: Colors.primary[80], - default: Colors.neutral[90], - emphasized: Colors.neutral[40] + faded: Colors.primary[100], + active: Colors.primary[150], + default: Colors.neutral[50], + emphasized: Colors.neutral[550] }, success: { - default: Colors.white, - emphasized: Colors.green[40] + default: Colors.neutral[50], + emphasized: Colors.green[900] }, warning: { - default: Colors.white, - emphasized: Colors.yellow[60] + default: Colors.neutral[50], + emphasized: Colors.yellow[900] }, danger: { faded: Colors.primary[50], - default: Colors.white, - emphasized: Colors.red[40] + default: Colors.neutral[50], + emphasized: Colors.red[900] } }, - backdrop: Colors.neutral[10] + backdrop: Colors.neutral[900] }, border: { accent: { - faded: Colors.primary[70], - default: Colors.primary[40] + faded: Colors.primary[350], + default: Colors.primary[500] }, neutral: { - faded: Colors.neutral[90], - default: Colors.neutral[80], - emphasized: Colors.neutral[40] + faded: Colors.neutral[50], + default: Colors.neutral[200], + emphasized: Colors.neutral[550] }, - disabled: Colors.neutral[80], - focus: Colors.neutral[40], + disabled: Colors.neutral[200], + focus: Colors.neutral[550], info: { - banner: Colors.neutral[80], - faded: Colors.neutral[80], - default: Colors.neutral[40] + banner: Colors.neutral[200], + faded: Colors.neutral[200], + default: Colors.neutral[550] }, success: { - banner: Colors.neutral[80], - faded: Colors.green[60], - default: Colors.green[40] + banner: Colors.neutral[200], + faded: Colors.green[350], + default: Colors.green[900] }, warning: { - banner: Colors.neutral[80], - default: Colors.yellow[60] + banner: Colors.neutral[200], + default: Colors.yellow[900] }, danger: { - banner: Colors.neutral[80], - faded: Colors.red[80], - default: Colors.red[40] + banner: Colors.neutral[200], + faded: Colors.red[350], + default: Colors.red[900] } }, logo: { - free: Colors.brand.freenow, - now: Colors.brand.freenow, + free: Colors.brand.rushhour, + now: Colors.brand.rushhour, subtitle: Colors.black, lyft: Colors.brand.lyft }, shadow: { - default: Colors.neutral[80] + default: Colors.neutral[200] }, chart: { '1': Colors.primary[50], - '2': Colors.primary[90], - '3': Colors.primary[70], - '4': Colors.primary[60], - '5': Colors.primary[30], - '6': Colors.primary[10] + '2': Colors.primary[120], + '3': Colors.primary[350], + '4': Colors.primary[500], + '5': Colors.primary[950], + '6': Colors.primary[1100] } } satisfies SemanticColorsSchema; @@ -260,162 +234,162 @@ export const SemanticColorsDarkSchema = { primary: Colors.white, accent: { default: Colors.white, - emphasized: Colors.neutral[60] + emphasized: Colors.neutral[350] }, neutral: { - faded: Colors.neutral[60], - default: Colors.neutral[60], - emphasized: Colors.neutral[80] + faded: Colors.neutral[350], + default: Colors.neutral[350], + emphasized: Colors.neutral[200] }, 'on-background': { - primary: Colors.primary[40], - accent: Colors.primary[40], - neutral: Colors.neutral[10], - disabled: Colors.neutral[60], + primary: Colors.primary[900], + accent: Colors.primary[900], + neutral: Colors.neutral[900], + disabled: Colors.neutral[350], info: Colors.white, success: Colors.white, - warning: Colors.neutral[10], + warning: Colors.neutral[900], danger: Colors.white }, - disabled: Colors.neutral[40], + disabled: Colors.neutral[550], focus: Colors.white, info: { faded: Colors.white, default: Colors.white }, success: { - default: Colors.green[40] + default: Colors.green[900] }, warning: { - default: Colors.yellow[60] + default: Colors.yellow[900] }, danger: { - default: Colors.red[40], + default: Colors.red[900], emphasized: Colors.primary[50] } }, background: { page: { - default: Colors.neutral[20], - 'elevation-0': Colors.neutral[10], - 'elevation-1': Colors.neutral[20], - 'elevation-2': Colors.neutral[30], - 'elevation-3': Colors.neutral[40] + default: Colors.neutral[800], + 'elevation-0': Colors.neutral[900], + 'elevation-1': Colors.neutral[750], + 'elevation-2': Colors.neutral[650], + 'elevation-3': Colors.neutral[550] }, element: { primary: { - default: Colors.neutral[90], + default: Colors.neutral[50], emphasized: Colors.white }, accent: { - faded: Colors.primary[20], - default: Colors.primary[40], - emphasized: Colors.primary[70] + faded: Colors.primary[900], + default: Colors.primary[500], + emphasized: Colors.primary[350] }, disabled: { - faded: Colors.neutral[30], - default: Colors.neutral[40] + faded: Colors.neutral[650], + default: Colors.neutral[550] }, neutral: { - default: Colors.neutral[60], + default: Colors.neutral[350], emphasized: Colors.white }, info: { - default: Colors.neutral[60], - emphasized: Colors.neutral[40] + default: Colors.neutral[350], + emphasized: Colors.neutral[550] }, success: { - default: Colors.green[90] + default: Colors.green[50] }, warning: { - default: Colors.yellow[97] + default: Colors.yellow[50] }, danger: { - faded: Colors.red[30], - default: Colors.red[40], - emphasized: Colors.red[30] + faded: Colors.red[1000], + default: Colors.red[900], + emphasized: Colors.red[1000] } }, surface: { primary: { - default: Colors.neutral[40], - emphasized: Colors.neutral[80] + default: Colors.neutral[550], + emphasized: Colors.neutral[200] }, neutral: { - faded: Colors.neutral[60], - default: Colors.neutral[40], - emphasized: Colors.neutral[40] + faded: Colors.neutral[350], + default: Colors.neutral[550], + emphasized: Colors.neutral[550] }, info: { - faded: Colors.primary[40], - active: Colors.primary[40], - default: Colors.primary[20], - emphasized: Colors.neutral[40] + faded: Colors.primary[900], + active: Colors.primary[900], + default: Colors.primary[1000], + emphasized: Colors.neutral[550] }, success: { - default: Colors.neutral[20], - emphasized: Colors.green[40] + default: Colors.neutral[750], + emphasized: Colors.green[900] }, warning: { - default: Colors.neutral[20], - emphasized: Colors.yellow[60] + default: Colors.neutral[750], + emphasized: Colors.yellow[900] }, danger: { - faded: Colors.red[30], - default: Colors.neutral[20], - emphasized: Colors.red[40] + faded: Colors.red[1000], + default: Colors.neutral[750], + emphasized: Colors.red[900] } }, - backdrop: Colors.neutral[90] + backdrop: Colors.neutral[50] }, border: { accent: { - faded: Colors.primary[70], - default: Colors.primary[70] + faded: Colors.primary[350], + default: Colors.primary[500] }, neutral: { - faded: Colors.neutral[90], - default: Colors.neutral[80], - emphasized: Colors.neutral[90] + faded: Colors.neutral[50], + default: Colors.neutral[200], + emphasized: Colors.neutral[50] }, - disabled: Colors.neutral[40], - focus: Colors.neutral[40], + disabled: Colors.neutral[550], + focus: Colors.neutral[550], info: { - banner: Colors.neutral[80], - faded: Colors.neutral[40], - default: Colors.neutral[40] + banner: Colors.neutral[200], + faded: Colors.neutral[550], + default: Colors.neutral[550] }, success: { - banner: Colors.green[40], - faded: Colors.green[40], - default: Colors.green[40] + banner: Colors.green[900], + faded: Colors.green[900], + default: Colors.green[900] }, warning: { - banner: Colors.yellow[60], - default: Colors.yellow[60] + banner: Colors.yellow[900], + default: Colors.yellow[900] }, danger: { - banner: Colors.red[40], - faded: Colors.red[40], - default: Colors.red[40] + banner: Colors.red[900], + faded: Colors.red[900], + default: Colors.red[900] } }, logo: { - free: Colors.brand.freenow, + free: Colors.brand.rushhour, now: Colors.white, subtitle: Colors.white, lyft: Colors.white }, shadow: { - default: Colors.neutral[30] + default: Colors.neutral[650] }, chart: { '1': Colors.primary[50], - '2': Colors.primary[90], - '3': Colors.primary[80], - '4': Colors.primary[70], - '5': Colors.primary[60], - '6': Colors.primary[30] + '2': Colors.primary[120], + '3': Colors.primary[150], + '4': Colors.primary[350], + '5': Colors.primary[500], + '6': Colors.primary[950] } } satisfies SemanticColorsSchema; diff --git a/src/essentials/theme.ts b/src/essentials/theme.ts index a26ba78ca..a2facbfbe 100644 --- a/src/essentials/theme.ts +++ b/src/essentials/theme.ts @@ -11,7 +11,7 @@ const theme: DefaultTheme = { bold: 700 }, fonts: { - normal: fontStack(['Open Sans', 'sans-serif']), + normal: fontStack(['Roboto Flex', 'Open Sans', 'sans-serif']), monospace: fontStack(['Hack', 'monospace']) }, mediaQueries: MediaQueries, From 270ac75f4ec006b0a8993f0c37701c442803f837 Mon Sep 17 00:00:00 2001 From: Mukesh Date: Tue, 26 Aug 2025 10:18:03 +0200 Subject: [PATCH 2/2] feat: updated typography of wave design system --- jest.config.js | 5 ++- package-lock.json | 31 +++++++++++++++++++ package.json | 2 ++ .../__snapshots__/FilePicker.spec.tsx.snap | 4 +-- .../TabBar/__snapshots__/Link.spec.tsx.snap | 4 +-- src/essentials/Colors/globalStyles.ts | 22 ++++++++++--- src/essentials/theme.ts | 2 +- 7 files changed, 60 insertions(+), 10 deletions(-) diff --git a/jest.config.js b/jest.config.js index 1d94854b0..bab6d6771 100644 --- a/jest.config.js +++ b/jest.config.js @@ -7,5 +7,8 @@ module.exports = { testRegex: '(test|spec)\\.tsx?$', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'svg'], setupFiles: ['jest-date-mock'], - setupFilesAfterEnv: ['/src/utils/testing.ts'] + setupFilesAfterEnv: ['/src/utils/testing.ts'], + moduleNameMapper: { + '@fontsource': 'identity-obj-proxy' + } }; diff --git a/package-lock.json b/package-lock.json index f9692c093..816e303ed 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "Apache-2.0", "dependencies": { "@datepicker-react/hooks": "^2.3.1", + "@fontsource-variable/roboto-flex": "^5.2.6", "@popperjs/core": "^2.11.5", "@styled-system/theme-get": "^5.1.2", "@types/react-select": "^4.0.18", @@ -75,6 +76,7 @@ "eslint-plugin-storybook": "^0.8.0", "eslint-plugin-unicorn": "^34.0.1", "husky": "^4.2.3", + "identity-obj-proxy": "^3.0.0", "jest": "^26.6.3", "jest-axe": "^3.4.0", "jest-date-mock": "^1.0.8", @@ -3200,6 +3202,15 @@ "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==", "license": "MIT" }, + "node_modules/@fontsource-variable/roboto-flex": { + "version": "5.2.6", + "resolved": "https://registry.npmjs.org/@fontsource-variable/roboto-flex/-/roboto-flex-5.2.6.tgz", + "integrity": "sha512-8jUDGkb6gRUexJkdUz1GThB9fshF7ENe/vVmtf+nz2MxQZZsrrYT92tST3xM+xf/BnoqL6yRkGdv9zNITiyYCw==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@formatjs/ecma402-abstract": { "version": "2.3.4", "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.3.4.tgz", @@ -20754,6 +20765,13 @@ "node": ">=6" } }, + "node_modules/harmony-reflect": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz", + "integrity": "sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==", + "dev": true, + "license": "(Apache-2.0 OR MPL-1.1)" + }, "node_modules/has-bigints": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz", @@ -21295,6 +21313,19 @@ "postcss": "^8.1.0" } }, + "node_modules/identity-obj-proxy": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz", + "integrity": "sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==", + "dev": true, + "license": "MIT", + "dependencies": { + "harmony-reflect": "^1.4.6" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/ieee754": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", diff --git a/package.json b/package.json index 86c007401..99d12b984 100644 --- a/package.json +++ b/package.json @@ -130,6 +130,7 @@ "eslint-plugin-storybook": "^0.8.0", "eslint-plugin-unicorn": "^34.0.1", "husky": "^4.2.3", + "identity-obj-proxy": "^3.0.0", "jest": "^26.6.3", "jest-axe": "^3.4.0", "jest-date-mock": "^1.0.8", @@ -161,6 +162,7 @@ }, "dependencies": { "@datepicker-react/hooks": "^2.3.1", + "@fontsource-variable/roboto-flex": "^5.2.6", "@popperjs/core": "^2.11.5", "@styled-system/theme-get": "^5.1.2", "@types/react-select": "^4.0.18", diff --git a/src/components/FilePicker/__snapshots__/FilePicker.spec.tsx.snap b/src/components/FilePicker/__snapshots__/FilePicker.spec.tsx.snap index 81adc8358..05de82704 100644 --- a/src/components/FilePicker/__snapshots__/FilePicker.spec.tsx.snap +++ b/src/components/FilePicker/__snapshots__/FilePicker.spec.tsx.snap @@ -66,7 +66,7 @@ exports[`when a file gets submitted component removes the initial button 1`] = ` .c7 { color: inherit; font-size: 1rem; - font-family: "Roboto Flex","Open Sans",sans-serif; + font-family: "Roboto Flex Variable","Open Sans",sans-serif; line-height: 1.4; margin: 0; font-size: 0.875rem; @@ -75,7 +75,7 @@ exports[`when a file gets submitted component removes the initial button 1`] = ` .c8 { color: var(--wave-s-color-foreground-neutral-emphasized); font-size: 1rem; - font-family: "Roboto Flex","Open Sans",sans-serif; + font-family: "Roboto Flex Variable","Open Sans",sans-serif; line-height: 1.4; margin: 0; font-size: 0.875rem; diff --git a/src/components/TabBar/__snapshots__/Link.spec.tsx.snap b/src/components/TabBar/__snapshots__/Link.spec.tsx.snap index c5542b529..8d301168f 100644 --- a/src/components/TabBar/__snapshots__/Link.spec.tsx.snap +++ b/src/components/TabBar/__snapshots__/Link.spec.tsx.snap @@ -12,7 +12,7 @@ exports[`TabBar.Link has a bright color if selected 1`] = ` cursor: pointer; font-size: 0.875rem; font-weight: 600; - font-family: "Roboto Flex","Open Sans",sans-serif; + font-family: "Roboto Flex Variable","Open Sans",sans-serif; margin-right: 1.5rem; -webkit-text-decoration: none; text-decoration: none; @@ -53,7 +53,7 @@ exports[`TabBar.Link renders with default props 1`] = ` cursor: pointer; font-size: 0.875rem; font-weight: 600; - font-family: "Roboto Flex","Open Sans",sans-serif; + font-family: "Roboto Flex Variable","Open Sans",sans-serif; margin-right: 1.5rem; -webkit-text-decoration: none; text-decoration: none; diff --git a/src/essentials/Colors/globalStyles.ts b/src/essentials/Colors/globalStyles.ts index 2ac73e252..0cef1ebfa 100644 --- a/src/essentials/Colors/globalStyles.ts +++ b/src/essentials/Colors/globalStyles.ts @@ -1,5 +1,7 @@ import { createGlobalStyle, DefaultTheme, GlobalStyleComponent } from 'styled-components'; +import '@fontsource-variable/roboto-flex/index.css'; + import { generateBareTierCssVariables, generateSemanticTierCssVariables, @@ -23,7 +25,7 @@ export const createThemeGlobalStyle = ( color-scheme: dark; ${generateSemanticTierCssVariables(darkScheme)} } - + .light-scheme { color-scheme: light; ${generateSemanticTierCssVariables(lightScheme)} @@ -35,12 +37,24 @@ export const createThemeGlobalStyle = ( ${generateSemanticTierCssVariables(darkScheme)} } } - + body, .wave { color: ${getSemanticValue('foreground-primary')}; - background-color: ${getSemanticValue('background-page-default')} + background-color: ${getSemanticValue('background-page-default')}; + font-family: "Roboto Flex Variable", system-ui, sans-serif; + font-style: normal; + font-variation-settings: + "GRAD" 0, + "XOPQ" 100, + "XTRA" 506, + "YOPQ" 85, + "YTAS" 730, + "YTDE" -203, + "YTFI" 738, + "YTLC" 550, + "YTUC" 712; } - + svg { fill: currentColor; } diff --git a/src/essentials/theme.ts b/src/essentials/theme.ts index a2facbfbe..1e3b99b9a 100644 --- a/src/essentials/theme.ts +++ b/src/essentials/theme.ts @@ -11,7 +11,7 @@ const theme: DefaultTheme = { bold: 700 }, fonts: { - normal: fontStack(['Roboto Flex', 'Open Sans', 'sans-serif']), + normal: fontStack(['Roboto Flex Variable', 'Open Sans', 'sans-serif']), monospace: fontStack(['Hack', 'monospace']) }, mediaQueries: MediaQueries,