diff --git a/borders.ts b/borders.ts new file mode 100644 index 00000000..4188ecaf --- /dev/null +++ b/borders.ts @@ -0,0 +1,7 @@ + +import { Colors } from './colors'; +import { Measures } from './measures'; + + +export const Borders = { +} \ No newline at end of file diff --git a/colors.ts b/colors.ts new file mode 100644 index 00000000..ec6addad --- /dev/null +++ b/colors.ts @@ -0,0 +1,186 @@ +const primary100 = "#f1effe"; +const primary200 = "#bdb7ff"; +const primary300 = "#948aff"; +const primary400 = "#6a5cff"; +const primary500 = "#402eff"; +const primary600 = "#1500f7"; +const primary700 = "#0f00b8"; +const primary800 = "#0e00a5"; +const primary900 = "#0b007d"; +const primary1000 = "#070054"; +const statesInformative100 = "#f1effe"; +const statesInformative200 = "#bdb7ff"; +const statesInformative300 = "#1500f7"; +const statesSuccess100 = "#e5fff8"; +const statesSuccess200 = "#9ee4ce"; +const statesSuccess300 = "#37c99b"; +const statesWarning100 = "#ffe8e0"; +const statesWarning200 = "#ffc5b1"; +const statesWarning300 = "#fc6533"; +const statesDanger100 = "#fceaea"; +const statesDanger200 = "#f4b9b9"; +const statesDanger300 = "#da1414"; +const neutralWhite = "#ffffff"; +const neutral100 = "#f9f9f9"; +const neutral200 = "#f5f5f5"; +const neutral300 = "#e2e2e2"; +const neutral400 = "#cbcbcb"; +const neutral500 = "#b5b5b5"; +const neutral600 = "#9e9e9e"; +const neutral700 = "#878787"; +const neutral800 = "#6e6e71"; +const neutral900 = "#57575a"; +const neutral1000 = "#404043"; +const neutralBlack = "#141416"; +const secondaryAgrume100 = "#fffbfa"; +const secondaryAgrume200 = "#fff3ef"; +const secondaryAgrume300 = "#ffeae3"; +const secondaryAgrume400 = "#ffd9cc"; +const secondaryAgrume500 = "#ffbfaa"; +const secondaryAgrume600 = "#ffa587"; +const secondaryAgrume700 = "#ff8b64"; +const secondaryAgrume800 = "#fc6533"; +const secondaryPaleyellow100 = "#fffcf6"; +const secondaryPaleyellow200 = "#fff4dc"; +const secondaryPaleyellow300 = "#ffecc2"; +const secondaryPaleyellow400 = "#ffe3a7"; +const secondaryPaleyellow500 = "#ffdb8d"; +const secondaryPaleyellow600 = "#ffd373"; +const secondaryPaleyellow700 = "#ffc850"; +const secondaryPaleyellow800 = "#ffae00"; +const secondaryWatergreen100 = "#f8fdfb"; +const secondaryWatergreen200 = "#e1f7f0"; +const secondaryWatergreen300 = "#cbf1e5"; +const secondaryWatergreen400 = "#b4ebd9"; +const secondaryWatergreen500 = "#9ee4ce"; +const secondaryWatergreen600 = "#88dec3"; +const secondaryWatergreen700 = "#6ad6b4"; +const secondaryWatergreen800 = "#37c99b"; +const extraPurple100 = "#f3daff"; +const extraPurple200 = "#e372ff"; +const extraPurple300 = "#ad00ff"; +const extraBrown100 = "#f4e6d5"; +const extraBrown200 = "#ffba69"; +const extraBrown300 = "#aa5c00"; +const extraPink100 = "#ffd7ec"; +const extraPink200 = "#ff7dc3"; +const extraPink300 = "#da2185"; +const extraFrog100 = "#b4efba"; +const extraFrog200 = "#69ff78"; +const extraFrog300 = "#00ac11"; +const colorSurfaceColorSurface = neutral100; +const colorBackgroundColorBackgroundBrandStandard = primary800; +const colorBackgroundColorBackgroundWhite = neutralWhite; +const colorBackgroundStateDangerColorBackgroundDangerStandard = statesDanger300; +const colorBackgroundStateDangerColorBackgroundDangerWeak = statesDanger100; +const colorBorderNeutralColorBorderNeutralDefault = neutral400; +const colorBorderNeutralColorBorderNeutralHover = neutral600; +const colorBorderNeutralColorBorderNeutralDisabled = neutral200; +const colorBorderStateDangerColorBorderDanger = statesDanger300; +const colorTextNeutralOnLightColorTextNeutralStrong = neutralBlack; +const colorTextNeutralOnLightColorTextNeutralStandard = neutral900; +const colorTextNeutralOnLightColorTextNeutralWeak = neutral700; +const colorTextStateDangerColorTextDangerStandard = statesDanger300; +const colorTextStateDangerColorTextDangerWeak = statesDanger200; +const colorTextNeutralOnDarkColorTextInverseStrong = neutralWhite; +const colorTextNeutralOnDarkColorTextInverseStandard = neutral100; + +export const Colors = { + primary100, + primary200, + primary300, + primary400, + primary500, + primary600, + primary700, + primary800, + primary900, + primary1000, + statesInformative100, + statesInformative200, + statesInformative300, + statesSuccess100, + statesSuccess200, + statesSuccess300, + statesWarning100, + statesWarning200, + statesWarning300, + statesDanger100, + statesDanger200, + statesDanger300, + neutralWhite, + neutral100, + neutral200, + neutral300, + neutral400, + neutral500, + neutral600, + neutral700, + neutral800, + neutral900, + neutral1000, + neutralBlack, + secondaryAgrume100, + secondaryAgrume200, + secondaryAgrume300, + secondaryAgrume400, + secondaryAgrume500, + secondaryAgrume600, + secondaryAgrume700, + secondaryAgrume800, + secondaryPaleyellow100, + secondaryPaleyellow200, + secondaryPaleyellow300, + secondaryPaleyellow400, + secondaryPaleyellow500, + secondaryPaleyellow600, + secondaryPaleyellow700, + secondaryPaleyellow800, + secondaryWatergreen100, + secondaryWatergreen200, + secondaryWatergreen300, + secondaryWatergreen400, + secondaryWatergreen500, + secondaryWatergreen600, + secondaryWatergreen700, + secondaryWatergreen800, + extraPurple100, + extraPurple200, + extraPurple300, + extraBrown100, + extraBrown200, + extraBrown300, + extraPink100, + extraPink200, + extraPink300, + extraFrog100, + extraFrog200, + extraFrog300, + /** Use for surface */ + colorSurfaceColorSurface, + /** Primary color background */ + colorBackgroundColorBackgroundBrandStandard, + /** White color background */ + colorBackgroundColorBackgroundWhite, + colorBackgroundStateDangerColorBackgroundDangerStandard, + colorBackgroundStateDangerColorBackgroundDangerWeak, + /** Use to visually group or separate UI elements, such as flat cards or side panel dividers. */ + colorBorderNeutralColorBorderNeutralDefault, + /** Use for neutral borders on hover (such as flat cards) */ + colorBorderNeutralColorBorderNeutralHover, + /** Use for disabled element borders */ + colorBorderNeutralColorBorderNeutralDisabled, + colorBorderStateDangerColorBorderDanger, + /** Use for: - Item titles - Headers, subhheaders - Input fields text - Letters in password */ + colorTextNeutralOnLightColorTextNeutralStrong, + /** Use for: - Paragraph text - Secondary text */ + colorTextNeutralOnLightColorTextNeutralStandard, + /** Use for: - Tertiary text - Input labels - Placeholder text - Image captions */ + colorTextNeutralOnLightColorTextNeutralWeak, + colorTextStateDangerColorTextDangerStandard, + colorTextStateDangerColorTextDangerWeak, + /** Use for catchy text on colored backgrounds */ + colorTextNeutralOnDarkColorTextInverseStrong, + /** Use for: - Secondary text - Legal text - Help text on colored backgrounds */ + colorTextNeutralOnDarkColorTextInverseStandard, +} \ No newline at end of file diff --git a/gradients.ts b/gradients.ts new file mode 100644 index 00000000..5a8b65d2 --- /dev/null +++ b/gradients.ts @@ -0,0 +1,8 @@ + +import { Colors } from './colors'; +import { Measures } from './measures'; + + + +export const Gradients = { +} \ No newline at end of file diff --git a/measures.ts b/measures.ts new file mode 100644 index 00000000..eef2fd82 --- /dev/null +++ b/measures.ts @@ -0,0 +1,198 @@ +const lineHeightLineHeightLineheights0 = { + measure: 0, + unit: "Pixels", + css: "0px" + }; +const lineHeightLineHeightLineheights1 = { + measure: 26, + unit: "Pixels", + css: "26px" + }; +const lineHeightLineHeightLineheights2 = { + measure: 24, + unit: "Pixels", + css: "24px" + }; +const lineHeightLineHeightLineheights3 = { + measure: 22, + unit: "Pixels", + css: "22px" + }; +const lineHeightLineHeightLineheights4 = { + measure: 20, + unit: "Pixels", + css: "20px" + }; +const fontSizingFontSizeFontsize0 = { + measure: 11, + unit: "Pixels", + css: "11px" + }; +const fontSizingFontSizeFontsize1 = { + measure: 12, + unit: "Pixels", + css: "12px" + }; +const fontSizingFontSizeFontsize2 = { + measure: 14, + unit: "Pixels", + css: "14px" + }; +const fontSizingFontSizeFontsize3 = { + measure: 16, + unit: "Pixels", + css: "16px" + }; +const fontSizingFontSizeFontsize4 = { + measure: 18, + unit: "Pixels", + css: "18px" + }; +const fontSizingFontSizeFontsize5 = { + measure: 24, + unit: "Pixels", + css: "24px" + }; +const letterSpacingLetterSpacingLetterspacing0 = { + measure: 0, + unit: "Percent", + css: "0%" + }; +const letterSpacingLetterSpacingLetterspacing1 = { + measure: 8, + unit: "Percent", + css: "8%" + }; +const paragraphSpacingParagraphSpacingParagraphspacing0 = { + measure: 0, + unit: "Pixels", + css: "0px" + }; +const paragraphSpacingParagraphSpacingParagraphspacing1 = { + measure: 8, + unit: "Pixels", + css: "8px" + }; +const dimensionDimensionParagraphindent0 = { + measure: 0, + unit: "Pixels", + css: "0px" + }; +const borderRadiusRadiusS = { + measure: 4, + unit: "Pixels", + css: "4px" + }; +const borderRadiusRadiusM = { + measure: 8, + unit: "Pixels", + css: "8px" + }; +const borderRadiusRadiusL = { + measure: 12, + unit: "Pixels", + css: "12px" + }; +const spacingSpacingSmallSpacingSmall1 = { + measure: 2, + unit: "Pixels", + css: "2px" + }; +const spacingSpacingSmallSpacingSmall2 = { + measure: 4, + unit: "Pixels", + css: "4px" + }; +const spacingSpacingSmallSpacingSmall3 = { + measure: 8, + unit: "Pixels", + css: "8px" + }; +const spacingSpacingMediumSpacingMedium1 = { + measure: 12, + unit: "Pixels", + css: "12px" + }; +const spacingSpacingMediumSpacingMedium2 = { + measure: 16, + unit: "Pixels", + css: "16px" + }; +const spacingSpacingMediumSpacingMedium3 = { + measure: 20, + unit: "Pixels", + css: "20px" + }; +const spacingSpacingMediumSpacingMedium4 = { + measure: 24, + unit: "Pixels", + css: "24px" + }; +const spacingSpacingLargeSpacingLarge1 = { + measure: 32, + unit: "Pixels", + css: "32px" + }; +const spacingSpacingLargeSpacingLarge2 = { + measure: 40, + unit: "Pixels", + css: "40px" + }; +const spacingSpacingLargeSpacingLarge3 = { + measure: 48, + unit: "Pixels", + css: "48px" + }; +const spacingSpacingLargeSpacingLarge4 = { + measure: 64, + unit: "Pixels", + css: "64px" + }; +const spacingSpacingLargeSpacingLarge5 = { + measure: 80, + unit: "Pixels", + css: "80px" + }; +const borderRadiusRadiusButton = borderRadiusRadiusS; +const borderRadiusRadiusCard = borderRadiusRadiusM; +const borderRadiusRadiusModal = borderRadiusRadiusM; + +export const Measures = { + lineHeightLineHeightLineheights0, + lineHeightLineHeightLineheights1, + lineHeightLineHeightLineheights2, + lineHeightLineHeightLineheights3, + lineHeightLineHeightLineheights4, + fontSizingFontSizeFontsize0, + fontSizingFontSizeFontsize1, + fontSizingFontSizeFontsize2, + fontSizingFontSizeFontsize3, + fontSizingFontSizeFontsize4, + fontSizingFontSizeFontsize5, + letterSpacingLetterSpacingLetterspacing0, + letterSpacingLetterSpacingLetterspacing1, + paragraphSpacingParagraphSpacingParagraphspacing0, + paragraphSpacingParagraphSpacingParagraphspacing1, + dimensionDimensionParagraphindent0, + borderRadiusRadiusS, + borderRadiusRadiusM, + borderRadiusRadiusL, + spacingSpacingSmallSpacingSmall1, + spacingSpacingSmallSpacingSmall2, + spacingSpacingSmallSpacingSmall3, + spacingSpacingMediumSpacingMedium1, + spacingSpacingMediumSpacingMedium2, + spacingSpacingMediumSpacingMedium3, + spacingSpacingMediumSpacingMedium4, + spacingSpacingLargeSpacingLarge1, + spacingSpacingLargeSpacingLarge2, + spacingSpacingLargeSpacingLarge3, + spacingSpacingLargeSpacingLarge4, + spacingSpacingLargeSpacingLarge5, + /** Corner radius for all our buttons */ + borderRadiusRadiusButton, + /** Corner radius for all our cards */ + borderRadiusRadiusCard, + /** Corner radius for all our modals */ + borderRadiusRadiusModal, +} \ No newline at end of file diff --git a/radii.ts b/radii.ts new file mode 100644 index 00000000..9a80064f --- /dev/null +++ b/radii.ts @@ -0,0 +1,6 @@ + +import { Measures } from './measures'; + + +export const Raddii = { +} \ No newline at end of file diff --git a/shadows.ts b/shadows.ts new file mode 100644 index 00000000..47658c35 --- /dev/null +++ b/shadows.ts @@ -0,0 +1,56 @@ + +import { Colors } from './colors'; +import { Measures } from './measures'; + +const shadowCard = { + offsetX: { + measure: 0, + unit: "Pixels", + css: "0px" + }, + offsetY: { + measure: 0, + unit: "Pixels", + css: "0px" + }, + radius: { + measure: 1, + unit: "Pixels", + css: "1px" + }, + spread: { + measure: 0, + unit: "Pixels", + css: "0px" + }, + color: "#0000000a", + }; +const shadowModal = { + offsetX: { + measure: 0, + unit: "Pixels", + css: "0px" + }, + offsetY: { + measure: 0, + unit: "Pixels", + css: "0px" + }, + radius: { + measure: 1, + unit: "Pixels", + css: "1px" + }, + spread: { + measure: 0, + unit: "Pixels", + css: "0px" + }, + color: "#0000000a", + }; + + +export const Shadows = { + shadowCard, + shadowModal, +} \ No newline at end of file diff --git a/theme.ts b/theme.ts new file mode 100644 index 00000000..67b03913 --- /dev/null +++ b/theme.ts @@ -0,0 +1,17 @@ +import { Colors } from './colors'; +import { Borders } from './borders'; +import { Gradients } from './gradients'; +import { Measures } from './measures'; +import { Shadows } from './shadows'; +import { Raddii } from './radii'; +import { Typographies } from './typography'; + +export const Theme = { + colors: Colors, + borders: Borders, + gradients: Gradients, + measures: Measures, + shadows: Shadows, + radii: Raddii, + typographies: Typographies, +}; \ No newline at end of file diff --git a/typography.ts b/typography.ts new file mode 100644 index 00000000..7872537c --- /dev/null +++ b/typography.ts @@ -0,0 +1,277 @@ + +import { Measures } from './measures'; +const headingsH124px = { + fontFamily: "Heebo", + fontStyle: "normal", + fontWeight: 400, + fontSize: { + measure: 24, + unit: "Pixels", + css: "24px" + }, + letterSpacing: { + measure: 0, + unit: "Percent", + css: "0%" + }, + textIndent: { + measure: 0, + unit: "Pixels", + css: "0px" + }, + }; +const bodyL18pxRegular = { + fontFamily: "Heebo", + fontStyle: "normal", + fontWeight: 400, + fontSize: { + measure: 18, + unit: "Pixels", + css: "18px" + }, + lineHeight: { + measure: 26, + unit: "Pixels", + css: "26px" + }, + letterSpacing: { + measure: 0, + unit: "Percent", + css: "0%" + }, + textIndent: { + measure: 0, + unit: "Pixels", + css: "0px" + }, + }; +const bodyL18pxBold = { + fontFamily: "Heebo", + fontStyle: "normal", + fontWeight: 400, + fontSize: { + measure: 18, + unit: "Pixels", + css: "18px" + }, + lineHeight: { + measure: 26, + unit: "Pixels", + css: "26px" + }, + letterSpacing: { + measure: 0, + unit: "Percent", + css: "0%" + }, + textIndent: { + measure: 0, + unit: "Pixels", + css: "0px" + }, + }; +const bodyM16pxRegular = { + fontFamily: "Heebo", + fontStyle: "normal", + fontWeight: 400, + fontSize: { + measure: 16, + unit: "Pixels", + css: "16px" + }, + lineHeight: { + measure: 24, + unit: "Pixels", + css: "24px" + }, + letterSpacing: { + measure: 0, + unit: "Percent", + css: "0%" + }, + textIndent: { + measure: 0, + unit: "Pixels", + css: "0px" + }, + }; +const bodyM16pxBold = { + fontFamily: "Heebo", + fontStyle: "normal", + fontWeight: 400, + fontSize: { + measure: 16, + unit: "Pixels", + css: "16px" + }, + lineHeight: { + measure: 24, + unit: "Pixels", + css: "24px" + }, + letterSpacing: { + measure: 0, + unit: "Percent", + css: "0%" + }, + textIndent: { + measure: 0, + unit: "Pixels", + css: "0px" + }, + }; +const bodyS14pxRegular = { + fontFamily: "Heebo", + fontStyle: "normal", + fontWeight: 400, + fontSize: { + measure: 14, + unit: "Pixels", + css: "14px" + }, + lineHeight: { + measure: 22, + unit: "Pixels", + css: "22px" + }, + letterSpacing: { + measure: 0, + unit: "Percent", + css: "0%" + }, + textIndent: { + measure: 0, + unit: "Pixels", + css: "0px" + }, + }; +const bodyS14pxBold = { + fontFamily: "Heebo", + fontStyle: "normal", + fontWeight: 400, + fontSize: { + measure: 14, + unit: "Pixels", + css: "14px" + }, + lineHeight: { + measure: 22, + unit: "Pixels", + css: "22px" + }, + letterSpacing: { + measure: 0, + unit: "Percent", + css: "0%" + }, + textIndent: { + measure: 0, + unit: "Pixels", + css: "0px" + }, + }; +const bodyXs12pxRegular = { + fontFamily: "Heebo", + fontStyle: "normal", + fontWeight: 400, + fontSize: { + measure: 12, + unit: "Pixels", + css: "12px" + }, + lineHeight: { + measure: 20, + unit: "Pixels", + css: "20px" + }, + letterSpacing: { + measure: 0, + unit: "Percent", + css: "0%" + }, + textIndent: { + measure: 0, + unit: "Pixels", + css: "0px" + }, + }; +const bodyXs12pxBold = { + fontFamily: "Heebo", + fontStyle: "normal", + fontWeight: 400, + fontSize: { + measure: 12, + unit: "Pixels", + css: "12px" + }, + lineHeight: { + measure: 20, + unit: "Pixels", + css: "20px" + }, + letterSpacing: { + measure: 0, + unit: "Percent", + css: "0%" + }, + textIndent: { + measure: 0, + unit: "Pixels", + css: "0px" + }, + }; +const uiTableheader11pxRegular = { + fontFamily: "Heebo", + fontStyle: "normal", + fontWeight: 400, + fontSize: { + measure: 11, + unit: "Pixels", + css: "11px" + }, + letterSpacing: { + measure: 8, + unit: "Percent", + css: "8%" + }, + textIndent: { + measure: 0, + unit: "Pixels", + css: "0px" + }, + }; +const uiTableheader11pxBold = { + fontFamily: "Heebo", + fontStyle: "normal", + fontWeight: 400, + fontSize: { + measure: 11, + unit: "Pixels", + css: "11px" + }, + letterSpacing: { + measure: 8, + unit: "Percent", + css: "8%" + }, + textIndent: { + measure: 0, + unit: "Pixels", + css: "0px" + }, + }; + + +export const Typographies = { + headingsH124px, + bodyL18pxRegular, + bodyL18pxBold, + bodyM16pxRegular, + bodyM16pxBold, + bodyS14pxRegular, + bodyS14pxBold, + bodyXs12pxRegular, + bodyXs12pxBold, + uiTableheader11pxRegular, + uiTableheader11pxBold, +} \ No newline at end of file