@spaced-out/ui-design-system 0.0.22 → 0.0.23

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 (31) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/design-tokens/color/app-color.json +7 -0
  3. package/design-tokens/size/base-size.json +6 -0
  4. package/lib/components/Avatar/Avatar.js +15 -5
  5. package/lib/components/Avatar/Avatar.js.flow +14 -0
  6. package/lib/components/Avatar/Avatar.module.css +21 -1
  7. package/lib/components/Chip/Chip.js +11 -3
  8. package/lib/components/Chip/Chip.js.flow +12 -2
  9. package/lib/components/Chip/Chip.module.css +31 -0
  10. package/lib/components/Icon/Icon.js.flow +1 -1
  11. package/lib/components/SideMenuLink/SideMenuLink.module.css +1 -0
  12. package/lib/components/StatusIndicator/StatusIndicator.js +36 -0
  13. package/lib/components/StatusIndicator/StatusIndicator.js.flow +47 -0
  14. package/lib/components/StatusIndicator/StatusIndicator.module.css +37 -0
  15. package/lib/components/StatusIndicator/index.js +16 -0
  16. package/lib/components/StatusIndicator/index.js.flow +3 -0
  17. package/lib/components/SubMenu/SubMenu.js +168 -0
  18. package/lib/components/SubMenu/SubMenu.js.flow +243 -0
  19. package/lib/components/SubMenu/SubMenu.module.css +119 -0
  20. package/lib/components/SubMenu/index.js +42 -0
  21. package/lib/components/SubMenu/index.js.flow +11 -0
  22. package/lib/components/Tabs/Tab/Tab.js +2 -2
  23. package/lib/components/Tabs/Tab/Tab.js.flow +24 -19
  24. package/lib/components/Tabs/Tab/Tab.module.css +5 -1
  25. package/lib/styles/variables/_color.css +2 -0
  26. package/lib/styles/variables/_color.js +3 -1
  27. package/lib/styles/variables/_color.js.flow +2 -0
  28. package/lib/styles/variables/_size.css +4 -0
  29. package/lib/styles/variables/_size.js +6 -2
  30. package/lib/styles/variables/_size.js.flow +4 -0
  31. package/package.json +1 -1
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.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = 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.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = 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.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = 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.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackdropFill = void 0;
7
7
 
8
8
  const colorTextPrimary = '#17172A';
9
9
  exports.colorTextPrimary = colorTextPrimary;
@@ -93,6 +93,8 @@ const colorSideMenuIconDefault = '#9F9FBC';
93
93
  exports.colorSideMenuIconDefault = colorSideMenuIconDefault;
94
94
  const colorSideMenuIconActive = '#ffffff';
95
95
  exports.colorSideMenuIconActive = colorSideMenuIconActive;
96
+ const colorSubMenuBackgroundDefault = '#1F1F36';
97
+ exports.colorSubMenuBackgroundDefault = colorSubMenuBackgroundDefault;
96
98
  const colorGrayLightest = '#EBEBEB';
97
99
  exports.colorGrayLightest = colorGrayLightest;
98
100
  const colorNeutral = '#706F9B';
package/lib/styles/variables/_color.js.flow CHANGED
@@ -88,6 +88,8 @@ export const colorSideMenuIconDefault = '#9F9FBC';
88
88
 
89
89
  export const colorSideMenuIconActive = '#ffffff';
90
90
 
91
+ export const colorSubMenuBackgroundDefault = '#1F1F36';
92
+
91
93
  export const colorGrayLightest = '#EBEBEB';
92
94
 
93
95
  export const colorNeutral = '#706F9B';
package/lib/styles/variables/_size.css CHANGED
@@ -44,6 +44,8 @@
44
44
 
45
45
  @value size240: 240px;
46
46
 
47
+ @value size260: 260px;
48
+
47
49
  @value size276: 276px;
48
50
 
49
51
  @value size300: 300px;
@@ -63,3 +65,5 @@
63
65
  @value size960: 960px;
64
66
 
65
67
  @value sizeFluid: 100%;
68
+
69
+ @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.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.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;
6
+ 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;
7
7
 
8
8
  const size2 = '2px';
9
9
  exports.size2 = size2;
@@ -51,6 +51,8 @@ const size228 = '228px';
51
51
  exports.size228 = size228;
52
52
  const size240 = '240px';
53
53
  exports.size240 = size240;
54
+ const size260 = '260px';
55
+ exports.size260 = size260;
54
56
  const size276 = '276px';
55
57
  exports.size276 = size276;
56
58
  const size300 = '300px';
@@ -70,4 +72,6 @@ exports.size720 = size720;
70
72
  const size960 = '960px';
71
73
  exports.size960 = size960;
72
74
  const sizeFluid = '100%';
73
- exports.sizeFluid = sizeFluid;
75
+ exports.sizeFluid = sizeFluid;
76
+ const sizeFullViewportHeight = '100vh';
77
+ exports.sizeFullViewportHeight = sizeFullViewportHeight;
package/lib/styles/variables/_size.js.flow CHANGED
@@ -46,6 +46,8 @@ export const size228 = '228px';
46
46
 
47
47
  export const size240 = '240px';
48
48
 
49
+ export const size260 = '260px';
50
+
49
51
  export const size276 = '276px';
50
52
 
51
53
  export const size300 = '300px';
@@ -65,3 +67,5 @@ export const size720 = '720px';
65
67
  export const size960 = '960px';
66
68
 
67
69
  export const sizeFluid = '100%';
70
+
71
+ 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.0.22",
3
+ "version": "0.0.23",
4
4
  "main": "index.js",
5
5
  "description": "Sense UI components library",
6
6
  "author": {