Prefix token type with name

Temzasse · Oct 10, 2022 · 6618ade · 6618ade
1 parent 941d2a0
commit 6618ade
Show file tree

Hide file tree

Showing 8 changed files with 9 additions and 9 deletions.
diff --git a/example/tokens/colors.ts b/example/tokens/colors.ts
@@ -66,4 +66,4 @@ export const light = {
   "muted1": "#8e8e93"
 };
 
-export type Token = "backdrop" | "background" | "border" | "elevated" | "error" | "errorMuted" | "errorText" | "focusRing" | "hoverHighlight" | "info" | "infoMuted" | "infoText" | "muted1" | "muted2" | "muted3" | "muted4" | "muted5" | "muted6" | "pressHighlight" | "primary" | "primaryMuted" | "primaryText" | "success" | "successMuted" | "successText" | "surface" | "text" | "textMuted" | "warn" | "warnMuted" | "warnText";
+export type ColorsToken = "backdrop" | "background" | "border" | "elevated" | "error" | "errorMuted" | "errorText" | "focusRing" | "hoverHighlight" | "info" | "infoMuted" | "infoText" | "muted1" | "muted2" | "muted3" | "muted4" | "muted5" | "muted6" | "pressHighlight" | "primary" | "primaryMuted" | "primaryText" | "success" | "successMuted" | "successText" | "surface" | "text" | "textMuted" | "warn" | "warnMuted" | "warnText";
diff --git a/example/tokens/icons.ts b/example/tokens/icons.ts
@@ -54,4 +54,4 @@ export const userCicleOutline = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 2
 export const warningTriangle = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M21.266 20.998H2.73301C2.55747 20.998 2.38503 20.9518 2.23302 20.864C2.081 20.7762 1.95477 20.65 1.867 20.498C1.77924 20.346 1.73303 20.1735 1.73303 19.998C1.73303 19.8224 1.77924 19.65 1.86701 19.498L11.133 3.49798C11.2209 3.34644 11.3471 3.22066 11.4989 3.13322C11.6507 3.04578 11.8228 2.99976 11.998 2.99976C12.1732 2.99976 12.3453 3.04578 12.4971 3.13322C12.6489 3.22066 12.7751 3.34644 12.863 3.49798L22.13 19.498C22.2177 19.6499 22.2639 19.8223 22.264 19.9977C22.264 20.1732 22.2179 20.3456 22.1303 20.4975C22.0426 20.6495 21.9165 20.7758 21.7646 20.8636C21.6128 20.9515 21.4405 20.9978 21.265 20.998H21.266ZM11 15.998V17.998H12.998V15.998H11ZM11 8.99798V13.998H13V8.99798H11Z\" fill=\"currentColor\"/></svg>";
 export const x = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M18.9994 6.40989L17.5901 4.99976L12.0003 10.5895L6.40989 4.99976L4.99976 6.40989L10.5895 11.9996L4.99976 17.5901L6.40989 19.0002L11.9996 13.4105L17.5893 19.0002L18.9994 17.5901L13.4097 12.0003L18.9994 6.40989Z\" fill=\"currentColor\"/></svg>";
 
-export type Token = "arrowDown" | "arrowLeft" | "arrowRight" | "arrowUp" | "bell" | "calendar" | "camera" | "checkmark" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "clock" | "ellipsisHorizontal" | "ellipsisVertical" | "envelope" | "envelopeFilled" | "eyeFilled" | "eyeOutline" | "faceNeutral" | "faceSmile" | "filter" | "fullBody" | "graduationCapFilled" | "graduationCapOutline" | "heartFilled" | "heartOutlined" | "homeFilled" | "homeOutline" | "language" | "languageGlobe" | "lightningFilled" | "lightningOutline" | "logout" | "movieFilled" | "movieOpenFilled" | "movieOpenOutline" | "movieOutline" | "paperclip" | "pencil" | "phone" | "piggybank" | "pin" | "plus" | "questionMark" | "questionMarkFull" | "search" | "send" | "sortVertical" | "trash" | "userCicleFilled" | "userCicleOutline" | "warningTriangle" | "x";
+export type IconsToken = "arrowDown" | "arrowLeft" | "arrowRight" | "arrowUp" | "bell" | "calendar" | "camera" | "checkmark" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "clock" | "ellipsisHorizontal" | "ellipsisVertical" | "envelope" | "envelopeFilled" | "eyeFilled" | "eyeOutline" | "faceNeutral" | "faceSmile" | "filter" | "fullBody" | "graduationCapFilled" | "graduationCapOutline" | "heartFilled" | "heartOutlined" | "homeFilled" | "homeOutline" | "language" | "languageGlobe" | "lightningFilled" | "lightningOutline" | "logout" | "movieFilled" | "movieOpenFilled" | "movieOpenOutline" | "movieOutline" | "paperclip" | "pencil" | "phone" | "piggybank" | "pin" | "plus" | "questionMark" | "questionMarkFull" | "search" | "send" | "sortVertical" | "trash" | "userCicleFilled" | "userCicleOutline" | "warningTriangle" | "x";
diff --git a/example/tokens/radii.ts b/example/tokens/radii.ts
@@ -5,4 +5,4 @@ export const medium = 16;
 export const normal = 8;
 export const small = 4;
 
