Add dark mode to card and remove text borders

powerhome · Dec 16, 2024 · accb1dc · accb1dc
1 parent f07a662
commit accb1dc
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 6 deletions.
diff --git 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;
   }
-}
+
+  &[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
@@ -17,70 +17,90 @@ const GaugeComplex = (props) => (
       gap="sm"
       padding="xl"
       wrap
+      {...props}
   >
     <FlexItem
         flex={1}
         grow
+        {...props}
     >
       <Card
           maxWidth="xs"
           padding="md"
+          {...props}
       >
         <Title
             paddingBottom="sm"
             size={4}
             text="Abandoned Calls"
+            {...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>
 
           <SectionSeparator
               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>