@spaced-out/ui-design-system 0.1.96-beta.0 → 0.1.96

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.
package/CHANGELOG.md CHANGED
@@ -2,6 +2,20 @@
2
2
 
3
3
  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.
4
4
 
5
+ ### [0.1.96](https://github.com/spaced-out/ui-design-system/compare/v0.1.96-beta.1...v0.1.96) (2024-05-30)
6
+
7
+
8
+ ### Features
9
+
10
+ * adding support link for option side menu ([#219](https://github.com/spaced-out/ui-design-system/issues/219)) ([36f82b4](https://github.com/spaced-out/ui-design-system/commit/36f82b4c3bbb135c9fe8f5eb882d83185e1fad98))
11
+
12
+ ### [0.1.96-beta.1](https://github.com/spaced-out/ui-design-system/compare/v0.1.96-beta.0...v0.1.96-beta.1) (2024-05-30)
13
+
14
+
15
+ ### Features
16
+
17
+ * menu group tokens ([#220](https://github.com/spaced-out/ui-design-system/issues/220)) ([96d1ae6](https://github.com/spaced-out/ui-design-system/commit/96d1ae6be2af7fc1a5eff3097a731a6036856d5e))
18
+
5
19
  ### [0.1.96-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.1.95...v0.1.96-beta.0) (2024-05-28)
6
20
 
7
21
 
@@ -176,6 +176,17 @@
176
176
  }
177
177
  },
178
178
  "side-menu": {
179
+ "background": {
180
+ "default": {
181
+ "value": "{baseColor.indigo.940.value}"
182
+ },
183
+ "hovered": {
184
+ "value": "{baseColor.indigo.920.value}"
185
+ },
186
+ "selected": {
187
+ "value": "{baseColor.purple.500.value}"
188
+ }
189
+ },
179
190
  "icon": {
180
191
  "default": {
181
192
  "value": "{baseColor.indigo.300.value}"
@@ -190,6 +201,24 @@
190
201
  }
191
202
  }
192
203
  },
204
+ "group-menu": {
205
+ "background": {
206
+ "default": {
207
+ "value": "{baseColor.indigo.940.value}"
208
+ },
209
+ "hovered": {
210
+ "value": "{baseColor.indigo.920.value}"
211
+ },
212
+ "selected": {
213
+ "value": "{baseColor.purple.500.value}"
214
+ }
215
+ },
216
+ "text": {
217
+ "default": {
218
+ "value": "{baseColor.indigo.200.value}"
219
+ }
220
+ }
221
+ },
193
222
  "sub-menu": {
194
223
  "background": {
195
224
  "default": {
@@ -57,6 +57,9 @@
57
57
  "42": {
58
58
  "value": "42px"
59
59
  },
60
+ "44": {
61
+ "value": "44px"
62
+ },
60
63
  "48": {
61
64
  "value": "48px"
62
65
  },
@@ -166,6 +166,11 @@ const MENU_NAME_LIST = Object.freeze({
166
166
  title: 'Configuration',
167
167
  iconName: 'gear',
168
168
  iconType: 'duotone'
169
+ },
170
+ supportLinks: {
171
+ title: 'Support Links',
172
+ iconName: 'circle-question',
173
+ iconType: 'duotone'
169
174
  }
170
175
  });
171
176
  exports.MENU_NAME_LIST = MENU_NAME_LIST;
@@ -164,6 +164,11 @@ export const MENU_NAME_LIST = Object.freeze({
164
164
  iconName: 'gear',
165
165
  iconType: 'duotone',
166
166
  },
167
+ supportLinks: {
168
+ title: 'Support Links',
169
+ iconName: 'circle-question',
170
+ iconType: 'duotone',
171
+ },
167
172
  });
168
173
 
169
174
  type ClassNames = $ReadOnly<{wrapper?: string}>;
@@ -5,6 +5,9 @@
5
5
  colorTextInversePrimary,
6
6
  colorSideMenuIconDefault,
7
7
  colorSideMenuIconActive,
8
+ colorSideMenuBackgroundDefault,
9
+ colorSideMenuBackgroundHovered,
10
+ colorSideMenuBackgroundSelected,
8
11
  colorFocusPrimary
9
12
  ) from '../../styles/variables/_color.css';
10
13
  @value ( spaceNone, spaceXXSmall, spaceXSmall, spaceSmall ) from '../../styles/variables/_space.css';
@@ -19,7 +22,7 @@
19
22
 
20
23
  .linkWrapper {
21
24
  display: flex;
22
- background: colorFillInversePrimary;
25
+ background: colorSideMenuBackgroundDefault;
23
26
  color: colorTextInverseSecondary;
24
27
  flex-direction: row;
25
28
  gap: spaceXSmall;
@@ -31,7 +34,7 @@
31
34
  width: sizeFluid;
32
35
  cursor: pointer;
33
36
  user-select: none;
34
- padding: spaceNone spaceXXSmall;
37
+ padding: spaceNone;
35
38
  }
36
39
 
37
40
  .linkWrapper:focus-visible {
@@ -50,20 +53,20 @@
50
53
  }
51
54
 
52
55
  .linkWrapper:not(.selected):not(.inActive):hover {
53
- background: colorNeutralDarkest;
56
+ background: colorSideMenuBackgroundHovered;
54
57
  color: colorTextInversePrimary;
55
58
  }
56
59
 
57
60
  .menuIcon {
58
- height: size28;
59
- width: size28;
60
- min-height: size28;
61
- min-width: size28;
61
+ height: size32;
62
+ width: size32;
63
+ min-height: size32;
64
+ min-width: size32;
62
65
  color: colorSideMenuIconDefault;
63
66
  }
64
67
 
65
68
  .linkWrapper.selected {
66
- background: colorFillPrimary;
69
+ background: colorSideMenuBackgroundSelected;
67
70
  color: colorTextInversePrimary;
68
71
  }
69
72
 
@@ -79,4 +82,5 @@
79
82
  color: inherit;
80
83
  margin-right: spaceSmall;
81
84
  white-space: nowrap;
85
+ padding-right: spaceXXSmall;
82
86
  }
@@ -120,12 +120,26 @@
120
120
 
121
121
  @value colorButtonFillDangerPressed: #cf1945;
122
122
 
123
+ @value colorSideMenuBackgroundDefault: #17172A;
124
+
125
+ @value colorSideMenuBackgroundHovered: #1F1F36;
126
+
127
+ @value colorSideMenuBackgroundSelected: #5c34cd;
128
+
123
129
  @value colorSideMenuIconDefault: #9F9FBC;
124
130
 
125
131
  @value colorSideMenuIconActive: #ffffff;
126
132
 
127
133
  @value colorSideMenuAccountBarFill: #1F1F36;
128
134
 
135
+ @value colorGroupMenuBackgroundDefault: #17172A;
136
+
137
+ @value colorGroupMenuBackgroundHovered: #1F1F36;
138
+
139
+ @value colorGroupMenuBackgroundSelected: #5c34cd;
140
+
141
+ @value colorGroupMenuTextDefault: #D3D2E0;
142
+
129
143
  @value colorSubMenuBackgroundDefault: #1F1F36;
130
144
 
131
145
  @value colorSubMenuStar: #DFBD0D;
@@ -400,6 +414,8 @@
400
414
 
401
415
  @value size42: 42px;
402
416
 
417
+ @value size44: 44px;
418
+
403
419
  @value size48: 48px;
404
420
 
405
421
  @value size50: 50px;
@@ -3,9 +3,9 @@
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.colorSideMenuAccountBarFill = 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.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = 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 = exports.borderWidthTertiary = exports.borderWidthSecondary = exports.borderWidthPrimary = exports.borderWidthNone = exports.borderRadiusXSmall = exports.borderRadiusXLarge = exports.borderRadiusSmall = exports.borderRadiusRadioButton = exports.borderRadiusNone = exports.borderRadiusMedium = exports.borderRadiusLarge = exports.borderRadiusCircle = void 0;
7
- exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size200 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = exports.shadowBoxShadow4Y = exports.shadowBoxShadow4X = exports.shadowBoxShadow4Type = exports.shadowBoxShadow4Spread = exports.shadowBoxShadow4Color = exports.shadowBoxShadow4Blur = exports.shadowBoxShadow3Y = exports.shadowBoxShadow3X = exports.shadowBoxShadow3Type = exports.shadowBoxShadow3Spread = exports.shadowBoxShadow3Color = exports.shadowBoxShadow3Blur = exports.shadowBoxShadow2Y = exports.shadowBoxShadow2X = exports.shadowBoxShadow2Type = exports.shadowBoxShadow2Spread = exports.shadowBoxShadow2Color = exports.shadowBoxShadow2Blur = exports.shadowBoxShadow1Y = exports.shadowBoxShadow1X = exports.shadowBoxShadow1Type = exports.shadowBoxShadow1Spread = exports.shadowBoxShadow1Color = exports.shadowBoxShadow1Blur = exports.opacity95 = exports.opacity90 = exports.opacity85 = exports.opacity80 = exports.opacity70 = exports.opacity60 = exports.opacity50 = exports.opacity5 = exports.opacity40 = exports.opacity30 = exports.opacity20 = exports.opacity15 = exports.opacity100 = exports.opacity10 = exports.opacity0 = exports.motionEaseInEaseOut = exports.motionDurationSlowest = exports.motionDurationSlower = exports.motionDurationSlow = exports.motionDurationNormal = exports.motionDurationFast = exports.fontWeightMedium = exports.fontWeightBook = exports.fontTextDecorationNone = exports.fontTextCaseNone = exports.fontSize46 = exports.fontSize36 = exports.fontSize26 = exports.fontSize24 = exports.fontSize18 = exports.fontSize16 = exports.fontSize14 = exports.fontSize13 = exports.fontSize12 = exports.fontParagraphSpacing0 = exports.fontLineHeight170 = exports.fontLineHeight150 = exports.fontLineHeight140 = exports.fontLineHeight130 = exports.fontLineHeight125 = exports.fontLineHeight120 = exports.fontLineHeight100 = exports.fontLetterSpacingMinus4 = exports.fontLetterSpacingMinus3 = exports.fontLetterSpacingMinus2 = exports.fontLetterSpacingMinus1 = exports.fontLetterSpacing4 = exports.fontLetterSpacing2 = exports.fontLetterSpacing1 = exports.fontLetterSpacing0 = exports.fontFamilyCentra = exports.elevationTooltip = exports.elevationToast = exports.elevationNone = exports.elevationModal = exports.elevationMenu = exports.elevationCard = exports.elevationBackdrop = void 0;
8
- exports.spaceXXSmall = exports.spaceXXLarge = exports.spaceXSmall = exports.spaceXLarge = exports.spaceSmall = exports.spaceNone = exports.spaceNegHalfFluid = exports.spaceNegFluid = exports.spaceMedium = exports.spaceLarge = exports.spaceHalfFluid = exports.spaceFluid = exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = 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.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = exports.size26 = void 0;
6
+ 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.colorSideMenuBackgroundSelected = exports.colorSideMenuBackgroundHovered = exports.colorSideMenuBackgroundDefault = exports.colorSideMenuAccountBarFill = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGroupMenuTextDefault = exports.colorGroupMenuBackgroundSelected = exports.colorGroupMenuBackgroundHovered = exports.colorGroupMenuBackgroundDefault = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = 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 = exports.borderWidthTertiary = exports.borderWidthSecondary = exports.borderWidthPrimary = exports.borderWidthNone = exports.borderRadiusXSmall = exports.borderRadiusXLarge = exports.borderRadiusSmall = exports.borderRadiusRadioButton = exports.borderRadiusNone = exports.borderRadiusMedium = exports.borderRadiusLarge = exports.borderRadiusCircle = void 0;
7
+ exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = exports.shadowBoxShadow4Y = exports.shadowBoxShadow4X = exports.shadowBoxShadow4Type = exports.shadowBoxShadow4Spread = exports.shadowBoxShadow4Color = exports.shadowBoxShadow4Blur = exports.shadowBoxShadow3Y = exports.shadowBoxShadow3X = exports.shadowBoxShadow3Type = exports.shadowBoxShadow3Spread = exports.shadowBoxShadow3Color = exports.shadowBoxShadow3Blur = exports.shadowBoxShadow2Y = exports.shadowBoxShadow2X = exports.shadowBoxShadow2Type = exports.shadowBoxShadow2Spread = exports.shadowBoxShadow2Color = exports.shadowBoxShadow2Blur = exports.shadowBoxShadow1Y = exports.shadowBoxShadow1X = exports.shadowBoxShadow1Type = exports.shadowBoxShadow1Spread = exports.shadowBoxShadow1Color = exports.shadowBoxShadow1Blur = exports.opacity95 = exports.opacity90 = exports.opacity85 = exports.opacity80 = exports.opacity70 = exports.opacity60 = exports.opacity50 = exports.opacity5 = exports.opacity40 = exports.opacity30 = exports.opacity20 = exports.opacity15 = exports.opacity100 = exports.opacity10 = exports.opacity0 = exports.motionEaseInEaseOut = exports.motionDurationSlowest = exports.motionDurationSlower = exports.motionDurationSlow = exports.motionDurationNormal = exports.motionDurationFast = exports.fontWeightMedium = exports.fontWeightBook = exports.fontTextDecorationNone = exports.fontTextCaseNone = exports.fontSize46 = exports.fontSize36 = exports.fontSize26 = exports.fontSize24 = exports.fontSize18 = exports.fontSize16 = exports.fontSize14 = exports.fontSize13 = exports.fontSize12 = exports.fontParagraphSpacing0 = exports.fontLineHeight170 = exports.fontLineHeight150 = exports.fontLineHeight140 = exports.fontLineHeight130 = exports.fontLineHeight125 = exports.fontLineHeight120 = exports.fontLineHeight100 = exports.fontLetterSpacingMinus4 = exports.fontLetterSpacingMinus3 = exports.fontLetterSpacingMinus2 = exports.fontLetterSpacingMinus1 = exports.fontLetterSpacing4 = exports.fontLetterSpacing2 = exports.fontLetterSpacing1 = exports.fontLetterSpacing0 = exports.fontFamilyCentra = exports.elevationTooltip = exports.elevationToast = exports.elevationNone = exports.elevationModal = exports.elevationMenu = exports.elevationCard = exports.elevationBackdrop = exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = void 0;
8
+ exports.spaceXXSmall = exports.spaceXXLarge = exports.spaceXSmall = exports.spaceXLarge = exports.spaceSmall = exports.spaceNone = exports.spaceNegHalfFluid = exports.spaceNegFluid = exports.spaceMedium = exports.spaceLarge = exports.spaceHalfFluid = exports.spaceFluid = exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size44 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size200 = exports.size20 = void 0;
9
9
 
10
10
  const borderWidthNone = '0px';
11
11
  exports.borderWidthNone = borderWidthNone;
@@ -129,12 +129,26 @@ const colorButtonFillDangerHovered = '#cf1945';
129
129
  exports.colorButtonFillDangerHovered = colorButtonFillDangerHovered;
130
130
  const colorButtonFillDangerPressed = '#cf1945';
131
131
  exports.colorButtonFillDangerPressed = colorButtonFillDangerPressed;
132
+ const colorSideMenuBackgroundDefault = '#17172A';
133
+ exports.colorSideMenuBackgroundDefault = colorSideMenuBackgroundDefault;
134
+ const colorSideMenuBackgroundHovered = '#1F1F36';
135
+ exports.colorSideMenuBackgroundHovered = colorSideMenuBackgroundHovered;
136
+ const colorSideMenuBackgroundSelected = '#5c34cd';
137
+ exports.colorSideMenuBackgroundSelected = colorSideMenuBackgroundSelected;
132
138
  const colorSideMenuIconDefault = '#9F9FBC';
133
139
  exports.colorSideMenuIconDefault = colorSideMenuIconDefault;
134
140
  const colorSideMenuIconActive = '#ffffff';
135
141
  exports.colorSideMenuIconActive = colorSideMenuIconActive;
136
142
  const colorSideMenuAccountBarFill = '#1F1F36';
137
143
  exports.colorSideMenuAccountBarFill = colorSideMenuAccountBarFill;
144
+ const colorGroupMenuBackgroundDefault = '#17172A';
145
+ exports.colorGroupMenuBackgroundDefault = colorGroupMenuBackgroundDefault;
146
+ const colorGroupMenuBackgroundHovered = '#1F1F36';
147
+ exports.colorGroupMenuBackgroundHovered = colorGroupMenuBackgroundHovered;
148
+ const colorGroupMenuBackgroundSelected = '#5c34cd';
149
+ exports.colorGroupMenuBackgroundSelected = colorGroupMenuBackgroundSelected;
150
+ const colorGroupMenuTextDefault = '#D3D2E0';
151
+ exports.colorGroupMenuTextDefault = colorGroupMenuTextDefault;
138
152
  const colorSubMenuBackgroundDefault = '#1F1F36';
139
153
  exports.colorSubMenuBackgroundDefault = colorSubMenuBackgroundDefault;
140
154
  const colorSubMenuStar = '#DFBD0D';
@@ -409,6 +423,8 @@ const size40 = '40px';
409
423
  exports.size40 = size40;
410
424
  const size42 = '42px';
411
425
  exports.size42 = size42;
426
+ const size44 = '44px';
427
+ exports.size44 = size44;
412
428
  const size48 = '48px';
413
429
  exports.size48 = size48;
414
430
  const size50 = '50px';
@@ -122,12 +122,26 @@ export const colorButtonFillDangerHovered = '#cf1945';
122
122
 
123
123
  export const colorButtonFillDangerPressed = '#cf1945';
124
124
 
125
+ export const colorSideMenuBackgroundDefault = '#17172A';
126
+
127
+ export const colorSideMenuBackgroundHovered = '#1F1F36';
128
+
129
+ export const colorSideMenuBackgroundSelected = '#5c34cd';
130
+
125
131
  export const colorSideMenuIconDefault = '#9F9FBC';
126
132
 
127
133
  export const colorSideMenuIconActive = '#ffffff';
128
134
 
129
135
  export const colorSideMenuAccountBarFill = '#1F1F36';
130
136
 
137
+ export const colorGroupMenuBackgroundDefault = '#17172A';
138
+
139
+ export const colorGroupMenuBackgroundHovered = '#1F1F36';
140
+
141
+ export const colorGroupMenuBackgroundSelected = '#5c34cd';
142
+
143
+ export const colorGroupMenuTextDefault = '#D3D2E0';
144
+
131
145
  export const colorSubMenuBackgroundDefault = '#1F1F36';
132
146
 
133
147
  export const colorSubMenuStar = '#DFBD0D';
@@ -402,6 +416,8 @@ export const size40 = '40px';
402
416
 
403
417
  export const size42 = '42px';
404
418
 
419
+ export const size44 = '44px';
420
+
405
421
  export const size48 = '48px';
406
422
 
407
423
  export const size50 = '50px';
@@ -96,12 +96,26 @@
96
96
 
97
97
  @value colorButtonFillDangerPressed: #cf1945;
98
98
 
99
+ @value colorSideMenuBackgroundDefault: #17172A;
100
+
101
+ @value colorSideMenuBackgroundHovered: #1F1F36;
102
+
103
+ @value colorSideMenuBackgroundSelected: #5c34cd;
104
+
99
105
  @value colorSideMenuIconDefault: #9F9FBC;
100
106
 
101
107
  @value colorSideMenuIconActive: #ffffff;
102
108
 
103
109
  @value colorSideMenuAccountBarFill: #1F1F36;
104
110
 
111
+ @value colorGroupMenuBackgroundDefault: #17172A;
112
+
113
+ @value colorGroupMenuBackgroundHovered: #1F1F36;
114
+
115
+ @value colorGroupMenuBackgroundSelected: #5c34cd;
116
+
117
+ @value colorGroupMenuTextDefault: #D3D2E0;
118
+
105
119
  @value colorSubMenuBackgroundDefault: #1F1F36;
106
120
 
107
121
  @value colorSubMenuStar: #DFBD0D;
@@ -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.colorSideMenuAccountBarFill = 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.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = 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;
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.colorSideMenuBackgroundSelected = exports.colorSideMenuBackgroundHovered = exports.colorSideMenuBackgroundDefault = exports.colorSideMenuAccountBarFill = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGroupMenuTextDefault = exports.colorGroupMenuBackgroundSelected = exports.colorGroupMenuBackgroundHovered = exports.colorGroupMenuBackgroundDefault = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = 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;
@@ -103,12 +103,26 @@ const colorButtonFillDangerHovered = '#cf1945';
103
103
  exports.colorButtonFillDangerHovered = colorButtonFillDangerHovered;
104
104
  const colorButtonFillDangerPressed = '#cf1945';
105
105
  exports.colorButtonFillDangerPressed = colorButtonFillDangerPressed;
106
+ const colorSideMenuBackgroundDefault = '#17172A';
107
+ exports.colorSideMenuBackgroundDefault = colorSideMenuBackgroundDefault;
108
+ const colorSideMenuBackgroundHovered = '#1F1F36';
109
+ exports.colorSideMenuBackgroundHovered = colorSideMenuBackgroundHovered;
110
+ const colorSideMenuBackgroundSelected = '#5c34cd';
111
+ exports.colorSideMenuBackgroundSelected = colorSideMenuBackgroundSelected;
106
112
  const colorSideMenuIconDefault = '#9F9FBC';
107
113
  exports.colorSideMenuIconDefault = colorSideMenuIconDefault;
108
114
  const colorSideMenuIconActive = '#ffffff';
109
115
  exports.colorSideMenuIconActive = colorSideMenuIconActive;
110
116
  const colorSideMenuAccountBarFill = '#1F1F36';
111
117
  exports.colorSideMenuAccountBarFill = colorSideMenuAccountBarFill;
118
+ const colorGroupMenuBackgroundDefault = '#17172A';
119
+ exports.colorGroupMenuBackgroundDefault = colorGroupMenuBackgroundDefault;
120
+ const colorGroupMenuBackgroundHovered = '#1F1F36';
121
+ exports.colorGroupMenuBackgroundHovered = colorGroupMenuBackgroundHovered;
122
+ const colorGroupMenuBackgroundSelected = '#5c34cd';
123
+ exports.colorGroupMenuBackgroundSelected = colorGroupMenuBackgroundSelected;
124
+ const colorGroupMenuTextDefault = '#D3D2E0';
125
+ exports.colorGroupMenuTextDefault = colorGroupMenuTextDefault;
112
126
  const colorSubMenuBackgroundDefault = '#1F1F36';
113
127
  exports.colorSubMenuBackgroundDefault = colorSubMenuBackgroundDefault;
114
128
  const colorSubMenuStar = '#DFBD0D';
@@ -98,12 +98,26 @@ export const colorButtonFillDangerHovered = '#cf1945';
98
98
 
99
99
  export const colorButtonFillDangerPressed = '#cf1945';
100
100
 
101
+ export const colorSideMenuBackgroundDefault = '#17172A';
102
+
103
+ export const colorSideMenuBackgroundHovered = '#1F1F36';
104
+
105
+ export const colorSideMenuBackgroundSelected = '#5c34cd';
106
+
101
107
  export const colorSideMenuIconDefault = '#9F9FBC';
102
108
 
103
109
  export const colorSideMenuIconActive = '#ffffff';
104
110
 
105
111
  export const colorSideMenuAccountBarFill = '#1F1F36';
106
112
 
113
+ export const colorGroupMenuBackgroundDefault = '#17172A';
114
+
115
+ export const colorGroupMenuBackgroundHovered = '#1F1F36';
116
+
117
+ export const colorGroupMenuBackgroundSelected = '#5c34cd';
118
+
119
+ export const colorGroupMenuTextDefault = '#D3D2E0';
120
+
107
121
  export const colorSubMenuBackgroundDefault = '#1F1F36';
108
122
 
109
123
  export const colorSubMenuStar = '#DFBD0D';
@@ -36,6 +36,8 @@
36
36
 
37
37
  @value size42: 42px;
38
38
 
39
+ @value size44: 44px;
40
+
39
41
  @value size48: 48px;
40
42
 
41
43
  @value size50: 50px;
@@ -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.size880 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = 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.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size200 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
6
+ exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size44 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size200 = exports.size20 = exports.size2 = exports.size180 = 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;
@@ -43,6 +43,8 @@ const size40 = '40px';
43
43
  exports.size40 = size40;
44
44
  const size42 = '42px';
45
45
  exports.size42 = size42;
46
+ const size44 = '44px';
47
+ exports.size44 = size44;
46
48
  const size48 = '48px';
47
49
  exports.size48 = size48;
48
50
  const size50 = '50px';
@@ -38,6 +38,8 @@ export const size40 = '40px';
38
38
 
39
39
  export const size42 = '42px';
40
40
 
41
+ export const size44 = '44px';
42
+
41
43
  export const size48 = '48px';
42
44
 
43
45
  export const size50 = '50px';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spaced-out/ui-design-system",
3
- "version": "0.1.96-beta.0",
3
+ "version": "0.1.96",
4
4
  "main": "index.js",
5
5
  "description": "Sense UI components library",
6
6
  "author": {