Merge pull request #58 from mj-studio-library/fix-typing-vscode

Fix Theme Token Typing in vscode
mym0404 · Mar 25, 2024 · 7838a97 · 7838a97
2 parents 662c144 + 4995012
commit 7838a97
Show file tree

Hide file tree

Showing 3 changed files with 170 additions and 19 deletions.
diff --git a/bin/ret.d.ts b/bin/ret.d.ts
@@ -1,11 +1,142 @@
-
-
 import type { ColorsValue, RadiiValue, SizesValue, SpaceValue } from './Token';
 
 export interface ThemedTypings {
-  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" 
-radii: RadiiValue | `${number}` | `${number}px` | `${any}px` |  "1" | "2" | "sm" | "md" 
-sizes: SizesValue | `${number}` | `${number}px` | `${any}px` |  "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "18" | "20" | "24" | "28" | "30" | "32" | "40" | "48" | "px" | "0.5" 
-space: SpaceValue | `${number}` | `${number}px` | `${any}px` |  "0" | "-0" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "18" | "-18" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "30" | "-30" | "32" | "-32" | "40" | "-40" | "48" | "-48" | "px" | "-px" | "0.5" | "-0.5" 
-typography: "h1" 
+  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';
+  radii: (RadiiValue & {}) | (`${number}` & {}) | (`${any}px` & {}) | '1' | '2' | 'sm' | 'md';
+  sizes:
+    | (SizesValue & {})
+    | (`${number}` & {})
+    | (`${any}px` & {})
+    | '0'
+    | '1'
+    | '2'
+    | '3'
+    | '4'
+    | '5'
+    | '6'
+    | '7'
+    | '8'
+    | '9'
+    | '10'
+    | '12'
+    | '14'
+    | '16'
+    | '18'
+    | '20'
+    | '24'
+    | '28'
+    | '30'
+    | '32'
+    | '40'
+    | '48'
+    | 'px'
+    | '0.5';
+  space:
+    | (SpaceValue & {})
+    | (`${number}` & {})
+    | (`${any}px` & {})
+    | '0'
+    | '-0'
+    | '1'
+    | '-1'
+    | '2'
+    | '-2'
+    | '3'
+    | '-3'
+    | '4'
+    | '-4'
+    | '5'
+    | '-5'
+    | '6'
+    | '-6'
+    | '7'
+    | '-7'
+    | '8'
+    | '-8'
+    | '9'
+    | '-9'
+    | '10'
+    | '-10'
+    | '12'
+    | '-12'
+    | '14'
+    | '-14'
+    | '16'
+    | '-16'
+    | '18'
+    | '-18'
+    | '20'
+    | '-20'
+    | '24'
+    | '-24'
+    | '28'
+    | '-28'
+    | '30'
+    | '-30'
+    | '32'
+    | '-32'
+    | '40'
+    | '-40'
+    | '48'
+    | '-48'
+    | 'px'
+    | '-px'
+    | '0.5'
+    | '-0.5';
+  typography: 'h1';
 }
diff --git a/bin/theme-gen.js b/bin/theme-gen.js
@@ -115,21 +115,21 @@ const go = async () => {
 
     result = result.replace(
       'space:',
-      'space: SpaceValue | `${number}` | `${number}px` | `${any}px` | ',
+      'space: (SpaceValue & {}) | (`${number}` & {}) | (`${any}px` & {}) | ',
     );
 
     result = result.replace(
       'sizes:',
-      'sizes: SizesValue | `${number}` | `${number}px` | `${any}px` | ',
+      'sizes: (SizesValue & {}) | (`${number}` & {}) | (`${any}px` & {}) | ',
     );
 
     result = result.replace(
       'radii:',
-      'radii: RadiiValue | `${number}` | `${number}px` | `${any}px` | ',
+      'radii: (RadiiValue & {}) | (`${number}` & {}) | (`${any}px` & {}) | ',
     );
 
-    result = result.replace('colors:', 'colors: ColorsValue | ');
-    result = result.replace(/typography:\W*?\n/, 'typography: string;');
+    result = result.replace('colors:', 'colors: (ColorsValue & {}) | ');
+    result = result.replace(/typography:\W*?\n/, 'typography: (string & {});');
 
     result = result.replace(/\|[\s ]*\n/g, ';');
 

diff --git a/doc/docs/usage/typescript.mdx b/doc/docs/usage/typescript.mdx
@@ -67,12 +67,32 @@ Then it is created as follows:
 import type { ColorsValue, RadiiValue, SizesValue, SpaceValue } from './Token';
 
 export interface ThemedTypings {
-  colors: ColorsValue |  "white" | "black" | "red" | "blue" | "green"
-radii: RadiiValue | `${number}` | `${number}px` | `${any}px` |  "sm" | "md" | "lg"
-sizes: SizesValue | `${number}` | `${number}px` | `${any}px` |  "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "17" | "18" | "19" | "20" | "24" | "28" | "30" | "32" | "40" | "48" | "px" | "0.5"
-space: SpaceValue | `${number}` | `${number}px` | `${any}px` |  "0" | "-0" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "11" | "-11" | "12" | "-12" | "13" | "-13" | "14" | "-14" | "15" | "-15" | "16" | "-16" | "17" | "-17" | "18" | "-18" | "19" | "-19" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "30" | "-30" | "32" | "-32" | "40" | "-40" | "48" | "-48" | "px" | "-px" | "0.5" | "-0.5" | "sfTop" | "-sfTop" | "sfRight" | "-sfRight" | "sfBottom" | "-sfBottom" | "sfLeft" | "-sfLeft"
-typography: "h1" | "title" | "body" | "small"
+  colors:
+    | (ColorsValue & {})
+    | 'white'
+    | 'black'
+    | 'transparent'
+    | 'gray50'
+    /* ... */
+    | 'blue900';
+  radii: (RadiiValue & {}) | (`${number}` & {}) | (`${any}px` & {}) | '1' | '2' | 'sm' | 'md';
+  sizes:
+    | (SizesValue & {})
+    | (`${number}` & {})
+    | (`${any}px` & {})
+    | '0'
+    /* ... */
+    | 'px'
+    | '0.5';
+  space:
+    | (SpaceValue & {})
+    | (`${number}` & {})
+    | (`${any}px` & {})
+    | '0'
+    /* ... */
+    | '0.5'
+    | '-0.5';
+  typography: 'h1';
 }
-```
 
-Type creation is performed internally using `@chakra-ui/cli`.
+```