feat(pencil): Dark mode tokens (#97)

* Testing format * Transformed tokens * Rename * Transformed tokens * Working build * Built and updated design tokens * Updates to transformers * Transformed tokens * Built and updated design tokens * Files compiled! * Fixing imports * Transformed tokens * Built and updated design tokens * Files compiled! * Ensure working export * More updates * Transformed tokens * fixes * Built and updated design tokens * Fixing commaor colon * Transformed tokens * Built and updated design tokens * Working exports? * Transformed tokens * Built and updated design tokens * Files compiled! * Fixing type cast generation * Transformed tokens * Built and updated design tokens * Files compiled! * Test exports * Transformed tokens * Built and updated design tokens * Files compiled! * Updating token values in dark * Transformed tokens * Built and updated design tokens * Files compiled! * Even more color updates * Transformed tokens * Built and updated design tokens * Files compiled! * basically all tokens in * Transformed tokens * Built and updated design tokens * Files compiled! * Remove duplicate * Transformed tokens * Built and updated design tokens * Files compiled! * More export testing * Transformed tokens * Built and updated design tokens * Files compiled! * Themey * backgroundInformation token update * Transformed tokens * Built and updated design tokens * Files compiled! * WRIP * Transformed tokens * Built and updated design tokens * Files compiled! * Fixing undefined type in core fiels * Transformed tokens * Built and updated design tokens * Files compiled! Co-authored-by: iryanclarke <iryanclarke@users.noreply.github.com> Co-authored-by: Ian Clarke <ian.clarke@fullscript.com>
Fullscript · Jan 23, 2023 · 4d3420d · 4d3420d
1 parent 45e28ce
commit 4d3420d
Show file tree

Hide file tree

Showing 43 changed files with 2,955 additions and 44 deletions.
diff --git a/build.js b/build.js
@@ -2,7 +2,7 @@ const StyleDictionary = require("style-dictionary");
 require("./src/helpers/custom");
 
 const getStyleDictionaryConfig = (theme) => {
-  const core = theme === "core";
+  const isCore = theme.includes("core");
   return {
     source: [`src/transformed/transformed-${theme}.json`],
     platforms: {
@@ -16,7 +16,7 @@ const getStyleDictionaryConfig = (theme) => {
             filter: "custom/filter/typography",
           },
           {
-            destination: core ? "colors.scss" : `themes/${theme}.scss`,
+            destination: isCore ? `${theme}-colors.scss` : `themes/${theme}.scss`,
             format: "scss/variables",
             filter: {
               type: "color",
@@ -40,14 +40,14 @@ const getStyleDictionaryConfig = (theme) => {
           },
           {
             format: "custom/format/javascript-colors",
-            destination: core ? "colors.js" : `themes/${theme}.js`,
+            destination: isCore ? `${theme}-colors.js` : `themes/${theme}.js`,
             filter: {
               type: "color",
             },
           },
           {
             format: "custom/format/typescript-color-declarations",
-            destination: core ? "colors.d.ts" : `themes/${theme}.d.ts`,
+            destination: isCore ? `${theme}-colors.d.ts` : `themes/${theme}.d.ts`,
             filter: {
               type: "color",
             },
@@ -70,14 +70,14 @@ const getStyleDictionaryConfig = (theme) => {
           },
           {
             format: "custom/format/javascript-colors",
-            destination: core ? "colors.js" : `themes/${theme}.js`,
+            destination: isCore ? `${theme}-colors.js` : `themes/${theme}.js`,
             filter: {
               type: "color",
             },
           },
           {
             format: "custom/format/typescript-color-declarations",
-            destination: core ? "colors.d.ts" : `themes/${theme}.d.ts`,
+            destination: isCore ? `${theme}-colors.d.ts` : `themes/${theme}.d.ts`,
             filter: {
               type: "color",
             },
@@ -90,6 +90,6 @@ 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"].map((theme) => {
+["core-light", "core-dark", "light", "dark"].map((theme) => {
   StyleDictionary.extend(getStyleDictionaryConfig(theme)).buildAllPlatforms();
 });
diff --git a/dist/tokens/native/colors.d.ts → dist/tokens/native/core-dark-colors.d.ts b/dist/tokens/native/colors.d.ts → dist/tokens/native/core-dark-colors.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 05 Dec 2022 18:56:57 GMT
+ * Generated on Mon, 23 Jan 2023 19:04:34 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
@@ -0,0 +1,12 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Jan 2023 19:04:34 GMT
+ */
+
+module.exports = {green : {100 : "#0C291E",200 : "#13402F",300 : "#1A5740",400 : "#256E53",500 : "#288563",600 : "#42AD86",700 : "#86D6B9",800 : "#DBFFF1"},
+blue : {100 : "#0C1B29",200 : "#142C45",300 : "#1F4366",400 : "#285685",500 : "#4577AD",600 : "#6597CE",700 : "#96BDE7",800 : "#D1E8FF"},
+red : {100 : "#290F16",200 : "#451522",300 : "#611D30",400 : "#8F2843",500 : "#B23655",600 : "#C74C6B",700 : "#EA8AA3",800 : "#FFD1DD"},
+purple : {100 : "#200F29",200 : "#33193F",300 : "#432652",400 : "#542F66",500 : "#693B80",600 : "#865C99",700 : "#B990CC",800 : "#F0F1FF"},
+orange : {100 : "#29170C",200 : "#4A2915",300 : "#663A1E",400 : "#8A4E29",500 : "#AD6234",600 : "#CF7945",700 : "#E7AA84",800 : "#FFE3D1"},
+grey : {100 : "#101012",200 : "#1A1D21",300 : "#22272B",400 : "#2D3238",500 : "#515357",600 : "#616568",700 : "#98999B",800 : "#E8E9EA"},
+shades : {white : "#FFFFFF",black : "#000000",transparent : "transparent"},};
diff --git a/dist/tokens/ts/colors.d.ts → dist/tokens/native/core-light-colors.d.ts b/dist/tokens/ts/colors.d.ts → dist/tokens/native/core-light-colors.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 05 Dec 2022 18:56:57 GMT
+ * Generated on Mon, 23 Jan 2023 19:04:34 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/colors.js → dist/tokens/native/core-light-colors.js b/dist/tokens/native/colors.js → dist/tokens/native/core-light-colors.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 05 Dec 2022 18:56:57 GMT
+ * Generated on Mon, 23 Jan 2023 19:04:34 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
@@ -0,0 +1,18 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Jan 2023 19:04:34 GMT
+ */
+
+export const theme: string;
+export const text : {emphasis : string,body : string,subdued : string,onBackground : string};
+export const system : {textLabelEmphasis : string,textBase : string,textHover : string,textActive : string,backgroundBase : string,backgroundMuted : string,backgroundMutedHover : string,backgroundMutedActive : string,backgroundBox : string,borderBase : string,borderHover : string,borderActive : string,borderFocused : string};
+export const surface : {level0 : string,level1 : string,level2 : string,interactiveBackground : string,interactiveHover : string,interactiveActive : string,overlayDark : string,overlayTheme : string,overlayBackdrop : string};
+export const primary : {textBase : string,textHover : string,textActive : string,backgroundBase : string,backgroundHover : string,backgroundActive : string,backgroundMuted : string,backgroundMutedHover : string,backgroundMutedActive : string,backgroundBox : string,borderBase : string,borderHover : string,borderActive : string};
+export const info : {textBase : string,textHover : string,textActive : string,backgroundBase : string,backgroundHover : string,backgroundActive : string,backgroundMuted : string,backgroundMutedHover : string,backgroundMutedActive : string,backgroundBox : string,borderBase : string,borderHover : string,borderActive : string};
+export const warning : {textBase : string,textHover : string,textActive : string,backgroundBase : string,backgroundHover : string,backgroundActive : string,backgroundMuted : string,backgroundMutedHover : string,backgroundMutedActive : string,backgroundBox : string,borderBase : string,borderHover : string,borderActive : string};
+export const danger : {textBase : string,textHover : string,textActive : string,backgroundBase : string,backgroundHover : string,backgroundActive : string,backgroundMuted : string,backgroundMutedHover : string,backgroundMutedActive : string,backgroundBox : string,borderBase : string,borderHover : string,borderActive : string};
+export const highlight : {textBase : string,textHover : string,textActive : string,backgroundBase : string,backgroundHover : string,backgroundActive : string,backgroundMuted : string,backgroundMutedHover : string,backgroundMutedActive : string,backgroundBox : string,borderBase : string,borderHover : string,borderActive : string};
+export const disabled : {text : string,background : string,nakedBackground : string,border : string,inputBackground : string,inputLabelText : string};
+export const input : {backgroundBase : string,backgroundHover : string,backgroundInformation : string,textBase : string,textInformation : string,textInformationError : string,textLabel : string,textFloatingLabel : string,textFloatingLabelError : string,textPlaceholder : string,textActive : string,borderBase : string,borderError : string,borderHover : string,borderEmphasized : string,borderEmphasizedHover : string,borderActive : string};
+export const separator : {base : string};
+export const light : {backgroundBase : string,backgroundContrast : string,backgroundHover : string,backgroundActive : string,textBase : string,linkMutedBase : string,linkMutedHover : string};
diff --git a/dist/tokens/native/themes/dark.js b/dist/tokens/native/themes/dark.js
diff --git a/dist/tokens/native/themes/light.d.ts b/dist/tokens/native/themes/light.d.ts
@@ -1,8 +1,9 @@
 /**
  * Do not edit directly
- * Generated on Mon, 05 Dec 2022 18:56:57 GMT
+ * Generated on Mon, 23 Jan 2023 19:04:34 GMT
  */
 
+export const theme: string;
 export const text : {emphasis : string,body : string,subdued : string,onBackground : string};
 export const system : {textLabelEmphasis : string,textBase : string,textHover : string,textActive : string,backgroundBase : string,backgroundMuted : string,backgroundMutedHover : string,backgroundMutedActive : string,backgroundBox : string,borderBase : string,borderHover : string,borderActive : string,borderFocused : string};
 export const surface : {level0 : string,level1 : string,level2 : string,interactiveBackground : string,interactiveHover : string,interactiveActive : string,overlayContrast : string,overlayTheme : string,overlayBackdrop : 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 Mon, 05 Dec 2022 18:56:57 GMT
+ * Generated on Mon, 23 Jan 2023 19:04:34 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 Mon, 05 Dec 2022 18:56:57 GMT
+ * Generated on Mon, 23 Jan 2023 19:04:34 GMT
  */
 
 module.exports = {

diff --git a/dist/tokens/scss/core-dark-colors.scss b/dist/tokens/scss/core-dark-colors.scss
@@ -0,0 +1,55 @@
+
+// Do not edit directly
+// Generated on Mon, 23 Jan 2023 19:04:34 GMT
+
+$green100: #0C291E;
+$green200: #13402F;
+$green300: #1A5740;
+$green400: #256E53;
+$green500: #288563;
+$green600: #42AD86;
+$green700: #86D6B9;
+$green800: #DBFFF1;
+$blue100: #0C1B29;
+$blue200: #142C45;
+$blue300: #1F4366;
+$blue400: #285685;
+$blue500: #4577AD;
+$blue600: #6597CE;
+$blue700: #96BDE7;
+$blue800: #D1E8FF;
+$red100: #290F16;
+$red200: #451522;
+$red300: #611D30;
+$red400: #8F2843;
+$red500: #B23655;
+$red600: #C74C6B;
+$red700: #EA8AA3;
+$red800: #FFD1DD;
+$purple100: #200F29;
+$purple200: #33193F;
+$purple300: #432652;
+$purple400: #542F66;
+$purple500: #693B80;
+$purple600: #865C99;
+$purple700: #B990CC;
+$purple800: #F0F1FF;
+$orange100: #29170C;
+$orange200: #4A2915;
+$orange300: #663A1E;
+$orange400: #8A4E29;
+$orange500: #AD6234;
+$orange600: #CF7945;
+$orange700: #E7AA84;
+$orange800: #FFE3D1;
+$grey100: #101012;
+$grey200: #1A1D21;
+$grey300: #22272B;
+$grey400: #2D3238;
+$grey500: #515357;
+$grey600: #616568;
+$grey700: #98999B;
+$grey800: #E8E9EA;
+$shadesWhite: #FFFFFF;
+$shadesBlack: #000000;
+$shadesTransparent: transparent;
diff --git a/dist/tokens/scss/colors.scss → dist/tokens/scss/core-light-colors.scss b/dist/tokens/scss/colors.scss → dist/tokens/scss/core-light-colors.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 05 Dec 2022 18:56:57 GMT
+// Generated on Mon, 23 Jan 2023 19:04:34 GMT
 
 $green100: #FAFFFC;
 $green200: #EBF2EF;

diff --git a/dist/tokens/scss/themes/dark.scss b/dist/tokens/scss/themes/dark.scss
@@ -0,0 +1,126 @@
+
+// Do not edit directly
+// Generated on Mon, 23 Jan 2023 19:04:34 GMT
+
+$textEmphasis: #E8E9EA;
+$textBody: #98999B;
+$textSubdued: #616568;
+$textOnBackground: #FFFFFF;
+$systemTextLabelEmphasis: #FFFFFF;
+$systemTextBase: #98999B;
+$systemTextHover: #E8E9EA;
+$systemTextActive: #FFFFFF;
+$systemBackgroundBase: #1A1D21;
+$systemBackgroundMuted: #22272B;
+$systemBackgroundMutedHover: #2D3238;
+$systemBackgroundMutedActive: #515357;
+$systemBackgroundBox: #1A1D21;
+$systemBorderBase: #515357;
+$systemBorderHover: #616568;
+$systemBorderActive: #98999B;
+$systemBorderFocused: #6597CE;
+$surfaceLevel0: #101012;
+$surfaceLevel1: #1A1D21;
+$surfaceLevel2: #22272B;
+$surfaceInteractiveBackground: #1A1D21;
+$surfaceInteractiveHover: #22272B;
+$surfaceInteractiveActive: #2D3238;
+$surfaceOverlayDark: #22272B;
+$surfaceOverlayTheme: #22272B;
+$surfaceOverlayBackdrop: #1A1D21;
+$primaryTextBase: #42AD86;
+$primaryTextHover: #86D6B9;
+$primaryTextActive: #DBFFF1;
+$primaryBackgroundBase: #288563;
+$primaryBackgroundHover: #256E53;
+$primaryBackgroundActive: #1A5740;
+$primaryBackgroundMuted: #13402F;
+$primaryBackgroundMutedHover: #1A5740;
+$primaryBackgroundMutedActive: #256E53;
+$primaryBackgroundBox: #0C291E;
+$primaryBorderBase: #288563;
+$primaryBorderHover: #256E53;
+$primaryBorderActive: #1A5740;
+$infoTextBase: #6597CE;
+$infoTextHover: #96BDE7;
+$infoTextActive: #D1E8FF;
+$infoBackgroundBase: #4577AD;
+$infoBackgroundHover: #285685;
+$infoBackgroundActive: #1F4366;
+$infoBackgroundMuted: #142C45;
+$infoBackgroundMutedHover: #1F4366;
+$infoBackgroundMutedActive: #285685;
+$infoBackgroundBox: #0C1B29;
+$infoBorderBase: #4577AD;
+$infoBorderHover: #285685;
+$infoBorderActive: #1F4366;
+$warningTextBase: #CF7945;
+$warningTextHover: #E7AA84;
+$warningTextActive: #FFE3D1;
+$warningBackgroundBase: #AD6234;
+$warningBackgroundHover: #8A4E29;
+$warningBackgroundActive: #663A1E;
+$warningBackgroundMuted: #4A2915;
+$warningBackgroundMutedHover: #663A1E;
+$warningBackgroundMutedActive: #8A4E29;
+$warningBackgroundBox: #29170C;
+$warningBorderBase: #AD6234;
+$warningBorderHover: #8A4E29;
+$warningBorderActive: #663A1E;
+$dangerTextBase: #C74C6B;
+$dangerTextHover: #EA8AA3;
+$dangerTextActive: #FFD1DD;
+$dangerBackgroundBase: #B23655;
+$dangerBackgroundHover: #8F2843;
+$dangerBackgroundActive: #611D30;
+$dangerBackgroundMuted: #451522;
+$dangerBackgroundMutedHover: #611D30;
+$dangerBackgroundMutedActive: #8F2843;
+$dangerBackgroundBox: #290F16;
+$dangerBorderBase: #B23655;
+$dangerBorderHover: #8F2843;
+$dangerBorderActive: #611D30;
+$highlightTextBase: #865C99;
+$highlightTextHover: #B990CC;
+$highlightTextActive: #F0F1FF;
+$highlightBackgroundBase: #693B80;
+$highlightBackgroundHover: #542F66;
+$highlightBackgroundActive: #432652;
+$highlightBackgroundMuted: #33193F;
+$highlightBackgroundMutedHover: #432652;
+$highlightBackgroundMutedActive: #542F66;
+$highlightBackgroundBox: #200F29;
+$highlightBorderBase: #693B80;
+$highlightBorderHover: #542F66;
+$highlightBorderActive: #432652;
+$disabledText: #616568;
+$disabledBackground: #1A1D21;
+$disabledNakedBackground: transparent;
+$disabledBorder: #515357;
+$disabledInputBackground: #1B2228;
+$disabledInputLabelText: #616568;
+$inputBackgroundBase: #1B2228;
+$inputBackgroundHover: #2D3238;
+$inputBackgroundInformation: #FFFFFF;
+$inputTextBase: #FFFFFF;
+$inputTextInformation: #98999B;
+$inputTextInformationError: #B23655;
+$inputTextLabel: #98999B;
+$inputTextFloatingLabel: #4577AD;
+$inputTextFloatingLabelError: #B23655;
+$inputTextPlaceholder: #616568;
+$inputTextActive: #FFFFFF;
+$inputBorderBase: #2D3238;
+$inputBorderError: #8F2843;
+$inputBorderHover: #515357;
+$inputBorderEmphasized: #616568;
+$inputBorderEmphasizedHover: #98999B;
+$inputBorderActive: #285685;
+$separatorBase: #2D3238;
+$lightBackgroundBase: #FFFFFF;
+$lightBackgroundContrast: #616568;
+$lightBackgroundHover: #1A1D21;
+$lightBackgroundActive: #22272B;
+$lightTextBase: #E8E9EA;
+$lightLinkMutedBase: #1A1D21;
+$lightLinkMutedHover: #FFFFFF;
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 Mon, 05 Dec 2022 18:56:57 GMT
+// Generated on Mon, 23 Jan 2023 19:04:34 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 Mon, 05 Dec 2022 18:56:57 GMT
+// Generated on Mon, 23 Jan 2023 19:04:34 GMT
 
 $letterSpacingBase: 0;
 $paragraphSpacingBase: 0;