-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Closes #94
- Loading branch information
Showing
7 changed files
with
332 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@compai/css-gui': patch | ||
| --- | ||
|
|
||
| Add importColors utility function |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,214 @@ | ||
| import { useState } from 'react' | ||
| import { Editor, importColors } from '@compai/css-gui' | ||
|
|
||
| // https://components.ai/theme/asa9lvO69pQGyRn8ZAXL?tab=export | ||
| const themeColors = { | ||
| gray: [ | ||
| '#000000', | ||
| '#1c1c1c', | ||
| '#303030', | ||
| '#474747', | ||
| '#5d5d5d', | ||
| '#757575', | ||
| '#8c8c8c', | ||
| '#a3a3a3', | ||
| '#bababa', | ||
| '#d1d1d1', | ||
| '#e8e8e8', | ||
| '#ffffff', | ||
| ], | ||
| 'blue-gray': [ | ||
| '#0e0e11', | ||
| '#21222a', | ||
| '#343544', | ||
| '#484a5e', | ||
| '#5c5f78', | ||
| '#717490', | ||
| '#8789a6', | ||
| '#9c9eba', | ||
| '#b1b3cb', | ||
| '#c6c8db', | ||
| '#dcdce9', | ||
| '#f1f1f6', | ||
| ], | ||
| blue: [ | ||
| '#0d0e1a', | ||
| '#182142', | ||
| '#1e336d', | ||
| '#254797', | ||
| '#325bbd', | ||
| '#476fde', | ||
| '#6284f6', | ||
| '#809aff', | ||
| '#9fb0ff', | ||
| '#bcc6ff', | ||
| '#d9deff', | ||
| '#f4f5ff', | ||
| ], | ||
| indigo: [ | ||
| '#120c1d', | ||
| '#211b4d', | ||
| '#2f297f', | ||
| '#3e38b0', | ||
| '#5049dd', | ||
| '#675bff', | ||
| '#8170ff', | ||
| '#9d87ff', | ||
| '#b7a0ff', | ||
| '#d0baff', | ||
| '#e5d6ff', | ||
| '#f7f1ff', | ||
| ], | ||
| violet: [ | ||
| '#170a1b', | ||
| '#321545', | ||
| '#501b71', | ||
| '#6d239d', | ||
| '#8a2fc5', | ||
| '#a641e7', | ||
| '#be58ff', | ||
| '#d374ff', | ||
| '#e392ff', | ||
| '#f0b1ff', | ||
| '#f9d0ff', | ||
| '#fef0ff', | ||
| ], | ||
| magenta: [ | ||
| '#170915', | ||
| '#381436', | ||
| '#5b1859', | ||
| '#7f1e7c', | ||
| '#a0289d', | ||
| '#bf3abb', | ||
| '#d853d2', | ||
| '#ea70e4', | ||
| '#f78ff0', | ||
| '#ffaef8', | ||
| '#ffcefc', | ||
| '#ffeefe', | ||
| ], | ||
| red: [ | ||
| '#19090a', | ||
| '#3e131a', | ||
| '#651829', | ||
| '#8d1d38', | ||
| '#b22749', | ||
| '#d23a5b', | ||
| '#ec5370', | ||
| '#ff7086', | ||
| '#ff909e', | ||
| '#ffb0b9', | ||
| '#ffd0d4', | ||
| '#fff0f1', | ||
| ], | ||
| orange: [ | ||
| '#200d02', | ||
| '#431706', | ||
| '#691e0a', | ||
| '#8e280d', | ||
| '#b13514', | ||
| '#d14721', | ||
| '#ea5e36', | ||
| '#fd7950', | ||
| '#ff9670', | ||
| '#ffb495', | ||
| '#ffd2be', | ||
| '#fff0e9', | ||
| ], | ||
| gold: [ | ||
| '#160f05', | ||
| '#402e11', | ||
| '#6e4d14', | ||
| '#9c6c18', | ||
| '#c68a20', | ||
| '#eba62e', | ||
| '#ffbe44', | ||
| '#ffd15e', | ||
| '#ffe07c', | ||
| '#ffeb9b', | ||
| '#fff3bc', | ||
| '#fffade', | ||
| ], | ||
| yellow: [ | ||
| '#0d0c04', | ||
| '#332f11', | ||
| '#585315', | ||
| '#7f7719', | ||
| '#a49a20', | ||
| '#c5ba2c', | ||
| '#e1d43f', | ||
| '#f6e857', | ||
| '#fff673', | ||
| '#fffe90', | ||
| '#ffffae', | ||
| '#ffffcc', | ||
| ], | ||
| lime: [ | ||
| '#161708', | ||
| '#323711', | ||
| '#505a15', | ||
| '#6e7c19', | ||
| '#8b9c22', | ||
| '#a6b932', | ||
| '#bed049', | ||
| '#d1e264', | ||
| '#e1ee83', | ||
| '#edf6a3', | ||
| '#f6fbc4', | ||
| '#fcfee6', | ||
| ], | ||
| green: [ | ||
| '#071209', | ||
| '#102816', | ||
| '#133f21', | ||
| '#18572d', | ||
| '#216f3b', | ||
| '#32864b', | ||
| '#499c60', | ||
| '#66b178', | ||
| '#85c492', | ||
| '#a7d6af', | ||
| '#cae7cf', | ||
| '#eef7ef', | ||
| ], | ||
| teal: [ | ||
| '#07110f', | ||
| '#102722', | ||
| '#133d35', | ||
| '#18544a', | ||
| '#216b5e', | ||
| '#328173', | ||
| '#499789', | ||
| '#65ac9e', | ||
| '#85c0b3', | ||
| '#a7d3c9', | ||
| '#cae5de', | ||
| '#eef7f4', | ||
| ], | ||
| cyan: [ | ||
| '#081111', | ||
| '#112627', | ||
| '#143c3e', | ||
| '#185356', | ||
| '#226a6d', | ||
| '#338084', | ||
| '#4b969a', | ||
| '#67abae', | ||
| '#87bfc1', | ||
| '#a8d2d4', | ||
| '#cbe4e5', | ||
| '#eef6f7', | ||
| ], | ||
| } | ||
|
|
||
| export const ColorImportExample = () => { | ||
| const [styles, setStyles] = useState({ color: 'tomato' }) | ||
| const colors = importColors(themeColors) | ||
|
|
||
| return ( | ||
| <> | ||
| <Editor styles={styles} onChange={setStyles} theme={{ colors }} /> | ||
| <p style={{ color: styles.color }}>Hello, world!</p> | ||
| </> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import { ColorImportExample } from '../../components/examples/ColorImport' | ||
|
|
||
| # Import Colors | ||
|
|
||
| If you have a [System UI](https://system-ui.com/theme) compatible color palette, you can | ||
| use `importColors` to transform it to the theme used internally. | ||
|
|
||
| In the future, this will likely happen automatically, but for now it needs to be explicitly | ||
| called. | ||
|
|
||
| ```js | ||
| import { useState } from 'react' | ||
| import { Editor, importColors } from '@compai/css-gui' | ||
|
|
||
| // https://components.ai/theme/asa9lvO69pQGyRn8ZAXL?tab=export | ||
| const themeColors = { | ||
| gray: [ | ||
| '#000000', | ||
| '#1c1c1c', | ||
| '#303030', | ||
| '#474747', | ||
| '#5d5d5d', | ||
| '#757575', | ||
| '#8c8c8c', | ||
| '#a3a3a3', | ||
| '#bababa', | ||
| '#d1d1d1', | ||
| '#e8e8e8', | ||
| '#ffffff', | ||
| ], | ||
| 'blue-gray': [ | ||
| '#0e0e11', | ||
| '#21222a', | ||
| '#343544', | ||
| '#484a5e', | ||
| '#5c5f78', | ||
| '#717490', | ||
| '#8789a6', | ||
| '#9c9eba', | ||
| '#b1b3cb', | ||
| '#c6c8db', | ||
| '#dcdce9', | ||
| '#f1f1f6', | ||
| ], | ||
| } | ||
|
|
||
| export const MyEditor = () => { | ||
| const [styles, setStyles] = useState({ color: 'tomato' }) | ||
| const colors = importColors(themeColors) | ||
|
|
||
| return ( | ||
| <> | ||
| <Editor styles={styles} onChange={setStyles} theme={{ colors }} /> | ||
| <p style={{ color: styles.color }}>Hello, world!</p> | ||
| </> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| ## Interactive Example | ||
|
|
||
| <ColorImportExample /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { v4 as uuid } from 'uuid' | ||
| import { Color } from '../types/css' | ||
|
|
||
| type ColorGroupArray = Array<Color> | ||
| type ColorObject = { | ||
| [name: string]: Color | ColorGroupArray | ||
| } | ||
|
|
||
| /** | ||
| * Turn a system-ui color object into an internally compatible shape | ||
| * | ||
| * { | ||
| * gray: ['#000', '#111', '#999'], | ||
| * tomato: 'tomato' | ||
| * } | ||
| */ | ||
| export const importColors = (colors: ColorObject) => { | ||
| return Object.entries(colors).map(([name, group]) => { | ||
| if (!Array.isArray(group)) { | ||
| return { | ||
| id: uuid(), | ||
| name, | ||
| colors: [ | ||
| { | ||
| id: uuid(), | ||
| value: group, | ||
| }, | ||
| ], | ||
| } | ||
| } | ||
|
|
||
| return { | ||
| id: uuid(), | ||
| name, | ||
| colors: group.map((value) => { | ||
| return { | ||
| id: uuid(), | ||
| value: value, | ||
| } | ||
| }), | ||
| } | ||
| }) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| export * from './convert' | ||
| export * as codegen from './codegen' | ||
| export * from './codegen/to-css-object' | ||
| export * from './import' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters