Detailed changes
@@ -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]);
@@ -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,
};
@@ -1,3 +1,46 @@
+/* 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 (
+ <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() {
- return <main>Hello World</main>;
+ const { red, gray, rose } = color;
+ return (
+ <main>
+ <div style={{ display: 'flex', gap: '1px' }}>
+ <ColorChips colorScale={gray} />
+ <ColorChips colorScale={rose} />
+ <ColorChips colorScale={red} />
+ </div>
+ </main>
+ );
}
@@ -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",
@@ -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
-}
+ }
}
@@ -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"]
}