sistent: fix dark-light theme colors for components

Signed-off-by: lakshya <[email protected]>
layer5io · Mar 17, 2024 · f0f0d84 · f0f0d84
1 parent 92e1cfa
commit f0f0d84
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 23 deletions.
diff --git a/src/sections/Projects/Sistent/components/button/code.js b/src/sections/Projects/Sistent/components/button/code.js
@@ -8,6 +8,7 @@ import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
 import { SistentLayout } from "../../sistent-layout";
 
 import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 
 const codes = [
   `  <SistentThemeProvider>
@@ -36,6 +37,7 @@ const codes = [
 
 export const ButtonCode = () => {
   const location = useLocation();
+  const { isDark } = useStyledDarkMode();
 
   return (
     <SistentLayout title="Button">
@@ -97,7 +99,7 @@ export const ButtonCode = () => {
           </p>
           <div className="showcase">
             <div className="items">
-              <SistentThemeProvider>
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
                 <Button variant="contained">Filled</Button>
               </SistentThemeProvider>
             </div>
@@ -109,7 +111,7 @@ export const ButtonCode = () => {
           </p>
           <div className="showcase">
             <div className="items">
-              <SistentThemeProvider>
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
                 <Button variant="outlined">Outlined</Button>
               </SistentThemeProvider>
             </div>
@@ -122,7 +124,7 @@ export const ButtonCode = () => {
           </p>
           <div className="showcase">
             <div className="items">
-              <SistentThemeProvider>
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
                 <Button variant="text">Text</Button>
               </SistentThemeProvider>
             </div>
@@ -137,7 +139,7 @@ export const ButtonCode = () => {
           </p>
           <div className="showcase">
             <div className="items">
-              <SistentThemeProvider>
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
                 <Button
                   variant="contained"
                   size="medium"
@@ -162,7 +164,7 @@ export const ButtonCode = () => {
           </p>
           <div className="showcase">
             <div className="items">
-              <SistentThemeProvider>
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
                 <Button
                   variant="contained"
                   size="medium"

diff --git a/src/sections/Projects/Sistent/components/button/guidance.js b/src/sections/Projects/Sistent/components/button/guidance.js
@@ -6,9 +6,11 @@ import { Button, SistentThemeProvider } from "@layer5/sistent";
 import { SistentLayout } from "../../sistent-layout";
 
 import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 
 export const ButtonGuidance = () => {
   const location = useLocation();
+  const { isDark } = useStyledDarkMode();
 
   return (
     <SistentLayout title="Button">
@@ -78,7 +80,7 @@ export const ButtonGuidance = () => {
             button.
           </p>
           <Row Hcenter className="image-container">
-            <SistentThemeProvider>
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Button
                 variant="contained"
                 label="Primary"
@@ -99,7 +101,7 @@ export const ButtonGuidance = () => {
             serves as the secondary button
           </p>
           <Row Hcenter className="image-container">
-            <SistentThemeProvider>
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Button
                 variant="outlined"
                 label="Secondary"
@@ -118,7 +120,7 @@ export const ButtonGuidance = () => {
             button.
           </p>
           <Row Hcenter className="image-container">
-            <SistentThemeProvider>
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Button variant="text" label="Tertiary" size="medium" />
             </SistentThemeProvider>
           </Row>
@@ -133,7 +135,7 @@ export const ButtonGuidance = () => {
             added to them to achieve this necessary distinction.
           </p>
           <Row Hcenter className="image-container">
-            <SistentThemeProvider>
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Button color="warning" label="Call to Action" size="medium" />
             </SistentThemeProvider>
           </Row>
@@ -145,7 +147,7 @@ export const ButtonGuidance = () => {
             is required in order to proceed.
           </p>
           <Row Hcenter className="image-container">
-            <SistentThemeProvider>
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Button color="error" label="Danger" size="medium" />
             </SistentThemeProvider>
           </Row>

diff --git a/src/sections/Projects/Sistent/components/button/index.js b/src/sections/Projects/Sistent/components/button/index.js
@@ -6,9 +6,11 @@ import { SistentThemeProvider, Button } from "@layer5/sistent";
 import TabButton from "../../../../../reusecore/Button";
 import { SistentLayout } from "../../sistent-layout";
 import { Col, Row } from "../../../../../reusecore/Layout";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 
 const SistentButton = () => {
   const location = useLocation();
+  const { isDark } = useStyledDarkMode();
 
   return (
     <SistentLayout title="Button">
@@ -79,7 +81,7 @@ const SistentButton = () => {
             color in a brand’s color palette.
           </p>
           <Row Hcenter className="image-container">
-            <SistentThemeProvider>
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Button variant="contained" label="Filled" size="medium" />
             </SistentThemeProvider>
           </Row>
@@ -92,7 +94,7 @@ const SistentButton = () => {
             with brand guidelines.
           </p>
           <Row Hcenter className="image-container">
-            <SistentThemeProvider>
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Button variant="outlined" label="Outlined" size="medium" />
             </SistentThemeProvider>
           </Row>
@@ -104,7 +106,7 @@ const SistentButton = () => {
             states for easier identification.
           </p>
           <Row Hcenter className="image-container">
-            <SistentThemeProvider>
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Button variant="text" label="Text" size="medium" />
             </SistentThemeProvider>
           </Row>
@@ -129,7 +131,7 @@ const SistentButton = () => {
             across these different resolutions.
           </p>
           <Row Hcenter className="image-container">
-            <SistentThemeProvider>
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Button variant="contained" label="56px / 3.5rem" size="large" />
             </SistentThemeProvider>
           </Row>
@@ -140,7 +142,7 @@ const SistentButton = () => {
             in different capacities across these screen sizes.
           </p>
           <Row Hcenter className="image-container">
-            <SistentThemeProvider>
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Button variant="contained" label="48px / 3rem" size="medium" />
             </SistentThemeProvider>
           </Row>
@@ -153,7 +155,7 @@ const SistentButton = () => {
           </p>
           <Row Hcenter className="image-container">
             <Col sm={12}>
-              <SistentThemeProvider>
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
                 <Button variant="contained" label="Full width" fullWidth />
               </SistentThemeProvider>
             </Col>

diff --git a/src/sections/Projects/Sistent/components/text-input/guidance.js b/src/sections/Projects/Sistent/components/text-input/guidance.js
@@ -7,8 +7,10 @@ import { SistentThemeProvider, Input } from "@layer5/sistent";
 import { SistentLayout } from "../../sistent-layout";
 
 import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 export const TextInputGuidance = () => {
   const location = useLocation();
+  const { isDark } = useStyledDarkMode();
 
   return (
     <SistentLayout title="Text Input">
@@ -77,7 +79,7 @@ export const TextInputGuidance = () => {
             input, however, they can included when extremely necessary.
           </p>
           <Row Hcenter>
-            <SistentThemeProvider>
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Input placeholder="Placeholder goes here" />
             </SistentThemeProvider>
           </Row>
@@ -88,7 +90,7 @@ export const TextInputGuidance = () => {
             of lines of text entered into the text field.
           </p>
           <Row Hcenter>
-            <SistentThemeProvider>
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Input placeholder="Placeholder goes here" multiline />
             </SistentThemeProvider>
           </Row>

diff --git a/src/sections/Projects/Sistent/components/text-input/index.js b/src/sections/Projects/Sistent/components/text-input/index.js
@@ -7,9 +7,12 @@ import { SistentThemeProvider, Input } from "@layer5/sistent";
 import { Row } from "../../../../../reusecore/Layout";
 import TabButton from "../../../../../reusecore/Button";
 import { SistentLayout } from "../../sistent-layout";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 
 const SistentTextInput = () => {
   const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
   return (
     <SistentLayout title="Text Input">
       <div className="content">
@@ -77,7 +80,7 @@ const SistentTextInput = () => {
             data and receive corresponding information.
           </p>
           <Row Hcenter>
-            <SistentThemeProvider>
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Input placeholder="Placeholder goes here" type="text" />
             </SistentThemeProvider>
           </Row>
@@ -100,7 +103,7 @@ const SistentTextInput = () => {
             these different resolutions.
           </p>
           <Row Hcenter>
-            <SistentThemeProvider>
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Input
                 placeholder="Placeholder goes here"
                 type="text"
@@ -115,7 +118,7 @@ const SistentTextInput = () => {
             in different capacities across these screen sizes.
           </p>
           <Row Hcenter>
-            <SistentThemeProvider>
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Input
                 placeholder="Placeholder goes here"
                 type="text"

diff --git a/src/sections/Projects/Sistent/sistent.style.js b/src/sections/Projects/Sistent/sistent.style.js
@@ -801,7 +801,7 @@ const SistentWrapper = styled.div`
   }
 
   .showcase {
-    border: 1px solid ${(props) => props.theme.whiteToGreyE6E6E6};
+    border: 1px solid ${(props) => props.theme.grey212121ToGreyF0F0F0};
     margin: 0.8rem 0 2.5rem 0;
     border-radius: 10px;
     .items {
@@ -813,7 +813,7 @@ const SistentWrapper = styled.div`
     }
 
     .show-code {
-      border-top: 1px solid ${(props) => props.theme.whiteToGreyE6E6E6};
+      border-top: 1px solid ${(props) => props.theme.grey212121ToGreyF0F0F0};
       padding: 0.7rem 1rem;
     }