feat: upgrade sds colors (#1078)

#747 Depends on #1077 Updates the SDS color names to use the new `sds-color-primitive-*` syntax. In the future we should refactor these colors to use the semantic equivalents ## Demo https://dev-sds-upgrade.cryoet.dev.si.czi.technology
chanzuckerberg · Sep 18, 2024 · 75ebe8b · 75ebe8b
1 parent d56d716
commit 75ebe8b
Show file tree

Hide file tree

Showing 70 changed files with 283 additions and 215 deletions.
diff --git a/frontend/packages/data-portal/app/components/AnnotatedObjectsList.tsx b/frontend/packages/data-portal/app/components/AnnotatedObjectsList.tsx
@@ -1,4 +1,3 @@
-import { Tooltip } from '@czi-sds/components'
 import Paper from '@mui/material/Paper'
 import Skeleton from '@mui/material/Skeleton'
 import { range } from 'lodash-es'
@@ -8,6 +7,8 @@ import { ANNOTATED_OBJECTS_MAX } from 'app/constants/pagination'
 import { i18n } from 'app/i18n'
 import { cns } from 'app/utils/cns'
 
+import { Tooltip } from './Tooltip'
+
 function List({
   className,
   children,
@@ -62,15 +63,15 @@ export function AnnotatedObjectsList({
           <Tooltip
             classes={{ tooltip: '!p-0 !bg-transparent' }}
             placement="left"
-            title={
+            tooltip={
               <Paper className="p-sds-m text-black w-[250px]" elevation={4}>
                 <List className="font-semibold">{nodes}</List>
               </Paper>
             }
           >
             <div
               className={cns(
-                'bg-sds-gray-200 text-sds-gray-600 hover:cursor-pointer',
+                'bg-sds-color-primitive-gray-200 text-sds-color-primitive-gray-600 hover:cursor-pointer',
                 'text-sds-body-xxxs leading-sds-body-xxxs',
                 'rounded-sds-m py-sds-xxxs px-sds-xs inline',
               )}

diff --git a/frontend/packages/data-portal/app/components/AuthorLegend.tsx b/frontend/packages/data-portal/app/components/AuthorLegend.tsx
@@ -1,28 +1,30 @@
-import { Icon, Tooltip } from '@czi-sds/components'
+import { Icon } from '@czi-sds/components'
 
 import { I18n } from 'app/components/I18n'
 import { EnvelopeIcon, ORCIDIcon } from 'app/components/icons'
 import { cns } from 'app/utils/cns'
 
+import { Tooltip } from './Tooltip'
+
 function Legend() {
   return (
     <div className="flex flex-col gap-sds-m min-w-fit">
-      <h4 className="text-sds-header-xxs leading-sds-header-xxs font-semibold text-sds-gray-500">
+      <h4 className="text-sds-header-xxs leading-sds-header-xxs font-semibold text-sds-color-primitive-gray-500">
         <I18n i18nKey="authorNameLegend" />
       </h4>
-      <div className="grid grid-cols-[max-content_max-content] gap-x-sds-xl gap-y-sds-xxs text-sds-body-xs leading-sds-body-xs text-sds-gray-black">
+      <div className="grid grid-cols-[max-content_max-content] gap-x-sds-xl gap-y-sds-xxs text-sds-body-xs leading-sds-body-xs text-sds-color-primitive-common-black">
         <I18n i18nKey="boldedText" />
         <span className="font-semibold">
           <I18n i18nKey="primaryAuthor" />
         </span>
-        <span className="text-sds-gray-600">
+        <span className="text-sds-color-primitive-gray-600">
           <I18n i18nKey="normalText" />
         </span>
         <span className="font-semibold">
           <I18n i18nKey="author" />
         </span>
         <span className="mt-sds-xxxs">
-          <EnvelopeIcon className="text-sds-gray-400 align-baseline inline-block h-sds-icon-s w-sds-icon-s" />
+          <EnvelopeIcon className="text-sds-color-primitive-gray-400 align-baseline inline-block h-sds-icon-s w-sds-icon-s" />
         </span>
         <span className="font-semibold">
           <I18n i18nKey="correspondingAuthor" />
@@ -40,15 +42,7 @@ function Legend() {
 
 export function AuthorLegend({ inline = false }: { inline?: boolean }) {
   return (
-    <Tooltip
-      title={<Legend />}
-      classes={{
-        tooltip:
-          // need to specify background color because it's not visible locally
-          '!p-sds-m !min-w-fit border-solid border border-sds-gray-300 !bg-white',
-      }}
-      placement="top-start"
-    >
+    <Tooltip tooltip={<Legend />} placement="top">
       <div
         className={inline ? 'relative w-sds-icon-s h-sds-icon-s' : undefined}
       >
@@ -57,7 +51,7 @@ export function AuthorLegend({ inline = false }: { inline?: boolean }) {
           sdsSize={inline ? 's' : 'xs'}
           sdsType="button"
           className={cns(
-            '!text-inherit !inline-block !align-baseline !fill-sds-gray-500',
+            '!text-inherit !inline-block !align-baseline !fill-sds-color-primitive-gray-500',
             inline && 'absolute bottom-sds-xxxs',
           )}
         />

diff --git a/frontend/packages/data-portal/app/components/AuthorLink/AuthorLink.tsx b/frontend/packages/data-portal/app/components/AuthorLink/AuthorLink.tsx
@@ -33,7 +33,7 @@ export function AuthorLink({
 
                 author.primary_author_status
                   ? 'border-black'
-                  : 'border-sds-gray-500',
+                  : 'border-sds-color-primitive-gray-500',
               ]
             : 'border-transparent',
         )}
@@ -48,7 +48,7 @@ export function AuthorLink({
       {author.corresponding_author_status && (
         <EnvelopeIcon
           className={cns(
-            'text-sds-gray-400 mx-sds-xxxs',
+            'text-sds-color-primitive-gray-400 mx-sds-xxxs',
             'mb-2 inline-block h-sds-icon-xs w-sds-icon-xs',
           )}
         />

diff --git a/frontend/packages/data-portal/app/components/AuthorList/AuthorList.tsx b/frontend/packages/data-portal/app/components/AuthorList/AuthorList.tsx
@@ -80,7 +80,11 @@ export function AuthorList({
         ))}
       </span>
 
-      <span className={cns(subtle && !compact && 'text-sds-gray-600')}>
+      <span
+        className={cns(
+          subtle && !compact && 'text-sds-color-primitive-gray-600',
+        )}
+      >
         {compact
           ? otherCollapsed
           : authorsOther.map((author, i, arr) => (

diff --git a/frontend/packages/data-portal/app/components/Breadcrumbs.tsx b/frontend/packages/data-portal/app/components/Breadcrumbs.tsx
@@ -21,7 +21,10 @@ function Breadcrumb({
   className?: string
 }) {
   return link ? (
-    <Link to={link} className={cns(className, 'hover:text-sds-info-400')}>
+    <Link
+      to={link}
+      className={cns(className, 'hover:text-sds-color-primitive-blue-400')}
+    >
       {text}
     </Link>
   ) : (
@@ -80,14 +83,14 @@ export function Breadcrumbs({
     >
       {returnToDepositionLink && (
         <Link
-          className="uppercase font-semibold text-sds-caps-xxxs leading-sds-caps-xxxs text-sds-primary-400"
+          className="uppercase font-semibold text-sds-caps-xxxs leading-sds-caps-xxxs text-sds-color-primitive-blue-400"
           to={returnToDepositionLink}
         >
           {t('returnToDeposition')}
         </Link>
       )}
 
-      <div className="flex flex-row gap-sds-s text-sds-body-s leading-sds-body-s text-sds-gray-black items-center whitespace-nowrap content-start">
+      <div className="flex flex-row gap-sds-s text-sds-body-s leading-sds-body-s text-sds-color-primitive-common-black items-center whitespace-nowrap content-start">
         <Breadcrumb
           text={t(variant === 'deposition' ? 'allDepositions' : 'allDatasets')}
           link={browseAllLink}

diff --git a/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx b/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx
@@ -139,9 +139,9 @@ export function DatasetTable() {
                 <div className="flex flex-col flex-auto gap-sds-xxxs min-h-[100px]">
                   <p
                     className={cnsNoMerge(
-                      'text-sds-body-m leading-sds-body-m font-semibold text-sds-primary-400',
+                      'text-sds-body-m leading-sds-body-m font-semibold text-sds-color-primitive-blue-400',
                       !isClickingOnEmpiarId &&
-                        'group-hover:text-sds-primary-500',
+                        'group-hover:text-sds-color-primitive-blue-500',
                     )}
                   >
                     {isLoadingDebounced ? (
@@ -151,15 +151,15 @@ export function DatasetTable() {
                     )}
                   </p>
 
-                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-600">
+                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-600">
                     {isLoadingDebounced ? (
                       <Skeleton className="max-w-[120px]" variant="text" />
                     ) : (
                       `${t('datasetId')}: ${dataset.id}`
                     )}
                   </p>
 
-                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-500 mt-sds-s">
+                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-500 mt-sds-s">
                     {isLoadingDebounced ? (
                       <>
                         <Skeleton className="max-w-[80%] mt-2" variant="text" />
@@ -240,7 +240,6 @@ export function DatasetTable() {
             header: () => (
               <CellHeader
                 tooltip={<I18n i18nKey="runsTooltip" />}
-                arrowPadding={{ right: 270 }}
                 width={DatasetTableWidths.runs}
               >
                 {t('runs')}

diff --git a/frontend/packages/data-portal/app/components/BrowseData/DepositionTable.tsx b/frontend/packages/data-portal/app/components/BrowseData/DepositionTable.tsx
@@ -100,7 +100,7 @@ export function DepositionTable() {
                 <div className="flex flex-col flex-auto gap-sds-xxxs min-h-[100px]">
                   <p
                     className={cnsNoMerge(
-                      'text-sds-body-m leading-sds-body-m font-semibold text-sds-primary-400',
+                      'text-sds-body-m leading-sds-body-m font-semibold text-sds-color-primitive-blue-400',
                     )}
                   >
                     {isLoadingDebounced ? (
@@ -110,7 +110,7 @@ export function DepositionTable() {
                     )}
                   </p>
 
-                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-600">
+                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-600">
                     {isLoadingDebounced ? (
                       <Skeleton className="max-w-[120px]" variant="text" />
                     ) : (
@@ -120,7 +120,7 @@ export function DepositionTable() {
                     )}
                   </p>
 
-                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-500 mt-sds-s">
+                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-500 mt-sds-s">
                     {isLoadingDebounced ? (
                       <>
                         <Skeleton className="max-w-[80%] mt-2" variant="text" />
@@ -197,7 +197,7 @@ export function DepositionTable() {
                   )}
                 </p>
                 {/*              TODO: (kne42) uncomment this when we can fetch dataset counts properly
-                <p className="text-sds-gray-600 text-sds-body-xxs leading-sds-body-xxs">
+                <p className="text-sds-color-primitive-gray-600 text-sds-body-xxs leading-sds-body-xxs">
                   {isLoadingDebounced ? (
                     <Skeleton variant="text" className="max-w-[75%] mt-2" />
                   ) : (

diff --git a/frontend/packages/data-portal/app/components/CollapsibleList.tsx b/frontend/packages/data-portal/app/components/CollapsibleList.tsx
@@ -67,7 +67,7 @@ export function CollapsibleList({
         <div
           className={cns(
             'mt-sds-xxs font-semibold',
-            tableVariant && 'text-sds-primary-400',
+            tableVariant && 'text-sds-color-primitive-blue-400',
           )}
         >
           <button type="button" onClick={() => setCollapsed(!collapsed)}>
@@ -106,7 +106,7 @@ export function CollapsibleList({
       )}
     </div>
   ) : (
-    <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-600">
+    <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-600">
       {t('notSubmitted')}
     </p>
   )

diff --git a/frontend/packages/data-portal/app/components/CopyBox.tsx b/frontend/packages/data-portal/app/components/CopyBox.tsx
@@ -36,7 +36,7 @@ export function CopyBox({
 
       <div
         className={cns(
-          'bg-sds-gray-100 border-[0.5px] border-sds-gray-300',
+          'bg-sds-color-primitive-gray-100 border-[0.5px] border-sds-color-primitive-gray-300',
           'p-sds-default flex gap-sds-s',
         )}
       >

diff --git a/frontend/packages/data-portal/app/components/DatabaseEntry.tsx b/frontend/packages/data-portal/app/components/DatabaseEntry.tsx
@@ -36,13 +36,20 @@ export function DatabaseEntry(props: DatabaseEntryProps) {
     <p className="flex flex-row gap-sds-xs">
       {(!inline || dbtype === DatabaseType.DOI) && (
         <span
-          className={cns('text-sds-gray-black', !inline && 'font-semibold')}
+          className={cns(
+            'text-sds-color-primitive-common-black',
+            !inline && 'font-semibold',
+          )}
         >
           {LABEL_MAP.get(dbtype)}:
         </span>
       )}
       <Link
-        className={inline ? 'text-sds-info-400 truncate' : 'text-sds-gray-600'}
+        className={
+          inline
+            ? 'text-sds-color-primitive-blue-400 truncate'
+            : 'text-sds-color-primitive-gray-600'
+        }
         to={URL_MAP.get(dbtype) + id}
         variant={inline ? undefined : 'dashed-underlined'}
       >

diff --git a/frontend/packages/data-portal/app/components/Dataset/DatasetMetadataTable.tsx b/frontend/packages/data-portal/app/components/Dataset/DatasetMetadataTable.tsx
@@ -30,7 +30,7 @@ export function DatasetMetadataTable({
       renderValue: (value) => {
         return (
           <Link
-            className="flex flex-row gap-sds-xs w-full items-center justify-center text-sds-info-400"
+            className="flex flex-row gap-sds-xs w-full items-center justify-center text-sds-color-primitive-blue-400"
             to={`/datasets/${dataset.id}`}
             target="_blank"
           >
@@ -39,7 +39,7 @@ export function DatasetMetadataTable({
               sdsIcon="ChevronRight"
               sdsSize="xs"
               sdsType="iconButton"
-              className="!w-[10px] !h-[10px] !fill-sds-primary-400"
+              className="!w-[10px] !h-[10px] !fill-sds-color-primitive-blue-400"
             />
           </Link>
         )

diff --git a/frontend/packages/data-portal/app/components/Dataset/DatasetOverview.tsx b/frontend/packages/data-portal/app/components/Dataset/DatasetOverview.tsx
@@ -8,10 +8,10 @@ import { cnsNoMerge } from 'app/utils/cns'
 
 import { PageHeaderSubtitle } from '../PageHeaderSubtitle'
 
-// use clsx here instead of cns since it erroneously merges text-sds-gray-500 and text-sds-caps-xxxs
+// use clsx here instead of cns since it erroneously merges text-sds-color-primitive-gray-500 and text-sds-caps-xxxs
 const sectionHeaderStyles = cnsNoMerge(
   'font-semibold uppercase',
-  'text-sds-gray-black',
+  'text-sds-color-primitive-common-black',
   'text-sds-caps-xxxs leading-sds-caps-xxxs tracking-sds-caps',
   'mb-sds-xs',
 )

diff --git a/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx b/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx
@@ -103,7 +103,6 @@ export function RunsTable() {
         header: () => (
           <CellHeader
             tooltip={<I18n i18nKey="runsTooltip" />}
-            arrowPadding={{ right: 260 }}
             width={RunTableWidths.name}
           >
             {t('runName')}
@@ -124,17 +123,17 @@ export function RunsTable() {
                 ) : (
                   <Link
                     className={cnsNoMerge(
-                      'text-sds-body-m leading-sds-body-m font-semibold text-sds-primary-400',
+                      'text-sds-body-m leading-sds-body-m font-semibold text-sds-color-primitive-blue-400',
                       !isHoveringOverInteractable &&
-                        'hover:text-sds-primary-500',
+                        'hover:text-sds-color-primitive-blue-500',
                     )}
                     to={runUrl}
                   >
                     {run.name}
                   </Link>
                 )}
 
-                <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-600">
+                <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-600">
                   {isLoadingDebounced ? (
                     <Skeleton className="max-w-[120px]" variant="text" />
                   ) : (

diff --git a/...pp/components/Dataset/SampleAndExperimentConditionsTable/components/InfoLink/InfoLink.tsx b/...pp/components/Dataset/SampleAndExperimentConditionsTable/components/InfoLink/InfoLink.tsx
@@ -33,7 +33,7 @@ export function InfoLink({
     // don't link if no patterns match
     if (link) {
       return (
-        <Link to={link} className="text-sds-info-400">
+        <Link to={link} className="text-sds-color-primitive-blue-400">
           {value}
         </Link>
       )

diff --git a/...end/packages/data-portal/app/components/DatasetFilter/AnnotationMetadataFilterSection.tsx b/...end/packages/data-portal/app/components/DatasetFilter/AnnotationMetadataFilterSection.tsx
@@ -19,7 +19,7 @@ export function AnnotationMetadataFilterSection({
   return (
     <FilterSection title={t('annotationMetadata')} border={false}>
       {depositionPageVariant && (
-        <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-500 pl-sds-s">
+        <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-500 pl-sds-s">
           {t('depositionAnnotationsOnly')}
         </p>
       )}

diff --git a/frontend/packages/data-portal/app/components/DatasetFilter/IncludedContentsFilterSection.tsx b/frontend/packages/data-portal/app/components/DatasetFilter/IncludedContentsFilterSection.tsx
@@ -113,7 +113,6 @@ export function IncludedContentsFilterSection({
           updateValue(QueryParams.AvailableFiles, options)
         }}
         title={`${t('resultsMustIncludeAllFileTypes')}:`}
-        popperClassName="max-w-[244px]"
         className={AVAILABLE_FILES_CLASS_NAME}
       />
 
@@ -129,7 +128,7 @@ export function IncludedContentsFilterSection({
         }
         details={
           depositionPageVariant ? (
-            <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-500">
+            <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-500">
               {t('withDepositionData')}
             </p>
           ) : undefined