From 7208b7f6aac3c5471b15f782fbe96ff4f7a19478 Mon Sep 17 00:00:00 2001 From: M-DEV-1 Date: Fri, 23 May 2025 17:33:30 +0530 Subject: [PATCH 1/8] replace: images with color cards with copiable hex codes and sistent tokens Signed-off-by: M-DEV-1 --- .../Projects/Sistent/identity/color/index.js | 150 ++++++++++++++++-- 1 file changed, 138 insertions(+), 12 deletions(-) diff --git a/src/sections/Projects/Sistent/identity/color/index.js b/src/sections/Projects/Sistent/identity/color/index.js index b226e78bd53c6..33d599c133d81 100644 --- a/src/sections/Projects/Sistent/identity/color/index.js +++ b/src/sections/Projects/Sistent/identity/color/index.js @@ -1,20 +1,102 @@ -import React from "react"; +import React, { useState } from "react"; import { navigate } from "gatsby"; import { Row, Col } from "../../../../../reusecore/Layout"; import { useLocation } from "@reach/router"; import Button from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import TonalPallete from "../../../../../assets/images/app/projects/sistent/tonal-palettes.png"; -import TonalPalleteDark from "../../../../../assets/images/app/projects/sistent/tonal-palettes-dark.png"; import ContextVisuals1 from "../../../../../assets/images/app/projects/sistent/context-visuals-1.png"; import ContextVisuals2 from "../../../../../assets/images/app/projects/sistent/context-visuals-2.png"; import ContextVisuals3 from "../../../../../assets/images/app/projects/sistent/context-visuals-3.png"; import ContextVisuals4 from "../../../../../assets/images/app/projects/sistent/context-visuals-4.png"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; +import { useTheme, Tooltip, Snackbar, IconButton, styled, NoSsr } from "@layer5/sistent"; +import { SistentLayout } from "../../sistent-layout"; +import ContentCopyIcon from "@mui/icons-material/ContentCopy"; + +const ColorCards = styled("div")(() => ({ + display: "flex", + flexWrap: "wrap", + gap: "2rem", + margin: "2rem 0", + justifyContent: "center", +})); + +const ColorCard = styled("div")(() => ({ + width: "300px", + borderRadius: "8px", + boxShadow: "0px 5px 10px 1px rgba(0, 179, 159, 0.5)", + cursor: "pointer", + userSelect: "none", +})); + +const Swatch = styled("div")(({ color }) => ({ + height: "100px", + borderRadius: "8px 8px 0 0", + color: color, +})); + +const ColorInfo = styled("div")(() => ({ + padding: "1rem", + textAlign: "center", +})); + +const CodeRow = styled("div")(() => ({ + display: "flex", + alignItems: "center", + justifyContent: "center", + gap: "0.5rem", + fontFamily: "monospace", + fontSize: "0.85rem", + userSelect: "text", + padding: "6px 10px", +})); const SistentIdentityColor = () => { const location = useLocation(); const { isDark } = useStyledDarkMode(); + const theme = useTheme(); + + const colors = [ + { + name: "Keppel Green", + color: theme.palette.background.brand?.default, + hex: "#00B39F", + token: "theme.palette.background.brand.default", + }, + { + name: "Caribbean Green", + color: "#00D3A9", + hex: "#00D3A9", + token: "theme.palette.background.graphics.default", + }, + { + name: "Saffron Yellow", + color: "#EBC017", + hex: "#EBC017", + token: "theme.palette.background.cta.default", + }, + { + name: "Charcoal", + color: theme.palette.background.default, + hex: "#3C494F", + token: "theme.palette.background.default", + }, + { + name: "Accent Grey", + color: theme.palette.background.secondary, + hex: "#51636b", + token: "theme.palette.background.secondary", + }, + ]; + + const [snackbarOpen, setSnackbarOpen] = useState(false); + const [snackbarMsg, setSnackbarMsg] = useState(""); + + const handleCopy = (text) => { + navigator.clipboard.writeText(text).then(() => { + setSnackbarMsg(`Copied ${text} to clipboard!`); + setSnackbarOpen(true); + }); + }; return ( @@ -139,14 +221,52 @@ const SistentIdentityColor = () => { to complement these greens and create harmonious implementations. These five colors combine to form a foundation for the color system.

- - - Tonal Palette - - + + + {colors.map(({ name, color, hex, token }, idx) => ( + + + +

{name}

+ + HEX: {hex} + + handleCopy(hex)} + aria-label={`Copy HEX color code of ${name}`} + sx={{ + color: theme.palette.icon?.default, + '&:hover': { + color: theme.palette.icon?.brand, + }, + }} + > + + + + + + Sistent Token + + handleCopy(token)} + aria-label={`Copy Sistent token of ${name}`} + sx={{ + color: theme.palette.icon?.default, + '&:hover': { + color: theme.palette.icon?.brand, + }, + }} + > + + + + + + + ))} + +

Layer Hirarchy

 @@ -254,6 +374,12 @@ const SistentIdentityColor = () => {

+ setSnackbarOpen(false)} + message={snackbarMsg} + /> ); }; From f41d7b0110a2401e3cbefbffa13158a01e509df9 Mon Sep 17 00:00:00 2001 From: M-DEV-1 Date: Fri, 23 May 2025 17:34:29 +0530 Subject: [PATCH 2/8] fix: grammar Signed-off-by: M-DEV-1 --- src/sections/Projects/Sistent/identity/color/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/sections/Projects/Sistent/identity/color/index.js b/src/sections/Projects/Sistent/identity/color/index.js index 33d599c133d81..2c7d20916d4a3 100644 --- a/src/sections/Projects/Sistent/identity/color/index.js +++ b/src/sections/Projects/Sistent/identity/color/index.js @@ -236,7 +236,7 @@ const SistentIdentityColor = () => { aria-label={`Copy HEX color code of ${name}`} sx={{ color: theme.palette.icon?.default, - '&:hover': { + "&:hover": { color: theme.palette.icon?.brand, }, }} @@ -253,7 +253,7 @@ const SistentIdentityColor = () => { aria-label={`Copy Sistent token of ${name}`} sx={{ color: theme.palette.icon?.default, - '&:hover': { + "&:hover": { color: theme.palette.icon?.brand, }, }} @@ -267,8 +267,8 @@ const SistentIdentityColor = () => { ))} - -

Layer Hirarchy

+ +

Layer Hierarchy

For backgrounds and surfaces, colors in the neutral palettes are From 9e36add347b07e3897edaca3f14d0919cf9ed3d8 Mon Sep 17 00:00:00 2001 From: M-DEV-1 Date: Tue, 17 Jun 2025 09:46:19 +0530 Subject: [PATCH 3/8] add: rgb colors Signed-off-by: M-DEV-1 --- .../Projects/Sistent/identity/color/index.js | 118 +++++++++++------- 1 file changed, 70 insertions(+), 48 deletions(-) diff --git a/src/sections/Projects/Sistent/identity/color/index.js b/src/sections/Projects/Sistent/identity/color/index.js index 2c7d20916d4a3..ce4a363729af5 100644 --- a/src/sections/Projects/Sistent/identity/color/index.js +++ b/src/sections/Projects/Sistent/identity/color/index.js @@ -7,8 +7,7 @@ import ContextVisuals1 from "../../../../../assets/images/app/projects/sistent/c import ContextVisuals2 from "../../../../../assets/images/app/projects/sistent/context-visuals-2.png"; import ContextVisuals3 from "../../../../../assets/images/app/projects/sistent/context-visuals-3.png"; import ContextVisuals4 from "../../../../../assets/images/app/projects/sistent/context-visuals-4.png"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import { useTheme, Tooltip, Snackbar, IconButton, styled, NoSsr } from "@layer5/sistent"; +import { useTheme, Tooltip, Snackbar, IconButton, styled, NoSsr, SistentThemeProvider } from "@layer5/sistent"; import { SistentLayout } from "../../sistent-layout"; import ContentCopyIcon from "@mui/icons-material/ContentCopy"; @@ -52,7 +51,6 @@ const CodeRow = styled("div")(() => ({ const SistentIdentityColor = () => { const location = useLocation(); - const { isDark } = useStyledDarkMode(); const theme = useTheme(); const colors = [ @@ -60,30 +58,35 @@ const SistentIdentityColor = () => { name: "Keppel Green", color: theme.palette.background.brand?.default, hex: "#00B39F", + rgb: "0, 179, 159", token: "theme.palette.background.brand.default", }, { name: "Caribbean Green", color: "#00D3A9", hex: "#00D3A9", + rgb: "0, 211, 169", token: "theme.palette.background.graphics.default", }, { name: "Saffron Yellow", color: "#EBC017", hex: "#EBC017", + rgb: "235, 192, 23", token: "theme.palette.background.cta.default", }, { name: "Charcoal", color: theme.palette.background.default, hex: "#3C494F", + rgb: "60, 73, 79", token: "theme.palette.background.default", }, { name: "Accent Grey", color: theme.palette.background.secondary, - hex: "#51636b", + hex: "#647881", + rgb: "100, 120, 129", token: "theme.palette.background.secondary", }, ]; @@ -222,50 +225,69 @@ const SistentIdentityColor = () => { These five colors combine to form a foundation for the color system.

- - {colors.map(({ name, color, hex, token }, idx) => ( - - - -

{name}

- - HEX: {hex} - - handleCopy(hex)} - aria-label={`Copy HEX color code of ${name}`} - sx={{ - color: theme.palette.icon?.default, - "&:hover": { - color: theme.palette.icon?.brand, - }, - }} - > - - - - - - Sistent Token - - handleCopy(token)} - aria-label={`Copy Sistent token of ${name}`} - sx={{ - color: theme.palette.icon?.default, - "&:hover": { - color: theme.palette.icon?.brand, - }, - }} - > - - - - - - - ))} - + + + {colors.map(({ name, color, hex, token, rgb }, idx) => ( + + + +

{name}

+ + HEX: {hex} + + handleCopy(hex)} + aria-label={`Copy HEX color code of ${name}`} + sx={{ + color: theme.palette.icon?.default, + "&:hover": { + color: theme.palette.icon?.brand, + }, + }} + > + + + + + + Sistent Token + + handleCopy(token)} + aria-label={`Copy Sistent token of ${name}`} + sx={{ + color: theme.palette.icon?.default, + "&:hover": { + color: theme.palette.icon?.brand, + }, + }} + > + + + + + + RGB + + handleCopy(rgb)} + aria-label={`Copy RGB of ${name}`} + sx={{ + color: theme.palette.icon?.default, + "&:hover": { + color: theme.palette.icon?.brand, + }, + }} + > + + + + + + + ))} + +

