From accb1dcb5ade9f08304af06edc99a22a0d41b47e Mon Sep 17 00:00:00 2001 From: Liam Simmons Date: Mon, 16 Dec 2024 14:42:46 -0500 Subject: [PATCH 1/6] Add dark mode to card and remove text borders --- .../app/pb_kits/playbook/pb_gauge/_gauge.scss | 35 ++++++++++++++++++- .../playbook/pb_gauge/docs/_gauge_complex.jsx | 30 +++++++++++++--- 2 files changed, 59 insertions(+), 6 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss b/playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss index acb3391b69..4c0a840e1d 100644 --- a/playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss +++ b/playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss @@ -1,11 +1,20 @@ +@import "../tokens/colors"; + [class^=pb_gauge_kit] { + .fix { + fill: $text_lt_light; + stroke: none; + font: $regular $font_larger $font_family_base; + } .suffix { fill: $text_lt_light; + stroke: none; font: $regular $font_larger $font_family_base; } .prefix { fill: $text_lt_light; + stroke: none; font: $regular $font_base $font_family_base; } @@ -16,4 +25,28 @@ .gauge-pane { stroke-linejoin: round; } -} \ No newline at end of file + + &[class*=dark] { + color: $text_dk_light; + + .pb_title_kit_size_1, + .pb_caption_kit_xs { + color: $text_dk_light; + } + .fix { + fill: orange; + stroke: none; + font: $regular $font_larger $font_family_base; + } + .suffix { + fill: orange; + stroke: none; + font: $regular $font_larger $font_family_base; + } + .prefix { + fill: orange; + stroke: none; + font: $regular $font_base $font_family_base; + } +} +} diff --git a/playbook/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx b/playbook/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx index 6d0090e261..0583c4f296 100644 --- a/playbook/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +++ b/playbook/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx @@ -17,47 +17,60 @@ const GaugeComplex = (props) => ( gap="sm" padding="xl" wrap + {...props} > - <Flex align="stretch"> + <Flex + align="stretch" + {...props} + > <Flex marginRight="sm" orientation="column" + {...props} > <Body color="light" paddingBottom="sm" text="Total Abandoned" + {...props} /> <Flex align="baseline" paddingBottom="xs" + {...props} > <Title size={1} text="39" + {...props} /> <Title color="light" size={3} text="calls" + {...props} /> </Flex> <Caption size="xs" text="of 390" + {...props} /> </Flex> @@ -65,22 +78,29 @@ const GaugeComplex = (props) => ( alignSelf="stretch" marginRight="sm" orientation="vertical" + {...props} /> <Flex orientation="column" wrap + {...props} > <Body color="light" text="% Abandoned" - /> - <Flex wrap> + {...props} + /> + <Flex + wrap + {...props} + > <FlexItem fixedSize="150px" overflow="hidden" shrink - > + {...props} + > <Gauge chartData={data} disableAnimation @@ -90,7 +110,7 @@ const GaugeComplex = (props) => ( {...props} /> </FlexItem> - </Flex> + </Flex> </Flex> </Flex> </Card> From 980863092667d76068e3a34a39483fdc8a32ce6a Mon Sep 17 00:00:00 2001 From: Liam Simmons <liam.simmons@powerhrg.com> Date: Mon, 16 Dec 2024 15:35:05 -0500 Subject: [PATCH 2/6] refactor dark mode --- .../app/pb_kits/playbook/pb_gauge/_gauge.scss | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss b/playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss index 4c0a840e1d..0da930a6c3 100644 --- a/playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss +++ b/playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss @@ -33,20 +33,5 @@ .pb_caption_kit_xs { color: $text_dk_light; } - .fix { - fill: orange; - stroke: none; - font: $regular $font_larger $font_family_base; - } - .suffix { - fill: orange; - stroke: none; - font: $regular $font_larger $font_family_base; - } - .prefix { - fill: orange; - stroke: none; - font: $regular $font_base $font_family_base; - } -} + } } From fff9dd0d2e66dcb5d93cd1da0e54b06304acba32 Mon Sep 17 00:00:00 2001 From: Liam Simmons <liam.simmons@powerhrg.com> Date: Tue, 17 Dec 2024 13:07:00 -0500 Subject: [PATCH 3/6] Add dark class for fix, prefix, suffix --- playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss | 13 +++++++++++++ playbook/app/pb_kits/playbook/pb_gauge/_gauge.tsx | 6 +++--- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss b/playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss index 0da930a6c3..fdf4dcad56 100644 --- a/playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss +++ b/playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss @@ -6,16 +6,29 @@ fill: $text_lt_light; stroke: none; font: $regular $font_larger $font_family_base; + + &[class*=dark] { + fill: $text_dk_light; + } } + .suffix { fill: $text_lt_light; stroke: none; font: $regular $font_larger $font_family_base; + + &[class*=dark] { + fill: $text_dk_light; + } } .prefix { fill: $text_lt_light; stroke: none; font: $regular $font_base $font_family_base; + + &[class*=dark] { + fill: $text_dk_light; + } } rect.highcharts-background { diff --git a/playbook/app/pb_kits/playbook/pb_gauge/_gauge.tsx b/playbook/app/pb_kits/playbook/pb_gauge/_gauge.tsx index bb58c5f5ec..8a28e37c5e 100644 --- a/playbook/app/pb_kits/playbook/pb_gauge/_gauge.tsx +++ b/playbook/app/pb_kits/playbook/pb_gauge/_gauge.tsx @@ -164,9 +164,9 @@ const Gauge = ({ color: defaultColors.text_lt_default, enabled: true, format: - `<span class="prefix">${prefix}</span>` + - '<span class="fix">{y:,f}</span>' + - `<span class="suffix">${suffix}</span>`, + `<span class="prefix${dark ? " dark" : ""}">${prefix}</span>` + + `<span class="fix${dark ? " dark" : ""}">{y:,f}</span>` + + `<span class="suffix${dark ? " dark" : ""}">${suffix}</span>`, style: { fontFamily: typography.font_family_base, fontWeight: typography.regular, From 7d57d85044b0d80af0573a7eed6e50f6682c9de0 Mon Sep 17 00:00:00 2001 From: Liam Simmons <liam.simmons@powerhrg.com> Date: Wed, 18 Dec 2024 10:44:28 -0500 Subject: [PATCH 4/6] fix light mode styling for .fix --- playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss b/playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss index fdf4dcad56..6860eb967b 100644 --- a/playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss +++ b/playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss @@ -3,7 +3,7 @@ [class^=pb_gauge_kit] { .fix { - fill: $text_lt_light; + fill: $text_lt_default; stroke: none; font: $regular $font_larger $font_family_base; From f28f829a35a60b4f03c8092eb20b9d82f86b19c0 Mon Sep 17 00:00:00 2001 From: Liam Simmons <liam.simmons@powerhrg.com> Date: Wed, 18 Dec 2024 10:48:32 -0500 Subject: [PATCH 5/6] fix text size for .fix --- playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss b/playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss index 6860eb967b..adda4cef01 100644 --- a/playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss +++ b/playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss @@ -5,7 +5,6 @@ .fix { fill: $text_lt_default; stroke: none; - font: $regular $font_larger $font_family_base; &[class*=dark] { fill: $text_dk_light; From 92bc3fd7bd151bc2228f474a3e421e528da21572 Mon Sep 17 00:00:00 2001 From: Liam Simmons <liam.simmons@powerhrg.com> Date: Wed, 18 Dec 2024 10:54:09 -0500 Subject: [PATCH 6/6] Change text colors to match convention used in light mode --- playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss b/playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss index adda4cef01..52adb46725 100644 --- a/playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss +++ b/playbook/app/pb_kits/playbook/pb_gauge/_gauge.scss @@ -7,7 +7,7 @@ stroke: none; &[class*=dark] { - fill: $text_dk_light; + fill: $text_dk_default; } } @@ -39,7 +39,7 @@ } &[class*=dark] { - color: $text_dk_light; + color: $text_dk_default; .pb_title_kit_size_1, .pb_caption_kit_xs {