feat(typography): move tokens into primitives.json

Moves the typography tokens from the separate core theme files into a primitives.json file to be shared with all Fullscript-specific themes (light, dark, etc.)
Fullscript · Mar 20, 2023 · db3a269 · db3a269
2 parents b982d42 + ba1e403
commit db3a269
Show file tree

Hide file tree

Showing 50 changed files with 835 additions and 2,335 deletions.
diff --git a/build.js b/build.js
@@ -16,7 +16,9 @@ const getStyleDictionaryConfig = (theme) => {
             filter: "custom/filter/typography",
           },
           {
-            destination: isCore ? `${theme}-colors.scss` : `themes/${theme}.scss`,
+            destination: isCore
+              ? `${theme}-colors.scss`
+              : `themes/${theme}.scss`,
             format: "scss/variables",
             filter: {
               type: "color",
@@ -47,7 +49,9 @@ const getStyleDictionaryConfig = (theme) => {
           },
           {
             format: "custom/format/typescript-color-declarations",
-            destination: isCore ? `${theme}-colors.d.ts` : `themes/${theme}.d.ts`,
+            destination: isCore
+              ? `${theme}-colors.d.ts`
+              : `themes/${theme}.d.ts`,
             filter: {
               type: "color",
             },
@@ -77,7 +81,9 @@ const getStyleDictionaryConfig = (theme) => {
           },
           {
             format: "custom/format/typescript-color-declarations",
-            destination: isCore ? `${theme}-colors.d.ts` : `themes/${theme}.d.ts`,
+            destination: isCore
+              ? `${theme}-colors.d.ts`
+              : `themes/${theme}.d.ts`,
             filter: {
               type: "color",
             },
@@ -97,7 +103,9 @@ const getStyleDictionaryConfig = (theme) => {
           },
           {
             format: "custom/format/typescript-color-declarations-documentation",
-            destination: isCore ? `${theme}-colors.d.ts` : `themes/${theme}.d.ts`,
+            destination: isCore
+              ? `${theme}-colors.d.ts`
+              : `themes/${theme}.d.ts`,
             filter: {
               type: "color",
             },
@@ -110,6 +118,15 @@ const getStyleDictionaryConfig = (theme) => {
 
 // Add themes to the array to create theme-specific files under themes folder
 // "core" theme will build files outside of the themes folder
-["core-light", "core-dark", "light", "dark", "emerson"].map((theme) => {
+const themes = [
+  "primitives",
+  "core-light",
+  "core-dark",
+  "light",
+  "dark",
+  "emerson",
+];
+
+themes.map((theme) => {
   StyleDictionary.extend(getStyleDictionaryConfig(theme)).buildAllPlatforms();
 });
diff --git a/dist/documentation/core-dark-colors.d.ts b/dist/documentation/core-dark-colors.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:38 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:12 GMT
  */
 
 export const green : {100:{

diff --git a/dist/documentation/core-dark-colors.js b/dist/documentation/core-dark-colors.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:38 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:12 GMT
  */
 
 module.exports = {green : {100:{

diff --git a/dist/documentation/core-light-colors.d.ts b/dist/documentation/core-light-colors.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:38 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:12 GMT
  */
 
 export const green : {100:{

diff --git a/dist/documentation/core-light-colors.js b/dist/documentation/core-light-colors.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:38 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:12 GMT
  */
 
 module.exports = {green : {100:{

diff --git a/dist/documentation/themes/dark.d.ts b/dist/documentation/themes/dark.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:38 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:13 GMT
  */
 
 export const text : {emphasis:{

diff --git a/dist/documentation/themes/dark.js b/dist/documentation/themes/dark.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:38 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:13 GMT
  */
 
 module.exports = {text : {emphasis:{

diff --git a/dist/documentation/themes/emerson.d.ts b/dist/documentation/themes/emerson.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:39 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:13 GMT
  */
 
 export const text : {emphasis:{

diff --git a/dist/documentation/themes/emerson.js b/dist/documentation/themes/emerson.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:39 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:13 GMT
  */
 
 module.exports = {text : {emphasis:{

diff --git a/dist/documentation/themes/light.d.ts b/dist/documentation/themes/light.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:38 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:12 GMT
  */
 
 export const text : {emphasis:{

diff --git a/dist/documentation/themes/light.js b/dist/documentation/themes/light.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:38 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:12 GMT
  */
 
 module.exports = {text : {emphasis:{

diff --git a/dist/tokens/native/core-dark-colors.d.ts b/dist/tokens/native/core-dark-colors.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:38 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:12 GMT
  */
 
 export const green : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};

diff --git a/dist/tokens/native/core-dark-colors.js b/dist/tokens/native/core-dark-colors.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:38 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:12 GMT
  */
 
 module.exports = {green : {100 : "#0C291E",200 : "#13402F",300 : "#1A5740",400 : "#256E53",500 : "#288563",600 : "#42AD86",700 : "#86D6B9",800 : "#DBFFF1"},

diff --git a/dist/tokens/native/core-light-colors.d.ts b/dist/tokens/native/core-light-colors.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:38 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:12 GMT
  */
 
 export const green : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};

diff --git a/dist/tokens/native/core-light-colors.js b/dist/tokens/native/core-light-colors.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:38 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:12 GMT
  */
 
 module.exports = {green : {100 : "#FAFFFC",200 : "#EBF2EF",300 : "#D1E0D9",400 : "#B6CFC2",500 : "#86B09B",600 : "#307553",700 : "#275E43",800 : "#244C38"},

diff --git a/dist/tokens/native/themes/dark.d.ts b/dist/tokens/native/themes/dark.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:38 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:13 GMT
  */
 
 export const theme: string;

diff --git a/dist/tokens/native/themes/dark.js b/dist/tokens/native/themes/dark.js
diff --git a/dist/tokens/native/themes/emerson.d.ts b/dist/tokens/native/themes/emerson.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:39 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:13 GMT
  */
 
 export const theme: string;

diff --git a/dist/tokens/native/themes/emerson.js b/dist/tokens/native/themes/emerson.js
diff --git a/dist/tokens/native/themes/light.d.ts b/dist/tokens/native/themes/light.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:38 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:12 GMT
  */
 
 export const theme: string;

diff --git a/dist/tokens/native/themes/light.js b/dist/tokens/native/themes/light.js
diff --git a/dist/tokens/native/typography.d.ts b/dist/tokens/native/typography.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:38 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:12 GMT
  */
 
 export const letterSpacingBase : number;

diff --git a/dist/tokens/native/typography.js b/dist/tokens/native/typography.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:38 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:12 GMT
  */
 
 module.exports = {

diff --git a/dist/tokens/scss/core-dark-colors.scss b/dist/tokens/scss/core-dark-colors.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 10 Feb 2023 15:52:38 GMT
+// Generated on Wed, 22 Feb 2023 22:40:12 GMT
 
 $green100: #0C291E;
 $green200: #13402F;

diff --git a/dist/tokens/scss/core-light-colors.scss b/dist/tokens/scss/core-light-colors.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 10 Feb 2023 15:52:38 GMT
+// Generated on Wed, 22 Feb 2023 22:40:12 GMT
 
 $green100: #FAFFFC;
 $green200: #EBF2EF;

diff --git a/dist/tokens/scss/themes/dark.scss b/dist/tokens/scss/themes/dark.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 10 Feb 2023 15:52:38 GMT
+// Generated on Wed, 22 Feb 2023 22:40:12 GMT
 
 $textEmphasis: #E8E9EA;
 $textBody: #98999B;

diff --git a/dist/tokens/scss/themes/emerson.scss b/dist/tokens/scss/themes/emerson.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 10 Feb 2023 15:52:38 GMT
+// Generated on Wed, 22 Feb 2023 22:40:13 GMT
 
 $textEmphasis: #1A1D21;
 $textBody: #22272B;

diff --git a/dist/tokens/scss/themes/light.scss b/dist/tokens/scss/themes/light.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 10 Feb 2023 15:52:38 GMT
+// Generated on Wed, 22 Feb 2023 22:40:12 GMT
 
 $textEmphasis: #36485C;
 $textBody: #475A70;

diff --git a/dist/tokens/scss/typography.scss b/dist/tokens/scss/typography.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 10 Feb 2023 15:52:38 GMT
+// Generated on Wed, 22 Feb 2023 22:40:12 GMT
 
 $letterSpacingBase: 0;
 $paragraphSpacingBase: 0;

diff --git a/dist/tokens/ts/core-dark-colors.d.ts b/dist/tokens/ts/core-dark-colors.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:38 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:12 GMT
  */
 
 export const green : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};

diff --git a/dist/tokens/ts/core-dark-colors.js b/dist/tokens/ts/core-dark-colors.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:38 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:12 GMT
  */
 
 module.exports = {green : {100 : "#0C291E",200 : "#13402F",300 : "#1A5740",400 : "#256E53",500 : "#288563",600 : "#42AD86",700 : "#86D6B9",800 : "#DBFFF1"},

diff --git a/dist/tokens/ts/core-light-colors.d.ts b/dist/tokens/ts/core-light-colors.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:38 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:12 GMT
  */
 
 export const green : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};

diff --git a/dist/tokens/ts/core-light-colors.js b/dist/tokens/ts/core-light-colors.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:38 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:12 GMT
  */
 
 module.exports = {green : {100 : "#FAFFFC",200 : "#EBF2EF",300 : "#D1E0D9",400 : "#B6CFC2",500 : "#86B09B",600 : "#307553",700 : "#275E43",800 : "#244C38"},

diff --git a/dist/tokens/ts/themes/dark.d.ts b/dist/tokens/ts/themes/dark.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:38 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:13 GMT
  */
 
 export const theme: string;

diff --git a/dist/tokens/ts/themes/dark.js b/dist/tokens/ts/themes/dark.js
diff --git a/dist/tokens/ts/themes/emerson.d.ts b/dist/tokens/ts/themes/emerson.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:38 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:13 GMT
  */
 
 export const theme: string;

diff --git a/dist/tokens/ts/themes/emerson.js b/dist/tokens/ts/themes/emerson.js
diff --git a/dist/tokens/ts/themes/light.d.ts b/dist/tokens/ts/themes/light.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:38 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:12 GMT
  */
 
 export const theme: string;

diff --git a/dist/tokens/ts/themes/light.js b/dist/tokens/ts/themes/light.js
diff --git a/dist/tokens/ts/typography.d.ts b/dist/tokens/ts/typography.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:38 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:12 GMT
  */
 
 export const letterSpacingBase : number;

diff --git a/dist/tokens/ts/typography.js b/dist/tokens/ts/typography.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Feb 2023 15:52:38 GMT
+ * Generated on Wed, 22 Feb 2023 22:40:12 GMT
  */
 
 module.exports = {

diff --git a/package.json b/package.json
@@ -11,13 +11,14 @@
     "build:typescript": "yarn build:types && yarn build:babel",
     "build:types": "tsc --emitDeclarationOnly --declarationMap --declaration -p ./tsconfig.json",
     "build:babel": "yarn babel src --out-dir dist --ignore 'src/**/*.spec.ts' --extensions .ts",
-    "transform": "yarn transform-core-light && yarn transform-core-dark && yarn transform-core-emerson && yarn transform-light && yarn transform-dark && yarn transform-emerson",
-    "transform-core-light": "yarn token-transformer src/data src/transformed/transformed-core-light.json core-light --expandTypography",
-    "transform-core-dark": "yarn token-transformer src/data src/transformed/transformed-core-dark.json core-dark --expandTypography",
-    "transform-core-emerson": "yarn token-transformer src/data src/transformed/transformed-core-emerson.json core-emerson --expandTypography",
+    "transform": "yarn transform-core-light && yarn transform-core-dark && yarn transform-core-emerson && yarn transform-light && yarn transform-dark && yarn transform-emerson && yarn transform-primitives",
+    "transform-core-light": "yarn token-transformer src/data src/transformed/transformed-core-light.json core-light",
+    "transform-core-dark": "yarn token-transformer src/data src/transformed/transformed-core-dark.json core-dark",
+    "transform-core-emerson": "yarn token-transformer src/data src/transformed/transformed-core-emerson.json core-emerson",
     "transform-light": "yarn token-transformer src/data src/transformed/transformed-light.json core-light,light core-light",
     "transform-dark": "yarn token-transformer src/data src/transformed/transformed-dark.json core-dark,dark core-dark",
     "transform-emerson": "yarn token-transformer src/data src/transformed/transformed-emerson.json core-emerson,emerson core-emerson",
+    "transform-primitives": "yarn token-transformer src/data src/transformed/transformed-primitives.json primitives --expandTypography ",
     "clean": "rm -rf dist/"
   },
   "devDependencies": {