From accb1dcb5ade9f08304af06edc99a22a0d41b47e Mon Sep 17 00:00:00 2001 From: Liam Simmons Date: Mon, 16 Dec 2024 14:42:46 -0500 Subject: [PATCH] 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>