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

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 (19) hide show
  1. package/.github/workflows/publish_to_npm.yml +2 -1
  2. package/CHANGELOG.md +17 -0
  3. package/design-tokens/color/app-color.json +5 -5
  4. package/design-tokens/color/base-color.json +8 -8
  5. package/lib/components/Button/Button.module.css +2 -0
  6. package/lib/components/InContextAlert/InContextAlert.module.css +16 -0
  7. package/lib/components/TabList/TabList.js +1 -0
  8. package/lib/components/TabList/TabList.js.flow +1 -0
  9. package/lib/components/Text/Text.js +26 -14
  10. package/lib/components/Text/Text.js.flow +14 -0
  11. package/lib/components/Text/index.js +6 -0
  12. package/lib/components/Text/index.js.flow +1 -0
  13. package/lib/styles/typography.module.css +9 -3
  14. package/lib/styles/variables/_color.css +9 -9
  15. package/lib/styles/variables/_color.js +11 -11
  16. package/lib/styles/variables/_color.js.flow +9 -9
  17. package/lib/types/typography.js +1 -1
  18. package/lib/types/typography.js.flow +1 -1
  19. package/package.json +1 -1
package/.github/workflows/publish_to_npm.yml CHANGED
@@ -23,6 +23,7 @@ jobs:
23
23
  steps:
24
24
  # Checkout project repository
25
25
  # Added fetch-depth to fetch complete history of repo. TODO(Nishant): Customize?
26
+ # TODO(Nishant): update with a org bot token instead of personal token
26
27
  - name: Checkout
27
28
  uses: actions/checkout@v3
28
29
  with:
@@ -44,7 +45,7 @@ jobs:
44
45
  #- name: Run tests
45
46
  # run: yarn test
46
47
 
47
- # Configure Git
48
+ # Configure Git. TODO(Nishant): update with a org bot instead of personal detail
48
49
  - name: Git configuration
49
50
  run: |
50
51
  git config --global user.email "86281150+superrover@users.noreply.github.com"
