tweak(generation): s/DesignSystem/Tokens in design file codegen (#214)

diez · Nov 14, 2019 · b3c7cf7 · b3c7cf7
1 parent 81588f3
commit b3c7cf7
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 16 deletions.
diff --git a/examples/poodle-surf/build/diez-poodle-surf-web/package.json b/examples/poodle-surf/build/diez-poodle-surf-web/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "license": "MIT",
   "dependencies": {
-    "@diez/web-sdk-common": "^10.0.0-beta.1",
+    "@diez/web-sdk-common": "^10.0.0-beta.2",
     "lottie-web": "^5.5.2"
   }
 }
diff --git a/examples/poodle-surf/src/designs/PoodleSurf.sketch.ts b/examples/poodle-surf/src/designs/PoodleSurf.sketch.ts
@@ -72,11 +72,11 @@ export class PoodleSurfSlices {
     static Icon = Image.responsive("assets/PoodleSurf.sketch.contents/slices/Icon.png", 29, 26);
 }
 
-export class PoodleSurfDesignSystem extends Component {
+export class PoodleSurfTokens extends Component {
     @property
     colors = new PoodleSurfColors();
     @property
     gradients = new PoodleSurfGradients();
 }
 
-export const poodleSurfDesignSystem = new PoodleSurfDesignSystem();
+export const poodleSurfTokens = new PoodleSurfTokens();
diff --git a/examples/poodle-surf/src/designs/constants.ts b/examples/poodle-surf/src/designs/constants.ts
@@ -1,15 +1,15 @@
 import {Font, LinearGradient, Toward, Typograph} from '@diez/prefabs';
 import {Component, property} from '@diez/engine';
-import {poodleSurfDesignSystem} from './PoodleSurf.sketch';
+import {poodleSurfTokens} from './PoodleSurf.sketch';
 
 class Palette extends Component {
-  @property foreground = poodleSurfDesignSystem.colors.black;
-  @property background = poodleSurfDesignSystem.colors.white;
-  @property loadingBackground = poodleSurfDesignSystem.colors.blue;
-  @property primary = poodleSurfDesignSystem.colors.pink;
-  @property secondary = poodleSurfDesignSystem.colors.orange;
-  @property separator = poodleSurfDesignSystem.colors.whiteA40;
-  @property contentForeground = poodleSurfDesignSystem.colors.white;
+  @property foreground = poodleSurfTokens.colors.black;
+  @property background = poodleSurfTokens.colors.white;
+  @property loadingBackground = poodleSurfTokens.colors.blue;
+  @property primary = poodleSurfTokens.colors.pink;
+  @property secondary = poodleSurfTokens.colors.orange;
+  @property separator = poodleSurfTokens.colors.whiteA40;
+  @property contentForeground = poodleSurfTokens.colors.white;
   @property contentBackground = LinearGradient.make(Toward.BottomRight, this.primary, this.secondary);
 }
 

diff --git a/examples/site/examples/web/docs/getting-started/figma.md b/examples/site/examples/web/docs/getting-started/figma.md
@@ -68,14 +68,14 @@ But Diez didn't _only_ extract assets for you, it crafted them into strongly-typ
 Import your Figma DTCs into your main design system file: `/src/DesignSystem.ts`
 
 ```typescript
-import { yourFigmaProjNameDesignSystem } from './designs/YourFigmaProjName.figma';
+import { yourFigmaProjNameTokens } from './designs/YourFigmaProjName.figma';
 ```
 
 Then use it as you see fit. As shown here, we've used the Color Style from Figma named `fuss` and set it as the 'lightBackground' color of our design system.
 
 ```typescript
 class Palette extends Component {
-  @property lightBackground = yourFigmaProjNameDesignSystem.palette.fuss
+  @property lightBackground = yourFigmaProjNameTokens.palette.fuss
 }
 ```
 

diff --git a/packages/generation/src/utils.ts b/packages/generation/src/utils.ts
@@ -294,7 +294,7 @@ export const codegenDesignSystem = async (spec: CodegenDesignSystem) => {
     }
   }
 
-  const componentName = `${designSystemName}DesignSystem`;
+  const componentName = `${designSystemName}Tokens`;
   const exportedClassDeclaration = sourceFile.addClass({
     isExported: true,
     name: componentName,

diff --git a/packages/generation/test/goldens/codegennable/src/index.ts b/packages/generation/test/goldens/codegennable/src/index.ts
@@ -45,7 +45,7 @@ export const MyDesignSystemFonts = {
     }
 };
 
-export class MyDesignSystemDesignSystem extends Component {
+export class MyDesignSystemTokens extends Component {
     @property
     colors = new MyDesignSystemColors();
     @property
@@ -54,4 +54,4 @@ export class MyDesignSystemDesignSystem extends Component {
     typographs = new MyDesignSystemTypographs();
 }
 
-export const myDesignSystemDesignSystem = new MyDesignSystemDesignSystem();
+export const myDesignSystemTokens = new MyDesignSystemTokens();