design(tokens): revert tokens v2 fonts and colors, keep track rows

packages/harmony/README.md

@@ -60,8 +60,6 @@ Import styles exported by Harmony
 import '@audius/harmony/dist/harmony.css'
 ```
 
-`harmony.css` inlines the Avenir Next LT Pro font faces as base64. If you serve the font files yourself, import `@audius/harmony/dist/harmony-no-fonts.css` instead and declare the `@font-face` rules in your app.
-
 Setup the ThemeProvider exported by Harmony
 
 ```tsx

packages/harmony/rollup.config.mjs

@@ -8,8 +8,6 @@ import svgr from '@svgr/rollup'
 import postcss from 'rollup-plugin-postcss'
 import rollupTypescript from 'rollup-plugin-typescript2'
 
-import { NO_FONTS_CSS, harmonyCssWithFonts } from './rollup.fonts.mjs'
-
 const cjsRequire = createRequire(import.meta.url)
 const pkg = JSON.parse(readFileSync(new URL('./package.json', import.meta.url), 'utf8'))
 const tspCompiler = cjsRequire('ts-patch/compiler')
@@ -44,10 +42,9 @@ export default {
     }),
     postcss({
       minimize: true,
-      extract: NO_FONTS_CSS,
+      extract: 'harmony.css',
       modules: true
     }),
-    harmonyCssWithFonts(),
     svgr(),
     image({
       exclude: /\.svg$/ // Exclude SVG files since they're handled by SVGR

packages/harmony/rollup.css.config.mjs

@@ -3,8 +3,6 @@ import { createRequire } from 'node:module'
 import postcss from 'rollup-plugin-postcss'
 import rollupTypescript from 'rollup-plugin-typescript2'
 
-import { NO_FONTS_CSS, harmonyCssWithFonts } from './rollup.fonts.mjs'
-
 const cjsRequire = createRequire(import.meta.url)
 const tspCompiler = cjsRequire('ts-patch/compiler')
 
@@ -28,11 +26,10 @@ export default {
     }),
     postcss({
       minimize: true,
-      extract: NO_FONTS_CSS,
+      extract: 'harmony.css',
       modules: true,
       inject: false
-    }),
-    harmonyCssWithFonts()
+    })
   ],
   // External everything since we only care about CSS extraction
   external: () => true,

packages/harmony/src/components/button/Button/Button.tsx

@@ -41,15 +41,6 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     const isSmallOrXs = size === 'small' || size === 'xs'
 
