@sanity/ui 3.0.0-static.1 → 3.0.0-static.11

package/src/theme/build/renderColorTheme.ts

@@ -1,28 +1,31 @@
+// import {COLOR_HUES} from '@sanity/color'
 import {ThemeColorPalette, ThemeConfig} from '../config'
 import {defaultColorPalette} from '../defaults/colorPalette'
+import {HUES} from '../palette'
 import {
+  THEME_COLOR_STATE_TONES,
   ThemeColorAvatar_v2,
-  ThemeColorBadgeTone_v2,
   ThemeColorBadge_v2,
+  ThemeColorBadgeTone_v2,
   ThemeColorBlendModeKey,
+  ThemeColorButton_v2,
   ThemeColorButtonMode_v2,
   ThemeColorButtonTone_v2,
-  ThemeColorButton_v2,
-  ThemeColorCardToneKey,
   ThemeColorCard_v2,
+  ThemeColorCardToneKey,
+  ThemeColorInput_v2,
   ThemeColorInputMode_v2,
   ThemeColorInputState_v2,
-  ThemeColorInput_v2,
   ThemeColorKBD,
   ThemeColorScheme_v2,
   ThemeColorSchemes_v2,
-  ThemeColorSelectableTone_v2,
   ThemeColorSelectable_v2,
+  ThemeColorSelectableTone_v2,
   ThemeColorShadow,
   ThemeColorState_v2,
   ThemeColorSyntax,
-} from '../system'
-import {RenderColorValueOptions, renderColorValue} from './renderColorValue'
+} from '../v2'
+import {renderColorValue, RenderColorValueOptions} from './renderColorValue'
 
 export function renderThemeColorSchemes(
   value: ThemeColorSchemes_v2,
@@ -187,17 +190,13 @@ function renderThemeColorAvatar(
     colorPalette: ThemeColorPalette
   },
 ): ThemeColorAvatar_v2 {
-  return {
-    gray: renderThemeColorAvatarColor(value.gray, options),
-    blue: renderThemeColorAvatarColor(value.blue, options),
-    purple: renderThemeColorAvatarColor(value.purple, options),
-    magenta: renderThemeColorAvatarColor(value.magenta, options),
-    red: renderThemeColorAvatarColor(value.red, options),
-    orange: renderThemeColorAvatarColor(value.orange, options),
-    yellow: renderThemeColorAvatarColor(value.yellow, options),
-    green: renderThemeColorAvatarColor(value.green, options),
-    cyan: renderThemeColorAvatarColor(value.cyan, options),
+  const colorAvatar = {} as ThemeColorAvatar_v2
+
+  for (const hue of HUES) {
+    colorAvatar[hue] = renderThemeColorAvatarColor(value[hue], options)
   }
+
+  return colorAvatar
 }
 
 function renderThemeColorAvatarColor(
@@ -240,13 +239,13 @@ function renderThemeColorBadge(
     colorPalette: ThemeColorPalette
   },
 ): ThemeColorBadge_v2 {
-  return {
-    default: renderThemeColorBadgeColor(value.default, options),
-    primary: renderThemeColorBadgeColor(value.primary, options),
-    positive: renderThemeColorBadgeColor(value.positive, options),
-    caution: renderThemeColorBadgeColor(value.caution, options),
-    critical: renderThemeColorBadgeColor(value.critical, options),
+  const colorBadge = {} as ThemeColorBadge_v2
+
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    colorBadge[tone] = renderThemeColorBadgeColor(value[tone], options)
   }
+
+  return colorBadge
 }
 
 function renderThemeColorBadgeColor(
@@ -259,8 +258,6 @@ function renderThemeColorBadgeColor(
 ): ThemeColorBadgeTone_v2 {
   const {baseBg, blendMode: rootBlendMode, colorPalette} = options
 
-  // const blendMode = value._blend || 'multiply'
-
   const blendMode = rootBlendMode
 
   const rootOptions: RenderColorValueOptions = {
@@ -308,13 +305,13 @@ function renderThemeColorButtonTones(
     colorPalette: ThemeColorPalette
   },
 ): ThemeColorButtonMode_v2 {
-  return {
-    default: renderThemeColorButtonStates(value.default, options),
-    primary: renderThemeColorButtonStates(value.primary, options),
-    positive: renderThemeColorButtonStates(value.positive, options),
-    caution: renderThemeColorButtonStates(value.caution, options),
-    critical: renderThemeColorButtonStates(value.critical, options),
+  const colorButtonMode = {} as ThemeColorButtonMode_v2
+
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    colorButtonMode[tone] = renderThemeColorButtonStates(value[tone], options)
   }
+
+  return colorButtonMode
 }
 
 function renderThemeColorButtonStates(
@@ -457,13 +454,13 @@ function renderThemeColorSelectable(
     colorPalette: ThemeColorPalette
   },
 ): ThemeColorSelectable_v2 {
-  return {
-    default: renderThemeColorSelectableStates(value.default, options),
-    primary: renderThemeColorSelectableStates(value.primary, options),
-    positive: renderThemeColorSelectableStates(value.positive, options),
-    caution: renderThemeColorSelectableStates(value.caution, options),
-    critical: renderThemeColorSelectableStates(value.critical, options),
+  const colorSelectable = {} as ThemeColorSelectable_v2
+
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    colorSelectable[tone] = renderThemeColorSelectableStates(value[tone], options)
   }
+
+  return colorSelectable
 }
 
 function renderThemeColorSelectableStates(

package/src/theme/build/renderColorValue.ts

@@ -1,7 +1,8 @@
 import {ColorTint as ColorPaletteValue} from '@sanity/color'
-import {ThemeColorPalette, parseTokenValue} from '../config'
-import {ThemeColorBlendModeKey} from '../system'
-import {hexToRgb, mix, rgbToHex, rgba} from './lib/color-fns'
+
+import {parseTokenValue, ThemeColorPalette} from '../config'
+import {ThemeColorBlendModeKey} from '../v2'
+import {hexToRgb, mix, rgba, rgbToHex} from './lib/color-fns'
 import {mixThemeColor} from './mixThemeColor'
 
 export interface RenderColorValueOptions {

package/src/theme/build/resolveColorTokens.ts

@@ -1,30 +1,33 @@
-import {ColorHueKey} from '@sanity/color'
+import {COLOR_HUES, ColorHueKey} from '@sanity/color'
+
 import {
   ColorConfigCardTone,
   ColorConfigInputMode,
   ColorConfigInputState,
   ColorConfigStateTone,
+  ThemeColorAvatarTokens,
+  ThemeColorBadgeTokens,
   ThemeColorBaseTokens,
   ThemeColorButtonTokens,
   ThemeColorInputStateTokens,
   ThemeColorInputTokens,
-  ThemeColorStateTokens,
   ThemeColorStatesTokens,
+  ThemeColorStateTokens,
   ThemeColorTokens,
 } from '../config'
 import {defaultColorTokens} from '../defaults/colorTokens'
 import {
-  THEME_COLOR_CARD_TONES,
   THEME_COLOR_BUTTON_MODES,
+  THEME_COLOR_CARD_TONES,
   THEME_COLOR_INPUT_MODES,
   THEME_COLOR_INPUT_STATES,
-  THEME_COLOR_STATES,
   THEME_COLOR_STATE_TONES,
-  ThemeColorCardToneKey,
+  THEME_COLOR_STATES,
   ThemeColorButtonModeKey,
+  ThemeColorCardToneKey,
   ThemeColorStateKey,
   ThemeColorStateToneKey,
-} from '../system'
+} from '../v2'
 import {merge} from './merge'
 
 /**
@@ -64,44 +67,22 @@ function resolveBaseColorTones(
   return {
     ...spec,
     _hue: hue,
-    avatar: {
-      gray: merge({_hue: 'gray'}, spec.avatar?.['*'], spec.avatar?.gray),
-      blue: merge({_hue: 'blue'}, spec.avatar?.['*'], spec.avatar?.blue),
-      purple: merge({_hue: 'purple'}, spec.avatar?.['*'], spec.avatar?.purple),
-      magenta: merge({_hue: 'magenta'}, spec.avatar?.['*'], spec.avatar?.magenta),
-      red: merge({_hue: 'red'}, spec.avatar?.['*'], spec.avatar?.red),
-      orange: merge({_hue: 'orange'}, spec.avatar?.['*'], spec.avatar?.orange),
-      yellow: merge({_hue: 'yellow'}, spec.avatar?.['*'], spec.avatar?.yellow),
-      green: merge({_hue: 'green'}, spec.avatar?.['*'], spec.avatar?.green),
-      cyan: merge({_hue: 'cyan'}, spec.avatar?.['*'], spec.avatar?.cyan),
-    },
-    badge: {
-      default: {
-        _hue: inputTokens?.base?.default?._hue || hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.default,
-      },
-      primary: {
-        _hue: inputTokens?.base?.primary?._hue || hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.primary,
-      },
-      positive: {
-        _hue: inputTokens?.base?.positive?._hue || hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.positive,
-      },
-      caution: {
-        _hue: inputTokens?.base?.caution?._hue || hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.caution,
-      },
-      critical: {
-        _hue: inputTokens?.base?.critical?._hue || hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.critical,
-      },
-    },
+    avatar: COLOR_HUES.reduce((acc, hue) => {
+      return {
+        ...acc,
+        [hue]: merge({_hue: hue}, spec.avatar?.['*'], spec.avatar?.[hue]),
+      }
+    }, {} as ThemeColorAvatarTokens),
+    badge: THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
+      return {
+        ...acc,
+        [tone]: {
+          _hue: inputTokens?.base?.[tone]?._hue || hue,
+          ...spec.badge?.['*'],
+          ...spec.badge?.[tone],
+        },
+      }
+    }, {} as ThemeColorBadgeTokens),
   }
 }
 
@@ -162,44 +143,22 @@ function resolveButtonStateColorTokens(
   return {
     ...spec,
     _hue: hue,
-    avatar: {
-      gray: merge({_hue: 'gray'}, spec.avatar?.['*'], spec.avatar?.gray),
-      blue: merge({_hue: 'blue'}, spec.avatar?.['*'], spec.avatar?.blue),
-      purple: merge({_hue: 'purple'}, spec.avatar?.['*'], spec.avatar?.purple),
-      magenta: merge({_hue: 'magenta'}, spec.avatar?.['*'], spec.avatar?.magenta),
-      red: merge({_hue: 'red'}, spec.avatar?.['*'], spec.avatar?.red),
-      orange: merge({_hue: 'orange'}, spec.avatar?.['*'], spec.avatar?.orange),
-      yellow: merge({_hue: 'yellow'}, spec.avatar?.['*'], spec.avatar?.yellow),
-      green: merge({_hue: 'green'}, spec.avatar?.['*'], spec.avatar?.green),
-      cyan: merge({_hue: 'cyan'}, spec.avatar?.['*'], spec.avatar?.cyan),
-    },
-    badge: {
-      default: {
-        _hue: inputTokens?.base?.default?._hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.default,
-      },
-      primary: {
-        _hue: inputTokens?.base?.primary?._hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.primary,
-      },
-      positive: {
-        _hue: inputTokens?.base?.positive?._hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.positive,
-      },
-      caution: {
-        _hue: inputTokens?.base?.caution?._hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.caution,
-      },
-      critical: {
-        _hue: inputTokens?.base?.critical?._hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.critical,
-      },
-    },
+    avatar: COLOR_HUES.reduce((acc, hue) => {
+      return {
+        ...acc,
+        [hue]: merge({_hue: hue}, spec.avatar?.['*'], spec.avatar?.[hue]),
+      }
+    }, {} as ThemeColorAvatarTokens),
+    badge: THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
+      return {
+        ...acc,
+        [tone]: {
+          _hue: inputTokens?.base?.[tone]?._hue || hue,
+          ...spec.badge?.['*'],
+          ...spec.badge?.[tone],
+        },
+      }
+    }, {} as ThemeColorBadgeTokens),
   }
 }
 
@@ -289,43 +248,21 @@ function resolveSelectableStateColorTokens(
   return {
     ...spec,
     _hue: hue,
-    avatar: {
-      gray: merge({_hue: 'gray'}, spec.avatar?.['*'], spec.avatar?.gray),
-      blue: merge({_hue: 'blue'}, spec.avatar?.['*'], spec.avatar?.blue),
-      purple: merge({_hue: 'purple'}, spec.avatar?.['*'], spec.avatar?.purple),
-      magenta: merge({_hue: 'magenta'}, spec.avatar?.['*'], spec.avatar?.magenta),
-      red: merge({_hue: 'red'}, spec.avatar?.['*'], spec.avatar?.red),
-      orange: merge({_hue: 'orange'}, spec.avatar?.['*'], spec.avatar?.orange),
-      yellow: merge({_hue: 'yellow'}, spec.avatar?.['*'], spec.avatar?.yellow),
-      green: merge({_hue: 'green'}, spec.avatar?.['*'], spec.avatar?.green),
-      cyan: merge({_hue: 'cyan'}, spec.avatar?.['*'], spec.avatar?.cyan),
-    },
-    badge: {
-      default: {
-        _hue: inputTokens?.base?.default?._hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.default,
-      },
-      primary: {
-        _hue: inputTokens?.base?.primary?._hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.primary,
-      },
-      positive: {
-        _hue: inputTokens?.base?.positive?._hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.positive,
-      },
-      caution: {
-        _hue: inputTokens?.base?.caution?._hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.caution,
-      },
-      critical: {
-        _hue: inputTokens?.base?.critical?._hue,
-        ...spec.badge?.['*'],
-        ...spec.badge?.critical,
-      },
-    },
+    avatar: COLOR_HUES.reduce((acc, hue) => {
+      return {
+        ...acc,
+        [hue]: merge({_hue: hue}, spec.avatar?.['*'], spec.avatar?.[hue]),
+      }
+    }, {} as ThemeColorAvatarTokens),
+    badge: THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
+      return {
+        ...acc,
+        [tone]: {
+          _hue: inputTokens?.base?.[tone]?._hue || hue,
+          ...spec.badge?.['*'],
+          ...spec.badge?.[tone],
+        },
+      }
+    }, {} as ThemeColorBadgeTokens),
   }
 }

package/src/theme/config/helpers.ts

@@ -1,12 +1,12 @@
 import {
+  COLOR_CONFIG_BLEND_KEYS,
   COLOR_CONFIG_CARD_KEYS,
   COLOR_CONFIG_CARD_TONES,
-  COLOR_CONFIG_BLEND_KEYS,
   COLOR_CONFIG_STATE_KEYS,
   COLOR_CONFIG_STATE_TONES,
+  ColorConfigBlendKey,
   ColorConfigCardKey,
   ColorConfigCardTone,
-  ColorConfigBlendKey,
   ColorConfigOpacityValue,
   ColorConfigStateKey,
   ColorConfigStateTone,

package/src/theme/config/system.ts

@@ -1,13 +1,14 @@
 import {ColorHueKey, ColorTintKey} from '@sanity/color'
+
 import {
   THEME_COLOR_AVATAR_COLORS,
   THEME_COLOR_CARD_TONES,
   THEME_COLOR_INPUT_MODES,
   THEME_COLOR_INPUT_STATES,
-  THEME_COLOR_STATES,
   THEME_COLOR_STATE_TONES,
+  THEME_COLOR_STATES,
   ThemeColorBlendModeKey,
-} from '../system'
+} from '../v2'
 
 /** @public */
 export const COLOR_CONFIG_STATE_KEYS = [

package/src/theme/config/tokens/color/types.ts

@@ -1,5 +1,6 @@
 import {ColorHueKey} from '@sanity/color'
-import {ThemeColorSyntax, ThemeColorButtonModeKey} from '../../../system'
+
+import {ThemeColorButtonModeKey, ThemeColorStateToneKey, ThemeColorSyntax} from '../../../v2'
 import {
   ColorBlendModeTokenValue,
   ColorConfigCardTone,
@@ -32,15 +33,6 @@ export interface ThemeColorAvatarTokens {
   'cyan'?: ThemeColorAvatarHueTokens
 }
 
-/** @public */
-export interface ThemeColorBadgeTokens {
-  _hue?: ColorHueKey
-  bg?: ThemeColorTokenValue
-  fg?: ThemeColorTokenValue
-  dot?: ThemeColorTokenValue
-  icon?: ThemeColorTokenValue
-}
-
 /** @public */
 export interface ThemeColorBaseTokens extends ThemeColorStateTokens {
   focusRing?: ThemeColorTokenValue
@@ -64,14 +56,9 @@ export interface ThemeColorBadgeToneTokens {
 }
 
 /** @public */
-export interface ThemeColorBadgeTokens {
-  '*'?: ThemeColorBadgeToneTokens
-  'default'?: ThemeColorBadgeToneTokens
-  'primary'?: ThemeColorBadgeToneTokens
-  'positive'?: ThemeColorBadgeToneTokens
-  'caution'?: ThemeColorBadgeToneTokens
-  'critical'?: ThemeColorBadgeToneTokens
-}
+export type ThemeColorBadgeTokens = Partial<
+  Record<'*' | ThemeColorStateToneKey, ThemeColorBadgeToneTokens>
+>
 
 /** @public */
 export interface ThemeColorStateTokens {

package/src/theme/config/tokens/parseTokenKey.ts

@@ -1,4 +1,4 @@
-import {isColorButtonMode} from '../../system'
+import {isColorButtonMode} from '../../v2'
 import {
   isColorConfigBaseKey,
   isColorConfigBaseTone,

package/src/theme/config/tokens/parseTokenValue.ts

@@ -1,4 +1,4 @@
-import {isColorBlendModeValue, isColorHueKey, isColorTintKey} from '../../system'
+import {isColorBlendModeValue, isColorHueKey, isColorTintKey} from '../../v2'
 import {isColorOpacityValue, isColorValue} from '../helpers'
 import {TokenValueNode} from './types'
 

package/src/theme/config/tokens/types.ts

@@ -1,9 +1,10 @@
 import {ColorHueKey, ColorTintKey} from '@sanity/color'
-import {ThemeColorBlendModeKey, ThemeColorButtonModeKey} from '../../system'
+
+import {ThemeColorBlendModeKey, ThemeColorButtonModeKey} from '../../v2'
 import {
+  ColorConfigBlendKey,
   ColorConfigCardKey,
   ColorConfigCardTone,
-  ColorConfigBlendKey,
   ColorConfigStateKey,
   ColorConfigStateTone,
 } from '../system'

package/src/theme/config/types.ts

@@ -1,14 +1,14 @@
 import {ColorHueKey, ColorTint as ColorPaletteValue, ColorTintKey} from '@sanity/color'
+
 import {
-  ThemeAvatar_v2,
   ThemeFocusRing,
-  ThemeFontWeightKey,
   ThemeFonts,
-  ThemeInput_v2,
+  ThemeFontWeightKey,
   ThemeLayer,
   ThemeShadow,
   ThemeStyles,
-} from '../system'
+} from '../v0'
+import {ThemeAvatar_v2, ThemeInput_v2} from '../v2'
 import {ThemeColorTokens} from './tokens'
 
 /** @public */

package/src/theme/defaults/colorTokens.ts

@@ -74,6 +74,7 @@ export const defaultColorTokens: ThemeColorTokens = {
       },
     },
     'primary': {_hue: 'blue'},
+    'suggest': {_hue: 'purple'},
     'positive': {
       _hue: 'green',
       shadow: {outline: ['500/0.4', '500/0.4']},
@@ -133,7 +134,7 @@ export const defaultColorTokens: ThemeColorTokens = {
           },
         },
         'hovered': {
-          bg: ['700', '300'],
+          bg: ['600', '300'],
           border: ['700/0', '300/0'],
         },
         'pressed': {
@@ -260,11 +261,11 @@ export const defaultColorTokens: ThemeColorTokens = {
           fg: ['700', '300'],
         },
         'pressed': {
-          bg: ['100', '900'],
+          bg: ['200', '800'],
           fg: ['800', '200'],
         },
         'selected': {
-          bg: ['100', '900'],
+          bg: ['200', '800'],
           fg: ['800', '200'],
         },
         'disabled': {
@@ -367,11 +368,12 @@ export const defaultColorTokens: ThemeColorTokens = {
           },
         },
         'hovered': {
-          bg: ['50', '950'],
-          icon: ['700 70%', '400 70%'],
+          bg: ['50', '900'],
+          fg: ['800', '200'],
+          icon: ['800 70%', '300 70%'],
         },
         'pressed': {
-          bg: ['100', '900'],
+          bg: ['100', '800'],
           fg: ['800', '200'],
           icon: ['800 70%', '200 70%'],
         },

package/src/theme/defaults/config.ts

@@ -1,4 +1,4 @@
-import {RootTheme_v2} from '../system'
+import {RootTheme_v2} from '../v2'
 
 const BORDER_WIDTH = 1
 const OUTLINE_WIDTH = 0.5
@@ -31,7 +31,7 @@ export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
     popover: {zOffset: 400},
     tooltip: {zOffset: 200},
   },
-  radius: [0, 1, 5, 9, 13, 21, 33],
+  radius: [0, 1, 3, 7, 11, 15, 23, 43, 75, 127],
   shadow: [
     null,
     {umbra: [0, 0, 0, 0], penumbra: [0, 0, 0, 0], ambient: [0, 0, 0, 0]},

package/src/theme/defaults/fonts.ts

@@ -1,4 +1,4 @@
-import {ThemeFonts} from '../system'
+import {ThemeFonts} from '../v0'
 
 export const defaultThemeFonts: ThemeFonts = {
   code: {
@@ -55,10 +55,11 @@ export const defaultThemeFonts: ThemeFonts = {
   heading: {
     family:
       'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
+    featureSettings: `'liga' 1, 'calt' 1, 'ss01' 1, 'ss03' 1, 'zero' 1`,
     weights: {
-      regular: 700,
-      medium: 800,
-      semibold: 900,
+      regular: 600,
+      medium: 700,
+      semibold: 800,
       bold: 900,
     },
     sizes: [
@@ -84,7 +85,7 @@ export const defaultThemeFonts: ThemeFonts = {
         fontSize: 21,
         iconSize: 33,
         lineHeight: 29,
-        letterSpacing: 0,
+        letterSpacing: -0.25,
       },
       {
         ascenderHeight: 8,
@@ -92,7 +93,7 @@ export const defaultThemeFonts: ThemeFonts = {
         fontSize: 27,
         iconSize: 41,
         lineHeight: 35,
-        letterSpacing: 0,
+        letterSpacing: -0.5,
       },
       {
         ascenderHeight: 9.5,
@@ -100,7 +101,7 @@ export const defaultThemeFonts: ThemeFonts = {
         fontSize: 33,
         iconSize: 49,
         lineHeight: 41,
-        letterSpacing: 0,
+        letterSpacing: -1,
       },
       {
         ascenderHeight: 10.5,
@@ -108,7 +109,7 @@ export const defaultThemeFonts: ThemeFonts = {
         fontSize: 38,
         iconSize: 53,
         lineHeight: 47,
-        letterSpacing: 0,
+        letterSpacing: -1,
       },
     ],
   },
@@ -116,10 +117,10 @@ export const defaultThemeFonts: ThemeFonts = {
     family:
       'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
     weights: {
-      regular: 600,
-      medium: 700,
-      semibold: 800,
-      bold: 900,
+      regular: 500,
+      medium: 600,
+      semibold: 700,
+      bold: 800,
     },
     sizes: [
       {
@@ -131,8 +132,8 @@ export const defaultThemeFonts: ThemeFonts = {
         letterSpacing: 0.5,
       },
       {
-        ascenderHeight: 2,
-        descenderHeight: 2,
+        ascenderHeight: 1.5,
+        descenderHeight: 2.5,
         fontSize: 9.5,
         iconSize: 15,
         lineHeight: 11,
@@ -155,8 +156,8 @@ export const defaultThemeFonts: ThemeFonts = {
         letterSpacing: 0.5,
       },
       {
-        ascenderHeight: 2,
-        descenderHeight: 2,
+        ascenderHeight: 1.5,
+        descenderHeight: 2.5,
         fontSize: 13.6,
         iconSize: 21,
         lineHeight: 14,