feat(typing): support raw color

mym0404 · Mar 18, 2024 · 1a9e385 · 1a9e385
1 parent f2f0fc7
commit 1a9e385
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
diff --git a/bin/ret.d.ts b/bin/ret.d.ts
@@ -1,14 +1,14 @@
 
 
-import type { RadiiValue, SizesValue, SpaceValue } from './Token';
+import type { ColorsValue, RadiiValue, SizesValue, SpaceValue } from './Token';
 
 export interface ThemedTypings {
 
 
 
 
 
-colors: "white" | "black" | "transparent" | "gray50" | "gray100" | "gray200" | "gray300" | "gray400" | "gray500" | "gray600" | "gray700" | "gray800" | "gray900" | "violet50" | "violet100" | "violet200" | "violet300" | "violet400" | "violet500" | "violet600" | "violet700" | "violet800" | "violet900" | "green50" | "green100" | "green200" | "green300" | "green400" | "green500" | "green600" | "yellow50" | "yellow100" | "yellow200" | "yellow300" | "yellow400" | "yellow500" | "yellow600" | "red50" | "red100" | "red200" | "red300" | "red400" | "red500" | "red600" | "blue50" | "blue100" | "blue200" | "blue300" | "blue400" | "blue500" | "blue600" | "blue700" | "blue800" | "blue900" 
+colors: ColorsValue | "white" | "black" | "transparent" | "gray50" | "gray100" | "gray200" | "gray300" | "gray400" | "gray500" | "gray600" | "gray700" | "gray800" | "gray900" | "violet50" | "violet100" | "violet200" | "violet300" | "violet400" | "violet500" | "violet600" | "violet700" | "violet800" | "violet900" | "green50" | "green100" | "green200" | "green300" | "green400" | "green500" | "green600" | "yellow50" | "yellow100" | "yellow200" | "yellow300" | "yellow400" | "yellow500" | "yellow600" | "red50" | "red100" | "red200" | "red300" | "red400" | "red500" | "red600" | "blue50" | "blue100" | "blue200" | "blue300" | "blue400" | "blue500" | "blue600" | "blue700" | "blue800" | "blue900" 
 
 
 

diff --git a/bin/theme-gen.mjs b/bin/theme-gen.mjs
@@ -147,7 +147,7 @@ try {
  let result = read(tmpFile);
  result = result.replace(
  /import.*/,
- "import type { RadiiValue, SizesValue, SpaceValue } from './Token';\n",
+ "import type { ColorsValue, RadiiValue, SizesValue, SpaceValue } from './Token';\n",
  );
  result = result.replace(/export.*/, 'export interface ThemedTypings {');
  result = result.replace(/\/\/.*/g, '');
@@ -185,6 +185,11 @@ try {
  'radii:',
  'radii: RadiiValue | `${number}` | `${number}px` | `${any}px` | ',
  );
+
+ result = result.replace(
+ 'colors:',
+ 'colors: ColorsValue | ',
+ );
 
  result = result.replace(/\|[\s ]*\n/g, ';');
 

diff --git a/src/hook/useSx.test.ts b/src/hook/useSx.test.ts
@@ -51,6 +51,7 @@ describe('simple usages', () => {
 
  it('color', () => {
  expectResult(baseTheme, { bg: 'red' }, { backgroundColor: 'red' });
+ expectResult(baseTheme, { bg: '#ffffff' }, { backgroundColor: '#ffffff' });
  });
 });
 
@@ -140,6 +141,11 @@ describe('sizes parsing', () => {
 describe('shortcut priority', () => {
  it('bg', () => {
  expectResult(baseTheme, { bg: 'red', backgroundColor: 'blue' }, { backgroundColor: 'blue' });
+ expectResult(
+ baseTheme,
+ { bg: 'red', backgroundColor: '#ffffff' },
+ { backgroundColor: '#ffffff' },
+ );
  });
 
  it('w', () => {

diff --git a/src/util/propsToThemedStyle.ts b/src/util/propsToThemedStyle.ts
@@ -35,7 +35,11 @@ export const propsToThemedStyle = ({
  return;
  }
 
- return theme.colors[token];
+ if (token in theme.colors) {
+ return theme.colors[token];
+ } else {
+ return token;
+ }
  };
 
  /**