feat(emotion,shared-types,ui-theme-tokens): add mediumSmall spacing t…

…o themes Closes: INSTUI-3829 IMSG (InstUI Mini Style Guide) adds a new unit for spacing called: mediumSmall. Canvas/High contrast: 16px Instructure: 20px
instructure · Aug 17, 2023 · d909ded · d909ded
1 parent fca1071
commit d909ded
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 6 deletions.
diff --git 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<SpacingValues>
 
 // 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<BorderRadiiValues>
 
 // 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<BorderWidthValues>
 
 export default ThemeablePropValues

diff --git 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
@@ -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
@@ -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',