[c-5523] Update inverse color, fix segmented control

packages/harmony/src/components/segmented-control/SegmentedControl.tsx

@@ -18,18 +18,29 @@ import { SegmentedControlProps } from './types'
 export const SegmentedControl = <T extends string>(
   props: SegmentedControlProps<T>
 ) => {
-  const optionRefs = useRef(
-    props.options.map((_) => createRef<HTMLLabelElement>())
-  )
-  const [selected, setSelected] = useState(props.options[0].key)
+  const {
+    options,
+    selected,
+    onSelectOption,
+    className,
+    fullWidth,
+    isMobile,
+    disabled,
+    label,
+    'aria-labelledby': ariaLabelledBy,
+    equalWidth,
+    forceRefreshAfterMs
+  } = props
+  const optionRefs = useRef(options.map((_) => createRef<HTMLLabelElement>()))
+  const [localSelected, setLocalSelected] = useState(options[0].key)
   const [maxOptionWidth, setMaxOptionWidth] = useState(0)
 
-  const selectedOption = props.selected || selected
+  const selectedOption = selected || localSelected
 
   const onSetSelected = (option: T) => {
     // Call props function if controlled
-    if (props.onSelectOption) props.onSelectOption(option)
-    setSelected(option)
+    if (onSelectOption) onSelectOption(option)
+    setLocalSelected(option)
   }
 
   const [tabProps, tabApi] = useSpring(() => ({
@@ -55,12 +66,12 @@ export const SegmentedControl = <T extends string>(
   useEffect(() => {
     setTimeout(() => {
       setForceRefresh(!forceRefresh)
-    }, props.forceRefreshAfterMs)
+    }, forceRefreshAfterMs)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   useEffect(() => {
-    let selectedRefIdx = props.options.findIndex(
+    let selectedRefIdx = options.findIndex(
       (option) => option.key === selectedOption
     )
     if (selectedRefIdx === -1) selectedRefIdx = 0
@@ -73,32 +84,33 @@ export const SegmentedControl = <T extends string>(
       to: { left: `${left}px`, width: `${width}px` }
     })
   }, [
-    props.options,
-    props.equalWidth,
+    options,
+    equalWidth,
     selectedOption,
-    props.selected,
-    tabApi,
     selected,
+    tabApi,
+    localSelected,
     optionRefs,
     bounds,
     forceRefresh
   ])
 
   return (
     <div
-      className={cn(styles.tabs, props.className, {
-        [styles.containerFullWidth]: !!props.fullWidth,
-        [styles.isMobile]: props.isMobile,
-        [styles.disabled]: props.disabled
+      className={cn(styles.tabs, className, {
+        [styles.containerFullWidth]: !!fullWidth,
+        [styles.isMobile]: isMobile,
+        [styles.disabled]: disabled
       })}
       role='radiogroup'
-      aria-label={props.label}
-      aria-labelledby={props['aria-labelledby']}
+      aria-label={label}
+      aria-labelledby={ariaLabelledBy}
     >
       <animated.div className={styles.tabBackground} style={tabProps} />
-      {props.options.map((option, idx) => {
-        const isOptionDisabled = props.disabled || option.disabled
+      {options.map((option, idx) => {
+        const isOptionDisabled = disabled || option.disabled
         const isSelected = option.key === selectedOption
+        console.log('isSelectedd', isSelected, option.key, selectedOption)
 
         return (
           <Fragment key={option.key}>
@@ -109,12 +121,12 @@ export const SegmentedControl = <T extends string>(
                   : optionRefs.current[idx]
               }
               className={cn(styles.tab, {
-                [styles.tabFullWidth]: !!props.fullWidth,
-                [styles.disabled]: !props.disabled && option.disabled,
-                [styles.isMobile]: props.isMobile
+                [styles.tabFullWidth]: !!fullWidth,
+                [styles.disabled]: !disabled && option.disabled,
+                [styles.isMobile]: isMobile
               })}
               style={
-                props.equalWidth && maxOptionWidth
+                equalWidth && maxOptionWidth
                   ? { width: `${maxOptionWidth}px` }
                   : undefined
               }
@@ -137,16 +149,16 @@ export const SegmentedControl = <T extends string>(
                 {option.text}
               </Text>
             </label>
-            {idx !== props.options.length - 1 ? (
+            {idx !== options.length - 1 ? (
               <div
                 className={cn(styles.separator, {
                   [styles.invisible]:
                     // Hide separator right of the selected option
                     selectedOption === option.key ||
                     // Hide separator right of the last option
-                    idx === props.options.length - 1 ||
+                    idx === options.length - 1 ||
                     // Hide separator right of an option if the next one is selected
-                    selectedOption === props.options[idx + 1].key
+                    selectedOption === options[idx + 1].key
                 })}
               />
             ) : null}

packages/harmony/src/foundations/color/primitive-v2.css

@@ -28,7 +28,7 @@
 
   /* Neutral Colors */
   --harmony-neutral: #6c6780ff;
-  --harmony-n-25: #fefefeff;
+  --harmony-n-25: #fafafaff;
   --harmony-n-50: #f7f7f8ff;
   --harmony-n-100: #efeff1ff;
   --harmony-n-150: #e7e7eaff;
@@ -79,7 +79,7 @@ html[data-theme='day-v2'] {
 
   /* Neutral Colors */
   --harmony-neutral: #6c6780ff;
-  --harmony-n-25: #fefefeff;
+  --harmony-n-25: #fafafaff;
   --harmony-n-50: #f7f7f8ff;
   --harmony-n-100: #efeff1ff;
   --harmony-n-150: #e7e7eaff;

packages/harmony/src/foundations/color/primitiveV2.ts

@@ -26,7 +26,7 @@ export const primitiveThemeV2 = {
       secondary: '#7E1BCCFF'
     },
     neutral: {
-      n25: '#FEFEFEFF',
+      n25: '#FAFAFAFF',
       n50: '#F7F7F8FF',
       n100: '#EFEFF1FF',
       n150: '#E7E7EAFF',

packages/harmony/src/foundations/color/semanticV2.ts

@@ -1,14 +1,20 @@
+import { Theme } from '../theme/types'
+
 import type { PrimitiveColorsV2 } from './primitiveV2'
 import { primitiveThemeV2 } from './primitiveV2'
 
-const createSemanticThemeV2 = (primitives: PrimitiveColorsV2) => ({
+const createSemanticThemeV2 = (
+  theme: Theme,
+  primitives: PrimitiveColorsV2
+) => ({
   text: {
     default: primitives.neutral.n800,
     subdued: primitives.neutral.n400,
     disabled: primitives.neutral.n150,
     link: primitives.primary.p500,
     accent: primitives.secondary.s300,
-    inverse: primitives.special.white,
+    inverse:
+      theme === 'day' ? primitives.neutral.n950 : primitives.special.white,
 
     // Legacy compatibility
     heading: primitives.special.gradient,
@@ -26,7 +32,8 @@ const createSemanticThemeV2 = (primitives: PrimitiveColorsV2) => ({
     disabled: primitives.neutral.n150,
     link: primitives.primary.p500,
     accent: primitives.secondary.s300,
-    inverse: primitives.special.white,
+    inverse:
+      theme === 'day' ? primitives.neutral.n950 : primitives.special.white,
 
     // Legacy compatibility
     heading: primitives.special.gradient,
@@ -47,7 +54,7 @@ const createSemanticThemeV2 = (primitives: PrimitiveColorsV2) => ({
   background: {
     default: primitives.special.background,
     surface1: primitives.neutral.n25,
-    surface2: primitives.neutral.n100,
+    surface2: primitives.neutral.n50,
     white: primitives.special.white,
 
     // Legacy compatibility
@@ -71,9 +78,9 @@ const createSemanticThemeV2 = (primitives: PrimitiveColorsV2) => ({
 })
 
 export const semanticThemeV2 = {
-  day: createSemanticThemeV2(primitiveThemeV2.day),
-  dark: createSemanticThemeV2(primitiveThemeV2.dark),
-  matrix: createSemanticThemeV2(primitiveThemeV2.matrix)
+  day: createSemanticThemeV2('day', primitiveThemeV2.day),
+  dark: createSemanticThemeV2('dark', primitiveThemeV2.dark),
+  matrix: createSemanticThemeV2('matrix', primitiveThemeV2.matrix)
 }
 
 export type SemanticColorsV2 = typeof semanticThemeV2.day

packages/web/src/pages/upload-page/components/ShareBanner.tsx

@@ -136,12 +136,12 @@ export const ShareBanner = (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' tag='h3' size='s' color='staticWhite'>
+      <Text variant='display' tag='h3' size='s' color='staticStaticWhite'>
         {messages.uploadComplete}
       </Text>
       {!isUnlistedTrack ? (
         <>
-          <Text variant='heading' size='m' color='staticWhite'>
+          <Text variant='heading' size='m' color='staticStaticWhite'>
             {messages.shareText(uploadType)}
           </Text>
           <div className={styles.buttonContainer}>

packages/web/src/pages/upload-page/pages/SelectPage.tsx

@@ -29,7 +29,7 @@ export const SelectPage = (props: SelectPageProps) => {
 
   const [tracks, setTracks] = useState(formState.tracks ?? [])
   const [uploadType, setUploadType] = useState(
-    formState.uploadType ?? UploadType.INDIVIDUAL_TRACK
+    formState.uploadType ?? UploadType.INDIVIDUAL_TRACKS
   )
   const [uploadTrackError, setUploadTrackError] =
     useState<Nullable<ErrorType>>(null)