Skip to content

Commit

Permalink
feat(🎉): Emerson theme creation (#99)
Browse files Browse the repository at this point in the history
* Init from Figma

* Transformed tokens

* Built and updated design tokens

* Files compiled!

* Color tweaks

* Transformed tokens

* Built and updated design tokens

* Files compiled!

* Working updated build

* Built and updated design tokens

* Files compiled!

Co-authored-by: iryanclarke <[email protected]>
Co-authored-by: Ian Clarke <[email protected]>
  • Loading branch information
3 people authored Jan 24, 2023
1 parent 4b40337 commit 34eb471
Show file tree
Hide file tree
Showing 46 changed files with 2,821 additions and 36 deletions.
2 changes: 1 addition & 1 deletion build.js
Original file line number Diff line number Diff line change
Expand Up @@ -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", "core-dark", "light", "dark"].map((theme) => {
["core-light", "core-dark", "light", "dark", "emerson"].map((theme) => {
StyleDictionary.extend(getStyleDictionaryConfig(theme)).buildAllPlatforms();
});
2 changes: 1 addition & 1 deletion dist/tokens/native/core-dark-colors.d.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Mon, 23 Jan 2023 20:15:27 GMT
* Generated on Tue, 24 Jan 2023 16:39:57 GMT
*/

export const green : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};
Expand Down
2 changes: 1 addition & 1 deletion dist/tokens/native/core-dark-colors.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Mon, 23 Jan 2023 20:15:27 GMT
* Generated on Tue, 24 Jan 2023 16:39:57 GMT
*/

module.exports = {green : {100 : "#0C291E",200 : "#13402F",300 : "#1A5740",400 : "#256E53",500 : "#288563",600 : "#42AD86",700 : "#86D6B9",800 : "#DBFFF1"},
Expand Down
2 changes: 1 addition & 1 deletion dist/tokens/native/core-light-colors.d.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Mon, 23 Jan 2023 20:15:27 GMT
* Generated on Tue, 24 Jan 2023 16:39:57 GMT
*/

export const green : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};
Expand Down
2 changes: 1 addition & 1 deletion dist/tokens/native/core-light-colors.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Mon, 23 Jan 2023 20:15:27 GMT
* Generated on Tue, 24 Jan 2023 16:39:57 GMT
*/

