From f787f6054bbcec522d7f88dfd7026fe6d947a0cd Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Thu, 9 Feb 2023 00:39:57 -0500 Subject: [PATCH] List colors for reference palette in theme tool --- styles/src/system/ref/color.ts | 10 ++++++ styles/src/system/reference.ts | 3 +- styles/theme-tool/app/page.tsx | 47 ++++++++++++++++++++++-- styles/theme-tool/package-lock.json | 22 ++++++++++++ styles/theme-tool/package.json | 34 +++++++++--------- styles/theme-tool/tsconfig.json | 55 +++++++++++++++-------------- 6 files changed, 125 insertions(+), 46 deletions(-) diff --git a/styles/src/system/ref/color.ts b/styles/src/system/ref/color.ts index bcf15157f5..4532bad619 100644 --- a/styles/src/system/ref/color.ts +++ b/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]); diff --git a/styles/src/system/reference.ts b/styles/src/system/reference.ts index b7b96bef2f..5b9c285f72 100644 --- a/styles/src/system/reference.ts +++ b/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, }; diff --git a/styles/theme-tool/app/page.tsx b/styles/theme-tool/app/page.tsx index 341e86665d..4706ad2c18 100644 --- a/styles/theme-tool/app/page.tsx +++ b/styles/theme-tool/app/page.tsx @@ -1,3 +1,46 @@ -export default function Home() { - return
Hello World
; +/* eslint-disable import/no-relative-packages */ +import { Scale } from 'chroma-js'; + +import { color } from '../../src/system/reference'; + +function ColorChips({ colorScale }: { colorScale: Scale }) { + const colors = colorScale.colors(11); + + return ( +
+ {colors.map((c) => ( +
+ {c} +
+ ))} +
+ ); +} + +export default function Home() { + const { red, gray, rose } = color; + return ( +
+
+ + + +
+
+ ); } diff --git a/styles/theme-tool/package-lock.json b/styles/theme-tool/package-lock.json index 1c3dc8afec..a2a0849410 100644 --- a/styles/theme-tool/package-lock.json +++ b/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", diff --git a/styles/theme-tool/package.json b/styles/theme-tool/package.json index 2a1ee803c2..c3c5bb2ac0 100644 --- a/styles/theme-tool/package.json +++ b/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/(.*)$", - "^@/app/(.*)$", - "^@/ui/(.*)$", - "^[./]" + "^@/lib/(.*)$", + "^@/app/(.*)$", + "^@/ui/(.*)$", + "^[./]" ], "importOrderBuiltinModulesToTop": true, "importOrderCaseInsensitive": true, "importOrderParserPlugins": [ - "typescript", - "jsx", - "decorators-legacy" + "typescript", + "jsx", + "decorators-legacy" ], "importOrderMergeDuplicateImports": true, "importOrderCombineTypeAndValueImports": true, "importOrderSeparation": true, "importOrderSortSpecifiers": true -} + } } diff --git a/styles/theme-tool/tsconfig.json b/styles/theme-tool/tsconfig.json index 597f483b2d..f6a3745820 100644 --- a/styles/theme-tool/tsconfig.json +++ b/styles/theme-tool/tsconfig.json @@ -1,29 +1,30 @@ { - "compilerOptions": { - "target": "es5", - "lib": ["dom", "dom.iterable", "esnext"], - "allowJs": true, - "skipLibCheck": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noEmit": true, - "esModuleInterop": true, - "module": "esnext", - "moduleResolution": "node", - "resolveJsonModule": true, - "isolatedModules": true, - "jsx": "preserve", - "incremental": true, - "plugins": [ - { - "name": "next" - } - ], - "baseUrl": ".", - "paths": { - "@/*": ["./*"] - } - }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], - "exclude": ["node_modules"] + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "baseUrl": ".", + "paths": { + "@/*": ["./*"], + "@/system/*": ["../src/system/*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] }