mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-10-24 15:42:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

List colors for reference palette in theme tool

Browse source
This commit is contained in:
Nate Butler 2023-02-09 00:39:57 -05:00
parent 6f342bb2c6
commit f787f6054b
6 changed files with 125 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
styles/src/system/ref/color.ts
View file

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

3
styles/src/system/reference.ts
View file

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

47
styles/theme-tool/app/page.tsx
View file

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

22
styles/theme-tool/package-lock.json generated
View file

@ -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",

34
styles/theme-tool/package.json
View file

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

55
styles/theme-tool/tsconfig.json
View file

@ -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"]
}