@ornikar/bumper 3.9.1 → 3.10.0

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 (54) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/definitions/system/core/tokens/palettes/deepPurpleColorPalette.d.ts +70 -69
  3. package/dist/definitions/system/core/tokens/palettes/deepPurpleColorPalette.d.ts.map +1 -1
  4. package/dist/definitions/tamagui.config.d.ts +142 -2
  5. package/dist/definitions/tamagui.config.d.ts.map +1 -1
  6. package/dist/index-metro.es.android.js +83 -82
  7. package/dist/index-metro.es.android.js.map +1 -1
  8. package/dist/index-metro.es.ios.js +83 -82
  9. package/dist/index-metro.es.ios.js.map +1 -1
  10. package/dist/index-node-22.22.cjs.js +83 -82
  11. package/dist/index-node-22.22.cjs.js.map +1 -1
  12. package/dist/index-node-22.22.cjs.web.js +83 -82
  13. package/dist/index-node-22.22.cjs.web.js.map +1 -1
  14. package/dist/index-node-22.22.es.mjs +83 -82
  15. package/dist/index-node-22.22.es.mjs.map +1 -1
  16. package/dist/index-node-22.22.es.web.mjs +83 -82
  17. package/dist/index-node-22.22.es.web.mjs.map +1 -1
  18. package/dist/index.es.js +83 -82
  19. package/dist/index.es.js.map +1 -1
  20. package/dist/index.es.web.js +83 -82
  21. package/dist/index.es.web.js.map +1 -1
  22. package/dist/storybook-metro.es.android.js +81 -80
  23. package/dist/storybook-metro.es.android.js.map +1 -1
  24. package/dist/storybook-metro.es.ios.js +81 -80
  25. package/dist/storybook-metro.es.ios.js.map +1 -1
  26. package/dist/storybook-node-22.22.cjs.js +81 -80
  27. package/dist/storybook-node-22.22.cjs.js.map +1 -1
  28. package/dist/storybook-node-22.22.cjs.web.js +81 -80
  29. package/dist/storybook-node-22.22.cjs.web.js.map +1 -1
  30. package/dist/storybook-node-22.22.es.mjs +81 -80
  31. package/dist/storybook-node-22.22.es.mjs.map +1 -1
  32. package/dist/storybook-node-22.22.es.web.mjs +81 -80
  33. package/dist/storybook-node-22.22.es.web.mjs.map +1 -1
  34. package/dist/storybook.es.js +81 -80
  35. package/dist/storybook.es.js.map +1 -1
  36. package/dist/storybook.es.web.js +81 -80
  37. package/dist/storybook.es.web.js.map +1 -1
  38. package/dist/tsbuildinfo +1 -1
  39. package/docs/migration/Typography.md +49 -27
  40. package/package.json +1 -1
  41. package/src/system/actions/Button/Button.mdx +1 -1
  42. package/src/system/actions/Button/Button.tsx +1 -1
  43. package/src/system/actions/Button/__snapshots__/Button.features.stories.tsx.snap +10 -10
  44. package/src/system/actions/Button/__snapshots_web__/Button.features.stories.tsx.snap +2 -2
  45. package/src/system/actions/Button/utils/contentColor.ts +1 -1
  46. package/src/system/actions/IconButton/__snapshots__/IconButton.features.stories.tsx.snap +10 -10
  47. package/src/system/actions/IconButton/__snapshots_web__/IconButton.features.stories.tsx.snap +2 -2
  48. package/src/system/core/themes/light/__snapshots__/light.stories.tsx.snap +7 -7
  49. package/src/system/core/themes/light/__snapshots_web__/light.stories.tsx.snap +7 -7
  50. package/src/system/core/themes/light/light.ts +73 -73
  51. package/src/system/core/tokens/palettes/__snapshots__/deepPurpleColorPalette.stories.tsx.snap +141 -70
  52. package/src/system/core/tokens/palettes/__snapshots_web__/deepPurpleColorPalette.stories.tsx.snap +91 -70
  53. package/src/system/core/tokens/palettes/deepPurpleColorPalette.ts +9 -8
  54. package/src/tamagui.config.ts +2 -1
