@spaced-out/ui-design-system 0.0.8 → 0.0.9

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.9](https://github.com/spaced-out/ui-design-system/compare/v0.0.8...v0.0.9) (2022-12-14)
+
+
+### Bug Fixes
+
+* border changes for in-context alerts ([af20d4b](https://github.com/spaced-out/ui-design-system/commit/af20d4b4ef46d2b6c10dea72fcd5a9942ceb7ef0))
+* button and text enhancements ([38968b2](https://github.com/spaced-out/ui-design-system/commit/38968b202c6a84e3fe9ed362b62e925436d8a5e8))
+* tab dropdown fix ([204bf48](https://github.com/spaced-out/ui-design-system/commit/204bf4832d404982a937c22d9d148f5ff7dfec42))
+
 ### [0.0.8](https://github.com/spaced-out/ui-design-system/compare/v0.0.7...v0.0.8) (2022-12-12)
 
 

package/design-tokens/color/app-color.json

@@ -153,6 +153,9 @@
     "neutral": {
       "value": "{baseColor.indigo.500.value}"
     },
+    "neutral.lighter": {
+      "value": "{baseColor.indigo.100.value}"
+    },
     "neutral.lightest": {
       "value": "{baseColor.indigo.50.value}"
     },
@@ -168,6 +171,9 @@
     "success": {
       "value": "{baseColor.green.500.value}"
     },
+    "success.lighter": {
+      "value": "{baseColor.green.100.value}"
+    },
     "success.lightest": {
       "value": "{baseColor.green.50.value}"
     },
@@ -183,6 +189,9 @@
     "information": {
       "value": "{baseColor.blue.500.value}"
     },
+    "information.lighter": {
+      "value": "{baseColor.blue.100.value}"
+    },
     "information.lightest": {
       "value": "{baseColor.blue.50.value}"
     },
@@ -198,6 +207,9 @@
     "warning": {
       "value": "{baseColor.orange.500.value}"
     },
+    "warning.lighter": {
+      "value": "{baseColor.orange.100.value}"
+    },
     "warning.lightest": {
       "value": "{baseColor.orange.50.value}"
     },
@@ -213,6 +225,9 @@
     "danger": {
       "value": "{baseColor.red.500.value}"
     },
+    "danger.lighter": {
+      "value": "{baseColor.red.100.value}"
+    },
     "danger.lightest": {
       "value": "{baseColor.red.50.value}"
     },

package/lib/components/Button/Button.module.css

@@ -146,6 +146,7 @@ button {
 
 .secondary {
   color: colorTextPrimary;
+  border: borderWidthPrimary solid colorButtonFillPrimaryEnabled;
   background-color: colorButtonFillSecondaryEnabled;
 }
 
@@ -223,4 +224,5 @@ button {
   pointer-events: none;
   color: colorTextDisabled;
   background-color: colorFillDisabled;
+  border: initial;
 }

package/lib/components/InContextAlert/InContextAlert.module.css

@@ -1,10 +1,15 @@
 @value (borderRadiusXSmall) from '../../styles/variables/_border.css';
 @value (colorFillPrimary,
   colorTextPrimary,
+  colorNeutralLighter,
   colorNeutralLightest,
+  colorSuccessLighter,
   colorSuccessLightest,
+  colorInformationLighter,
   colorInformationLightest,
+  colorWarningLighter,
   colorWarningLightest,
+  colorDangerLighter,
   colorDangerLightest
 ) from '../../styles/variables/_color.css';
 
@@ -16,6 +21,10 @@
   sizeFluid
 ) from '../../styles/variables/_size.css';
 
+@value (
+  borderWidthPrimary
+) from '../../styles/variables/_border.css';
+
 .alertContainer {
   display: flex;
   flex-direction: row;
@@ -26,26 +35,33 @@
   width: sizeFluid;
   word-break: normal;
   overflow-wrap: anywhere;
+  border-width: borderWidthPrimary;
+  border-style: solid;
 }
 
 .neutral {
   background-color: colorNeutralLightest;
+  border-color: colorNeutralLighter;
 }
 
 .success {
   background-color: colorSuccessLightest;
+  border-color: colorSuccessLighter;
 }
 
 .information {
   background-color: colorInformationLightest;
+  border-color: colorInformationLighter;
 }
 
 .warning {
   background-color: colorWarningLightest;
+  border-color: colorWarningLighter;
 }
 
 .danger {
   background-color: colorDangerLightest;
+  border-color: colorDangerLighter;
 }
 
 .closeIcon {

package/lib/components/TabList/TabList.js

@@ -87,6 +87,7 @@ const TabList = _ref => {
       return false;
     })();
     const tabDropDownNode = menuOptions.length ? /*#__PURE__*/React.createElement(_TabDropdown.TabDropdown, {
+      key: 'tabDropdown' + menuOptions.length,
       size: size,
       onOptionSelect: menuOnSelect,
       props: {

package/lib/components/TabList/TabList.js.flow

@@ -96,6 +96,7 @@ export const TabList = ({
 
     const tabDropDownNode = menuOptions.length ? (
       <TabDropdown
+        key={'tabDropdown' + menuOptions.length}
         size={size}
         onOptionSelect={menuOnSelect}
         props={{

package/lib/components/Text/Text.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TitleMedium = exports.SubTitleSmall = exports.SubTitleMedium = exports.SubTitleLarge = exports.SubTitleExtraSmall = exports.JumboMedium = exports.FormLabelSmall = exports.FormLabelMedium = exports.FormInputSmall = exports.FormInputMedium = exports.ButtonTextSmall = exports.ButtonTextMedium = exports.BodySmall = exports.BodyMedium = exports.BodyLarge = void 0;
+exports.TitleMedium = exports.SubTitleSmall = exports.SubTitleMedium = exports.SubTitleLarge = exports.SubTitleExtraSmall = exports.JumboMedium = exports.FormLabelSmall = exports.FormLabelMedium = exports.FormInputSmall = exports.FormInputMedium = exports.ButtonTextSmall = exports.ButtonTextMedium = exports.ButtonTextExtraSmall = exports.BodySmall = exports.BodyMedium = exports.BodyLarge = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _typography = require("../../types/typography");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
@@ -108,85 +108,97 @@ const ButtonTextSmall = _ref8 => {
   }), children);
 };
 exports.ButtonTextSmall = ButtonTextSmall;
-const FormInputMedium = _ref9 => {
+const ButtonTextExtraSmall = _ref9 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
     ...props
   } = _ref9;
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _typographyModule.default[color], className)
+  }), children);
+};
+exports.ButtonTextExtraSmall = ButtonTextExtraSmall;
+const FormInputMedium = _ref10 => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className,
+    ...props
+  } = _ref10;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formInputMedium, _typographyModule.default[color], className)
   }), children);
 };
 exports.FormInputMedium = FormInputMedium;
-const FormInputSmall = _ref10 => {
+const FormInputSmall = _ref11 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
     ...props
-  } = _ref10;
+  } = _ref11;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formInputSmall, _typographyModule.default[color], className)
   }), children);
 };
 exports.FormInputSmall = FormInputSmall;
