@spaced-out/ui-design-system 0.0.1-alpha.0

package/lib/styles/typography.module.css

@@ -0,0 +1,227 @@
+@value (
+  colorTextPrimary,
+  colorTextSecondary,
+  colorTextTertiary,
+  colorTextDisabled,
+  colorTextSelected,
+  colorTextNeutral,
+  colorTextSuccess,
+  colorTextInformation,
+  colorTextWarning,
+  colorTextDanger,
+  colorTextInversePrimary,
+  colorTextInverseSecondary
+) from 'variables/_color.css';
+
+@value (
+  fontFamilyCentra,
+  fontSize46,
+  fontSize26,
+  fontSize18,
+  fontSize16,
+  fontSize14,
+  fontSize13,
+  fontSize12,
+  fontWeightMedium,
+  fontWeightBook,
+  fontLineHeight100,
+  fontLineHeight120,
+  fontLineHeight140,
+  fontLineHeight150,
+  fontLineHeight170,
+  fontLetterSpacing0,
+  fontLetterSpacing0,
+  fontLetterSpacingMinus1,
+  fontLetterSpacingMinus2,
+  fontLetterSpacingMinus4,
+  fontLetterSpacing1,
+  fontLetterSpacing2,
+  fontLetterSpacing4
+) from 'variables/_font.css';
+
+@value (size24, size18) from 'variables/_size.css';
+
+.baseType {
+  /* Design system uses this font */
+  font-family: 'Centra No 2';
+  font-style: normal;
+  line-height: fontLineHeight120;
+  margin: 0;
+  color: colorTextPrimary;
+  letter-spacing: fontLetterSpacing0;
+  font-weight: fontWeightMedium;
+  display: flex;
+  align-items: center;
+}
+
+.jumboMedium {
+  composes: baseType;
+  font-size: fontSize46;
+  line-height: fontLineHeight100;
+  letter-spacing: fontLetterSpacingMinus4;
+}
+
+.titleMedium {
+  composes: baseType;
+  font-size: fontSize26;
+  letter-spacing: fontLetterSpacingMinus2;
+}
+
+.subTitleLarge {
+  composes: baseType;
+  font-size: fontSize18;
+  letter-spacing: fontLetterSpacingMinus1;
+}
+
+.subTitleMedium {
+  composes: baseType;
+  font-size: fontSize16;
+  letter-spacing: fontLetterSpacingMinus1;
+}
+
+.subTitleSmall {
+  composes: baseType;
+  font-size: fontSize14;
+  letter-spacing: fontLetterSpacingMinus1;
+}
+
+.subTitleExtraSmall {
+  composes: baseType;
+  font-size: fontSize12;
+  letter-spacing: fontLetterSpacing0;
+  line-height: fontLineHeight140;
+}
+
+.buttonTextMedium {
+  composes: baseType;
+  font-size: fontSize14;
+}
+
+.buttonTextSmall {
+  composes: baseType;
+  font-size: fontSize13;
+  letter-spacing: fontLetterSpacing1;
+}
+
+.formInputMedium {
+  composes: baseType;
+  font-size: fontSize14;
+  line-height: fontLineHeight150;
+}
+
+.formInputSmall {
+  composes: baseType;
+  font-size: fontSize13;
+  line-height: fontLineHeight150;
+  letter-spacing: fontLetterSpacing1;
+}
+
+.bodyLarge {
+  composes: baseType;
+  font-size: fontSize16;
+  font-weight: fontWeightBook;
+  line-height: fontLineHeight150;
+}
+
+.bodyMedium {
+  composes: baseType;
+  font-size: fontSize14;
+  font-weight: fontWeightBook;
+  line-height: fontLineHeight150;
+}
+
+.bodySmall {
+  composes: baseType;
+  font-size: fontSize12;
+  font-weight: fontWeightBook;
+  line-height: fontLineHeight150;
+  letter-spacing: fontLetterSpacing4;
+}
+
+.formLabelMedium {
+  composes: baseType;
+  font-size: fontSize14;
+  line-height: fontLineHeight140;
+}
+
+.formLabelSmall {
+  composes: baseType;
+  font-size: fontSize12;
+  line-height: fontLineHeight140;
+}
+
+.primary {
+  color: colorTextPrimary;
+}
+
+.secondary {
+  color: colorTextSecondary;
+}
+
+.tertiary {
+  color: colorTextTertiary;
+}
+
+.disabled {
+  color: colorTextDisabled;
+}
+
+.selected {
+  color: colorTextSelected;
+}
+
+.neutral {
+  color: colorTextNeutral;
+}
+
+.success {
+  color: colorTextSuccess;
+}
+
+.information {
+  color: colorTextInformation;
+}
+
+.warning {
+  color: colorTextWarning;
+}
+
+.danger {
+  color: colorTextDanger;
+}
+
+.inversePrimary {
+  color: colorTextInversePrimary;
+}
+
+.inverseSecondary {
+  color: colorTextInverseSecondary;
+}
+
+.smallIcon {
+  font-size: fontSize14;
+  height: size18;
+  width: size18;
+  min-width: size18;
+  min-height: size18;
+}
+
+.mediumIcon {
+  font-size: fontSize18;
+  height: size24;
+  width: size24;
+  min-width: size24;
+  min-height: size24;
+}
+
+.centerAlignFlex {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/lib/styles/variables/_border.css

@@ -0,0 +1,21 @@
+@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 borderRadiusCircle: 50%;

package/lib/styles/variables/_border.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.borderWidthTertiary = exports.borderWidthSecondary = exports.borderWidthPrimary = exports.borderWidthNone = exports.borderRadiusXSmall = exports.borderRadiusSmall = exports.borderRadiusRadioButton = exports.borderRadiusNone = exports.borderRadiusMedium = exports.borderRadiusLarge = exports.borderRadiusCircle = void 0;
+
+const borderWidthNone = '0px';
+exports.borderWidthNone = borderWidthNone;
+const borderWidthPrimary = '1px';
+exports.borderWidthPrimary = borderWidthPrimary;
+const borderWidthSecondary = '1.5px';
+exports.borderWidthSecondary = borderWidthSecondary;
+const borderWidthTertiary = '2px';
+exports.borderWidthTertiary = borderWidthTertiary;
+const borderRadiusNone = '0px';
+exports.borderRadiusNone = borderRadiusNone;
+const borderRadiusXSmall = '4px';
+exports.borderRadiusXSmall = borderRadiusXSmall;
+const borderRadiusRadioButton = '6px';
+exports.borderRadiusRadioButton = borderRadiusRadioButton;
+const borderRadiusSmall = '8px';
+exports.borderRadiusSmall = borderRadiusSmall;
+const borderRadiusMedium = '12px';
+exports.borderRadiusMedium = borderRadiusMedium;
+const borderRadiusLarge = '20px';
+exports.borderRadiusLarge = borderRadiusLarge;
+const borderRadiusCircle = '50%';
+exports.borderRadiusCircle = borderRadiusCircle;

package/lib/styles/variables/_border.js.flow

@@ -0,0 +1,23 @@
+// @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 borderRadiusCircle = '50%';

package/lib/styles/variables/_color.css

@@ -0,0 +1,131 @@
+@value colorTextPrimary: #17172A;
+
+@value colorTextSecondary: #565656;
+
+@value colorTextTertiary: #7e7e7e;
+
+@value colorTextDisabled: #d1d1d1;
+
+@value colorTextSelected: #5c34cd;
+
+@value colorTextNeutral: #706f9b;
+
+@value colorTextSuccess: #03964d;
+
+@value colorTextInformation: #0769f0;
+
+@value colorTextWarning: #df7e0c;
+
+@value colorTextDanger: #e31c4c;
+
+@value colorTextInversePrimary: #ffffff;
+
+@value colorTextInverseSecondary: #d1d1d1;
+
+@value colorBorderPrimary: #e1e1e1;
+
+@value colorBorderSecondary: #d1d1d1;
+
+@value colorBorderDanger: #e31c4c;
+
+@value colorBackgroundPrimary: #fafafa;
+
+@value colorBackgroundSecondary: #f4f4f4;
+
+@value colorBackgroundTertiary: #ffffff;
+
+@value colorFocusPrimary: #ccc0f0;
+
+@value colorFocusDanger: #f6b9c8;
+
+@value colorFillPrimary: #5c34cd;
+
+@value colorFillSecondary: #efebfa;
+
+@value colorFillNone: rgba(255,255,255,0);
+
+@value colorFillDisabled: #f4f4f4;
+
+@value colorTooltipFill: rgba(23, 23, 42, 0.95);
+
+@value colorBackdropFill: rgba(23, 23, 42, 0.7);
+
+@value colorButtonFillPrimaryEnabled: #5c34cd;
+
+@value colorButtonFillPrimaryHovered: #412592;
+
+@value colorButtonFillPrimaryPressed: #412592;
+
+@value colorButtonFillSecondaryEnabled: #efebfa;
+
+@value colorButtonFillSecondaryHovered: #ccc0f0;
+
+@value colorButtonFillSecondaryPressed: #ccc0f0;
+
+@value colorButtonFillTertiaryEnabled: rgba(255,255,255,0);
+
+@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 colorNeutral: #706f9b;
+
+@value colorNeutralLightest: #f1f1f5;
+
+@value colorNeutralLight: #bdbdd1;
+
+@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;

package/lib/styles/variables/_color.js

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSelected = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextDisabled = exports.colorTextDanger = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillDisabled = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackdropFill = void 0;
+
+const colorTextPrimary = '#17172A';
+exports.colorTextPrimary = colorTextPrimary;
+const colorTextSecondary = '#565656';
+exports.colorTextSecondary = colorTextSecondary;
+const colorTextTertiary = '#7e7e7e';
+exports.colorTextTertiary = colorTextTertiary;
+const colorTextDisabled = '#d1d1d1';
+exports.colorTextDisabled = colorTextDisabled;
+const colorTextSelected = '#5c34cd';
+exports.colorTextSelected = colorTextSelected;
+const colorTextNeutral = '#706f9b';
+exports.colorTextNeutral = colorTextNeutral;
+const colorTextSuccess = '#03964d';
+exports.colorTextSuccess = colorTextSuccess;
+const colorTextInformation = '#0769f0';
+exports.colorTextInformation = colorTextInformation;
+const colorTextWarning = '#df7e0c';
+exports.colorTextWarning = colorTextWarning;
+const colorTextDanger = '#e31c4c';
+exports.colorTextDanger = colorTextDanger;
+const colorTextInversePrimary = '#ffffff';
+exports.colorTextInversePrimary = colorTextInversePrimary;
+const colorTextInverseSecondary = '#d1d1d1';
+exports.colorTextInverseSecondary = colorTextInverseSecondary;
+const colorBorderPrimary = '#e1e1e1';
+exports.colorBorderPrimary = colorBorderPrimary;
+const colorBorderSecondary = '#d1d1d1';
+exports.colorBorderSecondary = colorBorderSecondary;
+const colorBorderDanger = '#e31c4c';
+exports.colorBorderDanger = colorBorderDanger;
+const colorBackgroundPrimary = '#fafafa';
+exports.colorBackgroundPrimary = colorBackgroundPrimary;
+const colorBackgroundSecondary = '#f4f4f4';
+exports.colorBackgroundSecondary = colorBackgroundSecondary;
+const colorBackgroundTertiary = '#ffffff';
+exports.colorBackgroundTertiary = colorBackgroundTertiary;
+const colorFocusPrimary = '#ccc0f0';
+exports.colorFocusPrimary = colorFocusPrimary;
+const colorFocusDanger = '#f6b9c8';
+exports.colorFocusDanger = colorFocusDanger;
+const colorFillPrimary = '#5c34cd';
+exports.colorFillPrimary = colorFillPrimary;
+const colorFillSecondary = '#efebfa';
+exports.colorFillSecondary = colorFillSecondary;
+const colorFillNone = 'rgba(255,255,255,0)';
+exports.colorFillNone = colorFillNone;
+const colorFillDisabled = '#f4f4f4';
+exports.colorFillDisabled = colorFillDisabled;
+const colorTooltipFill = 'rgba(23, 23, 42, 0.95)';
+exports.colorTooltipFill = colorTooltipFill;
+const colorBackdropFill = 'rgba(23, 23, 42, 0.7)';
+exports.colorBackdropFill = colorBackdropFill;
+const colorButtonFillPrimaryEnabled = '#5c34cd';
+exports.colorButtonFillPrimaryEnabled = colorButtonFillPrimaryEnabled;
+const colorButtonFillPrimaryHovered = '#412592';
+exports.colorButtonFillPrimaryHovered = colorButtonFillPrimaryHovered;
+const colorButtonFillPrimaryPressed = '#412592';
+exports.colorButtonFillPrimaryPressed = colorButtonFillPrimaryPressed;
+const colorButtonFillSecondaryEnabled = '#efebfa';
+exports.colorButtonFillSecondaryEnabled = colorButtonFillSecondaryEnabled;
+const colorButtonFillSecondaryHovered = '#ccc0f0';
+exports.colorButtonFillSecondaryHovered = colorButtonFillSecondaryHovered;
+const colorButtonFillSecondaryPressed = '#ccc0f0';
+exports.colorButtonFillSecondaryPressed = colorButtonFillSecondaryPressed;
+const colorButtonFillTertiaryEnabled = 'rgba(255,255,255,0)';
+exports.colorButtonFillTertiaryEnabled = colorButtonFillTertiaryEnabled;
+const colorButtonFillTertiaryHovered = '#EBEBEB';
+exports.colorButtonFillTertiaryHovered = colorButtonFillTertiaryHovered;
+const colorButtonFillTertiaryPressed = '#EBEBEB';
+exports.colorButtonFillTertiaryPressed = colorButtonFillTertiaryPressed;
+const colorButtonFillGhostEnabled = 'rgba(255,255,255,0)';
+exports.colorButtonFillGhostEnabled = colorButtonFillGhostEnabled;
+const colorButtonFillGhostHovered = '#EBEBEB';
+exports.colorButtonFillGhostHovered = colorButtonFillGhostHovered;
+const colorButtonFillGhostPressed = '#EBEBEB';
+exports.colorButtonFillGhostPressed = colorButtonFillGhostPressed;
+const colorButtonFillDangerEnabled = '#e31c4c';
+exports.colorButtonFillDangerEnabled = colorButtonFillDangerEnabled;
+const colorButtonFillDangerHovered = '#cf1945';
+exports.colorButtonFillDangerHovered = colorButtonFillDangerHovered;
+const colorButtonFillDangerPressed = '#cf1945';
+exports.colorButtonFillDangerPressed = colorButtonFillDangerPressed;
+const colorNeutral = '#706f9b';
+exports.colorNeutral = colorNeutral;
+const colorNeutralLightest = '#f1f1f5';
+exports.colorNeutralLightest = colorNeutralLightest;
+const colorNeutralLight = '#bdbdd1';
+exports.colorNeutralLight = colorNeutralLight;
+const colorNeutralDark = '#504f6e';
+exports.colorNeutralDark = colorNeutralDark;
+const colorNeutralDarkest = '#2C2C47';
+exports.colorNeutralDarkest = colorNeutralDarkest;
+const colorSuccess = '#03964d';
+exports.colorSuccess = colorSuccess;
+const colorSuccessLightest = '#e6f5ed';
+exports.colorSuccessLightest = colorSuccessLightest;
+const colorSuccessLight = '#8bcfad';
+exports.colorSuccessLight = colorSuccessLight;
+const colorSuccessDark = '#026b37';
+exports.colorSuccessDark = colorSuccessDark;
+const colorSuccessDarkest = '#013f20';
+exports.colorSuccessDarkest = colorSuccessDarkest;
+const colorInformation = '#0769f0';
+exports.colorInformation = colorInformation;
+const colorInformationLightest = '#e6f0fe';
+exports.colorInformationLightest = colorInformationLightest;
+const colorInformationLight = '#8dbaf8';
+exports.colorInformationLight = colorInformationLight;
+const colorInformationDark = '#054baa';
+exports.colorInformationDark = colorInformationDark;
+const colorInformationDarkest = '#032c65';
+exports.colorInformationDarkest = colorInformationDarkest;
+const colorWarning = '#df7e0c';
+exports.colorWarning = colorWarning;
+const colorWarningLightest = '#fcf2e7';
+exports.colorWarningLightest = colorWarningLightest;
+const colorWarningLight = '#f0c48f';
+exports.colorWarningLight = colorWarningLight;
+const colorWarningDark = '#9e5909';
+exports.colorWarningDark = colorWarningDark;
+const colorWarningDarkest = '#5e3505';
+exports.colorWarningDarkest = colorWarningDarkest;
+const colorDanger = '#e31c4c';
+exports.colorDanger = colorDanger;
+const colorDangerLightest = '#fce8ed';
+exports.colorDangerLightest = colorDangerLightest;
+const colorDangerLight = '#f297ad';
+exports.colorDangerLight = colorDangerLight;
+const colorDangerDark = '#a11436';
+exports.colorDangerDark = colorDangerDark;
+const colorDangerDarkest = '#5f0c20';
+exports.colorDangerDarkest = colorDangerDarkest;

package/lib/styles/variables/_color.js.flow

@@ -0,0 +1,133 @@
+// @flow strict
+
+export const colorTextPrimary = '#17172A';
+
+export const colorTextSecondary = '#565656';
+
+export const colorTextTertiary = '#7e7e7e';
+
+export const colorTextDisabled = '#d1d1d1';
+
+export const colorTextSelected = '#5c34cd';
+
+export const colorTextNeutral = '#706f9b';
+
+export const colorTextSuccess = '#03964d';
+
+export const colorTextInformation = '#0769f0';
+
+export const colorTextWarning = '#df7e0c';
+
+export const colorTextDanger = '#e31c4c';
+
+export const colorTextInversePrimary = '#ffffff';
+
+export const colorTextInverseSecondary = '#d1d1d1';
+
+export const colorBorderPrimary = '#e1e1e1';
+
+export const colorBorderSecondary = '#d1d1d1';
+
+export const colorBorderDanger = '#e31c4c';
+
+export const colorBackgroundPrimary = '#fafafa';
+
+export const colorBackgroundSecondary = '#f4f4f4';
+
+export const colorBackgroundTertiary = '#ffffff';
+
+export const colorFocusPrimary = '#ccc0f0';
+
+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 colorTooltipFill = 'rgba(23, 23, 42, 0.95)';
+
+export const colorBackdropFill = 'rgba(23, 23, 42, 0.7)';
+
+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 = 'rgba(255,255,255,0)';
+
+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 colorNeutral = '#706f9b';
+
+export const colorNeutralLightest = '#f1f1f5';
+
+export const colorNeutralLight = '#bdbdd1';
+
+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';