Skip to content

Commit

Permalink
feat: custom format for colours
Browse files Browse the repository at this point in the history
  • Loading branch information
@CCAyl
CCAyl authored Aug 15, 2022
2 parents 7d23881 + 8641e5e commit c04c7b7
Show file tree
Hide file tree
Showing 16 changed files with 136 additions and 597 deletions.
63 changes: 57 additions & 6 deletions build.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
const StyleDictionary = require("style-dictionary");
const ChangeCase = require("change-case");
const { fileHeader, getTypeScriptType } = StyleDictionary.formatHelpers;

function isStringPxValue(token) {
const isStringPxValue = (token) => {
if (typeof token.value === "string") {
return token.value.endsWith("px");
}
}
};

StyleDictionary.registerFilter({
name: "filter-typography",
Expand Down Expand Up @@ -51,6 +52,56 @@ StyleDictionary.registerTransform({
},
});

StyleDictionary.registerFormat({
name: `typescript/color-declaration`,
formatter: ({ dictionary, file }) => {
return (
fileHeader({ file }) +
Object.entries(dictionary.properties.colors)
.map((tokens) => {
const colorObj = tokens[0];
const filtered = dictionary.allTokens.filter(
(token) => token.attributes.type === colorObj
);
return (
`export const ${colorObj} : { ` +
filtered.map((token) => {
return `${token.name} : ${getTypeScriptType(token.value)}`;
}) +
`};`
);
})
.join(`\n`)
);
},
});

StyleDictionary.registerFormat({
name: `javascript/colors`,
formatter: ({ dictionary, file }) => {
return (
fileHeader({ file }) +
`module.exports = {` +
Object.entries(dictionary.properties.colors)
.map((tokens) => {
const colorObj = tokens[0];
const filtered = dictionary.allTokens.filter(
(token) => token.attributes.type === colorObj
);
return (
`${colorObj} : { ` +
filtered.map((token) => {
return `${token.name} : "${token.value}"`;
}) +
`},`
);
})
.join(`\n`) +
`};`
);
},
});

StyleDictionary.registerTransformGroup({
name: "custom/aviary",
transforms: [
Expand Down Expand Up @@ -111,14 +162,14 @@ const getStyleDictionaryConfig = (theme) => {
filter: "filter-typography",
},
{
format: "javascript/module-flat",
format: "javascript/colors",
destination: core ? "colors.js" : `themes/${theme}.js`,
filter: {
type: "color",
},
},
{
format: "typescript/es6-declarations",
format: "typescript/color-declaration",
destination: core ? "colors.d.ts" : `themes/${theme}.d.ts`,
filter: {
type: "color",
Expand All @@ -142,14 +193,14 @@ const getStyleDictionaryConfig = (theme) => {
filter: "filter-typography",
},
{
format: "javascript/module-flat",
format: "javascript/colors",
destination: core ? "colors.js" : `themes/${theme}.js`,
filter: {
type: "color",
},
},
{
format: "typescript/es6-declarations",
format: "typescript/color-declaration",
destination: core ? "colors.d.ts" : `themes/${theme}.d.ts`,
filter: {
type: "color",
Expand Down
60 changes: 8 additions & 52 deletions build/native/colors.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,12 @@
/**
* Do not edit directly
* Generated on Wed, 10 Aug 2022 17:59:15 GMT
* Generated on Mon, 15 Aug 2022 15:21:29 GMT
*/

export const green100 : string;
export const green200 : string;
export const green300 : string;
export const green400 : string;
export const green500 : string;
export const green600 : string;
export const green700 : string;
export const green800 : string;
export const blue100 : string;
export const blue200 : string;
export const blue300 : string;
export const blue400 : string;
export const blue500 : string;
export const blue600 : string;
export const blue700 : string;
export const blue800 : string;
export const red100 : string;
export const red200 : string;
export const red300 : string;
export const red400 : string;
export const red500 : string;
export const red600 : string;
export const red700 : string;
export const red800 : string;
export const purple100 : string;
export const purple200 : string;
export const purple300 : string;
export const purple400 : string;
export const purple500 : string;
export const purple600 : string;
export const purple700 : string;
export const purple800 : string;
export const orange100 : string;
export const orange200 : string;
export const orange300 : string;
export const orange400 : string;
export const orange500 : string;
export const orange600 : string;
export const orange700 : string;
export const orange800 : string;
export const grey100 : string;
export const grey200 : string;
export const grey300 : string;
export const grey400 : string;
export const grey500 : string;
export const grey600 : string;
export const grey700 : string;
export const grey800 : string;
export const white : string;
export const black : string;
export const transparent : string;
export const green : { green100 : string,green200 : string,green300 : string,green400 : string,green500 : string,green600 : string,green700 : string,green800 : string};
export const blue : { blue100 : string,blue200 : string,blue300 : string,blue400 : string,blue500 : string,blue600 : string,blue700 : string,blue800 : string};
export const red : { red100 : string,red200 : string,red300 : string,red400 : string,red500 : string,red600 : string,red700 : string,red800 : string};
export const purple : { purple100 : string,purple200 : string,purple300 : string,purple400 : string,purple500 : string,purple600 : string,purple700 : string,purple800 : string};
export const orange : { orange100 : string,orange200 : string,orange300 : string,orange400 : string,orange500 : string,orange600 : string,orange700 : string,orange800 : string};
export const grey : { grey100 : string,grey200 : string,grey300 : string,grey400 : string,grey500 : string,grey600 : string,grey700 : string,grey800 : string};
export const shades : { white : string,black : string,transparent : string};
62 changes: 8 additions & 54 deletions build/native/colors.js
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,12 @@
/**
* Do not edit directly
* Generated on Wed, 10 Aug 2022 17:59:15 GMT
* Generated on Mon, 15 Aug 2022 15:21:29 GMT
*/

module.exports = {
"green100": "#FAFFFC",
"green200": "#EBF2EF",
"green300": "#D1E0D9",
"green400": "#B6CFC2",
"green500": "#86B09B",
"green600": "#307553",
"green700": "#275E43",
"green800": "#244C38",
"blue100": "#F5FAFF",
"blue200": "#E6F1FC",
"blue300": "#C0D8F0",
"blue400": "#88B1D9",
"blue500": "#5D96CF",
"blue600": "#3971A8",
"blue700": "#21588F",
"blue800": "#194673",
"red100": "#FFF7F9",
"red200": "#FEEEF2",
"red300": "#F0C4CD",
"red400": "#E296A6",
"red500": "#C6516A",
"red600": "#AF2645",
"red700": "#980B29",
"red800": "#800D25",
"purple100": "#FCFAFF",
"purple200": "#F2ECFE",
"purple300": "#D7CEE9",
"purple400": "#B9ABD5",
"purple500": "#8471AB",
"purple600": "#533E7D",
"purple700": "#3B2566",
"purple800": "#2A174F",
"orange100": "#FFFAF5",
"orange200": "#FFF3E8",
"orange300": "#F3D8C0",
"orange400": "#E7B88F",
"orange500": "#CF8545",
"orange600": "#B4631D",
"orange700": "#8E4D14",
"orange800": "#784213",
"grey100": "#FCFEFF",
"grey200": "#F5F7FA",
"grey300": "#E6EDF5",
"grey400": "#C8D3E0",
"grey500": "#596D84",
"grey600": "#475A70",
"grey700": "#36485C",
"grey800": "#2E3A47",
"white": "#FFFFFF",
"black": "#000000",
"transparent": "transparent"
};
module.exports = {green : { green100 : "#FAFFFC",green200 : "#EBF2EF",green300 : "#D1E0D9",green400 : "#B6CFC2",green500 : "#86B09B",green600 : "#307553",green700 : "#275E43",green800 : "#244C38"},
blue : { blue100 : "#F5FAFF",blue200 : "#E6F1FC",blue300 : "#C0D8F0",blue400 : "#88B1D9",blue500 : "#5D96CF",blue600 : "#3971A8",blue700 : "#21588F",blue800 : "#194673"},
red : { red100 : "#FFF7F9",red200 : "#FEEEF2",red300 : "#F0C4CD",red400 : "#E296A6",red500 : "#C6516A",red600 : "#AF2645",red700 : "#980B29",red800 : "#800D25"},
purple : { purple100 : "#FCFAFF",purple200 : "#F2ECFE",purple300 : "#D7CEE9",purple400 : "#B9ABD5",purple500 : "#8471AB",purple600 : "#533E7D",purple700 : "#3B2566",purple800 : "#2A174F"},
orange : { orange100 : "#FFFAF5",orange200 : "#FFF3E8",orange300 : "#F3D8C0",orange400 : "#E7B88F",orange500 : "#CF8545",orange600 : "#B4631D",orange700 : "#8E4D14",orange800 : "#784213"},
grey : { grey100 : "#FCFEFF",grey200 : "#F5F7FA",grey300 : "#E6EDF5",grey400 : "#C8D3E0",grey500 : "#596D84",grey600 : "#475A70",grey700 : "#36485C",grey800 : "#2E3A47"},
shades : { white : "#FFFFFF",black : "#000000",transparent : "transparent"},};
102 changes: 10 additions & 92 deletions build/native/themes/light.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,14 @@
/**
* Do not edit directly
* Generated on Wed, 10 Aug 2022 17:59:15 GMT
* Generated on Mon, 15 Aug 2022 15:21:29 GMT
*/

export const textBase : string;
export const textEmphasis : string;
export const textSubdued : string;
export const surfaceLevel0 : string;
export const surfaceLevel1 : string;
export const surfaceLevel2 : string;
export const surfaceLevel3 : string;
export const primaryTextBase : string;
export const primaryTextHover : string;
export const primaryTextActive : string;
export const primaryBackgroundBase : string;
export const primaryBackgroundHover : string;
export const primaryBackgroundActive : string;
export const primaryBackgroundMuted : string;
export const primaryBackgroundMutedHover : string;
export const primaryBackgroundMutedActive : string;
export const primaryBackgroundBox : string;
export const primaryBorderBase : string;
export const primaryBorderHover : string;
export const primaryBorderActive : string;
export const infoTextBase : string;
export const infoTextHover : string;
export const infoTextActive : string;
export const infoBackgroundBase : string;
export const infoBackgroundHover : string;
export const infoBackgroundActive : string;
export const infoBackgroundMuted : string;
export const infoBackgroundMutedHover : string;
export const infoBackgroundMutedActive : string;
export const infoBackgroundBox : string;
export const infoBorderBase : string;
export const infoBorderHover : string;
export const infoBorderActive : string;
export const warningTextBase : string;
export const warningTextHover : string;
export const warningTextActive : string;
export const warningBackgroundBase : string;
export const warningBackgroundHover : string;
export const warningBackgroundActive : string;
export const warningBackgroundMuted : string;
export const warningBackgroundMutedHover : string;
export const warningBackgroundMutedActive : string;
export const warningBackgroundBox : string;
export const warningBorderBase : string;
export const warningBorderHover : string;
export const warningBorderActive : string;
export const dangerTextBase : string;
export const dangerTextHover : string;
export const dangerTextActive : string;
export const dangerBackgroundBase : string;
export const dangerBackgroundHover : string;
export const dangerBackgroundActive : string;
export const dangerBackgroundMuted : string;
export const dangerBackgroundMutedHover : string;
export const dangerBackgroundMutedActive : string;
export const dangerBackgroundBox : string;
export const dangerBorderBase : string;
export const dangerBorderHover : string;
export const dangerBorderActive : string;
export const highlightTextBase : string;
export const highlightTextHover : string;
export const highlightTextActive : string;
export const highlightBackgroundBase : string;
export const highlightBackgroundHover : string;
export const highlightBackgroundActive : string;
export const highlightBackgroundMuted : string;
export const highlightBackgroundMutedHover : string;
export const highlightBackgroundMutedActive : string;
export const highlightBackgroundBox : string;
export const highlightBorderBase : string;
export const highlightBorderHover : string;
export const highlightBorderActive : string;
export const disabledText : string;
export const disabledBackground : string;
export const disabledNakedContent : string;
export const disabledNakedBackground : string;
export const disabledBorder : string;
export const disabledInputBackground : string;
export const disabledInputLabelText : string;
export const inputBackgroundBase : string;
export const inputBackgroundHover : string;
export const inputBackgroundInformation : string;
export const inputTextBase : string;
export const inputTextInformation : string;
export const inputTextInformationError : string;
export const inputTextLabel : string;
export const inputTextFloatingLabel : string;
export const inputTextFloatingLabelError : string;
export const inputTextPlaceholder : string;
export const inputBorderBase : string;
export const inputBorderError : string;
export const text : { textBase : string,textEmphasis : string,textSubdued : string};
export const surface : { surfaceLevel0 : string,surfaceLevel1 : string,surfaceLevel2 : string,surfaceLevel3 : string};
export const primary : { primaryTextBase : string,primaryTextHover : string,primaryTextActive : string,primaryBackgroundBase : string,primaryBackgroundHover : string,primaryBackgroundActive : string,primaryBackgroundMuted : string,primaryBackgroundMutedHover : string,primaryBackgroundMutedActive : string,primaryBackgroundBox : string,primaryBorderBase : string,primaryBorderHover : string,primaryBorderActive : string};
export const info : { infoTextBase : string,infoTextHover : string,infoTextActive : string,infoBackgroundBase : string,infoBackgroundHover : string,infoBackgroundActive : string,infoBackgroundMuted : string,infoBackgroundMutedHover : string,infoBackgroundMutedActive : string,infoBackgroundBox : string,infoBorderBase : string,infoBorderHover : string,infoBorderActive : string};
export const warning : { warningTextBase : string,warningTextHover : string,warningTextActive : string,warningBackgroundBase : string,warningBackgroundHover : string,warningBackgroundActive : string,warningBackgroundMuted : string,warningBackgroundMutedHover : string,warningBackgroundMutedActive : string,warningBackgroundBox : string,warningBorderBase : string,warningBorderHover : string,warningBorderActive : string};
export const danger : { dangerTextBase : string,dangerTextHover : string,dangerTextActive : string,dangerBackgroundBase : string,dangerBackgroundHover : string,dangerBackgroundActive : string,dangerBackgroundMuted : string,dangerBackgroundMutedHover : string,dangerBackgroundMutedActive : string,dangerBackgroundBox : string,dangerBorderBase : string,dangerBorderHover : string,dangerBorderActive : string};
export const highlight : { highlightTextBase : string,highlightTextHover : string,highlightTextActive : string,highlightBackgroundBase : string,highlightBackgroundHover : string,highlightBackgroundActive : string,highlightBackgroundMuted : string,highlightBackgroundMutedHover : string,highlightBackgroundMutedActive : string,highlightBackgroundBox : string,highlightBorderBase : string,highlightBorderHover : string,highlightBorderActive : string};
export const disabled : { disabledText : string,disabledBackground : string,disabledNakedContent : string,disabledNakedBackground : string,disabledBorder : string,disabledInputBackground : string,disabledInputLabelText : string};
export const input : { inputBackgroundBase : string,inputBackgroundHover : string,inputBackgroundInformation : string,inputTextBase : string,inputTextInformation : string,inputTextInformationError : string,inputTextLabel : string,inputTextFloatingLabel : string,inputTextFloatingLabelError : string,inputTextPlaceholder : string,inputBorderBase : string,inputBorderError : string};
Loading

0 comments on commit c04c7b7

Please sign in to comment.