Layer Hierarchy

From 97414054a2c2728c50b10d256760d5017527a148 Mon Sep 17 00:00:00 2001 From: M-DEV-1 Date: Tue, 17 Jun 2025 10:17:51 +0530 Subject: [PATCH 4/8] use copy button from sistent, fix rgb format Signed-off-by: M-DEV-1 --- .../Projects/Sistent/identity/color/index.js | 147 +++++++++--------- 1 file changed, 71 insertions(+), 76 deletions(-) diff --git a/src/sections/Projects/Sistent/identity/color/index.js b/src/sections/Projects/Sistent/identity/color/index.js index ce4a363729af5..4c7df718c707d 100644 --- a/src/sections/Projects/Sistent/identity/color/index.js +++ b/src/sections/Projects/Sistent/identity/color/index.js @@ -7,9 +7,8 @@ import ContextVisuals1 from "../../../../../assets/images/app/projects/sistent/c import ContextVisuals2 from "../../../../../assets/images/app/projects/sistent/context-visuals-2.png"; import ContextVisuals3 from "../../../../../assets/images/app/projects/sistent/context-visuals-3.png"; import ContextVisuals4 from "../../../../../assets/images/app/projects/sistent/context-visuals-4.png"; -import { useTheme, Tooltip, Snackbar, IconButton, styled, NoSsr, SistentThemeProvider } from "@layer5/sistent"; +import { useTheme, Tooltip, Snackbar, IconButton, styled, CopyIcon} from "@layer5/sistent"; import { SistentLayout } from "../../sistent-layout"; -import ContentCopyIcon from "@mui/icons-material/ContentCopy"; const ColorCards = styled("div")(() => ({ display: "flex", @@ -30,7 +29,7 @@ const ColorCard = styled("div")(() => ({ const Swatch = styled("div")(({ color }) => ({ height: "100px", borderRadius: "8px 8px 0 0", - color: color, + backgroundColor: color, })); const ColorInfo = styled("div")(() => ({ @@ -56,37 +55,37 @@ const SistentIdentityColor = () => { const colors = [ { name: "Keppel Green", - color: theme.palette.background.brand?.default, + color: "#00B39F", hex: "#00B39F", - rgb: "0, 179, 159", + rgb: "rgb(0, 179, 159)", token: "theme.palette.background.brand.default", }, { name: "Caribbean Green", color: "#00D3A9", hex: "#00D3A9", - rgb: "0, 211, 169", + rgb: "rgb(0, 211, 169)", token: "theme.palette.background.graphics.default", }, { name: "Saffron Yellow", color: "#EBC017", hex: "#EBC017", - rgb: "235, 192, 23", + rgb: "rgb(235, 192, 23)", token: "theme.palette.background.cta.default", }, { name: "Charcoal", - color: theme.palette.background.default, + color: "#3C494F", hex: "#3C494F", - rgb: "60, 73, 79", + rgb: "rgb(60, 73, 79)", token: "theme.palette.background.default", }, { name: "Accent Grey", - color: theme.palette.background.secondary, + color: "#647881", hex: "#647881", - rgb: "100, 120, 129", + rgb: "rgb(100, 120, 129)", token: "theme.palette.background.secondary", }, ]; @@ -224,71 +223,67 @@ const SistentIdentityColor = () => { to complement these greens and create harmonious implementations. These five colors combine to form a foundation for the color system.