package/dist/index.es.js CHANGED
@@ -55,8 +55,9 @@ var colorScales = {
55
55
  grey: createColorScale({
56
56
  0: '#ffffff',
57
57
  1: '#ECECEC',
58
- 2: '#CDCED0',
59
- 3: '#A8A8A8',
58
+ 2: '#DCDCDC',
59
+ 3: '#BABABA',
60
+ 4: '#A8A8A8',
60
61
  5: '#838383',
61
62
  7: '#505050',
62
63
  9: '#101010'
@@ -122,96 +123,96 @@ var transformColorScalesToTokens = function () {
122
123
  var _ref4 = _slicedToArray(_ref3, 2),
123
124
  scaleNumber = _ref4[0],
124
125
  colorValue = _ref4[1];
125
- return ["".concat(colorName, ".").concat(scaleNumber), colorValue];
126
+ return ["palette.".concat(colorName, ".").concat(scaleNumber), colorValue];
126
127
  });
127
128
  }));
128
129
  };
129
130
  var deepPurpleColorPalette = _objectSpread(_objectSpread({}, transformColorScalesToTokens()), {}, {
130
- white: '#FFFFFF',
131
- black: '#000000',
132
- transparent: 'transparent'
131
+ 'palette.white': '#FFFFFF',
132
+ 'palette.black': '#000000',
133
+ 'palette.transparent': 'transparent'
133
134
  });
134
135
 
135
136
  // WARNING
136
137
  // https://github.com/ornikar/kitt/blob/79e367e962c957c016c4df67dbcf515c8f45ff0e/@ornikar/kitt-universal/src/themes/late-ocean/colors.ts#L28
