SDS web: colors page

@stellar/design-system-website/src/components/AssetPreview/styles.css

@@ -23,7 +23,7 @@
 }
 
 .AssetPreview__item__icon svg {
-  width: auto;
+  width: 100%;
   height: 1.5rem;
 }
 

@stellar/design-system-website/src/components/ColorPalette/index.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from "react";
+import {
+  COLOR_PALETTE_THEME_CHANGE_EVENT,
+  LOCAL_STORAGE_COLOR_PALETTE_THEME,
+  isBrowser,
+} from "../ColorPaletteThemeSwitcher";
+import "./styles.css";
+
+export const ColorPalette = ({
+  colors,
+}: {
+  colors: {
+    hex: { light: string; dark: string };
+    variable: string;
+    name: string;
+  }[];
+}) => {
+  const [theme, setTheme] = useState<string>(
+    isBrowser
+      ? localStorage.getItem(LOCAL_STORAGE_COLOR_PALETTE_THEME) || "light"
+      : null,
+  );
+
+  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 (
+    <div className="ColorPalette">
+      {colors.map((c) => (
+        <div className="ColorPalette__color" key={c.hex[theme]}>
+          <div
+            className="ColorPalette__color__box"
+            style={
+              {
+                "--ColorPalette-color": c.hex[theme],
+              } as React.CSSProperties
+            }
+          ></div>
+          <div className="ColorPalette__color__name">{c.name}</div>
+          <div className="ColorPalette__color__hex">{c.hex[theme]}</div>
+        </div>
+      ))}
+    </div>
+  );
+};

@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);
+}

@stellar/design-system-website/src/components/ColorPaletteThemeSwitcher/index.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+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(
+    isBrowser
+      ? localStorage.getItem(LOCAL_STORAGE_COLOR_PALETTE_THEME) || "light"
+      : null,
+  );
+
+  const handleThemeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    if (!isBrowser) {
+      return;
+    }
+
+    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 (
+    <>
+      <p>Selec the color theme below to view color palette for that theme.</p>
+
+      <div className="ColorPaletteThemeSwitcher sds-theme-light">
+        <Select
+          id="color-palette-theme"
+          fieldSize="sm"
+          onChange={handleThemeChange}
+          value={currentTheme}
+        >
+          <option value="light">Light</option>
+          <option value="dark">Dark</option>
+        </Select>
+      </div>
+    </>
+  );
+};

@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;
+}

@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;

@stellar/design-system-website/src/theme/MDXComponents.js

@@ -3,11 +3,15 @@ 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,
   ComponentDescription,
   ComponentProps,
   PreviewBlock,
   AssetPreview,
+  ColorPalette,
+  ColorPaletteThemeSwitcher,
 };