@ornikar/bumper 2.6.0 → 2.7.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 +14 -0
- package/dist/definitions/components/typography/Typography.d.ts +44 -0
- package/dist/definitions/components/typography/Typography.d.ts.map +1 -0
- package/dist/definitions/components/typography/utils/{getTypeAndWeightValues.d.ts → getVariantAndWeightValues.d.ts} +2 -2
- package/dist/definitions/components/typography/utils/getVariantAndWeightValues.d.ts.map +1 -0
- package/dist/definitions/index.d.ts +2 -2
- package/dist/definitions/index.d.ts.map +1 -1
- package/dist/definitions/story-components/StoryTitle.d.ts +2 -2
- package/dist/definitions/tamagui.config.d.ts +3 -3
- package/dist/definitions/tokens/fonts.d.ts +7 -5
- package/dist/definitions/tokens/fonts.d.ts.map +1 -1
- package/dist/index-metro.es.android.js +86 -31
- package/dist/index-metro.es.android.js.map +1 -1
- package/dist/index-metro.es.ios.js +86 -31
- package/dist/index-metro.es.ios.js.map +1 -1
- package/dist/index-node-22.17.cjs.js +86 -31
- package/dist/index-node-22.17.cjs.js.map +1 -1
- package/dist/index-node-22.17.cjs.web.js +86 -31
- package/dist/index-node-22.17.cjs.web.js.map +1 -1
- package/dist/index-node-22.17.es.mjs +86 -31
- package/dist/index-node-22.17.es.mjs.map +1 -1
- package/dist/index-node-22.17.es.web.mjs +86 -31
- package/dist/index-node-22.17.es.web.mjs.map +1 -1
- package/dist/index.es.js +86 -31
- package/dist/index.es.js.map +1 -1
- package/dist/index.es.web.js +86 -31
- package/dist/index.es.web.js.map +1 -1
- package/dist/tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/components/breakpoints/breakpoints.stories.tsx +1 -1
- package/src/components/primitives/Pressable.stories.tsx +1 -1
- package/src/components/typography/Typography.stories.tsx +45 -17
- package/src/components/typography/{Typograhy.tsx → Typography.tsx} +53 -27
- package/src/components/typography/__snapshots__/Typography.stories.tsx.snap +599 -60
- package/src/components/typography/__snapshots_web__/Typography.stories.tsx.snap +228 -1
- package/src/components/typography/utils/{getTypeAndWeightValues.test.tsx → getVariantAndWeightValues.test.tsx} +32 -2
- package/src/components/typography/utils/{getTypeAndWeightValues.tsx → getVariantAndWeightValues.tsx} +14 -3
- package/src/index.ts +2 -2
- package/src/story-components/StoryTitle.tsx +1 -1
- package/src/themes/__snapshots__/light.stories.tsx.snap +1 -1
- package/src/themes/light.stories.tsx +1 -1
- package/src/tokens/fonts.ts +45 -10
- package/src/tokens/palettes/__snapshots__/deepPurpleColorPalette.stories.tsx.snap +1 -1
- package/src/tokens/palettes/deepPurpleColorPalette.stories.tsx +1 -1
- package/dist/definitions/components/typography/Typograhy.d.ts +0 -40
- package/dist/definitions/components/typography/Typograhy.d.ts.map +0 -1
- package/dist/definitions/components/typography/utils/getTypeAndWeightValues.d.ts.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,20 @@
|
|
|
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.7.0](https://github.com/ornikar/kitt/compare/@ornikar/bumper@2.6.0...@ornikar/bumper@2.7.0) (2026-01-14)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **bumper:** update Typography OSE-22232 ([#2834](https://github.com/ornikar/kitt/issues/2834)) ([b6feb3c](https://github.com/ornikar/kitt/commit/b6feb3c5b294b69ad94ab7a95378cb3a1cceb3de))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### Bug Fixes
|
|
15
|
+
|
|
16
|
+
* **bumper:** import issue [no issue] ([#2837](https://github.com/ornikar/kitt/issues/2837)) ([455ac9d](https://github.com/ornikar/kitt/commit/455ac9de93c2be0f96a7d18ae7e47cfd866d9054))
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
6
20
|
## [2.6.0](https://github.com/ornikar/kitt/compare/@ornikar/bumper@2.5.0...@ornikar/bumper@2.6.0) (2026-01-12)
|
|
7
21
|
|
|
8
22
|
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import type { GetProps, TamaguiComponent, WithMediaProps } from '@tamagui/core';
|
|
2
|
+
import { type Except } from 'type-fest';
|
|
3
|
+
import type { BodyFontVariants, ContentCapsVariants, FontVariants, HeadingFontVariants, LabelFontVariants } from '../../tokens/fonts';
|
|
4
|
+
type PropsWithoutMedia<A> = {
|
|
5
|
+
[Key in keyof A as Key extends `$${string}` ? never : Key]?: A[Key];
|
|
6
|
+
};
|
|
7
|
+
type OverrideTamaguiComponentProps<A> = PropsWithoutMedia<A> & WithMediaProps<PropsWithoutMedia<A>>;
|
|
8
|
+
declare const InternalTypography: TamaguiComponent<import("@tamagui/core").TamaDefer, import("@tamagui/core").TamaguiTextElement, import("@tamagui/core").RNTamaguiTextNonStyleProps, import("@tamagui/core").TextStylePropsBase, {
|
|
9
|
+
variant?: "heading-2xl" | "heading-xl" | "heading-l" | "heading-m" | "heading-s" | "heading-xs" | "heading-2xs" | "body-xl" | "body-l" | "body-m" | "body-s" | "body-xs" | "label-xl" | "label-l" | "label-m" | "label-s" | "content-caps-3xl" | "content-caps-2xl" | "content-caps-xl" | "content-caps-l" | "content-caps-m" | "content-caps-s" | "content-caps-xs" | undefined;
|
|
10
|
+
weight?: "bold" | "semibold" | "regular" | undefined;
|
|
11
|
+
}, import("@tamagui/core").StaticConfigPublic>;
|
|
12
|
+
export type InternalTypographyProps = GetProps<typeof InternalTypography>;
|
|
13
|
+
export type TypographyVariantContextValue = FontVariants | null;
|
|
14
|
+
export type TypographyWeightContextValue = 'regular' | 'bold' | 'semibold' | null;
|
|
15
|
+
export type TypograhyColorContextValue = InternalTypographyProps['color'] | null;
|
|
16
|
+
type TypographyExcludedFontStyleProps = 'fontFamily' | 'fontSize' | 'lineHeight' | 'fontStyle' | 'fontVariant' | 'fontWeight';
|
|
17
|
+
type TypographyPropsWithoutFontStyleProps = Except<InternalTypographyProps, TypographyExcludedFontStyleProps>;
|
|
18
|
+
export interface BodyProps extends TypographyPropsWithoutFontStyleProps {
|
|
19
|
+
variant?: BodyFontVariants;
|
|
20
|
+
weight?: 'regular' | 'bold';
|
|
21
|
+
}
|
|
22
|
+
export interface HeadingLabelProps extends TypographyPropsWithoutFontStyleProps {
|
|
23
|
+
variant: HeadingFontVariants | LabelFontVariants;
|
|
24
|
+
weight?: 'semibold';
|
|
25
|
+
}
|
|
26
|
+
export interface ContentCapsProps extends TypographyPropsWithoutFontStyleProps {
|
|
27
|
+
variant: ContentCapsVariants;
|
|
28
|
+
weight?: 'bold';
|
|
29
|
+
}
|
|
30
|
+
export type TypographyTextProps = OverrideTamaguiComponentProps<BodyProps> | OverrideTamaguiComponentProps<HeadingLabelProps> | OverrideTamaguiComponentProps<ContentCapsProps>;
|
|
31
|
+
export declare const Typography: {
|
|
32
|
+
Text: TamaguiComponent<TypographyTextProps, import("@tamagui/core").TamaguiTextElement, import("@tamagui/core").RNTamaguiTextNonStyleProps & TypographyTextProps, import("@tamagui/core").TextStylePropsBase, {
|
|
33
|
+
variant?: "heading-2xl" | "heading-xl" | "heading-l" | "heading-m" | "heading-s" | "heading-xs" | "heading-2xs" | "body-xl" | "body-l" | "body-m" | "body-s" | "body-xs" | "label-xl" | "label-l" | "label-m" | "label-s" | "content-caps-3xl" | "content-caps-2xl" | "content-caps-xl" | "content-caps-l" | "content-caps-m" | "content-caps-s" | "content-caps-xs" | undefined;
|
|
34
|
+
weight?: "bold" | "semibold" | "regular" | undefined;
|
|
35
|
+
}, import("@tamagui/core").StaticConfigPublic>;
|
|
36
|
+
Header1: TamaguiComponent<TypographyTextProps>;
|
|
37
|
+
Header2: TamaguiComponent<TypographyTextProps>;
|
|
38
|
+
Header3: TamaguiComponent<TypographyTextProps>;
|
|
39
|
+
Header4: TamaguiComponent<TypographyTextProps>;
|
|
40
|
+
Header5: TamaguiComponent<TypographyTextProps>;
|
|
41
|
+
Header6: TamaguiComponent<TypographyTextProps>;
|
|
42
|
+
};
|
|
43
|
+
export {};
|
|
44
|
+
//# sourceMappingURL=Typography.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAuB,gBAAgB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAGrG,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,KAAK,EACV,gBAAgB,EAChB,mBAAmB,EACnB,YAAY,EACZ,mBAAmB,EACnB,iBAAiB,EAClB,MAAM,oBAAoB,CAAC;AAI5B,KAAK,iBAAiB,CAAC,CAAC,IAAI;KAEzB,GAAG,IAAI,MAAM,CAAC,IAAI,GAAG,SAAS,IAAI,MAAM,EAAE,GAAG,KAAK,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC;CACpE,CAAC;AAEF,KAAK,6BAA6B,CAAC,CAAC,IAAI,iBAAiB,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEpG,QAAA,MAAM,kBAAkB;;;8CAgCtB,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAE1E,MAAM,MAAM,6BAA6B,GAAG,YAAY,GAAG,IAAI,CAAC;AAChE,MAAM,MAAM,4BAA4B,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,IAAI,CAAC;AAClF,MAAM,MAAM,0BAA0B,GAAG,uBAAuB,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;AAOjF,KAAK,gCAAgC,GACjC,YAAY,GACZ,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,YAAY,CAAC;AAEjB,KAAK,oCAAoC,GAAG,MAAM,CAAC,uBAAuB,EAAE,gCAAgC,CAAC,CAAC;AAE9G,MAAM,WAAW,SAAU,SAAQ,oCAAoC;IACrE,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CAC7B;AACD,MAAM,WAAW,iBAAkB,SAAQ,oCAAoC;IAC7E,OAAO,EAAE,mBAAmB,GAAG,iBAAiB,CAAC;IACjD,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AACD,MAAM,WAAW,gBAAiB,SAAQ,oCAAoC;IAC5E,OAAO,EAAE,mBAAmB,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,mBAAmB,GAC3B,6BAA6B,CAAC,SAAS,CAAC,GACxC,6BAA6B,CAAC,iBAAiB,CAAC,GAChD,6BAA6B,CAAC,gBAAgB,CAAC,CAAC;AAuDpD,eAAO,MAAM,UAAU;;;;;;;;;;;CAQtB,CAAC"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import type { FontVariants } from '../../../tokens/fonts';
|
|
2
|
-
import type { InternalTypographyProps, TypographyTextProps, TypographyVariantContextValue, TypographyWeightContextValue } from '../
|
|
2
|
+
import type { InternalTypographyProps, TypographyTextProps, TypographyVariantContextValue, TypographyWeightContextValue } from '../Typography';
|
|
3
3
|
interface VariantAndWeightValues {
|
|
4
4
|
weight: InternalTypographyProps['weight'] | undefined;
|
|
5
5
|
variant: FontVariants | undefined;
|
|
6
6
|
}
|
|
7
7
|
export declare function getVariantAndWeightValues(weightProp: TypographyTextProps['weight'], variantProp: TypographyTextProps['variant'], typographyWeightAncestorValue: TypographyWeightContextValue, typographyVariantAncestorValue: TypographyVariantContextValue): VariantAndWeightValues;
|
|
8
8
|
export {};
|
|
9
|
-
//# sourceMappingURL=
|
|
9
|
+
//# sourceMappingURL=getVariantAndWeightValues.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getVariantAndWeightValues.d.ts","sourceRoot":"","sources":["../../../../../src/components/typography/utils/getVariantAndWeightValues.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,KAAK,EACV,uBAAuB,EACvB,mBAAmB,EACnB,6BAA6B,EAC7B,4BAA4B,EAC7B,MAAM,eAAe,CAAC;AAEvB,UAAU,sBAAsB;IAC9B,MAAM,EAAE,uBAAuB,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IACtD,OAAO,EAAE,YAAY,GAAG,SAAS,CAAC;CACnC;AAED,wBAAgB,yBAAyB,CACvC,UAAU,EAAE,mBAAmB,CAAC,QAAQ,CAAC,EACzC,WAAW,EAAE,mBAAmB,CAAC,SAAS,CAAC,EAC3C,6BAA6B,EAAE,4BAA4B,EAC3D,8BAA8B,EAAE,6BAA6B,GAC5D,sBAAsB,CAuBxB"}
|
|
@@ -8,8 +8,8 @@ export type { HStackProps, StackProps, VStackProps } from './components/primitiv
|
|
|
8
8
|
export { HStack, Stack, VStack } from './components/primitives/Stack';
|
|
9
9
|
export type { ViewProps } from './components/primitives/View';
|
|
10
10
|
export { View } from './components/primitives/View';
|
|
11
|
-
export type { TypographyTextProps } from './components/typography/
|
|
12
|
-
export { Typography } from './components/typography/
|
|
11
|
+
export type { TypographyTextProps } from './components/typography/Typography';
|
|
12
|
+
export { Typography } from './components/typography/Typography';
|
|
13
13
|
export { useBreakpointValue } from './components/breakpoints/hooks/useBreakpointValue';
|
|
14
14
|
export { useCurrentBreakpointName } from './components/breakpoints/hooks/useCurrentBreakpointName';
|
|
15
15
|
export { useWindowSize } from './components/breakpoints/hooks/useWindowSize';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,YAAY,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,YAAY,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC1F,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACtE,YAAY,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAGpD,YAAY,EAAE,mBAAmB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,YAAY,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,YAAY,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC1F,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACtE,YAAY,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAGpD,YAAY,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAGhE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mDAAmD,CAAC;AACvF,OAAO,EAAE,wBAAwB,EAAE,MAAM,yDAAyD,CAAC;AACnG,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,YAAY,EAAE,sBAAsB,EAAE,MAAM,2CAA2C,CAAC;AACxF,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAC9E,YAAY,EAAE,kBAAkB,EAAE,MAAM,iDAAiD,CAAC;AAC1F,OAAO,EAAE,qBAAqB,EAAE,MAAM,iDAAiD,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export declare const StoryTitle: import("@tamagui/core").TamaguiComponent<import("@tamagui/core").TamaDefer, import("@tamagui/core").TamaguiTextElement, import("@tamagui/core").RNTamaguiTextNonStyleProps & import("../components/typography/
|
|
2
|
-
variant?: "heading-2xl" | "heading-xl" | "heading-l" | "heading-m" | "heading-s" | "heading-xs" | "body-xl" | "body-l" | "body-m" | "body-s" | "body-xs" | "label-xl" | "label-l" | "label-m" | "label-s" | undefined;
|
|
1
|
+
export declare const StoryTitle: import("@tamagui/core").TamaguiComponent<import("@tamagui/core").TamaDefer, import("@tamagui/core").TamaguiTextElement, import("@tamagui/core").RNTamaguiTextNonStyleProps & import("../components/typography/Typography").TypographyTextProps, import("@tamagui/core").TextStylePropsBase, {
|
|
2
|
+
variant?: "heading-2xl" | "heading-xl" | "heading-l" | "heading-m" | "heading-s" | "heading-xs" | "heading-2xs" | "body-xl" | "body-l" | "body-m" | "body-s" | "body-xs" | "label-xl" | "label-l" | "label-m" | "label-s" | "content-caps-3xl" | "content-caps-2xl" | "content-caps-xl" | "content-caps-l" | "content-caps-m" | "content-caps-s" | "content-caps-xs" | undefined;
|
|
3
3
|
weight?: "bold" | "semibold" | "regular" | undefined;
|
|
4
4
|
level?: 1 | 2 | 3 | undefined;
|
|
5
5
|
}, import("@tamagui/core").StaticConfigPublic>;
|
|
@@ -152,9 +152,9 @@ export declare const config: import("@tamagui/core").TamaguiInternalConfig<{
|
|
|
152
152
|
}, {}, {
|
|
153
153
|
GTStandard: {
|
|
154
154
|
family: string;
|
|
155
|
-
size: Record<"heading-2xl" | "heading-xl" | "heading-l" | "heading-m" | "heading-s" | "heading-xs" | "body-xl" | "body-l" | "body-m" | "body-s" | "body-xs" | "label-xl" | "label-l" | "label-m" | "label-s", number>;
|
|
156
|
-
lineHeight: Record<"heading-2xl" | "heading-xl" | "heading-l" | "heading-m" | "heading-s" | "heading-xs" | "body-xl" | "body-l" | "body-m" | "body-s" | "body-xs" | "label-xl" | "label-l" | "label-m" | "label-s", number>;
|
|
157
|
-
letterSpacing: Record<"heading-2xl" | "heading-xl" | "heading-l" | "heading-m" | "heading-s" | "heading-xs" | "body-xl" | "body-l" | "body-m" | "body-s" | "body-xs" | "label-xl" | "label-l" | "label-m" | "label-s", number>;
|
|
155
|
+
size: Record<"heading-2xl" | "heading-xl" | "heading-l" | "heading-m" | "heading-s" | "heading-xs" | "heading-2xs" | "body-xl" | "body-l" | "body-m" | "body-s" | "body-xs" | "label-xl" | "label-l" | "label-m" | "label-s" | "content-caps-3xl" | "content-caps-2xl" | "content-caps-xl" | "content-caps-l" | "content-caps-m" | "content-caps-s" | "content-caps-xs", number>;
|
|
156
|
+
lineHeight: Record<"heading-2xl" | "heading-xl" | "heading-l" | "heading-m" | "heading-s" | "heading-xs" | "heading-2xs" | "body-xl" | "body-l" | "body-m" | "body-s" | "body-xs" | "label-xl" | "label-l" | "label-m" | "label-s" | "content-caps-3xl" | "content-caps-2xl" | "content-caps-xl" | "content-caps-l" | "content-caps-m" | "content-caps-s" | "content-caps-xs", number>;
|
|
157
|
+
letterSpacing: Record<"heading-2xl" | "heading-xl" | "heading-l" | "heading-m" | "heading-s" | "heading-xs" | "heading-2xs" | "body-xl" | "body-l" | "body-m" | "body-s" | "body-xs" | "label-xl" | "label-l" | "label-m" | "label-s" | "content-caps-3xl" | "content-caps-2xl" | "content-caps-xl" | "content-caps-l" | "content-caps-m" | "content-caps-s" | "content-caps-xs", number>;
|
|
158
158
|
weight: Record<string, import("./tokens/fonts").GTStandardFontWeight>;
|
|
159
159
|
face: Record<import("./tokens/fonts").GTStandardFontWeight, Record<string, string>>;
|
|
160
160
|
};
|
|
@@ -1,17 +1,19 @@
|
|
|
1
|
-
export declare const HEADING_VARIANTS: readonly ["heading-2xl", "heading-xl", "heading-l", "heading-m", "heading-s", "heading-xs"];
|
|
1
|
+
export declare const HEADING_VARIANTS: readonly ["heading-2xl", "heading-xl", "heading-l", "heading-m", "heading-s", "heading-xs", "heading-2xs"];
|
|
2
2
|
export declare const BODY_VARIANTS: readonly ["body-xl", "body-l", "body-m", "body-s", "body-xs"];
|
|
3
3
|
export declare const LABEL_VARIANTS: readonly ["label-xl", "label-l", "label-m", "label-s"];
|
|
4
|
-
export declare const
|
|
4
|
+
export declare const CONTENT_CAPS_VARIANTS: readonly ["content-caps-3xl", "content-caps-2xl", "content-caps-xl", "content-caps-l", "content-caps-m", "content-caps-s", "content-caps-xs"];
|
|
5
|
+
export declare const VARIANTS: readonly ["heading-2xl", "heading-xl", "heading-l", "heading-m", "heading-s", "heading-xs", "heading-2xs", "body-xl", "body-l", "body-m", "body-s", "body-xs", "label-xl", "label-l", "label-m", "label-s", "content-caps-3xl", "content-caps-2xl", "content-caps-xl", "content-caps-l", "content-caps-m", "content-caps-s", "content-caps-xs"];
|
|
5
6
|
export type FontVariants = (typeof VARIANTS)[number];
|
|
6
7
|
export type BodyFontVariants = (typeof BODY_VARIANTS)[number];
|
|
7
8
|
export type LabelFontVariants = (typeof LABEL_VARIANTS)[number];
|
|
8
9
|
export type HeadingFontVariants = (typeof HEADING_VARIANTS)[number];
|
|
10
|
+
export type ContentCapsVariants = (typeof CONTENT_CAPS_VARIANTS)[number];
|
|
9
11
|
export type GTStandardFontWeight = '500' | '600' | '700';
|
|
10
12
|
export declare const fonts: {
|
|
11
13
|
family: string;
|
|
12
|
-
size: Record<"heading-2xl" | "heading-xl" | "heading-l" | "heading-m" | "heading-s" | "heading-xs" | "body-xl" | "body-l" | "body-m" | "body-s" | "body-xs" | "label-xl" | "label-l" | "label-m" | "label-s", number>;
|
|
13
|
-
lineHeight: Record<"heading-2xl" | "heading-xl" | "heading-l" | "heading-m" | "heading-s" | "heading-xs" | "body-xl" | "body-l" | "body-m" | "body-s" | "body-xs" | "label-xl" | "label-l" | "label-m" | "label-s", number>;
|
|
14
|
-
letterSpacing: Record<"heading-2xl" | "heading-xl" | "heading-l" | "heading-m" | "heading-s" | "heading-xs" | "body-xl" | "body-l" | "body-m" | "body-s" | "body-xs" | "label-xl" | "label-l" | "label-m" | "label-s", number>;
|
|
14
|
+
size: Record<"heading-2xl" | "heading-xl" | "heading-l" | "heading-m" | "heading-s" | "heading-xs" | "heading-2xs" | "body-xl" | "body-l" | "body-m" | "body-s" | "body-xs" | "label-xl" | "label-l" | "label-m" | "label-s" | "content-caps-3xl" | "content-caps-2xl" | "content-caps-xl" | "content-caps-l" | "content-caps-m" | "content-caps-s" | "content-caps-xs", number>;
|
|
15
|
+
lineHeight: Record<"heading-2xl" | "heading-xl" | "heading-l" | "heading-m" | "heading-s" | "heading-xs" | "heading-2xs" | "body-xl" | "body-l" | "body-m" | "body-s" | "body-xs" | "label-xl" | "label-l" | "label-m" | "label-s" | "content-caps-3xl" | "content-caps-2xl" | "content-caps-xl" | "content-caps-l" | "content-caps-m" | "content-caps-s" | "content-caps-xs", number>;
|
|
16
|
+
letterSpacing: Record<"heading-2xl" | "heading-xl" | "heading-l" | "heading-m" | "heading-s" | "heading-xs" | "heading-2xs" | "body-xl" | "body-l" | "body-m" | "body-s" | "body-xs" | "label-xl" | "label-l" | "label-m" | "label-s" | "content-caps-3xl" | "content-caps-2xl" | "content-caps-xl" | "content-caps-l" | "content-caps-m" | "content-caps-s" | "content-caps-xs", number>;
|
|
15
17
|
weight: Record<string, GTStandardFontWeight>;
|
|
16
18
|
face: Record<GTStandardFontWeight, Record<string, string>>;
|
|
17
19
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../../src/tokens/fonts.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../../src/tokens/fonts.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,4GAQnB,CAAC;AACX,eAAO,MAAM,aAAa,+DAAgE,CAAC;AAC3F,eAAO,MAAM,cAAc,wDAAyD,CAAC;AACrF,eAAO,MAAM,qBAAqB,+IAQxB,CAAC;AACX,eAAO,MAAM,QAAQ,iVAAgG,CAAC;AAEtH,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAC9D,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAChE,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AACpE,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzE,MAAM,MAAM,oBAAoB,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AA4FzD,eAAO,MAAM,KAAK;;;;;;;CAOhB,CAAC"}
|
|
@@ -195,7 +195,10 @@ const breakpoints = {
|
|
|
195
195
|
[BreakpointNameEnum.WIDE]: 1280
|
|
196
196
|
};
|
|
197
197
|
|
|
198
|
+
const HEADING_VARIANTS = ['heading-2xl', 'heading-xl', 'heading-l', 'heading-m', 'heading-s', 'heading-xs', 'heading-2xs'];
|
|
198
199
|
const BODY_VARIANTS = ['body-xl', 'body-l', 'body-m', 'body-s', 'body-xs'];
|
|
200
|
+
const LABEL_VARIANTS = ['label-xl', 'label-l', 'label-m', 'label-s'];
|
|
201
|
+
const CONTENT_CAPS_VARIANTS = ['content-caps-3xl', 'content-caps-2xl', 'content-caps-xl', 'content-caps-l', 'content-caps-m', 'content-caps-s', 'content-caps-xs'];
|
|
199
202
|
const GTStandardFaces = {
|
|
200
203
|
500: {
|
|
201
204
|
normal: 'GTStandardRegular'
|
|
@@ -211,9 +214,10 @@ const size = {
|
|
|
211
214
|
'heading-2xl': 56,
|
|
212
215
|
'heading-xl': 48,
|
|
213
216
|
'heading-l': 38,
|
|
214
|
-
'heading-m':
|
|
215
|
-
'heading-s':
|
|
216
|
-
'heading-xs':
|
|
217
|
+
'heading-m': 28,
|
|
218
|
+
'heading-s': 24,
|
|
219
|
+
'heading-xs': 20,
|
|
220
|
+
'heading-2xs': 20,
|
|
217
221
|
'body-xl': 24,
|
|
218
222
|
'body-l': 18,
|
|
219
223
|
'body-m': 16,
|
|
@@ -222,24 +226,39 @@ const size = {
|
|
|
222
226
|
'label-xl': 18,
|
|
223
227
|
'label-l': 16,
|
|
224
228
|
'label-m': 14,
|
|
225
|
-
'label-s': 12
|
|
229
|
+
'label-s': 12,
|
|
230
|
+
'content-caps-3xl': 40,
|
|
231
|
+
'content-caps-2xl': 32,
|
|
232
|
+
'content-caps-xl': 24,
|
|
233
|
+
'content-caps-l': 18,
|
|
234
|
+
'content-caps-m': 16,
|
|
235
|
+
'content-caps-s': 14,
|
|
236
|
+
'content-caps-xs': 12
|
|
226
237
|
};
|
|
227
238
|
const lineHeight = {
|
|
228
239
|
'heading-2xl': 64,
|
|
229
240
|
'heading-xl': 56,
|
|
230
|
-
'heading-l':
|
|
241
|
+
'heading-l': 44,
|
|
231
242
|
'heading-m': 32,
|
|
232
|
-
'heading-s':
|
|
233
|
-
'heading-xs':
|
|
243
|
+
'heading-s': 28,
|
|
244
|
+
'heading-xs': 24,
|
|
245
|
+
'heading-2xs': 20,
|
|
234
246
|
'body-xl': 32,
|
|
235
247
|
'body-l': 26,
|
|
236
248
|
'body-m': 24,
|
|
237
249
|
'body-s': 20,
|
|
238
250
|
'body-xs': 16,
|
|
239
251
|
'label-xl': 26,
|
|
240
|
-
'label-l':
|
|
241
|
-
'label-m':
|
|
242
|
-
'label-s':
|
|
252
|
+
'label-l': 20,
|
|
253
|
+
'label-m': 18,
|
|
254
|
+
'label-s': 14,
|
|
255
|
+
'content-caps-3xl': 40,
|
|
256
|
+
'content-caps-2xl': 40,
|
|
257
|
+
'content-caps-xl': 28,
|
|
258
|
+
'content-caps-l': 20,
|
|
259
|
+
'content-caps-m': 18,
|
|
260
|
+
'content-caps-s': 16,
|
|
261
|
+
'content-caps-xs': 14
|
|
243
262
|
};
|
|
244
263
|
const letterSpacing = {
|
|
245
264
|
'heading-2xl': 0,
|
|
@@ -248,6 +267,7 @@ const letterSpacing = {
|
|
|
248
267
|
'heading-m': 0,
|
|
249
268
|
'heading-s': 0,
|
|
250
269
|
'heading-xs': 0,
|
|
270
|
+
'heading-2xs': 0,
|
|
251
271
|
'body-xl': 0.3,
|
|
252
272
|
'body-l': 0.3,
|
|
253
273
|
'body-m': 0.3,
|
|
@@ -256,7 +276,14 @@ const letterSpacing = {
|
|
|
256
276
|
'label-xl': 0,
|
|
257
277
|
'label-l': 0,
|
|
258
278
|
'label-m': 0,
|
|
259
|
-
'label-s': 0
|
|
279
|
+
'label-s': 0,
|
|
280
|
+
'content-caps-3xl': 0,
|
|
281
|
+
'content-caps-2xl': 0,
|
|
282
|
+
'content-caps-xl': 0,
|
|
283
|
+
'content-caps-l': 0,
|
|
284
|
+
'content-caps-m': 0,
|
|
285
|
+
'content-caps-s': 0,
|
|
286
|
+
'content-caps-xs': 0
|
|
260
287
|
};
|
|
261
288
|
const weight = {
|
|
262
289
|
bold: '700',
|
|
@@ -423,10 +450,27 @@ function getVariantAndWeightValues(weightProp, variantProp, typographyWeightAnce
|
|
|
423
450
|
variant: computedVariant
|
|
424
451
|
};
|
|
425
452
|
}
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
453
|
+
// Content Caps variant have fixed weights so we override any provided weight
|
|
454
|
+
if (CONTENT_CAPS_VARIANTS.includes(computedVariant)) {
|
|
455
|
+
return {
|
|
456
|
+
weight: 'bold',
|
|
457
|
+
variant: computedVariant
|
|
458
|
+
};
|
|
459
|
+
}
|
|
460
|
+
// Heading variants have fixed weights so we override any provided weight
|
|
461
|
+
if (HEADING_VARIANTS.includes(computedVariant)) {
|
|
462
|
+
return {
|
|
463
|
+
weight: 'semibold',
|
|
464
|
+
variant: computedVariant
|
|
465
|
+
};
|
|
466
|
+
}
|
|
467
|
+
// Label variants have fixed weights so we override any provided weight
|
|
468
|
+
if (LABEL_VARIANTS.includes(computedVariant)) {
|
|
469
|
+
return {
|
|
470
|
+
weight: 'semibold',
|
|
471
|
+
variant: computedVariant
|
|
472
|
+
};
|
|
473
|
+
}
|
|
430
474
|
}
|
|
431
475
|
return {
|
|
432
476
|
weight: weightProp,
|
|
@@ -434,9 +478,6 @@ function getVariantAndWeightValues(weightProp, variantProp, typographyWeightAnce
|
|
|
434
478
|
};
|
|
435
479
|
}
|
|
436
480
|
|
|
437
|
-
const TypographyVariantContext = /*#__PURE__*/createContext(null);
|
|
438
|
-
const TypographyWeightContext = /*#__PURE__*/createContext(null);
|
|
439
|
-
const TypograhyColorContext = /*#__PURE__*/createContext(null);
|
|
440
481
|
const InternalTypography = styled(Text, {
|
|
441
482
|
fontFamily: '$GTStandard',
|
|
442
483
|
color: '$content.base.hi',
|
|
@@ -469,12 +510,13 @@ const InternalTypography = styled(Text, {
|
|
|
469
510
|
weight: 'regular'
|
|
470
511
|
}
|
|
471
512
|
});
|
|
472
|
-
|
|
473
|
-
|
|
513
|
+
const TypographyVariantContext = /*#__PURE__*/createContext(null);
|
|
514
|
+
const TypographyWeightContext = /*#__PURE__*/createContext(null);
|
|
515
|
+
const TypograhyColorContext = /*#__PURE__*/createContext(null);
|
|
474
516
|
|
|
475
517
|
// Remove font-related style props from InternalTypography Props
|
|
476
518
|
|
|
477
|
-
const
|
|
519
|
+
const TypographyBase = InternalTypography.styleable((props, ref) => {
|
|
478
520
|
const typographyVariantAncestorValue = useContext(TypographyVariantContext);
|
|
479
521
|
const typographyWeightAncestorValue = useContext(TypographyWeightContext);
|
|
480
522
|
const typographyColorAncestorValue = useContext(TypograhyColorContext);
|
|
@@ -490,31 +532,44 @@ const TypographyText = InternalTypography.styleable((props, ref) => {
|
|
|
490
532
|
weight: weight,
|
|
491
533
|
variant: variant
|
|
492
534
|
}));
|
|
493
|
-
|
|
494
|
-
/*#__PURE__*/
|
|
535
|
+
|
|
495
536
|
// If a variant is provided, we set it in the context for children to be able to inherit variant value
|
|
496
|
-
jsx(TypographyVariantContext.Provider, {
|
|
537
|
+
content = props.variant ? /*#__PURE__*/jsx(TypographyVariantContext.Provider, {
|
|
497
538
|
value: props.variant,
|
|
498
539
|
children: content
|
|
499
540
|
}) : content;
|
|
500
|
-
|
|
501
|
-
/*#__PURE__*/
|
|
541
|
+
|
|
502
542
|
// If a weight is provided, we set it in the context for children to be able to inherit weight value
|
|
503
|
-
jsx(TypographyWeightContext.Provider, {
|
|
543
|
+
content = props.weight ? /*#__PURE__*/jsx(TypographyWeightContext.Provider, {
|
|
504
544
|
value: props.weight,
|
|
505
545
|
children: content
|
|
506
546
|
}) : content;
|
|
507
|
-
|
|
508
|
-
/*#__PURE__*/
|
|
547
|
+
|
|
509
548
|
// If a color is provided, we set it in the context for children to be able to inherit color value
|
|
510
|
-
jsx(TypograhyColorContext.Provider, {
|
|
549
|
+
content = props.color ? /*#__PURE__*/jsx(TypograhyColorContext.Provider, {
|
|
511
550
|
value: props.color,
|
|
512
551
|
children: content
|
|
513
552
|
}) : content;
|
|
514
553
|
return content;
|
|
515
554
|
});
|
|
555
|
+
const createHeading = level => {
|
|
556
|
+
return TypographyBase.styleable((props, ref) => {
|
|
557
|
+
return /*#__PURE__*/jsx(TypographyBase, _objectSpread(_objectSpread({
|
|
558
|
+
ref: ref
|
|
559
|
+
}, props), {}, {
|
|
560
|
+
role: "heading",
|
|
561
|
+
"aria-level": level
|
|
562
|
+
}));
|
|
563
|
+
});
|
|
564
|
+
};
|
|
516
565
|
const Typography = {
|
|
517
|
-
Text:
|
|
566
|
+
Text: TypographyBase,
|
|
567
|
+
Header1: createHeading(1),
|
|
568
|
+
Header2: createHeading(2),
|
|
569
|
+
Header3: createHeading(3),
|
|
570
|
+
Header4: createHeading(4),
|
|
571
|
+
Header5: createHeading(5),
|
|
572
|
+
Header6: createHeading(6)
|
|
518
573
|
};
|
|
519
574
|
|
|
520
575
|
function getValueForBreakpoint(breakpoint, {
|