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

Sense UI components library

// @flow strict

export const borderWidthNone = '0px';

export const borderWidthPrimary = '1px';

export const borderWidthSecondary = '1.5px';

export const borderWidthTertiary = '2px';

export const borderRadiusNone = '0px';

export const borderRadiusXSmall = '4px';

export const borderRadiusRadioButton = '6px';

export const borderRadiusSmall = '8px';

export const borderRadiusMedium = '12px';

export const borderRadiusLarge = '20px';

export const borderRadiusXLarge = '30px';

export const borderRadiusCircle = '50%';

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';

export const elevationNone = '0';

export const elevationCard = '4';

export const elevationTooltip = '4';

export const elevationMenu = '12';

export const elevationBackdrop = '40';

export const elevationModal = '40';

export const elevationToast = '60';

export const fontFamilyCentra = '"Centra No 2"';

export const fontWeightBook = '400';

export const fontWeightMedium = '500';

export const fontSize12 = '12px';

export const fontSize13 = '13px';

export const fontSize14 = '14px';

export const fontSize16 = '16px';

export const fontSize18 = '18px';

export const fontSize24 = '24px';

export const fontSize26 = '26px';

export const fontSize36 = '36px';

export const fontSize46 = '46px';

export const fontLetterSpacing0 = '0em';

export const fontLetterSpacing1 = '0.01em';

export const fontLetterSpacing2 = '0.02em';

export const fontLetterSpacing4 = '0.04em';

export const fontLetterSpacingMinus1 = '-0.01em';

export const fontLetterSpacingMinus2 = '-0.02em';

export const fontLetterSpacingMinus3 = '-0.03em';

export const fontLetterSpacingMinus4 = '-0.04em';

export const fontLineHeight100 = '100%';

export const fontLineHeight120 = '120%';

export const fontLineHeight125 = '125%';

export const fontLineHeight130 = '130%';

export const fontLineHeight140 = '140%';

export const fontLineHeight150 = '150%';

export const fontLineHeight170 = '170%';

export const fontParagraphSpacing0 = '0';

export const fontTextCaseNone = 'none';

export const fontTextDecorationNone = 'none';

export const motionDurationFast = '100ms';

export const motionDurationNormal = '200ms';

export const motionDurationSlow = '300ms';

export const motionDurationSlower = '500ms';

export const motionDurationSlowest = '1000ms';

export const motionEaseInEaseOut = 'ease-in-out';

export const opacity100 = '100%';

export const opacity95 = '95%';

export const opacity90 = '90%';

export const opacity85 = '85%';

export const opacity80 = '80%';

export const opacity70 = '70%';

export const opacity60 = '60%';

export const opacity50 = '50%';

export const opacity40 = '40%';

export const opacity30 = '30%';

export const opacity20 = '20%';

export const opacity15 = '15%';

export const opacity10 = '10%';

export const opacity5 = '5%';

export const opacity0 = '0%';

export const shadowBoxShadow1Color = '#12121214';

export const shadowBoxShadow1Type = 'dropShadow';

export const shadowBoxShadow1X = '0px';

export const shadowBoxShadow1Y = '4px';

export const shadowBoxShadow1Blur = '4px';

export const shadowBoxShadow1Spread = '0px';

export const shadowBoxShadow2Color = '#12121214';

export const shadowBoxShadow2Type = 'dropShadow';

export const shadowBoxShadow2X = '0px';

export const shadowBoxShadow2Y = '8px';

export const shadowBoxShadow2Blur = '8px';

export const shadowBoxShadow2Spread = '0px';

export const shadowBoxShadow3Color = '#1212121f';

export const shadowBoxShadow3Type = 'dropShadow';

export const shadowBoxShadow3X = '0px';

export const shadowBoxShadow3Y = '12px';

export const shadowBoxShadow3Blur = '12px';

export const shadowBoxShadow3Spread = '0px';

export const shadowBoxShadow4Color = '#12121233';

export const shadowBoxShadow4Type = 'dropShadow';

export const shadowBoxShadow4X = '0px';

export const shadowBoxShadow4Y = '20px';

export const shadowBoxShadow4Blur = '20px';

export const shadowBoxShadow4Spread = '0px';

export const size2 = '2px';

export const size4 = '4px';

export const size5 = '5px';

export const size8 = '8px';

export const size10 = '10px';

export const size12 = '12px';

export const size18 = '18px';

export const size20 = '20px';

export const size22 = '22px';

export const size24 = '24px';

export const size26 = '26px';

export const size28 = '28px';

export const size30 = '30px';

export const size32 = '32px';

export const size34 = '34px';

export const size36 = '36px';

export const size38 = '38px';

export const size40 = '40px';

export const size42 = '42px';

export const size44 = '44px';

export const size48 = '48px';

export const size50 = '50px';

export const size58 = '58px';

export const size60 = '60px';

export const size66 = '66px';

export const size70 = '70px';

export const size90 = '90px';

export const size100 = '100px';

export const size110 = '110px';

export const size125 = '125px';

export const size140 = '140px';

export const size160 = '160px';

export const size180 = '180px';

export const size200 = '200px';

export const size228 = '228px';

export const size240 = '240px';

export const size252 = '252px';

export const size260 = '260px';

export const size276 = '276px';

export const size300 = '300px';

export const size320 = '320px';

export const size380 = '380px';

export const size400 = '400px';

export const size480 = '480px';

export const size500 = '500px';

export const size540 = '540px';

export const size580 = '580px';

export const size640 = '640px';

export const size660 = '660px';

export const size720 = '720px';

export const size800 = '800px';

export const size880 = '880px';

export const size960 = '960px';

export const size1280 = '1280px';

export const sizeFluid = '100%';

export const sizeFullViewportHeight = '100vh';

export const sizeFullViewportWidth = '100vw';

export const spaceNone = '0px';

export const spaceXXSmall = '4px';

export const spaceXSmall = '8px';

export const spaceSmall = '12px';

export const spaceMedium = '20px';

export const spaceLarge = '32px';

export const spaceXLarge = '52px';

export const spaceXXLarge = '84px';

export const spaceFluid = '100%';

export const spaceNegFluid = '-100%';

export const spaceHalfFluid = '50%';

export const spaceNegHalfFluid = '-50%';