@ornikar/bumper 2.10.0 → 2.11.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 (10) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/package.json +2 -2
  3. package/src/system/content/icon/Icon.features.stories.tsx +15 -20
  4. package/src/system/content/icon/Icon.stories.tsx +2 -2
  5. package/src/system/content/icon/__snapshots__/Icon.features.stories.tsx.snap +2 -2
  6. package/src/system/content/icon/__snapshots_web__/Icon.features.stories.tsx.snap +2 -2
  7. package/src/system/content/typography/TypographyIcon.features.stories.tsx +18 -24
  8. package/src/system/content/typography/TypographyIcon.stories.tsx +2 -2
  9. package/src/system/content/typography/__snapshots__/TypographyIcon.features.stories.tsx.snap +4 -4
  10. package/src/system/content/typography/__snapshots_web__/TypographyIcon.features.stories.tsx.snap +4 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,15 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [2.11.0](https://github.com/ornikar/kitt/compare/@ornikar/bumper@2.10.0...@ornikar/bumper@2.11.0) (2026-02-10)
7
+
8
+
9
+ ### Features
10
+
11
+ * **kitt-icons:** new ornicons [OSE-22546] ([#2866](https://github.com/ornikar/kitt/issues/2866)) ([cd80e74](https://github.com/ornikar/kitt/commit/cd80e74125de8cc56d1537fdce8a79fcfc5a9cfb))
12
+
13
+
14
+
6
15
  ## [2.10.0](https://github.com/ornikar/kitt/compare/@ornikar/bumper@2.9.0...@ornikar/bumper@2.10.0) (2026-02-09)
7
16
 
8
17
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ornikar/bumper",
3
- "version": "2.10.0",
3
+ "version": "2.11.0",
4
4
  "license": "MIT",
5
5
  "repository": {
6
6
  "directory": "@ornikar/bumper",
@@ -28,7 +28,7 @@
28
28
  },
29
29
  "dependencies": {
30
30
  "@babel/runtime": "^7.24.0",
31
- "@ornikar/kitt-icons": "^14.3.1",
31
+ "@ornikar/kitt-icons": "^14.4.0",
32
32
  "@tamagui/core": "1.144.2",
33
33
  "@tamagui/image": "1.144.2",
34
34
  "@tamagui/scroll-view": "1.144.2"
package/src/system/content/icon/Icon.features.stories.tsx CHANGED
@@ -1,9 +1,4 @@
1
- import {
2
- CheckCircleRegularIcon,
3
- InfoRegularIcon,
4
- StarRegularIcon,
5
- WarningRegularIcon,
6
- } from '@ornikar/kitt-icons/phosphor';
1
+ import { CheckCircleIcon, DangerIcon, InfoIcon, StarIcon } from '@ornikar/kitt-icons/ornicons';
7
2
  import type { Meta, StoryObj } from '@storybook/react';
8
3
  import { HStack, VStack } from '../../core/primitives/Stack';
9
4
  import { Typography } from '../typography';
@@ -21,37 +16,37 @@ export const Sizes: Story = {
21
16
  render: () => (
22
17
  <HStack gap="$space.16" alignItems="center">
23
18
  <VStack alignItems="center" gap="$space.8">
24
- <Icon icon={<StarRegularIcon />} size="$size.16" />
19
+ <Icon icon={<StarIcon />} size="$size.16" />
25
20
  <Typography.Text variant="body-xs" color="$content.base.mid">
26
21
  16
27
22
  </Typography.Text>
28
23
  </VStack>
29
24
  <VStack alignItems="center" gap="$space.8">
30
- <Icon icon={<StarRegularIcon />} size="$size.20" />
25
+ <Icon icon={<StarIcon />} size="$size.20" />
31
26
  <Typography.Text variant="body-xs" color="$content.base.mid">
32
27
  20
33
28
  </Typography.Text>
34
29
  </VStack>
35
30
  <VStack alignItems="center" gap="$space.8">
36
- <Icon icon={<StarRegularIcon />} size="$size.24" />
31
+ <Icon icon={<StarIcon />} size="$size.24" />
37
32
  <Typography.Text variant="body-xs" color="$content.base.mid">
38
33
  24
39
34
  </Typography.Text>
40
35
  </VStack>
41
36
  <VStack alignItems="center" gap="$space.8">
42
- <Icon icon={<StarRegularIcon />} size="$size.32" />
37
+ <Icon icon={<StarIcon />} size="$size.32" />
43
38
  <Typography.Text variant="body-xs" color="$content.base.mid">
44
39
  32
45
40
  </Typography.Text>
46
41
  </VStack>
47
42
  <VStack alignItems="center" gap="$space.8">
48
- <Icon icon={<StarRegularIcon />} size="$size.48" />
43
+ <Icon icon={<StarIcon />} size="$size.48" />
49
44
  <Typography.Text variant="body-xs" color="$content.base.mid">
50
45
  48
51
46
  </Typography.Text>
52
47
  </VStack>
53
48
  <VStack alignItems="center" gap="$space.8">
54
- <Icon icon={<StarRegularIcon />} size="$size.64" />
49
+ <Icon icon={<StarIcon />} size="$size.64" />
55
50
  <Typography.Text variant="body-xs" color="$content.base.mid">
56
51
  64
57
52
  </Typography.Text>
@@ -64,49 +59,49 @@ export const Colors: Story = {
64
59
  render: () => (
65
60
  <HStack gap="$space.16" alignItems="center">
66
61
  <VStack alignItems="center" gap="$space.8">
67
- <Icon icon={<StarRegularIcon />} size="$size.24" color="$content.base.hi" />
62
+ <Icon icon={<StarIcon />} size="$size.24" color="$content.base.hi" />
68
63
  <Typography.Text variant="body-xs" color="$content.base.mid">
69
64
  base.hi
70
65
  </Typography.Text>
71
66
  </VStack>
72
67
  <VStack alignItems="center" gap="$space.8">
73
- <Icon icon={<StarRegularIcon />} size="$size.24" color="$content.base.mid" />
68
+ <Icon icon={<StarIcon />} size="$size.24" color="$content.base.mid" />
74
69
  <Typography.Text variant="body-xs" color="$content.base.mid">
75
70
  base.mid
76
71
  </Typography.Text>
77
72
  </VStack>
78
73
  <VStack alignItems="center" gap="$space.8">
79
- <Icon icon={<StarRegularIcon />} size="$size.24" color="$content.base.low" />
74
+ <Icon icon={<StarIcon />} size="$size.24" color="$content.base.low" />
80
75
  <Typography.Text variant="body-xs" color="$content.base.mid">
81
76
  base.low
82
77
  </Typography.Text>
83
78
  </VStack>
84
79
  <VStack alignItems="center" gap="$space.8">
85
- <Icon icon={<StarRegularIcon />} size="$size.24" color="$content.accent" />
80
+ <Icon icon={<StarIcon />} size="$size.24" color="$content.accent" />
86
81
  <Typography.Text variant="body-xs" color="$content.base.mid">
87
82
  accent
88
83
  </Typography.Text>
89
84
  </VStack>
90
85
  <VStack alignItems="center" gap="$space.8">
91
- <Icon icon={<CheckCircleRegularIcon />} size="$size.24" color="$content.success" />
86
+ <Icon icon={<CheckCircleIcon />} size="$size.24" color="$content.success" />
92
87
  <Typography.Text variant="body-xs" color="$content.base.mid">
93
88
  success
94
89
  </Typography.Text>
95
90
  </VStack>
96
91
  <VStack alignItems="center" gap="$space.8">
97
- <Icon icon={<WarningRegularIcon />} size="$size.24" color="$content.warning" />
92
+ <Icon icon={<DangerIcon />} size="$size.24" color="$content.warning" />
98
93
  <Typography.Text variant="body-xs" color="$content.base.mid">
99
94
  warning
100
95
  </Typography.Text>
101
96
  </VStack>
102
97
  <VStack alignItems="center" gap="$space.8">
103
- <Icon icon={<WarningRegularIcon />} size="$size.24" color="$content.danger" />
98
+ <Icon icon={<DangerIcon />} size="$size.24" color="$content.danger" />
104
99
  <Typography.Text variant="body-xs" color="$content.base.mid">
105
100
  danger
106
101
  </Typography.Text>
107
102
  </VStack>
108
103
  <VStack alignItems="center" gap="$space.8">
109
- <Icon icon={<InfoRegularIcon />} size="$size.24" color="$content.info" />
104
+ <Icon icon={<InfoIcon />} size="$size.24" color="$content.info" />
110
105
  <Typography.Text variant="body-xs" color="$content.base.mid">
111
106
  info
112
107
  </Typography.Text>
package/src/system/content/icon/Icon.stories.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { StarRegularIcon } from '@ornikar/kitt-icons/phosphor';
1
+ import { StarIcon } from '@ornikar/kitt-icons/ornicons';
2
2
  import type { Meta, StoryObj } from '@storybook/react';
3
3
  import { contentColorArgType, sizeArgType } from '../../../shared/storybook/helpers/argsHelpers';
4
4
  import { Icon } from './Icon';
@@ -18,7 +18,7 @@ type Story = StoryObj<typeof meta>;
18
18
 
19
19
  export const Default: Story = {
20
20
  args: {
21
- icon: <StarRegularIcon />,
21
+ icon: <StarIcon />,
22
22
  size: '$size.20',
23
23
  color: '$content.base.hi',
24
24
  },
package/src/system/content/icon/__snapshots__/Icon.features.stories.tsx.snap CHANGED
@@ -225,7 +225,7 @@ exports[`Bumper/Content/Icon/Features Colors 1`] = `
225
225
  >
226
226
  <svg
227
227
  color="#BA930B"
228
- data-file-name="warning.inline.svg"
228
+ data-file-name="danger.inline.svg"
229
229
  />
230
230
  </View>
231
231
  <Text
@@ -262,7 +262,7 @@ exports[`Bumper/Content/Icon/Features Colors 1`] = `
262
262
  >
263
263
  <svg
264
264
  color="#BD100F"
265
- data-file-name="warning.inline.svg"
265
+ data-file-name="danger.inline.svg"
266
266
  />
267
267
  </View>
268
268
  <Text
package/src/system/content/icon/__snapshots_web__/Icon.features.stories.tsx.snap CHANGED
@@ -118,7 +118,7 @@ exports[`Bumper/Content/Icon/Features Colors 1`] = `
118
118
  >
119
119
  <svg
120
120
  color="var(--content--warning)"
121
- data-file-name="warning.inline.svg"
121
+ data-file-name="danger.inline.svg"
122
122
  />
123
123
  </div>
124
124
  <span
@@ -136,7 +136,7 @@ exports[`Bumper/Content/Icon/Features Colors 1`] = `
136
136
  >
137
137
  <svg
138
138
  color="var(--content--danger)"
139
- data-file-name="warning.inline.svg"
139
+ data-file-name="danger.inline.svg"
140
140
  />
141
141
  </div>
142
142
  <span
package/src/system/content/typography/TypographyIcon.features.stories.tsx CHANGED
@@ -1,9 +1,4 @@
1
- import {
2
- CheckCircleRegularIcon,
3
- InfoRegularIcon,
4
- StarRegularIcon,
5
- WarningRegularIcon,
6
- } from '@ornikar/kitt-icons/phosphor';
1
+ import { CheckCircleIcon, DangerIcon, InfoIcon, StarIcon } from '@ornikar/kitt-icons/ornicons';
7
2
  import type { Meta, StoryObj } from '@storybook/react';
8
3
  import { HStack, VStack } from '../../core/primitives/Stack';
9
4
  import { TypographyIcon } from './TypographyIcon';
@@ -21,25 +16,25 @@ export const WithExplicitColor: Story = {
21
16
  render: () => (
22
17
  <HStack gap="$space.16" alignItems="center">
23
18
  <VStack alignItems="center" gap="$space.8">
24
- <TypographyIcon icon={<StarRegularIcon />} size="$size.24" color="$content.accent" />
19
+ <TypographyIcon icon={<StarIcon />} size="$size.24" color="$content.accent" />
25
20
  <Typography.Text variant="body-xs" color="$content.base.mid">
26
21
  Explicit accent
27
22
  </Typography.Text>
28
23
  </VStack>
29
24
  <VStack alignItems="center" gap="$space.8">
30
- <TypographyIcon icon={<CheckCircleRegularIcon />} size="$size.24" color="$content.success" />
25
+ <TypographyIcon icon={<CheckCircleIcon />} size="$size.24" color="$content.success" />
31
26
  <Typography.Text variant="body-xs" color="$content.base.mid">
32
27
  Explicit success
33
28
  </Typography.Text>
34
29
  </VStack>
35
30
  <VStack alignItems="center" gap="$space.8">
36
- <TypographyIcon icon={<WarningRegularIcon />} size="$size.24" color="$content.warning" />
31
+ <TypographyIcon icon={<DangerIcon />} size="$size.24" color="$content.warning" />
37
32
  <Typography.Text variant="body-xs" color="$content.base.mid">
38
33
  Explicit warning
39
34
  </Typography.Text>
40
35
  </VStack>
41
36
  <VStack alignItems="center" gap="$space.8">
42
- <TypographyIcon icon={<WarningRegularIcon />} size="$size.24" color="$content.danger" />
37
+ <TypographyIcon icon={<DangerIcon />} size="$size.24" color="$content.danger" />
43
38
  <Typography.Text variant="body-xs" color="$content.base.mid">
44
39
  Explicit danger
45
40
  </Typography.Text>
@@ -56,7 +51,7 @@ export const InheritFromTypography: Story = {
56
51
  Icon inherits accent color from Typography
57
52
  </Typography.Text>
58
53
  <Typography.Text variant="body-m" color="$content.accent">
59
- <TypographyIcon icon={<StarRegularIcon />} size="$size.20" /> This icon inherits the accent color
54
+ <TypographyIcon icon={<StarIcon />} size="$size.20" /> This icon inherits the accent color
60
55
  </Typography.Text>
61
56
  </VStack>
62
57
 
@@ -65,7 +60,7 @@ export const InheritFromTypography: Story = {
65
60
  Icon inherits success color from Typography
66
61
  </Typography.Text>
67
62
  <Typography.Text variant="body-m" color="$content.success">
68
- <TypographyIcon icon={<CheckCircleRegularIcon />} size="$size.20" /> Operation completed successfully
63
+ <TypographyIcon icon={<CheckCircleIcon />} size="$size.20" /> Operation completed successfully
69
64
  </Typography.Text>
70
65
  </VStack>
71
66
 
@@ -74,7 +69,7 @@ export const InheritFromTypography: Story = {
74
69
  Icon inherits danger color from Typography
75
70
  </Typography.Text>
76
71
  <Typography.Text variant="body-m" color="$content.danger">
77
- <TypographyIcon icon={<WarningRegularIcon />} size="$size.20" /> Error: Something went wrong
72
+ <TypographyIcon icon={<DangerIcon />} size="$size.20" /> Error: Something went wrong
78
73
  </Typography.Text>
79
74
  </VStack>
80
75
 
@@ -83,7 +78,7 @@ export const InheritFromTypography: Story = {
83
78
  Icon inherits warning color from Typography
84
79
  </Typography.Text>
85
80
  <Typography.Text variant="body-m" color="$content.warning">
86
- <TypographyIcon icon={<InfoRegularIcon />} size="$size.20" /> Warning: Please review this item
81
+ <TypographyIcon icon={<InfoIcon />} size="$size.20" /> Warning: Please review this item
87
82
  </Typography.Text>
88
83
  </VStack>
89
84
  </VStack>
@@ -98,7 +93,7 @@ export const OverrideInheritedColor: Story = {
98
93
  Typography is accent, but icon explicitly uses success color
99
94
  </Typography.Text>
100
95
  <Typography.Text variant="body-m" color="$content.accent">
101
- <TypographyIcon icon={<CheckCircleRegularIcon />} size="$size.20" color="$content.success" /> Icon overrides
96
+ <TypographyIcon icon={<CheckCircleIcon />} size="$size.20" color="$content.success" /> Icon overrides
102
97
  inherited color
103
98
  </Typography.Text>
104
99
  </VStack>
@@ -108,7 +103,7 @@ export const OverrideInheritedColor: Story = {
108
103
  Typography is success, but icon explicitly uses danger color
109
104
  </Typography.Text>
110
105
  <Typography.Text variant="body-m" color="$content.success">
111
- <TypographyIcon icon={<WarningRegularIcon />} size="$size.20" color="$content.danger" /> Mixed color scenario
106
+ <TypographyIcon icon={<DangerIcon />} size="$size.20" color="$content.danger" /> Mixed color scenario
112
107
  </Typography.Text>
113
108
  </VStack>
114
109
  </VStack>
@@ -119,13 +114,13 @@ export const DifferentSizes: Story = {
119
114
  render: () => (
120
115
  <VStack gap="$space.16">
121
116
  <Typography.Text variant="heading-l" color="$content.accent">
122
- <TypographyIcon icon={<StarRegularIcon />} size="$size.32" /> Large heading with size 32 icon
117
+ <TypographyIcon icon={<StarIcon />} size="$size.32" /> Large heading with size 32 icon
123
118
  </Typography.Text>
124
119
  <Typography.Text variant="body-m" color="$content.accent">
125
- <TypographyIcon icon={<StarRegularIcon />} size="$size.20" /> Body text with size 20 icon
120
+ <TypographyIcon icon={<StarIcon />} size="$size.20" /> Body text with size 20 icon
126
121
  </Typography.Text>
127
122
  <Typography.Text variant="body-s" color="$content.accent">
128
- <TypographyIcon icon={<StarRegularIcon />} size="$size.16" /> Small text with size 16 icon
123
+ <TypographyIcon icon={<StarIcon />} size="$size.16" /> Small text with size 16 icon
129
124
  </Typography.Text>
130
125
  </VStack>
131
126
  ),
@@ -139,10 +134,9 @@ export const NestedTypographyInheritance: Story = {
139
134
  Nested Typography components - icon inherits from parent
140
135
  </Typography.Text>
141
136
  <Typography.Text variant="body-l" color="$content.accent">
142
- <TypographyIcon icon={<StarRegularIcon />} size="$size.20" /> Parent text with icon
137
+ <TypographyIcon icon={<StarIcon />} size="$size.20" /> Parent text with icon
143
138
  <Typography.Text variant="body-m">
144
- <TypographyIcon icon={<CheckCircleRegularIcon />} size="$size.16" /> Nested text - icon inherits parent
145
- color
139
+ <TypographyIcon icon={<CheckCircleIcon />} size="$size.16" /> Nested text - icon inherits parent color
146
140
  </Typography.Text>
147
141
  </Typography.Text>
148
142
  </VStack>
@@ -152,9 +146,9 @@ export const NestedTypographyInheritance: Story = {
152
146
  Nested with override - child overrides parent color
153
147
  </Typography.Text>
154
148
  <Typography.Text variant="body-l" color="$content.accent">
155
- <TypographyIcon icon={<StarRegularIcon />} size="$size.20" /> Parent accent color
149
+ <TypographyIcon icon={<StarIcon />} size="$size.20" /> Parent accent color
156
150
  <Typography.Text variant="body-m" color="$content.success">
157
- <TypographyIcon icon={<CheckCircleRegularIcon />} size="$size.16" /> Child overrides to success
151
+ <TypographyIcon icon={<CheckCircleIcon />} size="$size.16" /> Child overrides to success
158
152
  </Typography.Text>
159
153
  </Typography.Text>
160
154
  </VStack>
package/src/system/content/typography/TypographyIcon.stories.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { StarRegularIcon } from '@ornikar/kitt-icons/phosphor';
1
+ import { StarIcon } from '@ornikar/kitt-icons/ornicons';
2
2
  import type { Meta, StoryObj } from '@storybook/react';
3
3
  import { contentColorArgType } from '../../../shared/storybook/helpers/argsHelpers';
4
4
  import { TypographyIcon } from './TypographyIcon';
@@ -29,7 +29,7 @@ type Story = StoryObj<typeof meta>;
29
29
 
30
30
  export const Default: Story = {
31
31
  args: {
32
- icon: <StarRegularIcon />,
32
+ icon: <StarIcon />,
33
33
  size: '$size.20',
34
34
  },
35
35
  };
package/src/system/content/typography/__snapshots__/TypographyIcon.features.stories.tsx.snap CHANGED
@@ -280,7 +280,7 @@ exports[`Bumper/Content/TypographyIcon/Features InheritFromTypography 1`] = `
280
280
  >
281
281
  <svg
282
282
  color="#BD100F"
283
- data-file-name="warning.inline.svg"
283
+ data-file-name="danger.inline.svg"
284
284
  />
285
285
  </View>
286
286
  </View>
@@ -646,7 +646,7 @@ exports[`Bumper/Content/TypographyIcon/Features OverrideInheritedColor 1`] = `
646
646
  >
647
647
  <svg
648
648
  color="#BD100F"
649
- data-file-name="warning.inline.svg"
649
+ data-file-name="danger.inline.svg"
650
650
  />
651
651
  </View>
652
652
  </View>
@@ -776,7 +776,7 @@ exports[`Bumper/Content/TypographyIcon/Features WithExplicitColor 1`] = `
776
776
  >
777
777
  <svg
778
778
  color="#BA930B"
779
- data-file-name="warning.inline.svg"
779
+ data-file-name="danger.inline.svg"
780
780
  />
781
781
  </View>
782
782
  </View>
@@ -815,7 +815,7 @@ exports[`Bumper/Content/TypographyIcon/Features WithExplicitColor 1`] = `
815
815
  >
816
816
  <svg
817
817
  color="#BD100F"
818
- data-file-name="warning.inline.svg"
818
+ data-file-name="danger.inline.svg"
819
819
  />
820
820
  </View>
821
821
  </View>
package/src/system/content/typography/__snapshots_web__/TypographyIcon.features.stories.tsx.snap CHANGED
@@ -179,7 +179,7 @@ exports[`Bumper/Content/TypographyIcon/Features InheritFromTypography 1`] = `
179
179
  >
180
180
  <svg
181
181
  color="var(--content--danger)"
182
- data-file-name="warning.inline.svg"
182
+ data-file-name="danger.inline.svg"
183
183
  />
184
184
  </div>
185
185
  </div>
@@ -411,7 +411,7 @@ exports[`Bumper/Content/TypographyIcon/Features OverrideInheritedColor 1`] = `
411
411
  >
412
412
  <svg
413
413
  color="var(--content--danger)"
414
- data-file-name="warning.inline.svg"
414
+ data-file-name="danger.inline.svg"
415
415
  />
416
416
  </div>
417
417
  </div>
@@ -501,7 +501,7 @@ exports[`Bumper/Content/TypographyIcon/Features WithExplicitColor 1`] = `
501
501
  >
502
502
  <svg
503
503
  color="var(--content--warning)"
504
- data-file-name="warning.inline.svg"
504
+ data-file-name="danger.inline.svg"
505
505
  />
506
506
  </div>
507
507
  </div>
@@ -523,7 +523,7 @@ exports[`Bumper/Content/TypographyIcon/Features WithExplicitColor 1`] = `
523
523
  >
524
524
  <svg
525
525
  color="var(--content--danger)"
526
- data-file-name="warning.inline.svg"
526
+ data-file-name="danger.inline.svg"
527
527
  />
528
528
  </div>
529
529
  </div>