module.exports = {green : {100 : "#FAFFFC",200 : "#EBF2EF",300 : "#D1E0D9",400 : "#B6CFC2",500 : "#86B09B",600 : "#307553",700 : "#275E43",800 : "#244C38"},
Expand Down
2 changes: 1 addition & 1 deletion dist/tokens/native/themes/dark.d.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Mon, 23 Jan 2023 20:15:27 GMT
* Generated on Tue, 24 Jan 2023 16:39:57 GMT
*/

export const theme: string;
Expand Down
2 changes: 1 addition & 1 deletion dist/tokens/native/themes/dark.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

18 changes: 18 additions & 0 deletions dist/tokens/native/themes/emerson.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/**
* Do not edit directly
* Generated on Tue, 24 Jan 2023 16:39:57 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};
18 changes: 18 additions & 0 deletions dist/tokens/native/themes/emerson.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/tokens/native/themes/light.d.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Mon, 23 Jan 2023 20:15:27 GMT
* Generated on Tue, 24 Jan 2023 16:39:57 GMT
*/

export const theme: string;
Expand Down
2 changes: 1 addition & 1 deletion dist/tokens/native/themes/light.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/tokens/native/typography.d.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Mon, 23 Jan 2023 20:15:27 GMT
* Generated on Tue, 24 Jan 2023 16:39:57 GMT
*/

export const letterSpacingBase : number;
Expand Down
2 changes: 1 addition & 1 deletion dist/tokens/native/typography.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Mon, 23 Jan 2023 20:15:27 GMT
* Generated on Tue, 24 Jan 2023 16:39:57 GMT
*/

module.exports = {
Expand Down
2 changes: 1 addition & 1 deletion dist/tokens/scss/core-dark-colors.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

// Do not edit directly
// Generated on Mon, 23 Jan 2023 20:15:27 GMT
// Generated on Tue, 24 Jan 2023 16:39:57 GMT

$green100: #0C291E;
$green200: #13402F;
Expand Down
2 changes: 1 addition & 1 deletion dist/tokens/scss/core-light-colors.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

// Do not edit directly
// Generated on Mon, 23 Jan 2023 20:15:27 GMT
// Generated on Tue, 24 Jan 2023 16:39:57 GMT

$green100: #FAFFFC;
$green200: #EBF2EF;
Expand Down
2 changes: 1 addition & 1 deletion dist/tokens/scss/themes/dark.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

// Do not edit directly
// Generated on Mon, 23 Jan 2023 20:15:27 GMT
// Generated on Tue, 24 Jan 2023 16:39:57 GMT

$textEmphasis: #E8E9EA;
$textBody: #98999B;
Expand Down
126 changes: 126 additions & 0 deletions dist/tokens/scss/themes/emerson.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@

// Do not edit directly
// Generated on Tue, 24 Jan 2023 16:39:57 GMT

$textEmphasis: #1A1D21;
$textBody: #22272B;
$textSubdued: #2D3238;
$textOnBackground: #FFFFFF;
$systemTextLabelEmphasis: #101012;
$systemTextBase: #22272B;
$systemTextHover: #1A1D21;
$systemTextActive: #101012;
$systemBackgroundBase: #FFFFFF;
$systemBackgroundMuted: #98999B;
$systemBackgroundMutedHover: #616568;
$systemBackgroundMutedActive: #515357;
$systemBackgroundBox: #E8E9EA;
$systemBorderBase: #515357;
$systemBorderHover: #2D3238;
$systemBorderActive: #22272B;
$systemBorderFocused: #0281d7;
$surfaceLevel0: #98999B;
$surfaceLevel1: #FFFFFF;
$surfaceLevel2: #98999B;
$surfaceInteractiveBackground: #FFFFFF;
$surfaceInteractiveHover: #98999B;
$surfaceInteractiveActive: #616568;
$surfaceOverlayDark: #101012;
$surfaceOverlayTheme: #FFFFFF;
$surfaceOverlayBackdrop: #1A1D21;
$primaryTextBase: #307553;
$primaryTextHover: #275E43;
$primaryTextActive: #244C38;
$primaryBackgroundBase: #307553;
$primaryBackgroundHover: #275E43;
$primaryBackgroundActive: #244C38;
$primaryBackgroundMuted: #EBF2EF;
$primaryBackgroundMutedHover: #D1E0D9;
$primaryBackgroundMutedActive: #B6CFC2;
$primaryBackgroundBox: #FAFFFC;
$primaryBorderBase: #307553;
$primaryBorderHover: #275E43;
$primaryBorderActive: #244C38;
$infoTextBase: #0281d7;
$infoTextHover: #21588F;
$infoTextActive: #194673;
$infoBackgroundBase: #0281d7;
$infoBackgroundHover: #21588F;
$infoBackgroundActive: #194673;
$infoBackgroundMuted: #E6F1FC;
$infoBackgroundMutedHover: #C0D8F0;
$infoBackgroundMutedActive: #88B1D9;
$infoBackgroundBox: #F5FAFF;
$infoBorderBase: #0281d7;
$infoBorderHover: #21588F;
$infoBorderActive: #194673;
$warningTextBase: #B4631D;
$warningTextHover: #8E4D14;
$warningTextActive: #784213;
$warningBackgroundBase: #B4631D;
$warningBackgroundHover: #8E4D14;
$warningBackgroundActive: #784213;
$warningBackgroundMuted: #FFF3E8;
$warningBackgroundMutedHover: #F3D8C0;
$warningBackgroundMutedActive: #E7B88F;
$warningBackgroundBox: #FFFAF5;
$warningBorderBase: #B4631D;
$warningBorderHover: #8E4D14;
$warningBorderActive: #784213;
$dangerTextBase: #AF2645;
$dangerTextHover: #980B29;
$dangerTextActive: #800D25;
$dangerBackgroundBase: #AF2645;
$dangerBackgroundHover: #980B29;
$dangerBackgroundActive: #800D25;
$dangerBackgroundMuted: #FEEEF2;
$dangerBackgroundMutedHover: #F0C4CD;
$dangerBackgroundMutedActive: #E296A6;
$dangerBackgroundBox: #FFF7F9;
$dangerBorderBase: #AF2645;
$dangerBorderHover: #980B29;
$dangerBorderActive: #800D25;
$highlightTextBase: #533E7D;
$highlightTextHover: #3B2566;
$highlightTextActive: #2A174F;
$highlightBackgroundBase: #533E7D;
$highlightBackgroundHover: #3B2566;
$highlightBackgroundActive: #2A174F;
$highlightBackgroundMuted: #F2ECFE;
$highlightBackgroundMutedHover: #D7CEE9;
$highlightBackgroundMutedActive: #B9ABD5;
$highlightBackgroundBox: #FCFAFF;
$highlightBorderBase: #533E7D;
$highlightBorderHover: #3B2566;
$highlightBorderActive: #2A174F;
$disabledText: #2D3238;
$disabledBackground: #98999B;
$disabledNakedBackground: transparent;
$disabledBorder: #515357;
$disabledInputBackground: #616568;
$disabledInputLabelText: #2D3238;
$inputBackgroundBase: #98999B;
$inputBackgroundHover: #616568;
$inputBackgroundInformation: #FFFFFF;
$inputTextBase: #22272B;
$inputTextInformation: #22272B;
$inputTextInformationError: #AF2645;
$inputTextLabel: #22272B;
$inputTextFloatingLabel: #0281d7;
$inputTextFloatingLabelError: #AF2645;
$inputTextPlaceholder: #2D3238;
$inputTextActive: #101012;
$inputBorderBase: #616568;
$inputBorderError: #AF2645;
$inputBorderHover: #515357;
$inputBorderEmphasized: #2D3238;
$inputBorderEmphasizedHover: #22272B;
$inputBorderActive: #0281d7;
$separatorBase: #616568;
$lightBackgroundBase: #FFFFFF;
$lightBackgroundContrast: #22272B;
$lightBackgroundHover: #98999B;
$lightBackgroundActive: #616568;
$lightTextBase: #101012;
$lightLinkMutedBase: #98999B;
$lightLinkMutedHover: #FFFFFF;
2 changes: 1 addition & 1 deletion dist/tokens/scss/themes/light.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

// Do not edit directly
// Generated on Mon, 23 Jan 2023 20:15:27 GMT
// Generated on Tue, 24 Jan 2023 16:39:57 GMT

$textEmphasis: #36485C;
$textBody: #475A70;
Expand Down
2 changes: 1 addition & 1 deletion dist/tokens/scss/typography.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

// Do not edit directly
// Generated on Mon, 23 Jan 2023 20:15:27 GMT
// Generated on Tue, 24 Jan 2023 16:39:57 GMT

$letterSpacingBase: 0;
$paragraphSpacingBase: 0;
Expand Down
2 changes: 1 addition & 1 deletion dist/tokens/ts/core-dark-colors.d.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Mon, 23 Jan 2023 20:15:27 GMT
* Generated on Tue, 24 Jan 2023 16:39:57 GMT
*/

export const green : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};
Expand Down
2 changes: 1 addition & 1 deletion dist/tokens/ts/core-dark-colors.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Mon, 23 Jan 2023 20:15:27 GMT
* Generated on Tue, 24 Jan 2023 16:39:57 GMT
*/

module.exports = {green : {100 : "#0C291E",200 : "#13402F",300 : "#1A5740",400 : "#256E53",500 : "#288563",600 : "#42AD86",700 : "#86D6B9",800 : "#DBFFF1"},
Expand Down
2 changes: 1 addition & 1 deletion dist/tokens/ts/core-light-colors.d.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Mon, 23 Jan 2023 20:15:27 GMT
* Generated on Tue, 24 Jan 2023 16:39:57 GMT
*/

export const green : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};
Expand Down
2 changes: 1 addition & 1 deletion dist/tokens/ts/core-light-colors.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Mon, 23 Jan 2023 20:15:27 GMT
* Generated on Tue, 24 Jan 2023 16:39:57 GMT
*/

module.exports = {green : {100 : "#FAFFFC",200 : "#EBF2EF",300 : "#D1E0D9",400 : "#B6CFC2",500 : "#86B09B",600 : "#307553",700 : "#275E43",800 : "#244C38"},
Expand Down
2 changes: 1 addition & 1 deletion dist/tokens/ts/themes/dark.d.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Mon, 23 Jan 2023 20:15:27 GMT
* Generated on Tue, 24 Jan 2023 16:39:57 GMT
*/

export const theme: string;
Expand Down
2 changes: 1 addition & 1 deletion dist/tokens/ts/themes/dark.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

18 changes: 18 additions & 0 deletions dist/tokens/ts/themes/emerson.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/**
* Do not edit directly
* Generated on Tue, 24 Jan 2023 16:39:57 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};
Loading

0 comments on commit 34eb471

Please sign in to comment.