@spaced-out/ui-design-system/lib/styles/variables/_color.js.flow

Sense UI components library

// @flow strict

export const colorTextPrimary = '#17172A';

export const colorTextSecondary = '#565656';

export const colorTextTertiary = '#7e7e7e';

export const colorTextDisabled = '#d1d1d1';

export const colorTextClickable = '#5c34cd';

export const colorTextNeutral = '#706F9B';

export const colorTextSuccess = '#026b37';

export const colorTextInformation = '#0660da';

export const colorTextWarning = '#9e5909';

export const colorTextDanger = '#cf1945';

export const colorTextInversePrimary = '#ffffff';

export const colorTextInverseSecondary = '#9F9FBC';

export const colorTextFavorite = '#DFBD0D';

export const colorIconPrimary = '#8D8CAF';

export const colorIconSecondary = '#3E3D55';

export const colorBorderPrimary = '#e1e1e1';

export const colorBorderSecondary = '#d1d1d1';

export const colorBorderTertiary = '#AEAEAE';

export const colorBorderDanger = '#e31c4c';

export const colorBackgroundBrand = '#271656';

export const colorBackgroundPrimary = '#fafafa';

export const colorBackgroundSecondary = '#f4f4f4';

export const colorBackgroundTertiary = '#ffffff';

export const colorFocusPrimary = '#ccc0f0';

export const colorFocusSecondary = '#5c34cd';

export const colorFocusDanger = '#f6b9c8';

export const colorFillPrimary = '#5c34cd';

export const colorFillSecondary = '#efebfa';

export const colorFillNone = 'rgba(255,255,255,0)';

export const colorFillDisabled = '#f4f4f4';

export const colorFillInversePrimary = '#17172A';

export const colorTooltipFill = 'rgba(23, 23, 42, 0.95)';

export const colorBackdropFill = 'rgba(23, 23, 42, 0.7)';

export const colorButtonFillTableActionEnabled = '#542fbb';

export const colorButtonFillTableActionHovered = '#412592';

export const colorButtonFillTableActionPressed = '#412592';

export const colorButtonFillTableActionBorder = '#7d5dd7';

export const colorButtonFillPrimaryEnabled = '#5c34cd';

export const colorButtonFillPrimaryHovered = '#412592';

export const colorButtonFillPrimaryPressed = '#412592';

export const colorButtonFillSecondaryEnabled = '#efebfa';

export const colorButtonFillSecondaryHovered = '#ccc0f0';

export const colorButtonFillSecondaryPressed = '#ccc0f0';

export const colorButtonFillTertiaryEnabled = '#ffffff';

export const colorButtonFillTertiaryHovered = '#EBEBEB';

export const colorButtonFillTertiaryPressed = '#EBEBEB';

export const colorButtonFillGhostEnabled = 'rgba(255,255,255,0)';

export const colorButtonFillGhostHovered = '#EBEBEB';

export const colorButtonFillGhostPressed = '#EBEBEB';

export const colorButtonFillDangerEnabled = '#e31c4c';

export const colorButtonFillDangerHovered = '#cf1945';

export const colorButtonFillDangerPressed = '#cf1945';

export const colorSideMenuBackgroundDefault = '#17172A';

export const colorSideMenuBackgroundHovered = '#1F1F36';

export const colorSideMenuBackgroundSelected = '#5c34cd';

export const colorSideMenuIconDefault = '#9F9FBC';

export const colorSideMenuIconActive = '#ffffff';

export const colorSideMenuAccountBarFill = '#1F1F36';

export const colorGroupMenuBackgroundDefault = '#17172A';

export const colorGroupMenuBackgroundHovered = '#1F1F36';

export const colorGroupMenuBackgroundSelected = '#5c34cd';

export const colorGroupMenuTextDefault = '#D3D2E0';

export const colorSubMenuBackgroundDefault = '#1F1F36';

export const colorSubMenuStar = '#DFBD0D';

export const colorDataViz1 = '#8dbaf8';

export const colorDataViz2 = '#b4a2e8';

export const colorDataViz3 = '#8bcfad';

export const colorDataViz4 = '#f0c48f';

export const colorDataViz5 = '#f297ad';

export const colorDataViz6 = '#B0F0E3';

export const colorDataViz7 = '#F5B8E1';

export const colorDataViz8 = '#F5EBB4';

export const colorScoreBarLevel1 = '#7e7e7e';

export const colorScoreBarLevel2 = '#e94970';

export const colorScoreBarLevel3 = '#e5983d';

export const colorScoreBarLevel4 = '#3987f3';

export const colorScoreBarLevel5 = '#35ab71';

export const colorScoreBarInactive = '#d1d1d1';

export const colorGrayLightest = '#EBEBEB';

export const colorNeutral = '#706F9B';

export const colorNeutralLightest = '#f1f1f5';

export const colorNeutralLight = '#D3D2E0';

export const colorNeutralDark = '#504F6E';

export const colorNeutralDarkest = '#2C2C47';

export const colorSuccess = '#03964d';

export const colorSuccessLightest = '#e6f5ed';

export const colorSuccessLight = '#8bcfad';

export const colorSuccessDark = '#026b37';

export const colorSuccessDarkest = '#013f20';

export const colorInformation = '#0769f0';

export const colorInformationLightest = '#e6f0fe';

export const colorInformationLight = '#8dbaf8';

export const colorInformationDark = '#054baa';

export const colorInformationDarkest = '#032c65';

export const colorWarning = '#df7e0c';

export const colorWarningLightest = '#fcf2e7';

export const colorWarningLight = '#f0c48f';

export const colorWarningDark = '#9e5909';

export const colorWarningDarkest = '#5e3505';

export const colorDanger = '#e31c4c';

export const colorDangerLightest = '#fce8ed';

export const colorDangerLight = '#f297ad';

export const colorDangerDark = '#a11436';

export const colorDangerDarkest = '#5f0c20';