@spaced-out/ui-design-system 0.1.67 → 0.1.68

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/design-tokens/color/app-color.json +14 -0
  3. package/design-tokens/size/base-size.json +3 -0
  4. package/lib/components/CircularLoader/CircularLoader.module.css +18 -14
  5. package/lib/components/Icon/SemanticIcon.js +1 -0
  6. package/lib/components/Icon/SemanticIcon.js.flow +6 -1
  7. package/lib/components/Table/Table.docs.js +514 -0
  8. package/lib/components/Table/Table.docs.js.flow +476 -0
  9. package/lib/components/Table/TableActionBar.js +37 -3
  10. package/lib/components/Table/TableActionBar.js.flow +27 -0
  11. package/lib/components/Table/TableBar.module.css +22 -2
  12. package/lib/styles/index.css +10 -0
  13. package/lib/styles/index.js +13 -3
  14. package/lib/styles/index.js.flow +10 -0
  15. package/lib/styles/variables/_color.css +8 -0
  16. package/lib/styles/variables/_color.js +9 -1
  17. package/lib/styles/variables/_color.js.flow +8 -0
  18. package/lib/styles/variables/_size.css +2 -0
  19. package/lib/styles/variables/_size.js +3 -1
  20. package/lib/styles/variables/_size.js.flow +2 -0
  21. package/package.json +1 -1
package/lib/styles/index.js.flow CHANGED
@@ -84,6 +84,14 @@ export const colorTooltipFill = 'rgba(23, 23, 42, 0.95)';
84
84
 
85
85
  export const colorBackdropFill = 'rgba(23, 23, 42, 0.7)';
86
86
 
87
+ export const colorButtonFillTableActionEnabled = '#542fbb';
88
+
89
+ export const colorButtonFillTableActionHovered = '#412592';
90
+
91
+ export const colorButtonFillTableActionPressed = '#412592';
92
+
93
+ export const colorButtonFillTableActionBorder = '#7d5dd7';
94
+
87
95
  export const colorButtonFillPrimaryEnabled = '#5c34cd';
88
96
 
89
97
  export const colorButtonFillPrimaryHovered = '#412592';
@@ -424,6 +432,8 @@ export const size720 = '720px';
424
432
 
425
433
  export const size960 = '960px';
426
434
 
435
+ export const size1280 = '1280px';
436
+
427
437
  export const sizeFluid = '100%';
428
438
 
429
439
  export const sizeFullViewportHeight = '100vh';
package/lib/styles/variables/_color.css CHANGED
@@ -58,6 +58,14 @@
58
58
 
59
59
  @value colorBackdropFill: rgba(23, 23, 42, 0.7);
60
60
 
61
+ @value colorButtonFillTableActionEnabled: #542fbb;
62
+
63
+ @value colorButtonFillTableActionHovered: #412592;
64
+
65
+ @value colorButtonFillTableActionPressed: #412592;
66
+
67
+ @value colorButtonFillTableActionBorder: #7d5dd7;
68
+
61
69
  @value colorButtonFillPrimaryEnabled: #5c34cd;
62
70
 
63
71
  @value colorButtonFillPrimaryHovered: #412592;
package/lib/styles/variables/_color.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextFavorite = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuStar = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = 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.colorFillInversePrimary = 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.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = void 0;
6
+ exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextFavorite = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuStar = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = 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.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = 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.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = void 0;
7
7
 
8
8
  const colorTextPrimary = '#17172A';
9
9
  exports.colorTextPrimary = colorTextPrimary;
@@ -65,6 +65,14 @@ const colorTooltipFill = 'rgba(23, 23, 42, 0.95)';
65
65
  exports.colorTooltipFill = colorTooltipFill;
66
66
  const colorBackdropFill = 'rgba(23, 23, 42, 0.7)';
67
67
  exports.colorBackdropFill = colorBackdropFill;
68
+ const colorButtonFillTableActionEnabled = '#542fbb';
69
+ exports.colorButtonFillTableActionEnabled = colorButtonFillTableActionEnabled;
70
+ const colorButtonFillTableActionHovered = '#412592';
71
+ exports.colorButtonFillTableActionHovered = colorButtonFillTableActionHovered;
72
+ const colorButtonFillTableActionPressed = '#412592';
73
+ exports.colorButtonFillTableActionPressed = colorButtonFillTableActionPressed;
74
+ const colorButtonFillTableActionBorder = '#7d5dd7';
75
+ exports.colorButtonFillTableActionBorder = colorButtonFillTableActionBorder;
68
76
  const colorButtonFillPrimaryEnabled = '#5c34cd';
69
77
  exports.colorButtonFillPrimaryEnabled = colorButtonFillPrimaryEnabled;
70
78
  const colorButtonFillPrimaryHovered = '#412592';
package/lib/styles/variables/_color.js.flow CHANGED
@@ -60,6 +60,14 @@ export const colorTooltipFill = 'rgba(23, 23, 42, 0.95)';
60
60
 
61
61
  export const colorBackdropFill = 'rgba(23, 23, 42, 0.7)';
62
62
 
63
+ export const colorButtonFillTableActionEnabled = '#542fbb';
64
+
65
+ export const colorButtonFillTableActionHovered = '#412592';
66
+
67
+ export const colorButtonFillTableActionPressed = '#412592';
68
+
69
+ export const colorButtonFillTableActionBorder = '#7d5dd7';
70
+
63
71
  export const colorButtonFillPrimaryEnabled = '#5c34cd';
64
72
 
65
73
  export const colorButtonFillPrimaryHovered = '#412592';
package/lib/styles/variables/_size.css CHANGED
@@ -84,6 +84,8 @@
84
84
 
85
85
  @value size960: 960px;
86
86
 
87
+ @value size1280: 1280px;
88
+
87
89
  @value sizeFluid: 100%;
88
90
 
89
91
  @value sizeFullViewportHeight: 100vh;
package/lib/styles/variables/_size.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size8 = exports.size720 = exports.size70 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size300 = exports.size30 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
6
+ exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size8 = exports.size720 = exports.size70 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size300 = exports.size30 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
7
7
 
8
8
  const size2 = '2px';
9
9
  exports.size2 = size2;
@@ -91,6 +91,8 @@ const size720 = '720px';
91
91
  exports.size720 = size720;
92
92
  const size960 = '960px';
93
93
  exports.size960 = size960;
94
+ const size1280 = '1280px';
95
+ exports.size1280 = size1280;
94
96
  const sizeFluid = '100%';
95
97
  exports.sizeFluid = sizeFluid;
96
98
  const sizeFullViewportHeight = '100vh';
package/lib/styles/variables/_size.js.flow CHANGED
@@ -86,6 +86,8 @@ export const size720 = '720px';
86
86
 
87
87
  export const size960 = '960px';
88
88
 
89
+ export const size1280 = '1280px';
90
+
89
91
  export const sizeFluid = '100%';
90
92
 
91
93
  export const sizeFullViewportHeight = '100vh';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spaced-out/ui-design-system",
3
- "version": "0.1.67",
3
+ "version": "0.1.68",
4
4
  "main": "index.js",
5
5
  "description": "Sense UI components library",
6
6
  "author": {