[C-2970] Add Link, Improve Text (#3901)

AudiusProject · Aug 18, 2023 · ce441c1 · ce441c1
1 parent 72fcc88
commit ce441c1
Show file tree

Hide file tree

Showing 15 changed files with 67 additions and 26 deletions.
diff --git a/packages/stems/rollup.config.js b/packages/stems/rollup.config.js
@@ -12,7 +12,7 @@ import typescript from 'typescript'
 import pkg from './package.json'
 
 export default {
-  input: 'src/index.tsx',
+  input: 'src/index.ts',
   output: [
     {
       file: pkg.main,

diff --git a/packages/stems/src/index.tsx → packages/stems/src/index.ts b/packages/stems/src/index.tsx → packages/stems/src/index.ts
@@ -8,6 +8,7 @@ import './assets/styles/layers.css'
 
 export * from './components/Icons'
 export * from './styles/colors'
+export * from './styles/types'
 export * from './utils/styles'
 
 export {

diff --git a/packages/stems/src/styles/colors.ts b/packages/stems/src/styles/colors.ts
@@ -38,3 +38,4 @@ export type ColorValue =
   | 'accentPurple'
   | 'accentBlue'
   | 'specialLightGreen'
+  | 'darkmodeStaticWhite'
diff --git a/packages/web/src/components/data-entry/HelperText.tsx b/packages/web/src/components/data-entry/HelperText.tsx
@@ -16,7 +16,7 @@ export const HelperText = (props: HelperTextProps) => {
       <Text
         size='xSmall'
         strength='default'
-        color={error ? '--accent-red' : '--neutral-light-4'}
+        color={error ? 'accentRed' : 'neutralLight4'}
       >
         {children}
       </Text>

diff --git a/packages/web/src/components/data-entry/InputV2.tsx b/packages/web/src/components/data-entry/InputV2.tsx
@@ -89,7 +89,7 @@ export const InputV2 = (props: InputV2Props) => {
     <div className={cn(styles.inputRow, layoutStyles.row)}>
       <div className={layoutStyles.row}>
         {startAdornment ? (
-          <Text variant='label' size='large' color='--neutral-light-2'>
+          <Text variant='label' size='large' color='neutralLight2'>
             {startAdornment}
           </Text>
         ) : null}
@@ -110,7 +110,7 @@ export const InputV2 = (props: InputV2Props) => {
         />
       </div>
       {endAdornment ? (
-        <Text variant='label' size='large' color='--neutral-light-2'>
+        <Text variant='label' size='large' color='neutralLight2'>
           {endAdornment}
         </Text>
       ) : null}

diff --git a/packages/web/src/components/link/Link.module.css b/packages/web/src/components/link/Link.module.css
@@ -0,0 +1,9 @@
+.root {
+  transition: color var(--expressive);
+}
+
+.root:hover {
+  color: var(--primary);
+  text-decoration: underline !important;
+  text-decoration-color: var(--primary-light-2);
+}
diff --git a/packages/web/src/components/link/Link.tsx b/packages/web/src/components/link/Link.tsx
@@ -0,0 +1,16 @@
+import cn from 'classnames'
+import { Link as LinkBase, LinkProps as LinkBaseProps } from 'react-router-dom'
+
+import { Text } from 'components/typography'
+import { TextProps } from 'components/typography/Text'
+
+import styles from './Link.module.css'
+
+type LinkProps = LinkBaseProps & TextProps<'a'>
+
+export const Link = (props: LinkProps) => {
+  const { className, ...other } = props
+  return (
+    <Text as={LinkBase} className={cn(styles.root, className)} {...other} />
+  )
+}
diff --git a/packages/web/src/components/link/index.ts b/packages/web/src/components/link/index.ts
@@ -0,0 +1 @@
+export * from './Link'
diff --git a/packages/web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.tsx b/packages/web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.tsx
@@ -68,7 +68,7 @@ export const PremiumContentPurchaseModal = () => {
       <ModalHeader onClose={handleClose} showDismissButton>
         <Text
           variant='label'
-          color='--neutral-light-2'
+          color='neutralLight2'
           size='xLarge'
           strength='strong'
           className={styles.title}

diff --git a/...ages/web/src/components/premium-content-purchase-modal/components/PurchaseDetailsPage.tsx b/...ages/web/src/components/premium-content-purchase-modal/components/PurchaseDetailsPage.tsx
@@ -50,7 +50,7 @@ const messages = {
 
 const ContentPurchaseError = () => {
   return (
-    <Text className={styles.errorContainer} color='--accent-red'>
+    <Text className={styles.errorContainer} color='accentRed'>
       <Icon icon={IconError} size='medium' />
       {messages.error}
     </Text>

diff --git a/packages/web/src/components/typography/Text.tsx b/packages/web/src/components/typography/Text.tsx
@@ -1,40 +1,49 @@
-import { CSSProperties, ElementType, ReactNode } from 'react'
+import { ComponentProps, ElementType, ReactNode } from 'react'
 
+import {
+  ColorValue,
+  CSSCustomProperties,
+  toCSSVariableName
+} from '@audius/stems'
 import cn from 'classnames'
 import { camelCase } from 'lodash'
 
-import { getCurrentThemeColors, ThemeColor } from 'utils/theme/theme'
-
 import { variantTagMap } from './constants'
 import { TextVariant, TextSize, TextStrength } from './types'
 import styles from './typography.module.css'
 
-export type TextProps = {
+type TextOwnProps<TextComponentType extends ElementType = 'span'> = {
+  as?: TextComponentType
   className?: string
   children?: ReactNode
   variant?: TextVariant
   size?: TextSize
   strength?: TextStrength
-  color?: ThemeColor
+  color?: ColorValue
 }
 
-export const Text = (props: TextProps) => {
+export type TextProps<TextComponentType extends ElementType> =
+  TextOwnProps<TextComponentType> &
+    Omit<ComponentProps<TextComponentType>, keyof TextOwnProps>
+
+export const Text = <TextComponentType extends ElementType = 'span'>(
+  props: TextProps<TextComponentType>
+) => {
   const {
     className,
     children,
     variant = 'body',
     strength = 'default',
     size = 'medium',
-    color = '--neutral',
+    color = 'neutral',
+    as,
     ...otherProps
   } = props
 
-  const Tag: ElementType = variantTagMap[variant][size] ?? 'p'
+  const Tag: ElementType = as ?? variantTagMap[variant][size] ?? 'p'
 
-  const themeColors = getCurrentThemeColors()
-  const textColor = themeColors[color] ?? themeColors['--neutral']
-  const styleObject: CSSProperties = {
-    color: textColor
+  const styleObject: CSSCustomProperties = {
+    '--text-color': `var(${toCSSVariableName(color)})`
   }
 
   type TextClass = keyof typeof styles
@@ -46,7 +55,7 @@ export const Text = (props: TextProps) => {
 
   return (
     <Tag
-      className={cn(...variantClassNames, className)}
+      className={cn(styles.root, ...variantClassNames, className)}
       style={styleObject}
       {...otherProps}
     >

diff --git a/packages/web/src/components/typography/typography.module.css b/packages/web/src/components/typography/typography.module.css
@@ -17,6 +17,10 @@
  ```
 */
 
+.root {
+  color: var(--text-color);
+}
+
 /* Display Styles */
 .display {
   font-weight: var(--font-bold);

diff --git a/packages/web/src/pages/upload-page/components/ShareBannerNew.tsx b/packages/web/src/pages/upload-page/components/ShareBannerNew.tsx
@@ -60,10 +60,10 @@ export const ShareBannerNew = (props: ShareBannerProps) => {
         backgroundImage: `linear-gradient(315deg, rgba(91, 35, 225, 0.8) 0%, rgba(162, 47, 237, 0.8) 100%), url(${backgroundPlaceholder})`
       }}
     >
-      <Text variant='display' size='small' color='--darkmode-static-white'>
+      <Text variant='display' size='small' color='darkmodeStaticWhite'>
         {messages.uploadComplete}
       </Text>
-      <Text variant='heading' size='medium' color='--darkmode-static-white'>
+      <Text variant='heading' size='medium' color='darkmodeStaticWhite'>
         {messages.shareText}
       </Text>
       <div className={styles.buttonContainerNew}>
@@ -72,7 +72,7 @@ export const ShareBannerNew = (props: ShareBannerProps) => {
           leftIcon={<IconTwitterBird />}
           onClick={handleTwitterShare}
           text={
-            <Text variant='title' size='large' color='--secondary'>
+            <Text variant='title' size='large' color='secondary'>
               {messages.twitterButtonText}
             </Text>
           }
@@ -83,7 +83,7 @@ export const ShareBannerNew = (props: ShareBannerProps) => {
           leftIcon={<IconLink />}
           onClick={handleCopyTrackLink}
           text={
-            <Text variant='title' size='large' color='--secondary'>
+            <Text variant='title' size='large' color='secondary'>
               {messages.copyLinkButtonText}
             </Text>
           }

diff --git a/packages/web/src/pages/upload-page/fields/MultiTrackSidebar.tsx b/packages/web/src/pages/upload-page/fields/MultiTrackSidebar.tsx
@@ -57,7 +57,7 @@ export const MultiTrackSidebar = () => {
                 size='xSmall'
                 fill='accentRed'
               />
-              <Text size='xSmall' color='--accent-red'>
+              <Text size='xSmall' color='accentRed'>
                 {messages.fixErrors}
               </Text>
             </div>
@@ -140,7 +140,7 @@ const TrackRow = (props: TrackRowProps) => {
             ) : (
               <Text
                 className={styles.trackIndex}
-                color={isSelected ? '--secondary' : '--neutral'}
+                color={isSelected ? 'secondary' : 'neutral'}
               >
                 {index + 1}
               </Text>

diff --git a/packages/web/src/pages/upload-page/fields/RemixSettingsField/TrackInfo.tsx b/packages/web/src/pages/upload-page/fields/RemixSettingsField/TrackInfo.tsx
@@ -32,7 +32,7 @@ export const TrackInfo = (props: TrackInfoProps) => {
       <Text variant='body' strength='strong'>
         {track.title}
       </Text>
-      <Text variant='body' strength='strong' color='--neutral-light-2'>
+      <Text variant='body' strength='strong' color='neutralLight2'>
         {messages.by}
       </Text>
       <Text variant='body' strength='strong'>