light.scss

/*
** @mxenabled/design-tokens (1.0.3)
**
** sass variables auto-generated on 2024-01-17
** from https://github.com/mxenabled/mx-design-tokens to /scss/light.scss
*/
$Color: (
  "Brand100": #E7F0FE,
  "Brand200": #69A1FA,
  "Brand300": #2D64EF,
  "Brand400": #095ADB,
  "Brand500": #0749B2,
  "CategoryAutoTransport": #4B9DBC,
  "CategoryBillsUtilities": #EF8B2C,
  "CategoryBusinessServices": #B3DE8C,
  "CategoryEducation": #F8AB3A,
  "CategoryEntertainment": #AB5B89,
  "CategoryFeesCharges": #FF9696,
  "CategoryFinancial": #6BCDDB,
  "CategoryFoodDining": #58AC7B,
  "CategoryGiftsDonations": #347AA5,
  "CategoryHealthFitness": #5C446E,
  "CategoryHome": #FFD84D,
  "CategoryIncome": #133F49,
  "CategoryInvestments": #FF7070,
  "CategoryKids": #82D196,
  "CategoryPersonalCare": #338B7A,
  "CategoryPets": #615BAB,
  "CategoryShopping": #CF5F84,
  "CategoryTaxes": #32588D,
  "CategoryTransfer": #959CA6,
  "CategoryTravel": #E37434,
  "CategoryUncategorized": #FA5555,
  "Chart1": #74E4DA,
  "Chart2": #ED64A4,
  "Chart3": #F3DC46,
  "Chart4": #BABFC5,
  "Chart5": #60A9FF,
  "Chart6": #C8BAEE,
  "Chart7": #585E67,
  "ChartMono1": #89E8DF,
  "ChartMono2": #FF8787,
  "ChartMono3": #60A9FF,
  "ChartMono4": #2F73DA,
  "ChartMono5": #034AB3,
  "ChartMono6": #002966,
  "NeutralWhite": #FFFFFF,
  "Neutral100": #F8F9FB,
  "Neutral200": #EEF1F6,
  "Neutral300": #E4E8EE,
  "Neutral400": #CDD3DD,
  "Neutral500": #A8B1BD,
  "Neutral600": #6A7381,
  "Neutral700": #49505A,
  "Neutral800": #1F2329,
  "Neutral900": #121417,
  "Primary100": #E7F0FE,
  "Primary200": #69A1FA,
  "Primary300": #2D64EF,
  "Primary400": #095ADB,
  "Primary500": #0749B2,
  "Success100": #DDFDED,
  "Success200": #0AC295,
  "Success300": #09A57F,
  "Success400": #078364,
  "Success500": #027357,
  "Warning100": #FEF7B9,
  "Warning200": #FFDA6C,
  "Warning300": #FFB400,
  "Warning400": #E07C02,
  "Warning500": #C33E01,
  "Error100": #FCD2CF,
  "Error200": #F45532,
  "Error300": #DF320C,
  "Error400": #C61A0B,
  "Error500": #AE0A0A,
  "TransparentNeutral100": rgba(247, 249, 252, 0.55),
  "TransparentNeutral400": rgba(203, 211, 223, 0.55),
  "TransparentScrim": rgba(0, 0, 0, 0.25),
  "TransparentScrimDarker": rgba(0, 0, 0, 0.50),
);
$Font: (
  "Regular": (InterRegular, Helvetica, Arial, sans-serif),
  "Semibold": (InterSemibold, Helvetica, Arial, sans-serif),
  "Bold": (InterBold, Helvetica, Arial, sans-serif),
);
$BoxShadow: (
  "Low": "0px 2px 8px rgba(106, 115, 129, 0.12)",
  "Medium": "0px 6px 12px rgba(106, 115, 129, 0.16), 0px 3px 8px rgba(87, 102, 117, 0.06)",
  "High": "0px 12px 20px rgba(106, 115, 129, 0.22)",
  "Top": "0px -2px 8px rgba(106, 115, 129, 0.12)",
  "Left": "-1px 2px 8px rgba(106, 115, 129, 0.22)",
  "Right": "1px 0px 8px rgba(106, 115, 129, 0.22)",
  "Focus": "0px 0px 0px 2px rgba(9, 90, 219, 0.75)",
  "FocusRingDefault": "0px 0px 0px 2px rgba(9, 90, 219, 0.75)",
  "BottomBar": "0px -2px 8px rgba(106, 115, 129, 0.12)",
  "Card": "0px 2px 8px rgba(106, 115, 129, 0.12)",
  "Container": "0px 2px 8px rgba(106, 115, 129, 0.12)",
  "Drawer": "-1px 2px 8px rgba(106, 115, 129, 0.22)",
  "DropdownMenu": "0px 6px 12px rgba(106, 115, 129, 0.16), 0px 3px 8px rgba(87, 102, 117, 0.06)",
  "Modal": "0px 12px 20px rgba(106, 115, 129, 0.22)",
  "SelectionBoxShadow": "0px 2px 8px rgba(106, 115, 129, 0.12)",
  "Tooltip": "0px 6px 12px rgba(106, 115, 129, 0.16), 0px 3px 8px rgba(87, 102, 117, 0.06)",
);
$BorderRadius: (
  "Small": 2px,
  "Medium": 4px,
  "Large": 8px,
  "XLarge": 16px,
  "Button": 4px,
  "Card": 4px,
  "CardRounded": 8px,
  "Checkbox": 2px,
  "Chip": 16px,
  "Container": 4px,
  "DropdownChip": 4px,
  "DropdownMenu": 4px,
  "DropdownMenuItem": 4px,
  "DropdownToggle": 4px,
  "Input": 4px,
  "Modal": 4px,
  "ModalClose": 4px,
  "Tooltip": 4px,
);
$FontSize: (
  "Tiny": 9px,
  "XSmall": 11px,
  "Small": 13px,
  "ParagraphSmall": 13px,
  "Body": 15px,
  "Paragraph": 15px,
  "H3": 18px,
  "H2": 23px,
  "H1": 31px,
  "Breadcrumbs": 13px,
  "Button": 15px,
  "ButtonLinkLarge": 15px,
  "ButtonLinkSmall": 13px,
  "DropdownChip": 9px,
  "DropdownItem": 15px,
  "Chip": 11px,
  "Input": 15px,
  "InputHelpText": 13px,
  "InputLabel": 13px,
  "ModalHeader": 18px,
  "TextArea": 15px,
  "TextAreaHelpText": 13px,
  "TooltipHeadline": 15px,
  "TooltipText": 13px,
);
$FontWeight: (
  "Regular": 400,
  "Semibold": 600,
  "Bold": 700,
);
$LetterSpacing: (
  "Uppercase": 0.48,
  "SmallUppercase": 0.48,
  "TinyUppercase": 0.33,
  "XSmallUppercase": 0.33,
);
$LineHeight: (
  "Tiny": 12px,
  "XSmall": 16px,
  "Small": 16px,
  "ParagraphSmall": 20px,
  "Body": 20px,
  "Paragraph": 24px,
  "H3": 24px,
  "H2": 32px,
  "H1": 40px,
);
$Spacing: (
  "XTiny": 2px,
  "Tiny": 4px,
  "XSmall": 8px,
  "Small": 12px,
  "Medium": 16px,
  "Large": 24px,
  "XLarge": 32px,
  "XXLarge": 40px,
  "XXXLarge": 48px,
  "Jumbo": 64px,
  "SuperJumbo": 96px,
  "BreadcrumbsDividerMargin": 12px,
  "ButtonPadding": 16px,
  "CardSidePadding": 16px,
  "CheckboxLabelMarginLeft": 8px,
  "CheckboxLabelMarginRight": 8px,
  "ChipPaddingTop": 4px,
  "ChipPaddingBottom": 4px,
  "ChipPaddingLeft": 8px,
  "ChipPaddingRight": 8px,
  "ContainerSidePadding": 24px,
  "InputHelpTextMarginTop": 4px,
  "InputLabelMarginLeft": 8px,
  "InputLabelPaddingLeft": 4px,
  "InputLabelPaddingRight": 4px,
  "InputLabelTop": -8px,
  "InputPaddingBottom": 12px,
  "InputPaddingLeft": 12px,
  "InputPaddingRight": 12px,
  "InputPaddingTop": 16px,
  "ModalPadding": 12px,
  "SwitchLabelMarginLeft": 12px,
  "SwitchLabelMarginRight": 12px,
  "TableCell": 16px,
  "TableCellActionMargin": 24px,
  "TableFooterPaddingTop": 12px,
  "TableFooterPaddingSide": 16px,
  "TagPaddingTopBottom": 8px,
  "TagPaddingLeftRight": 12px,
  "TagSmallPaddingTopBottom": 2px,
  "TagSmallPaddingLeftRight": 8px,
  "TextAreaPadding": 12px,
  "TooltipPadding": 12px,
);
$Time: (
  "Short": 300ms,
  "Med": 500ms,
  "Long": 1000ms,
);
$ZIndex: (
  "SendToBack": -1,
  "Hover": 1,
  "Active": 2,
  "Focus": 3,
  "Overlay1": 1000,
  "Overlay2": 2000,
  "Overlay3": 3000,
  "Overlay4": 4000,
  "Overlay5": 5000,
  "Overlay6": 6000,
  "Overlay7": 7000,
  "Overlay8": 8000,
  "Overlay9": 9000,
  "Overlay10": 10000,
  "Overlay": 1000,
  "Sticky": 2000,
  "Fixed": 3000,
  "DatePicker": 1000,
  "Drawer": 5000,
  "DropdownMenu": 1000,
  "MessageBox": 3000,
  "Modal": 5000,
  "Tooltip": 10000,
);
$Easing: (
  "Default": cubic-bezier(.475,.425,0,.995),
);
$MediaQuery: (
  "Small": 576px,
  "Med": 768px,
  "Large": 992px,
  "XLarge": 1200px,
);
$Resolution: (
  "Small": 576px,
  "Med": 768px,
  "Large": 992px,
  "XLarge": 1200px,
);
$BackgroundColor: (
  "Body": #F8F9FB,
  "Error": #DF320C,
  "Avatar": #E4E8EE,
  "ButtonDestructive": #DF320C,
  "ButtonDestructiveDisabled": #EEF1F6,
  "ButtonDestructiveHover": #C61A0B,
  "ButtonLinkHover": #E7F0FE,
  "ButtonNeutral": #FFFFFF,
  "ButtonNeutralDisabled": #FFFFFF,
  "ButtonNeutralHover": #FFFFFF,
  "ButtonPrimary": #2D64EF,
  "ButtonPrimaryDisabled": #EEF1F6,
  "ButtonPrimaryHover": #095ADB,
  "ButtonTransparentDestructiveHover": #FCD2CF,
  "ButtonTransparentHover": #E7F0FE,
  "Card": #FFFFFF,
  "CategoryAutoTransport": #4B9DBC,
  "CategoryBillsUtilities": #EF8B2C,
  "CategoryBusinessServices": #B3DE8C,
  "CategoryEducation": #F8AB3A,
  "CategoryEntertainment": #AB5B89,
  "CategoryFeesCharges": #FF9696,
  "CategoryFinancial": #6BCDDB,
  "CategoryFoodDining": #58AC7B,
  "CategoryGiftsDonations": #347AA5,
  "CategoryHealthFitness": #5C446E,
  "CategoryHome": #FFD84D,
  "CategoryIncome": #133F49,
  "CategoryInvestments": #FF7070,
  "CategoryKids": #82D196,
  "CategoryPersonalCare": #338B7A,
  "CategoryPets": #615BAB,
  "CategoryShopping": #CF5F84,
  "CategoryTaxes": #32588D,
  "CategoryTransfer": #959CA6,
  "CategoryTravel": #E37434,
  "CategoryUncategorized": #FA5555,
  "CheckboxChecked": #E7F0FE,
  "CheckboxDisabled": #F8F9FB,
  "ChipDefault": transparent,
  "ChipDefaultHover": #E4E8EE,
  "ChipDefaultActive": #E7F0FE,
  "Container": #FFFFFF,
  "DropdownMenu": #FFFFFF,
  "DropdownMenuItemActive": #E7F0FE,
  "DropdownMenuItemHover": #F8F9FB,
  "HrDark": #CDD3DD,
  "HrLight": #E4E8EE,
  "InputChip": #E7F0FE,
  "InputChipHover": #2D64EF,
  "InputDisabled": rgba(247, 249, 252, 0.55),
  "InputFocus": transparent,
  "InputLabelDefault": #FFFFFF,
  "InputLabelSecondary": #F8F9FB,
  "LeftNavItem": #FFFFFF,
  "LeftNavItemActive": #E7F0FE,
  "LeftNavItemHover": #F8F9FB,
  "MessageBox": #FFFFFF,
  "MessageBoxBrand": #2D64EF,
  "MessageBoxError": #DF320C,
  "MessageBoxHelp": #2D64EF,
  "MessageBoxSuccess": #09A57F,
  "Modal": #FFFFFF,
  "ModalClose": #EEF1F6,
  "ModalCloseHover": #E4E8EE,
  "ModalScrim": rgba(0, 0, 0, 0.25),
  "SelectionBoxShadow": transparent,
  "SelectionBoxShadowDisabled": #EEF1F6,
  "Radio": #E7F0FE,
  "RadioChecked": #E7F0FE,
  "RadioDisabled": #E7F0FE,
  "RadioDot": #F8F9FB,
  "RadioDotChecked": #2D64EF,
  "RadioDotDisabled": #EEF1F6,
  "RadioDotDisabledChecked": #A8B1BD,
  "SwitchDisabledOff": #EEF1F6,
  "SwitchDisabledOn": #E4E8EE,
  "SwitchHandle": #FFFFFF,
  "SwitchHandleDisabled": #F8F9FB,
  "SwitchOff": #EEF1F6,
  "SwitchOn": #09A57F,
  "TabDivider": #CDD3DD,
  "TabHover": #F8F9FB,
  "TagError": #FCD2CF,
  "TagNeutral": #EEF1F6,
  "TagPrimary": #E7F0FE,
  "TagSuccess": #DDFDED,
  "TagWarning": #FEF7B9,
  "TableRowHover": #F8F9FB,
  "TableFooter": #EEF1F6,
  "Tooltip": #1F2329,
  "UtilityRowHover": #EEF1F6,
);
$BorderColor: (
  "Error": #DF320C,
  "ButtonLinkHover": #095ADB,
  "ButtonLinkDestructiveHover": #C61A0B,
  "ButtonNeutral": #CDD3DD,
  "ButtonNeutralDisabled": #095ADB,
  "ButtonNeutralHover": #095ADB,
  "Checkbox": #6A7381,
  "CheckboxChecked": #2D64EF,
  "CheckboxDisabled": #CDD3DD,
  "ChipDefault": #6A7381,
  "ChipDefaultHover": #E4E8EE,
  "ChipDefaultActive": #E7F0FE,
  "ChipDefaultDisabled": #A8B1BD,
  "DropdownDisabled": rgba(203, 211, 223, 0.55),
  "Input": #6A7381,
  "InputDisabled": rgba(203, 211, 223, 0.55),
  "InputError": #DF320C,
  "InputFocus": #2D64EF,
  "InputHover": #6A7381,
  "SelectionBoxOutline": #E4E8EE,
  "SelectionBoxFocusedSelected": #2D64EF,
  "SelectionBoxDisabled": #E4E8EE,
  "SelectionBoxDisabledSelected": #A8B1BD,
  "Radio": #6A7381,
  "RadioChecked": #2D64EF,
  "RadioDisabled": #CDD3DD,
  "RadioDisabledChecked": #A8B1BD,
  "Switch": #6A7381,
  "SwitchDisabled": #CDD3DD,
  "TabActive": #2D64EF,
  "TableHeader": #CDD3DD,
  "TableCell": #EEF1F6,
);
$TextColor: (
  "Active": #2D64EF,
  "ActiveHover": #095ADB,
  "Dark": #121417,
  "Default": #121417,
  "Disabled": #A8B1BD,
  "Error": #DF320C,
  "Light": #FFFFFF,
  "Secondary": #49505A,
  "Success": #078364,
  "Avatar": #121417,
  "BreadcrumbsLink": #2D64EF,
  "BreadcrumbsDivider": #6A7381,
  "BreadcrumbsCurrentRoute": #121417,
  "ButtonDestructive": #FFFFFF,
  "ButtonDestructiveDisabled": #A8B1BD,
  "ButtonLink": #2D64EF,
  "ButtonLinkHover": #095ADB,
  "ButtonLinkTertiary": #49505A,
  "ButtonLinkDestructive": #DF320C,
  "ButtonLinkDestructiveHover": #C61A0B,
  "ButtonNeutral": #2D64EF,
  "ButtonNeutralDisabled": #6A7381,
  "ButtonNeutralHover": #095ADB,
  "ButtonPrimary": #FFFFFF,
  "ButtonPrimaryDisabled": #A8B1BD,
  "ButtonTransparent": #2D64EF,
  "ButtonTransparentDisabled": #6A7381,
  "ButtonTransparentHover": #095ADB,
  "ButtonTransparentTertiary": #49505A,
  "ChipDefault": #121417,
  "ChipDefaultActive": #095ADB,
  "ChipDefaultDisabled": #A8B1BD,
  "DropdownMenuItemActive": #2D64EF,
  "DropdownMenuItemDisabled": #A8B1BD,
  "InputErrorMessage": #DF320C,
  "InputHelpText": #6A7381,
  "InputLabel": #6A7381,
  "InputPlaceholder": #6A7381,
  "LeftNavItemActive": #095ADB,
  "ModalClose": #121417,
  "SelectionBoxDisabled": #A8B1BD,
  "TabActive": #2D64EF,
  "TagError": #AE0A0A,
  "TagNeutral": #49505A,
  "TagPrimary": #095ADB,
  "TagSuccess": #027357,
  "TagWarning": #C33E01,
  "Tooltip": #FFFFFF,
);