137
138
  var light = {
138
139
  // content
139
- 'content.base.low': deepPurpleColorPalette['grey.5'],
140
- 'content.base.mid': deepPurpleColorPalette['grey.7'],
141
- 'content.base.hi': deepPurpleColorPalette['grey.9'],
142
- 'content.base.onContrasted.low': deepPurpleColorPalette['white-alpha.60'],
143
- 'content.base.onContrasted.mid': deepPurpleColorPalette['white-alpha.80'],
144
- 'content.base.onContrasted.hi': deepPurpleColorPalette['grey.0'],
145
- 'content.accent': deepPurpleColorPalette['deepPurple.8'],
146
- 'content.promo': deepPurpleColorPalette['lightning.9'],
147
- 'content.promo.onContrasted': deepPurpleColorPalette['lightning.5'],
148
- 'content.info': deepPurpleColorPalette['blue.7'],
149
- 'content.success': deepPurpleColorPalette['green.7'],
150
- 'content.warning': deepPurpleColorPalette['yellow.7'],
151
- 'content.danger': deepPurpleColorPalette['red.7'],
152
- 'content.muted': deepPurpleColorPalette['beige.6'],
153
- 'content.disabled': deepPurpleColorPalette['grey.3'],
154
- 'content.disabled.onContrasted': deepPurpleColorPalette['grey.1'],
140
+ 'content.base.low': deepPurpleColorPalette['palette.grey.5'],
141
+ 'content.base.mid': deepPurpleColorPalette['palette.grey.7'],
142
+ 'content.base.hi': deepPurpleColorPalette['palette.grey.9'],
143
+ 'content.base.onContrasted.low': deepPurpleColorPalette['palette.white-alpha.60'],
144
+ 'content.base.onContrasted.mid': deepPurpleColorPalette['palette.white-alpha.80'],
145
+ 'content.base.onContrasted.hi': deepPurpleColorPalette['palette.grey.0'],
146
+ 'content.accent': deepPurpleColorPalette['palette.deepPurple.8'],
147
+ 'content.promo': deepPurpleColorPalette['palette.lightning.9'],
148
+ 'content.promo.onContrasted': deepPurpleColorPalette['palette.lightning.5'],
149
+ 'content.info': deepPurpleColorPalette['palette.blue.7'],
150
+ 'content.success': deepPurpleColorPalette['palette.green.7'],
151
+ 'content.warning': deepPurpleColorPalette['palette.yellow.7'],
152
+ 'content.danger': deepPurpleColorPalette['palette.red.7'],
153
+ 'content.muted': deepPurpleColorPalette['palette.beige.6'],
154
+ 'content.disabled': deepPurpleColorPalette['palette.grey.4'],
155
+ 'content.disabled.onContrasted': deepPurpleColorPalette['palette.grey.0'],
155
156
  // backgrounds
156
- 'bg.base.low.default': deepPurpleColorPalette['grey.0'],
157
- 'bg.base.low.pressed': deepPurpleColorPalette['beige.1'],
158
- 'bg.base.mid.default': deepPurpleColorPalette['beige.1'],
159
- 'bg.base.mid.pressed': deepPurpleColorPalette['beige.2'],
160
- 'bg.base.hi.default': deepPurpleColorPalette['beige.2'],
161
- 'bg.base.hi.pressed': deepPurpleColorPalette['beige.3'],
162
- 'bg.accent.default': deepPurpleColorPalette['deepPurple.8'],
163
- 'bg.accent.pressed': deepPurpleColorPalette['deepPurple.7'],
164
- 'bg.promo.mid.default': deepPurpleColorPalette['lightning.5'],
165
- 'bg.promo.mid.pressed': deepPurpleColorPalette['lightning.4'],
166
- 'bg.promo.hi.default': deepPurpleColorPalette['lightning.9'],
167
- 'bg.promo.hi.pressed': deepPurpleColorPalette['lightning.8'],
168
- 'bg.highlight.mid.default': deepPurpleColorPalette['mauve.1'],
169
- 'bg.highlight.mid.pressed': deepPurpleColorPalette['mauve.2'],
170
- 'bg.highlight.hi.default': deepPurpleColorPalette['mauve.3'],
171
- 'bg.highlight.hi.pressed': deepPurpleColorPalette['mauve.4'],
172
- 'bg.info.mid': deepPurpleColorPalette['blue.1'],
173
- 'bg.info.hi': deepPurpleColorPalette['blue.6'],
174
- 'bg.success.mid': deepPurpleColorPalette['green.1'],
175
- 'bg.success.hi': deepPurpleColorPalette['green.6'],
176
- 'bg.warning.mid': deepPurpleColorPalette['yellow.1'],
177
- 'bg.warning.hi': deepPurpleColorPalette['yellow.6'],
178
- 'bg.danger.mid': deepPurpleColorPalette['red.1'],
179
- 'bg.danger.hi': deepPurpleColorPalette['red.6'],
180
- 'bg.disabled.mid': deepPurpleColorPalette['grey.1'],
181
- 'bg.disabled.hi': deepPurpleColorPalette['grey.3'],
182
- 'bg.overlay': deepPurpleColorPalette['grey-alpha.50'],
157
+ 'bg.base.low.default': deepPurpleColorPalette['palette.grey.0'],
158
+ 'bg.base.low.pressed': deepPurpleColorPalette['palette.beige.1'],
159
+ 'bg.base.mid.default': deepPurpleColorPalette['palette.beige.1'],
160
+ 'bg.base.mid.pressed': deepPurpleColorPalette['palette.beige.2'],
161
+ 'bg.base.hi.default': deepPurpleColorPalette['palette.beige.2'],
162
+ 'bg.base.hi.pressed': deepPurpleColorPalette['palette.beige.3'],
163
+ 'bg.accent.default': deepPurpleColorPalette['palette.deepPurple.8'],
164
+ 'bg.accent.pressed': deepPurpleColorPalette['palette.deepPurple.7'],
165
+ 'bg.promo.mid.default': deepPurpleColorPalette['palette.lightning.5'],
166
+ 'bg.promo.mid.pressed': deepPurpleColorPalette['palette.lightning.4'],
167
+ 'bg.promo.hi.default': deepPurpleColorPalette['palette.lightning.9'],
168
+ 'bg.promo.hi.pressed': deepPurpleColorPalette['palette.lightning.8'],
169
+ 'bg.highlight.mid.default': deepPurpleColorPalette['palette.mauve.1'],
170
+ 'bg.highlight.mid.pressed': deepPurpleColorPalette['palette.mauve.2'],
171
+ 'bg.highlight.hi.default': deepPurpleColorPalette['palette.mauve.3'],
172
+ 'bg.highlight.hi.pressed': deepPurpleColorPalette['palette.mauve.4'],
173
+ 'bg.info.mid': deepPurpleColorPalette['palette.blue.1'],
174
+ 'bg.info.hi': deepPurpleColorPalette['palette.blue.6'],
175
+ 'bg.success.mid': deepPurpleColorPalette['palette.green.1'],
176
+ 'bg.success.hi': deepPurpleColorPalette['palette.green.6'],
177
+ 'bg.warning.mid': deepPurpleColorPalette['palette.yellow.1'],
178
+ 'bg.warning.hi': deepPurpleColorPalette['palette.yellow.6'],
179
+ 'bg.danger.mid': deepPurpleColorPalette['palette.red.1'],
180
+ 'bg.danger.hi': deepPurpleColorPalette['palette.red.6'],
181
+ 'bg.disabled.mid': deepPurpleColorPalette['palette.grey.1'],
182
+ 'bg.disabled.hi': deepPurpleColorPalette['palette.grey.3'],
183
+ 'bg.overlay': deepPurpleColorPalette['palette.grey-alpha.50'],
183
184
  // borders
184
- 'border.base.low': deepPurpleColorPalette['beige.2'],
185
- 'border.base.mid': deepPurpleColorPalette['beige.3'],
186
- 'border.base.hi': deepPurpleColorPalette['grey.9'],
187
- 'border.base.onContrasted.mid': deepPurpleColorPalette['white-alpha.20'],
188
- 'border.base.onContrasted.hi': deepPurpleColorPalette['grey.0'],
189
- 'border.base.accent': deepPurpleColorPalette['deepPurple.8'],
190
- 'border.info': deepPurpleColorPalette['blue.6'],
191
- 'border.success': deepPurpleColorPalette['green.6'],
192
- 'border.warning': deepPurpleColorPalette['yellow.6'],
193
- 'border.danger': deepPurpleColorPalette['red.6'],
194
- 'border.disabled': deepPurpleColorPalette['grey.2'],
195
- 'border.highlight': deepPurpleColorPalette['mauve.3'],
196
- 'border.focus': deepPurpleColorPalette['blue.4'],
197
- 'border.transparent': deepPurpleColorPalette.transparent,
185
+ 'border.base.low': deepPurpleColorPalette['palette.beige.2'],
186
+ 'border.base.mid': deepPurpleColorPalette['palette.beige.3'],
187
+ 'border.base.hi': deepPurpleColorPalette['palette.grey.9'],
188
+ 'border.base.onContrasted.mid': deepPurpleColorPalette['palette.white-alpha.20'],
189
+ 'border.base.onContrasted.hi': deepPurpleColorPalette['palette.grey.0'],
190
+ 'border.base.accent': deepPurpleColorPalette['palette.deepPurple.8'],
191
+ 'border.info': deepPurpleColorPalette['palette.blue.6'],
192
+ 'border.success': deepPurpleColorPalette['palette.green.6'],
193
+ 'border.warning': deepPurpleColorPalette['palette.yellow.6'],
194
+ 'border.danger': deepPurpleColorPalette['palette.red.6'],
195
+ 'border.disabled': deepPurpleColorPalette['palette.grey.2'],
196
+ 'border.highlight': deepPurpleColorPalette['palette.mauve.3'],
197
+ 'border.focus': deepPurpleColorPalette['palette.blue.4'],
198
+ 'border.transparent': deepPurpleColorPalette['palette.transparent'],
198
199
  // Buttons
199
- 'button.bg.primary.default': deepPurpleColorPalette['deepPurple.8'],
200
- 'button.bg.primary.pressed': deepPurpleColorPalette['deepPurple.7'],
201
- 'button.bg.primary.onContrasted.default': deepPurpleColorPalette['grey.0'],
202
- 'button.bg.primary.onContrasted.pressed': deepPurpleColorPalette['white-alpha.80'],
203
- 'button.bg.secondary.default': deepPurpleColorPalette.transparent,
204
- 'button.bg.secondary.pressed': deepPurpleColorPalette['deepPurple-alpha.10'],
205
- 'button.bg.secondary.onContrasted.default': deepPurpleColorPalette.transparent,
206
- 'button.bg.secondary.onContrasted.pressed': deepPurpleColorPalette['white-alpha.10'],
207
- 'button.bg.tertiary.default': deepPurpleColorPalette.transparent,
208
- 'button.bg.tertiary.pressed': deepPurpleColorPalette['deepPurple-alpha.10'],
209
- 'button.bg.tertiary.onContrasted.default': deepPurpleColorPalette.transparent,
210
- 'button.bg.tertiary.onContrasted.pressed': deepPurpleColorPalette['white-alpha.10'],
211
- 'button.bg.danger.default': deepPurpleColorPalette.transparent,
212
- 'button.bg.danger.pressed': deepPurpleColorPalette['red.1'],
213
- 'button.bg.danger.onContrasted.default': deepPurpleColorPalette.white,
214
- 'button.bg.danger.onContrasted.pressed': deepPurpleColorPalette['red.1']
200
+ 'button.bg.primary.default': deepPurpleColorPalette['palette.deepPurple.8'],
201
+ 'button.bg.primary.pressed': deepPurpleColorPalette['palette.deepPurple.7'],
202
+ 'button.bg.primary.onContrasted.default': deepPurpleColorPalette['palette.grey.0'],
203
+ 'button.bg.primary.onContrasted.pressed': deepPurpleColorPalette['palette.white-alpha.80'],
204
+ 'button.bg.secondary.default': deepPurpleColorPalette['palette.transparent'],
205
+ 'button.bg.secondary.pressed': deepPurpleColorPalette['palette.deepPurple-alpha.10'],
206
+ 'button.bg.secondary.onContrasted.default': deepPurpleColorPalette['palette.transparent'],
207
+ 'button.bg.secondary.onContrasted.pressed': deepPurpleColorPalette['palette.white-alpha.10'],
208
+ 'button.bg.tertiary.default': deepPurpleColorPalette['palette.transparent'],
209
+ 'button.bg.tertiary.pressed': deepPurpleColorPalette['palette.deepPurple-alpha.10'],
210
+ 'button.bg.tertiary.onContrasted.default': deepPurpleColorPalette['palette.transparent'],
211
+ 'button.bg.tertiary.onContrasted.pressed': deepPurpleColorPalette['palette.white-alpha.10'],
212
+ 'button.bg.danger.default': deepPurpleColorPalette['palette.transparent'],
213
+ 'button.bg.danger.pressed': deepPurpleColorPalette['palette.red.1'],
214
+ 'button.bg.danger.onContrasted.default': deepPurpleColorPalette['palette.white'],
215
+ 'button.bg.danger.onContrasted.pressed': deepPurpleColorPalette['palette.red.1']
215
216
  };
216
217
 
217
218
  var themes = {
@@ -410,7 +411,7 @@ var GTStandardNarrowFont = createFont({
410
411
  face: GTStandardNarrowFaces
411
412
  });
412
413
  var tokens = createTokens({
413
- color: {},
414
+ color: deepPurpleColorPalette,
414
415
  space: spaceTokens,
415
416
  size: sizeTokens,
416
417
  radius: radiusTokens,
@@ -826,7 +827,7 @@ var context = createStyledContext({
826
827
 
827
828
  function getButtonContentColor(type, disabled, isOnContrasted) {
828
829
  if (disabled) {
829
- return '$content.disabled';
830
+ return type === 'primary' ? '$content.disabled.onContrasted' : '$content.disabled';
830
831
  }
831
832
  switch (type) {
832
833
  case 'secondary':
@@ -980,7 +981,7 @@ var InternalButtonFrame = styled(HStack, {
980
981
  if (_type === 'primary') {
981
982
  if (disabled) {
982
983
  return _objectSpread(_objectSpread({}, commonTypeStyle), {}, {
983
- backgroundColor: '$bg.disabled.mid'
984
+ backgroundColor: '$bg.disabled.hi'
984
985
  });
985
986
  }
986
987
  }