From d909ded14289e363543ddca76f6ac1a451bcf7cf Mon Sep 17 00:00:00 2001 From: Peter Pal Hudak Date: Wed, 16 Aug 2023 16:18:59 +0200 Subject: [PATCH] feat(emotion,shared-types,ui-theme-tokens): add mediumSmall spacing to themes Closes: INSTUI-3829 IMSG (InstUI Mini Style Guide) adds a new unit for spacing called: mediumSmall. Canvas/High contrast: 16px Instructure: 20px --- .../emotion/src/styleUtils/ThemeablePropValues.ts | 15 +++++++++------ packages/shared-types/src/BaseTheme.ts | 1 + packages/ui-theme-tokens/src/canvas/spacing.ts | 1 + .../ui-theme-tokens/src/instructure/spacing.ts | 1 + 4 files changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/emotion/src/styleUtils/ThemeablePropValues.ts b/packages/emotion/src/styleUtils/ThemeablePropValues.ts index 604f918385..9becdbcf47 100644 --- a/packages/emotion/src/styleUtils/ThemeablePropValues.ts +++ b/packages/emotion/src/styleUtils/ThemeablePropValues.ts @@ -80,6 +80,7 @@ const ThemeablePropValues = { xxSmall: 'xx-small', xSmall: 'x-small', small: 'small', + mediumSmall: 'mediumSmall', medium: 'medium', large: 'large', xLarge: 'x-large', @@ -89,29 +90,31 @@ const ThemeablePropValues = { // SPACING type SpacingKeys = keyof typeof ThemeablePropValues.SPACING -type SpacingValues = typeof ThemeablePropValues.SPACING[SpacingKeys] +type SpacingValues = (typeof ThemeablePropValues.SPACING)[SpacingKeys] type Spacing = CSSShorthandValue // SHADOW_TYPES type ShadowKeys = keyof typeof ThemeablePropValues.SHADOW_TYPES -type Shadow = typeof ThemeablePropValues.SHADOW_TYPES[ShadowKeys] +type Shadow = (typeof ThemeablePropValues.SHADOW_TYPES)[ShadowKeys] // STACKING_TYPES type StackingKeys = keyof typeof ThemeablePropValues.STACKING_TYPES -type Stacking = typeof ThemeablePropValues.STACKING_TYPES[StackingKeys] +type Stacking = (typeof ThemeablePropValues.STACKING_TYPES)[StackingKeys] // BACKGROUNDS type BackgroundKeys = keyof typeof ThemeablePropValues.BACKGROUNDS -type Background = typeof ThemeablePropValues.BACKGROUNDS[BackgroundKeys] +type Background = (typeof ThemeablePropValues.BACKGROUNDS)[BackgroundKeys] // BORDER_RADII type BorderRadiiKeys = keyof typeof ThemeablePropValues.BORDER_RADII -type BorderRadiiValues = typeof ThemeablePropValues.BORDER_RADII[BorderRadiiKeys] +type BorderRadiiValues = + (typeof ThemeablePropValues.BORDER_RADII)[BorderRadiiKeys] type BorderRadii = CSSShorthandValue // BORDER_WIDTHS type BorderWidthKeys = keyof typeof ThemeablePropValues.BORDER_WIDTHS -type BorderWidthValues = typeof ThemeablePropValues.BORDER_WIDTHS[BorderWidthKeys] +type BorderWidthValues = + (typeof ThemeablePropValues.BORDER_WIDTHS)[BorderWidthKeys] type BorderWidth = CSSShorthandValue export default ThemeablePropValues diff --git a/packages/shared-types/src/BaseTheme.ts b/packages/shared-types/src/BaseTheme.ts index f8efce4cd6..d2445bb380 100644 --- a/packages/shared-types/src/BaseTheme.ts +++ b/packages/shared-types/src/BaseTheme.ts @@ -70,6 +70,7 @@ type Spacing = { xxSmall: string | 0 xSmall: string | 0 small: string | 0 + mediumSmall: string | 0 medium: string | 0 large: string | 0 xLarge: string | 0 diff --git a/packages/ui-theme-tokens/src/canvas/spacing.ts b/packages/ui-theme-tokens/src/canvas/spacing.ts index d70ea02870..1409d4d175 100644 --- a/packages/ui-theme-tokens/src/canvas/spacing.ts +++ b/packages/ui-theme-tokens/src/canvas/spacing.ts @@ -29,6 +29,7 @@ const spacing: Spacing = Object.freeze({ xxSmall: '0.375rem', // 6px xSmall: '0.5rem', // 8px small: '0.75rem', // 12px + mediumSmall: '1rem', // 16px medium: '1.5rem', // 24px large: '2.25rem', // 36px xLarge: '3rem', // 48px diff --git a/packages/ui-theme-tokens/src/instructure/spacing.ts b/packages/ui-theme-tokens/src/instructure/spacing.ts index f2e5406eda..e551abd6bb 100644 --- a/packages/ui-theme-tokens/src/instructure/spacing.ts +++ b/packages/ui-theme-tokens/src/instructure/spacing.ts @@ -29,6 +29,7 @@ const spacing: Spacing = Object.freeze({ xxSmall: '0.375rem', xSmall: '0.75rem', small: '1rem', + mediumSmall: '1.25rem', medium: '1.5rem', large: '2.25rem', xLarge: '3rem',