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

Sense UI components library

@value borderWidthNone: 0px;

@value borderWidthPrimary: 1px;

@value borderWidthSecondary: 1.5px;

@value borderWidthTertiary: 2px;

@value borderRadiusNone: 0px;

@value borderRadiusXSmall: 4px;

@value borderRadiusRadioButton: 6px;

@value borderRadiusSmall: 8px;

@value borderRadiusMedium: 12px;

@value borderRadiusLarge: 20px;

@value borderRadiusXLarge: 30px;

@value borderRadiusCircle: 50%;

@value colorTextPrimary: #17172A;

@value colorTextSecondary: #565656;

@value colorTextTertiary: #7e7e7e;

@value colorTextDisabled: #d1d1d1;

@value colorTextClickable: #5c34cd;

@value colorTextNeutral: #706F9B;

@value colorTextSuccess: #026b37;

@value colorTextInformation: #0660da;

@value colorTextWarning: #9e5909;

@value colorTextDanger: #cf1945;

@value colorTextInversePrimary: #ffffff;

@value colorTextInverseSecondary: #9F9FBC;

@value colorTextFavorite: #DFBD0D;

@value colorIconPrimary: #8D8CAF;

@value colorIconSecondary: #3E3D55;

@value colorBorderPrimary: #e1e1e1;

@value colorBorderSecondary: #d1d1d1;

@value colorBorderTertiary: #AEAEAE;

@value colorBorderDanger: #e31c4c;

@value colorBackgroundBrand: #271656;

@value colorBackgroundPrimary: #fafafa;

@value colorBackgroundSecondary: #f4f4f4;

@value colorBackgroundTertiary: #ffffff;

@value colorFocusPrimary: #ccc0f0;

@value colorFocusSecondary: #5c34cd;

@value colorFocusDanger: #f6b9c8;

@value colorFillPrimary: #5c34cd;

@value colorFillSecondary: #efebfa;

@value colorFillNone: rgba(255,255,255,0);

@value colorFillDisabled: #f4f4f4;

@value colorFillInversePrimary: #17172A;

@value colorTooltipFill: rgba(23, 23, 42, 0.95);

@value colorBackdropFill: rgba(23, 23, 42, 0.7);

@value colorButtonFillTableActionEnabled: #542fbb;

@value colorButtonFillTableActionHovered: #412592;

@value colorButtonFillTableActionPressed: #412592;

@value colorButtonFillTableActionBorder: #7d5dd7;

@value colorButtonFillPrimaryEnabled: #5c34cd;

@value colorButtonFillPrimaryHovered: #412592;

@value colorButtonFillPrimaryPressed: #412592;

@value colorButtonFillSecondaryEnabled: #efebfa;

@value colorButtonFillSecondaryHovered: #ccc0f0;

@value colorButtonFillSecondaryPressed: #ccc0f0;

@value colorButtonFillTertiaryEnabled: #ffffff;

@value colorButtonFillTertiaryHovered: #EBEBEB;

@value colorButtonFillTertiaryPressed: #EBEBEB;

@value colorButtonFillGhostEnabled: rgba(255,255,255,0);

@value colorButtonFillGhostHovered: #EBEBEB;

@value colorButtonFillGhostPressed: #EBEBEB;

@value colorButtonFillDangerEnabled: #e31c4c;

@value colorButtonFillDangerHovered: #cf1945;

@value colorButtonFillDangerPressed: #cf1945;

@value colorSideMenuBackgroundDefault: #17172A;

@value colorSideMenuBackgroundHovered: #1F1F36;

@value colorSideMenuBackgroundSelected: #5c34cd;

@value colorSideMenuIconDefault: #9F9FBC;

@value colorSideMenuIconActive: #ffffff;

@value colorSideMenuAccountBarFill: #1F1F36;

@value colorGroupMenuBackgroundDefault: #17172A;

@value colorGroupMenuBackgroundHovered: #1F1F36;

@value colorGroupMenuBackgroundSelected: #5c34cd;

@value colorGroupMenuTextDefault: #D3D2E0;

@value colorSubMenuBackgroundDefault: #1F1F36;

@value colorSubMenuStar: #DFBD0D;

@value colorDataViz1: #8dbaf8;

@value colorDataViz2: #b4a2e8;

@value colorDataViz3: #8bcfad;

@value colorDataViz4: #f0c48f;

@value colorDataViz5: #f297ad;

@value colorDataViz6: #B0F0E3;

@value colorDataViz7: #F5B8E1;

@value colorDataViz8: #F5EBB4;

@value colorScoreBarLevel1: #7e7e7e;

@value colorScoreBarLevel2: #e94970;

@value colorScoreBarLevel3: #e5983d;

@value colorScoreBarLevel4: #3987f3;

@value colorScoreBarLevel5: #35ab71;

@value colorScoreBarInactive: #d1d1d1;

@value colorGrayLightest: #EBEBEB;

@value colorNeutral: #706F9B;

@value colorNeutralLightest: #f1f1f5;

@value colorNeutralLight: #D3D2E0;

@value colorNeutralDark: #504F6E;

@value colorNeutralDarkest: #2C2C47;

@value colorSuccess: #03964d;

@value colorSuccessLightest: #e6f5ed;

@value colorSuccessLight: #8bcfad;

@value colorSuccessDark: #026b37;

@value colorSuccessDarkest: #013f20;

@value colorInformation: #0769f0;

@value colorInformationLightest: #e6f0fe;

@value colorInformationLight: #8dbaf8;

@value colorInformationDark: #054baa;

@value colorInformationDarkest: #032c65;

@value colorWarning: #df7e0c;

@value colorWarningLightest: #fcf2e7;

@value colorWarningLight: #f0c48f;

