diff --git a/dist/documentation/core-dark-colors.d.ts b/dist/documentation/core-dark-colors.d.ts new file mode 100644 index 00000000..52a5ef98 --- /dev/null +++ b/dist/documentation/core-dark-colors.d.ts @@ -0,0 +1,233 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +export const green : {100:{ + name: string, + hex: string, + + },200:{ + name: string, + hex: string, + + },300:{ + name: string, + hex: string, + + },400:{ + name: string, + hex: string, + + },500:{ + name: string, + hex: string, + + },600:{ + name: string, + hex: string, + + },700:{ + name: string, + hex: string, + + },800:{ + name: string, + hex: string, + + }}; +export const blue : {100:{ + name: string, + hex: string, + + },200:{ + name: string, + hex: string, + + },300:{ + name: string, + hex: string, + + },400:{ + name: string, + hex: string, + + },500:{ + name: string, + hex: string, + + },600:{ + name: string, + hex: string, + + },700:{ + name: string, + hex: string, + + },800:{ + name: string, + hex: string, + + }}; +export const red : {100:{ + name: string, + hex: string, + + },200:{ + name: string, + hex: string, + + },300:{ + name: string, + hex: string, + + },400:{ + name: string, + hex: string, + + },500:{ + name: string, + hex: string, + + },600:{ + name: string, + hex: string, + + },700:{ + name: string, + hex: string, + + },800:{ + name: string, + hex: string, + + }}; +export const purple : {100:{ + name: string, + hex: string, + + },200:{ + name: string, + hex: string, + + },300:{ + name: string, + hex: string, + + },400:{ + name: string, + hex: string, + + },500:{ + name: string, + hex: string, + + },600:{ + name: string, + hex: string, + + },700:{ + name: string, + hex: string, + + },800:{ + name: string, + hex: string, + + }}; +export const orange : {100:{ + name: string, + hex: string, + + },200:{ + name: string, + hex: string, + + },300:{ + name: string, + hex: string, + + },400:{ + name: string, + hex: string, + + },500:{ + name: string, + hex: string, + + },600:{ + name: string, + hex: string, + + },700:{ + name: string, + hex: string, + + },800:{ + name: string, + hex: string, + + }}; +export const grey : {100:{ + name: string, + hex: string, + + },200:{ + name: string, + hex: string, + + },300:{ + name: string, + hex: string, + + },400:{ + name: string, + hex: string, + + },500:{ + name: string, + hex: string, + + },600:{ + name: string, + hex: string, + + },700:{ + name: string, + hex: string, + + },800:{ + name: string, + hex: string, + + }}; +export const shades : {white:{ + name: string, + hex: string, + + },black:{ + name: string, + hex: string, + + },transparent:{ + name: string, + hex: string, + + }}; +export const brown : {200:{ + name: string, + hex: string, + + },300:{ + name: string, + hex: string, + + },400:{ + name: string, + hex: string, + + },700:{ + name: string, + hex: string, + + }}; \ No newline at end of file diff --git a/dist/documentation/core-dark-colors.js b/dist/documentation/core-dark-colors.js new file mode 100644 index 00000000..707b9a67 --- /dev/null +++ b/dist/documentation/core-dark-colors.js @@ -0,0 +1,233 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +module.exports = {green : {100:{ + name: "green.100", + hex: "#0C291E", + + },200:{ + name: "green.200", + hex: "#0F3326", + + },300:{ + name: "green.300", + hex: "#13402F", + + },400:{ + name: "green.400", + hex: "#256E53", + + },500:{ + name: "green.500", + hex: "#288563", + + },600:{ + name: "green.600", + hex: "#42AD86", + + },700:{ + name: "green.700", + hex: "#86D6B9", + + },800:{ + name: "green.800", + hex: "#DBFFF1", + + }}, +blue : {100:{ + name: "blue.100", + hex: "#0C1B29", + + },200:{ + name: "blue.200", + hex: "#102337", + + },300:{ + name: "blue.300", + hex: "#142C45", + + },400:{ + name: "blue.400", + hex: "#285685", + + },500:{ + name: "blue.500", + hex: "#4577AD", + + },600:{ + name: "blue.600", + hex: "#6597CE", + + },700:{ + name: "blue.700", + hex: "#96BDE7", + + },800:{ + name: "blue.800", + hex: "#D1E8FF", + + }}, +red : {100:{ + name: "red.100", + hex: "#290F16", + + },200:{ + name: "red.200", + hex: "#34101A", + + },300:{ + name: "red.300", + hex: "#451522", + + },400:{ + name: "red.400", + hex: "#8F2843", + + },500:{ + name: "red.500", + hex: "#B23655", + + },600:{ + name: "red.600", + hex: "#C74C6B", + + },700:{ + name: "red.700", + hex: "#EA8AA3", + + },800:{ + name: "red.800", + hex: "#FFD1DD", + + }}, +purple : {100:{ + name: "purple.100", + hex: "#200F29", + + },200:{ + name: "purple.200", + hex: "#291433", + + },300:{ + name: "purple.300", + hex: "#33193F", + + },400:{ + name: "purple.400", + hex: "#542F66", + + },500:{ + name: "purple.500", + hex: "#693B80", + + },600:{ + name: "purple.600", + hex: "#865C99", + + },700:{ + name: "purple.700", + hex: "#B990CC", + + },800:{ + name: "purple.800", + hex: "#F0D1FF", + + }}, +orange : {100:{ + name: "orange.100", + hex: "#29170C", + + },200:{ + name: "orange.200", + hex: "#361D0E", + + },300:{ + name: "orange.300", + hex: "#4A2915", + + },400:{ + name: "orange.400", + hex: "#8A4E29", + + },500:{ + name: "orange.500", + hex: "#AD6234", + + },600:{ + name: "orange.600", + hex: "#CF7945", + + },700:{ + name: "orange.700", + hex: "#E7AA84", + + },800:{ + name: "orange.800", + hex: "#FFE3D1", + + }}, +grey : {100:{ + name: "grey.100", + hex: "#101012", + + },200:{ + name: "grey.200", + hex: "#1A1D21", + + },300:{ + name: "grey.300", + hex: "#22272B", + + },400:{ + name: "grey.400", + hex: "#2D3238", + + },500:{ + name: "grey.500", + hex: "#515357", + + },600:{ + name: "grey.600", + hex: "#98999B", + + },700:{ + name: "grey.700", + hex: "#BCBDBF", + + },800:{ + name: "grey.800", + hex: "#E8E9EA", + + }}, +shades : {white:{ + name: "shades.white", + hex: "#FFFFFF", + + },black:{ + name: "shades.black", + hex: "#000000", + + },transparent:{ + name: "shades.transparent", + hex: "transparent", + + }}, +brown : {200:{ + name: "brown.200", + hex: "#33260F", + + },300:{ + name: "brown.300", + hex: "#402F13", + + },400:{ + name: "brown.400", + hex: "#6E5225", + + },700:{ + name: "brown.700", + hex: "#D6BA87", + + }},}; \ No newline at end of file diff --git a/dist/documentation/core-light-colors.d.ts b/dist/documentation/core-light-colors.d.ts new file mode 100644 index 00000000..58171902 --- /dev/null +++ b/dist/documentation/core-light-colors.d.ts @@ -0,0 +1,270 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +export const green : {100:{ + name: string, + hex: string, + + },200:{ + name: string, + hex: string, + + },300:{ + name: string, + hex: string, + + },400:{ + name: string, + hex: string, + + },500:{ + name: string, + hex: string, + + },600:{ + name: string, + hex: string, + + },700:{ + name: string, + hex: string, + + },800:{ + name: string, + hex: string, + + }}; +export const blue : {100:{ + name: string, + hex: string, + + },200:{ + name: string, + hex: string, + + },300:{ + name: string, + hex: string, + + },400:{ + name: string, + hex: string, + + },500:{ + name: string, + hex: string, + + },600:{ + name: string, + hex: string, + + },700:{ + name: string, + hex: string, + + },800:{ + name: string, + hex: string, + + }}; +export const red : {100:{ + name: string, + hex: string, + + },200:{ + name: string, + hex: string, + + },300:{ + name: string, + hex: string, + + },400:{ + name: string, + hex: string, + + },500:{ + name: string, + hex: string, + + },600:{ + name: string, + hex: string, + + },700:{ + name: string, + hex: string, + + },800:{ + name: string, + hex: string, + + }}; +export const purple : {100:{ + name: string, + hex: string, + + },200:{ + name: string, + hex: string, + + },300:{ + name: string, + hex: string, + + },400:{ + name: string, + hex: string, + + },500:{ + name: string, + hex: string, + + },600:{ + name: string, + hex: string, + + },700:{ + name: string, + hex: string, + + },800:{ + name: string, + hex: string, + + }}; +export const orange : {100:{ + name: string, + hex: string, + + },200:{ + name: string, + hex: string, + + },300:{ + name: string, + hex: string, + + },400:{ + name: string, + hex: string, + + },500:{ + name: string, + hex: string, + + },600:{ + name: string, + hex: string, + + },700:{ + name: string, + hex: string, + + },800:{ + name: string, + hex: string, + + }}; +export const grey : {100:{ + name: string, + hex: string, + + },200:{ + name: string, + hex: string, + + },300:{ + name: string, + hex: string, + + },400:{ + name: string, + hex: string, + + },500:{ + name: string, + hex: string, + + },600:{ + name: string, + hex: string, + + },700:{ + name: string, + hex: string, + + },800:{ + name: string, + hex: string, + + },900:{ + name: string, + hex: string, + + }}; +export const shades : {white:{ + name: string, + hex: string, + + },black:{ + name: string, + hex: string, + + },transparent:{ + name: string, + hex: string, + + }}; +export const yellow : {100:{ + name: string, + hex: string, + + },200:{ + name: string, + hex: string, + + },300:{ + name: string, + hex: string, + + },400:{ + name: string, + hex: string, + + },500:{ + name: string, + hex: string, + + },600:{ + name: string, + hex: string, + + },700:{ + name: string, + hex: string, + + },800:{ + name: string, + hex: string, + + }}; +export const brown : {200:{ + name: string, + hex: string, + + },300:{ + name: string, + hex: string, + + },400:{ + name: string, + hex: string, + + },700:{ + name: string, + hex: string, + + }}; \ No newline at end of file diff --git a/dist/documentation/core-light-colors.js b/dist/documentation/core-light-colors.js new file mode 100644 index 00000000..899d61ec --- /dev/null +++ b/dist/documentation/core-light-colors.js @@ -0,0 +1,270 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +module.exports = {green : {100:{ + name: "green.100", + hex: "#FAFFFC", + + },200:{ + name: "green.200", + hex: "#EBF2EF", + + },300:{ + name: "green.300", + hex: "#D1E0D9", + + },400:{ + name: "green.400", + hex: "#B6CFC2", + + },500:{ + name: "green.500", + hex: "#86B09B", + + },600:{ + name: "green.600", + hex: "#307553", + + },700:{ + name: "green.700", + hex: "#275E43", + + },800:{ + name: "green.800", + hex: "#244C38", + + }}, +blue : {100:{ + name: "blue.100", + hex: "#F5FAFF", + + },200:{ + name: "blue.200", + hex: "#E6F1FC", + + },300:{ + name: "blue.300", + hex: "#C0D8F0", + + },400:{ + name: "blue.400", + hex: "#88B1D9", + + },500:{ + name: "blue.500", + hex: "#5D96CF", + + },600:{ + name: "blue.600", + hex: "#3971A8", + + },700:{ + name: "blue.700", + hex: "#21588F", + + },800:{ + name: "blue.800", + hex: "#194673", + + }}, +red : {100:{ + name: "red.100", + hex: "#FFF7F9", + + },200:{ + name: "red.200", + hex: "#FEEEF2", + + },300:{ + name: "red.300", + hex: "#F0C4CD", + + },400:{ + name: "red.400", + hex: "#E296A6", + + },500:{ + name: "red.500", + hex: "#C6516A", + + },600:{ + name: "red.600", + hex: "#AF2645", + + },700:{ + name: "red.700", + hex: "#980B29", + + },800:{ + name: "red.800", + hex: "#800D25", + + }}, +purple : {100:{ + name: "purple.100", + hex: "#FCFAFF", + + },200:{ + name: "purple.200", + hex: "#F2ECFE", + + },300:{ + name: "purple.300", + hex: "#D7CEE9", + + },400:{ + name: "purple.400", + hex: "#B9ABD5", + + },500:{ + name: "purple.500", + hex: "#8471AB", + + },600:{ + name: "purple.600", + hex: "#533E7D", + + },700:{ + name: "purple.700", + hex: "#3B2566", + + },800:{ + name: "purple.800", + hex: "#2A174F", + + }}, +orange : {100:{ + name: "orange.100", + hex: "#FFFAF5", + + },200:{ + name: "orange.200", + hex: "#FFF3E8", + + },300:{ + name: "orange.300", + hex: "#F3D8C0", + + },400:{ + name: "orange.400", + hex: "#E7B88F", + + },500:{ + name: "orange.500", + hex: "#CF8545", + + },600:{ + name: "orange.600", + hex: "#B4631D", + + },700:{ + name: "orange.700", + hex: "#8E4D14", + + },800:{ + name: "orange.800", + hex: "#784213", + + }}, +grey : {100:{ + name: "grey.100", + hex: "#FCFEFF", + + },200:{ + name: "grey.200", + hex: "#F5F7FA", + + },300:{ + name: "grey.300", + hex: "#E6EDF5", + + },400:{ + name: "grey.400", + hex: "#C8D3E0", + + },500:{ + name: "grey.500", + hex: "#596D84", + + },600:{ + name: "grey.600", + hex: "#475A70", + + },700:{ + name: "grey.700", + hex: "#36485C", + + },800:{ + name: "grey.800", + hex: "#2E3A47", + + },900:{ + name: "grey.900", + hex: "#212933", + + }}, +shades : {white:{ + name: "shades.white", + hex: "#FFFFFF", + + },black:{ + name: "shades.black", + hex: "#000000", + + },transparent:{ + name: "shades.transparent", + hex: "transparent", + + }}, +yellow : {100:{ + name: "yellow.100", + hex: "#faf8f2", + + },200:{ + name: "yellow.200", + hex: "#fcf3dd", + + },300:{ + name: "yellow.300", + hex: "#fce7b1", + + },400:{ + name: "yellow.400", + hex: "#fcd97e", + + },500:{ + name: "yellow.500", + hex: "#fccb4c", + + },600:{ + name: "yellow.600", + hex: "#ffc121", + + },700:{ + name: "yellow.700", + hex: "#f7b200", + + },800:{ + name: "yellow.800", + hex: "#e5a500", + + }}, +brown : {200:{ + name: "brown.200", + hex: "#F6F1E5", + + },300:{ + name: "brown.300", + hex: "#E4D9C2", + + },400:{ + name: "brown.400", + hex: "#DACCAA", + + },700:{ + name: "brown.700", + hex: "#5E4D27", + + }},}; \ No newline at end of file diff --git a/dist/documentation/themes/dark.d.ts b/dist/documentation/themes/dark.d.ts new file mode 100644 index 00000000..67ee8537 --- /dev/null +++ b/dist/documentation/themes/dark.d.ts @@ -0,0 +1,600 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +export const text : {emphasis:{ + name: string, + hex: string, + description: string + },body:{ + name: string, + hex: string, + description: string + },subdued:{ + name: string, + hex: string, + description: string + },onBackground:{ + name: string, + hex: string, + description: string + }}; +export const system : {textLabelEmphasis:{ + name: string, + hex: string, + description: string + },textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + },borderFocused:{ + name: string, + hex: string, + description: string + }}; +export const surface : {level0:{ + name: string, + hex: string, + description: string + },level1:{ + name: string, + hex: string, + description: string + },level2:{ + name: string, + hex: string, + description: string + },interactiveBackground:{ + name: string, + hex: string, + description: string + },interactiveHover:{ + name: string, + hex: string, + description: string + },interactiveActive:{ + name: string, + hex: string, + description: string + },overlayDark:{ + name: string, + hex: string, + description: string + },overlayTheme:{ + name: string, + hex: string, + description: string + },overlayBackdrop:{ + name: string, + hex: string, + description: string + }}; +export const primary : {textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const success : {textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const info : {textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const warning : {textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const danger : {textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const highlight : {textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const disabled : {text:{ + name: string, + hex: string, + description: string + },background:{ + name: string, + hex: string, + description: string + },nakedBackground:{ + name: string, + hex: string, + description: string + },border:{ + name: string, + hex: string, + description: string + },nakedContent:{ + name: string, + hex: string, + + },inputBackground:{ + name: string, + hex: string, + description: string + },inputLabelText:{ + name: string, + hex: string, + description: string + }}; +export const input : {backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundInformation:{ + name: string, + hex: string, + description: string + },textBase:{ + name: string, + hex: string, + description: string + },textInformation:{ + name: string, + hex: string, + description: string + },textInformationError:{ + name: string, + hex: string, + description: string + },textLabel:{ + name: string, + hex: string, + description: string + },textFloatingLabel:{ + name: string, + hex: string, + description: string + },textFloatingLabelError:{ + name: string, + hex: string, + description: string + },textPlaceholder:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderError:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderEmphasized:{ + name: string, + hex: string, + description: string + },borderEmphasizedHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const separator : {base:{ + name: string, + hex: string, + description: string + }}; +export const light : {backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundContrast:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },textBase:{ + name: string, + hex: string, + description: string + },linkMutedBase:{ + name: string, + hex: string, + description: string + },linkMutedHover:{ + name: string, + hex: string, + description: string + }}; +export const shadow : {base:{ + name: string, + hex: string, + description: string + }}; +export const accent : {forestTextBase:{ + name: string, + hex: string, + + },forestBackgroundMuted:{ + name: string, + hex: string, + + },forestBackgroundMutedHover:{ + name: string, + hex: string, + + },forestBackgroundMutedActive:{ + name: string, + hex: string, + + },sandTextBase:{ + name: string, + hex: string, + + },sandBackgroundMuted:{ + name: string, + hex: string, + + },sandBackgroundMutedHover:{ + name: string, + hex: string, + + },sandBackgroundMutedActive:{ + name: string, + hex: string, + + }}; \ No newline at end of file diff --git a/dist/documentation/themes/dark.js b/dist/documentation/themes/dark.js new file mode 100644 index 00000000..ac0c8cc8 --- /dev/null +++ b/dist/documentation/themes/dark.js @@ -0,0 +1,600 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +module.exports = {text : {emphasis:{ + name: "text.emphasis", + hex: "#E8E9EA", + description: "Used for any text content and icons used with text that needs emphasizing" + },body:{ + name: "text.body", + hex: "#BCBDBF", + description: "Used for default text content and icons used with text" + },subdued:{ + name: "text.subdued", + hex: "#98999B", + description: "Used for any text content and icons used with text that requires less prominence" + },onBackground:{ + name: "text.onBackground", + hex: "#FFFFFF", + description: "For use on darker or colour profile backgrounds that require highly contrasted text" + }}, +system : {textLabelEmphasis:{ + name: "system.textLabelEmphasis", + hex: "#FFFFFF", + description: "Used for any text content and icons used with text that needs emphasizing" + },textBase:{ + name: "system.textBase", + hex: "#BCBDBF", + description: "Used as the text or fill colour for interactive and static system components such as links, text, and icons" + },textHover:{ + name: "system.textHover", + hex: "#E8E9EA", + description: "Used as the hovered text or fill colour for interactive system components such as links and text buttons" + },textActive:{ + name: "system.textActive", + hex: "#FFFFFF", + description: "Used as the pressed text or fill colour for interactive system components such as links and text buttons" + },backgroundBase:{ + name: "system.backgroundBase", + hex: "#1A1D21", + description: "Used as the background for system components" + },backgroundMuted:{ + name: "system.backgroundMuted", + hex: "#22272B", + description: "Used as the muted background for system components" + },backgroundMutedHover:{ + name: "system.backgroundMutedHover", + hex: "#2D3238", + description: "Used as the hovered muted background for system components" + },backgroundMutedActive:{ + name: "system.backgroundMutedActive", + hex: "#515357", + description: "Used as the pressed muted background for system components" + },backgroundBox:{ + name: "system.backgroundBox", + hex: "#1A1D21", + description: "Used as a background colour for a system container like Box or Message" + },borderBase:{ + name: "system.borderBase", + hex: "#515357", + description: "Used for the border colour for system components" + },borderHover:{ + name: "system.borderHover", + hex: "#98999B", + description: "Used for the hovered border colour for system components" + },borderActive:{ + name: "system.borderActive", + hex: "#BCBDBF", + description: "Used for the pressed border colour for system components" + },borderFocused:{ + name: "system.borderFocused", + hex: "#6597CE", + description: "Used for the focused border colour for system components" + }}, +surface : {level0:{ + name: "surface.level0", + hex: "#101012", + description: "Used for setting the lowest most level, mainly applied as a background color to the HTML body. Should always be underneath levels 1 and 2" + },level1:{ + name: "surface.level1", + hex: "#101012", + description: "Used commonly with Boxes and containers that are directly on surface level 0. Also can be used as an alternative HTML body background color." + },level2:{ + name: "surface.level2", + hex: "#22272B", + description: "Used for elements that are contained within Boxes or other wrappers that are surface level 1." + },interactiveBackground:{ + name: "surface.interactiveBackground", + hex: "#1A1D21", + description: "Used for elements where the entire surface is interactable. For example Accordions, ActionBlock, and DropdownItems" + },interactiveHover:{ + name: "surface.interactiveHover", + hex: "#22272B", + description: "Hover state for elements where the entire surface is interactable. For example Accordions, ActionBlock, and DropdownItems" + },interactiveActive:{ + name: "surface.interactiveActive", + hex: "#2D3238", + description: "Active/Pressed state for elements where the entire surface is interactable. For example Accordions, ActionBlock, and DropdownItems" + },overlayDark:{ + name: "surface.overlayDark", + hex: "#22272B", + description: "Used for elements that are absolutely positioned to overlay content on the page. Is always a dark background regardless of theme. Ex: Things like Toasts and Tooltips" + },overlayTheme:{ + name: "surface.overlayTheme", + hex: "#1A1D21", + description: "Used for elements that are absolutely positioned to overlay content on the page. Matches the base color of the theme. Ex: Snackbar" + },overlayBackdrop:{ + name: "surface.overlayBackdrop", + hex: "#1A1D21", + description: "Used to overlay & de-emphasize the page to draw focus to certain areas. Ex: Used with Modals, Drawers" + }}, +primary : {textBase:{ + name: "primary.textBase", + hex: "#1A1D21", + description: "Used as the text or fill colour for interactive and static primary components such as links, text, and icons" + },textHover:{ + name: "primary.textHover", + hex: "#1A1D21", + description: "Used as the hovered text or fill colour for interactive primary components such as links and text buttons" + },textActive:{ + name: "primary.textActive", + hex: "#1A1D21", + description: "Used as the pressed text or fill colour for interactive primary components such as links and text buttons" + },backgroundBase:{ + name: "primary.backgroundBase", + hex: "#E8E9EA", + description: "Used as the background for primary components such as plain buttons. Paired with text.onBackground for contrast" + },backgroundHover:{ + name: "primary.backgroundHover", + hex: "#FFFFFF", + description: "Used as the hovered background for primary components such as plain buttons" + },backgroundActive:{ + name: "primary.backgroundActive", + hex: "#FFFFFF", + description: "Used as the hovered background for primary components such as plain buttons" + },backgroundMuted:{ + name: "primary.backgroundMuted", + hex: "#22272B", + description: "Used as the muted background for primary components such as pills and text buttons. Paired with primary.textBase for a subtler contrast" + },backgroundMutedHover:{ + name: "primary.backgroundMutedHover", + hex: "#2D3238", + description: "Used as the hovered muted background for primary components such as pills and text buttons. Paired with primary.textBase for a subtler contrast" + },backgroundMutedActive:{ + name: "primary.backgroundMutedActive", + hex: "#515357", + description: "Used as the pressed muted background for primary components such as pills and text buttons. Paired with primary.textBase for a subtler contrast" + },backgroundBox:{ + name: "primary.backgroundBox", + hex: "#0C291E", + description: "Used as a very light background for primary components such as Message and Box. Used for containers with content blocks" + },borderBase:{ + name: "primary.borderBase", + hex: "#515357", + description: "Used for the border colour for primary components such as buttons and Message" + },borderHover:{ + name: "primary.borderHover", + hex: "#98999B", + description: "Used for the hovered border colour for primary components such as buttons" + },borderActive:{ + name: "primary.borderActive", + hex: "#BCBDBF", + description: "Used for the pressed border colour for primary components such as buttons" + }}, +success : {textBase:{ + name: "success.textBase", + hex: "#42AD86", + description: "Used as the text or fill colour for successful intention versions of components such as message, pill, or box" + },textHover:{ + name: "success.textHover", + hex: "#86D6B9", + description: "Used as the hovered text or fill colour for successful intention versions of components such as message, pill, or box" + },textActive:{ + name: "success.textActive", + hex: "#DBFFF1", + description: "Used as the pressed text or fill colour for successful intention versions of components such as message, pill, or box" + },backgroundBase:{ + name: "success.backgroundBase", + hex: "#288563", + description: "Description to come." + },backgroundHover:{ + name: "success.backgroundHover", + hex: "#42AD86", + description: "Description to come." + },backgroundActive:{ + name: "success.backgroundActive", + hex: "#86D6B9", + description: "Description to come." + },backgroundMuted:{ + name: "success.backgroundMuted", + hex: "#0F3326", + description: "Used as the muted background for successful intention versions of components such as message, pill, or box. Paired with successful.textBase for a subtler contrast." + },backgroundMutedHover:{ + name: "success.backgroundMutedHover", + hex: "#13402F", + description: "Used as the hovered muted background for successful intention versions of components such as message, pill, or box. Paired with successful.textBase for a subtler contrast" + },backgroundMutedActive:{ + name: "success.backgroundMutedActive", + hex: "#256E53", + description: "Used as the pressed muted background for successful intention versions of components such as message, pill, or box. Paired with successful.textBase for a subtler contrast" + },backgroundBox:{ + name: "success.backgroundBox", + hex: "#0C291E", + description: "Used as a very light background for successful intention versions of components such as message, pill, or box. Used for containers with content blocks" + },borderBase:{ + name: "success.borderBase", + hex: "#256E53", + description: "Used for the border colour for successful intention versions of components such as buttons and Message" + },borderHover:{ + name: "success.borderHover", + hex: "#288563", + description: "Used for the hovered border colour for successful components such as message" + },borderActive:{ + name: "success.borderActive", + hex: "#42AD86", + description: "Used for the pressed border colour for successful components such as message" + }}, +info : {textBase:{ + name: "info.textBase", + hex: "#6597CE", + description: "Used as the text or fill colour for interactive and static informational components such as links, text, and icons" + },textHover:{ + name: "info.textHover", + hex: "#96BDE7", + description: "Used as the hovered colour for interactive informational components such as links and text buttons" + },textActive:{ + name: "info.textActive", + hex: "#D1E8FF", + description: "Used as the pressed colour for interactive informational components such as links and text buttons" + },backgroundBase:{ + name: "info.backgroundBase", + hex: "#4577AD", + description: "Used as the background for informational components such as plain buttons. Paired with text.onBackground for contrast" + },backgroundHover:{ + name: "info.backgroundHover", + hex: "#285685", + description: "Used as the hovered background for informational components such as plain buttons" + },backgroundActive:{ + name: "info.backgroundActive", + hex: "#142C45", + description: "Used as the pressed background for informational components such as plain buttons" + },backgroundMuted:{ + name: "info.backgroundMuted", + hex: "#102337", + description: "Used as the muted background for informational components such as pills and text buttons. Paired with info.textBase for a subtler contrast" + },backgroundMutedHover:{ + name: "info.backgroundMutedHover", + hex: "#142C45", + description: "Used as the hovered muted background for informational components such as pills and text buttons. Paired with info.textBase for a subtler contrast" + },backgroundMutedActive:{ + name: "info.backgroundMutedActive", + hex: "#285685", + description: "Used as the pressed muted background for informational components such as pills and text buttons. Paired with info.textBase for a subtler contrast" + },backgroundBox:{ + name: "info.backgroundBox", + hex: "#0C1B29", + description: "Used as a very light background for informational components such as Message and Box. Used for containers with content blocks" + },borderBase:{ + name: "info.borderBase", + hex: "#4577AD", + description: "Used for the border colour for informational components such as buttons and Message" + },borderHover:{ + name: "info.borderHover", + hex: "#285685", + description: "Used for the hovered border colour for informational components such as buttons" + },borderActive:{ + name: "info.borderActive", + hex: "#142C45", + description: "Used for the pressed border colour for informational components such as buttons" + }}, +warning : {textBase:{ + name: "warning.textBase", + hex: "#CF7945", + description: "Used as the text or fill colour for interactive and static warning components such as links, text, and icons" + },textHover:{ + name: "warning.textHover", + hex: "#E7AA84", + description: "Used as the hovered text or fill colour for interactive and static warning components such as links and text buttons" + },textActive:{ + name: "warning.textActive", + hex: "#FFE3D1", + description: "Used as the pressed text or fill colour for interactive and static warning components such as links and text buttons" + },backgroundBase:{ + name: "warning.backgroundBase", + hex: "#AD6234", + description: "Used as the background for warning components such as plain buttons. Paired with text.onBackground for contrast" + },backgroundHover:{ + name: "warning.backgroundHover", + hex: "#CF7945", + description: "Used as the hovered background for warning components such as plain buttons" + },backgroundActive:{ + name: "warning.backgroundActive", + hex: "#E7AA84", + description: "Used as the pressed background for warning components such as plain buttons" + },backgroundMuted:{ + name: "warning.backgroundMuted", + hex: "#361D0E", + description: "Used as the muted background for warning components such as pills and text buttons. Paired with warning.textBase for a subtler contrast" + },backgroundMutedHover:{ + name: "warning.backgroundMutedHover", + hex: "#4A2915", + description: "Used as the hovered muted background for warning components such as pills and text buttons. Paired with warning.textBase for a subtler contrast" + },backgroundMutedActive:{ + name: "warning.backgroundMutedActive", + hex: "#8A4E29", + description: "Used as the pressed muted background for warning components such as pills and text buttons. Paired with warning.textBase for a subtler contrast" + },backgroundBox:{ + name: "warning.backgroundBox", + hex: "#29170C", + description: "Used as a very light background for warning components such as Message and Box. Used for containers with content blocks" + },borderBase:{ + name: "warning.borderBase", + hex: "#8A4E29", + description: "Used for the border colour for warning components such as buttons and Message" + },borderHover:{ + name: "warning.borderHover", + hex: "#AD6234", + description: "Used for the hovered border colour for warning components" + },borderActive:{ + name: "warning.borderActive", + hex: "#CF7945", + description: "Used for the pressed border colour for warning components such as buttons" + }}, +danger : {textBase:{ + name: "danger.textBase", + hex: "#C74C6B", + description: "Used as the text or fill colour for interactive and static danger components such as links, text, and icons" + },textHover:{ + name: "danger.textHover", + hex: "#EA8AA3", + description: "Used as the hovered colour for interactive danger components such as links and text buttons" + },textActive:{ + name: "danger.textActive", + hex: "#FFD1DD", + description: "Used as the pressed colour for interactive danger components such as links and text buttons" + },backgroundBase:{ + name: "danger.backgroundBase", + hex: "#B23655", + description: "Used as the background for danger components such as plain buttons. Paired with text.onBackground for contrast" + },backgroundHover:{ + name: "danger.backgroundHover", + hex: "#C74C6B", + description: "Used as the hovered background for danger components such as plain buttons" + },backgroundActive:{ + name: "danger.backgroundActive", + hex: "#EA8AA3", + description: "Used as the pressed background for danger components such as plain buttons" + },backgroundMuted:{ + name: "danger.backgroundMuted", + hex: "#34101A", + description: "Used as the muted background for danger components such as pills and text buttons. Paired with danger.textBase for a subtler contrast" + },backgroundMutedHover:{ + name: "danger.backgroundMutedHover", + hex: "#451522", + description: "Used as the hovered muted background for danger components such as pills and text buttons. Paired with danger.textBase for a subtler contrast" + },backgroundMutedActive:{ + name: "danger.backgroundMutedActive", + hex: "#8F2843", + description: "Used as the pressed muted background for danger components such as pills and text buttons. Paired with danger.textBase for a subtler contrast" + },backgroundBox:{ + name: "danger.backgroundBox", + hex: "#290F16", + description: "Used as a very light background for warning components such as Message and Box. Used for containers with content blocks" + },borderBase:{ + name: "danger.borderBase", + hex: "#8F2843", + description: "Used for the border colour for danger components such as buttons and Message" + },borderHover:{ + name: "danger.borderHover", + hex: "#B23655", + description: "Used for the hovered border colour for danger components such as buttons" + },borderActive:{ + name: "danger.borderActive", + hex: "#C74C6B", + description: "Used for the pressed border colour for danger components such as buttons" + }}, +highlight : {textBase:{ + name: "highlight.textBase", + hex: "#865C99", + description: "Used as the text or fill colour for interactive and static highlight components such as links, text, and icons" + },textHover:{ + name: "highlight.textHover", + hex: "#B990CC", + description: "Used as the hovered text or fill colour for interactive and static highlight components such as links and text buttons" + },textActive:{ + name: "highlight.textActive", + hex: "#F0D1FF", + description: "Used as the pressed text or fill colour for interactive and static highlight components such as links and text buttons" + },backgroundBase:{ + name: "highlight.backgroundBase", + hex: "#693B80", + description: "Used as the background for highlight components such as plain buttons. Paired with text.onBackground for contrast" + },backgroundHover:{ + name: "highlight.backgroundHover", + hex: "#865C99", + description: "Used as the hovered background for highlight components such as plain buttons" + },backgroundActive:{ + name: "highlight.backgroundActive", + hex: "#B990CC", + description: "Used as the pressed background for highlight components such as plain buttons" + },backgroundMuted:{ + name: "highlight.backgroundMuted", + hex: "#291433", + description: "Used as the muted background for highlight components such as pills and text buttons. Paired with highlight.textBase for a subtler contrast" + },backgroundMutedHover:{ + name: "highlight.backgroundMutedHover", + hex: "#33193F", + description: "Used as the hovered muted background for highlight components such as pills and text buttons. Paired with highlight.textBase for a subtler contrast" + },backgroundMutedActive:{ + name: "highlight.backgroundMutedActive", + hex: "#542F66", + description: "Used as the pressed muted background for highlight components such as pills and text buttons. Paired with highlight.textBase for a subtler contrast" + },backgroundBox:{ + name: "highlight.backgroundBox", + hex: "#200F29", + description: "Used as a very light background for highlight components such as Message and Box. Used for containers with content blocks" + },borderBase:{ + name: "highlight.borderBase", + hex: "#542F66", + description: "Used for the border colour for highlight components such as buttons and Message" + },borderHover:{ + name: "highlight.borderHover", + hex: "#693B80", + description: "Used for the hovered border colour for highlight components" + },borderActive:{ + name: "highlight.borderActive", + hex: "#865C99", + description: "Used for the pressed border colour for highlight components such as buttons and Message" + }}, +disabled : {text:{ + name: "disabled.text", + hex: "#98999B", + description: "For use in disabled content like text and icons" + },background:{ + name: "disabled.background", + hex: "#1A1D21", + description: "Used as the background colour for disabled components" + },nakedBackground:{ + name: "disabled.nakedBackground", + hex: "transparent", + description: "Used for the background in disabled components with little to no styling" + },border:{ + name: "disabled.border", + hex: "#515357", + description: "Used as the border for disabled components" + },nakedContent:{ + name: "disabled.nakedContent", + hex: "#22272B", + + },inputBackground:{ + name: "disabled.inputBackground", + hex: "#2D3238", + description: "For use in disabled inputs as the background colour" + },inputLabelText:{ + name: "disabled.inputLabelText", + hex: "#98999B", + description: "Used as the label colour for disabled inputs" + }}, +input : {backgroundBase:{ + name: "input.backgroundBase", + hex: "#1B2228", + description: "Used as the default background colour for HTML inputs" + },backgroundHover:{ + name: "input.backgroundHover", + hex: "#2D3238", + description: "Used as the hovered background colour for HTML inputs" + },backgroundInformation:{ + name: "input.backgroundInformation", + hex: "#FFFFFF", + description: "Used as the default background colour for the text description below the input" + },textBase:{ + name: "input.textBase", + hex: "#FFFFFF", + description: "Used for the default filled text colour for HTML inputs" + },textInformation:{ + name: "input.textInformation", + hex: "#BCBDBF", + description: "Used as the text content colour for the text description below the input" + },textInformationError:{ + name: "input.textInformationError", + hex: "#B23655", + description: "Used as the text content colour for the text description below the input when there are errors" + },textLabel:{ + name: "input.textLabel", + hex: "#BCBDBF", + description: "Used as the default static label colour in HTML inputs which appears as a placeholder in the static state" + },textFloatingLabel:{ + name: "input.textFloatingLabel", + hex: "#4577AD", + description: "Used as the floated label colour when the HTML input has focus" + },textFloatingLabelError:{ + name: "input.textFloatingLabelError", + hex: "#B23655", + description: "Used as the static and floated label colour when the input is in an error state" + },textPlaceholder:{ + name: "input.textPlaceholder", + hex: "#98999B", + description: "Used as the default placeholder text colour for basic and search inputs" + },textActive:{ + name: "input.textActive", + hex: "#FFFFFF", + description: "Used as the label colour for labels that don't float when focused, like the select component" + },borderBase:{ + name: "input.borderBase", + hex: "#2D3238", + description: "Used as the default border colour" + },borderError:{ + name: "input.borderError", + hex: "#8F2843", + description: "Used for the border colour when the input is in an error state" + },borderHover:{ + name: "input.borderHover", + hex: "#515357", + description: "Used as the hovered border colour" + },borderEmphasized:{ + name: "input.borderEmphasized", + hex: "#98999B", + description: "Used as the default bottom border colour for floating label inputs or as the default border for inputs like checkbox" + },borderEmphasizedHover:{ + name: "input.borderEmphasizedHover", + hex: "#BCBDBF", + description: "Used as the hovered bottom border colour for floating label inputs or as the hovered border for inputs like checkbox" + },borderActive:{ + name: "input.borderActive", + hex: "#285685", + description: "Used as the pressed bottom border colour for floating label inputs or as the engaged border for inputs like checkbox" + }}, +separator : {base:{ + name: "separator.base", + hex: "#2D3238", + description: "Used for the colour of the separator element" + }}, +light : {backgroundBase:{ + name: "light.backgroundBase", + hex: "#FFFFFF", + description: "For use as background colour in light profile components on contrasting surface backgrounds" + },backgroundContrast:{ + name: "light.backgroundContrast", + hex: "#515357", + description: "For use as a contrasting background colour in light profile components, to match shade of surface background" + },backgroundHover:{ + name: "light.backgroundHover", + hex: "#E8E9EA", + description: "For use as background hover colour in light profile components on contrasting surface backgrounds" + },backgroundActive:{ + name: "light.backgroundActive", + hex: "#E8E9EA", + description: "For use as background active colour in light profile components on contrasting surface backgrounds" + },textBase:{ + name: "light.textBase", + hex: "#2D3238", + description: "Used as the content colour (text, icons) for light profile components, to match shade of constrasting surface background" + },linkMutedBase:{ + name: "light.linkMutedBase", + hex: "#E8E9EA", + description: "Used as link colour for light profile components on contrasting surface backgrounds" + },linkMutedHover:{ + name: "light.linkMutedHover", + hex: "#FFFFFF", + description: "Used for link hover colour for light profile components on contrasting surface backgrounds" + }}, +shadow : {base:{ + name: "shadow.base", + hex: "#000000", + description: "For use only with box shadow tokens" + }}, +accent : {forestTextBase:{ + name: "accent.forestTextBase", + hex: "#86D6B9", + + },forestBackgroundMuted:{ + name: "accent.forestBackgroundMuted", + hex: "#0F3326", + + },forestBackgroundMutedHover:{ + name: "accent.forestBackgroundMutedHover", + hex: "#13402F", + + },forestBackgroundMutedActive:{ + name: "accent.forestBackgroundMutedActive", + hex: "#256E53", + + },sandTextBase:{ + name: "accent.sandTextBase", + hex: "#D6BA87", + + },sandBackgroundMuted:{ + name: "accent.sandBackgroundMuted", + hex: "#33260F", + + },sandBackgroundMutedHover:{ + name: "accent.sandBackgroundMutedHover", + hex: "#402F13", + + },sandBackgroundMutedActive:{ + name: "accent.sandBackgroundMutedActive", + hex: "#6E5225", + + }},}; \ No newline at end of file diff --git a/dist/documentation/themes/emerson.d.ts b/dist/documentation/themes/emerson.d.ts new file mode 100644 index 00000000..3e631f50 --- /dev/null +++ b/dist/documentation/themes/emerson.d.ts @@ -0,0 +1,596 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +export const text : {emphasis:{ + name: string, + hex: string, + description: string + },body:{ + name: string, + hex: string, + description: string + },subdued:{ + name: string, + hex: string, + description: string + },onBackground:{ + name: string, + hex: string, + description: string + }}; +export const system : {textLabelEmphasis:{ + name: string, + hex: string, + description: string + },textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + },borderFocused:{ + name: string, + hex: string, + description: string + }}; +export const surface : {level0:{ + name: string, + hex: string, + description: string + },level1:{ + name: string, + hex: string, + description: string + },level2:{ + name: string, + hex: string, + description: string + },interactiveBackground:{ + name: string, + hex: string, + description: string + },interactiveHover:{ + name: string, + hex: string, + description: string + },interactiveActive:{ + name: string, + hex: string, + description: string + },overlayDark:{ + name: string, + hex: string, + description: string + },overlayTheme:{ + name: string, + hex: string, + description: string + },overlayBackdrop:{ + name: string, + hex: string, + description: string + }}; +export const primary : {textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const success : {textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const info : {textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const warning : {textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const danger : {textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const highlight : {textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const disabled : {text:{ + name: string, + hex: string, + description: string + },background:{ + name: string, + hex: string, + description: string + },nakedBackground:{ + name: string, + hex: string, + description: string + },border:{ + name: string, + hex: string, + description: string + },inputBackground:{ + name: string, + hex: string, + description: string + },inputLabelText:{ + name: string, + hex: string, + description: string + }}; +export const input : {backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundInformation:{ + name: string, + hex: string, + description: string + },textBase:{ + name: string, + hex: string, + description: string + },textInformation:{ + name: string, + hex: string, + description: string + },textInformationError:{ + name: string, + hex: string, + description: string + },textLabel:{ + name: string, + hex: string, + description: string + },textFloatingLabel:{ + name: string, + hex: string, + description: string + },textFloatingLabelError:{ + name: string, + hex: string, + description: string + },textPlaceholder:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderError:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderEmphasized:{ + name: string, + hex: string, + description: string + },borderEmphasizedHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const separator : {base:{ + name: string, + hex: string, + description: string + }}; +export const light : {backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundContrast:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },textBase:{ + name: string, + hex: string, + description: string + },linkMutedBase:{ + name: string, + hex: string, + description: string + },linkMutedHover:{ + name: string, + hex: string, + description: string + }}; +export const shadow : {base:{ + name: string, + hex: string, + description: string + }}; +export const accent : {forestTextBase:{ + name: string, + hex: string, + + },forestBackgroundMuted:{ + name: string, + hex: string, + + },forestBackgroundMutedHover:{ + name: string, + hex: string, + + },forestBackgroundMutedActive:{ + name: string, + hex: string, + + },sandTextBase:{ + name: string, + hex: string, + + },sandBackgroundMuted:{ + name: string, + hex: string, + + },sandBackgroundMutedHover:{ + name: string, + hex: string, + + },sandBackgroundMutedActive:{ + name: string, + hex: string, + + }}; \ No newline at end of file diff --git a/dist/documentation/themes/emerson.js b/dist/documentation/themes/emerson.js new file mode 100644 index 00000000..1bc26f4a --- /dev/null +++ b/dist/documentation/themes/emerson.js @@ -0,0 +1,596 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +module.exports = {text : {emphasis:{ + name: "text.emphasis", + hex: "#36485C", + description: "Used for any text content and icons used with text that needs emphasizing" + },body:{ + name: "text.body", + hex: "#475A70", + description: "Used for default text content and icons used with text" + },subdued:{ + name: "text.subdued", + hex: "#596D84", + description: "Used for any text content and icons used with text that requires less prominence" + },onBackground:{ + name: "text.onBackground", + hex: "#FFFFFF", + description: "For use on darker or colour profile backgrounds that require highly contrasted text" + }}, +system : {textLabelEmphasis:{ + name: "system.textLabelEmphasis", + hex: "#2E3A47", + description: "Used for any text content and icons used with text that needs emphasizing" + },textBase:{ + name: "system.textBase", + hex: "#475A70", + description: "Used as the text or fill colour for interactive and static system components such as links, text, and icons" + },textHover:{ + name: "system.textHover", + hex: "#36485C", + description: "Used as the hovered text or fill colour for interactive system components such as links and text buttons" + },textActive:{ + name: "system.textActive", + hex: "#2E3A47", + description: "Used as the pressed text or fill colour for interactive system components such as links and text buttons" + },backgroundBase:{ + name: "system.backgroundBase", + hex: "#FFFFFF", + description: "Used as the background for system components" + },backgroundMuted:{ + name: "system.backgroundMuted", + hex: "#F5F7FA", + description: "Used as the muted background for system components" + },backgroundMutedHover:{ + name: "system.backgroundMutedHover", + hex: "#E6EDF5", + description: "Used as the hovered muted background for system components" + },backgroundMutedActive:{ + name: "system.backgroundMutedActive", + hex: "#C8D3E0", + description: "Used as the pressed muted background for system components" + },backgroundBox:{ + name: "system.backgroundBox", + hex: "#FCFEFF", + description: "Used as a background colour for a system container like Box or Message" + },borderBase:{ + name: "system.borderBase", + hex: "#C8D3E0", + description: "Used for the border colour for system components" + },borderHover:{ + name: "system.borderHover", + hex: "#596D84", + description: "Used for the hovered border colour for system components" + },borderActive:{ + name: "system.borderActive", + hex: "#475A70", + description: "Used for the pressed border colour for system components" + },borderFocused:{ + name: "system.borderFocused", + hex: "#3971A8", + description: "Used for the focused border colour for system components" + }}, +surface : {level0:{ + name: "surface.level0", + hex: "#FFFFFF", + description: "Used for setting the lowest most level, mainly applied as a background color to the HTML body. Should always be underneath levels 1 and 2" + },level1:{ + name: "surface.level1", + hex: "#FFFFFF", + description: "Used commonly with Boxes and containers that are directly on surface level 0. Also can be used as an alternative HTML body background color." + },level2:{ + name: "surface.level2", + hex: "#F5F7FA", + description: "Used for elements that are contained within Boxes or other wrappers that are surface level 1." + },interactiveBackground:{ + name: "surface.interactiveBackground", + hex: "#FFFFFF", + description: "Used for elements where the entire surface is interactable. For example Accordions, ActionBlock, and DropdownItems" + },interactiveHover:{ + name: "surface.interactiveHover", + hex: "#F5F7FA", + description: "Hover state for elements where the entire surface is interactable. For example Accordions, ActionBlock, and DropdownItems" + },interactiveActive:{ + name: "surface.interactiveActive", + hex: "#E6EDF5", + description: "Active/Pressed state for elements where the entire surface is interactable. For example Accordions, ActionBlock, and DropdownItems" + },overlayDark:{ + name: "surface.overlayDark", + hex: "#2E3A47", + description: "Used for elements that are absolutely positioned to overlay content on the page. Is always a dark background regardless of theme. Ex: Things like Toasts and Tooltips" + },overlayTheme:{ + name: "surface.overlayTheme", + hex: "#FFFFFF", + description: "Used for elements that are absolutely positioned to overlay content on the page. Matches the base color of the theme. Ex: Snackbar" + },overlayBackdrop:{ + name: "surface.overlayBackdrop", + hex: "#36485C", + description: "Used to overlay & de-emphasize the page to draw focus to certain areas. Ex: Used with Modals, Drawers" + }}, +primary : {textBase:{ + name: "primary.textBase", + hex: "#FFFFFF", + description: "Used as the text or fill colour for interactive and static primary components such as links, text, and icons" + },textHover:{ + name: "primary.textHover", + hex: "#FFFFFF", + description: "Used as the hovered text or fill colour for interactive primary components such as links and text buttons" + },textActive:{ + name: "primary.textActive", + hex: "#FFFFFF", + description: "Used as the pressed text or fill colour for interactive primary components such as links and text buttons" + },backgroundBase:{ + name: "primary.backgroundBase", + hex: "#36485C", + description: "Used as the background for primary components such as plain buttons. Paired with text.onBackground for contrast" + },backgroundHover:{ + name: "primary.backgroundHover", + hex: "#2E3A47", + description: "Used as the hovered background for primary components such as plain buttons" + },backgroundActive:{ + name: "primary.backgroundActive", + hex: "#212933", + description: "Used as the hovered background for primary components such as plain buttons" + },backgroundMuted:{ + name: "primary.backgroundMuted", + hex: "#F5F7FA", + description: "Used as the muted background for primary components such as pills and text buttons. Paired with primary.textBase for a subtler contrast" + },backgroundMutedHover:{ + name: "primary.backgroundMutedHover", + hex: "#E6EDF5", + description: "Used as the hovered muted background for primary components such as pills and text buttons. Paired with primary.textBase for a subtler contrast" + },backgroundMutedActive:{ + name: "primary.backgroundMutedActive", + hex: "#C8D3E0", + description: "Used as the pressed muted background for primary components such as pills and text buttons. Paired with primary.textBase for a subtler contrast" + },backgroundBox:{ + name: "primary.backgroundBox", + hex: "#FCFEFF", + description: "Used as a very light background for primary components such as Message and Box. Used for containers with content blocks" + },borderBase:{ + name: "primary.borderBase", + hex: "#C8D3E0", + description: "Used for the border colour for primary components such as buttons and Message" + },borderHover:{ + name: "primary.borderHover", + hex: "#596D84", + description: "Used for the hovered border colour for primary components such as buttons" + },borderActive:{ + name: "primary.borderActive", + hex: "#2E3A47", + description: "Used for the pressed border colour for primary components such as buttons" + }}, +success : {textBase:{ + name: "success.textBase", + hex: "#307553", + description: "Used as the text or fill colour for successful intention versions of components such as message, pill, or box" + },textHover:{ + name: "success.textHover", + hex: "#275E43", + description: "Used as the hovered text or fill colour for successful intention versions of components such as message, pill, or box" + },textActive:{ + name: "success.textActive", + hex: "#244C38", + description: "Used as the pressed text or fill colour for successful intention versions of components such as message, pill, or box" + },backgroundBase:{ + name: "success.backgroundBase", + hex: "#307553", + description: "Description to come." + },backgroundHover:{ + name: "success.backgroundHover", + hex: "#275E43", + description: "Description to come." + },backgroundActive:{ + name: "success.backgroundActive", + hex: "#244C38", + description: "Description to come." + },backgroundMuted:{ + name: "success.backgroundMuted", + hex: "#EBF2EF", + description: "Used as the muted background for successful intention versions of components such as message, pill, or box. Paired with successful.textBase for a subtler contrast" + },backgroundMutedHover:{ + name: "success.backgroundMutedHover", + hex: "#D1E0D9", + description: "Used as the hovered muted background for successful intention versions of components such as message, pill, or box. Paired with successful.textBase for a subtler contrast" + },backgroundMutedActive:{ + name: "success.backgroundMutedActive", + hex: "#B6CFC2", + description: "Used as the pressed muted background for successful intention versions of components such as message, pill, or box. Paired with successful.textBase for a subtler contrast" + },backgroundBox:{ + name: "success.backgroundBox", + hex: "#FAFFFC", + description: "Used as a very light background for successful intention versions of components such as message, pill, or box. Used for containers with content blocks" + },borderBase:{ + name: "success.borderBase", + hex: "#307553", + description: "Used for the border colour for successful intention versions of components such as buttons and Message" + },borderHover:{ + name: "success.borderHover", + hex: "#275E43", + description: "Used for the hovered border colour for successful components such as buttons" + },borderActive:{ + name: "success.borderActive", + hex: "#244C38", + description: "Used for the pressed border colour for successful components such as buttons" + }}, +info : {textBase:{ + name: "info.textBase", + hex: "#3971A8", + description: "Used as the text or fill colour for interactive and static informational components such as links, text, and icons" + },textHover:{ + name: "info.textHover", + hex: "#21588F", + description: "Used as the hovered colour for interactive informational components such as links and text buttons" + },textActive:{ + name: "info.textActive", + hex: "#194673", + description: "Used as the pressed colour for interactive informational components such as links and text buttons" + },backgroundBase:{ + name: "info.backgroundBase", + hex: "#3971A8", + description: "Used as the background for informational components such as plain buttons. Paired with text.onBackground for contrast" + },backgroundHover:{ + name: "info.backgroundHover", + hex: "#21588F", + description: "Used as the hovered background for informational components such as plain buttons" + },backgroundActive:{ + name: "info.backgroundActive", + hex: "#194673", + description: "Used as the pressed background for informational components such as plain buttons" + },backgroundMuted:{ + name: "info.backgroundMuted", + hex: "#E6F1FC", + description: "Used as the muted background for informational components such as pills and text buttons. Paired with info.textBase for a subtler contrast" + },backgroundMutedHover:{ + name: "info.backgroundMutedHover", + hex: "#C0D8F0", + description: "Used as the hovered muted background for informational components such as pills and text buttons. Paired with info.textBase for a subtler contrast" + },backgroundMutedActive:{ + name: "info.backgroundMutedActive", + hex: "#88B1D9", + description: "Used as the pressed muted background for informational components such as pills and text buttons. Paired with info.textBase for a subtler contrast" + },backgroundBox:{ + name: "info.backgroundBox", + hex: "#F5FAFF", + description: "Used as a very light background for informational components such as Message and Box. Used for containers with content blocks" + },borderBase:{ + name: "info.borderBase", + hex: "#3971A8", + description: "Used for the border colour for informational components such as buttons and Message" + },borderHover:{ + name: "info.borderHover", + hex: "#21588F", + description: "Used for the hovered border colour for informational components such as buttons" + },borderActive:{ + name: "info.borderActive", + hex: "#194673", + description: "Used for the pressed border colour for informational components such as buttons" + }}, +warning : {textBase:{ + name: "warning.textBase", + hex: "#B4631D", + description: "Used as the text or fill colour for interactive and static warning components such as links, text, and icons" + },textHover:{ + name: "warning.textHover", + hex: "#8E4D14", + description: "Used as the hovered text or fill colour for interactive and static warning components such as links and text buttons" + },textActive:{ + name: "warning.textActive", + hex: "#784213", + description: "Used as the pressed text or fill colour for interactive and static warning components such as links and text buttons" + },backgroundBase:{ + name: "warning.backgroundBase", + hex: "#B4631D", + description: "Used as the background for warning components such as plain buttons. Paired with text.onBackground for contrast" + },backgroundHover:{ + name: "warning.backgroundHover", + hex: "#8E4D14", + description: "Used as the hovered background for warning components such as plain buttons" + },backgroundActive:{ + name: "warning.backgroundActive", + hex: "#784213", + description: "Used as the pressed background for warning components such as plain buttons" + },backgroundMuted:{ + name: "warning.backgroundMuted", + hex: "#FFF3E8", + description: "Used as the muted background for warning components such as pills and text buttons. Paired with warning.textBase for a subtler contrast" + },backgroundMutedHover:{ + name: "warning.backgroundMutedHover", + hex: "#F3D8C0", + description: "Used as the hovered muted background for warning components such as pills and text buttons. Paired with warning.textBase for a subtler contrast" + },backgroundMutedActive:{ + name: "warning.backgroundMutedActive", + hex: "#E7B88F", + description: "Used as the pressed muted background for warning components such as pills and text buttons. Paired with warning.textBase for a subtler contrast" + },backgroundBox:{ + name: "warning.backgroundBox", + hex: "#FFFAF5", + description: "Used as a very light background for warning components such as Message and Box. Used for containers with content blocks" + },borderBase:{ + name: "warning.borderBase", + hex: "#B4631D", + description: "Used for the border colour for warning components such as buttons and Message" + },borderHover:{ + name: "warning.borderHover", + hex: "#8E4D14", + description: "Used for the hovered border colour for warning components" + },borderActive:{ + name: "warning.borderActive", + hex: "#784213", + description: "Used for the pressed border colour for warning components such as buttons" + }}, +danger : {textBase:{ + name: "danger.textBase", + hex: "#AF2645", + description: "Used as the text or fill colour for interactive and static danger components such as links, text, and icons" + },textHover:{ + name: "danger.textHover", + hex: "#980B29", + description: "Used as the hovered colour for interactive danger components such as links and text buttons" + },textActive:{ + name: "danger.textActive", + hex: "#800D25", + description: "Used as the pressed colour for interactive danger components such as links and text buttons" + },backgroundBase:{ + name: "danger.backgroundBase", + hex: "#AF2645", + description: "Used as the background for danger components such as plain buttons. Paired with text.onBackground for contrast" + },backgroundHover:{ + name: "danger.backgroundHover", + hex: "#980B29", + description: "Used as the hovered background for danger components such as plain buttons" + },backgroundActive:{ + name: "danger.backgroundActive", + hex: "#800D25", + description: "Used as the pressed background for danger components such as plain buttons" + },backgroundMuted:{ + name: "danger.backgroundMuted", + hex: "#FEEEF2", + description: "Used as the muted background for danger components such as pills and text buttons. Paired with danger.textBase for a subtler contrast" + },backgroundMutedHover:{ + name: "danger.backgroundMutedHover", + hex: "#F0C4CD", + description: "Used as the hovered muted background for danger components such as pills and text buttons. Paired with danger.textBase for a subtler contrast" + },backgroundMutedActive:{ + name: "danger.backgroundMutedActive", + hex: "#E296A6", + description: "Used as the pressed muted background for danger components such as pills and text buttons. Paired with danger.textBase for a subtler contrast" + },backgroundBox:{ + name: "danger.backgroundBox", + hex: "#FFF7F9", + description: "Used as a very light background for warning components such as Message and Box. Used for containers with content blocks" + },borderBase:{ + name: "danger.borderBase", + hex: "#AF2645", + description: "Used for the border colour for danger components such as buttons and Message" + },borderHover:{ + name: "danger.borderHover", + hex: "#980B29", + description: "Used for the hovered border colour for danger components such as buttons" + },borderActive:{ + name: "danger.borderActive", + hex: "#800D25", + description: "Used for the pressed border colour for danger components such as buttons" + }}, +highlight : {textBase:{ + name: "highlight.textBase", + hex: "#533E7D", + description: "Used as the text or fill colour for interactive and static highlight components such as links, text, and icons" + },textHover:{ + name: "highlight.textHover", + hex: "#3B2566", + description: "Used as the hovered text or fill colour for interactive and static highlight components such as links and text buttons" + },textActive:{ + name: "highlight.textActive", + hex: "#2A174F", + description: "Used as the pressed text or fill colour for interactive and static highlight components such as links and text buttons" + },backgroundBase:{ + name: "highlight.backgroundBase", + hex: "#533E7D", + description: "Used as the background for highlight components such as plain buttons. Paired with text.onBackground for contrast" + },backgroundHover:{ + name: "highlight.backgroundHover", + hex: "#3B2566", + description: "Used as the hovered background for highlight components such as plain buttons" + },backgroundActive:{ + name: "highlight.backgroundActive", + hex: "#2A174F", + description: "Used as the pressed background for highlight components such as plain buttons" + },backgroundMuted:{ + name: "highlight.backgroundMuted", + hex: "#F2ECFE", + description: "Used as the muted background for highlight components such as pills and text buttons. Paired with highlight.textBase for a subtler contrast" + },backgroundMutedHover:{ + name: "highlight.backgroundMutedHover", + hex: "#D7CEE9", + description: "Used as the hovered muted background for highlight components such as pills and text buttons. Paired with highlight.textBase for a subtler contrast" + },backgroundMutedActive:{ + name: "highlight.backgroundMutedActive", + hex: "#B9ABD5", + description: "Used as the pressed muted background for highlight components such as pills and text buttons. Paired with highlight.textBase for a subtler contrast" + },backgroundBox:{ + name: "highlight.backgroundBox", + hex: "#FCFAFF", + description: "Used as a very light background for highlight components such as Message and Box. Used for containers with content blocks" + },borderBase:{ + name: "highlight.borderBase", + hex: "#533E7D", + description: "Used for the border colour for highlight components such as buttons and Message" + },borderHover:{ + name: "highlight.borderHover", + hex: "#3B2566", + description: "Used for the hovered border colour for highlight components" + },borderActive:{ + name: "highlight.borderActive", + hex: "#2A174F", + description: "Used for the pressed border colour for highlight components such as buttons and Message" + }}, +disabled : {text:{ + name: "disabled.text", + hex: "#596D84", + description: "For use in disabled content like text and icons" + },background:{ + name: "disabled.background", + hex: "#F5F7FA", + description: "Used as the background colour for disabled components" + },nakedBackground:{ + name: "disabled.nakedBackground", + hex: "transparent", + description: "Used for the background in disabled components with little to no styling" + },border:{ + name: "disabled.border", + hex: "#C8D3E0", + description: "Used as the border for disabled components" + },inputBackground:{ + name: "disabled.inputBackground", + hex: "#E6EDF5", + description: "For use in disabled inputs as the background colour" + },inputLabelText:{ + name: "disabled.inputLabelText", + hex: "#596D84", + description: "Used as the label colour for disabled inputs" + }}, +input : {backgroundBase:{ + name: "input.backgroundBase", + hex: "#F5F7FA", + description: "Used as the default background colour for HTML inputs" + },backgroundHover:{ + name: "input.backgroundHover", + hex: "#E6EDF5", + description: "Used as the hovered background colour for HTML inputs" + },backgroundInformation:{ + name: "input.backgroundInformation", + hex: "#FFFFFF", + description: "Used as the default background colour for the text description below the input" + },textBase:{ + name: "input.textBase", + hex: "#475A70", + description: "Used for the default filled text colour for HTML inputs" + },textInformation:{ + name: "input.textInformation", + hex: "#475A70", + description: "Used as the text content colour for the text description below the input" + },textInformationError:{ + name: "input.textInformationError", + hex: "#AF2645", + description: "Used as the text content colour for the text description below the input when there are errors" + },textLabel:{ + name: "input.textLabel", + hex: "#475A70", + description: "Used as the default static label colour in HTML inputs which appears as a placeholder in the static state" + },textFloatingLabel:{ + name: "input.textFloatingLabel", + hex: "#3971A8", + description: "Used as the floated label colour when the HTML input has focus" + },textFloatingLabelError:{ + name: "input.textFloatingLabelError", + hex: "#AF2645", + description: "Used as the static and floated label colour when the input is in an error state" + },textPlaceholder:{ + name: "input.textPlaceholder", + hex: "#596D84", + description: "Used as the default placeholder text colour for basic and search inputs" + },textActive:{ + name: "input.textActive", + hex: "#2E3A47", + description: "Used as the label colour for labels that don't float when focused, like the select component" + },borderBase:{ + name: "input.borderBase", + hex: "#E6EDF5", + description: "Used as the default border colour" + },borderError:{ + name: "input.borderError", + hex: "#AF2645", + description: "Used for the border colour when the input is in an error state" + },borderHover:{ + name: "input.borderHover", + hex: "#C8D3E0", + description: "Used as the hovered border colour" + },borderEmphasized:{ + name: "input.borderEmphasized", + hex: "#596D84", + description: "Used as the default bottom border colour for floating label inputs or as the default border for inputs like checkbox" + },borderEmphasizedHover:{ + name: "input.borderEmphasizedHover", + hex: "#475A70", + description: "Used as the hovered bottom border colour for floating label inputs or as the hovered border for inputs like checkbox" + },borderActive:{ + name: "input.borderActive", + hex: "#3971A8", + description: "Used as the pressed bottom border colour for floating label inputs or as the engaged border for inputs like checkbox" + }}, +separator : {base:{ + name: "separator.base", + hex: "#E6EDF5", + description: "Used for the colour of the separator element" + }}, +light : {backgroundBase:{ + name: "light.backgroundBase", + hex: "#FFFFFF", + description: "For use as background colour in light profile components on contrasting surface backgrounds" + },backgroundContrast:{ + name: "light.backgroundContrast", + hex: "#475A70", + description: "For use as a contrasting background colour in light profile components, to match shade of surface background" + },backgroundHover:{ + name: "light.backgroundHover", + hex: "#F5F7FA", + description: "For use as background hover colour in light profile components on contrasting surface backgrounds" + },backgroundActive:{ + name: "light.backgroundActive", + hex: "#E6EDF5", + description: "For use as background active colour in light profile components on contrasting surface backgrounds" + },textBase:{ + name: "light.textBase", + hex: "#2E3A47", + description: "Used as the content colour (text, icons) for light profile components, to match shade of constrasting surface background" + },linkMutedBase:{ + name: "light.linkMutedBase", + hex: "#F5F7FA", + description: "Used as link colour for light profile components on contrasting surface backgrounds" + },linkMutedHover:{ + name: "light.linkMutedHover", + hex: "#FFFFFF", + description: "Used for link hover colour for light profile components on contrasting surface backgrounds" + }}, +shadow : {base:{ + name: "shadow.base", + hex: "#000000", + description: "For use only with box shadow tokens" + }}, +accent : {forestTextBase:{ + name: "accent.forestTextBase", + hex: "#275E43", + + },forestBackgroundMuted:{ + name: "accent.forestBackgroundMuted", + hex: "#EBF2EF", + + },forestBackgroundMutedHover:{ + name: "accent.forestBackgroundMutedHover", + hex: "#D1E0D9", + + },forestBackgroundMutedActive:{ + name: "accent.forestBackgroundMutedActive", + hex: "#B6CFC2", + + },sandTextBase:{ + name: "accent.sandTextBase", + hex: "#5E4D27", + + },sandBackgroundMuted:{ + name: "accent.sandBackgroundMuted", + hex: "#F6F1E5", + + },sandBackgroundMutedHover:{ + name: "accent.sandBackgroundMutedHover", + hex: "#E4D9C2", + + },sandBackgroundMutedActive:{ + name: "accent.sandBackgroundMutedActive", + hex: "#DACCAA", + + }},}; \ No newline at end of file diff --git a/dist/documentation/themes/light.d.ts b/dist/documentation/themes/light.d.ts new file mode 100644 index 00000000..3e631f50 --- /dev/null +++ b/dist/documentation/themes/light.d.ts @@ -0,0 +1,596 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +export const text : {emphasis:{ + name: string, + hex: string, + description: string + },body:{ + name: string, + hex: string, + description: string + },subdued:{ + name: string, + hex: string, + description: string + },onBackground:{ + name: string, + hex: string, + description: string + }}; +export const system : {textLabelEmphasis:{ + name: string, + hex: string, + description: string + },textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + },borderFocused:{ + name: string, + hex: string, + description: string + }}; +export const surface : {level0:{ + name: string, + hex: string, + description: string + },level1:{ + name: string, + hex: string, + description: string + },level2:{ + name: string, + hex: string, + description: string + },interactiveBackground:{ + name: string, + hex: string, + description: string + },interactiveHover:{ + name: string, + hex: string, + description: string + },interactiveActive:{ + name: string, + hex: string, + description: string + },overlayDark:{ + name: string, + hex: string, + description: string + },overlayTheme:{ + name: string, + hex: string, + description: string + },overlayBackdrop:{ + name: string, + hex: string, + description: string + }}; +export const primary : {textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const success : {textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const info : {textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const warning : {textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const danger : {textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const highlight : {textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const disabled : {text:{ + name: string, + hex: string, + description: string + },background:{ + name: string, + hex: string, + description: string + },nakedBackground:{ + name: string, + hex: string, + description: string + },border:{ + name: string, + hex: string, + description: string + },inputBackground:{ + name: string, + hex: string, + description: string + },inputLabelText:{ + name: string, + hex: string, + description: string + }}; +export const input : {backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundInformation:{ + name: string, + hex: string, + description: string + },textBase:{ + name: string, + hex: string, + description: string + },textInformation:{ + name: string, + hex: string, + description: string + },textInformationError:{ + name: string, + hex: string, + description: string + },textLabel:{ + name: string, + hex: string, + description: string + },textFloatingLabel:{ + name: string, + hex: string, + description: string + },textFloatingLabelError:{ + name: string, + hex: string, + description: string + },textPlaceholder:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderError:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderEmphasized:{ + name: string, + hex: string, + description: string + },borderEmphasizedHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const separator : {base:{ + name: string, + hex: string, + description: string + }}; +export const light : {backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundContrast:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },textBase:{ + name: string, + hex: string, + description: string + },linkMutedBase:{ + name: string, + hex: string, + description: string + },linkMutedHover:{ + name: string, + hex: string, + description: string + }}; +export const shadow : {base:{ + name: string, + hex: string, + description: string + }}; +export const accent : {forestTextBase:{ + name: string, + hex: string, + + },forestBackgroundMuted:{ + name: string, + hex: string, + + },forestBackgroundMutedHover:{ + name: string, + hex: string, + + },forestBackgroundMutedActive:{ + name: string, + hex: string, + + },sandTextBase:{ + name: string, + hex: string, + + },sandBackgroundMuted:{ + name: string, + hex: string, + + },sandBackgroundMutedHover:{ + name: string, + hex: string, + + },sandBackgroundMutedActive:{ + name: string, + hex: string, + + }}; \ No newline at end of file diff --git a/dist/documentation/themes/light.js b/dist/documentation/themes/light.js new file mode 100644 index 00000000..679f3455 --- /dev/null +++ b/dist/documentation/themes/light.js @@ -0,0 +1,596 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +module.exports = {text : {emphasis:{ + name: "text.emphasis", + hex: "#2E3A47", + description: "Used for any text content and icons used with text that needs emphasizing" + },body:{ + name: "text.body", + hex: "#36485C", + description: "Used for default text content and icons used with text" + },subdued:{ + name: "text.subdued", + hex: "#475A70", + description: "Used for any text content and icons used with text that requires less prominence" + },onBackground:{ + name: "text.onBackground", + hex: "#FFFFFF", + description: "For use on darker or colour profile backgrounds that require highly contrasted text" + }}, +system : {textLabelEmphasis:{ + name: "system.textLabelEmphasis", + hex: "#2E3A47", + description: "Used for any text content and icons used with text that needs emphasizing" + },textBase:{ + name: "system.textBase", + hex: "#475A70", + description: "Used as the text or fill colour for interactive and static system components such as links, text, and icons" + },textHover:{ + name: "system.textHover", + hex: "#36485C", + description: "Used as the hovered text or fill colour for interactive system components such as links and text buttons" + },textActive:{ + name: "system.textActive", + hex: "#2E3A47", + description: "Used as the pressed text or fill colour for interactive system components such as links and text buttons" + },backgroundBase:{ + name: "system.backgroundBase", + hex: "#FFFFFF", + description: "Used as the background for system components" + },backgroundMuted:{ + name: "system.backgroundMuted", + hex: "#F5F7FA", + description: "Used as the muted background for system components" + },backgroundMutedHover:{ + name: "system.backgroundMutedHover", + hex: "#E6EDF5", + description: "Used as the hovered muted background for system components" + },backgroundMutedActive:{ + name: "system.backgroundMutedActive", + hex: "#C8D3E0", + description: "Used as the pressed muted background for system components" + },backgroundBox:{ + name: "system.backgroundBox", + hex: "#FCFEFF", + description: "Used as a background colour for a system container like Box or Message" + },borderBase:{ + name: "system.borderBase", + hex: "#C8D3E0", + description: "Used for the border colour for system components" + },borderHover:{ + name: "system.borderHover", + hex: "#596D84", + description: "Used for the hovered border colour for system components" + },borderActive:{ + name: "system.borderActive", + hex: "#475A70", + description: "Used for the pressed border colour for system components" + },borderFocused:{ + name: "system.borderFocused", + hex: "#3971A8", + description: "Used for the focused border colour for system components" + }}, +surface : {level0:{ + name: "surface.level0", + hex: "#FFFFFF", + description: "Used for setting the lowest most level, mainly applied as a background color to the HTML body. Should always be underneath levels 1 and 2" + },level1:{ + name: "surface.level1", + hex: "#FFFFFF", + description: "Used commonly with Boxes and containers that are directly on surface level 0. Also can be used as an alternative HTML body background color." + },level2:{ + name: "surface.level2", + hex: "#F5F7FA", + description: "Used for elements that are contained within Boxes or other wrappers that are surface level 1." + },interactiveBackground:{ + name: "surface.interactiveBackground", + hex: "#FFFFFF", + description: "Used for elements where the entire surface is interactable. For example Accordions, ActionBlock, and DropdownItems" + },interactiveHover:{ + name: "surface.interactiveHover", + hex: "#F5F7FA", + description: "Hover state for elements where the entire surface is interactable. For example Accordions, ActionBlock, and DropdownItems" + },interactiveActive:{ + name: "surface.interactiveActive", + hex: "#E6EDF5", + description: "Active/Pressed state for elements where the entire surface is interactable. For example Accordions, ActionBlock, and DropdownItems" + },overlayDark:{ + name: "surface.overlayDark", + hex: "#2E3A47", + description: "Used for elements that are absolutely positioned to overlay content on the page. Is always a dark background regardless of theme. Ex: Things like Toasts and Tooltips" + },overlayTheme:{ + name: "surface.overlayTheme", + hex: "#FFFFFF", + description: "Used for elements that are absolutely positioned to overlay content on the page. Matches the base color of the theme. Ex: Snackbar" + },overlayBackdrop:{ + name: "surface.overlayBackdrop", + hex: "#36485C", + description: "Used to overlay & de-emphasize the page to draw focus to certain areas. Ex: Used with Modals, Drawers" + }}, +primary : {textBase:{ + name: "primary.textBase", + hex: "#FFFFFF", + description: "Used as the text or fill colour for interactive and static primary components such as links, text, and icons" + },textHover:{ + name: "primary.textHover", + hex: "#FFFFFF", + description: "Used as the hovered text or fill colour for interactive primary components such as links and text buttons" + },textActive:{ + name: "primary.textActive", + hex: "#FFFFFF", + description: "Used as the pressed text or fill colour for interactive primary components such as links and text buttons" + },backgroundBase:{ + name: "primary.backgroundBase", + hex: "#36485C", + description: "Used as the background for primary components such as plain buttons. Paired with text.onBackground for contrast" + },backgroundHover:{ + name: "primary.backgroundHover", + hex: "#2E3A47", + description: "Used as the hovered background for primary components such as plain buttons" + },backgroundActive:{ + name: "primary.backgroundActive", + hex: "#212933", + description: "Used as the hovered background for primary components such as plain buttons" + },backgroundMuted:{ + name: "primary.backgroundMuted", + hex: "#F5F7FA", + description: "Used as the muted background for primary components such as pills and text buttons. Paired with primary.textBase for a subtler contrast" + },backgroundMutedHover:{ + name: "primary.backgroundMutedHover", + hex: "#E6EDF5", + description: "Used as the hovered muted background for primary components such as pills and text buttons. Paired with primary.textBase for a subtler contrast" + },backgroundMutedActive:{ + name: "primary.backgroundMutedActive", + hex: "#C8D3E0", + description: "Used as the pressed muted background for primary components such as pills and text buttons. Paired with primary.textBase for a subtler contrast" + },backgroundBox:{ + name: "primary.backgroundBox", + hex: "#FCFEFF", + description: "Used as a very light background for primary components such as Message and Box. Used for containers with content blocks" + },borderBase:{ + name: "primary.borderBase", + hex: "#C8D3E0", + description: "Used for the border colour for primary components" + },borderHover:{ + name: "primary.borderHover", + hex: "#596D84", + description: "Used for the hovered border colour for primary components" + },borderActive:{ + name: "primary.borderActive", + hex: "#2E3A47", + description: "Used for the pressed border colour for primary components" + }}, +success : {textBase:{ + name: "success.textBase", + hex: "#307553", + description: "Used as the text or fill colour for successful intention versions of components such as message, pill, or box" + },textHover:{ + name: "success.textHover", + hex: "#275E43", + description: "Used as the hovered text or fill colour for successful intention versions of components such as message, pill, or box" + },textActive:{ + name: "success.textActive", + hex: "#244C38", + description: "Used as the pressed text or fill colour for successful intention versions of components such as message, pill, or box" + },backgroundBase:{ + name: "success.backgroundBase", + hex: "#307553", + description: "Description to come." + },backgroundHover:{ + name: "success.backgroundHover", + hex: "#275E43", + description: "Description to come." + },backgroundActive:{ + name: "success.backgroundActive", + hex: "#244C38", + description: "Description to come." + },backgroundMuted:{ + name: "success.backgroundMuted", + hex: "#EBF2EF", + description: "Used as the muted background for successful intention versions of components such as message, pill, or box. Paired with successful.textBase for a subtler contrast" + },backgroundMutedHover:{ + name: "success.backgroundMutedHover", + hex: "#D1E0D9", + description: "Used as the hovered muted background for successful intention versions of components such as message, pill, or box. Paired with successful.textBase for a subtler contrast" + },backgroundMutedActive:{ + name: "success.backgroundMutedActive", + hex: "#B6CFC2", + description: "Used as the pressed muted background for successful intention versions of components such as message, pill, or box. Paired with successful.textBase for a subtler contrast" + },backgroundBox:{ + name: "success.backgroundBox", + hex: "#FAFFFC", + description: "Used as a very light background for successful intention versions of components such as message, pill, or box. Used for containers with content blocks" + },borderBase:{ + name: "success.borderBase", + hex: "#307553", + description: "Used for the border colour for successful intention versions of components such as buttons and Message" + },borderHover:{ + name: "success.borderHover", + hex: "#275E43", + description: "Used for the hovered border colour for successful components such as message" + },borderActive:{ + name: "success.borderActive", + hex: "#244C38", + description: "Used for the pressed border colour for successful components such as message" + }}, +info : {textBase:{ + name: "info.textBase", + hex: "#3971A8", + description: "Used as the text or fill colour for interactive and static informational components such as links, text, and icons" + },textHover:{ + name: "info.textHover", + hex: "#21588F", + description: "Used as the hovered colour for interactive informational components such as links and text buttons" + },textActive:{ + name: "info.textActive", + hex: "#194673", + description: "Used as the pressed colour for interactive informational components such as links and text buttons" + },backgroundBase:{ + name: "info.backgroundBase", + hex: "#3971A8", + description: "Used as the background for informational components such as plain buttons. Paired with text.onBackground for contrast" + },backgroundHover:{ + name: "info.backgroundHover", + hex: "#21588F", + description: "Used as the hovered background for informational components such as plain buttons" + },backgroundActive:{ + name: "info.backgroundActive", + hex: "#194673", + description: "Used as the pressed background for informational components such as plain buttons" + },backgroundMuted:{ + name: "info.backgroundMuted", + hex: "#E6F1FC", + description: "Used as the muted background for informational components such as pills and text buttons. Paired with info.textBase for a subtler contrast" + },backgroundMutedHover:{ + name: "info.backgroundMutedHover", + hex: "#C0D8F0", + description: "Used as the hovered muted background for informational components such as pills and text buttons. Paired with info.textBase for a subtler contrast" + },backgroundMutedActive:{ + name: "info.backgroundMutedActive", + hex: "#88B1D9", + description: "Used as the pressed muted background for informational components such as pills and text buttons. Paired with info.textBase for a subtler contrast" + },backgroundBox:{ + name: "info.backgroundBox", + hex: "#F5FAFF", + description: "Used as a very light background for informational components such as Message and Box. Used for containers with content blocks" + },borderBase:{ + name: "info.borderBase", + hex: "#3971A8", + description: "Used for the border colour for informational components such as buttons and Message" + },borderHover:{ + name: "info.borderHover", + hex: "#21588F", + description: "Used for the hovered border colour for informational components such as buttons" + },borderActive:{ + name: "info.borderActive", + hex: "#194673", + description: "Used for the pressed border colour for informational components such as buttons" + }}, +warning : {textBase:{ + name: "warning.textBase", + hex: "#B4631D", + description: "Used as the text or fill colour for interactive and static warning components such as links, text, and icons" + },textHover:{ + name: "warning.textHover", + hex: "#8E4D14", + description: "Used as the hovered text or fill colour for interactive and static warning components such as links and text buttons" + },textActive:{ + name: "warning.textActive", + hex: "#784213", + description: "Used as the pressed text or fill colour for interactive and static warning components such as links and text buttons" + },backgroundBase:{ + name: "warning.backgroundBase", + hex: "#B4631D", + description: "Used as the background for warning components such as plain buttons. Paired with text.onBackground for contrast" + },backgroundHover:{ + name: "warning.backgroundHover", + hex: "#8E4D14", + description: "Used as the hovered background for warning components such as plain buttons" + },backgroundActive:{ + name: "warning.backgroundActive", + hex: "#784213", + description: "Used as the pressed background for warning components such as plain buttons" + },backgroundMuted:{ + name: "warning.backgroundMuted", + hex: "#FFF3E8", + description: "Used as the muted background for warning components such as pills and text buttons. Paired with warning.textBase for a subtler contrast" + },backgroundMutedHover:{ + name: "warning.backgroundMutedHover", + hex: "#F3D8C0", + description: "Used as the hovered muted background for warning components such as pills and text buttons. Paired with warning.textBase for a subtler contrast" + },backgroundMutedActive:{ + name: "warning.backgroundMutedActive", + hex: "#E7B88F", + description: "Used as the pressed muted background for warning components such as pills and text buttons. Paired with warning.textBase for a subtler contrast" + },backgroundBox:{ + name: "warning.backgroundBox", + hex: "#FFFAF5", + description: "Used as a very light background for warning components such as Message and Box. Used for containers with content blocks" + },borderBase:{ + name: "warning.borderBase", + hex: "#B4631D", + description: "Used for the border colour for warning components such as buttons and Message" + },borderHover:{ + name: "warning.borderHover", + hex: "#8E4D14", + description: "Used for the hovered border colour for warning components" + },borderActive:{ + name: "warning.borderActive", + hex: "#784213", + description: "Used for the pressed border colour for warning components such as buttons" + }}, +danger : {textBase:{ + name: "danger.textBase", + hex: "#AF2645", + description: "Used as the text or fill colour for interactive and static danger components such as links, text, and icons" + },textHover:{ + name: "danger.textHover", + hex: "#980B29", + description: "Used as the hovered colour for interactive danger components such as links and text buttons" + },textActive:{ + name: "danger.textActive", + hex: "#800D25", + description: "Used as the pressed colour for interactive danger components such as links and text buttons" + },backgroundBase:{ + name: "danger.backgroundBase", + hex: "#AF2645", + description: "Used as the background for danger components such as plain buttons. Paired with text.onBackground for contrast" + },backgroundHover:{ + name: "danger.backgroundHover", + hex: "#980B29", + description: "Used as the hovered background for danger components such as plain buttons" + },backgroundActive:{ + name: "danger.backgroundActive", + hex: "#800D25", + description: "Used as the pressed background for danger components such as plain buttons" + },backgroundMuted:{ + name: "danger.backgroundMuted", + hex: "#FEEEF2", + description: "Used as the muted background for danger components such as pills and text buttons. Paired with danger.textBase for a subtler contrast" + },backgroundMutedHover:{ + name: "danger.backgroundMutedHover", + hex: "#F0C4CD", + description: "Used as the hovered muted background for danger components such as pills and text buttons. Paired with danger.textBase for a subtler contrast" + },backgroundMutedActive:{ + name: "danger.backgroundMutedActive", + hex: "#E296A6", + description: "Used as the pressed muted background for danger components such as pills and text buttons. Paired with danger.textBase for a subtler contrast" + },backgroundBox:{ + name: "danger.backgroundBox", + hex: "#FFF7F9", + description: "Used as a very light background for warning components such as Message and Box. Used for containers with content blocks" + },borderBase:{ + name: "danger.borderBase", + hex: "#AF2645", + description: "Used for the border colour for danger components such as buttons and Message" + },borderHover:{ + name: "danger.borderHover", + hex: "#980B29", + description: "Used for the hovered border colour for danger components such as buttons" + },borderActive:{ + name: "danger.borderActive", + hex: "#800D25", + description: "Used for the pressed border colour for danger components such as buttons" + }}, +highlight : {textBase:{ + name: "highlight.textBase", + hex: "#533E7D", + description: "Used as the text or fill colour for interactive and static highlight components such as links, text, and icons" + },textHover:{ + name: "highlight.textHover", + hex: "#3B2566", + description: "Used as the hovered text or fill colour for interactive and static highlight components such as links and text buttons" + },textActive:{ + name: "highlight.textActive", + hex: "#2A174F", + description: "Used as the pressed text or fill colour for interactive and static highlight components such as links and text buttons" + },backgroundBase:{ + name: "highlight.backgroundBase", + hex: "#533E7D", + description: "Used as the background for highlight components such as plain buttons. Paired with text.onBackground for contrast" + },backgroundHover:{ + name: "highlight.backgroundHover", + hex: "#3B2566", + description: "Used as the hovered background for highlight components such as plain buttons" + },backgroundActive:{ + name: "highlight.backgroundActive", + hex: "#2A174F", + description: "Used as the pressed background for highlight components such as plain buttons" + },backgroundMuted:{ + name: "highlight.backgroundMuted", + hex: "#F2ECFE", + description: "Used as the muted background for highlight components such as pills and text buttons. Paired with highlight.textBase for a subtler contrast" + },backgroundMutedHover:{ + name: "highlight.backgroundMutedHover", + hex: "#D7CEE9", + description: "Used as the hovered muted background for highlight components such as pills and text buttons. Paired with highlight.textBase for a subtler contrast" + },backgroundMutedActive:{ + name: "highlight.backgroundMutedActive", + hex: "#B9ABD5", + description: "Used as the pressed muted background for highlight components such as pills and text buttons. Paired with highlight.textBase for a subtler contrast" + },backgroundBox:{ + name: "highlight.backgroundBox", + hex: "#FCFAFF", + description: "Used as a very light background for highlight components such as Message and Box. Used for containers with content blocks" + },borderBase:{ + name: "highlight.borderBase", + hex: "#533E7D", + description: "Used for the border colour for highlight components such as buttons and Message" + },borderHover:{ + name: "highlight.borderHover", + hex: "#3B2566", + description: "Used for the hovered border colour for highlight components" + },borderActive:{ + name: "highlight.borderActive", + hex: "#2A174F", + description: "Used for the pressed border colour for highlight components such as buttons and Message" + }}, +disabled : {text:{ + name: "disabled.text", + hex: "#596D84", + description: "For use in disabled content like text and icons" + },background:{ + name: "disabled.background", + hex: "#F5F7FA", + description: "Used as the background colour for disabled components" + },nakedBackground:{ + name: "disabled.nakedBackground", + hex: "transparent", + description: "Used for the background in disabled components with little to no styling" + },border:{ + name: "disabled.border", + hex: "#C8D3E0", + description: "Used as the border for disabled components" + },inputBackground:{ + name: "disabled.inputBackground", + hex: "#E6EDF5", + description: "For use in disabled inputs as the background colour" + },inputLabelText:{ + name: "disabled.inputLabelText", + hex: "#596D84", + description: "Used as the label colour for disabled inputs" + }}, +input : {backgroundBase:{ + name: "input.backgroundBase", + hex: "#F5F7FA", + description: "Used as the default background colour for HTML inputs" + },backgroundHover:{ + name: "input.backgroundHover", + hex: "#E6EDF5", + description: "Used as the hovered background colour for HTML inputs" + },backgroundInformation:{ + name: "input.backgroundInformation", + hex: "#FFFFFF", + description: "Used as the default background colour for the text description below the input" + },textBase:{ + name: "input.textBase", + hex: "#475A70", + description: "Used for the default filled text colour for HTML inputs" + },textInformation:{ + name: "input.textInformation", + hex: "#475A70", + description: "Used as the text content colour for the text description below the input" + },textInformationError:{ + name: "input.textInformationError", + hex: "#AF2645", + description: "Used as the text content colour for the text description below the input when there are errors" + },textLabel:{ + name: "input.textLabel", + hex: "#475A70", + description: "Used as the default static label colour in HTML inputs which appears as a placeholder in the static state" + },textFloatingLabel:{ + name: "input.textFloatingLabel", + hex: "#3971A8", + description: "Used as the floated label colour when the HTML input has focus" + },textFloatingLabelError:{ + name: "input.textFloatingLabelError", + hex: "#AF2645", + description: "Used as the static and floated label colour when the input is in an error state" + },textPlaceholder:{ + name: "input.textPlaceholder", + hex: "#596D84", + description: "Used as the default placeholder text colour for basic and search inputs" + },textActive:{ + name: "input.textActive", + hex: "#2E3A47", + description: "Used as the label colour for labels that don't float when focused, like the select component" + },borderBase:{ + name: "input.borderBase", + hex: "#E6EDF5", + description: "Used as the default border colour" + },borderError:{ + name: "input.borderError", + hex: "#AF2645", + description: "Used for the border colour when the input is in an error state" + },borderHover:{ + name: "input.borderHover", + hex: "#C8D3E0", + description: "Used as the hovered border colour" + },borderEmphasized:{ + name: "input.borderEmphasized", + hex: "#596D84", + description: "Used as the default bottom border colour for floating label inputs or as the default border for inputs like checkbox" + },borderEmphasizedHover:{ + name: "input.borderEmphasizedHover", + hex: "#475A70", + description: "Used as the hovered bottom border colour for floating label inputs or as the hovered border for inputs like checkbox" + },borderActive:{ + name: "input.borderActive", + hex: "#3971A8", + description: "Used as the pressed bottom border colour for floating label inputs or as the engaged border for inputs like checkbox" + }}, +separator : {base:{ + name: "separator.base", + hex: "#E6EDF5", + description: "Used for the colour of the separator element" + }}, +light : {backgroundBase:{ + name: "light.backgroundBase", + hex: "#FFFFFF", + description: "For use as background colour in light profile components on contrasting surface backgrounds" + },backgroundContrast:{ + name: "light.backgroundContrast", + hex: "#475A70", + description: "For use as a contrasting background colour in light profile components, to match shade of surface background" + },backgroundHover:{ + name: "light.backgroundHover", + hex: "#F5F7FA", + description: "For use as background hover colour in light profile components on contrasting surface backgrounds" + },backgroundActive:{ + name: "light.backgroundActive", + hex: "#E6EDF5", + description: "For use as background active colour in light profile components on contrasting surface backgrounds" + },textBase:{ + name: "light.textBase", + hex: "#2E3A47", + description: "Used as the content colour (text, icons) for light profile components, to match shade of constrasting surface background" + },linkMutedBase:{ + name: "light.linkMutedBase", + hex: "#F5F7FA", + description: "Used as link colour for light profile components on contrasting surface backgrounds" + },linkMutedHover:{ + name: "light.linkMutedHover", + hex: "#FFFFFF", + description: "Used for link hover colour for light profile components on contrasting surface backgrounds" + }}, +shadow : {base:{ + name: "shadow.base", + hex: "#36485C", + description: "For use only with box shadow tokens" + }}, +accent : {forestTextBase:{ + name: "accent.forestTextBase", + hex: "#275E43", + + },forestBackgroundMuted:{ + name: "accent.forestBackgroundMuted", + hex: "#EBF2EF", + + },forestBackgroundMutedHover:{ + name: "accent.forestBackgroundMutedHover", + hex: "#D1E0D9", + + },forestBackgroundMutedActive:{ + name: "accent.forestBackgroundMutedActive", + hex: "#B6CFC2", + + },sandTextBase:{ + name: "accent.sandTextBase", + hex: "#5E4D27", + + },sandBackgroundMuted:{ + name: "accent.sandBackgroundMuted", + hex: "#F6F1E5", + + },sandBackgroundMutedHover:{ + name: "accent.sandBackgroundMutedHover", + hex: "#E4D9C2", + + },sandBackgroundMutedActive:{ + name: "accent.sandBackgroundMutedActive", + hex: "#DACCAA", + + }},}; \ No newline at end of file diff --git a/dist/documentation/themes/lightDS3.d.ts b/dist/documentation/themes/lightDS3.d.ts new file mode 100644 index 00000000..3e631f50 --- /dev/null +++ b/dist/documentation/themes/lightDS3.d.ts @@ -0,0 +1,596 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +export const text : {emphasis:{ + name: string, + hex: string, + description: string + },body:{ + name: string, + hex: string, + description: string + },subdued:{ + name: string, + hex: string, + description: string + },onBackground:{ + name: string, + hex: string, + description: string + }}; +export const system : {textLabelEmphasis:{ + name: string, + hex: string, + description: string + },textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + },borderFocused:{ + name: string, + hex: string, + description: string + }}; +export const surface : {level0:{ + name: string, + hex: string, + description: string + },level1:{ + name: string, + hex: string, + description: string + },level2:{ + name: string, + hex: string, + description: string + },interactiveBackground:{ + name: string, + hex: string, + description: string + },interactiveHover:{ + name: string, + hex: string, + description: string + },interactiveActive:{ + name: string, + hex: string, + description: string + },overlayDark:{ + name: string, + hex: string, + description: string + },overlayTheme:{ + name: string, + hex: string, + description: string + },overlayBackdrop:{ + name: string, + hex: string, + description: string + }}; +export const primary : {textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const success : {textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const info : {textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const warning : {textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const danger : {textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const highlight : {textBase:{ + name: string, + hex: string, + description: string + },textHover:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },backgroundMuted:{ + name: string, + hex: string, + description: string + },backgroundMutedHover:{ + name: string, + hex: string, + description: string + },backgroundMutedActive:{ + name: string, + hex: string, + description: string + },backgroundBox:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const disabled : {text:{ + name: string, + hex: string, + description: string + },background:{ + name: string, + hex: string, + description: string + },nakedBackground:{ + name: string, + hex: string, + description: string + },border:{ + name: string, + hex: string, + description: string + },inputBackground:{ + name: string, + hex: string, + description: string + },inputLabelText:{ + name: string, + hex: string, + description: string + }}; +export const input : {backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundInformation:{ + name: string, + hex: string, + description: string + },textBase:{ + name: string, + hex: string, + description: string + },textInformation:{ + name: string, + hex: string, + description: string + },textInformationError:{ + name: string, + hex: string, + description: string + },textLabel:{ + name: string, + hex: string, + description: string + },textFloatingLabel:{ + name: string, + hex: string, + description: string + },textFloatingLabelError:{ + name: string, + hex: string, + description: string + },textPlaceholder:{ + name: string, + hex: string, + description: string + },textActive:{ + name: string, + hex: string, + description: string + },borderBase:{ + name: string, + hex: string, + description: string + },borderError:{ + name: string, + hex: string, + description: string + },borderHover:{ + name: string, + hex: string, + description: string + },borderEmphasized:{ + name: string, + hex: string, + description: string + },borderEmphasizedHover:{ + name: string, + hex: string, + description: string + },borderActive:{ + name: string, + hex: string, + description: string + }}; +export const separator : {base:{ + name: string, + hex: string, + description: string + }}; +export const light : {backgroundBase:{ + name: string, + hex: string, + description: string + },backgroundContrast:{ + name: string, + hex: string, + description: string + },backgroundHover:{ + name: string, + hex: string, + description: string + },backgroundActive:{ + name: string, + hex: string, + description: string + },textBase:{ + name: string, + hex: string, + description: string + },linkMutedBase:{ + name: string, + hex: string, + description: string + },linkMutedHover:{ + name: string, + hex: string, + description: string + }}; +export const shadow : {base:{ + name: string, + hex: string, + description: string + }}; +export const accent : {forestTextBase:{ + name: string, + hex: string, + + },forestBackgroundMuted:{ + name: string, + hex: string, + + },forestBackgroundMutedHover:{ + name: string, + hex: string, + + },forestBackgroundMutedActive:{ + name: string, + hex: string, + + },sandTextBase:{ + name: string, + hex: string, + + },sandBackgroundMuted:{ + name: string, + hex: string, + + },sandBackgroundMutedHover:{ + name: string, + hex: string, + + },sandBackgroundMutedActive:{ + name: string, + hex: string, + + }}; \ No newline at end of file diff --git a/dist/documentation/themes/lightDS3.js b/dist/documentation/themes/lightDS3.js new file mode 100644 index 00000000..9bbfb739 --- /dev/null +++ b/dist/documentation/themes/lightDS3.js @@ -0,0 +1,596 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +module.exports = {text : {emphasis:{ + name: "text.emphasis", + hex: "#36485C", + description: "Used for any text content and icons used with text that needs emphasizing" + },body:{ + name: "text.body", + hex: "#475A70", + description: "Used for default text content and icons used with text" + },subdued:{ + name: "text.subdued", + hex: "#596D84", + description: "Used for any text content and icons used with text that requires less prominence" + },onBackground:{ + name: "text.onBackground", + hex: "#FFFFFF", + description: "For use on darker or colour profile backgrounds that require highly contrasted text" + }}, +system : {textLabelEmphasis:{ + name: "system.textLabelEmphasis", + hex: "#2E3A47", + description: "Used for any text content and icons used with text that needs emphasizing" + },textBase:{ + name: "system.textBase", + hex: "#475A70", + description: "Used as the text or fill colour for interactive and static system components such as links, text, and icons" + },textHover:{ + name: "system.textHover", + hex: "#36485C", + description: "Used as the hovered text or fill colour for interactive system components such as links and text buttons" + },textActive:{ + name: "system.textActive", + hex: "#2E3A47", + description: "Used as the pressed text or fill colour for interactive system components such as links and text buttons" + },backgroundBase:{ + name: "system.backgroundBase", + hex: "#FFFFFF", + description: "Used as the background for system components" + },backgroundMuted:{ + name: "system.backgroundMuted", + hex: "#F5F7FA", + description: "Used as the muted background for system components" + },backgroundMutedHover:{ + name: "system.backgroundMutedHover", + hex: "#E6EDF5", + description: "Used as the hovered muted background for system components" + },backgroundMutedActive:{ + name: "system.backgroundMutedActive", + hex: "#C8D3E0", + description: "Used as the pressed muted background for system components" + },backgroundBox:{ + name: "system.backgroundBox", + hex: "#FCFEFF", + description: "Used as a background colour for a system container like Box or Message" + },borderBase:{ + name: "system.borderBase", + hex: "#C8D3E0", + description: "Used for the border colour for system components" + },borderHover:{ + name: "system.borderHover", + hex: "#596D84", + description: "Used for the hovered border colour for system components" + },borderActive:{ + name: "system.borderActive", + hex: "#475A70", + description: "Used for the pressed border colour for system components" + },borderFocused:{ + name: "system.borderFocused", + hex: "#3971A8", + description: "Used for the focused border colour for system components" + }}, +surface : {level0:{ + name: "surface.level0", + hex: "#F5F7FA", + description: "Used for setting the lowest most level, mainly applied as a background color to the HTML body. Should always be underneath levels 1 and 2" + },level1:{ + name: "surface.level1", + hex: "#FFFFFF", + description: "Used commonly with Boxes and containers that are directly on surface level 0. Also can be used as an alternative HTML body background color." + },level2:{ + name: "surface.level2", + hex: "#F5F7FA", + description: "Used for elements that are contained within Boxes or other wrappers that are surface level 1." + },interactiveBackground:{ + name: "surface.interactiveBackground", + hex: "#FFFFFF", + description: "Used for elements where the entire surface is interactable. For example Accordions, ActionBlock, and DropdownItems" + },interactiveHover:{ + name: "surface.interactiveHover", + hex: "#F5F7FA", + description: "Hover state for elements where the entire surface is interactable. For example Accordions, ActionBlock, and DropdownItems" + },interactiveActive:{ + name: "surface.interactiveActive", + hex: "#E6EDF5", + description: "Active/Pressed state for elements where the entire surface is interactable. For example Accordions, ActionBlock, and DropdownItems" + },overlayDark:{ + name: "surface.overlayDark", + hex: "#2E3A47", + description: "Used for elements that are absolutely positioned to overlay content on the page. Is always a dark background regardless of theme. Ex: Things like Toasts and Tooltips" + },overlayTheme:{ + name: "surface.overlayTheme", + hex: "#FFFFFF", + description: "Used for elements that are absolutely positioned to overlay content on the page. Matches the base color of the theme. Ex: Snackbar" + },overlayBackdrop:{ + name: "surface.overlayBackdrop", + hex: "#36485C", + description: "Used to overlay & de-emphasize the page to draw focus to certain areas. Ex: Used with Modals, Drawers" + }}, +primary : {textBase:{ + name: "primary.textBase", + hex: "#307553", + description: "Used as the text or fill colour for interactive and static primary components such as links, text, and icons" + },textHover:{ + name: "primary.textHover", + hex: "#275E43", + description: "Used as the hovered text or fill colour for interactive primary components such as links and text buttons" + },textActive:{ + name: "primary.textActive", + hex: "#244C38", + description: "Used as the pressed text or fill colour for interactive primary components such as links and text buttons" + },backgroundBase:{ + name: "primary.backgroundBase", + hex: "#307553", + description: "Used as the background for primary components such as plain buttons. Paired with text.onBackground for contrast" + },backgroundHover:{ + name: "primary.backgroundHover", + hex: "#275E43", + description: "Used as the hovered background for primary components such as plain buttons" + },backgroundActive:{ + name: "primary.backgroundActive", + hex: "#244C38", + description: "Used as the hovered background for primary components such as plain buttons" + },backgroundMuted:{ + name: "primary.backgroundMuted", + hex: "#EBF2EF", + description: "Used as the muted background for primary components such as pills and text buttons. Paired with primary.textBase for a subtler contrast" + },backgroundMutedHover:{ + name: "primary.backgroundMutedHover", + hex: "#D1E0D9", + description: "Used as the hovered muted background for primary components such as pills and text buttons. Paired with primary.textBase for a subtler contrast" + },backgroundMutedActive:{ + name: "primary.backgroundMutedActive", + hex: "#B6CFC2", + description: "Used as the pressed muted background for primary components such as pills and text buttons. Paired with primary.textBase for a subtler contrast" + },backgroundBox:{ + name: "primary.backgroundBox", + hex: "#FAFFFC", + description: "Used as a very light background for primary components such as Message and Box. Used for containers with content blocks" + },borderBase:{ + name: "primary.borderBase", + hex: "#307553", + description: "Used for the border colour for primary components such as buttons and Message" + },borderHover:{ + name: "primary.borderHover", + hex: "#275E43", + description: "Used for the hovered border colour for primary components such as buttons" + },borderActive:{ + name: "primary.borderActive", + hex: "#244C38", + description: "Used for the pressed border colour for primary components such as buttons" + }}, +success : {textBase:{ + name: "success.textBase", + hex: "#307553", + description: "Used as the text or fill colour for successful intention versions of components such as message, pill, or box" + },textHover:{ + name: "success.textHover", + hex: "#275E43", + description: "Used as the hovered text or fill colour for successful intention versions of components such as message, pill, or box" + },textActive:{ + name: "success.textActive", + hex: "#244C38", + description: "Used as the pressed text or fill colour for successful intention versions of components such as message, pill, or box" + },backgroundBase:{ + name: "success.backgroundBase", + hex: "#307553", + description: "Description to come." + },backgroundHover:{ + name: "success.backgroundHover", + hex: "#275E43", + description: "Description to come." + },backgroundActive:{ + name: "success.backgroundActive", + hex: "#244C38", + description: "Description to come." + },backgroundMuted:{ + name: "success.backgroundMuted", + hex: "#EBF2EF", + description: "Used as the muted background for successful intention versions of components such as message, pill, or box. Paired with successful.textBase for a subtler contrast" + },backgroundMutedHover:{ + name: "success.backgroundMutedHover", + hex: "#D1E0D9", + description: "Used as the hovered muted background for successful intention versions of components such as message, pill, or box. Paired with successful.textBase for a subtler contrast" + },backgroundMutedActive:{ + name: "success.backgroundMutedActive", + hex: "#B6CFC2", + description: "Used as the pressed muted background for successful intention versions of components such as message, pill, or box. Paired with successful.textBase for a subtler contrast" + },backgroundBox:{ + name: "success.backgroundBox", + hex: "#FAFFFC", + description: "Used as a very light background for successful intention versions of components such as message, pill, or box. Used for containers with content blocks" + },borderBase:{ + name: "success.borderBase", + hex: "#307553", + description: "Used for the border colour for successful intention versions of components such as buttons and Message" + },borderHover:{ + name: "success.borderHover", + hex: "#275E43", + description: "Used for the hovered border colour for successful components such as message" + },borderActive:{ + name: "success.borderActive", + hex: "#244C38", + description: "Used for the pressed border colour for successful components such as message" + }}, +info : {textBase:{ + name: "info.textBase", + hex: "#3971A8", + description: "Used as the text or fill colour for interactive and static informational components such as links, text, and icons" + },textHover:{ + name: "info.textHover", + hex: "#21588F", + description: "Used as the hovered colour for interactive informational components such as links and text buttons" + },textActive:{ + name: "info.textActive", + hex: "#194673", + description: "Used as the pressed colour for interactive informational components such as links and text buttons" + },backgroundBase:{ + name: "info.backgroundBase", + hex: "#3971A8", + description: "Used as the background for informational components such as plain buttons. Paired with text.onBackground for contrast" + },backgroundHover:{ + name: "info.backgroundHover", + hex: "#21588F", + description: "Used as the hovered background for informational components such as plain buttons" + },backgroundActive:{ + name: "info.backgroundActive", + hex: "#194673", + description: "Used as the pressed background for informational components such as plain buttons" + },backgroundMuted:{ + name: "info.backgroundMuted", + hex: "#E6F1FC", + description: "Used as the muted background for informational components such as pills and text buttons. Paired with info.textBase for a subtler contrast" + },backgroundMutedHover:{ + name: "info.backgroundMutedHover", + hex: "#C0D8F0", + description: "Used as the hovered muted background for informational components such as pills and text buttons. Paired with info.textBase for a subtler contrast" + },backgroundMutedActive:{ + name: "info.backgroundMutedActive", + hex: "#88B1D9", + description: "Used as the pressed muted background for informational components such as pills and text buttons. Paired with info.textBase for a subtler contrast" + },backgroundBox:{ + name: "info.backgroundBox", + hex: "#F5FAFF", + description: "Used as a very light background for informational components such as Message and Box. Used for containers with content blocks" + },borderBase:{ + name: "info.borderBase", + hex: "#3971A8", + description: "Used for the border colour for informational components such as buttons and Message" + },borderHover:{ + name: "info.borderHover", + hex: "#21588F", + description: "Used for the hovered border colour for informational components such as buttons" + },borderActive:{ + name: "info.borderActive", + hex: "#194673", + description: "Used for the pressed border colour for informational components such as buttons" + }}, +warning : {textBase:{ + name: "warning.textBase", + hex: "#B4631D", + description: "Used as the text or fill colour for interactive and static warning components such as links, text, and icons" + },textHover:{ + name: "warning.textHover", + hex: "#8E4D14", + description: "Used as the hovered text or fill colour for interactive and static warning components such as links and text buttons" + },textActive:{ + name: "warning.textActive", + hex: "#784213", + description: "Used as the pressed text or fill colour for interactive and static warning components such as links and text buttons" + },backgroundBase:{ + name: "warning.backgroundBase", + hex: "#B4631D", + description: "Used as the background for warning components such as plain buttons. Paired with text.onBackground for contrast" + },backgroundHover:{ + name: "warning.backgroundHover", + hex: "#8E4D14", + description: "Used as the hovered background for warning components such as plain buttons" + },backgroundActive:{ + name: "warning.backgroundActive", + hex: "#784213", + description: "Used as the pressed background for warning components such as plain buttons" + },backgroundMuted:{ + name: "warning.backgroundMuted", + hex: "#FFF3E8", + description: "Used as the muted background for warning components such as pills and text buttons. Paired with warning.textBase for a subtler contrast" + },backgroundMutedHover:{ + name: "warning.backgroundMutedHover", + hex: "#F3D8C0", + description: "Used as the hovered muted background for warning components such as pills and text buttons. Paired with warning.textBase for a subtler contrast" + },backgroundMutedActive:{ + name: "warning.backgroundMutedActive", + hex: "#E7B88F", + description: "Used as the pressed muted background for warning components such as pills and text buttons. Paired with warning.textBase for a subtler contrast" + },backgroundBox:{ + name: "warning.backgroundBox", + hex: "#FFFAF5", + description: "Used as a very light background for warning components such as Message and Box. Used for containers with content blocks" + },borderBase:{ + name: "warning.borderBase", + hex: "#B4631D", + description: "Used for the border colour for warning components such as buttons and Message" + },borderHover:{ + name: "warning.borderHover", + hex: "#8E4D14", + description: "Used for the hovered border colour for warning components" + },borderActive:{ + name: "warning.borderActive", + hex: "#784213", + description: "Used for the pressed border colour for warning components such as buttons" + }}, +danger : {textBase:{ + name: "danger.textBase", + hex: "#AF2645", + description: "Used as the text or fill colour for interactive and static danger components such as links, text, and icons" + },textHover:{ + name: "danger.textHover", + hex: "#980B29", + description: "Used as the hovered colour for interactive danger components such as links and text buttons" + },textActive:{ + name: "danger.textActive", + hex: "#800D25", + description: "Used as the pressed colour for interactive danger components such as links and text buttons" + },backgroundBase:{ + name: "danger.backgroundBase", + hex: "#AF2645", + description: "Used as the background for danger components such as plain buttons. Paired with text.onBackground for contrast" + },backgroundHover:{ + name: "danger.backgroundHover", + hex: "#980B29", + description: "Used as the hovered background for danger components such as plain buttons" + },backgroundActive:{ + name: "danger.backgroundActive", + hex: "#800D25", + description: "Used as the pressed background for danger components such as plain buttons" + },backgroundMuted:{ + name: "danger.backgroundMuted", + hex: "#FEEEF2", + description: "Used as the muted background for danger components such as pills and text buttons. Paired with danger.textBase for a subtler contrast" + },backgroundMutedHover:{ + name: "danger.backgroundMutedHover", + hex: "#F0C4CD", + description: "Used as the hovered muted background for danger components such as pills and text buttons. Paired with danger.textBase for a subtler contrast" + },backgroundMutedActive:{ + name: "danger.backgroundMutedActive", + hex: "#E296A6", + description: "Used as the pressed muted background for danger components such as pills and text buttons. Paired with danger.textBase for a subtler contrast" + },backgroundBox:{ + name: "danger.backgroundBox", + hex: "#FFF7F9", + description: "Used as a very light background for warning components such as Message and Box. Used for containers with content blocks" + },borderBase:{ + name: "danger.borderBase", + hex: "#AF2645", + description: "Used for the border colour for danger components such as buttons and Message" + },borderHover:{ + name: "danger.borderHover", + hex: "#980B29", + description: "Used for the hovered border colour for danger components such as buttons" + },borderActive:{ + name: "danger.borderActive", + hex: "#800D25", + description: "Used for the pressed border colour for danger components such as buttons" + }}, +highlight : {textBase:{ + name: "highlight.textBase", + hex: "#533E7D", + description: "Used as the text or fill colour for interactive and static highlight components such as links, text, and icons" + },textHover:{ + name: "highlight.textHover", + hex: "#3B2566", + description: "Used as the hovered text or fill colour for interactive and static highlight components such as links and text buttons" + },textActive:{ + name: "highlight.textActive", + hex: "#2A174F", + description: "Used as the pressed text or fill colour for interactive and static highlight components such as links and text buttons" + },backgroundBase:{ + name: "highlight.backgroundBase", + hex: "#533E7D", + description: "Used as the background for highlight components such as plain buttons. Paired with text.onBackground for contrast" + },backgroundHover:{ + name: "highlight.backgroundHover", + hex: "#3B2566", + description: "Used as the hovered background for highlight components such as plain buttons" + },backgroundActive:{ + name: "highlight.backgroundActive", + hex: "#2A174F", + description: "Used as the pressed background for highlight components such as plain buttons" + },backgroundMuted:{ + name: "highlight.backgroundMuted", + hex: "#F2ECFE", + description: "Used as the muted background for highlight components such as pills and text buttons. Paired with highlight.textBase for a subtler contrast" + },backgroundMutedHover:{ + name: "highlight.backgroundMutedHover", + hex: "#D7CEE9", + description: "Used as the hovered muted background for highlight components such as pills and text buttons. Paired with highlight.textBase for a subtler contrast" + },backgroundMutedActive:{ + name: "highlight.backgroundMutedActive", + hex: "#B9ABD5", + description: "Used as the pressed muted background for highlight components such as pills and text buttons. Paired with highlight.textBase for a subtler contrast" + },backgroundBox:{ + name: "highlight.backgroundBox", + hex: "#FCFAFF", + description: "Used as a very light background for highlight components such as Message and Box. Used for containers with content blocks" + },borderBase:{ + name: "highlight.borderBase", + hex: "#533E7D", + description: "Used for the border colour for highlight components such as buttons and Message" + },borderHover:{ + name: "highlight.borderHover", + hex: "#3B2566", + description: "Used for the hovered border colour for highlight components" + },borderActive:{ + name: "highlight.borderActive", + hex: "#2A174F", + description: "Used for the pressed border colour for highlight components such as buttons and Message" + }}, +disabled : {text:{ + name: "disabled.text", + hex: "#596D84", + description: "For use in disabled content like text and icons" + },background:{ + name: "disabled.background", + hex: "#F5F7FA", + description: "Used as the background colour for disabled components" + },nakedBackground:{ + name: "disabled.nakedBackground", + hex: "transparent", + description: "Used for the background in disabled components with little to no styling" + },border:{ + name: "disabled.border", + hex: "#C8D3E0", + description: "Used as the border for disabled components" + },inputBackground:{ + name: "disabled.inputBackground", + hex: "#E6EDF5", + description: "For use in disabled inputs as the background colour" + },inputLabelText:{ + name: "disabled.inputLabelText", + hex: "#596D84", + description: "Used as the label colour for disabled inputs" + }}, +input : {backgroundBase:{ + name: "input.backgroundBase", + hex: "#F5F7FA", + description: "Used as the default background colour for HTML inputs" + },backgroundHover:{ + name: "input.backgroundHover", + hex: "#E6EDF5", + description: "Used as the hovered background colour for HTML inputs" + },backgroundInformation:{ + name: "input.backgroundInformation", + hex: "#FFFFFF", + description: "Used as the default background colour for the text description below the input" + },textBase:{ + name: "input.textBase", + hex: "#475A70", + description: "Used for the default filled text colour for HTML inputs" + },textInformation:{ + name: "input.textInformation", + hex: "#475A70", + description: "Used as the text content colour for the text description below the input" + },textInformationError:{ + name: "input.textInformationError", + hex: "#AF2645", + description: "Used as the text content colour for the text description below the input when there are errors" + },textLabel:{ + name: "input.textLabel", + hex: "#475A70", + description: "Used as the default static label colour in HTML inputs which appears as a placeholder in the static state" + },textFloatingLabel:{ + name: "input.textFloatingLabel", + hex: "#3971A8", + description: "Used as the floated label colour when the HTML input has focus" + },textFloatingLabelError:{ + name: "input.textFloatingLabelError", + hex: "#AF2645", + description: "Used as the static and floated label colour when the input is in an error state" + },textPlaceholder:{ + name: "input.textPlaceholder", + hex: "#596D84", + description: "Used as the default placeholder text colour for basic and search inputs" + },textActive:{ + name: "input.textActive", + hex: "#2E3A47", + description: "Used as the label colour for labels that don't float when focused, like the select component" + },borderBase:{ + name: "input.borderBase", + hex: "#E6EDF5", + description: "Used as the default border colour" + },borderError:{ + name: "input.borderError", + hex: "#AF2645", + description: "Used for the border colour when the input is in an error state" + },borderHover:{ + name: "input.borderHover", + hex: "#C8D3E0", + description: "Used as the hovered border colour" + },borderEmphasized:{ + name: "input.borderEmphasized", + hex: "#596D84", + description: "Used as the default bottom border colour for floating label inputs or as the default border for inputs like checkbox" + },borderEmphasizedHover:{ + name: "input.borderEmphasizedHover", + hex: "#475A70", + description: "Used as the hovered bottom border colour for floating label inputs or as the hovered border for inputs like checkbox" + },borderActive:{ + name: "input.borderActive", + hex: "#3971A8", + description: "Used as the pressed bottom border colour for floating label inputs or as the engaged border for inputs like checkbox" + }}, +separator : {base:{ + name: "separator.base", + hex: "#E6EDF5", + description: "Used for the colour of the separator element" + }}, +light : {backgroundBase:{ + name: "light.backgroundBase", + hex: "#FFFFFF", + description: "For use as background colour in light profile components on contrasting surface backgrounds" + },backgroundContrast:{ + name: "light.backgroundContrast", + hex: "#475A70", + description: "For use as a contrasting background colour in light profile components, to match shade of surface background" + },backgroundHover:{ + name: "light.backgroundHover", + hex: "#F5F7FA", + description: "For use as background hover colour in light profile components on contrasting surface backgrounds" + },backgroundActive:{ + name: "light.backgroundActive", + hex: "#E6EDF5", + description: "For use as background active colour in light profile components on contrasting surface backgrounds" + },textBase:{ + name: "light.textBase", + hex: "#2E3A47", + description: "Used as the content colour (text, icons) for light profile components, to match shade of constrasting surface background" + },linkMutedBase:{ + name: "light.linkMutedBase", + hex: "#F5F7FA", + description: "Used as link colour for light profile components on contrasting surface backgrounds" + },linkMutedHover:{ + name: "light.linkMutedHover", + hex: "#FFFFFF", + description: "Used for link hover colour for light profile components on contrasting surface backgrounds" + }}, +shadow : {base:{ + name: "shadow.base", + hex: "#36485C", + description: "For use only with box shadow tokens" + }}, +accent : {forestTextBase:{ + name: "accent.forestTextBase", + hex: "#275E43", + + },forestBackgroundMuted:{ + name: "accent.forestBackgroundMuted", + hex: "#EBF2EF", + + },forestBackgroundMutedHover:{ + name: "accent.forestBackgroundMutedHover", + hex: "#D1E0D9", + + },forestBackgroundMutedActive:{ + name: "accent.forestBackgroundMutedActive", + hex: "#B6CFC2", + + },sandTextBase:{ + name: "accent.sandTextBase", + hex: "#5E4D27", + + },sandBackgroundMuted:{ + name: "accent.sandBackgroundMuted", + hex: "#F6F1E5", + + },sandBackgroundMutedHover:{ + name: "accent.sandBackgroundMutedHover", + hex: "#E4D9C2", + + },sandBackgroundMutedActive:{ + name: "accent.sandBackgroundMutedActive", + hex: "#DACCAA", + + }},}; \ No newline at end of file diff --git a/dist/tokens/native/borders.d.ts b/dist/tokens/native/borders.d.ts new file mode 100644 index 00000000..df11ff7d --- /dev/null +++ b/dist/tokens/native/borders.d.ts @@ -0,0 +1,10 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +export const radiusBase : number; +export const radiusCircle : string; +export const radiusModal : number; +export const radiusPill : number; +export const widthBase : number; \ No newline at end of file diff --git a/dist/tokens/native/borders.js b/dist/tokens/native/borders.js new file mode 100644 index 00000000..de17cf42 --- /dev/null +++ b/dist/tokens/native/borders.js @@ -0,0 +1,12 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +module.exports = { + "radiusBase": 8, + "radiusCircle": "50%", + "radiusModal": 8, + "radiusPill": 100, + "widthBase": 1 +}; \ No newline at end of file diff --git a/dist/tokens/native/core-dark-colors.d.ts b/dist/tokens/native/core-dark-colors.d.ts new file mode 100644 index 00000000..14bc7145 --- /dev/null +++ b/dist/tokens/native/core-dark-colors.d.ts @@ -0,0 +1,13 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +export const green : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string}; +export const blue : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string}; +export const red : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string}; +export const purple : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string}; +export const orange : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string}; +export const grey : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string}; +export const shades : {white : string,black : string,transparent : string}; +export const brown : {200 : string,300 : string,400 : string,700 : string}; \ No newline at end of file diff --git a/dist/tokens/native/core-dark-colors.js b/dist/tokens/native/core-dark-colors.js new file mode 100644 index 00000000..9c2f10cb --- /dev/null +++ b/dist/tokens/native/core-dark-colors.js @@ -0,0 +1,13 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +module.exports = {green : {100 : "#0C291E",200 : "#0F3326",300 : "#13402F",400 : "#256E53",500 : "#288563",600 : "#42AD86",700 : "#86D6B9",800 : "#DBFFF1"}, +blue : {100 : "#0C1B29",200 : "#102337",300 : "#142C45",400 : "#285685",500 : "#4577AD",600 : "#6597CE",700 : "#96BDE7",800 : "#D1E8FF"}, +red : {100 : "#290F16",200 : "#34101A",300 : "#451522",400 : "#8F2843",500 : "#B23655",600 : "#C74C6B",700 : "#EA8AA3",800 : "#FFD1DD"}, +purple : {100 : "#200F29",200 : "#291433",300 : "#33193F",400 : "#542F66",500 : "#693B80",600 : "#865C99",700 : "#B990CC",800 : "#F0D1FF"}, +orange : {100 : "#29170C",200 : "#361D0E",300 : "#4A2915",400 : "#8A4E29",500 : "#AD6234",600 : "#CF7945",700 : "#E7AA84",800 : "#FFE3D1"}, +grey : {100 : "#101012",200 : "#1A1D21",300 : "#22272B",400 : "#2D3238",500 : "#515357",600 : "#98999B",700 : "#BCBDBF",800 : "#E8E9EA"}, +shades : {white : "#FFFFFF",black : "#000000",transparent : "transparent"}, +brown : {200 : "#33260F",300 : "#402F13",400 : "#6E5225",700 : "#D6BA87"},}; \ No newline at end of file diff --git a/dist/tokens/native/core-light-colors.d.ts b/dist/tokens/native/core-light-colors.d.ts new file mode 100644 index 00000000..2f9121fc --- /dev/null +++ b/dist/tokens/native/core-light-colors.d.ts @@ -0,0 +1,14 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +export const green : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string}; +export const blue : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string}; +export const red : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string}; +export const purple : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string}; +export const orange : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string}; +export const grey : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string,900 : string}; +export const shades : {white : string,black : string,transparent : string}; +export const yellow : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string}; +export const brown : {200 : string,300 : string,400 : string,700 : string}; \ No newline at end of file diff --git a/dist/tokens/native/core-light-colors.js b/dist/tokens/native/core-light-colors.js new file mode 100644 index 00000000..dccff491 --- /dev/null +++ b/dist/tokens/native/core-light-colors.js @@ -0,0 +1,14 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +module.exports = {green : {100 : "#FAFFFC",200 : "#EBF2EF",300 : "#D1E0D9",400 : "#B6CFC2",500 : "#86B09B",600 : "#307553",700 : "#275E43",800 : "#244C38"}, +blue : {100 : "#F5FAFF",200 : "#E6F1FC",300 : "#C0D8F0",400 : "#88B1D9",500 : "#5D96CF",600 : "#3971A8",700 : "#21588F",800 : "#194673"}, +red : {100 : "#FFF7F9",200 : "#FEEEF2",300 : "#F0C4CD",400 : "#E296A6",500 : "#C6516A",600 : "#AF2645",700 : "#980B29",800 : "#800D25"}, +purple : {100 : "#FCFAFF",200 : "#F2ECFE",300 : "#D7CEE9",400 : "#B9ABD5",500 : "#8471AB",600 : "#533E7D",700 : "#3B2566",800 : "#2A174F"}, +orange : {100 : "#FFFAF5",200 : "#FFF3E8",300 : "#F3D8C0",400 : "#E7B88F",500 : "#CF8545",600 : "#B4631D",700 : "#8E4D14",800 : "#784213"}, +grey : {100 : "#FCFEFF",200 : "#F5F7FA",300 : "#E6EDF5",400 : "#C8D3E0",500 : "#596D84",600 : "#475A70",700 : "#36485C",800 : "#2E3A47",900 : "#212933"}, +shades : {white : "#FFFFFF",black : "#000000",transparent : "transparent"}, +yellow : {100 : "#faf8f2",200 : "#fcf3dd",300 : "#fce7b1",400 : "#fcd97e",500 : "#fccb4c",600 : "#ffc121",700 : "#f7b200",800 : "#e5a500"}, +brown : {200 : "#F6F1E5",300 : "#E4D9C2",400 : "#DACCAA",700 : "#5E4D27"},}; \ No newline at end of file diff --git a/dist/tokens/native/themes/dark.d.ts b/dist/tokens/native/themes/dark.d.ts new file mode 100644 index 00000000..5a1d59d4 --- /dev/null +++ b/dist/tokens/native/themes/dark.d.ts @@ -0,0 +1,21 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 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 success : {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,nakedContent : 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}; +export const shadow : {base : string}; +export const accent : {forestTextBase : string,forestBackgroundMuted : string,forestBackgroundMutedHover : string,forestBackgroundMutedActive : string,sandTextBase : string,sandBackgroundMuted : string,sandBackgroundMutedHover : string,sandBackgroundMutedActive : string};export const boxShadows: {cardBase : string,cardHover : string,popoverBase : string,modalBase : string};export const opacity: {overlayBackdrop : number}; \ No newline at end of file diff --git a/dist/tokens/native/themes/dark.js b/dist/tokens/native/themes/dark.js new file mode 100644 index 00000000..fcd64c59 --- /dev/null +++ b/dist/tokens/native/themes/dark.js @@ -0,0 +1,21 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +module.exports = {theme: "dark", +text : {emphasis : "#E8E9EA",body : "#BCBDBF",subdued : "#98999B",onBackground : "#FFFFFF"}, +system : {textLabelEmphasis : "#FFFFFF",textBase : "#BCBDBF",textHover : "#E8E9EA",textActive : "#FFFFFF",backgroundBase : "#1A1D21",backgroundMuted : "#22272B",backgroundMutedHover : "#2D3238",backgroundMutedActive : "#515357",backgroundBox : "#1A1D21",borderBase : "#515357",borderHover : "#98999B",borderActive : "#BCBDBF",borderFocused : "#6597CE"}, +surface : {level0 : "#101012",level1 : "#101012",level2 : "#22272B",interactiveBackground : "#1A1D21",interactiveHover : "#22272B",interactiveActive : "#2D3238",overlayDark : "#22272B",overlayTheme : "#1A1D21",overlayBackdrop : "#1A1D21"}, +primary : {textBase : "#1A1D21",textHover : "#1A1D21",textActive : "#1A1D21",backgroundBase : "#E8E9EA",backgroundHover : "#FFFFFF",backgroundActive : "#FFFFFF",backgroundMuted : "#22272B",backgroundMutedHover : "#2D3238",backgroundMutedActive : "#515357",backgroundBox : "#0C291E",borderBase : "#515357",borderHover : "#98999B",borderActive : "#BCBDBF"}, +success : {textBase : "#42AD86",textHover : "#86D6B9",textActive : "#DBFFF1",backgroundBase : "#288563",backgroundHover : "#42AD86",backgroundActive : "#86D6B9",backgroundMuted : "#0F3326",backgroundMutedHover : "#13402F",backgroundMutedActive : "#256E53",backgroundBox : "#0C291E",borderBase : "#256E53",borderHover : "#288563",borderActive : "#42AD86"}, +info : {textBase : "#6597CE",textHover : "#96BDE7",textActive : "#D1E8FF",backgroundBase : "#4577AD",backgroundHover : "#285685",backgroundActive : "#142C45",backgroundMuted : "#102337",backgroundMutedHover : "#142C45",backgroundMutedActive : "#285685",backgroundBox : "#0C1B29",borderBase : "#4577AD",borderHover : "#285685",borderActive : "#142C45"}, +warning : {textBase : "#CF7945",textHover : "#E7AA84",textActive : "#FFE3D1",backgroundBase : "#AD6234",backgroundHover : "#CF7945",backgroundActive : "#E7AA84",backgroundMuted : "#361D0E",backgroundMutedHover : "#4A2915",backgroundMutedActive : "#8A4E29",backgroundBox : "#29170C",borderBase : "#8A4E29",borderHover : "#AD6234",borderActive : "#CF7945"}, +danger : {textBase : "#C74C6B",textHover : "#EA8AA3",textActive : "#FFD1DD",backgroundBase : "#B23655",backgroundHover : "#C74C6B",backgroundActive : "#EA8AA3",backgroundMuted : "#34101A",backgroundMutedHover : "#451522",backgroundMutedActive : "#8F2843",backgroundBox : "#290F16",borderBase : "#8F2843",borderHover : "#B23655",borderActive : "#C74C6B"}, +highlight : {textBase : "#865C99",textHover : "#B990CC",textActive : "#F0D1FF",backgroundBase : "#693B80",backgroundHover : "#865C99",backgroundActive : "#B990CC",backgroundMuted : "#291433",backgroundMutedHover : "#33193F",backgroundMutedActive : "#542F66",backgroundBox : "#200F29",borderBase : "#542F66",borderHover : "#693B80",borderActive : "#865C99"}, +disabled : {text : "#98999B",background : "#1A1D21",nakedBackground : "transparent",border : "#515357",nakedContent : "#22272B",inputBackground : "#2D3238",inputLabelText : "#98999B"}, +input : {backgroundBase : "#1B2228",backgroundHover : "#2D3238",backgroundInformation : "#FFFFFF",textBase : "#FFFFFF",textInformation : "#BCBDBF",textInformationError : "#B23655",textLabel : "#BCBDBF",textFloatingLabel : "#4577AD",textFloatingLabelError : "#B23655",textPlaceholder : "#98999B",textActive : "#FFFFFF",borderBase : "#2D3238",borderError : "#8F2843",borderHover : "#515357",borderEmphasized : "#98999B",borderEmphasizedHover : "#BCBDBF",borderActive : "#285685"}, +separator : {base : "#2D3238"}, +light : {backgroundBase : "#FFFFFF",backgroundContrast : "#515357",backgroundHover : "#E8E9EA",backgroundActive : "#E8E9EA",textBase : "#2D3238",linkMutedBase : "#E8E9EA",linkMutedHover : "#FFFFFF"}, +shadow : {base : "#000000"}, +accent : {forestTextBase : "#86D6B9",forestBackgroundMuted : "#0F3326",forestBackgroundMutedHover : "#13402F",forestBackgroundMutedActive : "#256E53",sandTextBase : "#D6BA87",sandBackgroundMuted : "#33260F",sandBackgroundMutedHover : "#402F13",sandBackgroundMutedActive : "#6E5225"},boxShadows: {cardBase : "0px 1px 2px 0px #00000052",cardHover : "0px 2px 8px 0px #00000066",popoverBase : "0px 4px 16px 0px #00000052",modalBase : "0px 4px 16px 0px #0000007a"},opacity: {overlayBackdrop : 0.8},}; \ No newline at end of file diff --git a/dist/tokens/native/themes/emerson.d.ts b/dist/tokens/native/themes/emerson.d.ts new file mode 100644 index 00000000..0aff7d15 --- /dev/null +++ b/dist/tokens/native/themes/emerson.d.ts @@ -0,0 +1,21 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 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 success : {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}; +export const shadow : {base : string}; +export const accent : {forestTextBase : string,forestBackgroundMuted : string,forestBackgroundMutedHover : string,forestBackgroundMutedActive : string,sandTextBase : string,sandBackgroundMuted : string,sandBackgroundMutedHover : string,sandBackgroundMutedActive : string};export const boxShadows: {cardBase : string,cardHover : string,popoverBase : string,modalBase : string};export const opacity: {overlayBackdrop : number}; \ No newline at end of file diff --git a/dist/tokens/native/themes/emerson.js b/dist/tokens/native/themes/emerson.js new file mode 100644 index 00000000..fe34060d --- /dev/null +++ b/dist/tokens/native/themes/emerson.js @@ -0,0 +1,21 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +module.exports = {theme: "emerson", +text : {emphasis : "#36485C",body : "#475A70",subdued : "#596D84",onBackground : "#FFFFFF"}, +system : {textLabelEmphasis : "#2E3A47",textBase : "#475A70",textHover : "#36485C",textActive : "#2E3A47",backgroundBase : "#FFFFFF",backgroundMuted : "#F5F7FA",backgroundMutedHover : "#E6EDF5",backgroundMutedActive : "#C8D3E0",backgroundBox : "#FCFEFF",borderBase : "#C8D3E0",borderHover : "#596D84",borderActive : "#475A70",borderFocused : "#3971A8"}, +surface : {level0 : "#FFFFFF",level1 : "#FFFFFF",level2 : "#F5F7FA",interactiveBackground : "#FFFFFF",interactiveHover : "#F5F7FA",interactiveActive : "#E6EDF5",overlayDark : "#2E3A47",overlayTheme : "#FFFFFF",overlayBackdrop : "#36485C"}, +primary : {textBase : "#FFFFFF",textHover : "#FFFFFF",textActive : "#FFFFFF",backgroundBase : "#36485C",backgroundHover : "#2E3A47",backgroundActive : "#212933",backgroundMuted : "#F5F7FA",backgroundMutedHover : "#E6EDF5",backgroundMutedActive : "#C8D3E0",backgroundBox : "#FCFEFF",borderBase : "#C8D3E0",borderHover : "#596D84",borderActive : "#2E3A47"}, +success : {textBase : "#307553",textHover : "#275E43",textActive : "#244C38",backgroundBase : "#307553",backgroundHover : "#275E43",backgroundActive : "#244C38",backgroundMuted : "#EBF2EF",backgroundMutedHover : "#D1E0D9",backgroundMutedActive : "#B6CFC2",backgroundBox : "#FAFFFC",borderBase : "#307553",borderHover : "#275E43",borderActive : "#244C38"}, +info : {textBase : "#3971A8",textHover : "#21588F",textActive : "#194673",backgroundBase : "#3971A8",backgroundHover : "#21588F",backgroundActive : "#194673",backgroundMuted : "#E6F1FC",backgroundMutedHover : "#C0D8F0",backgroundMutedActive : "#88B1D9",backgroundBox : "#F5FAFF",borderBase : "#3971A8",borderHover : "#21588F",borderActive : "#194673"}, +warning : {textBase : "#B4631D",textHover : "#8E4D14",textActive : "#784213",backgroundBase : "#B4631D",backgroundHover : "#8E4D14",backgroundActive : "#784213",backgroundMuted : "#FFF3E8",backgroundMutedHover : "#F3D8C0",backgroundMutedActive : "#E7B88F",backgroundBox : "#FFFAF5",borderBase : "#B4631D",borderHover : "#8E4D14",borderActive : "#784213"}, +danger : {textBase : "#AF2645",textHover : "#980B29",textActive : "#800D25",backgroundBase : "#AF2645",backgroundHover : "#980B29",backgroundActive : "#800D25",backgroundMuted : "#FEEEF2",backgroundMutedHover : "#F0C4CD",backgroundMutedActive : "#E296A6",backgroundBox : "#FFF7F9",borderBase : "#AF2645",borderHover : "#980B29",borderActive : "#800D25"}, +highlight : {textBase : "#533E7D",textHover : "#3B2566",textActive : "#2A174F",backgroundBase : "#533E7D",backgroundHover : "#3B2566",backgroundActive : "#2A174F",backgroundMuted : "#F2ECFE",backgroundMutedHover : "#D7CEE9",backgroundMutedActive : "#B9ABD5",backgroundBox : "#FCFAFF",borderBase : "#533E7D",borderHover : "#3B2566",borderActive : "#2A174F"}, +disabled : {text : "#596D84",background : "#F5F7FA",nakedBackground : "transparent",border : "#C8D3E0",inputBackground : "#E6EDF5",inputLabelText : "#596D84"}, +input : {backgroundBase : "#F5F7FA",backgroundHover : "#E6EDF5",backgroundInformation : "#FFFFFF",textBase : "#475A70",textInformation : "#475A70",textInformationError : "#AF2645",textLabel : "#475A70",textFloatingLabel : "#3971A8",textFloatingLabelError : "#AF2645",textPlaceholder : "#596D84",textActive : "#2E3A47",borderBase : "#E6EDF5",borderError : "#AF2645",borderHover : "#C8D3E0",borderEmphasized : "#596D84",borderEmphasizedHover : "#475A70",borderActive : "#3971A8"}, +separator : {base : "#E6EDF5"}, +light : {backgroundBase : "#FFFFFF",backgroundContrast : "#475A70",backgroundHover : "#F5F7FA",backgroundActive : "#E6EDF5",textBase : "#2E3A47",linkMutedBase : "#F5F7FA",linkMutedHover : "#FFFFFF"}, +shadow : {base : "#000000"}, +accent : {forestTextBase : "#275E43",forestBackgroundMuted : "#EBF2EF",forestBackgroundMutedHover : "#D1E0D9",forestBackgroundMutedActive : "#B6CFC2",sandTextBase : "#5E4D27",sandBackgroundMuted : "#F6F1E5",sandBackgroundMutedHover : "#E4D9C2",sandBackgroundMutedActive : "#DACCAA"},boxShadows: {cardBase : "0px 1px 2px 0px #00000029",cardHover : "0px 2px 8px 0px #00000033",popoverBase : "0px 4px 16px 0px #00000029",modalBase : "0px 8px 32px 0px #0000003d"},opacity: {overlayBackdrop : 0.2},}; \ No newline at end of file diff --git a/dist/tokens/native/themes/light.d.ts b/dist/tokens/native/themes/light.d.ts new file mode 100644 index 00000000..0aff7d15 --- /dev/null +++ b/dist/tokens/native/themes/light.d.ts @@ -0,0 +1,21 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 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 success : {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}; +export const shadow : {base : string}; +export const accent : {forestTextBase : string,forestBackgroundMuted : string,forestBackgroundMutedHover : string,forestBackgroundMutedActive : string,sandTextBase : string,sandBackgroundMuted : string,sandBackgroundMutedHover : string,sandBackgroundMutedActive : string};export const boxShadows: {cardBase : string,cardHover : string,popoverBase : string,modalBase : string};export const opacity: {overlayBackdrop : number}; \ No newline at end of file diff --git a/dist/tokens/native/themes/light.js b/dist/tokens/native/themes/light.js new file mode 100644 index 00000000..59bf0e7b --- /dev/null +++ b/dist/tokens/native/themes/light.js @@ -0,0 +1,21 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +module.exports = {theme: "light", +text : {emphasis : "#2E3A47",body : "#36485C",subdued : "#475A70",onBackground : "#FFFFFF"}, +system : {textLabelEmphasis : "#2E3A47",textBase : "#475A70",textHover : "#36485C",textActive : "#2E3A47",backgroundBase : "#FFFFFF",backgroundMuted : "#F5F7FA",backgroundMutedHover : "#E6EDF5",backgroundMutedActive : "#C8D3E0",backgroundBox : "#FCFEFF",borderBase : "#C8D3E0",borderHover : "#596D84",borderActive : "#475A70",borderFocused : "#3971A8"}, +surface : {level0 : "#FFFFFF",level1 : "#FFFFFF",level2 : "#F5F7FA",interactiveBackground : "#FFFFFF",interactiveHover : "#F5F7FA",interactiveActive : "#E6EDF5",overlayDark : "#2E3A47",overlayTheme : "#FFFFFF",overlayBackdrop : "#36485C"}, +primary : {textBase : "#FFFFFF",textHover : "#FFFFFF",textActive : "#FFFFFF",backgroundBase : "#36485C",backgroundHover : "#2E3A47",backgroundActive : "#212933",backgroundMuted : "#F5F7FA",backgroundMutedHover : "#E6EDF5",backgroundMutedActive : "#C8D3E0",backgroundBox : "#FCFEFF",borderBase : "#C8D3E0",borderHover : "#596D84",borderActive : "#2E3A47"}, +success : {textBase : "#307553",textHover : "#275E43",textActive : "#244C38",backgroundBase : "#307553",backgroundHover : "#275E43",backgroundActive : "#244C38",backgroundMuted : "#EBF2EF",backgroundMutedHover : "#D1E0D9",backgroundMutedActive : "#B6CFC2",backgroundBox : "#FAFFFC",borderBase : "#307553",borderHover : "#275E43",borderActive : "#244C38"}, +info : {textBase : "#3971A8",textHover : "#21588F",textActive : "#194673",backgroundBase : "#3971A8",backgroundHover : "#21588F",backgroundActive : "#194673",backgroundMuted : "#E6F1FC",backgroundMutedHover : "#C0D8F0",backgroundMutedActive : "#88B1D9",backgroundBox : "#F5FAFF",borderBase : "#3971A8",borderHover : "#21588F",borderActive : "#194673"}, +warning : {textBase : "#B4631D",textHover : "#8E4D14",textActive : "#784213",backgroundBase : "#B4631D",backgroundHover : "#8E4D14",backgroundActive : "#784213",backgroundMuted : "#FFF3E8",backgroundMutedHover : "#F3D8C0",backgroundMutedActive : "#E7B88F",backgroundBox : "#FFFAF5",borderBase : "#B4631D",borderHover : "#8E4D14",borderActive : "#784213"}, +danger : {textBase : "#AF2645",textHover : "#980B29",textActive : "#800D25",backgroundBase : "#AF2645",backgroundHover : "#980B29",backgroundActive : "#800D25",backgroundMuted : "#FEEEF2",backgroundMutedHover : "#F0C4CD",backgroundMutedActive : "#E296A6",backgroundBox : "#FFF7F9",borderBase : "#AF2645",borderHover : "#980B29",borderActive : "#800D25"}, +highlight : {textBase : "#533E7D",textHover : "#3B2566",textActive : "#2A174F",backgroundBase : "#533E7D",backgroundHover : "#3B2566",backgroundActive : "#2A174F",backgroundMuted : "#F2ECFE",backgroundMutedHover : "#D7CEE9",backgroundMutedActive : "#B9ABD5",backgroundBox : "#FCFAFF",borderBase : "#533E7D",borderHover : "#3B2566",borderActive : "#2A174F"}, +disabled : {text : "#596D84",background : "#F5F7FA",nakedBackground : "transparent",border : "#C8D3E0",inputBackground : "#E6EDF5",inputLabelText : "#596D84"}, +input : {backgroundBase : "#F5F7FA",backgroundHover : "#E6EDF5",backgroundInformation : "#FFFFFF",textBase : "#475A70",textInformation : "#475A70",textInformationError : "#AF2645",textLabel : "#475A70",textFloatingLabel : "#3971A8",textFloatingLabelError : "#AF2645",textPlaceholder : "#596D84",textActive : "#2E3A47",borderBase : "#E6EDF5",borderError : "#AF2645",borderHover : "#C8D3E0",borderEmphasized : "#596D84",borderEmphasizedHover : "#475A70",borderActive : "#3971A8"}, +separator : {base : "#E6EDF5"}, +light : {backgroundBase : "#FFFFFF",backgroundContrast : "#475A70",backgroundHover : "#F5F7FA",backgroundActive : "#E6EDF5",textBase : "#2E3A47",linkMutedBase : "#F5F7FA",linkMutedHover : "#FFFFFF"}, +shadow : {base : "#36485C"}, +accent : {forestTextBase : "#275E43",forestBackgroundMuted : "#EBF2EF",forestBackgroundMutedHover : "#D1E0D9",forestBackgroundMutedActive : "#B6CFC2",sandTextBase : "#5E4D27",sandBackgroundMuted : "#F6F1E5",sandBackgroundMutedHover : "#E4D9C2",sandBackgroundMutedActive : "#DACCAA"},boxShadows: {cardBase : "0px 1px 2px 0px #36485c29",cardHover : "0px 2px 8px 0px #36485c33",popoverBase : "0px 4px 16px 0px #36485c29",modalBase : "0px 8px 32px 0px #36485c3d"},opacity: {overlayBackdrop : 0.2},}; \ No newline at end of file diff --git a/dist/tokens/native/themes/lightDS3.d.ts b/dist/tokens/native/themes/lightDS3.d.ts new file mode 100644 index 00000000..0aff7d15 --- /dev/null +++ b/dist/tokens/native/themes/lightDS3.d.ts @@ -0,0 +1,21 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 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 success : {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}; +export const shadow : {base : string}; +export const accent : {forestTextBase : string,forestBackgroundMuted : string,forestBackgroundMutedHover : string,forestBackgroundMutedActive : string,sandTextBase : string,sandBackgroundMuted : string,sandBackgroundMutedHover : string,sandBackgroundMutedActive : string};export const boxShadows: {cardBase : string,cardHover : string,popoverBase : string,modalBase : string};export const opacity: {overlayBackdrop : number}; \ No newline at end of file diff --git a/dist/tokens/native/themes/lightDS3.js b/dist/tokens/native/themes/lightDS3.js new file mode 100644 index 00000000..2f1e2ff0 --- /dev/null +++ b/dist/tokens/native/themes/lightDS3.js @@ -0,0 +1,21 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +module.exports = {theme: "lightDS3", +text : {emphasis : "#36485C",body : "#475A70",subdued : "#596D84",onBackground : "#FFFFFF"}, +system : {textLabelEmphasis : "#2E3A47",textBase : "#475A70",textHover : "#36485C",textActive : "#2E3A47",backgroundBase : "#FFFFFF",backgroundMuted : "#F5F7FA",backgroundMutedHover : "#E6EDF5",backgroundMutedActive : "#C8D3E0",backgroundBox : "#FCFEFF",borderBase : "#C8D3E0",borderHover : "#596D84",borderActive : "#475A70",borderFocused : "#3971A8"}, +surface : {level0 : "#F5F7FA",level1 : "#FFFFFF",level2 : "#F5F7FA",interactiveBackground : "#FFFFFF",interactiveHover : "#F5F7FA",interactiveActive : "#E6EDF5",overlayDark : "#2E3A47",overlayTheme : "#FFFFFF",overlayBackdrop : "#36485C"}, +primary : {textBase : "#307553",textHover : "#275E43",textActive : "#244C38",backgroundBase : "#307553",backgroundHover : "#275E43",backgroundActive : "#244C38",backgroundMuted : "#EBF2EF",backgroundMutedHover : "#D1E0D9",backgroundMutedActive : "#B6CFC2",backgroundBox : "#FAFFFC",borderBase : "#307553",borderHover : "#275E43",borderActive : "#244C38"}, +success : {textBase : "#307553",textHover : "#275E43",textActive : "#244C38",backgroundBase : "#307553",backgroundHover : "#275E43",backgroundActive : "#244C38",backgroundMuted : "#EBF2EF",backgroundMutedHover : "#D1E0D9",backgroundMutedActive : "#B6CFC2",backgroundBox : "#FAFFFC",borderBase : "#307553",borderHover : "#275E43",borderActive : "#244C38"}, +info : {textBase : "#3971A8",textHover : "#21588F",textActive : "#194673",backgroundBase : "#3971A8",backgroundHover : "#21588F",backgroundActive : "#194673",backgroundMuted : "#E6F1FC",backgroundMutedHover : "#C0D8F0",backgroundMutedActive : "#88B1D9",backgroundBox : "#F5FAFF",borderBase : "#3971A8",borderHover : "#21588F",borderActive : "#194673"}, +warning : {textBase : "#B4631D",textHover : "#8E4D14",textActive : "#784213",backgroundBase : "#B4631D",backgroundHover : "#8E4D14",backgroundActive : "#784213",backgroundMuted : "#FFF3E8",backgroundMutedHover : "#F3D8C0",backgroundMutedActive : "#E7B88F",backgroundBox : "#FFFAF5",borderBase : "#B4631D",borderHover : "#8E4D14",borderActive : "#784213"}, +danger : {textBase : "#AF2645",textHover : "#980B29",textActive : "#800D25",backgroundBase : "#AF2645",backgroundHover : "#980B29",backgroundActive : "#800D25",backgroundMuted : "#FEEEF2",backgroundMutedHover : "#F0C4CD",backgroundMutedActive : "#E296A6",backgroundBox : "#FFF7F9",borderBase : "#AF2645",borderHover : "#980B29",borderActive : "#800D25"}, +highlight : {textBase : "#533E7D",textHover : "#3B2566",textActive : "#2A174F",backgroundBase : "#533E7D",backgroundHover : "#3B2566",backgroundActive : "#2A174F",backgroundMuted : "#F2ECFE",backgroundMutedHover : "#D7CEE9",backgroundMutedActive : "#B9ABD5",backgroundBox : "#FCFAFF",borderBase : "#533E7D",borderHover : "#3B2566",borderActive : "#2A174F"}, +disabled : {text : "#596D84",background : "#F5F7FA",nakedBackground : "transparent",border : "#C8D3E0",inputBackground : "#E6EDF5",inputLabelText : "#596D84"}, +input : {backgroundBase : "#F5F7FA",backgroundHover : "#E6EDF5",backgroundInformation : "#FFFFFF",textBase : "#475A70",textInformation : "#475A70",textInformationError : "#AF2645",textLabel : "#475A70",textFloatingLabel : "#3971A8",textFloatingLabelError : "#AF2645",textPlaceholder : "#596D84",textActive : "#2E3A47",borderBase : "#E6EDF5",borderError : "#AF2645",borderHover : "#C8D3E0",borderEmphasized : "#596D84",borderEmphasizedHover : "#475A70",borderActive : "#3971A8"}, +separator : {base : "#E6EDF5"}, +light : {backgroundBase : "#FFFFFF",backgroundContrast : "#475A70",backgroundHover : "#F5F7FA",backgroundActive : "#E6EDF5",textBase : "#2E3A47",linkMutedBase : "#F5F7FA",linkMutedHover : "#FFFFFF"}, +shadow : {base : "#36485C"}, +accent : {forestTextBase : "#275E43",forestBackgroundMuted : "#EBF2EF",forestBackgroundMutedHover : "#D1E0D9",forestBackgroundMutedActive : "#B6CFC2",sandTextBase : "#5E4D27",sandBackgroundMuted : "#F6F1E5",sandBackgroundMutedHover : "#E4D9C2",sandBackgroundMutedActive : "#DACCAA"},boxShadows: {cardBase : "0px 1px 2px 0px #36485c29",cardHover : "0px 2px 8px 0px #36485c33",popoverBase : "0px 4px 16px 0px #36485c29",modalBase : "0px 8px 32px 0px #36485c3d"},opacity: {overlayBackdrop : 0.2},}; \ No newline at end of file diff --git a/dist/tokens/native/typography.d.ts b/dist/tokens/native/typography.d.ts new file mode 100644 index 00000000..1fda7c88 --- /dev/null +++ b/dist/tokens/native/typography.d.ts @@ -0,0 +1,117 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +export const letterSpacingBase : number; +export const paragraphSpacingBase : number; +export const textDecorationBase : string; +export const textCaseBase : string; +export const size3xlarge : number; +export const size2xlarge : number; +export const sizeXlarge : number; +export const sizeLarge : number; +export const sizeNormal : number; +export const sizeSmall : number; +export const sizeXsmall : number; +export const sizeMobile3xlarge : number; +export const sizeMobile2xlarge : number; +export const sizeMobileXlarge : number; +export const lineHeightXlarge : number; +export const lineHeightLarge : number; +export const lineHeightNormal : number; +export const lineHeightSmall : number; +export const fontFamilySansSerif : string; +export const weightSemiBold : string; +export const weightBase : string; +export const weightLight : string; +export const weightStrong : string; +export const weightBold : string; +export const h1FontFamily : string; +export const h1FontWeight : string; +export const h1LineHeight : number; +export const h1FontSize : number; +export const h1LetterSpacing : number; +export const h1ParagraphSpacing : number; +export const h1TextDecoration : string; +export const h1TextCase : string; +export const h2FontFamily : string; +export const h2FontWeight : string; +export const h2LineHeight : number; +export const h2FontSize : number; +export const h2LetterSpacing : number; +export const h2ParagraphSpacing : number; +export const h2TextDecoration : string; +export const h2TextCase : string; +export const h3FontFamily : string; +export const h3FontWeight : string; +export const h3LineHeight : number; +export const h3FontSize : number; +export const h3LetterSpacing : number; +export const h3ParagraphSpacing : number; +export const h3TextDecoration : string; +export const h3TextCase : string; +export const h4FontFamily : string; +export const h4FontWeight : string; +export const h4LineHeight : number; +export const h4FontSize : number; +export const h4LetterSpacing : number; +export const h4ParagraphSpacing : number; +export const h4TextDecoration : string; +export const h4TextCase : string; +export const h5FontFamily : string; +export const h5FontWeight : string; +export const h5LineHeight : number; +export const h5FontSize : number; +export const h5LetterSpacing : number; +export const h5ParagraphSpacing : number; +export const h5TextDecoration : string; +export const h5TextCase : string; +export const bodyFontFamily : string; +export const bodyFontWeight : string; +export const bodyLineHeight : number; +export const bodyFontSize : number; +export const bodyLetterSpacing : number; +export const bodyParagraphSpacing : number; +export const bodyTextDecoration : string; +export const bodyTextCase : string; +export const footnoteFontFamily : string; +export const footnoteFontWeight : string; +export const footnoteLineHeight : number; +export const footnoteFontSize : number; +export const footnoteLetterSpacing : number; +export const footnoteParagraphSpacing : number; +export const footnoteTextDecoration : string; +export const footnoteTextCase : string; +export const captionFontFamily : string; +export const captionFontWeight : string; +export const captionLineHeight : number; +export const captionFontSize : number; +export const captionLetterSpacing : number; +export const captionParagraphSpacing : number; +export const captionTextDecoration : string; +export const captionTextCase : string; +export const mobileH1FontFamily : string; +export const mobileH1FontWeight : string; +export const mobileH1LineHeight : number; +export const mobileH1FontSize : number; +export const mobileH1LetterSpacing : number; +export const mobileH1ParagraphSpacing : number; +export const mobileH1TextDecoration : string; +export const mobileH1TextCase : string; +export const mobileH2FontFamily : string; +export const mobileH2FontWeight : string; +export const mobileH2LineHeight : number; +export const mobileH2FontSize : number; +export const mobileH2LetterSpacing : number; +export const mobileH2ParagraphSpacing : number; +export const mobileH2TextDecoration : string; +export const mobileH2TextCase : string; +export const mobileH3FontFamily : string; +export const mobileH3FontWeight : string; +export const mobileH3LineHeight : number; +export const mobileH3FontSize : number; +export const mobileH3LetterSpacing : number; +export const mobileH3ParagraphSpacing : number; +export const mobileH3TextDecoration : string; +export const mobileH3TextCase : string; \ No newline at end of file diff --git a/dist/tokens/native/typography.js b/dist/tokens/native/typography.js new file mode 100644 index 00000000..6bfa81e3 --- /dev/null +++ b/dist/tokens/native/typography.js @@ -0,0 +1,119 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +module.exports = { + "letterSpacingBase": 0, + "paragraphSpacingBase": 0, + "textDecorationBase": "none", + "textCaseBase": "none", + "size3xlarge": 40, + "size2xlarge": 32, + "sizeXlarge": 24, + "sizeLarge": 20, + "sizeNormal": 16, + "sizeSmall": 14, + "sizeXsmall": 12, + "sizeMobile3xlarge": 32, + "sizeMobile2xlarge": 28, + "sizeMobileXlarge": 22, + "lineHeightXlarge": 40, + "lineHeightLarge": 32, + "lineHeightNormal": 24, + "lineHeightSmall": 16, + "fontFamilySansSerif": "Mulish", + "weightSemiBold": "700", + "weightBase": "500", + "weightLight": "400", + "weightStrong": "600", + "weightBold": "900", + "h1FontFamily": "Mulish", + "h1FontWeight": "700", + "h1LineHeight": 40, + "h1FontSize": 40, + "h1LetterSpacing": 0, + "h1ParagraphSpacing": 0, + "h1TextDecoration": "none", + "h1TextCase": "none", + "h2FontFamily": "Mulish", + "h2FontWeight": "700", + "h2LineHeight": 40, + "h2FontSize": 32, + "h2LetterSpacing": 0, + "h2ParagraphSpacing": 0, + "h2TextDecoration": "none", + "h2TextCase": "none", + "h3FontFamily": "Mulish", + "h3FontWeight": "700", + "h3LineHeight": 32, + "h3FontSize": 24, + "h3LetterSpacing": 0, + "h3ParagraphSpacing": 0, + "h3TextDecoration": "none", + "h3TextCase": "none", + "h4FontFamily": "Mulish", + "h4FontWeight": "700", + "h4LineHeight": 24, + "h4FontSize": 20, + "h4LetterSpacing": 0, + "h4ParagraphSpacing": 0, + "h4TextDecoration": "none", + "h4TextCase": "none", + "h5FontFamily": "Mulish", + "h5FontWeight": "700", + "h5LineHeight": 24, + "h5FontSize": 16, + "h5LetterSpacing": 0, + "h5ParagraphSpacing": 0, + "h5TextDecoration": "none", + "h5TextCase": "none", + "bodyFontFamily": "Mulish", + "bodyFontWeight": "500", + "bodyLineHeight": 24, + "bodyFontSize": 16, + "bodyLetterSpacing": 0, + "bodyParagraphSpacing": 0, + "bodyTextDecoration": "none", + "bodyTextCase": "none", + "footnoteFontFamily": "Mulish", + "footnoteFontWeight": "500", + "footnoteLineHeight": 16, + "footnoteFontSize": 14, + "footnoteLetterSpacing": 0, + "footnoteParagraphSpacing": 0, + "footnoteTextDecoration": "none", + "footnoteTextCase": "none", + "captionFontFamily": "Mulish", + "captionFontWeight": "500", + "captionLineHeight": 16, + "captionFontSize": 12, + "captionLetterSpacing": 0, + "captionParagraphSpacing": 0, + "captionTextDecoration": "none", + "captionTextCase": "none", + "mobileH1FontFamily": "Mulish", + "mobileH1FontWeight": "700", + "mobileH1LineHeight": 40, + "mobileH1FontSize": 32, + "mobileH1LetterSpacing": 0, + "mobileH1ParagraphSpacing": 0, + "mobileH1TextDecoration": "none", + "mobileH1TextCase": "none", + "mobileH2FontFamily": "Mulish", + "mobileH2FontWeight": "700", + "mobileH2LineHeight": 32, + "mobileH2FontSize": 28, + "mobileH2LetterSpacing": 0, + "mobileH2ParagraphSpacing": 0, + "mobileH2TextDecoration": "none", + "mobileH2TextCase": "none", + "mobileH3FontFamily": "Mulish", + "mobileH3FontWeight": "700", + "mobileH3LineHeight": 32, + "mobileH3FontSize": 22, + "mobileH3LetterSpacing": 0, + "mobileH3ParagraphSpacing": 0, + "mobileH3TextDecoration": "none", + "mobileH3TextCase": "none" +}; \ No newline at end of file diff --git a/dist/tokens/scss/borders.scss b/dist/tokens/scss/borders.scss new file mode 100644 index 00000000..b0892e9b --- /dev/null +++ b/dist/tokens/scss/borders.scss @@ -0,0 +1,9 @@ + +// Do not edit directly +// Generated on Wed, 20 Sep 2023 20:21:27 GMT + +$radiusBase: 8px; +$radiusCircle: 50%; +$radiusModal: 8px; +$radiusPill: 100px; +$widthBase: 1px; \ No newline at end of file diff --git a/dist/tokens/scss/core-dark-colors.scss b/dist/tokens/scss/core-dark-colors.scss new file mode 100644 index 00000000..050127cf --- /dev/null +++ b/dist/tokens/scss/core-dark-colors.scss @@ -0,0 +1,59 @@ + +// Do not edit directly +// Generated on Wed, 20 Sep 2023 20:21:27 GMT + +$green100: #0C291E; +$green200: #0F3326; +$green300: #13402F; +$green400: #256E53; +$green500: #288563; +$green600: #42AD86; +$green700: #86D6B9; +$green800: #DBFFF1; +$blue100: #0C1B29; +$blue200: #102337; +$blue300: #142C45; +$blue400: #285685; +$blue500: #4577AD; +$blue600: #6597CE; +$blue700: #96BDE7; +$blue800: #D1E8FF; +$red100: #290F16; +$red200: #34101A; +$red300: #451522; +$red400: #8F2843; +$red500: #B23655; +$red600: #C74C6B; +$red700: #EA8AA3; +$red800: #FFD1DD; +$purple100: #200F29; +$purple200: #291433; +$purple300: #33193F; +$purple400: #542F66; +$purple500: #693B80; +$purple600: #865C99; +$purple700: #B990CC; +$purple800: #F0D1FF; +$orange100: #29170C; +$orange200: #361D0E; +$orange300: #4A2915; +$orange400: #8A4E29; +$orange500: #AD6234; +$orange600: #CF7945; +$orange700: #E7AA84; +$orange800: #FFE3D1; +$grey100: #101012; +$grey200: #1A1D21; +$grey300: #22272B; +$grey400: #2D3238; +$grey500: #515357; +$grey600: #98999B; +$grey700: #BCBDBF; +$grey800: #E8E9EA; +$shadesWhite: #FFFFFF; +$shadesBlack: #000000; +$shadesTransparent: transparent; +$brown200: #33260F; +$brown300: #402F13; +$brown400: #6E5225; +$brown700: #D6BA87; \ No newline at end of file diff --git a/dist/tokens/scss/core-light-colors.scss b/dist/tokens/scss/core-light-colors.scss new file mode 100644 index 00000000..77377ff4 --- /dev/null +++ b/dist/tokens/scss/core-light-colors.scss @@ -0,0 +1,68 @@ + +// Do not edit directly +// Generated on Wed, 20 Sep 2023 20:21:27 GMT + +$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; +$grey900: #212933; +$shadesWhite: #FFFFFF; +$shadesBlack: #000000; +$shadesTransparent: transparent; +$yellow100: #faf8f2; +$yellow200: #fcf3dd; +$yellow300: #fce7b1; +$yellow400: #fcd97e; +$yellow500: #fccb4c; +$yellow600: #ffc121; +$yellow700: #f7b200; +$yellow800: #e5a500; +$brown200: #F6F1E5; +$brown300: #E4D9C2; +$brown400: #DACCAA; +$brown700: #5E4D27; \ No newline at end of file diff --git a/dist/tokens/scss/themes/dark.scss b/dist/tokens/scss/themes/dark.scss new file mode 100644 index 00000000..69bb438c --- /dev/null +++ b/dist/tokens/scss/themes/dark.scss @@ -0,0 +1,149 @@ + +// Do not edit directly +// Generated on Wed, 20 Sep 2023 20:21:27 GMT + +$textEmphasis: #E8E9EA; +$textBody: #BCBDBF; +$textSubdued: #98999B; +$textOnBackground: #FFFFFF; +$systemTextLabelEmphasis: #FFFFFF; +$systemTextBase: #BCBDBF; +$systemTextHover: #E8E9EA; +$systemTextActive: #FFFFFF; +$systemBackgroundBase: #1A1D21; +$systemBackgroundMuted: #22272B; +$systemBackgroundMutedHover: #2D3238; +$systemBackgroundMutedActive: #515357; +$systemBackgroundBox: #1A1D21; +$systemBorderBase: #515357; +$systemBorderHover: #98999B; +$systemBorderActive: #BCBDBF; +$systemBorderFocused: #6597CE; +$surfaceLevel0: #101012; +$surfaceLevel1: #101012; +$surfaceLevel2: #22272B; +$surfaceInteractiveBackground: #1A1D21; +$surfaceInteractiveHover: #22272B; +$surfaceInteractiveActive: #2D3238; +$surfaceOverlayDark: #22272B; +$surfaceOverlayTheme: #1A1D21; +$surfaceOverlayBackdrop: #1A1D21; +$primaryTextBase: #1A1D21; +$primaryTextHover: #1A1D21; +$primaryTextActive: #1A1D21; +$primaryBackgroundBase: #E8E9EA; +$primaryBackgroundHover: #FFFFFF; +$primaryBackgroundActive: #FFFFFF; +$primaryBackgroundMuted: #22272B; +$primaryBackgroundMutedHover: #2D3238; +$primaryBackgroundMutedActive: #515357; +$primaryBackgroundBox: #0C291E; +$primaryBorderBase: #515357; +$primaryBorderHover: #98999B; +$primaryBorderActive: #BCBDBF; +$successTextBase: #42AD86; +$successTextHover: #86D6B9; +$successTextActive: #DBFFF1; +$successBackgroundBase: #288563; +$successBackgroundHover: #42AD86; +$successBackgroundActive: #86D6B9; +$successBackgroundMuted: #0F3326; +$successBackgroundMutedHover: #13402F; +$successBackgroundMutedActive: #256E53; +$successBackgroundBox: #0C291E; +$successBorderBase: #256E53; +$successBorderHover: #288563; +$successBorderActive: #42AD86; +$infoTextBase: #6597CE; +$infoTextHover: #96BDE7; +$infoTextActive: #D1E8FF; +$infoBackgroundBase: #4577AD; +$infoBackgroundHover: #285685; +$infoBackgroundActive: #142C45; +$infoBackgroundMuted: #102337; +$infoBackgroundMutedHover: #142C45; +$infoBackgroundMutedActive: #285685; +$infoBackgroundBox: #0C1B29; +$infoBorderBase: #4577AD; +$infoBorderHover: #285685; +$infoBorderActive: #142C45; +$warningTextBase: #CF7945; +$warningTextHover: #E7AA84; +$warningTextActive: #FFE3D1; +$warningBackgroundBase: #AD6234; +$warningBackgroundHover: #CF7945; +$warningBackgroundActive: #E7AA84; +$warningBackgroundMuted: #361D0E; +$warningBackgroundMutedHover: #4A2915; +$warningBackgroundMutedActive: #8A4E29; +$warningBackgroundBox: #29170C; +$warningBorderBase: #8A4E29; +$warningBorderHover: #AD6234; +$warningBorderActive: #CF7945; +$dangerTextBase: #C74C6B; +$dangerTextHover: #EA8AA3; +$dangerTextActive: #FFD1DD; +$dangerBackgroundBase: #B23655; +$dangerBackgroundHover: #C74C6B; +$dangerBackgroundActive: #EA8AA3; +$dangerBackgroundMuted: #34101A; +$dangerBackgroundMutedHover: #451522; +$dangerBackgroundMutedActive: #8F2843; +$dangerBackgroundBox: #290F16; +$dangerBorderBase: #8F2843; +$dangerBorderHover: #B23655; +$dangerBorderActive: #C74C6B; +$highlightTextBase: #865C99; +$highlightTextHover: #B990CC; +$highlightTextActive: #F0D1FF; +$highlightBackgroundBase: #693B80; +$highlightBackgroundHover: #865C99; +$highlightBackgroundActive: #B990CC; +$highlightBackgroundMuted: #291433; +$highlightBackgroundMutedHover: #33193F; +$highlightBackgroundMutedActive: #542F66; +$highlightBackgroundBox: #200F29; +$highlightBorderBase: #542F66; +$highlightBorderHover: #693B80; +$highlightBorderActive: #865C99; +$disabledText: #98999B; +$disabledBackground: #1A1D21; +$disabledNakedBackground: transparent; +$disabledBorder: #515357; +$disabledNakedContent: #22272B; +$disabledInputBackground: #2D3238; +$disabledInputLabelText: #98999B; +$inputBackgroundBase: #1B2228; +$inputBackgroundHover: #2D3238; +$inputBackgroundInformation: #FFFFFF; +$inputTextBase: #FFFFFF; +$inputTextInformation: #BCBDBF; +$inputTextInformationError: #B23655; +$inputTextLabel: #BCBDBF; +$inputTextFloatingLabel: #4577AD; +$inputTextFloatingLabelError: #B23655; +$inputTextPlaceholder: #98999B; +$inputTextActive: #FFFFFF; +$inputBorderBase: #2D3238; +$inputBorderError: #8F2843; +$inputBorderHover: #515357; +$inputBorderEmphasized: #98999B; +$inputBorderEmphasizedHover: #BCBDBF; +$inputBorderActive: #285685; +$separatorBase: #2D3238; +$lightBackgroundBase: #FFFFFF; +$lightBackgroundContrast: #515357; +$lightBackgroundHover: #E8E9EA; +$lightBackgroundActive: #E8E9EA; +$lightTextBase: #2D3238; +$lightLinkMutedBase: #E8E9EA; +$lightLinkMutedHover: #FFFFFF; +$shadowBase: #000000; +$accentForestTextBase: #86D6B9; +$accentForestBackgroundMuted: #0F3326; +$accentForestBackgroundMutedHover: #13402F; +$accentForestBackgroundMutedActive: #256E53; +$accentSandTextBase: #D6BA87; +$accentSandBackgroundMuted: #33260F; +$accentSandBackgroundMutedHover: #402F13; +$accentSandBackgroundMutedActive: #6E5225; \ No newline at end of file diff --git a/dist/tokens/scss/themes/emerson.scss b/dist/tokens/scss/themes/emerson.scss new file mode 100644 index 00000000..a7b67460 --- /dev/null +++ b/dist/tokens/scss/themes/emerson.scss @@ -0,0 +1,148 @@ + +// Do not edit directly +// Generated on Wed, 20 Sep 2023 20:21:27 GMT + +$textEmphasis: #36485C; +$textBody: #475A70; +$textSubdued: #596D84; +$textOnBackground: #FFFFFF; +$systemTextLabelEmphasis: #2E3A47; +$systemTextBase: #475A70; +$systemTextHover: #36485C; +$systemTextActive: #2E3A47; +$systemBackgroundBase: #FFFFFF; +$systemBackgroundMuted: #F5F7FA; +$systemBackgroundMutedHover: #E6EDF5; +$systemBackgroundMutedActive: #C8D3E0; +$systemBackgroundBox: #FCFEFF; +$systemBorderBase: #C8D3E0; +$systemBorderHover: #596D84; +$systemBorderActive: #475A70; +$systemBorderFocused: #3971A8; +$surfaceLevel0: #FFFFFF; +$surfaceLevel1: #FFFFFF; +$surfaceLevel2: #F5F7FA; +$surfaceInteractiveBackground: #FFFFFF; +$surfaceInteractiveHover: #F5F7FA; +$surfaceInteractiveActive: #E6EDF5; +$surfaceOverlayDark: #2E3A47; +$surfaceOverlayTheme: #FFFFFF; +$surfaceOverlayBackdrop: #36485C; +$primaryTextBase: #FFFFFF; +$primaryTextHover: #FFFFFF; +$primaryTextActive: #FFFFFF; +$primaryBackgroundBase: #36485C; +$primaryBackgroundHover: #2E3A47; +$primaryBackgroundActive: #212933; +$primaryBackgroundMuted: #F5F7FA; +$primaryBackgroundMutedHover: #E6EDF5; +$primaryBackgroundMutedActive: #C8D3E0; +$primaryBackgroundBox: #FCFEFF; +$primaryBorderBase: #C8D3E0; +$primaryBorderHover: #596D84; +$primaryBorderActive: #2E3A47; +$successTextBase: #307553; +$successTextHover: #275E43; +$successTextActive: #244C38; +$successBackgroundBase: #307553; +$successBackgroundHover: #275E43; +$successBackgroundActive: #244C38; +$successBackgroundMuted: #EBF2EF; +$successBackgroundMutedHover: #D1E0D9; +$successBackgroundMutedActive: #B6CFC2; +$successBackgroundBox: #FAFFFC; +$successBorderBase: #307553; +$successBorderHover: #275E43; +$successBorderActive: #244C38; +$infoTextBase: #3971A8; +$infoTextHover: #21588F; +$infoTextActive: #194673; +$infoBackgroundBase: #3971A8; +$infoBackgroundHover: #21588F; +$infoBackgroundActive: #194673; +$infoBackgroundMuted: #E6F1FC; +$infoBackgroundMutedHover: #C0D8F0; +$infoBackgroundMutedActive: #88B1D9; +$infoBackgroundBox: #F5FAFF; +$infoBorderBase: #3971A8; +$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: #596D84; +$disabledBackground: #F5F7FA; +$disabledNakedBackground: transparent; +$disabledBorder: #C8D3E0; +$disabledInputBackground: #E6EDF5; +$disabledInputLabelText: #596D84; +$inputBackgroundBase: #F5F7FA; +$inputBackgroundHover: #E6EDF5; +$inputBackgroundInformation: #FFFFFF; +$inputTextBase: #475A70; +$inputTextInformation: #475A70; +$inputTextInformationError: #AF2645; +$inputTextLabel: #475A70; +$inputTextFloatingLabel: #3971A8; +$inputTextFloatingLabelError: #AF2645; +$inputTextPlaceholder: #596D84; +$inputTextActive: #2E3A47; +$inputBorderBase: #E6EDF5; +$inputBorderError: #AF2645; +$inputBorderHover: #C8D3E0; +$inputBorderEmphasized: #596D84; +$inputBorderEmphasizedHover: #475A70; +$inputBorderActive: #3971A8; +$separatorBase: #E6EDF5; +$lightBackgroundBase: #FFFFFF; +$lightBackgroundContrast: #475A70; +$lightBackgroundHover: #F5F7FA; +$lightBackgroundActive: #E6EDF5; +$lightTextBase: #2E3A47; +$lightLinkMutedBase: #F5F7FA; +$lightLinkMutedHover: #FFFFFF; +$shadowBase: #000000; +$accentForestTextBase: #275E43; +$accentForestBackgroundMuted: #EBF2EF; +$accentForestBackgroundMutedHover: #D1E0D9; +$accentForestBackgroundMutedActive: #B6CFC2; +$accentSandTextBase: #5E4D27; +$accentSandBackgroundMuted: #F6F1E5; +$accentSandBackgroundMutedHover: #E4D9C2; +$accentSandBackgroundMutedActive: #DACCAA; \ No newline at end of file diff --git a/dist/tokens/scss/themes/light.scss b/dist/tokens/scss/themes/light.scss new file mode 100644 index 00000000..96f281fd --- /dev/null +++ b/dist/tokens/scss/themes/light.scss @@ -0,0 +1,148 @@ + +// Do not edit directly +// Generated on Wed, 20 Sep 2023 20:21:27 GMT + +$textEmphasis: #2E3A47; +$textBody: #36485C; +$textSubdued: #475A70; +$textOnBackground: #FFFFFF; +$systemTextLabelEmphasis: #2E3A47; +$systemTextBase: #475A70; +$systemTextHover: #36485C; +$systemTextActive: #2E3A47; +$systemBackgroundBase: #FFFFFF; +$systemBackgroundMuted: #F5F7FA; +$systemBackgroundMutedHover: #E6EDF5; +$systemBackgroundMutedActive: #C8D3E0; +$systemBackgroundBox: #FCFEFF; +$systemBorderBase: #C8D3E0; +$systemBorderHover: #596D84; +$systemBorderActive: #475A70; +$systemBorderFocused: #3971A8; +$surfaceLevel0: #FFFFFF; +$surfaceLevel1: #FFFFFF; +$surfaceLevel2: #F5F7FA; +$surfaceInteractiveBackground: #FFFFFF; +$surfaceInteractiveHover: #F5F7FA; +$surfaceInteractiveActive: #E6EDF5; +$surfaceOverlayDark: #2E3A47; +$surfaceOverlayTheme: #FFFFFF; +$surfaceOverlayBackdrop: #36485C; +$primaryTextBase: #FFFFFF; +$primaryTextHover: #FFFFFF; +$primaryTextActive: #FFFFFF; +$primaryBackgroundBase: #36485C; +$primaryBackgroundHover: #2E3A47; +$primaryBackgroundActive: #212933; +$primaryBackgroundMuted: #F5F7FA; +$primaryBackgroundMutedHover: #E6EDF5; +$primaryBackgroundMutedActive: #C8D3E0; +$primaryBackgroundBox: #FCFEFF; +$primaryBorderBase: #C8D3E0; +$primaryBorderHover: #596D84; +$primaryBorderActive: #2E3A47; +$successTextBase: #307553; +$successTextHover: #275E43; +$successTextActive: #244C38; +$successBackgroundBase: #307553; +$successBackgroundHover: #275E43; +$successBackgroundActive: #244C38; +$successBackgroundMuted: #EBF2EF; +$successBackgroundMutedHover: #D1E0D9; +$successBackgroundMutedActive: #B6CFC2; +$successBackgroundBox: #FAFFFC; +$successBorderBase: #307553; +$successBorderHover: #275E43; +$successBorderActive: #244C38; +$infoTextBase: #3971A8; +$infoTextHover: #21588F; +$infoTextActive: #194673; +$infoBackgroundBase: #3971A8; +$infoBackgroundHover: #21588F; +$infoBackgroundActive: #194673; +$infoBackgroundMuted: #E6F1FC; +$infoBackgroundMutedHover: #C0D8F0; +$infoBackgroundMutedActive: #88B1D9; +$infoBackgroundBox: #F5FAFF; +$infoBorderBase: #3971A8; +$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: #596D84; +$disabledBackground: #F5F7FA; +$disabledNakedBackground: transparent; +$disabledBorder: #C8D3E0; +$disabledInputBackground: #E6EDF5; +$disabledInputLabelText: #596D84; +$inputBackgroundBase: #F5F7FA; +$inputBackgroundHover: #E6EDF5; +$inputBackgroundInformation: #FFFFFF; +$inputTextBase: #475A70; +$inputTextInformation: #475A70; +$inputTextInformationError: #AF2645; +$inputTextLabel: #475A70; +$inputTextFloatingLabel: #3971A8; +$inputTextFloatingLabelError: #AF2645; +$inputTextPlaceholder: #596D84; +$inputTextActive: #2E3A47; +$inputBorderBase: #E6EDF5; +$inputBorderError: #AF2645; +$inputBorderHover: #C8D3E0; +$inputBorderEmphasized: #596D84; +$inputBorderEmphasizedHover: #475A70; +$inputBorderActive: #3971A8; +$separatorBase: #E6EDF5; +$lightBackgroundBase: #FFFFFF; +$lightBackgroundContrast: #475A70; +$lightBackgroundHover: #F5F7FA; +$lightBackgroundActive: #E6EDF5; +$lightTextBase: #2E3A47; +$lightLinkMutedBase: #F5F7FA; +$lightLinkMutedHover: #FFFFFF; +$shadowBase: #36485C; +$accentForestTextBase: #275E43; +$accentForestBackgroundMuted: #EBF2EF; +$accentForestBackgroundMutedHover: #D1E0D9; +$accentForestBackgroundMutedActive: #B6CFC2; +$accentSandTextBase: #5E4D27; +$accentSandBackgroundMuted: #F6F1E5; +$accentSandBackgroundMutedHover: #E4D9C2; +$accentSandBackgroundMutedActive: #DACCAA; \ No newline at end of file diff --git a/dist/tokens/scss/themes/lightDS3.scss b/dist/tokens/scss/themes/lightDS3.scss new file mode 100644 index 00000000..cbf529bf --- /dev/null +++ b/dist/tokens/scss/themes/lightDS3.scss @@ -0,0 +1,148 @@ + +// Do not edit directly +// Generated on Wed, 20 Sep 2023 20:21:27 GMT + +$textEmphasis: #36485C; +$textBody: #475A70; +$textSubdued: #596D84; +$textOnBackground: #FFFFFF; +$systemTextLabelEmphasis: #2E3A47; +$systemTextBase: #475A70; +$systemTextHover: #36485C; +$systemTextActive: #2E3A47; +$systemBackgroundBase: #FFFFFF; +$systemBackgroundMuted: #F5F7FA; +$systemBackgroundMutedHover: #E6EDF5; +$systemBackgroundMutedActive: #C8D3E0; +$systemBackgroundBox: #FCFEFF; +$systemBorderBase: #C8D3E0; +$systemBorderHover: #596D84; +$systemBorderActive: #475A70; +$systemBorderFocused: #3971A8; +$surfaceLevel0: #F5F7FA; +$surfaceLevel1: #FFFFFF; +$surfaceLevel2: #F5F7FA; +$surfaceInteractiveBackground: #FFFFFF; +$surfaceInteractiveHover: #F5F7FA; +$surfaceInteractiveActive: #E6EDF5; +$surfaceOverlayDark: #2E3A47; +$surfaceOverlayTheme: #FFFFFF; +$surfaceOverlayBackdrop: #36485C; +$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; +$successTextBase: #307553; +$successTextHover: #275E43; +$successTextActive: #244C38; +$successBackgroundBase: #307553; +$successBackgroundHover: #275E43; +$successBackgroundActive: #244C38; +$successBackgroundMuted: #EBF2EF; +$successBackgroundMutedHover: #D1E0D9; +$successBackgroundMutedActive: #B6CFC2; +$successBackgroundBox: #FAFFFC; +$successBorderBase: #307553; +$successBorderHover: #275E43; +$successBorderActive: #244C38; +$infoTextBase: #3971A8; +$infoTextHover: #21588F; +$infoTextActive: #194673; +$infoBackgroundBase: #3971A8; +$infoBackgroundHover: #21588F; +$infoBackgroundActive: #194673; +$infoBackgroundMuted: #E6F1FC; +$infoBackgroundMutedHover: #C0D8F0; +$infoBackgroundMutedActive: #88B1D9; +$infoBackgroundBox: #F5FAFF; +$infoBorderBase: #3971A8; +$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: #596D84; +$disabledBackground: #F5F7FA; +$disabledNakedBackground: transparent; +$disabledBorder: #C8D3E0; +$disabledInputBackground: #E6EDF5; +$disabledInputLabelText: #596D84; +$inputBackgroundBase: #F5F7FA; +$inputBackgroundHover: #E6EDF5; +$inputBackgroundInformation: #FFFFFF; +$inputTextBase: #475A70; +$inputTextInformation: #475A70; +$inputTextInformationError: #AF2645; +$inputTextLabel: #475A70; +$inputTextFloatingLabel: #3971A8; +$inputTextFloatingLabelError: #AF2645; +$inputTextPlaceholder: #596D84; +$inputTextActive: #2E3A47; +$inputBorderBase: #E6EDF5; +$inputBorderError: #AF2645; +$inputBorderHover: #C8D3E0; +$inputBorderEmphasized: #596D84; +$inputBorderEmphasizedHover: #475A70; +$inputBorderActive: #3971A8; +$separatorBase: #E6EDF5; +$lightBackgroundBase: #FFFFFF; +$lightBackgroundContrast: #475A70; +$lightBackgroundHover: #F5F7FA; +$lightBackgroundActive: #E6EDF5; +$lightTextBase: #2E3A47; +$lightLinkMutedBase: #F5F7FA; +$lightLinkMutedHover: #FFFFFF; +$shadowBase: #36485C; +$accentForestTextBase: #275E43; +$accentForestBackgroundMuted: #EBF2EF; +$accentForestBackgroundMutedHover: #D1E0D9; +$accentForestBackgroundMutedActive: #B6CFC2; +$accentSandTextBase: #5E4D27; +$accentSandBackgroundMuted: #F6F1E5; +$accentSandBackgroundMutedHover: #E4D9C2; +$accentSandBackgroundMutedActive: #DACCAA; \ No newline at end of file diff --git a/dist/tokens/scss/typography.scss b/dist/tokens/scss/typography.scss new file mode 100644 index 00000000..f65d6bf2 --- /dev/null +++ b/dist/tokens/scss/typography.scss @@ -0,0 +1,116 @@ + +// Do not edit directly +// Generated on Wed, 20 Sep 2023 20:21:27 GMT + +$letterSpacingBase: 0; +$paragraphSpacingBase: 0; +$textDecorationBase: none; +$textCaseBase: none; +$size3xlarge: 40px; +$size2xlarge: 32px; +$sizeXlarge: 24px; +$sizeLarge: 20px; +$sizeNormal: 16px; +$sizeSmall: 14px; +$sizeXsmall: 12px; +$sizeMobile3xlarge: 32px; +$sizeMobile2xlarge: 28px; +$sizeMobileXlarge: 22px; +$lineHeightXlarge: 40px; +$lineHeightLarge: 32px; +$lineHeightNormal: 24px; +$lineHeightSmall: 16px; +$fontFamilySansSerif: Mulish; +$weightSemiBold: 700; +$weightBase: 500; +$weightLight: 400; +$weightStrong: 600; +$weightBold: 900; +$h1FontFamily: Mulish; +$h1FontWeight: 700; +$h1LineHeight: 40px; +$h1FontSize: 40px; +$h1LetterSpacing: 0; +$h1ParagraphSpacing: 0; +$h1TextDecoration: none; +$h1TextCase: none; +$h2FontFamily: Mulish; +$h2FontWeight: 700; +$h2LineHeight: 40px; +$h2FontSize: 32px; +$h2LetterSpacing: 0; +$h2ParagraphSpacing: 0; +$h2TextDecoration: none; +$h2TextCase: none; +$h3FontFamily: Mulish; +$h3FontWeight: 700; +$h3LineHeight: 32px; +$h3FontSize: 24px; +$h3LetterSpacing: 0; +$h3ParagraphSpacing: 0; +$h3TextDecoration: none; +$h3TextCase: none; +$h4FontFamily: Mulish; +$h4FontWeight: 700; +$h4LineHeight: 24px; +$h4FontSize: 20px; +$h4LetterSpacing: 0; +$h4ParagraphSpacing: 0; +$h4TextDecoration: none; +$h4TextCase: none; +$h5FontFamily: Mulish; +$h5FontWeight: 700; +$h5LineHeight: 24px; +$h5FontSize: 16px; +$h5LetterSpacing: 0; +$h5ParagraphSpacing: 0; +$h5TextDecoration: none; +$h5TextCase: none; +$bodyFontFamily: Mulish; +$bodyFontWeight: 500; +$bodyLineHeight: 24px; +$bodyFontSize: 16px; +$bodyLetterSpacing: 0; +$bodyParagraphSpacing: 0; +$bodyTextDecoration: none; +$bodyTextCase: none; +$footnoteFontFamily: Mulish; +$footnoteFontWeight: 500; +$footnoteLineHeight: 16px; +$footnoteFontSize: 14px; +$footnoteLetterSpacing: 0; +$footnoteParagraphSpacing: 0; +$footnoteTextDecoration: none; +$footnoteTextCase: none; +$captionFontFamily: Mulish; +$captionFontWeight: 500; +$captionLineHeight: 16px; +$captionFontSize: 12px; +$captionLetterSpacing: 0; +$captionParagraphSpacing: 0; +$captionTextDecoration: none; +$captionTextCase: none; +$mobileH1FontFamily: Mulish; +$mobileH1FontWeight: 700; +$mobileH1LineHeight: 40px; +$mobileH1FontSize: 32px; +$mobileH1LetterSpacing: 0; +$mobileH1ParagraphSpacing: 0; +$mobileH1TextDecoration: none; +$mobileH1TextCase: none; +$mobileH2FontFamily: Mulish; +$mobileH2FontWeight: 700; +$mobileH2LineHeight: 32px; +$mobileH2FontSize: 28px; +$mobileH2LetterSpacing: 0; +$mobileH2ParagraphSpacing: 0; +$mobileH2TextDecoration: none; +$mobileH2TextCase: none; +$mobileH3FontFamily: Mulish; +$mobileH3FontWeight: 700; +$mobileH3LineHeight: 32px; +$mobileH3FontSize: 22px; +$mobileH3LetterSpacing: 0; +$mobileH3ParagraphSpacing: 0; +$mobileH3TextDecoration: none; +$mobileH3TextCase: none; \ No newline at end of file diff --git a/dist/tokens/ts/borders.d.ts b/dist/tokens/ts/borders.d.ts new file mode 100644 index 00000000..efc4c384 --- /dev/null +++ b/dist/tokens/ts/borders.d.ts @@ -0,0 +1,10 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +export const radiusBase : string; +export const radiusCircle : string; +export const radiusModal : string; +export const radiusPill : string; +export const widthBase : string; \ No newline at end of file diff --git a/dist/tokens/ts/borders.js b/dist/tokens/ts/borders.js new file mode 100644 index 00000000..8e7a2f2b --- /dev/null +++ b/dist/tokens/ts/borders.js @@ -0,0 +1,12 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +module.exports = { + "radiusBase": "8px", + "radiusCircle": "50%", + "radiusModal": "8px", + "radiusPill": "100px", + "widthBase": "1px" +}; \ No newline at end of file diff --git a/dist/tokens/ts/core-dark-colors.d.ts b/dist/tokens/ts/core-dark-colors.d.ts new file mode 100644 index 00000000..14bc7145 --- /dev/null +++ b/dist/tokens/ts/core-dark-colors.d.ts @@ -0,0 +1,13 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +export const green : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string}; +export const blue : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string}; +export const red : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string}; +export const purple : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string}; +export const orange : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string}; +export const grey : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string}; +export const shades : {white : string,black : string,transparent : string}; +export const brown : {200 : string,300 : string,400 : string,700 : string}; \ No newline at end of file diff --git a/dist/tokens/ts/core-dark-colors.js b/dist/tokens/ts/core-dark-colors.js new file mode 100644 index 00000000..9c2f10cb --- /dev/null +++ b/dist/tokens/ts/core-dark-colors.js @@ -0,0 +1,13 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +module.exports = {green : {100 : "#0C291E",200 : "#0F3326",300 : "#13402F",400 : "#256E53",500 : "#288563",600 : "#42AD86",700 : "#86D6B9",800 : "#DBFFF1"}, +blue : {100 : "#0C1B29",200 : "#102337",300 : "#142C45",400 : "#285685",500 : "#4577AD",600 : "#6597CE",700 : "#96BDE7",800 : "#D1E8FF"}, +red : {100 : "#290F16",200 : "#34101A",300 : "#451522",400 : "#8F2843",500 : "#B23655",600 : "#C74C6B",700 : "#EA8AA3",800 : "#FFD1DD"}, +purple : {100 : "#200F29",200 : "#291433",300 : "#33193F",400 : "#542F66",500 : "#693B80",600 : "#865C99",700 : "#B990CC",800 : "#F0D1FF"}, +orange : {100 : "#29170C",200 : "#361D0E",300 : "#4A2915",400 : "#8A4E29",500 : "#AD6234",600 : "#CF7945",700 : "#E7AA84",800 : "#FFE3D1"}, +grey : {100 : "#101012",200 : "#1A1D21",300 : "#22272B",400 : "#2D3238",500 : "#515357",600 : "#98999B",700 : "#BCBDBF",800 : "#E8E9EA"}, +shades : {white : "#FFFFFF",black : "#000000",transparent : "transparent"}, +brown : {200 : "#33260F",300 : "#402F13",400 : "#6E5225",700 : "#D6BA87"},}; \ No newline at end of file diff --git a/dist/tokens/ts/core-light-colors.d.ts b/dist/tokens/ts/core-light-colors.d.ts new file mode 100644 index 00000000..2f9121fc --- /dev/null +++ b/dist/tokens/ts/core-light-colors.d.ts @@ -0,0 +1,14 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +export const green : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string}; +export const blue : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string}; +export const red : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string}; +export const purple : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string}; +export const orange : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string}; +export const grey : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string,900 : string}; +export const shades : {white : string,black : string,transparent : string}; +export const yellow : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string}; +export const brown : {200 : string,300 : string,400 : string,700 : string}; \ No newline at end of file diff --git a/dist/tokens/ts/core-light-colors.js b/dist/tokens/ts/core-light-colors.js new file mode 100644 index 00000000..dccff491 --- /dev/null +++ b/dist/tokens/ts/core-light-colors.js @@ -0,0 +1,14 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +module.exports = {green : {100 : "#FAFFFC",200 : "#EBF2EF",300 : "#D1E0D9",400 : "#B6CFC2",500 : "#86B09B",600 : "#307553",700 : "#275E43",800 : "#244C38"}, +blue : {100 : "#F5FAFF",200 : "#E6F1FC",300 : "#C0D8F0",400 : "#88B1D9",500 : "#5D96CF",600 : "#3971A8",700 : "#21588F",800 : "#194673"}, +red : {100 : "#FFF7F9",200 : "#FEEEF2",300 : "#F0C4CD",400 : "#E296A6",500 : "#C6516A",600 : "#AF2645",700 : "#980B29",800 : "#800D25"}, +purple : {100 : "#FCFAFF",200 : "#F2ECFE",300 : "#D7CEE9",400 : "#B9ABD5",500 : "#8471AB",600 : "#533E7D",700 : "#3B2566",800 : "#2A174F"}, +orange : {100 : "#FFFAF5",200 : "#FFF3E8",300 : "#F3D8C0",400 : "#E7B88F",500 : "#CF8545",600 : "#B4631D",700 : "#8E4D14",800 : "#784213"}, +grey : {100 : "#FCFEFF",200 : "#F5F7FA",300 : "#E6EDF5",400 : "#C8D3E0",500 : "#596D84",600 : "#475A70",700 : "#36485C",800 : "#2E3A47",900 : "#212933"}, +shades : {white : "#FFFFFF",black : "#000000",transparent : "transparent"}, +yellow : {100 : "#faf8f2",200 : "#fcf3dd",300 : "#fce7b1",400 : "#fcd97e",500 : "#fccb4c",600 : "#ffc121",700 : "#f7b200",800 : "#e5a500"}, +brown : {200 : "#F6F1E5",300 : "#E4D9C2",400 : "#DACCAA",700 : "#5E4D27"},}; \ No newline at end of file diff --git a/dist/tokens/ts/themes/dark.d.ts b/dist/tokens/ts/themes/dark.d.ts new file mode 100644 index 00000000..5a1d59d4 --- /dev/null +++ b/dist/tokens/ts/themes/dark.d.ts @@ -0,0 +1,21 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 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 success : {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,nakedContent : 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}; +export const shadow : {base : string}; +export const accent : {forestTextBase : string,forestBackgroundMuted : string,forestBackgroundMutedHover : string,forestBackgroundMutedActive : string,sandTextBase : string,sandBackgroundMuted : string,sandBackgroundMutedHover : string,sandBackgroundMutedActive : string};export const boxShadows: {cardBase : string,cardHover : string,popoverBase : string,modalBase : string};export const opacity: {overlayBackdrop : number}; \ No newline at end of file diff --git a/dist/tokens/ts/themes/dark.js b/dist/tokens/ts/themes/dark.js new file mode 100644 index 00000000..fcd64c59 --- /dev/null +++ b/dist/tokens/ts/themes/dark.js @@ -0,0 +1,21 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +module.exports = {theme: "dark", +text : {emphasis : "#E8E9EA",body : "#BCBDBF",subdued : "#98999B",onBackground : "#FFFFFF"}, +system : {textLabelEmphasis : "#FFFFFF",textBase : "#BCBDBF",textHover : "#E8E9EA",textActive : "#FFFFFF",backgroundBase : "#1A1D21",backgroundMuted : "#22272B",backgroundMutedHover : "#2D3238",backgroundMutedActive : "#515357",backgroundBox : "#1A1D21",borderBase : "#515357",borderHover : "#98999B",borderActive : "#BCBDBF",borderFocused : "#6597CE"}, +surface : {level0 : "#101012",level1 : "#101012",level2 : "#22272B",interactiveBackground : "#1A1D21",interactiveHover : "#22272B",interactiveActive : "#2D3238",overlayDark : "#22272B",overlayTheme : "#1A1D21",overlayBackdrop : "#1A1D21"}, +primary : {textBase : "#1A1D21",textHover : "#1A1D21",textActive : "#1A1D21",backgroundBase : "#E8E9EA",backgroundHover : "#FFFFFF",backgroundActive : "#FFFFFF",backgroundMuted : "#22272B",backgroundMutedHover : "#2D3238",backgroundMutedActive : "#515357",backgroundBox : "#0C291E",borderBase : "#515357",borderHover : "#98999B",borderActive : "#BCBDBF"}, +success : {textBase : "#42AD86",textHover : "#86D6B9",textActive : "#DBFFF1",backgroundBase : "#288563",backgroundHover : "#42AD86",backgroundActive : "#86D6B9",backgroundMuted : "#0F3326",backgroundMutedHover : "#13402F",backgroundMutedActive : "#256E53",backgroundBox : "#0C291E",borderBase : "#256E53",borderHover : "#288563",borderActive : "#42AD86"}, +info : {textBase : "#6597CE",textHover : "#96BDE7",textActive : "#D1E8FF",backgroundBase : "#4577AD",backgroundHover : "#285685",backgroundActive : "#142C45",backgroundMuted : "#102337",backgroundMutedHover : "#142C45",backgroundMutedActive : "#285685",backgroundBox : "#0C1B29",borderBase : "#4577AD",borderHover : "#285685",borderActive : "#142C45"}, +warning : {textBase : "#CF7945",textHover : "#E7AA84",textActive : "#FFE3D1",backgroundBase : "#AD6234",backgroundHover : "#CF7945",backgroundActive : "#E7AA84",backgroundMuted : "#361D0E",backgroundMutedHover : "#4A2915",backgroundMutedActive : "#8A4E29",backgroundBox : "#29170C",borderBase : "#8A4E29",borderHover : "#AD6234",borderActive : "#CF7945"}, +danger : {textBase : "#C74C6B",textHover : "#EA8AA3",textActive : "#FFD1DD",backgroundBase : "#B23655",backgroundHover : "#C74C6B",backgroundActive : "#EA8AA3",backgroundMuted : "#34101A",backgroundMutedHover : "#451522",backgroundMutedActive : "#8F2843",backgroundBox : "#290F16",borderBase : "#8F2843",borderHover : "#B23655",borderActive : "#C74C6B"}, +highlight : {textBase : "#865C99",textHover : "#B990CC",textActive : "#F0D1FF",backgroundBase : "#693B80",backgroundHover : "#865C99",backgroundActive : "#B990CC",backgroundMuted : "#291433",backgroundMutedHover : "#33193F",backgroundMutedActive : "#542F66",backgroundBox : "#200F29",borderBase : "#542F66",borderHover : "#693B80",borderActive : "#865C99"}, +disabled : {text : "#98999B",background : "#1A1D21",nakedBackground : "transparent",border : "#515357",nakedContent : "#22272B",inputBackground : "#2D3238",inputLabelText : "#98999B"}, +input : {backgroundBase : "#1B2228",backgroundHover : "#2D3238",backgroundInformation : "#FFFFFF",textBase : "#FFFFFF",textInformation : "#BCBDBF",textInformationError : "#B23655",textLabel : "#BCBDBF",textFloatingLabel : "#4577AD",textFloatingLabelError : "#B23655",textPlaceholder : "#98999B",textActive : "#FFFFFF",borderBase : "#2D3238",borderError : "#8F2843",borderHover : "#515357",borderEmphasized : "#98999B",borderEmphasizedHover : "#BCBDBF",borderActive : "#285685"}, +separator : {base : "#2D3238"}, +light : {backgroundBase : "#FFFFFF",backgroundContrast : "#515357",backgroundHover : "#E8E9EA",backgroundActive : "#E8E9EA",textBase : "#2D3238",linkMutedBase : "#E8E9EA",linkMutedHover : "#FFFFFF"}, +shadow : {base : "#000000"}, +accent : {forestTextBase : "#86D6B9",forestBackgroundMuted : "#0F3326",forestBackgroundMutedHover : "#13402F",forestBackgroundMutedActive : "#256E53",sandTextBase : "#D6BA87",sandBackgroundMuted : "#33260F",sandBackgroundMutedHover : "#402F13",sandBackgroundMutedActive : "#6E5225"},boxShadows: {cardBase : "0px 1px 2px 0px #00000052",cardHover : "0px 2px 8px 0px #00000066",popoverBase : "0px 4px 16px 0px #00000052",modalBase : "0px 4px 16px 0px #0000007a"},opacity: {overlayBackdrop : 0.8},}; \ No newline at end of file diff --git a/dist/tokens/ts/themes/emerson.d.ts b/dist/tokens/ts/themes/emerson.d.ts new file mode 100644 index 00000000..0aff7d15 --- /dev/null +++ b/dist/tokens/ts/themes/emerson.d.ts @@ -0,0 +1,21 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 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 success : {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}; +export const shadow : {base : string}; +export const accent : {forestTextBase : string,forestBackgroundMuted : string,forestBackgroundMutedHover : string,forestBackgroundMutedActive : string,sandTextBase : string,sandBackgroundMuted : string,sandBackgroundMutedHover : string,sandBackgroundMutedActive : string};export const boxShadows: {cardBase : string,cardHover : string,popoverBase : string,modalBase : string};export const opacity: {overlayBackdrop : number}; \ No newline at end of file diff --git a/dist/tokens/ts/themes/emerson.js b/dist/tokens/ts/themes/emerson.js new file mode 100644 index 00000000..fe34060d --- /dev/null +++ b/dist/tokens/ts/themes/emerson.js @@ -0,0 +1,21 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +module.exports = {theme: "emerson", +text : {emphasis : "#36485C",body : "#475A70",subdued : "#596D84",onBackground : "#FFFFFF"}, +system : {textLabelEmphasis : "#2E3A47",textBase : "#475A70",textHover : "#36485C",textActive : "#2E3A47",backgroundBase : "#FFFFFF",backgroundMuted : "#F5F7FA",backgroundMutedHover : "#E6EDF5",backgroundMutedActive : "#C8D3E0",backgroundBox : "#FCFEFF",borderBase : "#C8D3E0",borderHover : "#596D84",borderActive : "#475A70",borderFocused : "#3971A8"}, +surface : {level0 : "#FFFFFF",level1 : "#FFFFFF",level2 : "#F5F7FA",interactiveBackground : "#FFFFFF",interactiveHover : "#F5F7FA",interactiveActive : "#E6EDF5",overlayDark : "#2E3A47",overlayTheme : "#FFFFFF",overlayBackdrop : "#36485C"}, +primary : {textBase : "#FFFFFF",textHover : "#FFFFFF",textActive : "#FFFFFF",backgroundBase : "#36485C",backgroundHover : "#2E3A47",backgroundActive : "#212933",backgroundMuted : "#F5F7FA",backgroundMutedHover : "#E6EDF5",backgroundMutedActive : "#C8D3E0",backgroundBox : "#FCFEFF",borderBase : "#C8D3E0",borderHover : "#596D84",borderActive : "#2E3A47"}, +success : {textBase : "#307553",textHover : "#275E43",textActive : "#244C38",backgroundBase : "#307553",backgroundHover : "#275E43",backgroundActive : "#244C38",backgroundMuted : "#EBF2EF",backgroundMutedHover : "#D1E0D9",backgroundMutedActive : "#B6CFC2",backgroundBox : "#FAFFFC",borderBase : "#307553",borderHover : "#275E43",borderActive : "#244C38"}, +info : {textBase : "#3971A8",textHover : "#21588F",textActive : "#194673",backgroundBase : "#3971A8",backgroundHover : "#21588F",backgroundActive : "#194673",backgroundMuted : "#E6F1FC",backgroundMutedHover : "#C0D8F0",backgroundMutedActive : "#88B1D9",backgroundBox : "#F5FAFF",borderBase : "#3971A8",borderHover : "#21588F",borderActive : "#194673"}, +warning : {textBase : "#B4631D",textHover : "#8E4D14",textActive : "#784213",backgroundBase : "#B4631D",backgroundHover : "#8E4D14",backgroundActive : "#784213",backgroundMuted : "#FFF3E8",backgroundMutedHover : "#F3D8C0",backgroundMutedActive : "#E7B88F",backgroundBox : "#FFFAF5",borderBase : "#B4631D",borderHover : "#8E4D14",borderActive : "#784213"}, +danger : {textBase : "#AF2645",textHover : "#980B29",textActive : "#800D25",backgroundBase : "#AF2645",backgroundHover : "#980B29",backgroundActive : "#800D25",backgroundMuted : "#FEEEF2",backgroundMutedHover : "#F0C4CD",backgroundMutedActive : "#E296A6",backgroundBox : "#FFF7F9",borderBase : "#AF2645",borderHover : "#980B29",borderActive : "#800D25"}, +highlight : {textBase : "#533E7D",textHover : "#3B2566",textActive : "#2A174F",backgroundBase : "#533E7D",backgroundHover : "#3B2566",backgroundActive : "#2A174F",backgroundMuted : "#F2ECFE",backgroundMutedHover : "#D7CEE9",backgroundMutedActive : "#B9ABD5",backgroundBox : "#FCFAFF",borderBase : "#533E7D",borderHover : "#3B2566",borderActive : "#2A174F"}, +disabled : {text : "#596D84",background : "#F5F7FA",nakedBackground : "transparent",border : "#C8D3E0",inputBackground : "#E6EDF5",inputLabelText : "#596D84"}, +input : {backgroundBase : "#F5F7FA",backgroundHover : "#E6EDF5",backgroundInformation : "#FFFFFF",textBase : "#475A70",textInformation : "#475A70",textInformationError : "#AF2645",textLabel : "#475A70",textFloatingLabel : "#3971A8",textFloatingLabelError : "#AF2645",textPlaceholder : "#596D84",textActive : "#2E3A47",borderBase : "#E6EDF5",borderError : "#AF2645",borderHover : "#C8D3E0",borderEmphasized : "#596D84",borderEmphasizedHover : "#475A70",borderActive : "#3971A8"}, +separator : {base : "#E6EDF5"}, +light : {backgroundBase : "#FFFFFF",backgroundContrast : "#475A70",backgroundHover : "#F5F7FA",backgroundActive : "#E6EDF5",textBase : "#2E3A47",linkMutedBase : "#F5F7FA",linkMutedHover : "#FFFFFF"}, +shadow : {base : "#000000"}, +accent : {forestTextBase : "#275E43",forestBackgroundMuted : "#EBF2EF",forestBackgroundMutedHover : "#D1E0D9",forestBackgroundMutedActive : "#B6CFC2",sandTextBase : "#5E4D27",sandBackgroundMuted : "#F6F1E5",sandBackgroundMutedHover : "#E4D9C2",sandBackgroundMutedActive : "#DACCAA"},boxShadows: {cardBase : "0px 1px 2px 0px #00000029",cardHover : "0px 2px 8px 0px #00000033",popoverBase : "0px 4px 16px 0px #00000029",modalBase : "0px 8px 32px 0px #0000003d"},opacity: {overlayBackdrop : 0.2},}; \ No newline at end of file diff --git a/dist/tokens/ts/themes/light.d.ts b/dist/tokens/ts/themes/light.d.ts new file mode 100644 index 00000000..0aff7d15 --- /dev/null +++ b/dist/tokens/ts/themes/light.d.ts @@ -0,0 +1,21 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 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 success : {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}; +export const shadow : {base : string}; +export const accent : {forestTextBase : string,forestBackgroundMuted : string,forestBackgroundMutedHover : string,forestBackgroundMutedActive : string,sandTextBase : string,sandBackgroundMuted : string,sandBackgroundMutedHover : string,sandBackgroundMutedActive : string};export const boxShadows: {cardBase : string,cardHover : string,popoverBase : string,modalBase : string};export const opacity: {overlayBackdrop : number}; \ No newline at end of file diff --git a/dist/tokens/ts/themes/light.js b/dist/tokens/ts/themes/light.js new file mode 100644 index 00000000..59bf0e7b --- /dev/null +++ b/dist/tokens/ts/themes/light.js @@ -0,0 +1,21 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +module.exports = {theme: "light", +text : {emphasis : "#2E3A47",body : "#36485C",subdued : "#475A70",onBackground : "#FFFFFF"}, +system : {textLabelEmphasis : "#2E3A47",textBase : "#475A70",textHover : "#36485C",textActive : "#2E3A47",backgroundBase : "#FFFFFF",backgroundMuted : "#F5F7FA",backgroundMutedHover : "#E6EDF5",backgroundMutedActive : "#C8D3E0",backgroundBox : "#FCFEFF",borderBase : "#C8D3E0",borderHover : "#596D84",borderActive : "#475A70",borderFocused : "#3971A8"}, +surface : {level0 : "#FFFFFF",level1 : "#FFFFFF",level2 : "#F5F7FA",interactiveBackground : "#FFFFFF",interactiveHover : "#F5F7FA",interactiveActive : "#E6EDF5",overlayDark : "#2E3A47",overlayTheme : "#FFFFFF",overlayBackdrop : "#36485C"}, +primary : {textBase : "#FFFFFF",textHover : "#FFFFFF",textActive : "#FFFFFF",backgroundBase : "#36485C",backgroundHover : "#2E3A47",backgroundActive : "#212933",backgroundMuted : "#F5F7FA",backgroundMutedHover : "#E6EDF5",backgroundMutedActive : "#C8D3E0",backgroundBox : "#FCFEFF",borderBase : "#C8D3E0",borderHover : "#596D84",borderActive : "#2E3A47"}, +success : {textBase : "#307553",textHover : "#275E43",textActive : "#244C38",backgroundBase : "#307553",backgroundHover : "#275E43",backgroundActive : "#244C38",backgroundMuted : "#EBF2EF",backgroundMutedHover : "#D1E0D9",backgroundMutedActive : "#B6CFC2",backgroundBox : "#FAFFFC",borderBase : "#307553",borderHover : "#275E43",borderActive : "#244C38"}, +info : {textBase : "#3971A8",textHover : "#21588F",textActive : "#194673",backgroundBase : "#3971A8",backgroundHover : "#21588F",backgroundActive : "#194673",backgroundMuted : "#E6F1FC",backgroundMutedHover : "#C0D8F0",backgroundMutedActive : "#88B1D9",backgroundBox : "#F5FAFF",borderBase : "#3971A8",borderHover : "#21588F",borderActive : "#194673"}, +warning : {textBase : "#B4631D",textHover : "#8E4D14",textActive : "#784213",backgroundBase : "#B4631D",backgroundHover : "#8E4D14",backgroundActive : "#784213",backgroundMuted : "#FFF3E8",backgroundMutedHover : "#F3D8C0",backgroundMutedActive : "#E7B88F",backgroundBox : "#FFFAF5",borderBase : "#B4631D",borderHover : "#8E4D14",borderActive : "#784213"}, +danger : {textBase : "#AF2645",textHover : "#980B29",textActive : "#800D25",backgroundBase : "#AF2645",backgroundHover : "#980B29",backgroundActive : "#800D25",backgroundMuted : "#FEEEF2",backgroundMutedHover : "#F0C4CD",backgroundMutedActive : "#E296A6",backgroundBox : "#FFF7F9",borderBase : "#AF2645",borderHover : "#980B29",borderActive : "#800D25"}, +highlight : {textBase : "#533E7D",textHover : "#3B2566",textActive : "#2A174F",backgroundBase : "#533E7D",backgroundHover : "#3B2566",backgroundActive : "#2A174F",backgroundMuted : "#F2ECFE",backgroundMutedHover : "#D7CEE9",backgroundMutedActive : "#B9ABD5",backgroundBox : "#FCFAFF",borderBase : "#533E7D",borderHover : "#3B2566",borderActive : "#2A174F"}, +disabled : {text : "#596D84",background : "#F5F7FA",nakedBackground : "transparent",border : "#C8D3E0",inputBackground : "#E6EDF5",inputLabelText : "#596D84"}, +input : {backgroundBase : "#F5F7FA",backgroundHover : "#E6EDF5",backgroundInformation : "#FFFFFF",textBase : "#475A70",textInformation : "#475A70",textInformationError : "#AF2645",textLabel : "#475A70",textFloatingLabel : "#3971A8",textFloatingLabelError : "#AF2645",textPlaceholder : "#596D84",textActive : "#2E3A47",borderBase : "#E6EDF5",borderError : "#AF2645",borderHover : "#C8D3E0",borderEmphasized : "#596D84",borderEmphasizedHover : "#475A70",borderActive : "#3971A8"}, +separator : {base : "#E6EDF5"}, +light : {backgroundBase : "#FFFFFF",backgroundContrast : "#475A70",backgroundHover : "#F5F7FA",backgroundActive : "#E6EDF5",textBase : "#2E3A47",linkMutedBase : "#F5F7FA",linkMutedHover : "#FFFFFF"}, +shadow : {base : "#36485C"}, +accent : {forestTextBase : "#275E43",forestBackgroundMuted : "#EBF2EF",forestBackgroundMutedHover : "#D1E0D9",forestBackgroundMutedActive : "#B6CFC2",sandTextBase : "#5E4D27",sandBackgroundMuted : "#F6F1E5",sandBackgroundMutedHover : "#E4D9C2",sandBackgroundMutedActive : "#DACCAA"},boxShadows: {cardBase : "0px 1px 2px 0px #36485c29",cardHover : "0px 2px 8px 0px #36485c33",popoverBase : "0px 4px 16px 0px #36485c29",modalBase : "0px 8px 32px 0px #36485c3d"},opacity: {overlayBackdrop : 0.2},}; \ No newline at end of file diff --git a/dist/tokens/ts/themes/lightDS3.d.ts b/dist/tokens/ts/themes/lightDS3.d.ts new file mode 100644 index 00000000..0aff7d15 --- /dev/null +++ b/dist/tokens/ts/themes/lightDS3.d.ts @@ -0,0 +1,21 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 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 success : {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}; +export const shadow : {base : string}; +export const accent : {forestTextBase : string,forestBackgroundMuted : string,forestBackgroundMutedHover : string,forestBackgroundMutedActive : string,sandTextBase : string,sandBackgroundMuted : string,sandBackgroundMutedHover : string,sandBackgroundMutedActive : string};export const boxShadows: {cardBase : string,cardHover : string,popoverBase : string,modalBase : string};export const opacity: {overlayBackdrop : number}; \ No newline at end of file diff --git a/dist/tokens/ts/themes/lightDS3.js b/dist/tokens/ts/themes/lightDS3.js new file mode 100644 index 00000000..2f1e2ff0 --- /dev/null +++ b/dist/tokens/ts/themes/lightDS3.js @@ -0,0 +1,21 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +module.exports = {theme: "lightDS3", +text : {emphasis : "#36485C",body : "#475A70",subdued : "#596D84",onBackground : "#FFFFFF"}, +system : {textLabelEmphasis : "#2E3A47",textBase : "#475A70",textHover : "#36485C",textActive : "#2E3A47",backgroundBase : "#FFFFFF",backgroundMuted : "#F5F7FA",backgroundMutedHover : "#E6EDF5",backgroundMutedActive : "#C8D3E0",backgroundBox : "#FCFEFF",borderBase : "#C8D3E0",borderHover : "#596D84",borderActive : "#475A70",borderFocused : "#3971A8"}, +surface : {level0 : "#F5F7FA",level1 : "#FFFFFF",level2 : "#F5F7FA",interactiveBackground : "#FFFFFF",interactiveHover : "#F5F7FA",interactiveActive : "#E6EDF5",overlayDark : "#2E3A47",overlayTheme : "#FFFFFF",overlayBackdrop : "#36485C"}, +primary : {textBase : "#307553",textHover : "#275E43",textActive : "#244C38",backgroundBase : "#307553",backgroundHover : "#275E43",backgroundActive : "#244C38",backgroundMuted : "#EBF2EF",backgroundMutedHover : "#D1E0D9",backgroundMutedActive : "#B6CFC2",backgroundBox : "#FAFFFC",borderBase : "#307553",borderHover : "#275E43",borderActive : "#244C38"}, +success : {textBase : "#307553",textHover : "#275E43",textActive : "#244C38",backgroundBase : "#307553",backgroundHover : "#275E43",backgroundActive : "#244C38",backgroundMuted : "#EBF2EF",backgroundMutedHover : "#D1E0D9",backgroundMutedActive : "#B6CFC2",backgroundBox : "#FAFFFC",borderBase : "#307553",borderHover : "#275E43",borderActive : "#244C38"}, +info : {textBase : "#3971A8",textHover : "#21588F",textActive : "#194673",backgroundBase : "#3971A8",backgroundHover : "#21588F",backgroundActive : "#194673",backgroundMuted : "#E6F1FC",backgroundMutedHover : "#C0D8F0",backgroundMutedActive : "#88B1D9",backgroundBox : "#F5FAFF",borderBase : "#3971A8",borderHover : "#21588F",borderActive : "#194673"}, +warning : {textBase : "#B4631D",textHover : "#8E4D14",textActive : "#784213",backgroundBase : "#B4631D",backgroundHover : "#8E4D14",backgroundActive : "#784213",backgroundMuted : "#FFF3E8",backgroundMutedHover : "#F3D8C0",backgroundMutedActive : "#E7B88F",backgroundBox : "#FFFAF5",borderBase : "#B4631D",borderHover : "#8E4D14",borderActive : "#784213"}, +danger : {textBase : "#AF2645",textHover : "#980B29",textActive : "#800D25",backgroundBase : "#AF2645",backgroundHover : "#980B29",backgroundActive : "#800D25",backgroundMuted : "#FEEEF2",backgroundMutedHover : "#F0C4CD",backgroundMutedActive : "#E296A6",backgroundBox : "#FFF7F9",borderBase : "#AF2645",borderHover : "#980B29",borderActive : "#800D25"}, +highlight : {textBase : "#533E7D",textHover : "#3B2566",textActive : "#2A174F",backgroundBase : "#533E7D",backgroundHover : "#3B2566",backgroundActive : "#2A174F",backgroundMuted : "#F2ECFE",backgroundMutedHover : "#D7CEE9",backgroundMutedActive : "#B9ABD5",backgroundBox : "#FCFAFF",borderBase : "#533E7D",borderHover : "#3B2566",borderActive : "#2A174F"}, +disabled : {text : "#596D84",background : "#F5F7FA",nakedBackground : "transparent",border : "#C8D3E0",inputBackground : "#E6EDF5",inputLabelText : "#596D84"}, +input : {backgroundBase : "#F5F7FA",backgroundHover : "#E6EDF5",backgroundInformation : "#FFFFFF",textBase : "#475A70",textInformation : "#475A70",textInformationError : "#AF2645",textLabel : "#475A70",textFloatingLabel : "#3971A8",textFloatingLabelError : "#AF2645",textPlaceholder : "#596D84",textActive : "#2E3A47",borderBase : "#E6EDF5",borderError : "#AF2645",borderHover : "#C8D3E0",borderEmphasized : "#596D84",borderEmphasizedHover : "#475A70",borderActive : "#3971A8"}, +separator : {base : "#E6EDF5"}, +light : {backgroundBase : "#FFFFFF",backgroundContrast : "#475A70",backgroundHover : "#F5F7FA",backgroundActive : "#E6EDF5",textBase : "#2E3A47",linkMutedBase : "#F5F7FA",linkMutedHover : "#FFFFFF"}, +shadow : {base : "#36485C"}, +accent : {forestTextBase : "#275E43",forestBackgroundMuted : "#EBF2EF",forestBackgroundMutedHover : "#D1E0D9",forestBackgroundMutedActive : "#B6CFC2",sandTextBase : "#5E4D27",sandBackgroundMuted : "#F6F1E5",sandBackgroundMutedHover : "#E4D9C2",sandBackgroundMutedActive : "#DACCAA"},boxShadows: {cardBase : "0px 1px 2px 0px #36485c29",cardHover : "0px 2px 8px 0px #36485c33",popoverBase : "0px 4px 16px 0px #36485c29",modalBase : "0px 8px 32px 0px #36485c3d"},opacity: {overlayBackdrop : 0.2},}; \ No newline at end of file diff --git a/dist/tokens/ts/typography.d.ts b/dist/tokens/ts/typography.d.ts new file mode 100644 index 00000000..0de68d93 --- /dev/null +++ b/dist/tokens/ts/typography.d.ts @@ -0,0 +1,117 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +export const letterSpacingBase : number; +export const paragraphSpacingBase : number; +export const textDecorationBase : string; +export const textCaseBase : string; +export const size3xlarge : string; +export const size2xlarge : string; +export const sizeXlarge : string; +export const sizeLarge : string; +export const sizeNormal : string; +export const sizeSmall : string; +export const sizeXsmall : string; +export const sizeMobile3xlarge : string; +export const sizeMobile2xlarge : string; +export const sizeMobileXlarge : string; +export const lineHeightXlarge : string; +export const lineHeightLarge : string; +export const lineHeightNormal : string; +export const lineHeightSmall : string; +export const fontFamilySansSerif : string; +export const weightSemiBold : number; +export const weightBase : number; +export const weightLight : number; +export const weightStrong : number; +export const weightBold : number; +export const h1FontFamily : string; +export const h1FontWeight : number; +export const h1LineHeight : string; +export const h1FontSize : string; +export const h1LetterSpacing : number; +export const h1ParagraphSpacing : number; +export const h1TextDecoration : string; +export const h1TextCase : string; +export const h2FontFamily : string; +export const h2FontWeight : number; +export const h2LineHeight : string; +export const h2FontSize : string; +export const h2LetterSpacing : number; +export const h2ParagraphSpacing : number; +export const h2TextDecoration : string; +export const h2TextCase : string; +export const h3FontFamily : string; +export const h3FontWeight : number; +export const h3LineHeight : string; +export const h3FontSize : string; +export const h3LetterSpacing : number; +export const h3ParagraphSpacing : number; +export const h3TextDecoration : string; +export const h3TextCase : string; +export const h4FontFamily : string; +export const h4FontWeight : number; +export const h4LineHeight : string; +export const h4FontSize : string; +export const h4LetterSpacing : number; +export const h4ParagraphSpacing : number; +export const h4TextDecoration : string; +export const h4TextCase : string; +export const h5FontFamily : string; +export const h5FontWeight : number; +export const h5LineHeight : string; +export const h5FontSize : string; +export const h5LetterSpacing : number; +export const h5ParagraphSpacing : number; +export const h5TextDecoration : string; +export const h5TextCase : string; +export const bodyFontFamily : string; +export const bodyFontWeight : number; +export const bodyLineHeight : string; +export const bodyFontSize : string; +export const bodyLetterSpacing : number; +export const bodyParagraphSpacing : number; +export const bodyTextDecoration : string; +export const bodyTextCase : string; +export const footnoteFontFamily : string; +export const footnoteFontWeight : number; +export const footnoteLineHeight : string; +export const footnoteFontSize : string; +export const footnoteLetterSpacing : number; +export const footnoteParagraphSpacing : number; +export const footnoteTextDecoration : string; +export const footnoteTextCase : string; +export const captionFontFamily : string; +export const captionFontWeight : number; +export const captionLineHeight : string; +export const captionFontSize : string; +export const captionLetterSpacing : number; +export const captionParagraphSpacing : number; +export const captionTextDecoration : string; +export const captionTextCase : string; +export const mobileH1FontFamily : string; +export const mobileH1FontWeight : number; +export const mobileH1LineHeight : string; +export const mobileH1FontSize : string; +export const mobileH1LetterSpacing : number; +export const mobileH1ParagraphSpacing : number; +export const mobileH1TextDecoration : string; +export const mobileH1TextCase : string; +export const mobileH2FontFamily : string; +export const mobileH2FontWeight : number; +export const mobileH2LineHeight : string; +export const mobileH2FontSize : string; +export const mobileH2LetterSpacing : number; +export const mobileH2ParagraphSpacing : number; +export const mobileH2TextDecoration : string; +export const mobileH2TextCase : string; +export const mobileH3FontFamily : string; +export const mobileH3FontWeight : number; +export const mobileH3LineHeight : string; +export const mobileH3FontSize : string; +export const mobileH3LetterSpacing : number; +export const mobileH3ParagraphSpacing : number; +export const mobileH3TextDecoration : string; +export const mobileH3TextCase : string; \ No newline at end of file diff --git a/dist/tokens/ts/typography.js b/dist/tokens/ts/typography.js new file mode 100644 index 00000000..919a97dc --- /dev/null +++ b/dist/tokens/ts/typography.js @@ -0,0 +1,119 @@ +/** + * Do not edit directly + * Generated on Wed, 20 Sep 2023 20:21:27 GMT + */ + +module.exports = { + "letterSpacingBase": 0, + "paragraphSpacingBase": 0, + "textDecorationBase": "none", + "textCaseBase": "none", + "size3xlarge": "40px", + "size2xlarge": "32px", + "sizeXlarge": "24px", + "sizeLarge": "20px", + "sizeNormal": "16px", + "sizeSmall": "14px", + "sizeXsmall": "12px", + "sizeMobile3xlarge": "32px", + "sizeMobile2xlarge": "28px", + "sizeMobileXlarge": "22px", + "lineHeightXlarge": "40px", + "lineHeightLarge": "32px", + "lineHeightNormal": "24px", + "lineHeightSmall": "16px", + "fontFamilySansSerif": "Mulish", + "weightSemiBold": 700, + "weightBase": 500, + "weightLight": 400, + "weightStrong": 600, + "weightBold": 900, + "h1FontFamily": "Mulish", + "h1FontWeight": 700, + "h1LineHeight": "40px", + "h1FontSize": "40px", + "h1LetterSpacing": 0, + "h1ParagraphSpacing": 0, + "h1TextDecoration": "none", + "h1TextCase": "none", + "h2FontFamily": "Mulish", + "h2FontWeight": 700, + "h2LineHeight": "40px", + "h2FontSize": "32px", + "h2LetterSpacing": 0, + "h2ParagraphSpacing": 0, + "h2TextDecoration": "none", + "h2TextCase": "none", + "h3FontFamily": "Mulish", + "h3FontWeight": 700, + "h3LineHeight": "32px", + "h3FontSize": "24px", + "h3LetterSpacing": 0, + "h3ParagraphSpacing": 0, + "h3TextDecoration": "none", + "h3TextCase": "none", + "h4FontFamily": "Mulish", + "h4FontWeight": 700, + "h4LineHeight": "24px", + "h4FontSize": "20px", + "h4LetterSpacing": 0, + "h4ParagraphSpacing": 0, + "h4TextDecoration": "none", + "h4TextCase": "none", + "h5FontFamily": "Mulish", + "h5FontWeight": 700, + "h5LineHeight": "24px", + "h5FontSize": "16px", + "h5LetterSpacing": 0, + "h5ParagraphSpacing": 0, + "h5TextDecoration": "none", + "h5TextCase": "none", + "bodyFontFamily": "Mulish", + "bodyFontWeight": 500, + "bodyLineHeight": "24px", + "bodyFontSize": "16px", + "bodyLetterSpacing": 0, + "bodyParagraphSpacing": 0, + "bodyTextDecoration": "none", + "bodyTextCase": "none", + "footnoteFontFamily": "Mulish", + "footnoteFontWeight": 500, + "footnoteLineHeight": "16px", + "footnoteFontSize": "14px", + "footnoteLetterSpacing": 0, + "footnoteParagraphSpacing": 0, + "footnoteTextDecoration": "none", + "footnoteTextCase": "none", + "captionFontFamily": "Mulish", + "captionFontWeight": 500, + "captionLineHeight": "16px", + "captionFontSize": "12px", + "captionLetterSpacing": 0, + "captionParagraphSpacing": 0, + "captionTextDecoration": "none", + "captionTextCase": "none", + "mobileH1FontFamily": "Mulish", + "mobileH1FontWeight": 700, + "mobileH1LineHeight": "40px", + "mobileH1FontSize": "32px", + "mobileH1LetterSpacing": 0, + "mobileH1ParagraphSpacing": 0, + "mobileH1TextDecoration": "none", + "mobileH1TextCase": "none", + "mobileH2FontFamily": "Mulish", + "mobileH2FontWeight": 700, + "mobileH2LineHeight": "32px", + "mobileH2FontSize": "28px", + "mobileH2LetterSpacing": 0, + "mobileH2ParagraphSpacing": 0, + "mobileH2TextDecoration": "none", + "mobileH2TextCase": "none", + "mobileH3FontFamily": "Mulish", + "mobileH3FontWeight": 700, + "mobileH3LineHeight": "32px", + "mobileH3FontSize": "22px", + "mobileH3LetterSpacing": 0, + "mobileH3ParagraphSpacing": 0, + "mobileH3TextDecoration": "none", + "mobileH3TextCase": "none" +}; \ No newline at end of file