Slim up theme interfaces even more

src/buttons/src/Button.js

@@ -35,6 +35,14 @@ const styles = {
   flexWrap: 'nowrap'
 }
 
+const getIconSizeForButton = height => {
+  if (height <= 28) return 12
+  if (height <= 32) return 14
+  if (height <= 40) return 16
+  if (height <= 48) return 18
+  return 20
+}
+
 const Button = memo(
   forwardRef(function Button(props, ref) {
     const {
@@ -62,12 +70,9 @@ const Button = memo(
     } = props
 
     const theme = useTheme()
+    const { tokens } = theme
     const themedClassName = useButtonAppearance(appearance)
-
-    const textSize = theme.getTextSizeForControlHeight(height)
-
-    const borderRadius = theme.getBorderRadiusForControlHeight(height)
-    const iconSize = theme.getIconSizeForButton(height)
+    const iconSize = getIconSizeForButton(height)
 
     const padding = Math.round(height / 2)
     const pr = paddingRight !== undefined ? paddingRight : padding // eslint-disable-line no-negated-condition
@@ -78,10 +83,10 @@ const Button = memo(
         is="button"
         ref={ref}
         className={cx(themedClassName, className)}
-        borderTopRightRadius={borderRadius}
-        borderBottomRightRadius={borderRadius}
-        borderTopLeftRadius={borderRadius}
-        borderBottomLeftRadius={borderRadius}
+        borderTopRightRadius={tokens.borderRadius}
+        borderBottomRightRadius={tokens.borderRadius}
+        borderTopLeftRadius={tokens.borderRadius}
+        borderBottomLeftRadius={tokens.borderRadius}
         paddingTop={paddingTop}
         paddingBottom={paddingBottom}
         paddingRight={pr}
@@ -90,7 +95,7 @@ const Button = memo(
         marginRight={0} // Removes weird margins in Safari
         marginTop={0} // Removes weird margins in Safari
         marginBottom={0} // Removes weird margins in Safari
-        size={textSize}
+        size={300}
         color={null} // Prevent the Text color overriding the glamor appearanceStyle color
         height={height}
         lineHeight={`${height}px`}

src/file-picker/test/snapshots/index.js.md

@@ -35,7 +35,7 @@ Generated by [AVA](https://ava.li).
         value=""
       />
       <button
-        className="css-5bkdxh evergreen-file-picker-button ub-fnt-sze_12px ub-f-wght_500 ub-ln-ht_32px ub-ltr-spc_0 ub-fnt-fam_b77syt ub-btrr_3px ub-bbrr_3px ub-btlr_0px ub-bblr_0px ub-pt_0px ub-pb_0px ub-pr_16px ub-pl_16px ub-ml_0px ub-mr_0px ub-mt_0px ub-mb_0px ub-h_32px ub-pst_relative ub-dspl_inline-flex ub-algn-itms_center ub-flx-wrap_nowrap ub-flx-srnk_0 ub-box-szg_border-box"
+        className="css-5bkdxh evergreen-file-picker-button ub-fnt-sze_12px ub-f-wght_500 ub-ln-ht_32px ub-ltr-spc_0 ub-fnt-fam_b77syt ub-btrr_4px ub-bbrr_4px ub-btlr_0px ub-bblr_0px ub-pt_0px ub-pb_0px ub-pr_16px ub-pl_16px ub-ml_0px ub-mr_0px ub-mt_0px ub-mb_0px ub-h_32px ub-pst_relative ub-dspl_inline-flex ub-algn-itms_center ub-flx-wrap_nowrap ub-flx-srnk_0 ub-box-szg_border-box"
         disabled={undefined}
         onBlur={Function {}}
         onClick={Function {}}

src/layers/src/Pane.js

@@ -42,7 +42,7 @@ const Pane = memo(
         ':hover': {
           ...(css[':hover'] || {}),
           transform: 'translateY(-2px)',
-          boxShadow: theme.getElevation(hoverElevation)
+          boxShadow: theme.elevations[hoverElevation]
         }
       }
     }
@@ -54,7 +54,7 @@ const Pane = memo(
         ':active': {
           ...(css[':active'] || {}),
           transform: 'translateY(-1px)',
-          boxShadow: theme.getElevation(activeElevation)
+          boxShadow: theme.elevations[activeElevation]
         }
       }
     }
@@ -101,6 +101,14 @@ const Pane = memo(
       getBorderSideProperty({ borderSideProperty, border })
     )
 
+    // NOTE: Move to tokens - otherwise, this is a breaking change
+    const themedBackground = Object.prototype.hasOwnProperty.call(
+      theme.colors.background,
+      background
+    )
+      ? theme.colors.background[background]
+      : background
+
     const className = cx(
       props.className,
       glamorCss({
@@ -118,7 +126,7 @@ const Pane = memo(
         borderBottom={_borderBottom}
         borderLeft={_borderLeft}
         boxShadow={elevationStyle}
-        background={theme.getBackground(background)}
+        background={themedBackground}
         {...restProps}
         className={className}
       />

src/search-input/src/SearchInput.js

@@ -2,12 +2,18 @@ import React, { memo, forwardRef } from 'react'
 import Box, { splitBoxProps } from 'ui-box'
 import { SearchIcon } from '../../icons'
 import { TextInput } from '../../text-input'
-import { useTheme } from '../../theme'
 import { StackingOrder } from '../../constants'
 
+const getIconSizeForInput = height => {
+  if (height <= 28) return 12
+  if (height <= 32) return 14
+  if (height <= 40) return 16
+  if (height <= 48) return 18
+  return 20
+}
+
 const SearchInput = memo(
   forwardRef(function SearchInput(props, ref) {
-    const theme = useTheme()
     const {
       appearance = 'default',
       disabled,
@@ -16,7 +22,7 @@ const SearchInput = memo(
     } = props
     const { matchedProps, remainingProps } = splitBoxProps(restProps)
     const { width } = matchedProps
-    const iconSize = theme.getIconSizeForInput(height)
+    const iconSize = getIconSizeForInput(height)
 
     return (
       <Box

src/select/src/Select.js

@@ -6,9 +6,16 @@ import { CaretDownIcon } from '../../icons'
 import { useTheme } from '../../theme'
 import useButtonAppearance from '../../theme/src/hooks/useButtonAppearance'
 
+const getIconSizeForSelect = height => {
+  if (height <= 28) return 12
+  if (height <= 32) return 14 // Slightly bigger than getIconSizeForButton
+  if (height <= 40) return 16
+  if (height <= 48) return 18
+  return 20
+}
+
 const Select = memo(
   forwardRef(function Select(props, ref) {
-    const theme = useTheme()
     const {
       id,
       name,
@@ -25,10 +32,10 @@ const Select = memo(
       ...restProps
     } = props
 
+    const theme = useTheme()
+    const { tokens } = theme
     const themedClassName = useButtonAppearance(appearance)
-    const textSize = theme.getTextSizeForControlHeight(height)
-    const borderRadius = theme.getBorderRadiusForControlHeight(height)
-    const iconSize = theme.getIconSizeForSelect(height)
+    const iconSize = getIconSizeForSelect(height)
     const iconMargin = height >= 36 ? 12 : 8
 
     return (
@@ -53,8 +60,8 @@ const Select = memo(
           autoFocus={autoFocus}
           disabled={disabled}
           aria-invalid={String(isInvalid)}
-          size={textSize}
-          borderRadius={borderRadius}
+          size={300}
+          borderRadius={tokens.borderRadius}
           textTransform="default"
           paddingLeft={Math.round(height / 3.2)}
           // Provide enough space for auto-sizing select including the icon

src/ssr/test/snapshots/extractStyles.js.md

@@ -80,20 +80,20 @@ Generated by [AVA](https://ava.li).
             'ub-fnt-fam_b77syt',
           ],
           [
-            'borderTopRightRadius3',
-            'ub-btrr_3px',
+            'borderTopRightRadius4',
+            'ub-btrr_4px',
           ],
           [
-            'borderBottomRightRadius3',
-            'ub-bbrr_3px',
+            'borderBottomRightRadius4',
+            'ub-bbrr_4px',
           ],
           [
-            'borderTopLeftRadius3',
-            'ub-btlr_3px',
+            'borderTopLeftRadius4',
+            'ub-btlr_4px',
           ],
           [
-            'borderBottomLeftRadius3',
-            'ub-bblr_3px',
+            'borderBottomLeftRadius4',
+            'ub-bblr_4px',
           ],
           [
             'paddingTop0',
@@ -169,17 +169,17 @@ Generated by [AVA](https://ava.li).
       .ub-fnt-fam_b77syt {␊
         font-family: "SF UI Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";␊
       }␊
-      .ub-btrr_3px {␊
-        border-top-right-radius: 3px;␊
+      .ub-btrr_4px {␊
+        border-top-right-radius: 4px;␊
       }␊
-      .ub-bbrr_3px {␊
-        border-bottom-right-radius: 3px;␊
+      .ub-bbrr_4px {␊
+        border-bottom-right-radius: 4px;␊
       }␊
-      .ub-btlr_3px {␊
-        border-top-left-radius: 3px;␊
+      .ub-btlr_4px {␊
+        border-top-left-radius: 4px;␊
       }␊
-      .ub-bblr_3px {␊
-        border-bottom-left-radius: 3px;␊
+      .ub-bblr_4px {␊
+        border-bottom-left-radius: 4px;␊
       }␊
       .ub-pt_0px {␊
         padding-top: 0px;␊
@@ -233,7 +233,7 @@ Generated by [AVA](https://ava.li).
       hydrationScript: <script
         dangerouslySetInnerHTML={
           {
-            __html: '{"uiBoxCache":[["fontSize12px","ub-fnt-sze_12px"],["fontWeight500","ub-f-wght_500"],["lineHeight32px","ub-ln-ht_32px"],["letterSpacing0","ub-ltr-spc_0"],["fontFamily\\"SF UI Text\\", -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\"","ub-fnt-fam_b77syt"],["borderTopRightRadius3","ub-btrr_3px"],["borderBottomRightRadius3","ub-bbrr_3px"],["borderTopLeftRadius3","ub-btlr_3px"],["borderBottomLeftRadius3","ub-bblr_3px"],["paddingTop0","ub-pt_0px"],["paddingBottom0","ub-pb_0px"],["paddingRight16","ub-pr_16px"],["paddingLeft16","ub-pl_16px"],["marginLeft0","ub-ml_0px"],["marginRight0","ub-mr_0px"],["marginTop0","ub-mt_0px"],["marginBottom0","ub-mb_0px"],["height32","ub-h_32px"],["positionrelative","ub-pst_relative"],["displayinline-flex","ub-dspl_inline-flex"],["alignItemscenter","ub-algn-itms_center"],["flexWrapnowrap","ub-flx-wrap_nowrap"],["boxSizingborder-box","ub-box-szg_border-box"]],"glamorIds":["ng405l","fv6wzy","11r1ktn","5bkdxh"]}',
+            __html: '{"uiBoxCache":[["fontSize12px","ub-fnt-sze_12px"],["fontWeight500","ub-f-wght_500"],["lineHeight32px","ub-ln-ht_32px"],["letterSpacing0","ub-ltr-spc_0"],["fontFamily\\"SF UI Text\\", -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\"","ub-fnt-fam_b77syt"],["borderTopRightRadius4","ub-btrr_4px"],["borderBottomRightRadius4","ub-bbrr_4px"],["borderTopLeftRadius4","ub-btlr_4px"],["borderBottomLeftRadius4","ub-bblr_4px"],["paddingTop0","ub-pt_0px"],["paddingBottom0","ub-pb_0px"],["paddingRight16","ub-pr_16px"],["paddingLeft16","ub-pl_16px"],["marginLeft0","ub-ml_0px"],["marginRight0","ub-mr_0px"],["marginTop0","ub-mt_0px"],["marginBottom0","ub-mb_0px"],["height32","ub-h_32px"],["positionrelative","ub-pst_relative"],["displayinline-flex","ub-dspl_inline-flex"],["alignItemscenter","ub-algn-itms_center"],["flexWrapnowrap","ub-flx-wrap_nowrap"],["boxSizingborder-box","ub-box-szg_border-box"]],"glamorIds":["ng405l","fv6wzy","11r1ktn","5bkdxh"]}',
           }
         }
         id="evergreen-hydrate"

src/tabs/src/Tab.js

@@ -2,19 +2,16 @@ import PropTypes from 'prop-types'
 import React, { forwardRef, memo } from 'react'
 import safeInvoke from '../../lib/safe-invoke'
 import warning from '../../lib/warning'
-import { useTheme } from '../../theme'
 import useTabApperance from '../../theme/src/hooks/useTabApperance'
 import { Text } from '../../typography'
 
 const noop = () => {}
 
 const Tab = memo(
   forwardRef(function Tab(props, ref) {
-    const theme = useTheme()
-
     const {
-      appearance='secondary',
-      direction='horizontal',
+      appearance = 'secondary',
+      direction = 'horizontal',
       disabled = false,
       height = 28,
       is = 'span',
@@ -47,8 +44,6 @@ const Tab = memo(
       )
     }
 
-    const textSize = theme.getTextSizeForControlHeight(height)
-
     let elementBasedProps
     if (disabled) {
       elementBasedProps = {
@@ -80,7 +75,7 @@ const Tab = memo(
       <Text
         className={tabClassName}
         is={is}
-        size={textSize}
+        size={300}
         height={height}
         ref={ref}
         tabIndex={0}

src/tag-input/src/TagInput.js

@@ -44,8 +44,6 @@ const TagInput = memo(
       inputRef,
       ...rest
     } = props
-    const theme = useTheme()
-
     const [inputValue, setInputValue] = useState('')
     const [isFocused, setIsFocused] = useState(false)
     const id = useId('TagInput')
@@ -151,16 +149,15 @@ const TagInput = memo(
       )
     }
 
+    const { tokens } = useTheme()
     const themedContainerClassName = useTagInputAppearance()
     const themedInputClassName = useInputAppearance('none')
-    const textSize = theme.getTextSizeForControlHeight(height)
-    const borderRadius = theme.getBorderRadiusForControlHeight(height)
 
     return (
       <Box
         aria-disabled={disabled || undefined}
         aria-activedescendant={isFocused ? id : undefined}
-        borderRadius={borderRadius}
+        borderRadius={tokens.borderRadius}
         className={cx(themedContainerClassName, className)}
         paddingX={Math.round(height / 2.6)}
         paddingY="2px"
@@ -176,7 +173,7 @@ const TagInput = memo(
           disabled={disabled}
           flexGrow="1"
           height={height - 4}
-          size={textSize}
+          size={300}
           type="text"
           value={inputValue}
           {...inputProps}

src/theme/src/themes/v5/foundational-styles/tokens.js

@@ -271,6 +271,8 @@ export default {
   paragraph,
   headings,
   fills,
+  // Border radius used across input components
+  borderRadius: 4,
   primary: {
     base: colors.blue500,
     hover: colors.blue600,

src/theme/src/themes/v5/index.js

@@ -56,22 +56,7 @@ import {
  * ---
  * These ARE REQUIRED for Evergreen to work.
  */
-import {
-  getBorderRadiusForControlHeight,
-  getTextSizeForControlHeight,
-  getIconSizeForButton,
-  getIconSizeForInput,
-  getIconSizeForSelect,
-  getIconSizeForIconButton,
-  getBackground,
-  getElevation,
-  getIconColor,
-  getHeadingStyle,
-  getTextStyle,
-  getParagraphStyle,
-  getFontFamily,
-  getTextColor
-} from './theme-helpers'
+import { getIconSizeForIconButton, getElevation } from './theme-helpers'
 
 export default {
   // Foundational Styles.
@@ -94,20 +79,8 @@ export default {
   getCodeProps,
 
   // Theme Helpers.
-  getBorderRadiusForControlHeight,
-  getTextSizeForControlHeight,
-  getIconSizeForButton,
-  getIconSizeForInput,
-  getIconSizeForSelect,
   getIconSizeForIconButton,
-  getBackground,
   getElevation,
-  getIconColor,
-  getHeadingStyle,
-  getTextStyle,
-  getParagraphStyle,
-  getFontFamily,
-  getTextColor,
 
   // Component-specific
   buttons,

src/theme/src/themes/v6/component-specific/index.js

@@ -8,7 +8,6 @@ export { default as getTextDropdownButtonClassName } from './getTextDropdownButt
 export { default as getTabClassName } from './getTabClassName'
 export { default as getRowClassName } from './getRowClassName'
 export { default as getMenuItemClassName } from './getMenuItemClassName'
-export { default as getSelectClassName } from './getSelectClassName'
 export { default as getTableCellClassName } from './getTableCellClassName'
 
 // Props Getters.

src/theme/src/themes/v6/foundational-styles/tokens.js

@@ -271,6 +271,8 @@ export default {
   paragraph,
   headings,
   fills,
+  // Border radius used across input components
+  borderRadius: 4,
   primary: {
     base: colors.blue500,
     hover: colors.blue600,