- - - - {colors.map(({ name, color, hex, token, rgb }, idx) => ( - - - -

{name}

- - HEX: {hex} - - handleCopy(hex)} - aria-label={`Copy HEX color code of ${name}`} - sx={{ - color: theme.palette.icon?.default, - "&:hover": { - color: theme.palette.icon?.brand, - }, - }} - > - - - - - - Sistent Token - - handleCopy(token)} - aria-label={`Copy Sistent token of ${name}`} - sx={{ - color: theme.palette.icon?.default, - "&:hover": { - color: theme.palette.icon?.brand, - }, - }} - > - - - - - - RGB - - handleCopy(rgb)} - aria-label={`Copy RGB of ${name}`} - sx={{ - color: theme.palette.icon?.default, - "&:hover": { - color: theme.palette.icon?.brand, - }, - }} - > - - - - - - - ))} - - - + + {colors.map(({ name, color, hex, token, rgb }, idx) => ( + + + +

{name}

+ + HEX: {hex} + + handleCopy(hex)} + aria-label={`Copy HEX color code of ${name}`} + sx={{ + color: theme.palette.icon?.default, + "&:hover": { + color: theme.palette.icon?.brand, + }, + }} + > + + + + + + Sistent Token + + handleCopy(token)} + aria-label={`Copy Sistent token of ${name}`} + sx={{ + color: theme.palette.icon?.default, + "&:hover": { + color: theme.palette.icon?.brand, + }, + }} + > + + + + + + RGB + + handleCopy(rgb)} + aria-label={`Copy RGB of ${name}`} + sx={{ + color: theme.palette.icon?.default, + "&:hover": { + color: theme.palette.icon?.brand, + }, + }} + > + + + + + + + ))} +

