@spaced-out/ui-design-system 0.0.32 → 0.0.33

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.33](https://github.com/spaced-out/ui-design-system/compare/v0.0.32...v0.0.33) (2023-02-22)
+
+
+### Bug Fixes
+
+* chip and empty state design fixes ([751bcfa](https://github.com/spaced-out/ui-design-system/commit/751bcfa418007bda5863d868be2328301e552e67))
+
 ### [0.0.32](https://github.com/spaced-out/ui-design-system/compare/v0.0.31...v0.0.32) (2023-02-22)
 
 

package/design-tokens/size/base-size.json

@@ -30,6 +30,9 @@
     "24": {
       "value": "24px"
     },
+    "26": {
+      "value": "26px"
+    },
     "30": {
       "value": "30px"
     },

package/lib/components/Chip/Chip.module.css

@@ -10,7 +10,7 @@
   colorDangerLightest,
   colorDangerLight,
   colorGrayLightest,
-  colorBackgroundTertiary,
+  colorFillNone,
   colorTextDisabled,
   colorFillDisabled
 ) from '../../styles/variables/_color.css';
@@ -23,20 +23,33 @@
 @value (
   borderRadiusXSmall
 ) from '../../styles/variables/_border.css';
+@value (
+  size18,
+  size26
+) from '../../styles/variables/_size.css';
 
 .chipWrapper {
   composes: formLabelSmall from '../../styles/typography.module.css';
   display: flex;
   background-color: colorNeutralLightest;
   align-items: center;
-  width: fit-content;
-  height: fit-content;
-  padding: spaceXXSmall spaceSmall;
+  max-width: fit-content;
+  max-height: fit-content;
   gap: spaceXXSmall;
   border-radius: borderRadiusXSmall;
   cursor: pointer;
 }
 
+.medium {
+  height: size26;
+  padding: spaceNone spaceSmall;
+}
+
+.small {
+  padding: spaceNone spaceXSmall;
+  height: size18;
+}
+
 .primary {
   background-color: colorNeutralLightest;
 }
@@ -79,7 +92,7 @@
 
 .secondary {
   composes: borderPrimary from '../../styles/border.module.css';
-  background-color: colorBackgroundTertiary;
+  background-color: colorFillNone;
 }
 
 .secondary:hover {
@@ -87,15 +100,11 @@
 }
 
 .withIcon {
-  padding: spaceXXSmall spaceSmall spaceXXSmall spaceXSmall;
+  padding: spaceNone spaceSmall spaceNone spaceXSmall;
 }
 
 .dismissable {
-  padding: spaceXXSmall spaceXSmall spaceXXSmall spaceSmall;
-}
-
-.small {
-  padding: spaceNone spaceXSmall;
+  padding: spaceNone spaceXSmall spaceNone spaceSmall;
 }
 
 .dismissIcon {

package/lib/components/EmptyState/EmptyState.module.css

@@ -14,7 +14,6 @@
 }
 
 .image {
-  margin-bottom: spaceMedium;
   max-width: size140;
 }
 

package/lib/styles/variables/_size.css

@@ -18,6 +18,8 @@
 
 @value size24: 24px;
 
+@value size26: 26px;
+
 @value size30: 30px;
 
 @value size34: 34px;

package/lib/styles/variables/_size.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size8 = exports.size720 = exports.size60 = exports.size580 = exports.size500 = exports.size5 = exports.size480 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size300 = exports.size30 = exports.size276 = exports.size260 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
+exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size8 = exports.size720 = exports.size60 = exports.size580 = exports.size500 = exports.size5 = exports.size480 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size300 = exports.size30 = exports.size276 = exports.size260 = exports.size26 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
 
 const size2 = '2px';
 exports.size2 = size2;
@@ -25,6 +25,8 @@ const size22 = '22px';
 exports.size22 = size22;
 const size24 = '24px';
 exports.size24 = size24;
+const size26 = '26px';
+exports.size26 = size26;
 const size30 = '30px';
 exports.size30 = size30;
 const size34 = '34px';

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

@@ -20,6 +20,8 @@ export const size22 = '22px';
 
 export const size24 = '24px';
 
+export const size26 = '26px';
+
 export const size30 = '30px';
 
 export const size34 = '34px';

package/package.json

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