@ornikar/bumper 2.11.0 → 2.12.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.
- package/CHANGELOG.md +9 -0
- package/dist/definitions/system/content/icon/Icon.d.ts +2 -1
- package/dist/definitions/system/content/icon/Icon.d.ts.map +1 -1
- package/dist/definitions/system/core/tokens/bumperIcon.d.ts +8 -0
- package/dist/definitions/system/core/tokens/bumperIcon.d.ts.map +1 -0
- package/dist/definitions/tamagui.config.d.ts +5 -0
- package/dist/definitions/tamagui.config.d.ts.map +1 -1
- package/dist/index-metro.es.android.js +17 -12
- package/dist/index-metro.es.android.js.map +1 -1
- package/dist/index-metro.es.ios.js +17 -12
- package/dist/index-metro.es.ios.js.map +1 -1
- package/dist/index-node-22.22.cjs.js +16 -11
- package/dist/index-node-22.22.cjs.js.map +1 -1
- package/dist/index-node-22.22.cjs.web.js +16 -11
- package/dist/index-node-22.22.cjs.web.js.map +1 -1
- package/dist/index-node-22.22.es.mjs +17 -12
- package/dist/index-node-22.22.es.mjs.map +1 -1
- package/dist/index-node-22.22.es.web.mjs +17 -12
- package/dist/index-node-22.22.es.web.mjs.map +1 -1
- package/dist/index.es.js +16 -11
- package/dist/index.es.js.map +1 -1
- package/dist/index.es.web.js +16 -11
- package/dist/index.es.web.js.map +1 -1
- package/dist/tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/system/content/icon/Icon.features.stories.tsx +14 -32
- package/src/system/content/icon/Icon.stories.tsx +7 -3
- package/src/system/content/icon/Icon.tsx +7 -8
- package/src/system/content/icon/__snapshots__/Icon.features.stories.tsx.snap +3 -114
- package/src/system/content/icon/__snapshots_web__/Icon.features.stories.tsx.snap +14 -68
- package/src/system/content/icon/__snapshots_web__/Icon.stories.tsx.snap +1 -1
- package/src/system/content/typography/TypographyIcon.features.stories.tsx +18 -18
- package/src/system/content/typography/TypographyIcon.stories.tsx +3 -3
- package/src/system/content/typography/__snapshots__/TypographyIcon.features.stories.tsx.snap +3 -3
- package/src/system/content/typography/__snapshots_web__/TypographyIcon.features.stories.tsx.snap +18 -18
- package/src/system/content/typography/__snapshots_web__/TypographyIcon.stories.tsx.snap +1 -1
- package/src/system/core/tokens/__snapshots__/bumperIcon.stories.tsx.snap +249 -0
- package/src/system/core/tokens/__snapshots_web__/bumperIcon.stories.tsx.snap +120 -0
- package/src/system/core/tokens/bumperIcon.stories.tsx +39 -0
- package/src/system/core/tokens/bumperIcon.ts +10 -0
- package/src/tamagui.config.ts +2 -0
package/src/system/content/typography/__snapshots__/TypographyIcon.features.stories.tsx.snap
CHANGED
|
@@ -36,8 +36,8 @@ exports[`Bumper/Content/TypographyIcon/Features DifferentSizes 1`] = `
|
|
|
36
36
|
<View
|
|
37
37
|
style={
|
|
38
38
|
{
|
|
39
|
-
"height":
|
|
40
|
-
"width":
|
|
39
|
+
"height": 24,
|
|
40
|
+
"width": 24,
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
>
|
|
@@ -517,7 +517,7 @@ exports[`Bumper/Content/TypographyIcon/Features NestedTypographyInheritance 1`]
|
|
|
517
517
|
>
|
|
518
518
|
<svg
|
|
519
519
|
color="#357105"
|
|
520
|
-
data-file-name="
|
|
520
|
+
data-file-name="star.inline.svg"
|
|
521
521
|
/>
|
|
522
522
|
</View>
|
|
523
523
|
</View>
|
package/src/system/content/typography/__snapshots_web__/TypographyIcon.features.stories.tsx.snap
CHANGED
|
@@ -28,7 +28,7 @@ exports[`Bumper/Content/TypographyIcon/Features DifferentSizes 1`] = `
|
|
|
28
28
|
class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
29
29
|
>
|
|
30
30
|
<div
|
|
31
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
31
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282964 _height-t-bumperIco1504282964"
|
|
32
32
|
>
|
|
33
33
|
<svg
|
|
34
34
|
color="var(--content--accent)"
|
|
@@ -46,7 +46,7 @@ exports[`Bumper/Content/TypographyIcon/Features DifferentSizes 1`] = `
|
|
|
46
46
|
class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
47
47
|
>
|
|
48
48
|
<div
|
|
49
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
49
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282965 _height-t-bumperIco1504282965"
|
|
50
50
|
>
|
|
51
51
|
<svg
|
|
52
52
|
color="var(--content--accent)"
|
|
@@ -64,7 +64,7 @@ exports[`Bumper/Content/TypographyIcon/Features DifferentSizes 1`] = `
|
|
|
64
64
|
class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
65
65
|
>
|
|
66
66
|
<div
|
|
67
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
67
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282971 _height-t-bumperIco1504282971"
|
|
68
68
|
>
|
|
69
69
|
<svg
|
|
70
70
|
color="var(--content--accent)"
|
|
@@ -119,7 +119,7 @@ exports[`Bumper/Content/TypographyIcon/Features InheritFromTypography 1`] = `
|
|
|
119
119
|
class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
120
120
|
>
|
|
121
121
|
<div
|
|
122
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
122
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282965 _height-t-bumperIco1504282965"
|
|
123
123
|
>
|
|
124
124
|
<svg
|
|
125
125
|
color="var(--content--accent)"
|
|
@@ -147,7 +147,7 @@ exports[`Bumper/Content/TypographyIcon/Features InheritFromTypography 1`] = `
|
|
|
147
147
|
class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
148
148
|
>
|
|
149
149
|
<div
|
|
150
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
150
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282965 _height-t-bumperIco1504282965"
|
|
151
151
|
>
|
|
152
152
|
<svg
|
|
153
153
|
color="var(--content--success)"
|
|
@@ -175,7 +175,7 @@ exports[`Bumper/Content/TypographyIcon/Features InheritFromTypography 1`] = `
|
|
|
175
175
|
class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
176
176
|
>
|
|
177
177
|
<div
|
|
178
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
178
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282965 _height-t-bumperIco1504282965"
|
|
179
179
|
>
|
|
180
180
|
<svg
|
|
181
181
|
color="var(--content--danger)"
|
|
@@ -203,7 +203,7 @@ exports[`Bumper/Content/TypographyIcon/Features InheritFromTypography 1`] = `
|
|
|
203
203
|
class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
204
204
|
>
|
|
205
205
|
<div
|
|
206
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
206
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282965 _height-t-bumperIco1504282965"
|
|
207
207
|
>
|
|
208
208
|
<svg
|
|
209
209
|
color="var(--content--warning)"
|
|
@@ -259,7 +259,7 @@ exports[`Bumper/Content/TypographyIcon/Features NestedTypographyInheritance 1`]
|
|
|
259
259
|
class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
260
260
|
>
|
|
261
261
|
<div
|
|
262
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
262
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282965 _height-t-bumperIco1504282965"
|
|
263
263
|
>
|
|
264
264
|
<svg
|
|
265
265
|
color="var(--content--accent)"
|
|
@@ -276,7 +276,7 @@ exports[`Bumper/Content/TypographyIcon/Features NestedTypographyInheritance 1`]
|
|
|
276
276
|
class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
277
277
|
>
|
|
278
278
|
<div
|
|
279
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
279
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282971 _height-t-bumperIco1504282971"
|
|
280
280
|
>
|
|
281
281
|
<svg
|
|
282
282
|
color="var(--content--accent)"
|
|
@@ -305,7 +305,7 @@ exports[`Bumper/Content/TypographyIcon/Features NestedTypographyInheritance 1`]
|
|
|
305
305
|
class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
306
306
|
>
|
|
307
307
|
<div
|
|
308
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
308
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282965 _height-t-bumperIco1504282965"
|
|
309
309
|
>
|
|
310
310
|
<svg
|
|
311
311
|
color="var(--content--accent)"
|
|
@@ -322,11 +322,11 @@ exports[`Bumper/Content/TypographyIcon/Features NestedTypographyInheritance 1`]
|
|
|
322
322
|
class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
323
323
|
>
|
|
324
324
|
<div
|
|
325
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
325
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282971 _height-t-bumperIco1504282971"
|
|
326
326
|
>
|
|
327
327
|
<svg
|
|
328
328
|
color="var(--content--success)"
|
|
329
|
-
data-file-name="
|
|
329
|
+
data-file-name="star.inline.svg"
|
|
330
330
|
/>
|
|
331
331
|
</div>
|
|
332
332
|
</div>
|
|
@@ -379,7 +379,7 @@ exports[`Bumper/Content/TypographyIcon/Features OverrideInheritedColor 1`] = `
|
|
|
379
379
|
class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
380
380
|
>
|
|
381
381
|
<div
|
|
382
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
382
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282965 _height-t-bumperIco1504282965"
|
|
383
383
|
>
|
|
384
384
|
<svg
|
|
385
385
|
color="var(--content--success)"
|
|
@@ -407,7 +407,7 @@ exports[`Bumper/Content/TypographyIcon/Features OverrideInheritedColor 1`] = `
|
|
|
407
407
|
class="is_TypographyView _dsp-_platformweb_inline-flex _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
408
408
|
>
|
|
409
409
|
<div
|
|
410
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
410
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282965 _height-t-bumperIco1504282965"
|
|
411
411
|
>
|
|
412
412
|
<svg
|
|
413
413
|
color="var(--content--danger)"
|
|
@@ -453,7 +453,7 @@ exports[`Bumper/Content/TypographyIcon/Features WithExplicitColor 1`] = `
|
|
|
453
453
|
class="is_TypographyView _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
454
454
|
>
|
|
455
455
|
<div
|
|
456
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
456
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282964 _height-t-bumperIco1504282964"
|
|
457
457
|
>
|
|
458
458
|
<svg
|
|
459
459
|
color="var(--content--accent)"
|
|
@@ -475,7 +475,7 @@ exports[`Bumper/Content/TypographyIcon/Features WithExplicitColor 1`] = `
|
|
|
475
475
|
class="is_TypographyView _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
476
476
|
>
|
|
477
477
|
<div
|
|
478
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
478
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282964 _height-t-bumperIco1504282964"
|
|
479
479
|
>
|
|
480
480
|
<svg
|
|
481
481
|
color="var(--content--success)"
|
|
@@ -497,7 +497,7 @@ exports[`Bumper/Content/TypographyIcon/Features WithExplicitColor 1`] = `
|
|
|
497
497
|
class="is_TypographyView _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
498
498
|
>
|
|
499
499
|
<div
|
|
500
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
500
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282964 _height-t-bumperIco1504282964"
|
|
501
501
|
>
|
|
502
502
|
<svg
|
|
503
503
|
color="var(--content--warning)"
|
|
@@ -519,7 +519,7 @@ exports[`Bumper/Content/TypographyIcon/Features WithExplicitColor 1`] = `
|
|
|
519
519
|
class="is_TypographyView _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
520
520
|
>
|
|
521
521
|
<div
|
|
522
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
522
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282964 _height-t-bumperIco1504282964"
|
|
523
523
|
>
|
|
524
524
|
<svg
|
|
525
525
|
color="var(--content--danger)"
|
|
@@ -21,7 +21,7 @@ exports[`Bumper/Content/TypographyIcon Default 1`] = `
|
|
|
21
21
|
class="is_TypographyView _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0"
|
|
22
22
|
>
|
|
23
23
|
<div
|
|
24
|
-
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-
|
|
24
|
+
class="is_Icon _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-bumperIco1504282965 _height-t-bumperIco1504282965"
|
|
25
25
|
>
|
|
26
26
|
<svg
|
|
27
27
|
color="var(--content--base--hi)"
|
|
@@ -0,0 +1,249 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
|
|
2
|
+
|
|
3
|
+
exports[`Bumper/Core/Tokens Icon 1`] = `
|
|
4
|
+
<RNCSafeAreaProvider
|
|
5
|
+
onInsetsChange={[Function]}
|
|
6
|
+
style={
|
|
7
|
+
[
|
|
8
|
+
{
|
|
9
|
+
"flex": 1,
|
|
10
|
+
},
|
|
11
|
+
undefined,
|
|
12
|
+
]
|
|
13
|
+
}
|
|
14
|
+
>
|
|
15
|
+
<View
|
|
16
|
+
style={
|
|
17
|
+
{
|
|
18
|
+
"flexDirection": "column",
|
|
19
|
+
"gap": 24,
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
>
|
|
23
|
+
<Text
|
|
24
|
+
style={
|
|
25
|
+
{
|
|
26
|
+
"color": "#505050",
|
|
27
|
+
"fontFamily": "GTStandard",
|
|
28
|
+
"fontSize": 16,
|
|
29
|
+
"letterSpacing": 0.3,
|
|
30
|
+
"lineHeight": 24,
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
suppressHighlighting={true}
|
|
34
|
+
>
|
|
35
|
+
Icon tokens define consistent size values for icons (small, medium, large).
|
|
36
|
+
</Text>
|
|
37
|
+
<View
|
|
38
|
+
style={
|
|
39
|
+
{
|
|
40
|
+
"flexDirection": "column",
|
|
41
|
+
"gap": 8,
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
>
|
|
45
|
+
<View
|
|
46
|
+
style={
|
|
47
|
+
{
|
|
48
|
+
"alignItems": "center",
|
|
49
|
+
"flexDirection": "row",
|
|
50
|
+
"gap": 16,
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
>
|
|
54
|
+
<View
|
|
55
|
+
style={
|
|
56
|
+
{
|
|
57
|
+
"width": 150,
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
>
|
|
61
|
+
<Text
|
|
62
|
+
style={
|
|
63
|
+
{
|
|
64
|
+
"fontFamily": "GTStandardBold",
|
|
65
|
+
"fontSize": 14,
|
|
66
|
+
"letterSpacing": 0.3,
|
|
67
|
+
"lineHeight": 20,
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
suppressHighlighting={true}
|
|
71
|
+
>
|
|
72
|
+
$
|
|
73
|
+
icon.s
|
|
74
|
+
</Text>
|
|
75
|
+
</View>
|
|
76
|
+
<View
|
|
77
|
+
style={
|
|
78
|
+
{
|
|
79
|
+
"width": 60,
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
>
|
|
83
|
+
<Text
|
|
84
|
+
style={
|
|
85
|
+
{
|
|
86
|
+
"color": "#505050",
|
|
87
|
+
"fontFamily": "GTStandard",
|
|
88
|
+
"fontSize": 14,
|
|
89
|
+
"letterSpacing": 0.3,
|
|
90
|
+
"lineHeight": 20,
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
suppressHighlighting={true}
|
|
94
|
+
>
|
|
95
|
+
16
|
|
96
|
+
</Text>
|
|
97
|
+
</View>
|
|
98
|
+
<View
|
|
99
|
+
style={
|
|
100
|
+
{
|
|
101
|
+
"backgroundColor": "#563B56",
|
|
102
|
+
"borderBottomLeftRadius": 2,
|
|
103
|
+
"borderBottomRightRadius": 2,
|
|
104
|
+
"borderTopLeftRadius": 2,
|
|
105
|
+
"borderTopRightRadius": 2,
|
|
106
|
+
"height": 16,
|
|
107
|
+
"width": 16,
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
/>
|
|
111
|
+
</View>
|
|
112
|
+
<View
|
|
113
|
+
style={
|
|
114
|
+
{
|
|
115
|
+
"alignItems": "center",
|
|
116
|
+
"flexDirection": "row",
|
|
117
|
+
"gap": 16,
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
>
|
|
121
|
+
<View
|
|
122
|
+
style={
|
|
123
|
+
{
|
|
124
|
+
"width": 150,
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
>
|
|
128
|
+
<Text
|
|
129
|
+
style={
|
|
130
|
+
{
|
|
131
|
+
"fontFamily": "GTStandardBold",
|
|
132
|
+
"fontSize": 14,
|
|
133
|
+
"letterSpacing": 0.3,
|
|
134
|
+
"lineHeight": 20,
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
suppressHighlighting={true}
|
|
138
|
+
>
|
|
139
|
+
$
|
|
140
|
+
icon.m
|
|
141
|
+
</Text>
|
|
142
|
+
</View>
|
|
143
|
+
<View
|
|
144
|
+
style={
|
|
145
|
+
{
|
|
146
|
+
"width": 60,
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
>
|
|
150
|
+
<Text
|
|
151
|
+
style={
|
|
152
|
+
{
|
|
153
|
+
"color": "#505050",
|
|
154
|
+
"fontFamily": "GTStandard",
|
|
155
|
+
"fontSize": 14,
|
|
156
|
+
"letterSpacing": 0.3,
|
|
157
|
+
"lineHeight": 20,
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
suppressHighlighting={true}
|
|
161
|
+
>
|
|
162
|
+
20
|
|
163
|
+
</Text>
|
|
164
|
+
</View>
|
|
165
|
+
<View
|
|
166
|
+
style={
|
|
167
|
+
{
|
|
168
|
+
"backgroundColor": "#563B56",
|
|
169
|
+
"borderBottomLeftRadius": 2,
|
|
170
|
+
"borderBottomRightRadius": 2,
|
|
171
|
+
"borderTopLeftRadius": 2,
|
|
172
|
+
"borderTopRightRadius": 2,
|
|
173
|
+
"height": 20,
|
|
174
|
+
"width": 20,
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
/>
|
|
178
|
+
</View>
|
|
179
|
+
<View
|
|
180
|
+
style={
|
|
181
|
+
{
|
|
182
|
+
"alignItems": "center",
|
|
183
|
+
"flexDirection": "row",
|
|
184
|
+
"gap": 16,
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
>
|
|
188
|
+
<View
|
|
189
|
+
style={
|
|
190
|
+
{
|
|
191
|
+
"width": 150,
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
>
|
|
195
|
+
<Text
|
|
196
|
+
style={
|
|
197
|
+
{
|
|
198
|
+
"fontFamily": "GTStandardBold",
|
|
199
|
+
"fontSize": 14,
|
|
200
|
+
"letterSpacing": 0.3,
|
|
201
|
+
"lineHeight": 20,
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
suppressHighlighting={true}
|
|
205
|
+
>
|
|
206
|
+
$
|
|
207
|
+
icon.l
|
|
208
|
+
</Text>
|
|
209
|
+
</View>
|
|
210
|
+
<View
|
|
211
|
+
style={
|
|
212
|
+
{
|
|
213
|
+
"width": 60,
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
>
|
|
217
|
+
<Text
|
|
218
|
+
style={
|
|
219
|
+
{
|
|
220
|
+
"color": "#505050",
|
|
221
|
+
"fontFamily": "GTStandard",
|
|
222
|
+
"fontSize": 14,
|
|
223
|
+
"letterSpacing": 0.3,
|
|
224
|
+
"lineHeight": 20,
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
suppressHighlighting={true}
|
|
228
|
+
>
|
|
229
|
+
24
|
|
230
|
+
</Text>
|
|
231
|
+
</View>
|
|
232
|
+
<View
|
|
233
|
+
style={
|
|
234
|
+
{
|
|
235
|
+
"backgroundColor": "#563B56",
|
|
236
|
+
"borderBottomLeftRadius": 2,
|
|
237
|
+
"borderBottomRightRadius": 2,
|
|
238
|
+
"borderTopLeftRadius": 2,
|
|
239
|
+
"borderTopRightRadius": 2,
|
|
240
|
+
"height": 24,
|
|
241
|
+
"width": 24,
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
/>
|
|
245
|
+
</View>
|
|
246
|
+
</View>
|
|
247
|
+
</View>
|
|
248
|
+
</RNCSafeAreaProvider>
|
|
249
|
+
`;
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
|
|
2
|
+
|
|
3
|
+
exports[`Bumper/Core/Tokens Icon 1`] = `
|
|
4
|
+
<DocumentFragment>
|
|
5
|
+
<div
|
|
6
|
+
class="css-view-175oi2r r-flex-13awgt0"
|
|
7
|
+
>
|
|
8
|
+
<span
|
|
9
|
+
class=""
|
|
10
|
+
style="display: contents;"
|
|
11
|
+
>
|
|
12
|
+
<span
|
|
13
|
+
class=" "
|
|
14
|
+
style="display: contents;"
|
|
15
|
+
>
|
|
16
|
+
<span
|
|
17
|
+
class=" t_light is_Theme"
|
|
18
|
+
style="display: contents;"
|
|
19
|
+
>
|
|
20
|
+
<div
|
|
21
|
+
class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa1366020284"
|
|
22
|
+
>
|
|
23
|
+
<span
|
|
24
|
+
class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1504 _lh-f-lineHeigh201793147 _ls-f-letterSpa1099960304 _col-content--ba1918259606"
|
|
25
|
+
data-disable-theme="true"
|
|
26
|
+
>
|
|
27
|
+
Icon tokens define consistent size values for icons (small, medium, large).
|
|
28
|
+
</span>
|
|
29
|
+
<div
|
|
30
|
+
class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa94482166"
|
|
31
|
+
>
|
|
32
|
+
<div
|
|
33
|
+
class="is_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
|
|
34
|
+
>
|
|
35
|
+
<div
|
|
36
|
+
class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-150px"
|
|
37
|
+
>
|
|
38
|
+
<span
|
|
39
|
+
class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-bo3448"
|
|
40
|
+
data-disable-theme="true"
|
|
41
|
+
>
|
|
42
|
+
$icon.s
|
|
43
|
+
</span>
|
|
44
|
+
</div>
|
|
45
|
+
<div
|
|
46
|
+
class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-60px"
|
|
47
|
+
>
|
|
48
|
+
<span
|
|
49
|
+
class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _col-content--ba1918259606"
|
|
50
|
+
data-disable-theme="true"
|
|
51
|
+
>
|
|
52
|
+
16
|
|
53
|
+
</span>
|
|
54
|
+
</div>
|
|
55
|
+
<div
|
|
56
|
+
class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--accent-1633109644 _height-16px _width-16px _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416"
|
|
57
|
+
/>
|
|
58
|
+
</div>
|
|
59
|
+
<div
|
|
60
|
+
class="is_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
|
|
61
|
+
>
|
|
62
|
+
<div
|
|
63
|
+
class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-150px"
|
|
64
|
+
>
|
|
65
|
+
<span
|
|
66
|
+
class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-bo3448"
|
|
67
|
+
data-disable-theme="true"
|
|
68
|
+
>
|
|
69
|
+
$icon.m
|
|
70
|
+
</span>
|
|
71
|
+
</div>
|
|
72
|
+
<div
|
|
73
|
+
class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-60px"
|
|
74
|
+
>
|
|
75
|
+
<span
|
|
76
|
+
class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _col-content--ba1918259606"
|
|
77
|
+
data-disable-theme="true"
|
|
78
|
+
>
|
|
79
|
+
20
|
|
80
|
+
</span>
|
|
81
|
+
</div>
|
|
82
|
+
<div
|
|
83
|
+
class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--accent-1633109644 _height-20px _width-20px _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416"
|
|
84
|
+
/>
|
|
85
|
+
</div>
|
|
86
|
+
<div
|
|
87
|
+
class="is_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
|
|
88
|
+
>
|
|
89
|
+
<div
|
|
90
|
+
class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-150px"
|
|
91
|
+
>
|
|
92
|
+
<span
|
|
93
|
+
class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-bo3448"
|
|
94
|
+
data-disable-theme="true"
|
|
95
|
+
>
|
|
96
|
+
$icon.l
|
|
97
|
+
</span>
|
|
98
|
+
</div>
|
|
99
|
+
<div
|
|
100
|
+
class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-60px"
|
|
101
|
+
>
|
|
102
|
+
<span
|
|
103
|
+
class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _col-content--ba1918259606"
|
|
104
|
+
data-disable-theme="true"
|
|
105
|
+
>
|
|
106
|
+
24
|
|
107
|
+
</span>
|
|
108
|
+
</div>
|
|
109
|
+
<div
|
|
110
|
+
class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--accent-1633109644 _height-24px _width-24px _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416"
|
|
111
|
+
/>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
</span>
|
|
116
|
+
</span>
|
|
117
|
+
</span>
|
|
118
|
+
</div>
|
|
119
|
+
</DocumentFragment>
|
|
120
|
+
`;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Typography } from '../../content/typography';
|
|
3
|
+
import { HStack, VStack } from '../primitives/Stack';
|
|
4
|
+
import { View } from '../primitives/View';
|
|
5
|
+
import { bumperIconTokens } from './bumperIcon';
|
|
6
|
+
|
|
7
|
+
const meta: Meta = {
|
|
8
|
+
title: 'Bumper/Core/Tokens',
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export default meta;
|
|
12
|
+
type Story = StoryObj<typeof meta>;
|
|
13
|
+
|
|
14
|
+
export const Icon: Story = {
|
|
15
|
+
render: () => (
|
|
16
|
+
<VStack gap="$space.24">
|
|
17
|
+
<Typography.Text variant="body-m" color="$content.base.mid">
|
|
18
|
+
Icon tokens define consistent size values for icons (small, medium, large).
|
|
19
|
+
</Typography.Text>
|
|
20
|
+
<VStack gap="$space.8">
|
|
21
|
+
{Object.entries(bumperIconTokens).map(([tokenName, value]) => (
|
|
22
|
+
<HStack key={tokenName} gap="$space.16" alignItems="center">
|
|
23
|
+
<View width={150}>
|
|
24
|
+
<Typography.Text variant="body-s" weight="bold">
|
|
25
|
+
${tokenName}
|
|
26
|
+
</Typography.Text>
|
|
27
|
+
</View>
|
|
28
|
+
<View width={60}>
|
|
29
|
+
<Typography.Text variant="body-s" color="$content.base.mid">
|
|
30
|
+
{value.val}
|
|
31
|
+
</Typography.Text>
|
|
32
|
+
</View>
|
|
33
|
+
<View backgroundColor="$bg.accent.default" height={value.val} width={value.val} borderRadius="$radius.s" />
|
|
34
|
+
</HStack>
|
|
35
|
+
))}
|
|
36
|
+
</VStack>
|
|
37
|
+
</VStack>
|
|
38
|
+
),
|
|
39
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { GetTokenString, TamaguiConfig } from '@tamagui/core';
|
|
2
|
+
import { px } from '@tamagui/core';
|
|
3
|
+
|
|
4
|
+
export const bumperIconTokens = {
|
|
5
|
+
'icon.s': px(16),
|
|
6
|
+
'icon.m': px(20),
|
|
7
|
+
'icon.l': px(24),
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export type BumperIconTokens = GetTokenString<keyof TamaguiConfig['tokens']['bumperIcon']>;
|
package/src/tamagui.config.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { createFont, createTamagui, createTokens } from '@tamagui/core';
|
|
2
2
|
import { light } from './system/core/themes/light/light';
|
|
3
3
|
import { BreakpointNameEnum, breakpoints } from './system/core/tokens/breakpoints';
|
|
4
|
+
import { bumperIconTokens } from './system/core/tokens/bumperIcon';
|
|
4
5
|
import { GTStandardFaces, letterSpacing, lineHeight, size, weight } from './system/core/tokens/fonts';
|
|
5
6
|
import { radiusTokens } from './system/core/tokens/radius';
|
|
6
7
|
import { sizeTokens } from './system/core/tokens/size';
|
|
@@ -20,6 +21,7 @@ const tokens = createTokens({
|
|
|
20
21
|
space: spaceTokens,
|
|
21
22
|
size: sizeTokens,
|
|
22
23
|
radius: radiusTokens,
|
|
24
|
+
bumperIcon: bumperIconTokens,
|
|
23
25
|
});
|
|
24
26
|
|
|
25
27
|
export const config = createTamagui({
|