From 31695ff23da265b7d3f37644bfb1cb8fe5a23785 Mon Sep 17 00:00:00 2001 From: Namanv0509 Date: Sat, 5 Jul 2025 22:05:16 +0530 Subject: [PATCH 1/9] [UI] Sistent Identity Code page update images with the tables html Signed-off-by: Namanv0509 --- .../Projects/Sistent/identity/color/code.js | 838 ++++++++++++++++-- 1 file changed, 774 insertions(+), 64 deletions(-) diff --git a/src/sections/Projects/Sistent/identity/color/code.js b/src/sections/Projects/Sistent/identity/color/code.js index ab3809d9f7b9d..882d4e7894437 100644 --- a/src/sections/Projects/Sistent/identity/color/code.js +++ b/src/sections/Projects/Sistent/identity/color/code.js @@ -23,6 +23,491 @@ import { Col, Row } from "../../../../../reusecore/Layout"; import Button from "../../../../../reusecore/Button"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; +import { styled, Table, TableContainer, TableCell, TableRow, TableHead, TableBody, useTheme, SistentThemeProvider } from "@sistent/sistent"; + +const brandColors = [ + { tokenName: "keppel-70", token: "theme.palette.brand.default", name: "Keppel", hex: "#DAf3EB" }, + { tokenName: "keppel-60", token: "theme.palette.brand.hover", name: "Keppel", hex: "#93E5D1" }, + { tokenName: "keppel-50", token: "theme.palette.brand.pressed", name: "Keppel", hex: "#41CCB3" }, + { tokenName: "keppel-40", token: "theme.palette.brand.secondary", name: "Keppel", hex: "#00B39F" }, + { tokenName: "keppel-30", token: "theme.palette.brand.tertiary", name: "Keppel", hex: "#007763" }, + { tokenName: "keppel-20", token: "theme.palette.keppel[20]", name: "Keppel", hex: "#006651" }, + { tokenName: "keppel-10", token: "theme.palette.keppel[10]", name: "Keppel", hex: "#00403F" }, + { tokenName: "caribbean-70", token: "theme.palette.caribbean[70]", name: "Caribbean", hex: "#E6FFF6" }, + { tokenName: "caribbean-50", token: "theme.palette.caribbean[50]", name: "Caribbean", hex: "#78FAD3" }, + { tokenName: "caribbean-60", token: "theme.palette.caribbean[60]", name: "Caribbean", hex: "#A3FFE0" }, + { tokenName: "caribbean-40", token: "theme.palette.caribbean[40]", name: "Caribbean", hex: "#00D3A9" }, + { tokenName: "caribbean-30", token: "theme.palette.caribbean[30]", name: "Caribbean", hex: "#00AD90" }, + { tokenName: "caribbean-20", token: "theme.palette.caribbean[20]", name: "Caribbean", hex: "#006157" }, + { tokenName: "caribbean-10", token: "theme.palette.caribbean[10]", name: "Caribbean", hex: "#003B37" }, + { tokenName: "saffron-70", token: "theme.palette.saffron[70]", name: "Saffron", hex: "#FFFEE6" }, + { tokenName: "saffron-60", token: "theme.palette.saffron[60]", name: "Saffron", hex: "#FFFBBD" }, + { tokenName: "saffron-50", token: "theme.palette.saffron[50]", name: "Saffron", hex: "#FFEB6B" }, + { tokenName: "saffron-40", token: "theme.palette.saffron[40]", name: "Saffron", hex: "#EBC017" }, + { tokenName: "saffron-30", token: "theme.palette.saffron[30]", name: "Saffron", hex: "#C4990A" }, + { tokenName: "saffron-20", token: "theme.palette.saffron[20]", name: "Saffron", hex: "#785400" }, + { tokenName: "saffron-10", token: "theme.palette.saffron[10]", name: "Saffron", hex: "#523600" } +]; + +const greyscaleColors = [ + { tokenName: "charcoal-110", token: "theme.palette.charcoal[110]", name: "Charcoal", hex: "#525252" }, + { tokenName: "charcoal-100", token: "theme.palette.charcoal[100]", name: "Charcoal", hex: "#FDFDFD" }, + { tokenName: "charcoal-90", token: "theme.palette.charcoal[90]", name: "Charcoal", hex: "#EAEDEE" }, + { tokenName: "charcoal-80", token: "theme.palette.charcoal[80]", name: "Charcoal", hex: "#D2D8DA" }, + { tokenName: "charcoal-70", token: "theme.palette.charcoal[70]", name: "Charcoal", hex: "#B1B9BC" }, + { tokenName: "charcoal-60", token: "theme.palette.charcoal[60]", name: "Charcoal", hex: "#8C999E" }, + { tokenName: "charcoal-50", token: "theme.palette.charcoal[50]", name: "Charcoal", hex: "#647176" }, + { tokenName: "charcoal-40", token: "theme.palette.charcoal[40]", name: "Charcoal", hex: "#3C494F" }, + { tokenName: "charcoal-30", token: "theme.palette.charcoal[30]", name: "Charcoal", hex: "#28353A" }, + { tokenName: "charcoal-20", token: "theme.palette.charcoal[20]", name: "Charcoal", hex: "#142126" }, + { tokenName: "charcoal-10", token: "theme.palette.charcoal[10]", name: "Charcoal", hex: "#000D12" }, + { tokenName: "accent_grey-90", token: "theme.palette.accentGrey[90]", name: "Accent Grey", hex: "#E8EFF3" }, + { tokenName: "accent_grey-80", token: "theme.palette.accentGrey[80]", name: "Accent Grey", hex: "#C9DBE3" }, + { tokenName: "accent_grey-70", token: "theme.palette.accentGrey[70]", name: "Accent Grey", hex: "#ABBDC5" }, + { tokenName: "accent_grey-60", token: "theme.palette.accentGrey[60]", name: "Accent Grey", hex: "#8D9FA7" }, + { tokenName: "accent_grey-50", token: "theme.palette.accentGrey[50]", name: "Accent Grey", hex: "#6F8189" }, + { tokenName: "accent_grey-40", token: "theme.palette.accentGrey[40]", name: "Accent Grey", hex: "#51636B" }, + { tokenName: "accent_grey-30", token: "theme.palette.accentGrey[30]", name: "Accent Grey", hex: "#3D4F57" }, + { tokenName: "accent_grey-20", token: "theme.palette.accentGrey[20]", name: "Accent Grey", hex: "#293B43" }, + { tokenName: "accent_grey-10", token: "theme.palette.accentGrey[10]", name: "Accent Grey", hex: "#15272F" } +]; + + +const functionColors = [ + { tokenName: "blue-70", token: "theme.palette.blue[70]", name: "Blue", hex: "#F0FBFF" }, + { tokenName: "blue-60", token: "theme.palette.blue[60]", name: "Blue", hex: "#9EDDFF" }, + { tokenName: "blue-50", token: "theme.palette.blue[50]", name: "Blue", hex: "#75CAFF" }, + { tokenName: "blue-40", token: "theme.palette.blue[40]", name: "Blue", hex: "#2196F3" }, + { tokenName: "blue-30", token: "theme.palette.blue[30]", name: "Blue", hex: "#1272CC" }, + { tokenName: "blue-20", token: "theme.palette.blue[20]", name: "Blue", hex: "#0754A6" }, + { tokenName: "blue-10", token: "theme.palette.blue[10]", name: "Blue", hex: "#003980" }, + { tokenName: "green-70", token: "theme.palette.green[70]", name: "Green", hex: "#EFFCED" }, + { tokenName: "green-60", token: "theme.palette.green[60]", name: "Green", hex: "#B2E3AF" }, + { tokenName: "green-50", token: "theme.palette.green[50]", name: "Green", hex: "#5BC95B" }, + { tokenName: "green-40", token: "theme.palette.green[40]", name: "Green", hex: "#36BC3B" }, + { tokenName: "green-30", token: "theme.palette.green[30]", name: "Green", hex: "#15701E" }, + { tokenName: "green-20", token: "theme.palette.green[20]", name: "Green", hex: "#0A4A13" }, + { tokenName: "green-10", token: "theme.palette.green[10]", name: "Green", hex: "#05340A" }, + { tokenName: "yellow-70", token: "theme.palette.yellow[70]", name: "Yellow", hex: "#FFFCE6" }, + { tokenName: "yellow-60", token: "theme.palette.yellow[60]", name: "Yellow", hex: "#FFE57D" }, + { tokenName: "yellow-50", token: "theme.palette.yellow[50]", name: "Yellow", hex: "#FFC72B" }, + { tokenName: "yellow-40", token: "theme.palette.yellow[40]", name: "Yellow", hex: "#FFB302" }, + { tokenName: "yellow-30", token: "theme.palette.yellow[30]", name: "Yellow", hex: "#D99100" }, + { tokenName: "yellow-20", token: "theme.palette.yellow[20]", name: "Yellow", hex: "#8C5400" }, + { tokenName: "yellow-10", token: "theme.palette.yellow[10]", name: "Yellow", hex: "#663A00" }, + { tokenName: "red-70", token: "theme.palette.red[70]", name: "Red", hex: "#F2E3DA" }, + { tokenName: "red-60", token: "theme.palette.red[60]", name: "Red", hex: "#E6B093" }, + { tokenName: "red-50", token: "theme.palette.red[50]", name: "Red", hex: "#BF471F" }, + { tokenName: "red-40", token: "theme.palette.red[40]", name: "Red", hex: "#F91313" }, + { tokenName: "red-30", token: "theme.palette.red[30]", name: "Red", hex: "#B32700" }, + { tokenName: "red-20", token: "theme.palette.red[20]", name: "Red", hex: "#8C1A00" }, + { tokenName: "red-10", token: "theme.palette.red[10]", name: "Red", hex: "#660F00" } + +]; + +const backgroundColors = [ + { + "tokenName": "background-default", + "token": "theme.palette.background.default", + "Alias_of": "charcoal-10", + "hex": "#000D12", + "role": "This is the default background color for any desired page." + }, + { + "tokenName": "background-secondary", + "token": "theme.palette.background.secondary", + "Alias_of": "accent_grey-10", + "hex": "#15272F", + "role": "First level surface color which is used to establish prominence and layer hierarchy." + }, + { + "tokenName": "background-tertiary", + "token": "theme.palette.background.tertiary", + "Alias_of": "accent_grey-30", + "hex": "#3D4F57", + "role": "Second level surface color which is used to establish prominence and layer hierarchy." + }, + { + "tokenName": "background-hover", + "token": "theme.palette.background.hover", + "Alias_of": "charcoal-20", + "hex": "#142126", + "role": "Color for surface hover interactions." + }, + { + "tokenName": "background-supplementary", + "token": "theme.palette.background.supplementary", + "Alias_of": "accent_grey-40", + "hex": "#51636B", + "role": "Alternative color for both themes. Sample use case in tooltip component." + }, + { + "tokenName": "background-blur-heavy", + "token": "theme.palette.background.blur.heavy", + "Alias_of": "accent_grey-10, 80%", + "hex": "#15272F", + "role": "Low opacity colors used to estabish prominence and layer hierarchy. Use for modals and overlays and along with blur shadow" + }, + { + "tokenName": "background-blur-light", + "token": "theme.palette.background.blur.light", + "Alias_of": "accent_grey-10, 50%", + "hex": "#15272F", + "role": "A variation of the low opacity colors used for modals and overlays." + }, + { + "tokenName": "background-inverse", + "token": "theme.palette.background.inverse", + "Alias_of": "accent_grey-90", + "hex": "#E7EFF3", + "role": "Background color for areas that will include each theme experience." + }, + { + "tokenName": "background-brand-default", + "token": "theme.palette.background.brand.default", + "Alias_of": "keppel-40", + "hex": "#00B39F", + "role": "Color for interface elements relating to the brand." + }, + { + "tokenName": "background-brand-hover", + "token": "theme.palette.background.brand.hover", + "Alias_of": "keppel-50", + "hex": "#41CCB3", + "role": "Color for surface hover interactions relating to the brand." + }, + { + "tokenName": "background-brand-disabled", + "token": "theme.palette.background.brand.disabled", + "Alias_of": "charcoal-20", + "hex": "#00B39F", + "role": "Color for disabled interface elements relating to the brand." + }, + { + "tokenName": "background-brand-pressed", + "token": "theme.palette.background.brand.pressed", + "Alias_of": "keppel-60", + "hex": "#93E6D1", + "role": "Color for pressed surface interactions relating to the brand." + }, + { + "tokenName": "background-brand-secondary", + "token": "theme.palette.background.brand.secondary", + "Alias_of": "keppel-20", + "hex": "#006661", + "role": "First level brand surface color which is used to establish prominence and layer hierarchy." + }, + { + "tokenName": "background-brand-tertiary", + "token": "theme.palette.background.brand.tertiary", + "Alias_of": "keppel-10", + "hex": "#00403F", + "role": "Second level brand surface color which is used to establish prominence and layer hierarchy." + }, + { + "tokenName": "background-graphics-default", + "token": "theme.palette.background.graphics.default", + "Alias_of": "carbon-40", + "hex": "#00D3A9", + "role": "Color for interface elements like visuals and illustrations." + }, + { + "tokenName": "background-cta-default", + "token": "theme.palette.background.cta.default", + "Alias_of": "saffron-40", + "hex": "#EBC017", + "role": "Color for interface elements relating to calls to action." + }, + { + "tokenName": "background-cta-hover", + "token": "theme.palette.background.cta.hover", + "Alias_of": "saffron-50", + "hex": "#FFEB6B", + "role": "Color for surface hover interactions relating to calls to action." + }, + { + "tokenName": "background-cta-pressed", + "token": "theme.palette.background.cta.pressed", + "Alias_of": "saffron-60", + "hex": "#FFFBBD", + "role": "Color for pressed surface interactions relating to calls to action." + }, + { + "tokenName": "background-cta-secondary", + "token": "theme.palette.background.cta.secondary", + "Alias_of": "saffron-20", + "hex": "#785400", + "role": "First level cta surface color which is used to establish prominence and layer hierarchy." + }, + { + "tokenName": "background-cta-tertiary", + "token": "theme.palette.background.cta.tertiary", + "Alias_of": "saffron-10", + "hex": "#523600", + "role": "Second level cta surface color which is used to establish prominence and layer hierarchy." + }, + { + "tokenName": "background-info-default", + "token": "theme.palette.background.info.default", + "Alias_of": "blue-40", + "hex": "#1E77FC", + "role": "Color for interface elements relating to notifications and information." + }, + { + "tokenName": "background-info-hover", + "token": "theme.palette.background.info.hover", + "Alias_of": "blue-50", + "hex": "#4797FF", + "role": "Color for surface hover interactions relating to notifications and information." + }, + { + "tokenName": "background-info-pressed", + "token": "theme.palette.background.info.pressed", + "Alias_of": "blue-60", + "hex": "#99CCFF", + "role": "Color for pressed surface interactions relating to notifications and information." + }, + { + "tokenName": "background-info-secondary", + "token": "theme.palette.background.info.secondary", + "Alias_of": "blue-20", + "hex": "#043DB0", + "role": "First level information surface color which is used to establish prominence and layer hierarchy." + }, + { + "tokenName": "background-info-tertiary", + "token": "theme.palette.background.info.tertiary", + "Alias_of": "blue-10", + "hex": "#001B63", + "role": "Second level information surface color which is used to establish prominence and layer hierarchy." + }, + { + "tokenName": "background-success-default", + "token": "theme.palette.background.success.default", + "Alias_of": "green-40", + "hex": "#36BC3B", + "role": "Color for interface elements relating to success." + }, + { + "tokenName": "background-success-hover", + "token": "theme.palette.background.success.hover", + "Alias_of": "green-50", + "hex": "#5BC95B", + "role": "Color for surface hover interactions relating to success." + }, + { + "tokenName": "background-success-pressed", + "token": "theme.palette.background.success.pressed", + "Alias_of": "green-60", + "hex": "#B2E3AF", + "role": "Color for pressed surface interactions relating to success." + }, + { + "tokenName": "background-success-secondary", + "token": "theme.palette.background.success.secondary", + "Alias_of": "green-20", + "hex": "#0A4A13", + "role": "First level success surface color which is used to establish prominence and layer hierarchy." + }, + { + "tokenName": "background-success-tertiary", + "token": "theme.palette.background.success.tertiary", + "Alias_of": "green-10", + "hex": "#05240A", + "role": "Second level success surface color which is used to establish prominence and layer hierarchy." + }, + { + "tokenName": "background-warning-default", + "token": "theme.palette.background.warning.default", + "Alias_of": "yellow-40", + "hex": "#FFB302", + "role": "Color for interface elements relating to warnings." + }, + { + "tokenName": "background-warning-hover", + "token": "theme.palette.background.warning.hover", + "Alias_of": "yellow-50", + "hex": "#FFC72B", + "role": "Color for surface hover interactions relating to warnings." + }, + { + "tokenName": "background-warning-pressed", + "token": "theme.palette.background.warning.pressed", + "Alias_of": "yellow-60", + "hex": "#FFE7D", + "role": "Color for pressed surface interactions relating to warnings." + }, + { + "tokenName": "background-warning-secondary", + "token": "theme.palette.background.warning.secondary", + "Alias_of": "yellow-20", + "hex": "#8C5400", + "role": "First level warning surface color which is used to establish prominence and layer hierarchy." + }, + { + "tokenName": "background-warning-tertiary", + "token": "theme.palette.background.warning.tertiary", + "Alias_of": "yellow-10", + "hex": "#663A00", + "role": "Second level warning surface color which is used to establish prominence and layer hierarchy." + }, + { + "tokenName": "background-error-default", + "token": "theme.palette.background.error.default", + "Alias_of": "red-40", + "hex": "#FF385C", + "role": "Color for interface elements relating to errors and destructive actions." + }, + { + "tokenName": "background-error-hover", + "token": "theme.palette.background.error.hover", + "Alias_of": "red-50", + "hex": "#FF6179", + "role": "Color for surface hover interactions relating to errors." + }, + { + "tokenName": "background-error-pressed", + "token": "theme.palette.background.error.pressed", + "Alias_of": "red-60", + "hex": "#FFB3B9", + "role": "Color for pressed surface interactions relating to errors." + }, + { + "tokenName": "background-error-secondary", + "token": "theme.palette.background.error.secondary", + "Alias_of": "red-20", + "hex": "#8C0A2F", + "role": "First level error surface color which is used to establish prominence and layer hierarchy." + }, + { + "tokenName": "background-error-tertiary", + "token": "theme.palette.background.error.tertiary", + "Alias_of": "red-10", + "hex": "#660624", + "role": "Second level error surface color which is used to establish prominence and layer hierarchy." + } +]; + +const textColors = [ + { "tokenName": "text-default", "token": "theme.palette.text.default", "Alias_of": "charcoal-100", "hex": "#fdfdfd", "role": "Default text color." }, + { "tokenName": "text-secondary", "token": "theme.palette.text.secondary", "Alias_of": "charcoal-80", "hex": "#d2d8da", "role": "First level text color to indicate lower prominence and establish visual hierarchy." }, + { "tokenName": "text-tertiary", "token": "theme.palette.text.tertiary", "Alias_of": "charcoal-60", "hex": "#8c999e", "role": "Second level text color to indicate lower prominence and establish visual hierarchy." }, + { "tokenName": "text-inverse", "token": "theme.palette.text.inverse", "Alias_of": "charcoal-10", "hex": "#000d12", "role": "This text color is the polar opposite of the default text color in any theme." }, + { "tokenName": "text-disabled", "token": "theme.palette.text.disabled", "Alias_of": "charcoal-50", "hex": "#647176", "role": "This text color is the polar opposite of the default text color in any theme." }, + { "tokenName": "text-constant-white", "token": "theme.palette.text.constant.white", "Alias_of": "charcoal-100", "hex": "#fdfdfd", "role": "This text color remains constant across both themes and is used on surfaces that don’t change as themes change." }, + { "tokenName": "text-brand", "token": "theme.palette.text.brand", "Alias_of": "keppel-40", "hex": "#00b39f", "role": "Color for text relating to the brand." }, + { "tokenName": "text-info", "token": "theme.palette.text.info", "Alias_of": "blue-40", "hex": "#2196f3", "role": "Color for text relating to notifications and information." }, + { "tokenName": "text-success", "token": "theme.palette.text.success", "Alias_of": "green-40", "hex": "#36bc3b", "role": "Color for text relating to success." }, + { "tokenName": "text-warning", "token": "theme.palette.text.warning", "Alias_of": "yellow-40", "hex": "#f0d053", "role": "Color for text relating to warnings." }, + { "tokenName": "text-error", "token": "theme.palette.text.error", "Alias_of": "red-40", "hex": "#f91313", "role": "Color for text relating to errors and destructive actions." }, +]; +const borderColors = [ + { tokenName: "border-default", token: "theme.palette.border.default", Alias_of: "accent_grey-10", hex: "#15272f", "role": "Default border color for interface elements." }, + { tokenName: "border-brand", token: "theme.palette.border.brand", Alias_of: "keppel-40", hex: "#00b39f", "role": "Border color for elements relating to the brand." }, + { tokenName: "border-normal", token: "theme.palette.border.normal", Alias_of: "accent_grey-30", hex: "#3d4f57", "role": "First level border color to establish prominence and visual hierarchy." }, + { tokenName: "border-strong", token: "theme.palette.border.strong", Alias_of: "accent_grey-60", hex: "#8d9fa7", "role": "Second level border color to establish prominence and visual hierarchy." }, +]; + +const componentColors = [ + { tokenName: "icon-default", token: "theme.palette.icon.default", Alias_of: "accent_grey-10", hex: "#15272f", role: "Default color for icon component in a design." }, + { tokenName: "icon-secondary", token: "theme.palette.icon.secondary", Alias_of: "charcoal-80", hex: "#d2d8da", role: "Default color for icon component in a design." }, + { tokenName: "icon-brand", token: "theme.palette.icon.secondary", Alias_of: "keppel-40", hex: "#00b39f", role: "Default color for any icon relating to the brand." }, + { tokenName: "icon-inverse", token: "theme.palette.icon.inverse", Alias_of: "charcoal-10", hex: "#00012", role: "This icon color is the polar opposite of the default icon color in any theme." }, + { tokenName: "icon-weather", token: "theme.palette.icon.weather", Alias_of: "saffron-40", hex: "#3d4f57", role: "Deafult color for any icon representing theme switching." }, + { tokenName: "icon-disabled", token: "theme.palette.icon.disabled", Alias_of: "charcoal-50", hex: "#647176", role: "Color for icon components." }, +]; + + +const PreviewBox = styled("div")(({ theme, bgcolor }) => ({ + backgroundColor: bgcolor, + width: "1.6rem", + height: "1.6rem", + borderRadius: "6px", + border: `1px solid ${theme.palette.divider}`, + boxShadow: "inset 0 0 3px rgba(0,0,0,0.15)", + margin: "0 auto", +})); + +const PreviewTextBox = styled("p")(({ theme, tokenName }) => { + const colorsMap = { + "text-default": theme.palette.text.default, + "text-secondary": theme.palette.text.warning, + "text-tertiary": theme.palette.text.tertiary, + "text-inverse": theme.palette.text.inverse, + "text-disabled": theme.palette.text.disabled, + "text-constant-white": theme.palette.text.constant?.white, + "text-brand": theme.palette.text.brand, + "text-info": theme.palette.text.info, + "text-success": theme.palette.text.success, + "text-warning": theme.palette.text.warning, + "text-error": theme.palette.text.error, + }; + + const resolvedColors = colorsMap[tokenName] ; + + return { + color: resolvedColors, + width: "2.6rem", + height: "2.6rem", + borderRadius: "6px", + boxShadow: "inset 0 0 3px rgba(0,0,0,0.15)", + margin: "0 auto", + display: "flex", + alignItems: "center", + justifyContent: "center", + fontSize: "1rem", + fontWeight: "bold", + }; +}); + +const PreviewBorderBox = styled("div")(({ theme , tokenName }) => { + const bordeMap = { + "border-default": theme.palette.border.default, + "border-brand": theme.palette.border.brand, + "border-normal": theme.palette.border.normal, + "border-strong": theme.palette.border.strong, + }; + + const resolvedColors = bordeMap[tokenName] ; + + return { + backgroundColor: "transparent", + width: "1.6rem", + height: "1.6rem", + borderRadius: "6px", + border: `1px solid ${resolvedColors}`, + boxShadow: "inset 0 0 3px rgba(0,0,0,0.15)", + margin: "0 auto", + display: "flex", + alignItems: "center", + justifyContent: "center", + fontSize: "1rem", + fontWeight: "bold", + color: resolvedColors, + }; +}); + + + + +const StyledTableContainer = styled(TableContainer)(() => ({ + width: "100%", + backgroundColor: "transparent", + boxShadow: "none", + padding: 0, +})); + +const StyledTableCell = styled(TableCell)(({ theme }) => ({ + color: theme.palette.text.secondary, + fontSize: "0.875rem", + padding: "0.75rem", + borderBottom: `1px solid ${theme.palette.divider}`, +})); + +const StyledHeaderCell = styled(StyledTableCell)(({ theme }) => ({ + fontWeight: 600, +})); + const ColorCode = () => { const { isDark } = useStyledDarkMode(); const location = useLocation(); @@ -89,35 +574,128 @@ const ColorCode = () => { not have any role descriptions.

Brand Colors

- - - Brand colors - - + + + + + + + + + Token Name + Name + Hex Code + Sistent Token + Preview + + + + {brandColors.map((col, idx) => ( + + {col.tokenName} + {col.name} + {col.hex} + + {col.token} + + + + + + ))} + +
+ + + + + + {/* Greyscale Colors */}

Greyscale Colors

- - - Greyscale colors - - + + + + + + + + Token Name + Name + Hex Code + Sistent Token + Preview + + + + {greyscaleColors.map((col, idx) => ( + + {col.tokenName} + {col.name} + {col.hex} + + {col.token} + + + + + + ))} + +
+ + + + + + {/* FunctionColors */}

Function Colors

- - - Function colors - - + + + + + + + + + Token Name + Name + Hex Code + Sistent Token + Preview + + + + {functionColors.map((col, idx) => ( + + {col.tokenName} + {col.name} + {col.hex} + + {col.token} + + + + + + ))} + +
+ + + + + + +

Semantic Category

 @@ -127,53 +705,185 @@ const ColorCode = () => { categories exists as the need arises.

Background Colors

- - - Background colors - - + + + + + + + + Token Name + Alias Of + Hex Code + Sistent Token + Preview + Role + + + + {backgroundColors.map((col, idx) => ( + + {col.tokenName} + {col.Alias_of} + {col.hex} + + {col.token} + + + + + + {col.role} + + + ))} + +
+ + + + +

Text Colors

- - - Text colors - - + + + + + + + + Token Name + Alias Of + Hex Code + Sistent Token + Preview + Role + + + + {textColors.map((col, idx) => ( + + {col.tokenName} + {col.Alias_of} + {col.hex} + + {col.token} + + + Aa + + + {col.role} + + + ))} + +
+ + + + +

Border Colors

- - - Border colors - - + + + + + + + + Token Name + Alias Of + Hex Code + Sistent Token + Preview + Role + + + + {borderColors.map((col, idx) => ( + + {col.tokenName} + {col.Alias_of} + {col.hex} + + {col.token} + + + + + + {col.role} + + + ))} + +
+ + + + + +

Component Colors

Tokens here are component specific and must be used only for the component that they are referencing.

- - - Border colors - - + + + + + + + + Token Name + Alias Of + Hex Code + Sistent Token + Preview + Role + + + + {componentColors.map((col, idx) => ( + + {col.tokenName} + {col.Alias_of} + {col.hex} + + {col.token} + + + + + + {col.role} + + + ))} + +
+ + + + ); }; -export default ColorCode; +export default ColorCode; \ No newline at end of file From 26f92795a4034b49f11d08a3c76922b9b9e6000f Mon Sep 17 00:00:00 2001 From: Namanv0509 Date: Sat, 5 Jul 2025 22:06:35 +0530 Subject: [PATCH 2/9] [UI] Sistent Identity Code page update images with the tables html Signed-off-by: Namanv0509 --- .../Projects/Sistent/identity/color/code.js | 31 +++++-------------- 1 file changed, 8 insertions(+), 23 deletions(-) diff --git a/src/sections/Projects/Sistent/identity/color/code.js b/src/sections/Projects/Sistent/identity/color/code.js index 882d4e7894437..b467eadc1fde0 100644 --- a/src/sections/Projects/Sistent/identity/color/code.js +++ b/src/sections/Projects/Sistent/identity/color/code.js @@ -2,21 +2,6 @@ import React from "react"; import { navigate } from "gatsby"; import { useLocation } from "@reach/router"; -import BrandColors from "../../../../../assets/images/app/projects/sistent/brand-colors-table.png"; -import GreyscaleColors from "../../../../../assets/images/app/projects/sistent/greyscale-colors-table.png"; -import BgColors from "../../../../../assets/images/app/projects/sistent/bg-colors-table.png"; -import FunctionColors from "../../../../../assets/images/app/projects/sistent/function-colors-table.png"; -import TextColors from "../../../../../assets/images/app/projects/sistent/text-colors-table.png"; -import BorderColors from "../../../../../assets/images/app/projects/sistent/border-colors-table.png"; -import ComponentColors from "../../../../../assets/images/app/projects/sistent/components-table.png"; - -import BrandColorsDark from "../../../../../assets/images/app/projects/sistent/brand-colors-table-dark.png"; -import GreyscaleColorsDark from "../../../../../assets/images/app/projects/sistent/greyscale-colors-table-dark.png"; -import BgColorsDark from "../../../../../assets/images/app/projects/sistent/bg-colors-table-dark.png"; -import FunctionColorsDark from "../../../../../assets/images/app/projects/sistent/function-colors-table-dark.png"; -import TextColorsDark from "../../../../../assets/images/app/projects/sistent/text-colors-table-dark.png"; -import BorderColorsDark from "../../../../../assets/images/app/projects/sistent/border-colors-table-dark.png"; -import ComponentColorsDark from "../../../../../assets/images/app/projects/sistent/components-table-dark.png"; import { SistentLayout } from "../../sistent-layout"; import { Col, Row } from "../../../../../reusecore/Layout"; @@ -443,7 +428,7 @@ const PreviewTextBox = styled("p")(({ theme, tokenName }) => { "text-error": theme.palette.text.error, }; - const resolvedColors = colorsMap[tokenName] ; + const resolvedColors = colorsMap[tokenName] ; return { color: resolvedColors, @@ -593,7 +578,7 @@ const ColorCode = () => { {brandColors.map((col, idx) => ( {col.tokenName} {col.name} @@ -633,7 +618,7 @@ const ColorCode = () => { {greyscaleColors.map((col, idx) => ( {col.tokenName} {col.name} @@ -674,7 +659,7 @@ const ColorCode = () => { {functionColors.map((col, idx) => ( {col.tokenName} {col.name} @@ -724,7 +709,7 @@ const ColorCode = () => { {backgroundColors.map((col, idx) => ( {col.tokenName} {col.Alias_of} @@ -767,7 +752,7 @@ const ColorCode = () => { {textColors.map((col, idx) => ( {col.tokenName} {col.Alias_of} @@ -810,7 +795,7 @@ const ColorCode = () => { {borderColors.map((col, idx) => ( {col.tokenName} {col.Alias_of} @@ -858,7 +843,7 @@ const ColorCode = () => { {componentColors.map((col, idx) => ( {col.tokenName} {col.Alias_of} From c0ba21a1823eac1261c17c21e47136c4c7906ef3 Mon Sep 17 00:00:00 2001 From: Namanv0509 Date: Sat, 5 Jul 2025 22:15:34 +0530 Subject: [PATCH 3/9] [UI] Sistent Identity Code page update images with the tables html Signed-off-by: Namanv0509 --- .../Projects/Sistent/identity/color/code.js | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/sections/Projects/Sistent/identity/color/code.js b/src/sections/Projects/Sistent/identity/color/code.js index b467eadc1fde0..66c8ebaa5ff8f 100644 --- a/src/sections/Projects/Sistent/identity/color/code.js +++ b/src/sections/Projects/Sistent/identity/color/code.js @@ -8,7 +8,7 @@ import { Col, Row } from "../../../../../reusecore/Layout"; import Button from "../../../../../reusecore/Button"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import { styled, Table, TableContainer, TableCell, TableRow, TableHead, TableBody, useTheme, SistentThemeProvider } from "@sistent/sistent"; +import { styled, Table, TableContainer, TableCell, TableRow, TableHead, TableBody, SistentThemeProvider } from "@sistent/sistent"; const brandColors = [ { tokenName: "keppel-70", token: "theme.palette.brand.default", name: "Keppel", hex: "#DAf3EB" }, @@ -489,9 +489,9 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({ borderBottom: `1px solid ${theme.palette.divider}`, })); -const StyledHeaderCell = styled(StyledTableCell)(({ theme }) => ({ +const StyledHeaderCell = styled(StyledTableCell)({ fontWeight: 600, -})); +}); const ColorCode = () => { const { isDark } = useStyledDarkMode(); @@ -575,7 +575,7 @@ const ColorCode = () => { - {brandColors.map((col, idx) => ( + {brandColors.map((col) => ( { - {greyscaleColors.map((col, idx) => ( + {greyscaleColors.map((col) => ( { - {functionColors.map((col, idx) => ( + {functionColors.map((col) => ( { - {backgroundColors.map((col, idx) => ( + {backgroundColors.map((col) => ( { - {textColors.map((col, idx) => ( + {textColors.map((col) => ( { - {borderColors.map((col, idx) => ( + {borderColors.map((col) => ( { - {componentColors.map((col, idx) => ( + {componentColors.map((col) => ( Date: Mon, 7 Jul 2025 04:23:17 +0530 Subject: [PATCH 4/9] Copy Colors option for hex codes and token Signed-off-by: Namanv0509 --- .../Projects/Sistent/identity/color/code.js | 76 +++++++++++++++---- 1 file changed, 60 insertions(+), 16 deletions(-) diff --git a/src/sections/Projects/Sistent/identity/color/code.js b/src/sections/Projects/Sistent/identity/color/code.js index 66c8ebaa5ff8f..423bb791f1219 100644 --- a/src/sections/Projects/Sistent/identity/color/code.js +++ b/src/sections/Projects/Sistent/identity/color/code.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import { navigate } from "gatsby"; import { useLocation } from "@reach/router"; @@ -8,7 +8,8 @@ import { Col, Row } from "../../../../../reusecore/Layout"; import Button from "../../../../../reusecore/Button"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import { styled, Table, TableContainer, TableCell, TableRow, TableHead, TableBody, SistentThemeProvider } from "@sistent/sistent"; +import { styled, Table, TableContainer, TableCell, TableRow, TableHead, TableBody, SistentThemeProvider, CustomTooltip, Box, } from "@sistent/sistent"; +import { copyToClipboard } from "../../../../../components/CodeBlock/copy-to-clipboard.js"; const brandColors = [ { tokenName: "keppel-70", token: "theme.palette.brand.default", name: "Keppel", hex: "#DAf3EB" }, @@ -403,6 +404,47 @@ const componentColors = [ ]; +const CopyColor = ({ hex , token }) => { + const [copyText, setCopyText] = useState("Copy"); + const [showCopy, setShowCopy] = useState(false); + + const handleCopy = async () => { + await copyToClipboard(hex || token); + setCopyText("Copied"); + setTimeout(() => setCopyText("Copy"), 1000); + }; + + return ( + + + theme.palette.action?.hover || "rgba(0, 0, 0, 0.04)", + }, + }} + onMouseEnter={() => setShowCopy(true)} + onMouseLeave={() => setShowCopy(false)} + onClick={handleCopy} + > + {hex || token } + + + ); +}; + const PreviewBox = styled("div")(({ theme, bgcolor }) => ({ backgroundColor: bgcolor, width: "1.6rem", @@ -411,8 +453,10 @@ const PreviewBox = styled("div")(({ theme, bgcolor }) => ({ border: `1px solid ${theme.palette.divider}`, boxShadow: "inset 0 0 3px rgba(0,0,0,0.15)", margin: "0 auto", + })); + const PreviewTextBox = styled("p")(({ theme, tokenName }) => { const colorsMap = { "text-default": theme.palette.text.default, @@ -582,9 +626,9 @@ const ColorCode = () => { > {col.tokenName} {col.name} - {col.hex} + - {col.token} + @@ -622,9 +666,9 @@ const ColorCode = () => { > {col.tokenName} {col.name} - {col.hex} + - {col.token} + @@ -663,9 +707,9 @@ const ColorCode = () => { > {col.tokenName} {col.name} - {col.hex} + - {col.token} + @@ -713,9 +757,9 @@ const ColorCode = () => { > {col.tokenName} {col.Alias_of} - {col.hex} + - {col.token} + @@ -756,9 +800,9 @@ const ColorCode = () => { > {col.tokenName} {col.Alias_of} - {col.hex} + - {col.token} + Aa @@ -799,9 +843,9 @@ const ColorCode = () => { > {col.tokenName} {col.Alias_of} - {col.hex} + - {col.token} + @@ -847,9 +891,9 @@ const ColorCode = () => { > {col.tokenName} {col.Alias_of} - {col.hex} + - {col.token} + From abda639179367702d0442a468c234c8d1695d2f6 Mon Sep 17 00:00:00 2001 From: Namanv0509 Date: Mon, 7 Jul 2025 13:02:34 +0530 Subject: [PATCH 5/9] Alternate Colors on Rows Signed-off-by: Namanv0509 --- src/sections/Projects/Sistent/identity/color/code.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/sections/Projects/Sistent/identity/color/code.js b/src/sections/Projects/Sistent/identity/color/code.js index 423bb791f1219..7d9c03286a48b 100644 --- a/src/sections/Projects/Sistent/identity/color/code.js +++ b/src/sections/Projects/Sistent/identity/color/code.js @@ -531,11 +531,13 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({ fontSize: "0.875rem", padding: "0.75rem", borderBottom: `1px solid ${theme.palette.divider}`, + borderRadius: "4px", })); -const StyledHeaderCell = styled(StyledTableCell)({ +const StyledHeaderCell = styled(StyledTableCell)(({ theme }) => ({ fontWeight: 600, -}); + color: theme.palette.background.default, +})); const ColorCode = () => { const { isDark } = useStyledDarkMode(); From e2fc84e346de92cee232f11f0284330025db7498 Mon Sep 17 00:00:00 2001 From: Namanv0509 Date: Mon, 7 Jul 2025 13:26:45 +0530 Subject: [PATCH 6/9] Alternate Colors on Rows Signed-off-by: Namanv0509 --- .../Projects/Sistent/identity/color/code.js | 58 +++++++------------ 1 file changed, 22 insertions(+), 36 deletions(-) diff --git a/src/sections/Projects/Sistent/identity/color/code.js b/src/sections/Projects/Sistent/identity/color/code.js index 423bb791f1219..094dad13198af 100644 --- a/src/sections/Projects/Sistent/identity/color/code.js +++ b/src/sections/Projects/Sistent/identity/color/code.js @@ -516,7 +516,14 @@ const PreviewBorderBox = styled("div")(({ theme , tokenName }) => { }; }); - +const StyledTableRow = styled(TableRow)(({ theme }) => ({ + "&:nth-child(odd)": { + backgroundColor: theme.palette.background.default, + }, + "&:nth-child(even)": { + backgroundColor: theme.palette.background.secondary, + }, +})); const StyledTableContainer = styled(TableContainer)(() => ({ @@ -620,10 +627,7 @@ const ColorCode = () => { {brandColors.map((col) => ( - + {col.tokenName} {col.name} @@ -633,7 +637,7 @@ const ColorCode = () => { - + ))} @@ -660,10 +664,7 @@ const ColorCode = () => { {greyscaleColors.map((col) => ( - + {col.tokenName} {col.name} @@ -673,7 +674,7 @@ const ColorCode = () => { - + ))} @@ -701,10 +702,7 @@ const ColorCode = () => { {functionColors.map((col) => ( - + {col.tokenName} {col.name} @@ -714,7 +712,7 @@ const ColorCode = () => { - + ))} @@ -751,10 +749,7 @@ const ColorCode = () => { {backgroundColors.map((col) => ( - + {col.tokenName} {col.Alias_of} @@ -767,7 +762,7 @@ const ColorCode = () => { {col.role} - + ))} @@ -794,10 +789,7 @@ const ColorCode = () => { {textColors.map((col) => ( - + {col.tokenName} {col.Alias_of} @@ -810,7 +802,7 @@ const ColorCode = () => { {col.role} - + ))} @@ -837,10 +829,7 @@ const ColorCode = () => { {borderColors.map((col) => ( - + {col.tokenName} {col.Alias_of} @@ -853,7 +842,7 @@ const ColorCode = () => { {col.role} - + ))} @@ -885,10 +874,7 @@ const ColorCode = () => { {componentColors.map((col) => ( - + {col.tokenName} {col.Alias_of} @@ -901,7 +887,7 @@ const ColorCode = () => { {col.role} - + ))} From 27eb972d90f3b51543eccb366bda830f5789c9b6 Mon Sep 17 00:00:00 2001 From: Naman Verma <149177973+Namanv0509@users.noreply.github.com> Date: Mon, 7 Jul 2025 13:48:19 +0530 Subject: [PATCH 7/9] Update code.js Signed-off-by: Naman Verma <149177973+Namanv0509@users.noreply.github.com> --- src/sections/Projects/Sistent/identity/color/code.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/sections/Projects/Sistent/identity/color/code.js b/src/sections/Projects/Sistent/identity/color/code.js index db07d9b3b13b7..85406118aa638 100644 --- a/src/sections/Projects/Sistent/identity/color/code.js +++ b/src/sections/Projects/Sistent/identity/color/code.js @@ -543,7 +543,6 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({ const StyledHeaderCell = styled(StyledTableCell)(({ theme }) => ({ fontWeight: 600, - color: theme.palette.background.default, })); const ColorCode = () => { @@ -903,4 +902,4 @@ const ColorCode = () => { ); }; -export default ColorCode; \ No newline at end of file +export default ColorCode; From b394226b88197f363eb60629a643409567ebfe2b Mon Sep 17 00:00:00 2001 From: Naman Verma <149177973+Namanv0509@users.noreply.github.com> Date: Mon, 7 Jul 2025 16:54:19 +0530 Subject: [PATCH 8/9] Update code.js Signed-off-by: Naman Verma <149177973+Namanv0509@users.noreply.github.com> --- src/sections/Projects/Sistent/identity/color/code.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/sections/Projects/Sistent/identity/color/code.js b/src/sections/Projects/Sistent/identity/color/code.js index 85406118aa638..e7a6affc53753 100644 --- a/src/sections/Projects/Sistent/identity/color/code.js +++ b/src/sections/Projects/Sistent/identity/color/code.js @@ -518,7 +518,7 @@ const PreviewBorderBox = styled("div")(({ theme , tokenName }) => { const StyledTableRow = styled(TableRow)(({ theme }) => ({ "&:nth-child(odd)": { - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.default, }, "&:nth-child(even)": { backgroundColor: theme.palette.background.secondary, @@ -541,7 +541,7 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({ borderRadius: "4px", })); -const StyledHeaderCell = styled(StyledTableCell)(({ theme }) => ({ +const StyledHeaderCell = styled(StyledTableCell)(() => ({ fontWeight: 600, })); @@ -628,7 +628,7 @@ const ColorCode = () => { {brandColors.map((col) => ( - + {col.tokenName} {col.name} @@ -665,7 +665,7 @@ const ColorCode = () => { {greyscaleColors.map((col) => ( - + {col.tokenName} {col.name} @@ -830,7 +830,7 @@ const ColorCode = () => { {borderColors.map((col) => ( - + {col.tokenName} {col.Alias_of} From 312afd8b716002f927336af6734bef350129cdde Mon Sep 17 00:00:00 2001 From: Namanv0509 Date: Tue, 8 Jul 2025 12:33:26 +0530 Subject: [PATCH 9/9] Increase Text visiblity , Text and Preview Box Size Signed-off-by: Namanv0509 --- .../Projects/Sistent/identity/color/code.js | 27 +++++++++---------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/src/sections/Projects/Sistent/identity/color/code.js b/src/sections/Projects/Sistent/identity/color/code.js index e7a6affc53753..4a988e93c90c4 100644 --- a/src/sections/Projects/Sistent/identity/color/code.js +++ b/src/sections/Projects/Sistent/identity/color/code.js @@ -1,8 +1,6 @@ import React, { useState } from "react"; import { navigate } from "gatsby"; import { useLocation } from "@reach/router"; - - import { SistentLayout } from "../../sistent-layout"; import { Col, Row } from "../../../../../reusecore/Layout"; import Button from "../../../../../reusecore/Button"; @@ -447,8 +445,8 @@ const CopyColor = ({ hex , token }) => { const PreviewBox = styled("div")(({ theme, bgcolor }) => ({ backgroundColor: bgcolor, - width: "1.6rem", - height: "1.6rem", + width: "2.6rem", + height: "2.6rem", borderRadius: "6px", border: `1px solid ${theme.palette.divider}`, boxShadow: "inset 0 0 3px rgba(0,0,0,0.15)", @@ -486,6 +484,7 @@ const PreviewTextBox = styled("p")(({ theme, tokenName }) => { justifyContent: "center", fontSize: "1rem", fontWeight: "bold", + backgroundColor: theme.palette.background.tertiary, }; }); @@ -501,8 +500,8 @@ const PreviewBorderBox = styled("div")(({ theme , tokenName }) => { return { backgroundColor: "transparent", - width: "1.6rem", - height: "1.6rem", + width: "2.6rem", + height: "2.6rem", borderRadius: "6px", border: `1px solid ${resolvedColors}`, boxShadow: "inset 0 0 3px rgba(0,0,0,0.15)", @@ -535,7 +534,7 @@ const StyledTableContainer = styled(TableContainer)(() => ({ const StyledTableCell = styled(TableCell)(({ theme }) => ({ color: theme.palette.text.secondary, - fontSize: "0.875rem", + fontSize: "0.975rem", padding: "0.75rem", borderBottom: `1px solid ${theme.palette.divider}`, borderRadius: "4px", @@ -631,7 +630,7 @@ const ColorCode = () => { {col.tokenName} {col.name} - + {col.hex} @@ -668,7 +667,7 @@ const ColorCode = () => { {col.tokenName} {col.name} - + {col.hex} @@ -706,7 +705,7 @@ const ColorCode = () => { {col.tokenName} {col.name} - + {col.hex} @@ -753,7 +752,7 @@ const ColorCode = () => { {col.tokenName} {col.Alias_of} - + {col.hex} @@ -793,7 +792,7 @@ const ColorCode = () => { {col.tokenName} {col.Alias_of} - + {col.hex} @@ -833,7 +832,7 @@ const ColorCode = () => { {col.tokenName} {col.Alias_of} - + {col.hex} @@ -878,7 +877,7 @@ const ColorCode = () => { {col.tokenName} {col.Alias_of} - + {col.hex}