Layer Hierarchy

 From c36e39aabc8364ee6a4a60fd06a9664274728751 Mon Sep 17 00:00:00 2001 From: M-DEV-1 Date: Tue, 17 Jun 2025 10:25:09 +0530 Subject: [PATCH 5/8] fix: copy button icon Signed-off-by: M-DEV-1 --- src/sections/Projects/Sistent/identity/color/index.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/sections/Projects/Sistent/identity/color/index.js b/src/sections/Projects/Sistent/identity/color/index.js index 4c7df718c707d..0223fb570d9a5 100644 --- a/src/sections/Projects/Sistent/identity/color/index.js +++ b/src/sections/Projects/Sistent/identity/color/index.js @@ -7,8 +7,9 @@ import ContextVisuals1 from "../../../../../assets/images/app/projects/sistent/c import ContextVisuals2 from "../../../../../assets/images/app/projects/sistent/context-visuals-2.png"; import ContextVisuals3 from "../../../../../assets/images/app/projects/sistent/context-visuals-3.png"; import ContextVisuals4 from "../../../../../assets/images/app/projects/sistent/context-visuals-4.png"; -import { useTheme, Tooltip, Snackbar, IconButton, styled, CopyIcon} from "@layer5/sistent"; +import { useTheme, Tooltip, Snackbar, IconButton, styled } from "@layer5/sistent"; import { SistentLayout } from "../../sistent-layout"; +import { ContentCopyIcon } from "@mui/icons-material" const ColorCards = styled("div")(() => ({ display: "flex", @@ -242,7 +243,7 @@ const SistentIdentityColor = () => { }, }} > - + @@ -259,7 +260,7 @@ const SistentIdentityColor = () => { }, }} > - + @@ -276,7 +277,7 @@ const SistentIdentityColor = () => { }, }} > - + From 852532881492929bb4c5d988f8b36221220d947e Mon Sep 17 00:00:00 2001 From: M-DEV-1 Date: Tue, 17 Jun 2025 10:47:24 +0530 Subject: [PATCH 6/8] add no-ssr Signed-off-by: M-DEV-1 --- .../Projects/Sistent/identity/color/index.js | 128 +++++++++--------- 1 file changed, 65 insertions(+), 63 deletions(-) diff --git a/src/sections/Projects/Sistent/identity/color/index.js b/src/sections/Projects/Sistent/identity/color/index.js index 0223fb570d9a5..763a7d0378a12 100644 --- a/src/sections/Projects/Sistent/identity/color/index.js +++ b/src/sections/Projects/Sistent/identity/color/index.js @@ -7,9 +7,9 @@ import ContextVisuals1 from "../../../../../assets/images/app/projects/sistent/c import ContextVisuals2 from "../../../../../assets/images/app/projects/sistent/context-visuals-2.png"; import ContextVisuals3 from "../../../../../assets/images/app/projects/sistent/context-visuals-3.png"; import ContextVisuals4 from "../../../../../assets/images/app/projects/sistent/context-visuals-4.png"; -import { useTheme, Tooltip, Snackbar, IconButton, styled } from "@layer5/sistent"; +import { useTheme, Tooltip, Snackbar, IconButton, styled, NoSsr } from "@layer5/sistent"; import { SistentLayout } from "../../sistent-layout"; -import { ContentCopyIcon } from "@mui/icons-material" +import { ContentCopyIcon } from "@mui/icons-material"; const ColorCards = styled("div")(() => ({ display: "flex", @@ -224,67 +224,69 @@ const SistentIdentityColor = () => { to complement these greens and create harmonious implementations. These five colors combine to form a foundation for the color system.

- - {colors.map(({ name, color, hex, token, rgb }, idx) => ( - - - -

{name}

- - HEX: {hex} - - handleCopy(hex)} - aria-label={`Copy HEX color code of ${name}`} - sx={{ - color: theme.palette.icon?.default, - "&:hover": { - color: theme.palette.icon?.brand, - }, - }} - > - - - - - - Sistent Token - - handleCopy(token)} - aria-label={`Copy Sistent token of ${name}`} - sx={{ - color: theme.palette.icon?.default, - "&:hover": { - color: theme.palette.icon?.brand, - }, - }} - > - - - - - - RGB - - handleCopy(rgb)} - aria-label={`Copy RGB of ${name}`} - sx={{ - color: theme.palette.icon?.default, - "&:hover": { - color: theme.palette.icon?.brand, - }, - }} - > - - - - - - - ))} - + + + {colors.map(({ name, color, hex, token, rgb }, idx) => ( + + + +

{name}

+ + HEX: {hex} + + handleCopy(hex)} + aria-label={`Copy HEX color code of ${name}`} + sx={{ + color: theme.palette.icon?.default, + "&:hover": { + color: theme.palette.icon?.brand, + }, + }} + > + + + + + + Sistent Token + + handleCopy(token)} + aria-label={`Copy Sistent token of ${name}`} + sx={{ + color: theme.palette.icon?.default, + "&:hover": { + color: theme.palette.icon?.brand, + }, + }} + > + + + + + + RGB + + handleCopy(rgb)} + aria-label={`Copy RGB of ${name}`} + sx={{ + color: theme.palette.icon?.default, + "&:hover": { + color: theme.palette.icon?.brand, + }, + }} + > + + + + + + + ))} + +

