mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2025-01-12 21:32:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

Update chip style

Browse source
This commit is contained in:
Nate Butler 2023-02-10 22:06:03 -05:00
parent 76685406ed
commit 0e238210bb
2 changed files with 25 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
styles/theme-tool/app/page.module.css
View file

@ -1,8 +1,20 @@
.main {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 6rem;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 6rem;
min-height: 100vh;
}
.chip {
display: flex;
align-items: center;
justify-content: center;
border-radius: 1px;
color: #000;
font-size: 12px;
font-family: monospace;
text-transform: uppercase;
font-weight: 500;
}

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

@ -2,6 +2,7 @@
import { Scale } from 'chroma-js';
import { color } from '../../src/system/reference';
import styles from './page.module.css';
function ColorChips({ colorScale }: { colorScale: Scale }) {
const colors = colorScale.colors(11);
@ -24,6 +25,7 @@ function ColorChips({ colorScale }: { colorScale: Scale }) {
width: '80px',
height: '40px',
}}
className={styles.chip}
>
{c}
</div>
@ -33,26 +35,14 @@ function ColorChips({ colorScale }: { colorScale: Scale }) {
}
export default function Home() {
const {
grayLight,
grayDark,
roseDark,
roseLight,
redDark,
redLight,
orangeDark,
orangeLight,
amberDark,
amberLight,
} = color;
return (
<main>
<div style={{ display: 'flex', gap: '1px' }}>
<ColorChips colorScale={grayLight} />
<ColorChips colorScale={roseLight} />
<ColorChips colorScale={redLight} />
<ColorChips colorScale={orangeLight} />
<ColorChips colorScale={amberLight} />
<ColorChips colorScale={color.grayLight} />
<ColorChips colorScale={color.roseLight} />
<ColorChips colorScale={color.redLight} />
<ColorChips colorScale={color.orangeLight} />
<ColorChips colorScale={color.amberLight} />
<ColorChips colorScale={color.yellowLight} />
<ColorChips colorScale={color.limeLight} />
<ColorChips colorScale={color.greenLight} />