@value colorWarningDark: #9e5909;

@value colorWarningDarkest: #5e3505;

@value colorDanger: #e31c4c;

@value colorDangerLightest: #fce8ed;

@value colorDangerLight: #f297ad;

@value colorDangerDark: #a11436;

@value colorDangerDarkest: #5f0c20;

@value elevationNone: 0;

@value elevationCard: 4;

@value elevationTooltip: 4;

@value elevationMenu: 12;

@value elevationBackdrop: 40;

@value elevationModal: 40;

@value elevationToast: 60;

@value fontFamilyCentra: "Centra No 2";

@value fontWeightBook: 400;

@value fontWeightMedium: 500;

@value fontSize12: 12px;

@value fontSize13: 13px;

@value fontSize14: 14px;

@value fontSize16: 16px;

@value fontSize18: 18px;

@value fontSize24: 24px;

@value fontSize26: 26px;

@value fontSize36: 36px;

@value fontSize46: 46px;

@value fontLetterSpacing0: 0em;

@value fontLetterSpacing1: 0.01em;

@value fontLetterSpacing2: 0.02em;

@value fontLetterSpacing4: 0.04em;

@value fontLetterSpacingMinus1: -0.01em;

@value fontLetterSpacingMinus2: -0.02em;

@value fontLetterSpacingMinus3: -0.03em;

@value fontLetterSpacingMinus4: -0.04em;

@value fontLineHeight100: 100%;

@value fontLineHeight120: 120%;

@value fontLineHeight125: 125%;

@value fontLineHeight130: 130%;

@value fontLineHeight140: 140%;

@value fontLineHeight150: 150%;

@value fontLineHeight170: 170%;

@value fontParagraphSpacing0: 0;

@value fontTextCaseNone: none;

@value fontTextDecorationNone: none;

@value motionDurationFast: 100ms;

@value motionDurationNormal: 200ms;

@value motionDurationSlow: 300ms;

@value motionDurationSlower: 500ms;

@value motionDurationSlowest: 1000ms;

@value motionEaseInEaseOut: ease-in-out;

@value opacity100: 100%;

@value opacity95: 95%;

@value opacity90: 90%;

@value opacity85: 85%;

@value opacity80: 80%;

@value opacity70: 70%;

@value opacity60: 60%;

@value opacity50: 50%;

@value opacity40: 40%;

@value opacity30: 30%;

@value opacity20: 20%;

@value opacity15: 15%;

@value opacity10: 10%;

@value opacity5: 5%;

@value opacity0: 0%;

@value shadowBoxShadow1Color: #12121214;

@value shadowBoxShadow1Type: dropShadow;

@value shadowBoxShadow1X: 0px;

@value shadowBoxShadow1Y: 4px;

@value shadowBoxShadow1Blur: 4px;

@value shadowBoxShadow1Spread: 0px;

@value shadowBoxShadow2Color: #12121214;

@value shadowBoxShadow2Type: dropShadow;

@value shadowBoxShadow2X: 0px;

@value shadowBoxShadow2Y: 8px;

@value shadowBoxShadow2Blur: 8px;

@value shadowBoxShadow2Spread: 0px;

@value shadowBoxShadow3Color: #1212121f;

@value shadowBoxShadow3Type: dropShadow;

@value shadowBoxShadow3X: 0px;

@value shadowBoxShadow3Y: 12px;

@value shadowBoxShadow3Blur: 12px;

@value shadowBoxShadow3Spread: 0px;

@value shadowBoxShadow4Color: #12121233;

@value shadowBoxShadow4Type: dropShadow;

@value shadowBoxShadow4X: 0px;

@value shadowBoxShadow4Y: 20px;

@value shadowBoxShadow4Blur: 20px;

@value shadowBoxShadow4Spread: 0px;

@value size2: 2px;

@value size4: 4px;

@value size5: 5px;

@value size8: 8px;

@value size10: 10px;

@value size12: 12px;

@value size18: 18px;

@value size20: 20px;

@value size22: 22px;

@value size24: 24px;

@value size26: 26px;

@value size28: 28px;

@value size30: 30px;

@value size32: 32px;

@value size34: 34px;

@value size36: 36px;

@value size38: 38px;

@value size40: 40px;

@value size42: 42px;

@value size44: 44px;

@value size48: 48px;

@value size50: 50px;

@value size58: 58px;

@value size60: 60px;

@value size66: 66px;

@value size70: 70px;

@value size90: 90px;

@value size100: 100px;

@value size110: 110px;

@value size125: 125px;

@value size140: 140px;

@value size160: 160px;

@value size180: 180px;

@value size200: 200px;

@value size228: 228px;

@value size240: 240px;

@value size252: 252px;

@value size260: 260px;

@value size276: 276px;

@value size300: 300px;

@value size320: 320px;

@value size380: 380px;

@value size400: 400px;

@value size480: 480px;

@value size500: 500px;

@value size540: 540px;

@value size580: 580px;

@value size640: 640px;

@value size660: 660px;

@value size720: 720px;

@value size800: 800px;

@value size880: 880px;

@value size960: 960px;

@value size1280: 1280px;

@value sizeFluid: 100%;

@value sizeFullViewportHeight: 100vh;

@value sizeFullViewportWidth: 100vw;

@value spaceNone: 0px;

@value spaceXXSmall: 4px;

@value spaceXSmall: 8px;

@value spaceSmall: 12px;

@value spaceMedium: 20px;

@value spaceLarge: 32px;

@value spaceXLarge: 52px;

@value spaceXXLarge: 84px;

@value spaceFluid: 100%;

@value spaceNegFluid: -100%;

@value spaceHalfFluid: 50%;

@value spaceNegHalfFluid: -50%;