-const BodyLarge = _ref11 => {
+const BodyLarge = _ref12 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
     ...props
-  } = _ref11;
+  } = _ref12;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default[color], className)
   }), children);
 };
 exports.BodyLarge = BodyLarge;
-const BodyMedium = _ref12 => {
+const BodyMedium = _ref13 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
     ...props
-  } = _ref12;
+  } = _ref13;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default[color], className)
   }), children);
 };
 exports.BodyMedium = BodyMedium;
-const BodySmall = _ref13 => {
+const BodySmall = _ref14 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
     ...props
-  } = _ref13;
+  } = _ref14;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default[color], className)
   }), children);
 };
 exports.BodySmall = BodySmall;
-const FormLabelMedium = _ref14 => {
+const FormLabelMedium = _ref15 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
     ...props
-  } = _ref14;
+  } = _ref15;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formLabelMedium, _typographyModule.default[color], className)
   }), children);
 };
 exports.FormLabelMedium = FormLabelMedium;
-const FormLabelSmall = _ref15 => {
+const FormLabelSmall = _ref16 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
     ...props
-  } = _ref15;
+  } = _ref16;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formLabelSmall, _typographyModule.default[color], className)
   }), children);

package/lib/components/Text/Text.js.flow

@@ -116,6 +116,20 @@ export const ButtonTextSmall = ({
   </span>
 );
 
+export const ButtonTextExtraSmall = ({
+  color = TEXT_COLORS.primary,
+  children,
+  className,
+  ...props
+}: TextProps): React.Node => (
+  <span
+    {...props}
+    className={classify(css.buttonTextExtraSmall, css[color], className)}
+  >
+    {children}
+  </span>
+);
+
 export const FormInputMedium = ({
   color = TEXT_COLORS.primary,
   children,

package/lib/components/Text/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "BodySmall", {
     return _Text.BodySmall;
   }
 });
+Object.defineProperty(exports, "ButtonTextExtraSmall", {
+  enumerable: true,
+  get: function () {
+    return _Text.ButtonTextExtraSmall;
+  }
+});
 Object.defineProperty(exports, "ButtonTextMedium", {
   enumerable: true,
   get: function () {

package/lib/components/Text/index.js.flow

@@ -6,6 +6,7 @@ export {
   BodyLarge,
   BodyMedium,
   BodySmall,
+  ButtonTextExtraSmall,
   ButtonTextMedium,
   ButtonTextSmall,
   FormInputMedium,

package/lib/styles/typography.module.css

@@ -103,6 +103,12 @@
   letter-spacing: fontLetterSpacing1;
 }
 
+.buttonTextExtraSmall {
+  composes: baseType;
+  font-size: fontSize12;
+  letter-spacing: fontLetterSpacing1;
+}
+
 .formInputMedium {
   composes: baseType;
   font-size: fontSize14;

package/lib/styles/variables/_color.css

@@ -84,6 +84,8 @@
 
 @value colorNeutral: #706f9b;
 
+@value colorNeutralLighter: #d3d2e0;
+
 @value colorNeutralLightest: #f1f1f5;
 
 @value colorNeutralLight: #bdbdd1;
@@ -94,6 +96,8 @@
 
 @value colorSuccess: #03964d;
 
+@value colorSuccessLighter: #b1dec8;
+
 @value colorSuccessLightest: #e6f5ed;
 
 @value colorSuccessLight: #8bcfad;
@@ -104,6 +108,8 @@
 
 @value colorInformation: #0769f0;
 
+@value colorInformationLighter: #b2d1fa;
+
 @value colorInformationLightest: #e6f0fe;
 
 @value colorInformationLight: #8dbaf8;
@@ -114,6 +120,8 @@
 
 @value colorWarning: #df7e0c;
 
+@value colorWarningLighter: #f5d7b4;
+
 @value colorWarningLightest: #fcf2e7;
 
 @value colorWarningLight: #f0c48f;
@@ -124,6 +132,8 @@
 
 @value colorDanger: #e31c4c;
 
+@value colorDangerLighter: #f6b9c8;
+
 @value colorDangerLightest: #fce8ed;
 
 @value colorDangerLight: #f297ad;

package/lib/styles/variables/_color.js

@@ -3,7 +3,7 @@
 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.colorGrayLightest = 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;
+exports.colorWarningLightest = exports.colorWarningLighter = 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.colorSuccessLighter = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorNeutralLightest = exports.colorNeutralLighter = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLighter = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillDisabled = exports.colorDangerLightest = exports.colorDangerLighter = 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;
@@ -91,6 +91,8 @@ const colorGrayLightest = '#EBEBEB';
 exports.colorGrayLightest = colorGrayLightest;
 const colorNeutral = '#706f9b';
 exports.colorNeutral = colorNeutral;
+const colorNeutralLighter = '#d3d2e0';
+exports.colorNeutralLighter = colorNeutralLighter;
 const colorNeutralLightest = '#f1f1f5';
 exports.colorNeutralLightest = colorNeutralLightest;
 const colorNeutralLight = '#bdbdd1';
@@ -101,6 +103,8 @@ const colorNeutralDarkest = '#2C2C47';
 exports.colorNeutralDarkest = colorNeutralDarkest;
 const colorSuccess = '#03964d';
 exports.colorSuccess = colorSuccess;
+const colorSuccessLighter = '#b1dec8';
+exports.colorSuccessLighter = colorSuccessLighter;
 const colorSuccessLightest = '#e6f5ed';
 exports.colorSuccessLightest = colorSuccessLightest;
 const colorSuccessLight = '#8bcfad';
@@ -111,6 +115,8 @@ const colorSuccessDarkest = '#013f20';
 exports.colorSuccessDarkest = colorSuccessDarkest;
 const colorInformation = '#0769f0';
 exports.colorInformation = colorInformation;
+const colorInformationLighter = '#b2d1fa';
+exports.colorInformationLighter = colorInformationLighter;
 const colorInformationLightest = '#e6f0fe';
 exports.colorInformationLightest = colorInformationLightest;
 const colorInformationLight = '#8dbaf8';
@@ -121,6 +127,8 @@ const colorInformationDarkest = '#032c65';
 exports.colorInformationDarkest = colorInformationDarkest;
 const colorWarning = '#df7e0c';
 exports.colorWarning = colorWarning;
+const colorWarningLighter = '#f5d7b4';
+exports.colorWarningLighter = colorWarningLighter;
 const colorWarningLightest = '#fcf2e7';
 exports.colorWarningLightest = colorWarningLightest;
 const colorWarningLight = '#f0c48f';
@@ -131,6 +139,8 @@ const colorWarningDarkest = '#5e3505';
 exports.colorWarningDarkest = colorWarningDarkest;
 const colorDanger = '#e31c4c';
 exports.colorDanger = colorDanger;
+const colorDangerLighter = '#f6b9c8';
+exports.colorDangerLighter = colorDangerLighter;
 const colorDangerLightest = '#fce8ed';
 exports.colorDangerLightest = colorDangerLightest;
 const colorDangerLight = '#f297ad';

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

@@ -86,6 +86,8 @@ export const colorGrayLightest = '#EBEBEB';
 
 export const colorNeutral = '#706f9b';
 
+export const colorNeutralLighter = '#d3d2e0';
+
 export const colorNeutralLightest = '#f1f1f5';
 
 export const colorNeutralLight = '#bdbdd1';
@@ -96,6 +98,8 @@ export const colorNeutralDarkest = '#2C2C47';
 
 export const colorSuccess = '#03964d';
 
+export const colorSuccessLighter = '#b1dec8';
+
 export const colorSuccessLightest = '#e6f5ed';
 
 export const colorSuccessLight = '#8bcfad';
@@ -106,6 +110,8 @@ export const colorSuccessDarkest = '#013f20';
 
 export const colorInformation = '#0769f0';
 
+export const colorInformationLighter = '#b2d1fa';
+
 export const colorInformationLightest = '#e6f0fe';
 
 export const colorInformationLight = '#8dbaf8';
@@ -116,6 +122,8 @@ export const colorInformationDarkest = '#032c65';
 
 export const colorWarning = '#df7e0c';
 
+export const colorWarningLighter = '#f5d7b4';
+
 export const colorWarningLightest = '#fcf2e7';
 
 export const colorWarningLight = '#f0c48f';
@@ -126,6 +134,8 @@ export const colorWarningDarkest = '#5e3505';
 
 export const colorDanger = '#e31c4c';
 
+export const colorDangerLighter = '#f6b9c8';
+
 export const colorDangerLightest = '#fce8ed';
 
 export const colorDangerLight = '#f297ad';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {