IR-3215: Update toolbar colors in studio (#10683)

* Update toolbar colors in studio * replace hardcoded background with a variable * Replace hardcoded variables * Replace hardcoded `#9CA0AA` with `text-theme-input`
EtherealEngine · Jul 31, 2024 · c4bd5ab · c4bd5ab
1 parent e2dbf65
commit c4bd5ab
Show file tree

Hide file tree

Showing 21 changed files with 124 additions and 84 deletions.
diff --git a/packages/client-core/src/common/services/ThemeService.tsx b/packages/client-core/src/common/services/ThemeService.tsx
@@ -35,20 +35,26 @@ export interface CSSClasses {
   'bg-surface-input': string
   'bg-table-secondary': string
   'bg-blue-secondary': string
+  'bg-studio-surface': string
   'bg-banner-informative': string
 
   'bg-tag-green': string
   'bg-tag-lime': string
   'bg-tag-red': string
   'bg-tag-yellow': string
 
+  'text-input': string
   'text-primary': string
   'text-secondary': string
   'text-highlight': string
+  'text-gray3': string
+
   'icon-green': string
   'icon-red': string
 
   'border-primary': string
+  'border-input': string
+
   selection: string
 }
 
@@ -60,20 +66,25 @@ const lightTheme: CSSClasses = {
   'bg-surface-input': '#FFFFFF',
   'bg-table-secondary': '#F9FAFB',
   'bg-blue-secondary': '#D4DFF7',
+  'bg-studio-surface': '#F5F5F5',
   'bg-banner-informative': '#FFFBEB',
 
   'bg-tag-green': '#10B981',
   'bg-tag-lime': '#9ACD32',
   'bg-tag-red': '#D1004B',
   'bg-tag-yellow': '#FEF3C7',
 
+  'text-input': '#9CA0AA',
   'text-primary': '#262626',
   'text-secondary': '#6B7280',
   'text-highlight': '#000000',
+  'text-gray3': '#D3D5D9',
+
   'icon-green': '#0D9488 ',
   'icon-red': '#E11D48',
 
   'border-primary': '#E5E7EB',
+  'border-input': '#42454D',
   selection: '#3166D0'
 }
 
@@ -85,20 +96,25 @@ const darkTheme: CSSClasses = {
   'bg-surface-input': '#141619',
   'bg-table-secondary': '#212226',
   'bg-blue-secondary': '#2A3753',
+  'bg-studio-surface': '#191B1F',
   'bg-banner-informative': '#D9770633',
 
   'bg-tag-green': '#064E3B',
   'bg-tag-lime': '#9ACD32',
   'bg-tag-red': '#B30911',
   'bg-tag-yellow': '#CA8A04',
 
+  'text-input': '#9CA0AA',
   'text-primary': '#F5F5F5',
   'text-secondary': '#D4D4D4',
   'text-highlight': '#FFFFFF',
+  'text-gray3': '#D3D5D9',
+
   'icon-green': '#0D9488 ',
   'icon-red': '#FB7185',
 
   'border-primary': '#2B2C30',
+  'border-input': '#42454D',
   selection: '#1E4273'
 }
 

diff --git a/packages/editor/src/components/assets/ImageCompressionPanel.tsx b/packages/editor/src/components/assets/ImageCompressionPanel.tsx
@@ -164,24 +164,24 @@ export default function ImageCompressionPanel({
       <div className="mx-auto grid w-1/2 gap-y-2">
         <InputGroup
           containerClassName="w-full justify-start"
-          labelClassName="w-24 text-[#D3D5D9]"
+          labelClassName="w-24 text-theme-gray3"
           name="mode"
           label={t('editor:properties.model.transform.dst')}
         >
-          <Input className="border-[#42454D] bg-[#141619] px-2 py-1.5" value={title} disabled />
+          <Input className="border-theme-input bg-[#141619] px-2 py-1.5" value={title} disabled />
         </InputGroup>
         <div className="w-full border border-[#2B2C30]" />
         <InputGroup
           containerClassName="w-full justify-start"
-          labelClassName="w-20 text-[#D3D5D9]"
-          infoClassName="text-[#D3D5D9]"
+          labelClassName="w-20 text-theme-gray3"
+          infoClassName="text-theme-gray3"
           name="mode"
           label={t('editor:properties.model.transform.mode')}
           info={t('editor:properties.model.transform.modeTooltip')}
         >
           <Select
             className="w-full"
-            inputClassName="px-2 py-0.5 text-[#9CA0AA] text-sm"
+            inputClassName="px-2 py-0.5 text-theme-input text-sm"
             options={[
               { label: 'ETC1S', value: 'ETC1S' },
               { label: 'UASTC', value: 'UASTC' }
@@ -192,8 +192,8 @@ export default function ImageCompressionPanel({
         </InputGroup>
         <InputGroup
           containerClassName="w-full justify-start"
-          labelClassName="w-20 text-[#D3D5D9]"
-          infoClassName="text-[#D3D5D9]"
+          labelClassName="w-20 text-theme-gray3"
+          infoClassName="text-theme-gray3"
           name="flipY"
           label={t('editor:properties.model.transform.flipY')}
           info={t('editor:properties.model.transform.flipYTooltip')}
@@ -206,8 +206,8 @@ export default function ImageCompressionPanel({
         </InputGroup>
         <InputGroup
           containerClassName="w-full justify-start"
-          labelClassName="w-20 text-[#D3D5D9]"
-          infoClassName="text-[#D3D5D9]"
+          labelClassName="w-20 text-theme-gray3"
+          infoClassName="text-theme-gray3"
           name="linear"
           label={t('editor:properties.model.transform.srgb')}
           info={t('editor:properties.model.transform.srgbTooltip')}
@@ -220,8 +220,8 @@ export default function ImageCompressionPanel({
         </InputGroup>
         <InputGroup
           containerClassName="w-full justify-start"
-          labelClassName="w-20 text-[#D3D5D9]"
-          infoClassName="text-[#D3D5D9]"
+          labelClassName="w-20 text-theme-gray3"
+          infoClassName="text-theme-gray3"
           name="mipmaps"
           label={t('editor:properties.model.transform.mipmaps')}
           info={t('editor:properties.model.transform.mipmapsTooltip')}
@@ -234,8 +234,8 @@ export default function ImageCompressionPanel({
         </InputGroup>
         <InputGroup
           containerClassName="w-full justify-start"
-          labelClassName="w-20 text-[#D3D5D9]"
-          infoClassName="text-[#D3D5D9]"
+          labelClassName="w-20 text-theme-gray3"
+          infoClassName="text-theme-gray3"
           name="normalMap"
           label={t('editor:properties.model.transform.normalMap')}
           info={t('editor:properties.model.transform.normalMapTooltip')}
@@ -250,14 +250,14 @@ export default function ImageCompressionPanel({
           <>
             <InputGroup
               containerClassName="w-full justify-start"
-              labelClassName="w-20 text-[#D3D5D9]"
-              infoClassName="text-[#D3D5D9]"
+              labelClassName="w-20 text-theme-gray3"
+              infoClassName="text-theme-gray3"
               name="quality"
               label={t('editor:properties.model.transform.quality')}
               info={t('editor:properties.model.transform.qualityTooltip')}
             >
               <Slider
-                className="bg-[#191B1F] [&::-moz-range-track]:bg-[#191B1F]"
+                className="bg-theme-studio-surface [&::-moz-range-track]:bg-theme-studio-surface"
                 width={160}
                 value={compressProperties.quality.value}
                 onChange={compressProperties.quality.set}
@@ -269,14 +269,14 @@ export default function ImageCompressionPanel({
             </InputGroup>
             <InputGroup
               containerClassName="w-full justify-start"
-              labelClassName="w-20 text-[#D3D5D9]"
-              infoClassName="text-[#D3D5D9]"
+              labelClassName="w-20 text-theme-gray3"
+              infoClassName="text-theme-gray3"
               name="compressionLevel"
               label={t('editor:properties.model.transform.compressionLevel')}
               info={t('editor:properties.model.transform.compressionLevelTooltip')}
             >
               <Slider
-                className="bg-[#191B1F] [&::-moz-range-track]:bg-[#191B1F]"
+                className="bg-theme-studio-surface [&::-moz-range-track]:bg-theme-studio-surface"
                 width={160}
                 value={compressProperties.compressionLevel.value}
                 onChange={compressProperties.compressionLevel.set}
@@ -292,8 +292,8 @@ export default function ImageCompressionPanel({
           <>
             <InputGroup
               containerClassName="w-full justify-start"
-              labelClassName="w-20 text-[#D3D5D9]"
-              infoClassName="text-[#D3D5D9]"
+              labelClassName="w-20 text-theme-gray3"
+              infoClassName="text-theme-gray3"
               name="uastcFlags"
               label={t('editor:properties.model.transform.uastcFlags')}
               info={t('editor:properties.model.transform.uastcFlagsTooltip')}
@@ -307,8 +307,8 @@ export default function ImageCompressionPanel({
             </InputGroup>
             <InputGroup
               containerClassName="w-full justify-start"
-              labelClassName="w-20 text-[#D3D5D9]"
-              infoClassName="text-[#D3D5D9]"
+              labelClassName="w-20 text-theme-gray3"
+              infoClassName="text-theme-gray3"
               name="uastcZstandard"
               label={t('editor:properties.model.transform.uastcZstandard')}
               info={t('editor:properties.model.transform.uastcZstandardTooltip')}

diff --git a/packages/editor/src/components/assets/ModelCompressionPanel.tsx b/packages/editor/src/components/assets/ModelCompressionPanel.tsx
@@ -290,7 +290,9 @@ export default function ModelCompressionPanel({
               <Button
                 variant="transparent"
                 className={`rounded-none px-1 pb-4 text-sm font-medium ${
-                  selectedLODIndex.value === index ? 'border-b border-blue-primary text-blue-primary' : 'text-[#9CA0AA]'
+                  selectedLODIndex.value === index
+                    ? 'border-b border-blue-primary text-blue-primary'
+                    : 'text-theme-input'
                 }`}
                 onClick={() => selectedLODIndex.set(Math.min(index, lods.length - 1))}
               >
@@ -316,7 +318,7 @@ export default function ModelCompressionPanel({
           </Button>
         </div>
 
-        <div className="my-8 flex items-center justify-around gap-x-1 overflow-x-auto rounded-lg border border-[#42454D] p-2">
+        <div className="my-8 flex items-center justify-around gap-x-1 overflow-x-auto rounded-lg border border-theme-input p-2">
           {presetList.value.map((lodItem: LODVariantDescriptor, index) => (
             <Button
               key={index}

diff --git a/packages/editor/src/components/properties/GLTFTransformProperties.tsx b/packages/editor/src/components/properties/GLTFTransformProperties.tsx
@@ -74,7 +74,7 @@ function TextParam({
 
       <div className="col-span-2 col-start-3">
         <Input
-          className="py-0 text-xs text-[#9CA0AA]"
+          className="py-0 text-xs text-theme-input"
           value={state.value}
           onChange={(e) => {
             state.set(parseFunction(e.target.value))
@@ -103,7 +103,7 @@ export default function GLTFTransformProperties({
               <Text
                 fontSize="xs"
                 fontWeight="medium"
-                className="block px-2 py-0.5 text-right leading-[1.125rem] text-[#D3D5D9]"
+                className="block px-2 py-0.5 text-right leading-[1.125rem] text-theme-gray3"
                 style={{
                   textWrap: 'nowrap' // tailwind class is not working
                 }}
@@ -113,7 +113,7 @@ export default function GLTFTransformProperties({
               <Text
                 fontSize="xs"
                 fontWeight="medium"
-                className="px-2 py-0.5 text-right leading-[1.125rem] text-[#D3D5D9]"
+                className="px-2 py-0.5 text-right leading-[1.125rem] text-theme-gray3"
                 style={{
                   textWrap: 'nowrap' // tailwind class is not working
                 }}
@@ -127,14 +127,14 @@ export default function GLTFTransformProperties({
                 onChange={(e) => {
                   transformParms.dst.set(e.target.value)
                 }}
-                className="px-2 py-0.5 text-sm text-[#9CA0AA]"
+                className="px-2 py-0.5 text-sm text-theme-input"
               />
               <Input
                 value={transformParms.resourceUri.value}
                 onChange={(e) => {
                   transformParms.resourceUri.set(e.target.value)
                 }}
-                className="px-2 py-0.5 text-sm text-[#9CA0AA]"
+                className="px-2 py-0.5 text-sm text-theme-input"
               />
             </div>
           </div>
@@ -145,7 +145,7 @@ export default function GLTFTransformProperties({
               <Text
                 fontSize="xs"
                 fontWeight="medium"
-                className="block px-2 py-0.5 text-right leading-[1.125rem] text-[#D3D5D9]"
+                className="block px-2 py-0.5 text-right leading-[1.125rem] text-theme-gray3"
                 style={{
                   textWrap: 'nowrap' // tailwind class is not working
                 }}
@@ -157,7 +157,7 @@ export default function GLTFTransformProperties({
               <Input
                 value={`${itemCount} Items`}
                 disabled={true}
-                className="px-2 py-0.5 font-['Figtree'] text-sm text-[#9CA0AA]"
+                className="px-2 py-0.5 font-['Figtree'] text-sm text-theme-input"
               />
             </div>
           </div>
@@ -179,7 +179,7 @@ export default function GLTFTransformProperties({
 
             <div className="col-span-2 col-start-3">
               <Select
-                inputClassName="text-[#9CA0AA] text-xs py-0"
+                inputClassName="text-theme-input text-xs py-0"
                 options={[
                   { label: 'Default', value: 'default' },
                   { label: 'JPG', value: 'jpg' },
@@ -223,7 +223,7 @@ export default function GLTFTransformProperties({
 
             <div className="col-span-2 col-start-3">
               <Select
-                inputClassName="text-[#9CA0AA] text-xs py-0"
+                inputClassName="text-theme-input text-xs py-0"
                 options={[
                   { label: 'UASTC', value: 'uastc' },
                   { label: 'ETC1', value: 'etc1' }

diff --git a/packages/editor/src/components/toolbar/Toolbar.tsx b/packages/editor/src/components/toolbar/Toolbar.tsx
@@ -185,7 +185,7 @@ export default function Toolbar() {
             endIcon={<MdOutlineKeyboardArrowDown size="1em" className="-ml-3 text-[#A3A3A3]" />}
             iconContainerClassName="ml-2 mr-1"
             rounded="none"
-            startIcon={<RxHamburgerMenu size={24} className="text-[#9CA0AA]" />}
+            startIcon={<RxHamburgerMenu size={24} className="text-theme-input" />}
             className="-mr-1 border-0 bg-transparent p-0"
             onClick={(event) => {
               anchorPosition.set({ left: event.clientX - 5, top: event.clientY - 2 })
@@ -225,7 +225,7 @@ export default function Toolbar() {
           {toolbarMenu.map(({ name, action, hotkey }, index) => (
             <div key={index}>
               <Button
-                className="px-4 py-2.5 text-left font-light text-[#9CA0AA]"
+                className="px-4 py-2.5 text-left font-light text-theme-input"
                 textContainerClassName="text-xs"
                 variant="sidebar"
                 size="small"

diff --git a/packages/ui/src/components/editor/input/Boolean/index.tsx b/packages/ui/src/components/editor/input/Boolean/index.tsx
@@ -43,7 +43,7 @@ export const BooleanInput = (props: BooleanInputProp) => {
   return (
     <Checkbox
       className={twMerge(
-        'rounded-sm border border-[#42454D] bg-black dark:bg-[#1A1A1A]',
+        'rounded-sm border border-theme-input bg-black dark:bg-[#1A1A1A]',
         'hover:border-blue-800 hover:bg-theme-highlight',
         props.disabled ? 'cursor-[initial] opacity-80 grayscale-[0.8]' : 'cursor-pointer',
         props.className

diff --git a/packages/ui/src/components/editor/panels/Assets/container/index.tsx b/packages/ui/src/components/editor/panels/Assets/container/index.tsx
@@ -342,7 +342,7 @@ export function AssetsBreadcrumb({
   onSelectCategory: (c: Category) => void
 }) {
   return (
-    <div className="flex h-[28px] items-center gap-2 rounded-[4px] border border-[#42454D] bg-[#141619] px-2">
+    <div className="flex h-[28px] items-center gap-2 rounded-[4px] border border-theme-input bg-[#141619] px-2 ">
       <HiOutlineFolder className="text-xs text-[#A3A3A3]" />
       {parentCategories.map((category) => (
         <span