Layer Hierarchy

 From 0277257cb3e6b13ffc28e3bdcc87df1004a71be2 Mon Sep 17 00:00:00 2001 From: mahadevan <135952571+M-DEV-1@users.noreply.github.com> Date: Tue, 17 Jun 2025 10:53:32 +0530 Subject: [PATCH 7/8] update and fix the copy icon import Signed-off-by: mahadevan <135952571+M-DEV-1@users.noreply.github.com> --- src/sections/Projects/Sistent/identity/color/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sections/Projects/Sistent/identity/color/index.js b/src/sections/Projects/Sistent/identity/color/index.js index 763a7d0378a12..e9c9ebf6a8199 100644 --- a/src/sections/Projects/Sistent/identity/color/index.js +++ b/src/sections/Projects/Sistent/identity/color/index.js @@ -9,7 +9,7 @@ import ContextVisuals3 from "../../../../../assets/images/app/projects/sistent/c import ContextVisuals4 from "../../../../../assets/images/app/projects/sistent/context-visuals-4.png"; import { useTheme, Tooltip, Snackbar, IconButton, styled, NoSsr } from "@layer5/sistent"; import { SistentLayout } from "../../sistent-layout"; -import { ContentCopyIcon } from "@mui/icons-material"; +import ContentCopyIcon from "@mui/icons-material/ContentCopy"; const ColorCards = styled("div")(() => ({ display: "flex", From 74541ace93af193aa7b6b3d4f0570141c3dfe5e3 Mon Sep 17 00:00:00 2001 From: mahadevan <135952571+M-DEV-1@users.noreply.github.com> Date: Sat, 5 Jul 2025 17:02:03 +0530 Subject: [PATCH 8/8] replace @layer5/sistent with @sistent/sistent Signed-off-by: mahadevan <135952571+M-DEV-1@users.noreply.github.com> --- src/sections/Projects/Sistent/identity/color/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sections/Projects/Sistent/identity/color/index.js b/src/sections/Projects/Sistent/identity/color/index.js index e9c9ebf6a8199..a3547bad62399 100644 --- a/src/sections/Projects/Sistent/identity/color/index.js +++ b/src/sections/Projects/Sistent/identity/color/index.js @@ -7,7 +7,7 @@ import ContextVisuals1 from "../../../../../assets/images/app/projects/sistent/c import ContextVisuals2 from "../../../../../assets/images/app/projects/sistent/context-visuals-2.png"; import ContextVisuals3 from "../../../../../assets/images/app/projects/sistent/context-visuals-3.png"; import ContextVisuals4 from "../../../../../assets/images/app/projects/sistent/context-visuals-4.png"; -import { useTheme, Tooltip, Snackbar, IconButton, styled, NoSsr } from "@layer5/sistent"; +import { useTheme, Tooltip, Snackbar, IconButton, styled, NoSsr } from "@sistent/sistent"; import { SistentLayout } from "../../sistent-layout"; import ContentCopyIcon from "@mui/icons-material/ContentCopy";