From f44d7eb1606f794c303bde9691044fcdb073aa4b Mon Sep 17 00:00:00 2001 From: Iveta Date: Thu, 30 Nov 2023 14:25:27 -0500 Subject: [PATCH 1/3] SDS web: colors page --- .../docs/foundations/colors.mdx | 404 ++++++++++++++++++ .../src/components/ColorPalette/index.tsx | 55 +++ .../src/components/ColorPalette/styles.css | 33 ++ .../ColorPaletteThemeSwitcher/index.tsx | 45 ++ .../ColorPaletteThemeSwitcher/styles.css | 14 + .../design-system-website/src/css/custom.css | 45 +- .../src/theme/MDXComponents.js | 4 + 7 files changed, 591 insertions(+), 9 deletions(-) create mode 100644 @stellar/design-system-website/docs/foundations/colors.mdx create mode 100644 @stellar/design-system-website/src/components/ColorPalette/index.tsx create mode 100644 @stellar/design-system-website/src/components/ColorPalette/styles.css create mode 100644 @stellar/design-system-website/src/components/ColorPaletteThemeSwitcher/index.tsx create mode 100644 @stellar/design-system-website/src/components/ColorPaletteThemeSwitcher/styles.css diff --git a/@stellar/design-system-website/docs/foundations/colors.mdx b/@stellar/design-system-website/docs/foundations/colors.mdx new file mode 100644 index 00000000..24e64400 --- /dev/null +++ b/@stellar/design-system-website/docs/foundations/colors.mdx @@ -0,0 +1,404 @@ +--- +slug: /colors +description: "Design system colors" +--- + +# Colors + +Color plays a crucial role in a design system as it contributes to visual +aesthetics and helps establish brand identity. It enables effective +communication, guides user interaction, and enhances usability by conveying +meaning, hierarchy, and emotions within a cohesive design language. + + + +## Product Colors + +Product colors in a design system serve as a key element for establishing a +consistent and recognizable visual identity, fostering brand recognition, and +creating a cohesive and harmonious user experience across various touchpoints. + +### Brand + + + +### Grayscale + + + +### System + + + +## Status Colors + +The role of status colors in a design system is to provide visual cues that +indicate the state or condition of elements, such as success, warning, error, or +information, allowing users to quickly understand and respond to different +feedback or system messages. + +### Success + + + +### Warning + + + +### Error + + diff --git a/@stellar/design-system-website/src/components/ColorPalette/index.tsx b/@stellar/design-system-website/src/components/ColorPalette/index.tsx new file mode 100644 index 00000000..1fce4c7d --- /dev/null +++ b/@stellar/design-system-website/src/components/ColorPalette/index.tsx @@ -0,0 +1,55 @@ +import React, { useEffect, useState } from "react"; +import { + COLOR_PALETTE_THEME_CHANGE_EVENT, + LOCAL_STORAGE_COLOR_PALETTE_THEME, +} from "../ColorPaletteThemeSwitcher"; +import "./styles.css"; + +export const ColorPalette = ({ + colors, +}: { + colors: { + hex: { light: string; dark: string }; + variable: string; + name: string; + }[]; +}) => { + const [theme, setTheme] = useState( + localStorage.getItem(LOCAL_STORAGE_COLOR_PALETTE_THEME) || "light", + ); + + useEffect(() => { + const onStorageChange = (event: any) => { + setTheme(event.detail.theme || "light"); + }; + + addEventListener(COLOR_PALETTE_THEME_CHANGE_EVENT, onStorageChange); + + return () => { + removeEventListener(COLOR_PALETTE_THEME_CHANGE_EVENT, onStorageChange); + }; + }, []); + + if (!theme) { + return null; + } + + return ( +
+ {colors.map((c) => ( +
+
+
{c.name}
+
{c.hex[theme]}
+
+ ))} +
+ ); +}; diff --git a/@stellar/design-system-website/src/components/ColorPalette/styles.css b/@stellar/design-system-website/src/components/ColorPalette/styles.css new file mode 100644 index 00000000..b0e2aeda --- /dev/null +++ b/@stellar/design-system-website/src/components/ColorPalette/styles.css @@ -0,0 +1,33 @@ +.ColorPalette { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(5.75rem, 1fr)); + gap: 0.5rem; +} + +.ColorPalette__color { + flex: 1; + display: flex; + flex-direction: column; + font-size: 0.625rem; + font-weight: 600; + line-height: 1rem; + text-transform: uppercase; + + text-overflow: ellipsis; + text-wrap: nowrap; +} + +.ColorPalette__color__box { + height: 3rem; + background-color: var(--ColorPalette-color); + margin-bottom: 0.5rem; + border-radius: 0.25rem; +} + +.ColorPalette__color__name { + color: var(--clr-heading); +} + +.ColorPalette__color__hex { + color: var(--clr-text-secondary); +} diff --git a/@stellar/design-system-website/src/components/ColorPaletteThemeSwitcher/index.tsx b/@stellar/design-system-website/src/components/ColorPaletteThemeSwitcher/index.tsx new file mode 100644 index 00000000..c09d43ae --- /dev/null +++ b/@stellar/design-system-website/src/components/ColorPaletteThemeSwitcher/index.tsx @@ -0,0 +1,45 @@ +import React, { useState } from "react"; +import "./styles.css"; +import { Select } from "@stellar/design-system"; + +export const LOCAL_STORAGE_COLOR_PALETTE_THEME = "sdsColorPaletteTheme"; +export const COLOR_PALETTE_THEME_CHANGE_EVENT = + "sdsColorPaletteThemeChangeEvent"; + +export const ColorPaletteThemeSwitcher = () => { + const [currentTheme, setCurrentTheme] = useState( + localStorage.getItem(LOCAL_STORAGE_COLOR_PALETTE_THEME) || "light", + ); + + const handleThemeChange = (event: React.ChangeEvent) => { + const newTheme = event.target.value; + + localStorage.setItem(LOCAL_STORAGE_COLOR_PALETTE_THEME, newTheme); + setCurrentTheme(newTheme); + + document.dispatchEvent( + new CustomEvent(COLOR_PALETTE_THEME_CHANGE_EVENT, { + bubbles: true, + detail: { theme: newTheme }, + }), + ); + }; + + return ( + <> +

Selec the color theme below to view color palette for that theme.

+ +
+ +
+ + ); +}; diff --git a/@stellar/design-system-website/src/components/ColorPaletteThemeSwitcher/styles.css b/@stellar/design-system-website/src/components/ColorPaletteThemeSwitcher/styles.css new file mode 100644 index 00000000..6bbd70d5 --- /dev/null +++ b/@stellar/design-system-website/src/components/ColorPaletteThemeSwitcher/styles.css @@ -0,0 +1,14 @@ +.ColorPaletteThemeSwitcher { + background-color: transparent !important; +} + +.ColorPaletteThemeSwitcher .Select { + --Select-color-background: var(--sds-select-color-background); + --Select-color-background-option: var(--sds-select-color-background-option); + --Select-color-border: var(--sds-select-color-border); + --Select-color-border-hover: var(--sds-select-color-border-hover); + --Select-color-border-focus: var(--sds-select-color-border-focus); + --Select-color-text: var(--sds-select-color-text); + + max-width: 10rem; +} diff --git a/@stellar/design-system-website/src/css/custom.css b/@stellar/design-system-website/src/css/custom.css index ab3b82b7..f75a3e58 100644 --- a/@stellar/design-system-website/src/css/custom.css +++ b/@stellar/design-system-website/src/css/custom.css @@ -64,6 +64,18 @@ --ifm-sds-icon-fill: #1a1523; /* --color-gray-70 */ --ifm-sds-icon-text: #6f6e77; + + /* Text colors */ + --clr-heading: #6f6f6f; + --clr-text-secondary: #8f8f8f; + + /* Select */ + --sds-select-color-background: #ffffff; + --sds-select-color-background-option: #ffffff; + --sds-select-color-border: #eeedef; + --sds-select-color-border-hover: #e9e8ea; + --sds-select-color-border-focus: #c8c7cb; + --sds-select-color-text: #1a1523; } /* For readability concerns, you should choose a lighter palette in dark mode. */ @@ -117,9 +129,30 @@ --ifm-sds-icon-fill: #ededef; /* --color-gray-70 */ --ifm-sds-icon-text: #a09fa6; + + /* Text colors */ + --clr-heading: #a0a0a0; + --clr-text-secondary: #707070; + + /* Select */ + --sds-select-color-background: #000000; + --sds-select-color-background-option: #000000; + --sds-select-color-border: #28282c; + --sds-select-color-border-hover: #2e2e32; + --sds-select-color-border-focus: #706f78; + --sds-select-color-text: #ededef; } /* Typography */ +h1, +h2, +h3, +h4, +h5 { + font-weight: 500; + color: var(--ifm-menu-color-active); +} + h1 { font-size: 2rem; line-height: 2.5rem; @@ -133,16 +166,19 @@ h2 { h3 { font-size: 1.5rem; line-height: 2rem; + color: var(--clr-heading); } h4 { font-size: 1.25rem; line-height: 1.75rem; + color: var(--clr-heading); } h5 { font-size: 1.125rem; line-height: 1.625rem; + color: var(--clr-heading); } h6 { @@ -152,15 +188,6 @@ h6 { color: var(--ifm-menu-color-active); } -h1, -h2, -h3, -h4, -h5 { - font-weight: 500; - color: var(--ifm-menu-color-active); -} - b, strong { font-weight: 600; diff --git a/@stellar/design-system-website/src/theme/MDXComponents.js b/@stellar/design-system-website/src/theme/MDXComponents.js index d096c002..65365b33 100644 --- a/@stellar/design-system-website/src/theme/MDXComponents.js +++ b/@stellar/design-system-website/src/theme/MDXComponents.js @@ -3,6 +3,8 @@ import { ComponentDescription } from "@site/src/components/ComponentDescription" import { ComponentProps } from "@site/src/components/ComponentProps"; import { PreviewBlock } from "@site/src/components/PreviewBlock"; import { AssetPreview } from "@site/src/components/AssetPreview"; +import { ColorPalette } from "@site/src/components/ColorPalette"; +import { ColorPaletteThemeSwitcher } from "@site/src/components/ColorPaletteThemeSwitcher"; export default { ...MDXComponents, @@ -10,4 +12,6 @@ export default { ComponentProps, PreviewBlock, AssetPreview, + ColorPalette, + ColorPaletteThemeSwitcher, }; From 2ec72493950b20cb867bb170b2e5c4a400451008 Mon Sep 17 00:00:00 2001 From: Iveta Date: Thu, 30 Nov 2023 15:09:53 -0500 Subject: [PATCH 2/3] Fix server side rendering --- .../src/components/ColorPalette/index.tsx | 5 ++++- .../components/ColorPaletteThemeSwitcher/index.tsx | 12 ++++++++++-- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/@stellar/design-system-website/src/components/ColorPalette/index.tsx b/@stellar/design-system-website/src/components/ColorPalette/index.tsx index 1fce4c7d..d8739381 100644 --- a/@stellar/design-system-website/src/components/ColorPalette/index.tsx +++ b/@stellar/design-system-website/src/components/ColorPalette/index.tsx @@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react"; import { COLOR_PALETTE_THEME_CHANGE_EVENT, LOCAL_STORAGE_COLOR_PALETTE_THEME, + isBrowser, } from "../ColorPaletteThemeSwitcher"; import "./styles.css"; @@ -15,7 +16,9 @@ export const ColorPalette = ({ }[]; }) => { const [theme, setTheme] = useState( - localStorage.getItem(LOCAL_STORAGE_COLOR_PALETTE_THEME) || "light", + isBrowser + ? localStorage.getItem(LOCAL_STORAGE_COLOR_PALETTE_THEME) || "light" + : null, ); useEffect(() => { diff --git a/@stellar/design-system-website/src/components/ColorPaletteThemeSwitcher/index.tsx b/@stellar/design-system-website/src/components/ColorPaletteThemeSwitcher/index.tsx index c09d43ae..e72908a2 100644 --- a/@stellar/design-system-website/src/components/ColorPaletteThemeSwitcher/index.tsx +++ b/@stellar/design-system-website/src/components/ColorPaletteThemeSwitcher/index.tsx @@ -1,17 +1,25 @@ import React, { useState } from "react"; -import "./styles.css"; import { Select } from "@stellar/design-system"; +import "./styles.css"; export const LOCAL_STORAGE_COLOR_PALETTE_THEME = "sdsColorPaletteTheme"; export const COLOR_PALETTE_THEME_CHANGE_EVENT = "sdsColorPaletteThemeChangeEvent"; +export const isBrowser = + typeof localStorage !== "undefined" && typeof document !== "undefined"; export const ColorPaletteThemeSwitcher = () => { const [currentTheme, setCurrentTheme] = useState( - localStorage.getItem(LOCAL_STORAGE_COLOR_PALETTE_THEME) || "light", + isBrowser + ? localStorage.getItem(LOCAL_STORAGE_COLOR_PALETTE_THEME) || "light" + : null, ); const handleThemeChange = (event: React.ChangeEvent) => { + if (!isBrowser) { + return; + } + const newTheme = event.target.value; localStorage.setItem(LOCAL_STORAGE_COLOR_PALETTE_THEME, newTheme); From d31e8de4de4ba203e96ba2822c97f6a70615382a Mon Sep 17 00:00:00 2001 From: Iveta Date: Thu, 30 Nov 2023 16:17:30 -0500 Subject: [PATCH 3/3] Fix svg width --- .../src/components/AssetPreview/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/@stellar/design-system-website/src/components/AssetPreview/styles.css b/@stellar/design-system-website/src/components/AssetPreview/styles.css index 39090633..ddcb23e5 100644 --- a/@stellar/design-system-website/src/components/AssetPreview/styles.css +++ b/@stellar/design-system-website/src/components/AssetPreview/styles.css @@ -23,7 +23,7 @@ } .AssetPreview__item__icon svg { - width: auto; + width: 100%; height: 1.5rem; }