-export type Token = "full" | "large" | "medium" | "normal" | "small";
+export type RadiiToken = "full" | "large" | "medium" | "normal" | "small";
diff --git a/example/tokens/shadows.ts b/example/tokens/shadows.ts
@@ -52,4 +52,4 @@ export const shadowSmall = {
   }
 };
 
-export type Token = "shadowLarge" | "shadowMedium" | "shadowNormal" | "shadowSmall";
+export type ShadowsToken = "shadowLarge" | "shadowMedium" | "shadowNormal" | "shadowSmall";
diff --git a/example/tokens/sizing.ts b/example/tokens/sizing.ts
@@ -8,4 +8,4 @@ export const iconSizeLarge = 32;
 export const iconSizeNormal = 24;
 export const iconSizeSmall = 16;
 
-export type Token = "buttonHeightLarge" | "buttonHeightNormal" | "buttonHeightSmall" | "focusRingOffset" | "focusRingSize" | "iconSizeLarge" | "iconSizeNormal" | "iconSizeSmall";
+export type SizingToken = "buttonHeightLarge" | "buttonHeightNormal" | "buttonHeightSmall" | "focusRingOffset" | "focusRingSize" | "iconSizeLarge" | "iconSizeNormal" | "iconSizeSmall";
diff --git a/example/tokens/spacing.ts b/example/tokens/spacing.ts
@@ -9,4 +9,4 @@ export const xxlarge = 56;
 export const xxsmall = 4;
 export const xxxlarge = 72;
 
-export type Token = "large" | "medium" | "normal" | "small" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall" | "xxxlarge";
+export type SpacingToken = "large" | "medium" | "normal" | "small" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall" | "xxxlarge";
diff --git a/example/tokens/typography.ts b/example/tokens/typography.ts
@@ -172,4 +172,4 @@ export const web = {
   }
 };
 
-export type Token = "body" | "bodyBold" | "bodyLarge" | "bodyLargeBold" | "bodySmall" | "bodySmallBold" | "caption" | "overline" | "subtitle" | "title1" | "title2" | "title3";
+export type TypographyToken = "body" | "bodyBold" | "bodyLarge" | "bodyLargeBold" | "bodySmall" | "bodySmallBold" | "caption" | "overline" | "subtitle" | "title1" | "title2" | "title3";
diff --git a/src/codegen.js b/src/codegen.js
@@ -96,7 +96,7 @@ export default class Codegen {
 
         fs.writeFileSync(
           `${outDir}/${filename}.${config.filetype}`,
-          compiled({ tokens, tokenNames: Array.from(tokenNames).sort() })
+          compiled({ name, tokens, tokenNames: Array.from(tokenNames).sort() })
         );
       }
 
@@ -185,7 +185,7 @@ const TOKEN_TEMPLATE =
   "<% tokens.forEach(function(x) { %>" +
   "export const <%= x[0] %> = <%= JSON.stringify(x[1], null, 2) %>;\n" +
   "<% }); %>\n" +
-  "export type Token = " +
+  "export type <%= name.charAt(0).toUpperCase() + name.slice(1) %>Token = " +
   "<%= tokenNames.map(t => JSON.stringify(t)).join(' | ') %>;\n";
 
 const SVG_SPRITE_TEMPLATE =
-Original file line number
+Diff line change
@@ Expand Up / @@ -52,4 +52,4 @@ export const shadowSmall = { @@
       }
     };
-    export type Token = "shadowLarge" | "shadowMedium" | "shadowNormal" | "shadowSmall";
+    export type ShadowsToken = "shadowLarge" | "shadowMedium" | "shadowNormal" | "shadowSmall";