oak-team/oak-gpui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP: Use algorithm to generate reference color palette

Browse Source 
Adapted from @k-vyn/coloralgorithm
Generate colors for our reference palette.
This commit is contained in:
Nate Butler
2023-02-09 12:37:05 -05:00
parent f787f6054b
commit 42b5fa1fa3
9 changed files with 474 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/theme-tool/app/page.tsx
+26 -4
View File
@@ -33,13 +33,35 @@ function ColorChips({ colorScale }: { colorScale: Scale }) {
}
export default function Home() {
const { red, gray, rose } = color;
const {
grayLight,
grayDark,
roseDark,
roseLight,
redDark,
redLight,
orangeDark,
orangeLight,
amberDark,
amberLight,
} = color;
return (
<main>
<div style={{ display: 'flex', gap: '1px' }}>
<ColorChips colorScale={gray} />
<ColorChips colorScale={rose} />
<ColorChips colorScale={red} />
<ColorChips colorScale={grayLight} />
<ColorChips colorScale={grayDark} />
<ColorChips colorScale={roseLight} />
<ColorChips colorScale={roseDark} />
<ColorChips colorScale={redLight} />
<ColorChips colorScale={redDark} />
<ColorChips colorScale={orangeLight} />
<ColorChips colorScale={orangeDark} />
<ColorChips colorScale={amberLight} />
<ColorChips colorScale={amberDark} />
</div>
</main>
);
styles/theme-tool/package-lock.json
Generated
+29
View File
@@ -9,6 +9,7 @@
"version": "0.1.0",
"dependencies": {
"@ianvs/prettier-plugin-sort-imports": "^3.7.1",
"@k-vyn/coloralgorithm": "^1.0.0",
"@next/font": "13.1.6",
"@types/chroma-js": "^2.1.5",
"@types/node": "18.13.0",
@@ -568,6 +569,15 @@
"@jridgewell/sourcemap-codec": "1.4.14"
}
},
"node_modules/@k-vyn/coloralgorithm": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@k-vyn/coloralgorithm/-/coloralgorithm-1.0.0.tgz",
"integrity": "sha512-a9aAOXxQ+c2Mw5sMC39elT0wYkPa3qktFjtxVkfY3mQEFBr7NMQEczCARVdkmIKo1dIrgNSx3z12sTXohzSZDg==",
"dependencies": {
"bezier-easing": "^2.1.0",
"chroma-js": "^2.1.0"
}
},
"node_modules/@next/env": {
"version": "13.1.6",
"resolved": "https://registry.npmjs.org/@next/env/-/env-13.1.6.tgz",
@@ -1276,6 +1286,11 @@
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
},
"node_modules/bezier-easing": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
"integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig=="
},
"node_modules/brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -4530,6 +4545,15 @@
"@jridgewell/sourcemap-codec": "1.4.14"
}
},
"@k-vyn/coloralgorithm": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@k-vyn/coloralgorithm/-/coloralgorithm-1.0.0.tgz",
"integrity": "sha512-a9aAOXxQ+c2Mw5sMC39elT0wYkPa3qktFjtxVkfY3mQEFBr7NMQEczCARVdkmIKo1dIrgNSx3z12sTXohzSZDg==",
"requires": {
"bezier-easing": "^2.1.0",
"chroma-js": "^2.1.0"
}
},
"@next/env": {
"version": "13.1.6",
"resolved": "https://registry.npmjs.org/@next/env/-/env-13.1.6.tgz",
@@ -4962,6 +4986,11 @@
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
},
"bezier-easing": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
"integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig=="
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
styles/theme-tool/package.json
+1
View File
@@ -10,6 +10,7 @@
},
"dependencies": {
"@ianvs/prettier-plugin-sort-imports": "^3.7.1",
"@k-vyn/coloralgorithm": "^1.0.0",
"@next/font": "13.1.6",
"@types/chroma-js": "^2.1.5",
"@types/node": "18.13.0",