-    // static.white is dark in Neue dark, but the Neue accent needs light text.
-    // Custom colors (e.g. the light green Buy button) keep dark text.
-    const onAccent =
-      type === 'default-dark'
-        ? themeColors.static.staticWhite
-        : themeColors.static.white
-    const onPrimary = color || hexColor ? themeColors.static.white : onAccent
-    const onPrimaryHover = hoverColor ? themeColors.static.white : onPrimary
-
     // Size Styles
     const smallStyles: CSSObject = {
       gap: spacing.xs,
@@ -100,9 +91,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     // Variant Styles
     const primaryStyles: CSSObject = {
-      '&:hover': { color: onPrimaryHover },
+      '&:hover': { color: themeColors.static.white },
 
-      ...((_isHovered || _isPressed) && { color: onPrimaryHover }),
+      ...((_isHovered || _isPressed) && { color: themeColors.static.white }),
       ...(disabled && {
         background: themeColors.neutral.n150,
         boxShadow: 'none'
@@ -111,7 +102,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     const secondaryHoverStyles: CSSObject = {
       background: themeColors.primary.primary,
-      color: onAccent
+      color: themeColors.static.white
     }
     const secondaryStyles: CSSObject = {
       background: 'transparent',
@@ -183,7 +174,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     const buttonCss: CSSObject = {
       background: themeColors.primary.primary,
-      color: onPrimary,
+      color: themeColors.static.white,
       boxSizing: 'border-box',
       border: 'none',
       borderRadius: rounded ? cornerRadius['2xl'] : cornerRadius.s,

packages/harmony/src/components/input/SelectablePill/SelectablePill.tsx

@@ -36,11 +36,7 @@ export const SelectablePill = (props: SelectablePillProps) => {
 
   const hoverCss: CSSObject = {
     backgroundColor: theme.color.secondary.s200,
-    // s200 is the dark accent in Neue dark, where static.white is dark too.
-    color:
-      theme.type === 'default-dark'
-        ? theme.color.static.staticWhite
-        : theme.color.static.white,
+    color: theme.color.static.white,
     border: `1px solid ${theme.color.secondary.secondary}`,
     ...(size === 'large' && {
       boxShadow: 'none'

packages/harmony/src/components/nav-item/NavItem.tsx

@@ -3,7 +3,6 @@ import { useMemo } from 'react'
 import { useTheme } from '@emotion/react'
 
 import { motion } from '../../foundations/motion'
-import { isNeueTheme } from '../../foundations/theme/types'
 import { Flex } from '../layout/Flex'
 import { NotificationCount } from '../notification-count'
 import { Text } from '../text/Text'
@@ -28,19 +27,14 @@ export const NavItem = ({
   isChild = false,
   ...props
 }: NavItemProps) => {
-  const { color, type } = useTheme()
-  const isNeue = isNeueTheme(type)
+  const { color } = useTheme()
 
   const hasLeftIcon = !!LeftIcon
   const hasRightIcon = !!RightIcon
 
-  const backgroundColor = isSelected
-    ? isNeue
-      ? color.background.surface2
-      : color.secondary.s400
-    : undefined
+  const backgroundColor = isSelected ? color.secondary.s400 : undefined
 
-  const textAndIconColor = isSelected && !isNeue ? 'white' : 'default'
+  const textAndIconColor = isSelected ? 'white' : 'default'
   const insetBorderColor = isSelected
     ? 'none'
     : `inset 0 0 0 1px ${color.border.default}`
@@ -52,20 +46,13 @@ export const NavItem = ({
 
     if (hasNotification && !!icon) {
       return (
-        <NotificationCount size='s' isSelected={isSelected && !isNeue}>
+        <NotificationCount size='s' isSelected={isSelected}>
           {icon}
         </NotificationCount>
       )
     }
     return icon
-  }, [
-    hasNotification,
-    hasLeftIcon,
-    LeftIcon,
-    textAndIconColor,
-    isSelected,
-    isNeue
-  ])
+  }, [hasNotification, hasLeftIcon, LeftIcon, textAndIconColor, isSelected])
 
   return (
     <Flex

packages/harmony/src/components/text/Text.tsx

@@ -10,16 +10,13 @@ import {
 import { Theme, useTheme } from '@emotion/react'
 import { Slot } from '@radix-ui/react-slot'
 
-import { isNeueTheme } from '../../foundations/theme/types'
-
 import { bodyLineHeightMap, variantStylesMap, variantTagMap } from './constants'
 import { TextContext } from './textContext'
 import type { TextProps } from './types'
 
 const getColorCss = (color: TextProps['color'], theme: Theme) => {
   if (!color) return {}
   if (color === 'heading') {
-    if (isNeueTheme(theme.type)) return { color: theme.color.text.heading }
     return {
       color: theme.color.secondary.secondary,
       WebkitTextFillColor: 'transparent',
@@ -102,17 +99,8 @@ export const Text = forwardRef(
     const variantConfig = variant && variantStylesMap[variant]
     const hasSubscripts = containsSubscripts(children)
 
-    const isDisplayFace = variant === 'display' || variant === 'heading'
-
     const css = {
-      fontFamily: isDisplayFace
-        ? theme.typography.fontDisplay
-        : theme.typography.font,
-      // Apps that force `font-family: var(--harmony-font-family)` globally
-      // still get the display face on display and heading text.
-      ...(isDisplayFace && {
-        '--harmony-font-family': theme.typography.fontDisplay
-      }),
+      fontFamily: theme.typography.font,
       position: 'relative',
       boxSizing: 'border-box',
       ...getColorCss(color, theme),

packages/harmony/src/components/text/constants.ts

@@ -27,32 +27,31 @@ export const variantTagMap = {
 }
 
 export const variantStylesMap = {
-  // Tokens v2: four weights (400/500/600/700). Heavy (900) is no longer used.
   display: {
     fontSize: { s: '6xl', m: '7xl', l: '8xl', xl: '9xl' },
     lineHeight: { s: '3xl', m: '4xl', l: '5xl', xl: '6xl' },
-    fontWeight: { default: 'bold', strong: 'bold' }
+    fontWeight: { default: 'bold', strong: 'heavy' }
   },
   heading: {
     fontSize: { s: 'xl', m: '2xl', l: '3xl', xl: '5xl' },
     lineHeight: { s: 'l', m: 'xl', l: 'hl', xl: '2xl' },
-    fontWeight: { default: 'bold', strong: 'bold' }
+    fontWeight: { default: 'bold', strong: 'heavy' }
   },
   title: {
     fontSize: { xs: 'xs', s: 's', m: 'm', l: 'l' },
     lineHeight: { xs: 's', s: 'm', m: 'l', l: 'l' },
-    fontWeight: { weak: 'medium', default: 'demiBold', strong: 'bold' }
+    fontWeight: { weak: 'demiBold', default: 'bold', strong: 'heavy' }
   },
   label: {
     fontSize: { xs: '2xs', s: 'xs', m: 's', l: 'm', xl: 'xl' },
     lineHeight: { xs: 'xs', s: 'xs', m: 's', l: 's', xl: 'l' },
-    fontWeight: { default: 'demiBold', strong: 'bold' },
+    fontWeight: { default: 'bold', strong: 'heavy' },
     css: { textTransform: 'uppercase' as const, letterSpacing: 0.5 }
   },
   body: {
     fontSize: { xs: 'xs', s: 's', m: 'm', l: 'l' },
     lineHeight: { xs: 's', s: 'm', m: 'l', l: 'l' },
-    fontWeight: { default: 'regular', strong: 'demiBold' }
+    fontWeight: { default: 'medium', strong: 'demiBold' }
   }
 }
 

packages/harmony/src/components/track-row/TrackRow.tsx

@@ -175,8 +175,6 @@ export const TrackRow = forwardRef<HTMLDivElement, TrackRowProps>(
     })
 
     const rankFace = css({
-      fontFamily: typography.fontDisplay,
-      '--harmony-font-family': typography.fontDisplay,
       transition: `opacity ${motion.hover}`
     })
 

packages/harmony/src/css-entry.ts

@@ -2,6 +2,7 @@
 
 // Only imports CSS files, no TypeScript/JavaScript exports
 import './foundations/reset/reset.css'
+import './foundations/typography/avenir.css'
 import './foundations/typography/fonts.css'
 import './foundations/spacing/spacing.css'
 import './foundations/color/primitive.css'