From 6d0977b62f01c1998ccf343f3966e7e5662cdedc Mon Sep 17 00:00:00 2001 From: Adrian Cotfas Date: Tue, 5 May 2026 15:44:29 +0300 Subject: [PATCH 1/3] feat: add disabled and enabled opacity to theme.state --- .../__tests__/__snapshots__/ListSection.test.tsx.snap | 6 ++++++ src/theme/tokens/sys/state.ts | 2 ++ src/theme/types/state.ts | 8 +++++++- 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap index f5691bf2d2..7149535a56 100644 --- a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap @@ -190,7 +190,9 @@ exports[`renders list section with custom title style 1`] = ` "roundness": 4, "state": { "opacity": { + "disabled": 0.38, "dragged": 0.16, + "enabled": 1, "focused": 0.1, "hovered": 0.08, "pressed": 0.1, @@ -740,7 +742,9 @@ exports[`renders list section with subheader 1`] = ` "roundness": 4, "state": { "opacity": { + "disabled": 0.38, "dragged": 0.16, + "enabled": 1, "focused": 0.1, "hovered": 0.08, "pressed": 0.1, @@ -1288,7 +1292,9 @@ exports[`renders list section without subheader 1`] = ` "roundness": 4, "state": { "opacity": { + "disabled": 0.38, "dragged": 0.16, + "enabled": 1, "focused": 0.1, "hovered": 0.08, "pressed": 0.1, diff --git a/src/theme/tokens/sys/state.ts b/src/theme/tokens/sys/state.ts index 136564772b..88dc40d041 100644 --- a/src/theme/tokens/sys/state.ts +++ b/src/theme/tokens/sys/state.ts @@ -9,5 +9,7 @@ export const defaultState: ThemeState = { focused: stateOpacity.focused, pressed: stateOpacity.pressed, dragged: stateOpacity.dragged, + disabled: stateOpacity.disabled, + enabled: stateOpacity.enabled, }, }; diff --git a/src/theme/types/state.ts b/src/theme/types/state.ts index 3ee801be9f..6b7ba307cb 100644 --- a/src/theme/types/state.ts +++ b/src/theme/types/state.ts @@ -1,4 +1,10 @@ -export type InteractionState = 'hovered' | 'focused' | 'pressed' | 'dragged'; +export type InteractionState = + | 'hovered' + | 'focused' + | 'pressed' + | 'dragged' + | 'disabled' + | 'enabled'; export type ThemeState = { opacity: Record; From 1f786b33356c41b516b58a8c043a89a20007f6e7 Mon Sep 17 00:00:00 2001 From: Adrian Cotfas Date: Tue, 5 May 2026 10:54:26 +0300 Subject: [PATCH 2/3] feat: add theme.shapes and cornersToStyle Adds the 10 MD3 shape scale tokens to theme.shapes.*, ShapeCorners for directional variants, and cornersToStyle() for mapping to RN style props. Deprecates theme.roundness in favour of theme.shapes. --- .../__snapshots__/ListSection.test.tsx.snap | 36 +++++++++++++++++++ src/index.tsx | 1 + src/theme/schemes/DarkTheme.tsx | 2 ++ src/theme/schemes/LightTheme.tsx | 2 ++ src/theme/tokens/sys/shape.ts | 33 +++++++++++++++++ src/theme/types/index.ts | 1 + src/theme/types/shape.ts | 19 ++++++++++ src/theme/types/theme.ts | 3 ++ 8 files changed, 97 insertions(+) create mode 100644 src/theme/tokens/sys/shape.ts create mode 100644 src/theme/types/shape.ts diff --git a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap index 7149535a56..aa46faf179 100644 --- a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap @@ -188,6 +188,18 @@ exports[`renders list section with custom title style 1`] = ` }, }, "roundness": 4, + "shapes": { + "extraExtraLarge": 48, + "extraLarge": 28, + "extraLargeIncreased": 32, + "extraSmall": 4, + "full": 9999, + "large": 16, + "largeIncreased": 20, + "medium": 12, + "none": 0, + "small": 8, + }, "state": { "opacity": { "disabled": 0.38, @@ -740,6 +752,18 @@ exports[`renders list section with subheader 1`] = ` }, }, "roundness": 4, + "shapes": { + "extraExtraLarge": 48, + "extraLarge": 28, + "extraLargeIncreased": 32, + "extraSmall": 4, + "full": 9999, + "large": 16, + "largeIncreased": 20, + "medium": 12, + "none": 0, + "small": 8, + }, "state": { "opacity": { "disabled": 0.38, @@ -1290,6 +1314,18 @@ exports[`renders list section without subheader 1`] = ` }, }, "roundness": 4, + "shapes": { + "extraExtraLarge": 48, + "extraLarge": 28, + "extraLargeIncreased": 32, + "extraSmall": 4, + "full": 9999, + "large": 16, + "largeIncreased": 20, + "medium": 12, + "none": 0, + "small": 8, + }, "state": { "opacity": { "disabled": 0.38, diff --git a/src/index.tsx b/src/index.tsx index 298658cf50..4f45286d6b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -14,6 +14,7 @@ export { default as Provider } from './core/PaperProvider'; export { default as PaperProvider } from './core/PaperProvider'; export { default as shadow } from './theme/shadow'; export { default as configureFonts } from './theme/fonts'; +export { cornersToStyle } from './theme/tokens/sys/shape'; import * as Avatar from './components/Avatar/Avatar'; import * as Drawer from './components/Drawer/Drawer'; diff --git a/src/theme/schemes/DarkTheme.tsx b/src/theme/schemes/DarkTheme.tsx index 2bb6eacf5d..97153f939c 100644 --- a/src/theme/schemes/DarkTheme.tsx +++ b/src/theme/schemes/DarkTheme.tsx @@ -1,6 +1,7 @@ import { baseTheme } from './base'; import { tokens } from '../tokens'; import { buildScheme } from '../tokens/sys/color/roles'; +import { defaultShapes } from '../tokens/sys/shape'; import { defaultState } from '../tokens/sys/state'; import type { Theme } from '../types'; @@ -10,4 +11,5 @@ export const DarkTheme: Theme = { mode: 'adaptive', colors: buildScheme(tokens.md.ref.palette, tokens.md.ref, { mode: 'dark' }), state: defaultState, + shapes: defaultShapes, }; diff --git a/src/theme/schemes/LightTheme.tsx b/src/theme/schemes/LightTheme.tsx index c63324fa63..753370602b 100644 --- a/src/theme/schemes/LightTheme.tsx +++ b/src/theme/schemes/LightTheme.tsx @@ -1,6 +1,7 @@ import { baseTheme } from './base'; import { tokens } from '../tokens'; import { buildScheme } from '../tokens/sys/color/roles'; +import { defaultShapes } from '../tokens/sys/shape'; import { defaultState } from '../tokens/sys/state'; import type { Theme } from '../types'; @@ -9,4 +10,5 @@ export const LightTheme: Theme = { dark: false, colors: buildScheme(tokens.md.ref.palette, tokens.md.ref, { mode: 'light' }), state: defaultState, + shapes: defaultShapes, }; diff --git a/src/theme/tokens/sys/shape.ts b/src/theme/tokens/sys/shape.ts new file mode 100644 index 0000000000..988aa8aeed --- /dev/null +++ b/src/theme/tokens/sys/shape.ts @@ -0,0 +1,33 @@ +import type { ViewStyle } from 'react-native'; + +import type { ShapeCorners, ThemeShapes } from '../../types'; + +export const defaultShapes: ThemeShapes = { + none: 0, + extraSmall: 4, + small: 8, + medium: 12, + large: 16, + largeIncreased: 20, + extraLarge: 28, + extraLargeIncreased: 32, + extraExtraLarge: 48, + full: 9999, +}; + +type CornersStyle = Pick< + ViewStyle, + | 'borderTopStartRadius' + | 'borderTopEndRadius' + | 'borderBottomStartRadius' + | 'borderBottomEndRadius' +>; + +export function cornersToStyle(corners: ShapeCorners): CornersStyle { + return { + borderTopStartRadius: corners.topStart, + borderTopEndRadius: corners.topEnd, + borderBottomStartRadius: corners.bottomStart, + borderBottomEndRadius: corners.bottomEnd, + }; +} diff --git a/src/theme/types/index.ts b/src/theme/types/index.ts index 562a7ba943..eff2bd98a9 100644 --- a/src/theme/types/index.ts +++ b/src/theme/types/index.ts @@ -1,6 +1,7 @@ export * from './color'; export * from './elevation'; export * from './navigation'; +export * from './shape'; export * from './state'; export * from './theme'; export * from './typography'; diff --git a/src/theme/types/shape.ts b/src/theme/types/shape.ts new file mode 100644 index 0000000000..b2d18f3124 --- /dev/null +++ b/src/theme/types/shape.ts @@ -0,0 +1,19 @@ +export type ShapeCorners = { + topStart: number; + topEnd: number; + bottomStart: number; + bottomEnd: number; +}; + +export type ThemeShapes = { + none: number; + extraSmall: number; + small: number; + medium: number; + large: number; + largeIncreased: number; + extraLarge: number; + extraLargeIncreased: number; + extraExtraLarge: number; + full: number; +}; diff --git a/src/theme/types/theme.ts b/src/theme/types/theme.ts index 742b3db5c4..7eabd8be12 100644 --- a/src/theme/types/theme.ts +++ b/src/theme/types/theme.ts @@ -1,6 +1,7 @@ import type { $DeepPartial } from '@callstack/react-theme-provider'; import type { ThemeColors } from './color'; +import type { ThemeShapes } from './shape'; import type { ThemeState } from './state'; import type { Typescale } from './typography'; @@ -9,6 +10,7 @@ type Mode = 'adaptive' | 'exact'; export type ThemeBase = { dark: boolean; mode?: Mode; + /** @deprecated Use `theme.shapes.*` instead. Will be removed in a future version. */ roundness: number; animation: { scale: number; @@ -20,6 +22,7 @@ export type Theme = ThemeBase & { colors: ThemeColors; fonts: Typescale; state: ThemeState; + shapes: ThemeShapes; }; export type InternalTheme = Theme; From 8ce4e46a8848e6416d06126d5e3de54e29c700bb Mon Sep 17 00:00:00 2001 From: Adrian Cotfas Date: Tue, 5 May 2026 11:41:57 +0300 Subject: [PATCH 3/3] feat: add emphasized typescale and fix letter-spacing spec bugs Adds 15 *Emphasized entries per M3 Design Kit: Display/Headline/TitleLarge/Body use Medium (500), TitleMedium/TitleSmall/Label use Bold (700). Adds weightBold to ref.typeface. Fixes displayLarge letterSpacing (0 -> -0.25) and bodyLarge letterSpacing (0.15 -> 0.5). --- .../Appbar/__snapshots__/Appbar.test.tsx.snap | 2 +- .../__snapshots__/CheckboxItem.test.tsx.snap | 8 +- .../RadioButtonItem.test.tsx.snap | 8 +- .../__snapshots__/Text.test.tsx.snap | 4 +- .../__snapshots__/ListSection.test.tsx.snap | 327 +++++++++++++++++- .../__snapshots__/Menu.test.tsx.snap | 16 +- .../__snapshots__/MenuItem.test.tsx.snap | 20 +- .../__snapshots__/Searchbar.test.tsx.snap | 6 +- .../__snapshots__/TextInput.test.tsx.snap | 62 ++-- src/theme/__tests__/fonts.test.js | 111 +++++- src/theme/schemes/DarkTheme.tsx | 8 +- src/theme/schemes/LightTheme.tsx | 8 +- src/theme/schemes/base.ts | 13 +- src/theme/tokens/index.ts | 105 ++++++ src/theme/tokens/sys/typography.ts | 4 + src/theme/types/typography.ts | 20 ++ 16 files changed, 635 insertions(+), 87 deletions(-) create mode 100644 src/theme/tokens/sys/typography.ts diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap index 82c623d863..c7b786a718 100644 --- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap +++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap @@ -243,7 +243,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 0, }, { diff --git a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap index 5c416c9720..2615640570 100644 --- a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap +++ b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap @@ -155,7 +155,7 @@ exports[`can render leading checkbox control 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, [ @@ -253,7 +253,7 @@ exports[`can render the Android checkbox on different platforms 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, [ @@ -471,7 +471,7 @@ exports[`can render the iOS checkbox on different platforms 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, [ @@ -652,7 +652,7 @@ exports[`renders unchecked 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, [ diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap index f44e395c55..39405cd07a 100644 --- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap +++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap @@ -153,7 +153,7 @@ exports[`can render leading radio button control 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, [ @@ -248,7 +248,7 @@ exports[`can render the Android radio button on different platforms 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, [ @@ -400,7 +400,7 @@ exports[`can render the iOS radio button on different platforms 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, [ @@ -578,7 +578,7 @@ exports[`renders unchecked 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, [ diff --git a/src/components/__tests__/Typography/__snapshots__/Text.test.tsx.snap b/src/components/__tests__/Typography/__snapshots__/Text.test.tsx.snap index 5b87989124..21130dee07 100644 --- a/src/components/__tests__/Typography/__snapshots__/Text.test.tsx.snap +++ b/src/components/__tests__/Typography/__snapshots__/Text.test.tsx.snap @@ -17,7 +17,7 @@ exports[`renders every variant of Text with children as content 1`] = ` "fontFamily": "System", "fontSize": 57, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": -0.25, "lineHeight": 64, }, undefined, @@ -242,7 +242,7 @@ exports[`renders every variant of Text with children as content 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, undefined, diff --git a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap index aa46faf179..bc9a7a5380 100644 --- a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap @@ -80,7 +80,14 @@ exports[`renders list section with custom title style 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, + "lineHeight": 24, + }, + "bodyLargeEmphasized": { + "fontFamily": "System", + "fontSize": 16, + "fontWeight": "500", + "letterSpacing": 0.5, "lineHeight": 24, }, "bodyMedium": { @@ -90,6 +97,13 @@ exports[`renders list section with custom title style 1`] = ` "letterSpacing": 0.25, "lineHeight": 20, }, + "bodyMediumEmphasized": { + "fontFamily": "System", + "fontSize": 14, + "fontWeight": "500", + "letterSpacing": 0.25, + "lineHeight": 20, + }, "bodySmall": { "fontFamily": "System", "fontSize": 12, @@ -97,6 +111,13 @@ exports[`renders list section with custom title style 1`] = ` "letterSpacing": 0.4, "lineHeight": 16, }, + "bodySmallEmphasized": { + "fontFamily": "System", + "fontSize": 12, + "fontWeight": "500", + "letterSpacing": 0.4, + "lineHeight": 16, + }, "default": { "fontFamily": "System", "fontWeight": "400", @@ -106,7 +127,14 @@ exports[`renders list section with custom title style 1`] = ` "fontFamily": "System", "fontSize": 57, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": -0.25, + "lineHeight": 64, + }, + "displayLargeEmphasized": { + "fontFamily": "System", + "fontSize": 57, + "fontWeight": "500", + "letterSpacing": -0.25, "lineHeight": 64, }, "displayMedium": { @@ -116,6 +144,13 @@ exports[`renders list section with custom title style 1`] = ` "letterSpacing": 0, "lineHeight": 52, }, + "displayMediumEmphasized": { + "fontFamily": "System", + "fontSize": 45, + "fontWeight": "500", + "letterSpacing": 0, + "lineHeight": 52, + }, "displaySmall": { "fontFamily": "System", "fontSize": 36, @@ -123,6 +158,13 @@ exports[`renders list section with custom title style 1`] = ` "letterSpacing": 0, "lineHeight": 44, }, + "displaySmallEmphasized": { + "fontFamily": "System", + "fontSize": 36, + "fontWeight": "500", + "letterSpacing": 0, + "lineHeight": 44, + }, "headlineLarge": { "fontFamily": "System", "fontSize": 32, @@ -130,6 +172,13 @@ exports[`renders list section with custom title style 1`] = ` "letterSpacing": 0, "lineHeight": 40, }, + "headlineLargeEmphasized": { + "fontFamily": "System", + "fontSize": 32, + "fontWeight": "500", + "letterSpacing": 0, + "lineHeight": 40, + }, "headlineMedium": { "fontFamily": "System", "fontSize": 28, @@ -137,6 +186,13 @@ exports[`renders list section with custom title style 1`] = ` "letterSpacing": 0, "lineHeight": 36, }, + "headlineMediumEmphasized": { + "fontFamily": "System", + "fontSize": 28, + "fontWeight": "500", + "letterSpacing": 0, + "lineHeight": 36, + }, "headlineSmall": { "fontFamily": "System", "fontSize": 24, @@ -144,6 +200,13 @@ exports[`renders list section with custom title style 1`] = ` "letterSpacing": 0, "lineHeight": 32, }, + "headlineSmallEmphasized": { + "fontFamily": "System", + "fontSize": 24, + "fontWeight": "500", + "letterSpacing": 0, + "lineHeight": 32, + }, "labelLarge": { "fontFamily": "System", "fontSize": 14, @@ -151,6 +214,13 @@ exports[`renders list section with custom title style 1`] = ` "letterSpacing": 0.1, "lineHeight": 20, }, + "labelLargeEmphasized": { + "fontFamily": "System", + "fontSize": 14, + "fontWeight": "700", + "letterSpacing": 0.1, + "lineHeight": 20, + }, "labelMedium": { "fontFamily": "System", "fontSize": 12, @@ -158,6 +228,13 @@ exports[`renders list section with custom title style 1`] = ` "letterSpacing": 0.5, "lineHeight": 16, }, + "labelMediumEmphasized": { + "fontFamily": "System", + "fontSize": 12, + "fontWeight": "700", + "letterSpacing": 0.5, + "lineHeight": 16, + }, "labelSmall": { "fontFamily": "System", "fontSize": 11, @@ -165,6 +242,13 @@ exports[`renders list section with custom title style 1`] = ` "letterSpacing": 0.5, "lineHeight": 16, }, + "labelSmallEmphasized": { + "fontFamily": "System", + "fontSize": 11, + "fontWeight": "700", + "letterSpacing": 0.5, + "lineHeight": 16, + }, "titleLarge": { "fontFamily": "System", "fontSize": 22, @@ -172,6 +256,13 @@ exports[`renders list section with custom title style 1`] = ` "letterSpacing": 0, "lineHeight": 28, }, + "titleLargeEmphasized": { + "fontFamily": "System", + "fontSize": 22, + "fontWeight": "500", + "letterSpacing": 0, + "lineHeight": 28, + }, "titleMedium": { "fontFamily": "System", "fontSize": 16, @@ -179,6 +270,13 @@ exports[`renders list section with custom title style 1`] = ` "letterSpacing": 0.15, "lineHeight": 24, }, + "titleMediumEmphasized": { + "fontFamily": "System", + "fontSize": 16, + "fontWeight": "700", + "letterSpacing": 0.15, + "lineHeight": 24, + }, "titleSmall": { "fontFamily": "System", "fontSize": 14, @@ -186,6 +284,13 @@ exports[`renders list section with custom title style 1`] = ` "letterSpacing": 0.1, "lineHeight": 20, }, + "titleSmallEmphasized": { + "fontFamily": "System", + "fontSize": 14, + "fontWeight": "700", + "letterSpacing": 0.1, + "lineHeight": 20, + }, }, "roundness": 4, "shapes": { @@ -644,7 +749,14 @@ exports[`renders list section with subheader 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, + "lineHeight": 24, + }, + "bodyLargeEmphasized": { + "fontFamily": "System", + "fontSize": 16, + "fontWeight": "500", + "letterSpacing": 0.5, "lineHeight": 24, }, "bodyMedium": { @@ -654,6 +766,13 @@ exports[`renders list section with subheader 1`] = ` "letterSpacing": 0.25, "lineHeight": 20, }, + "bodyMediumEmphasized": { + "fontFamily": "System", + "fontSize": 14, + "fontWeight": "500", + "letterSpacing": 0.25, + "lineHeight": 20, + }, "bodySmall": { "fontFamily": "System", "fontSize": 12, @@ -661,6 +780,13 @@ exports[`renders list section with subheader 1`] = ` "letterSpacing": 0.4, "lineHeight": 16, }, + "bodySmallEmphasized": { + "fontFamily": "System", + "fontSize": 12, + "fontWeight": "500", + "letterSpacing": 0.4, + "lineHeight": 16, + }, "default": { "fontFamily": "System", "fontWeight": "400", @@ -670,7 +796,14 @@ exports[`renders list section with subheader 1`] = ` "fontFamily": "System", "fontSize": 57, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": -0.25, + "lineHeight": 64, + }, + "displayLargeEmphasized": { + "fontFamily": "System", + "fontSize": 57, + "fontWeight": "500", + "letterSpacing": -0.25, "lineHeight": 64, }, "displayMedium": { @@ -680,6 +813,13 @@ exports[`renders list section with subheader 1`] = ` "letterSpacing": 0, "lineHeight": 52, }, + "displayMediumEmphasized": { + "fontFamily": "System", + "fontSize": 45, + "fontWeight": "500", + "letterSpacing": 0, + "lineHeight": 52, + }, "displaySmall": { "fontFamily": "System", "fontSize": 36, @@ -687,6 +827,13 @@ exports[`renders list section with subheader 1`] = ` "letterSpacing": 0, "lineHeight": 44, }, + "displaySmallEmphasized": { + "fontFamily": "System", + "fontSize": 36, + "fontWeight": "500", + "letterSpacing": 0, + "lineHeight": 44, + }, "headlineLarge": { "fontFamily": "System", "fontSize": 32, @@ -694,6 +841,13 @@ exports[`renders list section with subheader 1`] = ` "letterSpacing": 0, "lineHeight": 40, }, + "headlineLargeEmphasized": { + "fontFamily": "System", + "fontSize": 32, + "fontWeight": "500", + "letterSpacing": 0, + "lineHeight": 40, + }, "headlineMedium": { "fontFamily": "System", "fontSize": 28, @@ -701,6 +855,13 @@ exports[`renders list section with subheader 1`] = ` "letterSpacing": 0, "lineHeight": 36, }, + "headlineMediumEmphasized": { + "fontFamily": "System", + "fontSize": 28, + "fontWeight": "500", + "letterSpacing": 0, + "lineHeight": 36, + }, "headlineSmall": { "fontFamily": "System", "fontSize": 24, @@ -708,6 +869,13 @@ exports[`renders list section with subheader 1`] = ` "letterSpacing": 0, "lineHeight": 32, }, + "headlineSmallEmphasized": { + "fontFamily": "System", + "fontSize": 24, + "fontWeight": "500", + "letterSpacing": 0, + "lineHeight": 32, + }, "labelLarge": { "fontFamily": "System", "fontSize": 14, @@ -715,6 +883,13 @@ exports[`renders list section with subheader 1`] = ` "letterSpacing": 0.1, "lineHeight": 20, }, + "labelLargeEmphasized": { + "fontFamily": "System", + "fontSize": 14, + "fontWeight": "700", + "letterSpacing": 0.1, + "lineHeight": 20, + }, "labelMedium": { "fontFamily": "System", "fontSize": 12, @@ -722,6 +897,13 @@ exports[`renders list section with subheader 1`] = ` "letterSpacing": 0.5, "lineHeight": 16, }, + "labelMediumEmphasized": { + "fontFamily": "System", + "fontSize": 12, + "fontWeight": "700", + "letterSpacing": 0.5, + "lineHeight": 16, + }, "labelSmall": { "fontFamily": "System", "fontSize": 11, @@ -729,6 +911,13 @@ exports[`renders list section with subheader 1`] = ` "letterSpacing": 0.5, "lineHeight": 16, }, + "labelSmallEmphasized": { + "fontFamily": "System", + "fontSize": 11, + "fontWeight": "700", + "letterSpacing": 0.5, + "lineHeight": 16, + }, "titleLarge": { "fontFamily": "System", "fontSize": 22, @@ -736,6 +925,13 @@ exports[`renders list section with subheader 1`] = ` "letterSpacing": 0, "lineHeight": 28, }, + "titleLargeEmphasized": { + "fontFamily": "System", + "fontSize": 22, + "fontWeight": "500", + "letterSpacing": 0, + "lineHeight": 28, + }, "titleMedium": { "fontFamily": "System", "fontSize": 16, @@ -743,6 +939,13 @@ exports[`renders list section with subheader 1`] = ` "letterSpacing": 0.15, "lineHeight": 24, }, + "titleMediumEmphasized": { + "fontFamily": "System", + "fontSize": 16, + "fontWeight": "700", + "letterSpacing": 0.15, + "lineHeight": 24, + }, "titleSmall": { "fontFamily": "System", "fontSize": 14, @@ -750,6 +953,13 @@ exports[`renders list section with subheader 1`] = ` "letterSpacing": 0.1, "lineHeight": 20, }, + "titleSmallEmphasized": { + "fontFamily": "System", + "fontSize": 14, + "fontWeight": "700", + "letterSpacing": 0.1, + "lineHeight": 20, + }, }, "roundness": 4, "shapes": { @@ -1206,7 +1416,14 @@ exports[`renders list section without subheader 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, + "lineHeight": 24, + }, + "bodyLargeEmphasized": { + "fontFamily": "System", + "fontSize": 16, + "fontWeight": "500", + "letterSpacing": 0.5, "lineHeight": 24, }, "bodyMedium": { @@ -1216,6 +1433,13 @@ exports[`renders list section without subheader 1`] = ` "letterSpacing": 0.25, "lineHeight": 20, }, + "bodyMediumEmphasized": { + "fontFamily": "System", + "fontSize": 14, + "fontWeight": "500", + "letterSpacing": 0.25, + "lineHeight": 20, + }, "bodySmall": { "fontFamily": "System", "fontSize": 12, @@ -1223,6 +1447,13 @@ exports[`renders list section without subheader 1`] = ` "letterSpacing": 0.4, "lineHeight": 16, }, + "bodySmallEmphasized": { + "fontFamily": "System", + "fontSize": 12, + "fontWeight": "500", + "letterSpacing": 0.4, + "lineHeight": 16, + }, "default": { "fontFamily": "System", "fontWeight": "400", @@ -1232,7 +1463,14 @@ exports[`renders list section without subheader 1`] = ` "fontFamily": "System", "fontSize": 57, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": -0.25, + "lineHeight": 64, + }, + "displayLargeEmphasized": { + "fontFamily": "System", + "fontSize": 57, + "fontWeight": "500", + "letterSpacing": -0.25, "lineHeight": 64, }, "displayMedium": { @@ -1242,6 +1480,13 @@ exports[`renders list section without subheader 1`] = ` "letterSpacing": 0, "lineHeight": 52, }, + "displayMediumEmphasized": { + "fontFamily": "System", + "fontSize": 45, + "fontWeight": "500", + "letterSpacing": 0, + "lineHeight": 52, + }, "displaySmall": { "fontFamily": "System", "fontSize": 36, @@ -1249,6 +1494,13 @@ exports[`renders list section without subheader 1`] = ` "letterSpacing": 0, "lineHeight": 44, }, + "displaySmallEmphasized": { + "fontFamily": "System", + "fontSize": 36, + "fontWeight": "500", + "letterSpacing": 0, + "lineHeight": 44, + }, "headlineLarge": { "fontFamily": "System", "fontSize": 32, @@ -1256,6 +1508,13 @@ exports[`renders list section without subheader 1`] = ` "letterSpacing": 0, "lineHeight": 40, }, + "headlineLargeEmphasized": { + "fontFamily": "System", + "fontSize": 32, + "fontWeight": "500", + "letterSpacing": 0, + "lineHeight": 40, + }, "headlineMedium": { "fontFamily": "System", "fontSize": 28, @@ -1263,6 +1522,13 @@ exports[`renders list section without subheader 1`] = ` "letterSpacing": 0, "lineHeight": 36, }, + "headlineMediumEmphasized": { + "fontFamily": "System", + "fontSize": 28, + "fontWeight": "500", + "letterSpacing": 0, + "lineHeight": 36, + }, "headlineSmall": { "fontFamily": "System", "fontSize": 24, @@ -1270,6 +1536,13 @@ exports[`renders list section without subheader 1`] = ` "letterSpacing": 0, "lineHeight": 32, }, + "headlineSmallEmphasized": { + "fontFamily": "System", + "fontSize": 24, + "fontWeight": "500", + "letterSpacing": 0, + "lineHeight": 32, + }, "labelLarge": { "fontFamily": "System", "fontSize": 14, @@ -1277,6 +1550,13 @@ exports[`renders list section without subheader 1`] = ` "letterSpacing": 0.1, "lineHeight": 20, }, + "labelLargeEmphasized": { + "fontFamily": "System", + "fontSize": 14, + "fontWeight": "700", + "letterSpacing": 0.1, + "lineHeight": 20, + }, "labelMedium": { "fontFamily": "System", "fontSize": 12, @@ -1284,6 +1564,13 @@ exports[`renders list section without subheader 1`] = ` "letterSpacing": 0.5, "lineHeight": 16, }, + "labelMediumEmphasized": { + "fontFamily": "System", + "fontSize": 12, + "fontWeight": "700", + "letterSpacing": 0.5, + "lineHeight": 16, + }, "labelSmall": { "fontFamily": "System", "fontSize": 11, @@ -1291,6 +1578,13 @@ exports[`renders list section without subheader 1`] = ` "letterSpacing": 0.5, "lineHeight": 16, }, + "labelSmallEmphasized": { + "fontFamily": "System", + "fontSize": 11, + "fontWeight": "700", + "letterSpacing": 0.5, + "lineHeight": 16, + }, "titleLarge": { "fontFamily": "System", "fontSize": 22, @@ -1298,6 +1592,13 @@ exports[`renders list section without subheader 1`] = ` "letterSpacing": 0, "lineHeight": 28, }, + "titleLargeEmphasized": { + "fontFamily": "System", + "fontSize": 22, + "fontWeight": "500", + "letterSpacing": 0, + "lineHeight": 28, + }, "titleMedium": { "fontFamily": "System", "fontSize": 16, @@ -1305,6 +1606,13 @@ exports[`renders list section without subheader 1`] = ` "letterSpacing": 0.15, "lineHeight": 24, }, + "titleMediumEmphasized": { + "fontFamily": "System", + "fontSize": 16, + "fontWeight": "700", + "letterSpacing": 0.15, + "lineHeight": 24, + }, "titleSmall": { "fontFamily": "System", "fontSize": 14, @@ -1312,6 +1620,13 @@ exports[`renders list section without subheader 1`] = ` "letterSpacing": 0.1, "lineHeight": 20, }, + "titleSmallEmphasized": { + "fontFamily": "System", + "fontSize": 14, + "fontWeight": "700", + "letterSpacing": 0.1, + "lineHeight": 20, + }, }, "roundness": 4, "shapes": { diff --git a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap index 2a09d12a10..9d426f228c 100644 --- a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap @@ -408,7 +408,7 @@ exports[`renders menu with content styles 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, [ @@ -417,7 +417,7 @@ exports[`renders menu with content styles 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, undefined, @@ -532,7 +532,7 @@ exports[`renders menu with content styles 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, [ @@ -541,7 +541,7 @@ exports[`renders menu with content styles 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, undefined, @@ -1135,7 +1135,7 @@ exports[`renders visible menu 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, [ @@ -1144,7 +1144,7 @@ exports[`renders visible menu 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, undefined, @@ -1259,7 +1259,7 @@ exports[`renders visible menu 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, [ @@ -1268,7 +1268,7 @@ exports[`renders visible menu 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, undefined, diff --git a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap index e879443bf9..9b1babef34 100644 --- a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap @@ -142,7 +142,7 @@ exports[`Menu Item renders menu item 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, [ @@ -151,7 +151,7 @@ exports[`Menu Item renders menu item 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, undefined, @@ -306,7 +306,7 @@ exports[`Menu Item renders menu item 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, [ @@ -315,7 +315,7 @@ exports[`Menu Item renders menu item 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, undefined, @@ -470,7 +470,7 @@ exports[`Menu Item renders menu item 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, [ @@ -479,7 +479,7 @@ exports[`Menu Item renders menu item 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, undefined, @@ -634,7 +634,7 @@ exports[`Menu Item renders menu item 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, [ @@ -643,7 +643,7 @@ exports[`Menu Item renders menu item 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, undefined, @@ -758,7 +758,7 @@ exports[`Menu Item renders menu item 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, [ @@ -767,7 +767,7 @@ exports[`Menu Item renders menu item 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 24, }, undefined, diff --git a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap index 1954a404ef..278bd963a4 100644 --- a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap @@ -202,7 +202,7 @@ exports[`activity indicator snapshot test 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 0, }, { @@ -620,7 +620,7 @@ exports[`renders with placeholder 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 0, }, { @@ -997,7 +997,7 @@ exports[`renders with text 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": 0, }, { diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap index 0a7334fa12..dbe10b45cc 100644 --- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -112,7 +112,7 @@ exports[`call onPress when affix adornment pressed 1`] = ` "fontSize": 16, "fontWeight": undefined, "left": 0, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "maxWidth": 73, "opacity": 0, @@ -150,7 +150,7 @@ exports[`call onPress when affix adornment pressed 1`] = ` "fontSize": 16, "fontWeight": undefined, "left": 0, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "maxWidth": 73, "opacity": 0, @@ -207,7 +207,7 @@ exports[`call onPress when affix adornment pressed 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "minWidth": 65, "opacity": 1, @@ -289,7 +289,7 @@ exports[`call onPress when affix adornment pressed 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, }, undefined, @@ -416,7 +416,7 @@ exports[`correctly applies a component as the text label 1`] = ` "fontSize": 16, "fontWeight": undefined, "left": 0, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "maxWidth": 97.33333333333333, "opacity": 0, @@ -462,7 +462,7 @@ exports[`correctly applies a component as the text label 1`] = ` "fontSize": 16, "fontWeight": undefined, "left": 0, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "maxWidth": 97.33333333333333, "opacity": 0, @@ -527,7 +527,7 @@ exports[`correctly applies a component as the text label 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "minWidth": 65, "opacity": 1, @@ -663,7 +663,7 @@ exports[`correctly applies cursorColor prop 1`] = ` "fontSize": 16, "fontWeight": undefined, "left": 0, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "maxWidth": 97.33333333333333, "opacity": 0, @@ -701,7 +701,7 @@ exports[`correctly applies cursorColor prop 1`] = ` "fontSize": 16, "fontWeight": undefined, "left": 0, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "maxWidth": 97.33333333333333, "opacity": 0, @@ -758,7 +758,7 @@ exports[`correctly applies cursorColor prop 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "minWidth": 65, "opacity": 1, @@ -894,7 +894,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` "fontSize": 16, "fontWeight": undefined, "left": 0, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "maxWidth": 97.33333333333333, "opacity": 0, @@ -932,7 +932,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` "fontSize": 16, "fontWeight": undefined, "left": 0, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "maxWidth": 97.33333333333333, "opacity": 0, @@ -989,7 +989,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "minWidth": 65, "opacity": 1, @@ -1117,7 +1117,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` "fontWeight": undefined, "height": 0, "left": 8, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "opacity": 1, "paddingHorizontal": 0, @@ -1157,7 +1157,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` "fontSize": 16, "fontWeight": undefined, "left": 0, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "maxWidth": 97.33333333333333, "opacity": 0, @@ -1194,7 +1194,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` "fontSize": 16, "fontWeight": undefined, "left": 0, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "maxWidth": 97.33333333333333, "opacity": 0, @@ -1253,7 +1253,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "minWidth": 65, "opacity": 1, @@ -1388,7 +1388,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = ` "fontSize": 16, "fontWeight": undefined, "left": 0, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "maxWidth": 97.33333333333333, "opacity": 0, @@ -1426,7 +1426,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = ` "fontSize": 16, "fontWeight": undefined, "left": 0, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "maxWidth": 97.33333333333333, "opacity": 0, @@ -1483,7 +1483,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "minWidth": 65, "opacity": 1, @@ -1621,7 +1621,7 @@ exports[`correctly applies textAlign center 1`] = ` "fontSize": 16, "fontWeight": undefined, "left": 0, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "maxWidth": 97.33333333333333, "opacity": 0, @@ -1659,7 +1659,7 @@ exports[`correctly applies textAlign center 1`] = ` "fontSize": 16, "fontWeight": undefined, "left": 0, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "maxWidth": 97.33333333333333, "opacity": 0, @@ -1716,7 +1716,7 @@ exports[`correctly applies textAlign center 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "minWidth": 65, "opacity": 1, @@ -1852,7 +1852,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm "fontSize": 16, "fontWeight": undefined, "left": 0, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "maxWidth": 97.33333333333333, "opacity": 0, @@ -1890,7 +1890,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm "fontSize": 16, "fontWeight": undefined, "left": 0, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "maxWidth": 97.33333333333333, "opacity": 0, @@ -1947,7 +1947,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "minWidth": 65, "opacity": 1, @@ -1998,7 +1998,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, }, { @@ -2288,7 +2288,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "fontSize": 16, "fontWeight": undefined, "left": 0, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "maxWidth": 97.33333333333333, "opacity": 0, @@ -2326,7 +2326,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "fontSize": 16, "fontWeight": undefined, "left": 0, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "maxWidth": 97.33333333333333, "opacity": 0, @@ -2383,7 +2383,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, "minWidth": 65, "opacity": 1, @@ -2596,7 +2596,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, - "letterSpacing": 0.15, + "letterSpacing": 0.5, "lineHeight": undefined, }, { diff --git a/src/theme/__tests__/fonts.test.js b/src/theme/__tests__/fonts.test.js index 9aafe31616..6650c4f098 100644 --- a/src/theme/__tests__/fonts.test.js +++ b/src/theme/__tests__/fonts.test.js @@ -1,4 +1,4 @@ -const customFontV3 = { +const customFont = { displayLarge: { fontFamily: 'NotoSans', letterSpacing: 0, @@ -104,6 +104,111 @@ const customFontV3 = { lineHeight: 16, fontSize: 12, }, + displayLargeEmphasized: { + fontFamily: 'NotoSans', + letterSpacing: 0, + fontWeight: '500', + lineHeight: 64, + fontSize: 57, + }, + displayMediumEmphasized: { + fontFamily: 'NotoSans', + letterSpacing: 0, + fontWeight: '500', + lineHeight: 52, + fontSize: 45, + }, + displaySmallEmphasized: { + fontFamily: 'NotoSans', + letterSpacing: 0, + fontWeight: '500', + lineHeight: 44, + fontSize: 36, + }, + headlineLargeEmphasized: { + fontFamily: 'NotoSans', + letterSpacing: 0, + fontWeight: '500', + lineHeight: 40, + fontSize: 32, + }, + headlineMediumEmphasized: { + fontFamily: 'NotoSans', + letterSpacing: 0, + fontWeight: '500', + lineHeight: 36, + fontSize: 28, + }, + headlineSmallEmphasized: { + fontFamily: 'NotoSans', + letterSpacing: 0, + fontWeight: '500', + lineHeight: 32, + fontSize: 24, + }, + titleLargeEmphasized: { + fontFamily: 'NotoSans', + letterSpacing: 0, + fontWeight: '500', + lineHeight: 28, + fontSize: 22, + }, + titleMediumEmphasized: { + fontFamily: 'NotoSans', + letterSpacing: 0, + fontWeight: '700', + lineHeight: 24, + fontSize: 16, + }, + titleSmallEmphasized: { + fontFamily: 'NotoSans', + letterSpacing: 0, + fontWeight: '700', + lineHeight: 20, + fontSize: 14, + }, + labelLargeEmphasized: { + fontFamily: 'NotoSans', + letterSpacing: 0, + fontWeight: '700', + lineHeight: 20, + fontSize: 14, + }, + labelMediumEmphasized: { + fontFamily: 'NotoSans', + letterSpacing: 0, + fontWeight: '700', + lineHeight: 16, + fontSize: 12, + }, + labelSmallEmphasized: { + fontFamily: 'NotoSans', + letterSpacing: 0, + fontWeight: '700', + lineHeight: 16, + fontSize: 11, + }, + bodyLargeEmphasized: { + fontFamily: 'NotoSans', + letterSpacing: 0, + fontWeight: '500', + lineHeight: 24, + fontSize: 16, + }, + bodyMediumEmphasized: { + fontFamily: 'NotoSans', + letterSpacing: 0, + fontWeight: '500', + lineHeight: 20, + fontSize: 14, + }, + bodySmallEmphasized: { + fontFamily: 'NotoSans', + letterSpacing: 0, + fontWeight: '500', + lineHeight: 16, + fontSize: 12, + }, default: { fontFamily: 'NotoSans', letterSpacing: 0, @@ -152,7 +257,7 @@ describe('configureFonts', () => { letterSpacing: 0, }, }) - ).toEqual(customFontV3); + ).toEqual(customFont); }); it('overrides properties passed in config for several variants', () => { @@ -179,7 +284,7 @@ describe('configureFonts', () => { ...typescale, bodyLarge: { fontFamily: 'NotoSans', - letterSpacing: 0.15, + letterSpacing: 0.5, fontWeight: '400', fontStyle: 'italic', lineHeight: 24, diff --git a/src/theme/schemes/DarkTheme.tsx b/src/theme/schemes/DarkTheme.tsx index 97153f939c..b711531d70 100644 --- a/src/theme/schemes/DarkTheme.tsx +++ b/src/theme/schemes/DarkTheme.tsx @@ -1,15 +1,11 @@ -import { baseTheme } from './base'; +import { themeDefaults } from './base'; import { tokens } from '../tokens'; import { buildScheme } from '../tokens/sys/color/roles'; -import { defaultShapes } from '../tokens/sys/shape'; -import { defaultState } from '../tokens/sys/state'; import type { Theme } from '../types'; export const DarkTheme: Theme = { - ...baseTheme, + ...themeDefaults, dark: true, mode: 'adaptive', colors: buildScheme(tokens.md.ref.palette, tokens.md.ref, { mode: 'dark' }), - state: defaultState, - shapes: defaultShapes, }; diff --git a/src/theme/schemes/LightTheme.tsx b/src/theme/schemes/LightTheme.tsx index 753370602b..cc66852f3d 100644 --- a/src/theme/schemes/LightTheme.tsx +++ b/src/theme/schemes/LightTheme.tsx @@ -1,14 +1,10 @@ -import { baseTheme } from './base'; +import { themeDefaults } from './base'; import { tokens } from '../tokens'; import { buildScheme } from '../tokens/sys/color/roles'; -import { defaultShapes } from '../tokens/sys/shape'; -import { defaultState } from '../tokens/sys/state'; import type { Theme } from '../types'; export const LightTheme: Theme = { - ...baseTheme, + ...themeDefaults, dark: false, colors: buildScheme(tokens.md.ref.palette, tokens.md.ref, { mode: 'light' }), - state: defaultState, - shapes: defaultShapes, }; diff --git a/src/theme/schemes/base.ts b/src/theme/schemes/base.ts index 68cf999cee..afdd76d289 100644 --- a/src/theme/schemes/base.ts +++ b/src/theme/schemes/base.ts @@ -1,9 +1,16 @@ -import configureFonts from '../fonts'; +import { defaultShapes } from '../tokens/sys/shape'; +import { defaultState } from '../tokens/sys/state'; +import { defaultFonts } from '../tokens/sys/typography'; +import type { Theme } from '../types'; -export const baseTheme = { +type ThemeDefaults = Omit; + +export const themeDefaults: ThemeDefaults = { roundness: 4, - fonts: configureFonts(), animation: { scale: 1.0, }, + fonts: defaultFonts, + state: defaultState, + shapes: defaultShapes, }; diff --git a/src/theme/tokens/index.ts b/src/theme/tokens/index.ts index e8f041163e..b0b160b080 100644 --- a/src/theme/tokens/index.ts +++ b/src/theme/tokens/index.ts @@ -114,6 +114,8 @@ const ref = { default: 'sans-serif-medium', }), weightMedium: '500' as Font['fontWeight'], + + weightBold: '700' as Font['fontWeight'], }, /** State layers opacity @@ -143,9 +145,22 @@ const mediumType = { fontWeight: ref.typeface.weightMedium, }; +const emphasizedMediumType = { + fontFamily: ref.typeface.plainMedium, + letterSpacing: 0, + fontWeight: ref.typeface.weightMedium, +}; + +const emphasizedBoldType = { + fontFamily: ref.typeface.plainMedium, + letterSpacing: 0, + fontWeight: ref.typeface.weightBold, +}; + export const typescale = { displayLarge: { ...regularType, + letterSpacing: -0.25, lineHeight: 64, fontSize: 57, }, @@ -216,6 +231,7 @@ export const typescale = { ...mediumType, fontWeight: ref.typeface.weightRegular, fontFamily: ref.typeface.brandRegular, + letterSpacing: 0.5, lineHeight: 24, fontSize: 16, }, @@ -236,6 +252,95 @@ export const typescale = { fontSize: 12, }, + displayLargeEmphasized: { + ...emphasizedMediumType, + letterSpacing: -0.25, + lineHeight: 64, + fontSize: 57, + }, + displayMediumEmphasized: { + ...emphasizedMediumType, + lineHeight: 52, + fontSize: 45, + }, + displaySmallEmphasized: { + ...emphasizedMediumType, + lineHeight: 44, + fontSize: 36, + }, + + headlineLargeEmphasized: { + ...emphasizedMediumType, + lineHeight: 40, + fontSize: 32, + }, + headlineMediumEmphasized: { + ...emphasizedMediumType, + lineHeight: 36, + fontSize: 28, + }, + headlineSmallEmphasized: { + ...emphasizedMediumType, + lineHeight: 32, + fontSize: 24, + }, + + titleLargeEmphasized: { + ...emphasizedMediumType, + lineHeight: 28, + fontSize: 22, + }, + titleMediumEmphasized: { + ...emphasizedBoldType, + letterSpacing: 0.15, + lineHeight: 24, + fontSize: 16, + }, + titleSmallEmphasized: { + ...emphasizedBoldType, + letterSpacing: 0.1, + lineHeight: 20, + fontSize: 14, + }, + + labelLargeEmphasized: { + ...emphasizedBoldType, + letterSpacing: 0.1, + lineHeight: 20, + fontSize: 14, + }, + labelMediumEmphasized: { + ...emphasizedBoldType, + letterSpacing: 0.5, + lineHeight: 16, + fontSize: 12, + }, + labelSmallEmphasized: { + ...emphasizedBoldType, + letterSpacing: 0.5, + lineHeight: 16, + fontSize: 11, + }, + + bodyLargeEmphasized: { + ...emphasizedMediumType, + letterSpacing: 0.5, + lineHeight: 24, + fontSize: 16, + }, + bodyMediumEmphasized: { + ...emphasizedMediumType, + letterSpacing: 0.25, + lineHeight: 20, + fontSize: 14, + }, + bodySmallEmphasized: { + ...emphasizedMediumType, + letterSpacing: 0.4, + lineHeight: 16, + fontSize: 12, + }, + default: { ...regularType, }, diff --git a/src/theme/tokens/sys/typography.ts b/src/theme/tokens/sys/typography.ts new file mode 100644 index 0000000000..2ea3e08c6c --- /dev/null +++ b/src/theme/tokens/sys/typography.ts @@ -0,0 +1,4 @@ +import type { Typescale } from '../../types'; +import { typescale } from '../index'; + +export const defaultFonts: Typescale = typescale; diff --git a/src/theme/types/typography.ts b/src/theme/types/typography.ts index 96b34b0815..a8ff7fad2f 100644 --- a/src/theme/types/typography.ts +++ b/src/theme/types/typography.ts @@ -42,6 +42,26 @@ export enum TypescaleKey { bodyLarge = 'bodyLarge', bodyMedium = 'bodyMedium', bodySmall = 'bodySmall', + + displayLargeEmphasized = 'displayLargeEmphasized', + displayMediumEmphasized = 'displayMediumEmphasized', + displaySmallEmphasized = 'displaySmallEmphasized', + + headlineLargeEmphasized = 'headlineLargeEmphasized', + headlineMediumEmphasized = 'headlineMediumEmphasized', + headlineSmallEmphasized = 'headlineSmallEmphasized', + + titleLargeEmphasized = 'titleLargeEmphasized', + titleMediumEmphasized = 'titleMediumEmphasized', + titleSmallEmphasized = 'titleSmallEmphasized', + + labelLargeEmphasized = 'labelLargeEmphasized', + labelMediumEmphasized = 'labelMediumEmphasized', + labelSmallEmphasized = 'labelSmallEmphasized', + + bodyLargeEmphasized = 'bodyLargeEmphasized', + bodyMediumEmphasized = 'bodyMediumEmphasized', + bodySmallEmphasized = 'bodySmallEmphasized', } export type TypescaleStyle = {