package/CHANGELOG.md CHANGED
@@ -2,6 +2,23 @@
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.0.10](https://github.com/spaced-out/ui-design-system/compare/v0.0.9...v0.0.10) (2022-12-21)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * remove colorTextSelected and other color related changes ([6679f48](https://github.com/spaced-out/ui-design-system/commit/6679f48a377a5be7ac30585a88185a28fa70de99))
11
+ * text color updates ([e1ac406](https://github.com/spaced-out/ui-design-system/commit/e1ac40629c96af7fd3c90a7db489f50b3f3ee12f))
12
+
13
+ ### [0.0.9](https://github.com/spaced-out/ui-design-system/compare/v0.0.8...v0.0.9) (2022-12-14)
14
+
15
+
16
+ ### Bug Fixes
17
+
18
+ * border changes for in-context alerts ([af20d4b](https://github.com/spaced-out/ui-design-system/commit/af20d4b4ef46d2b6c10dea72fcd5a9942ceb7ef0))
19
+ * button and text enhancements ([38968b2](https://github.com/spaced-out/ui-design-system/commit/38968b202c6a84e3fe9ed362b62e925436d8a5e8))
20
+ * tab dropdown fix ([204bf48](https://github.com/spaced-out/ui-design-system/commit/204bf4832d404982a937c22d9d148f5ff7dfec42))
21
+
5
22
  ### [0.0.8](https://github.com/spaced-out/ui-design-system/compare/v0.0.7...v0.0.8) (2022-12-12)
6
23
 
7
24
 
package/design-tokens/color/app-color.json CHANGED
@@ -13,23 +13,23 @@
13
13
  "disabled": {
14
14
  "value": "{baseColor.gray.200.value}"
15
15
  },
16
- "selected": {
16
+ "clickable": {
17
17
  "value": "{baseColor.purple.500.value}"
18
18
  },
19
19
  "neutral": {
20
20
  "value": "{baseColor.indigo.500.value}"
21
21
  },
22
22
  "success": {
23
- "value": "{baseColor.green.500.value}"
23
+ "value": "{baseColor.green.700.value}"
24
24
  },
25
25
  "information": {
26
- "value": "{baseColor.blue.500.value}"
26
+ "value": "{baseColor.blue.600.value}"
27
27
  },
28
28
  "warning": {
29
- "value": "{baseColor.orange.500.value}"
29
+ "value": "{baseColor.orange.700.value}"
30
30
  },
31
31
  "danger": {
32
- "value": "{baseColor.red.500.value}"
32
+ "value": "{baseColor.red.600.value}"
33
33
  },
34
34
  "inverse": {
35
35
  "primary": {
package/design-tokens/color/base-color.json CHANGED
@@ -84,28 +84,28 @@
84
84
  "value": "#f1f1f5"
85
85
  },
86
86
  "100": {
87
- "value": "#d3d2e0"
87
+ "value": "#E6E5EF"
88
88
  },
89
89
  "200": {
90
- "value": "#bdbdd1"
90
+ "value": "#D3D2E0"
91
91
  },
92
92
  "300": {
93
- "value": "#9f9fbc"
93
+ "value": "#9F9FBC"
94
94
  },
95
95
  "400": {
96
- "value": "#8d8caf"
96
+ "value": "#8D8CAF"
97
97
  },
98
98
  "500": {
99
- "value": "#706f9b"
99
+ "value": "#706F9B"
100
100
  },
101
101
  "600": {
102
- "value": "#66658d"
102
+ "value": "#66658D"
103
103
  },
104
104
  "700": {
105
- "value": "#504f6e"
105
+ "value": "#504F6E"
106
106
  },
107
107
  "800": {
108
- "value": "#3e3d55"
108
+ "value": "#3E3D55"
109
109
  },
110
110
  "900": {
111
111
  "value": "#2C2C47"
package/lib/components/Button/Button.module.css CHANGED
@@ -146,6 +146,7 @@ button {
146
146
 
147
147
  .secondary {
148
148
  color: colorTextPrimary;
149
+ border: borderWidthPrimary solid colorButtonFillPrimaryEnabled;
149
150
  background-color: colorButtonFillSecondaryEnabled;
150
151
  }
151
152
 
@@ -223,4 +224,5 @@ button {
223
224
  pointer-events: none;
224
225
  color: colorTextDisabled;
225
226
  background-color: colorFillDisabled;
227
+ border: initial;
226
228
  }
package/lib/components/InContextAlert/InContextAlert.module.css CHANGED
@@ -1,10 +1,15 @@
1
1
  @value (borderRadiusXSmall) from '../../styles/variables/_border.css';
2
2
  @value (colorFillPrimary,
3
3
  colorTextPrimary,
4
+ colorNeutralLight,
4
5
  colorNeutralLightest,
6
+ colorSuccessLight,
5
7
  colorSuccessLightest,
8
+ colorInformationLight,
6
9
  colorInformationLightest,
10
+ colorWarningLight,
7
11
  colorWarningLightest,
12
+ colorDangerLight,
8
13
  colorDangerLightest
9
14
  ) from '../../styles/variables/_color.css';
10
15
 
@@ -16,6 +21,10 @@
16
21
  sizeFluid
17
22
  ) from '../../styles/variables/_size.css';
18
23
 
24
+ @value (
25
+ borderWidthPrimary
26
+ ) from '../../styles/variables/_border.css';
27
+
19
28
  .alertContainer {
20
29
  display: flex;
21
30
  flex-direction: row;
@@ -26,26 +35,33 @@
26
35
  width: sizeFluid;
27
36
  word-break: normal;
28
37
  overflow-wrap: anywhere;
38
+ border-width: borderWidthPrimary;
39
+ border-style: solid;
29
40
  }
30
41
 
31
42
  .neutral {
32
43
  background-color: colorNeutralLightest;
44
+ border-color: colorNeutralLight;
33
45
  }
34
46
 
35
47
  .success {
36
48
  background-color: colorSuccessLightest;
49
+ border-color: colorSuccessLight;
37
50
  }
38
51
 
39
52
  .information {
40
53
  background-color: colorInformationLightest;
54
+ border-color: colorInformationLight;
41
55
  }
42
56
 
43
57
  .warning {
44
58
  background-color: colorWarningLightest;
59
+ border-color: colorWarningLight;
45
60
  }
46
61
 
47
62
  .danger {
48
63
  background-color: colorDangerLightest;
64
+ border-color: colorDangerLight;
49
65
  }
50
66
 
51
67
  .closeIcon {
package/lib/components/TabList/TabList.js CHANGED
@@ -87,6 +87,7 @@ const TabList = _ref => {
87
87
  return false;
88
88
  })();
89
89
  const tabDropDownNode = menuOptions.length ? /*#__PURE__*/React.createElement(_TabDropdown.TabDropdown, {
90
+ key: 'tabDropdown' + menuOptions.length,
90
91
  size: size,
91
92
  onOptionSelect: menuOnSelect,
92
93
  props: {
package/lib/components/TabList/TabList.js.flow CHANGED
@@ -96,6 +96,7 @@ export const TabList = ({
96
96
 
97
97
  const tabDropDownNode = menuOptions.length ? (
98
98
  <TabDropdown
99
+ key={'tabDropdown' + menuOptions.length}
99
100
  size={size}
100
101
  onOptionSelect={menuOnSelect}
101
102
  props={{
package/lib/components/Text/Text.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- 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;
6
+ 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;
7
7
  var React = _interopRequireWildcard(require("react"));
8
8
  var _typography = require("../../types/typography");
9
9
  var _classify = _interopRequireDefault(require("../../utils/classify"));
@@ -108,85 +108,97 @@ const ButtonTextSmall = _ref8 => {
108
108
  }), children);
109
109
  };
110
110
  exports.ButtonTextSmall = ButtonTextSmall;
111
- const FormInputMedium = _ref9 => {
111
+ const ButtonTextExtraSmall = _ref9 => {
112
112
  let {
113
113
  color = _typography.TEXT_COLORS.primary,
114
114
  children,
115
115
  className,
116
116
  ...props
117
117
  } = _ref9;
118
+ return /*#__PURE__*/React.createElement("span", _extends({}, props, {
119
+ className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _typographyModule.default[color], className)
120
+ }), children);
121
+ };
122
+ exports.ButtonTextExtraSmall = ButtonTextExtraSmall;
123
+ const FormInputMedium = _ref10 => {
124
+ let {
125
+ color = _typography.TEXT_COLORS.primary,
126
+ children,
127
+ className,
128
+ ...props
129
+ } = _ref10;
118
130
  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
119
131
  className: (0, _classify.default)(_typographyModule.default.formInputMedium, _typographyModule.default[color], className)
120
132
  }), children);
121
133
  };
122
134
  exports.FormInputMedium = FormInputMedium;
123
- const FormInputSmall = _ref10 => {
135
+ const FormInputSmall = _ref11 => {
124
136
  let {
125
137
  color = _typography.TEXT_COLORS.primary,
126
138
  children,
127
139
  className,
128
140
  ...props
129
- } = _ref10;
141
+ } = _ref11;
130
142
  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
131
143
  className: (0, _classify.default)(_typographyModule.default.formInputSmall, _typographyModule.default[color], className)
132
144
  }), children);
133
145
  };
134
146
  exports.FormInputSmall = FormInputSmall;
135
- const BodyLarge = _ref11 => {
147
+ const BodyLarge = _ref12 => {
136
148
  let {
137
149
  color = _typography.TEXT_COLORS.primary,
138
150
  children,
139
151
  className,
140
152
  ...props
141
- } = _ref11;
153
+ } = _ref12;
142
154
  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
143
155
  className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default[color], className)
144
156
  }), children);
145
157
  };
146
158
  exports.BodyLarge = BodyLarge;
147
- const BodyMedium = _ref12 => {
159
+ const BodyMedium = _ref13 => {
148
160
  let {
149
161
  color = _typography.TEXT_COLORS.primary,
150
162
  children,
151
163
  className,
152
164
  ...props
153
- } = _ref12;
165
+ } = _ref13;
154
166
  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
155
167
  className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default[color], className)
156
168
  }), children);
157
169
  };
158
170
  exports.BodyMedium = BodyMedium;
159
- const BodySmall = _ref13 => {
171
+ const BodySmall = _ref14 => {
160
172
  let {
161
173
  color = _typography.TEXT_COLORS.primary,
162
174
  children,
163
175
  className,
164
176
  ...props
165
- } = _ref13;
177
+ } = _ref14;
166
178
  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
167
179
  className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default[color], className)
168
180
  }), children);
