List colors for reference palette in theme tool

styles/src/system/ref/color.ts

@@ -11,6 +11,11 @@ const base = {
     mid: chroma.lch(55, 0, 0),
     dark: chroma.lch(10, 0, 0),
   },
+  rose: {
+    light: chroma.lch(96, 5, 14),
+    mid: chroma.lch(56, 74, 21),
+    dark: chroma.lch(10, 24, 21),
+  },
   red: {
     light: chroma.lch(96, 4, 31),
     mid: chroma.lch(55, 77, 31),
@@ -26,4 +31,9 @@ export const gray = chroma.scale([
   base.gray.mid,
   base.gray.dark,
 ]);
+export const rose = chroma.scale([
+  base.rose.light,
+  base.rose.mid,
+  base.rose.dark,
+]);
 export const red = chroma.scale([base.red.light, base.red.mid, base.red.dark]);

styles/src/system/reference.ts

@@ -1,8 +1,9 @@
-import { black, gray, red, white } from "./ref/color";
+import { black, gray, rose, red, white } from "./ref/color";
 
 export const color = {
   white,
   black,
   gray,
+  rose,
   red,
 };

styles/theme-tool/app/page.tsx

@@ -1,3 +1,46 @@
-export default function Home() {
+/* eslint-disable import/no-relative-packages */
-  return <main>Hello World</main>;
+import { Scale } from 'chroma-js';
+
+import { color } from '../../src/system/reference';
+
+function ColorChips({ colorScale }: { colorScale: Scale }) {
+    const colors = colorScale.colors(11);
+
+    return (
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: '1px',
+            }}
+        >
+            {colors.map((c) => (
+                <div
+                    key={c}
+                    style={{
+                        backgroundColor: c,
+                        width: '80px',
+                        height: '40px',
+                    }}
+                >
+                    {c}
+                </div>
+            ))}
+        </div>
+    );
+}
+
+export default function Home() {
+    const { red, gray, rose } = color;
+    return (
+        <main>
+            <div style={{ display: 'flex', gap: '1px' }}>
+                <ColorChips colorScale={gray} />
+                <ColorChips colorScale={rose} />
+                <ColorChips colorScale={red} />
+            </div>
+        </main>
+    );
 }

styles/theme-tool/package-lock.json

@@ -10,11 +10,13 @@
       "dependencies": {
         "@ianvs/prettier-plugin-sort-imports": "^3.7.1",
         "@next/font": "13.1.6",
+        "@types/chroma-js": "^2.1.5",
         "@types/node": "18.13.0",
         "@types/react": "18.0.27",
         "@types/react-dom": "18.0.10",
         "@typescript-eslint/eslint-plugin": "^5.49.0",
         "@typescript-eslint/parser": "^5.49.0",
+        "chroma-js": "^2.4.2",
         "eslint": "8.33.0",
         "eslint-config-airbnb": "19.0.4",
         "eslint-config-next": "13.1.6",
@@ -843,6 +845,11 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/chroma-js": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@types/chroma-js/-/chroma-js-2.1.5.tgz",
+      "integrity": "sha512-LnJmElng1zoH7GOYqIo/EuL7L0/vEh5rc+fKaF4rsylJyjwOkX0pXeBemH25FQAWHifKJWqaRwR0EhC+yDod9A=="
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -1366,6 +1373,11 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chroma-js": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
+      "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -4663,6 +4675,11 @@
         "tslib": "^2.4.0"
       }
     },
+    "@types/chroma-js": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@types/chroma-js/-/chroma-js-2.1.5.tgz",
+      "integrity": "sha512-LnJmElng1zoH7GOYqIo/EuL7L0/vEh5rc+fKaF4rsylJyjwOkX0pXeBemH25FQAWHifKJWqaRwR0EhC+yDod9A=="
+    },
     "@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -5001,6 +5018,11 @@
         "supports-color": "^7.1.0"
       }
     },
+    "chroma-js": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
+      "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
+    },
     "client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",

styles/theme-tool/package.json

@@ -10,27 +10,29 @@
   },
   "dependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^3.7.1",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
-    "@typescript-eslint/parser": "^5.49.0",
     "@next/font": "13.1.6",
+    "@types/chroma-js": "^2.1.5",
     "@types/node": "18.13.0",
     "@types/react": "18.0.27",
     "@types/react-dom": "18.0.10",
+    "@typescript-eslint/eslint-plugin": "^5.49.0",
+    "@typescript-eslint/parser": "^5.49.0",
+    "chroma-js": "^2.4.2",
     "eslint": "8.33.0",
-    "eslint-config-next": "13.1.6",
-    "next": "13.1.6",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "typescript": "4.9.5",
     "eslint-config-airbnb": "19.0.4",
+    "eslint-config-next": "13.1.6",
     "eslint-config-prettier": "^8.6.0",
     "eslint-import-resolver-typescript": "3.5.3",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-react": "7.32.1",
     "eslint-plugin-react-hooks": "4.6.0",
+    "next": "13.1.6",
     "prettier": "^2.7.1",
-    "prettier-plugin-tailwindcss": "^0.1.12"
+    "prettier-plugin-tailwindcss": "^0.1.12",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "4.9.5"
   },
   "prettier": {
     "arrowParens": "always",
@@ -40,21 +42,21 @@
     "singleQuote": true,
     "semi": true,
     "importOrder": [
-        "^@/lib/(.*)$",
+      "^@/lib/(.*)$",
-        "^@/app/(.*)$",
+      "^@/app/(.*)$",
-        "^@/ui/(.*)$",
+      "^@/ui/(.*)$",
-        "^[./]"
+      "^[./]"
     ],
     "importOrderBuiltinModulesToTop": true,
     "importOrderCaseInsensitive": true,
     "importOrderParserPlugins": [
-        "typescript",
+      "typescript",
-        "jsx",
+      "jsx",
-        "decorators-legacy"
+      "decorators-legacy"
     ],
     "importOrderMergeDuplicateImports": true,
     "importOrderCombineTypeAndValueImports": true,
     "importOrderSeparation": true,
     "importOrderSortSpecifiers": true
-}
+  }
 }

styles/theme-tool/tsconfig.json

@@ -1,29 +1,30 @@
 {
-  "compilerOptions": {
+    "compilerOptions": {
-    "target": "es5",
+        "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+        "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
+        "allowJs": true,
-    "skipLibCheck": true,
+        "skipLibCheck": true,
-    "strict": true,
+        "strict": true,
-    "forceConsistentCasingInFileNames": true,
+        "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
+        "noEmit": true,
-    "esModuleInterop": true,
+        "esModuleInterop": true,
-    "module": "esnext",
+        "module": "esnext",
-    "moduleResolution": "node",
+        "moduleResolution": "node",
-    "resolveJsonModule": true,
+        "resolveJsonModule": true,
-    "isolatedModules": true,
+        "isolatedModules": true,
-    "jsx": "preserve",
+        "jsx": "preserve",
-    "incremental": true,
+        "incremental": true,
-    "plugins": [
+        "plugins": [
-      {
+            {
-        "name": "next"
+                "name": "next"
-      }
+            }
-    ],
+        ],
-    "baseUrl": ".",
+        "baseUrl": ".",
-    "paths": {
+        "paths": {
-      "@/*": ["./*"]
+            "@/*": ["./*"],
-    }
+            "@/system/*": ["../src/system/*"]
-  },
+        }
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+    },
-  "exclude": ["node_modules"]
+    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+    "exclude": ["node_modules"]
 }