169
181
  };
170
182
  exports.BodySmall = BodySmall;
171
- const FormLabelMedium = _ref14 => {
183
+ const FormLabelMedium = _ref15 => {
172
184
  let {
173
185
  color = _typography.TEXT_COLORS.primary,
174
186
  children,
175
187
  className,
176
188
  ...props
177
- } = _ref14;
189
+ } = _ref15;
178
190
  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
179
191
  className: (0, _classify.default)(_typographyModule.default.formLabelMedium, _typographyModule.default[color], className)
180
192
  }), children);
181
193
  };
182
194
  exports.FormLabelMedium = FormLabelMedium;
183
- const FormLabelSmall = _ref15 => {
195
+ const FormLabelSmall = _ref16 => {
184
196
  let {
185
197
  color = _typography.TEXT_COLORS.primary,
186
198
  children,
187
199
  className,
188
200
  ...props
189
- } = _ref15;
201
+ } = _ref16;
190
202
  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
191
203
  className: (0, _classify.default)(_typographyModule.default.formLabelSmall, _typographyModule.default[color], className)
192
204
  }), children);
package/lib/components/Text/Text.js.flow CHANGED
@@ -116,6 +116,20 @@ export const ButtonTextSmall = ({
116
116
  </span>
117
117
  );
118
118
 
119
+ export const ButtonTextExtraSmall = ({
120
+ color = TEXT_COLORS.primary,
121
+ children,
122
+ className,
123
+ ...props
124
+ }: TextProps): React.Node => (
125
+ <span
126
+ {...props}
127
+ className={classify(css.buttonTextExtraSmall, css[color], className)}
128
+ >
129
+ {children}
130
+ </span>
131
+ );
132
+
119
133
  export const FormInputMedium = ({
120
134
  color = TEXT_COLORS.primary,
121
135
  children,
package/lib/components/Text/index.js CHANGED
@@ -21,6 +21,12 @@ Object.defineProperty(exports, "BodySmall", {
21
21
  return _Text.BodySmall;
22
22
  }
23
23
  });
24
+ Object.defineProperty(exports, "ButtonTextExtraSmall", {
25
+ enumerable: true,
26
+ get: function () {
27
+ return _Text.ButtonTextExtraSmall;
28
+ }
29
+ });
24
30
  Object.defineProperty(exports, "ButtonTextMedium", {
25
31
  enumerable: true,
26
32
  get: function () {
package/lib/components/Text/index.js.flow CHANGED
@@ -6,6 +6,7 @@ export {
6
6
  BodyLarge,
7
7
  BodyMedium,
8
8
  BodySmall,
9
+ ButtonTextExtraSmall,
9
10
  ButtonTextMedium,
10
11
  ButtonTextSmall,
11
12
  FormInputMedium,
package/lib/styles/typography.module.css CHANGED
@@ -3,7 +3,7 @@
3
3
  colorTextSecondary,
4
4
  colorTextTertiary,
5
5
  colorTextDisabled,
6
- colorTextSelected,
6
+ colorTextClickable,
7
7
  colorTextNeutral,
8
8
  colorTextSuccess,
9
9
  colorTextInformation,
@@ -103,6 +103,12 @@
103
103
  letter-spacing: fontLetterSpacing1;
104
104
  }
105
105
 
106
+ .buttonTextExtraSmall {
107
+ composes: baseType;
108
+ font-size: fontSize12;
109
+ letter-spacing: fontLetterSpacing1;
110
+ }
111
+
106
112
  .formInputMedium {
107
113
  composes: baseType;
108
114
  font-size: fontSize14;
@@ -166,8 +172,8 @@
166
172
  color: colorTextDisabled;
167
173
  }
168
174
 
169
- .selected {
170
- color: colorTextSelected;
175
+ .clickable {
176
+ color: colorTextClickable;
171
177
  }
172
178
 
173
179
  .neutral {
package/lib/styles/variables/_color.css CHANGED
@@ -6,17 +6,17 @@
6
6
 
7
7
  @value colorTextDisabled: #d1d1d1;
8
8
 
9
- @value colorTextSelected: #5c34cd;
9
+ @value colorTextClickable: #5c34cd;
10
10
 
11
- @value colorTextNeutral: #706f9b;
11
+ @value colorTextNeutral: #706F9B;
12
12
 
13
- @value colorTextSuccess: #03964d;
13
+ @value colorTextSuccess: #026b37;
14
14
 
15
- @value colorTextInformation: #0769f0;
15
+ @value colorTextInformation: #0660da;
16
16
 
17
- @value colorTextWarning: #df7e0c;
17
+ @value colorTextWarning: #9e5909;
18
18
 
19
- @value colorTextDanger: #e31c4c;
19
+ @value colorTextDanger: #cf1945;
20
20
 
21
21
  @value colorTextInversePrimary: #ffffff;
22
22
 
@@ -82,13 +82,13 @@
82
82
 
83
83
  @value colorGrayLightest: #EBEBEB;
84
84
 
85
- @value colorNeutral: #706f9b;
85
+ @value colorNeutral: #706F9B;
86
86
 
87
87
  @value colorNeutralLightest: #f1f1f5;
88
88
 
89
- @value colorNeutralLight: #bdbdd1;
89
+ @value colorNeutralLight: #D3D2E0;
90
90
 
91
- @value colorNeutralDark: #504f6e;
91
+ @value colorNeutralDark: #504F6E;
92
92
 
93
93
  @value colorNeutralDarkest: #2C2C47;
94
94
 
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.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;
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.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;
7
7
 
8
8
  const colorTextPrimary = '#17172A';
9
9
  exports.colorTextPrimary = colorTextPrimary;
@@ -13,17 +13,17 @@ const colorTextTertiary = '#7e7e7e';
13
13
  exports.colorTextTertiary = colorTextTertiary;
14
14
  const colorTextDisabled = '#d1d1d1';
15
15
  exports.colorTextDisabled = colorTextDisabled;
16
- const colorTextSelected = '#5c34cd';
17
- exports.colorTextSelected = colorTextSelected;
18
- const colorTextNeutral = '#706f9b';
16
+ const colorTextClickable = '#5c34cd';
17
+ exports.colorTextClickable = colorTextClickable;
18
+ const colorTextNeutral = '#706F9B';
19
19
  exports.colorTextNeutral = colorTextNeutral;
20
- const colorTextSuccess = '#03964d';
20
+ const colorTextSuccess = '#026b37';
21
21
  exports.colorTextSuccess = colorTextSuccess;
22
- const colorTextInformation = '#0769f0';
22
+ const colorTextInformation = '#0660da';
23
23
  exports.colorTextInformation = colorTextInformation;
24
- const colorTextWarning = '#df7e0c';
24
+ const colorTextWarning = '#9e5909';
25
25
  exports.colorTextWarning = colorTextWarning;
26
- const colorTextDanger = '#e31c4c';
26
+ const colorTextDanger = '#cf1945';
27
27
  exports.colorTextDanger = colorTextDanger;
28
28
  const colorTextInversePrimary = '#ffffff';
29
29
  exports.colorTextInversePrimary = colorTextInversePrimary;
@@ -89,13 +89,13 @@ const colorButtonFillDangerPressed = '#cf1945';
89
89
  exports.colorButtonFillDangerPressed = colorButtonFillDangerPressed;
90
90
  const colorGrayLightest = '#EBEBEB';
91
91
  exports.colorGrayLightest = colorGrayLightest;
92
- const colorNeutral = '#706f9b';
92
+ const colorNeutral = '#706F9B';
93
93
  exports.colorNeutral = colorNeutral;
94
94
  const colorNeutralLightest = '#f1f1f5';
95
95
  exports.colorNeutralLightest = colorNeutralLightest;
96
- const colorNeutralLight = '#bdbdd1';
96
+ const colorNeutralLight = '#D3D2E0';
97
97
  exports.colorNeutralLight = colorNeutralLight;
98
- const colorNeutralDark = '#504f6e';
98
+ const colorNeutralDark = '#504F6E';
99
99
  exports.colorNeutralDark = colorNeutralDark;
100
100
  const colorNeutralDarkest = '#2C2C47';
101
101
  exports.colorNeutralDarkest = colorNeutralDarkest;
package/lib/styles/variables/_color.js.flow CHANGED
@@ -8,17 +8,17 @@ export const colorTextTertiary = '#7e7e7e';
8
8
 
9
9
  export const colorTextDisabled = '#d1d1d1';
10
10
 
11
- export const colorTextSelected = '#5c34cd';
11
+ export const colorTextClickable = '#5c34cd';
12
12
 
13
- export const colorTextNeutral = '#706f9b';
13
+ export const colorTextNeutral = '#706F9B';
14
14
 
15
- export const colorTextSuccess = '#03964d';
15
+ export const colorTextSuccess = '#026b37';
16
16
 
17
- export const colorTextInformation = '#0769f0';
17
+ export const colorTextInformation = '#0660da';
18
18
 
19
- export const colorTextWarning = '#df7e0c';
19
+ export const colorTextWarning = '#9e5909';
20
20
 
21
- export const colorTextDanger = '#e31c4c';
21
+ export const colorTextDanger = '#cf1945';
22
22
 
23
23
  export const colorTextInversePrimary = '#ffffff';
24
24
 
@@ -84,13 +84,13 @@ export const colorButtonFillDangerPressed = '#cf1945';
84
84
 
85
85
  export const colorGrayLightest = '#EBEBEB';
86
86
 
87
- export const colorNeutral = '#706f9b';
87
+ export const colorNeutral = '#706F9B';
88
88
 
89
89
  export const colorNeutralLightest = '#f1f1f5';
90
90
 
91
- export const colorNeutralLight = '#bdbdd1';
91
+ export const colorNeutralLight = '#D3D2E0';
92
92
 
93
- export const colorNeutralDark = '#504f6e';
93
+ export const colorNeutralDark = '#504F6E';
94
94
 
95
95
  export const colorNeutralDarkest = '#2C2C47';
96
96
 
package/lib/types/typography.js CHANGED
@@ -10,7 +10,7 @@ const TEXT_COLORS = Object.freeze({
10
10
  secondary: 'secondary',
11
11
  tertiary: 'tertiary',
12
12
  disabled: 'disabled',
13
- selected: 'selected',
13
+ clickable: 'clickable',
14
14
  neutral: 'neutral',
15
15
  success: 'success',
16
16
  information: 'information',
package/lib/types/typography.js.flow CHANGED
@@ -5,7 +5,7 @@ export const TEXT_COLORS = Object.freeze({
5
5
  secondary: 'secondary',
6
6
  tertiary: 'tertiary',
7
7
  disabled: 'disabled',
8
- selected: 'selected',
8
+ clickable: 'clickable',
9
9
  neutral: 'neutral',
10
10
  success: 'success',
11
11
  information: 'information',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spaced-out/ui-design-system",
3
- "version": "0.0.8",
3
+ "version": "0.0.10",
4
4
  "main": "index.js",
5
5
  "description": "Sense UI components library",
6
6
  "author": {