From 24b647d48a87c74175ded212639e779b03877163 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 4 May 2024 22:36:38 +0300
Subject: [PATCH] Refactored Image component design tokens

---
 .../lib/galleria/style/GalleriaStyle.js       | 66 +++++++++----------
 components/lib/image/style/ImageStyle.js      |  4 +-
 components/lib/themes/aura/carousel/index.js  | 10 ---
 components/lib/themes/aura/galleria/index.js  | 28 ++++----
 components/lib/themes/aura/image/index.js     | 40 ++++-------
 5 files changed, 58 insertions(+), 90 deletions(-)

diff --git a/components/lib/galleria/style/GalleriaStyle.js b/components/lib/galleria/style/GalleriaStyle.js
index 106926183..ed61e5367 100644
--- a/components/lib/galleria/style/GalleriaStyle.js
+++ b/components/lib/galleria/style/GalleriaStyle.js
@@ -18,7 +18,7 @@ const theme = ({ dt }) => `
     height: 100%;
 }
 
-.p-galleria-navigate-button {
+.p-galleria-nav-button {
     position: absolute;
     top: 50%;
     margin-top: -0.5rem;
@@ -27,7 +27,7 @@ const theme = ({ dt }) => `
     align-items: center;
     overflow: hidden;
     background: transparent;
-    color: ${dt('galleria.navigator.color')};
+    color: ${dt('galleria.nav.button.color')};
     width: 3rem;
     height: 3rem;
     transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
@@ -39,8 +39,8 @@ const theme = ({ dt }) => `
     cursor: pointer;
 }
 
-.p-galleria-navigate-button:not(.p-disabled):hover {
-    background: ${dt('galleria.navigator.hover.background')};
+.p-galleria-nav-button:not(.p-disabled):hover {
+    background: ${dt('galleria.nav.button.hover.background')};
 }
 
 .p-galleria-next-icon,
@@ -66,18 +66,18 @@ const theme = ({ dt }) => `
     width: 100%;
 }
 
-.p-galleria-hover-navigators .p-galleria-navigate-button {
+.p-galleria-hover-navigators .p-galleria-nav-button {
     pointer-events: none;
     opacity: 0;
     transition: opacity ${dt('transition.duration')} ease-in-out;
 }
 
-.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-navigate-button {
+.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button {
     pointer-events: all;
     opacity: 1;
 }
 
-.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-navigate-button.p-disabled {
+.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button.p-disabled {
     pointer-events: none;
 }
 
@@ -98,8 +98,7 @@ const theme = ({ dt }) => `
     flex-shrink: 0;
 }
 
-.p-galleria-thumbnail-prev-button,
-.p-galleria-thumbnail-next-button {
+.p-galleria-thumbnail-nav-button {
     align-self: center;
     flex: 0 0 auto;
     display: flex;
@@ -113,7 +112,7 @@ const theme = ({ dt }) => `
     user-select: none;
     cursor: pointer;
     background: transparent;
-    color: ${dt('galleria.thumbnail.navigator.color')};
+    color: ${dt('galleria.thumbnail.nav.button.color')};
     width: 2rem;
     height: 2rem;
     transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
@@ -121,20 +120,17 @@ const theme = ({ dt }) => `
     border-radius: 50%;
 }
 
-.p-galleria-thumbnail-prev-button:hover,
-.p-galleria-thumbnail-next-button:hover {
-    background: ${dt('galleria.thumbnail.navigator.hover.background')};
-    color: ${dt('galleria.thumbnail.navigator.hover.color')};
+.p-galleria-thumbnail-nav-button:hover {
+    background: ${dt('galleria.thumbnail.nav.button.hover.background')};
+    color: ${dt('galleria.thumbnail.nav.button.hover.color')};
 }
 
-.p-galleria-thumbnail-prev-button:focus-visible,
-.p-galleria-thumbnail-next-button:focus-visible {
+.p-galleria-thumbnail-nav-button:focus-visible {
     outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
     outline-offset: ${dt('focus.ring.offset')};
 }
 
-.p-galleria-thumbnail-prev-button span,
-.p-galleria-thumbnail-next-button span {
+.p-galleria-thumbnail-nav-button span {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -143,7 +139,7 @@ const theme = ({ dt }) => `
 .p-galleria-thumbnails-content {
     display: flex;
     flex-direction: row;
-    background: ${dt('galleria.thumbnail.container.background')};
+    background: ${dt('galleria.thumbnails.content.background')};
     padding: 1rem 0.25rem;
 }
 
@@ -228,7 +224,7 @@ const theme = ({ dt }) => `
 .p-galleria-indicator-button {
     display: inline-flex;
     align-items: center;
-    background: ${dt('galleria.indicator.background')};
+    background: ${dt('galleria.indicator.button.background')};
     width: 1rem;
     height: 1rem;
     transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
@@ -242,7 +238,7 @@ const theme = ({ dt }) => `
 }
 
 .p-galleria-indicator-button:hover {
-    background: ${dt('galleria.indicator.hover.background')};
+    background: ${dt('galleria.indicator.button.hover.background')};
 }
 
 .p-galleria-indicator-button:focus-visible {
@@ -251,7 +247,7 @@ const theme = ({ dt }) => `
 }
 
 .p-galleria-indicator-active .p-galleria-indicator-button {
-    background-color: ${dt('galleria.indicator.active.background')};
+    background-color: ${dt('galleria.indicator.button.active.background')};
 }
 
 .p-galleria-indicators-left .p-galleria-items-container,
@@ -279,19 +275,19 @@ const theme = ({ dt }) => `
     position: absolute;
     display: flex;
     z-index: 1;
-    background: ${dt('galleria.inset.indicators.background')};
+    background: ${dt('galleria.inset.indicator.list.background')};
 }
 
 .p-galleria-inset-indicators .p-galleria-indicator-button {
-    background: ${dt('galleria.inset.indicator.background')};
+    background: ${dt('galleria.inset.indicator.button.background')};
 }
 
 .p-galleria-inset-indicators .p-galleria-indicator-button:hover {
-    background: ${dt('galleria.inset.indicator.hover.background')};
+    background: ${dt('galleria.inset.indicator.button.hover.background')};
 }
 
 .p-galleria-inset-indicators .p-galleria-indicator-active .p-galleria-indicator-button {
-    background: ${dt('galleria.inset.indicator.active.background')};
+    background: ${dt('galleria.inset.indicator.button.active.background')};
 }
 
 .p-galleria-inset-indicators.p-galleria-indicators-top .p-galleria-indicator-list {
@@ -344,7 +340,7 @@ const theme = ({ dt }) => `
     overflow: hidden;
     margin: 0.5rem;
     background: transparent;
-    color: ${dt('galleria.close.color')};
+    color: ${dt('galleria.close.button.color')};
     width: 3rem;
     height: 3rem;
     padding: 0;
@@ -363,8 +359,8 @@ const theme = ({ dt }) => `
 }
 
 .p-galleria-close-button:hover {
-    background: ${dt('galleria.close.hover.background')};
-    color: ${dt('galleria.close.hover.color')};
+    background: ${dt('galleria.close.button.hover.background')};
+    color: ${dt('galleria.close.button.hover.color')};
 }
 
 .p-galleria-close-button:focus-visible {
@@ -372,7 +368,7 @@ const theme = ({ dt }) => `
     outline-offset: ${dt('focus.ring.offset')};
 }
 
-.p-galleria-mask .p-galleria-navigate-button {
+.p-galleria-mask .p-galleria-nav-button {
     position: fixed;
     top: 50%;
     margin-top: -0.5rem;
@@ -392,7 +388,7 @@ const theme = ({ dt }) => `
     transform: scale(0.7);
 }
 
-.p-galleria-enter-active .p-galleria-navigate-button {
+.p-galleria-enter-active .p-galleria-nav-button {
     opacity: 0;
 }
 
@@ -435,7 +431,7 @@ const classes = {
     itemsContainer: 'p-galleria-items-container',
     items: 'p-galleria-items',
     previousItemButton: ({ instance }) => [
-        'p-galleria-prev-button p-galleria-navigate-button',
+        'p-galleria-prev-button p-galleria-nav-button',
         {
             'p-disabled': instance.isNavBackwardDisabled()
         }
@@ -443,7 +439,7 @@ const classes = {
     previousItemIcon: 'p-galleria-prev-icon',
     item: 'p-galleria-item',
     nextItemButton: ({ instance }) => [
-        'p-galleria-next-button p-galleria-navigate-button',
+        'p-galleria-next-button p-galleria-nav-button',
         {
             'p-disabled': instance.isNavForwardDisabled()
         }
@@ -461,7 +457,7 @@ const classes = {
     thumbnails: 'p-galleria-thumbnails',
     thumbnailContent: 'p-galleria-thumbnails-content',
     previousThumbnailButton: ({ instance }) => [
-        'p-galleria-thumbnail-prev-button',
+        'p-galleria-thumbnail-prev-button p-galleria-thumbnail-nav-button',
         {
             'p-disabled': instance.isNavBackwardDisabled()
         }
@@ -480,7 +476,7 @@ const classes = {
     ],
     thumbnail: 'p-galleria-thumbnail',
     nextThumbnailButton: ({ instance }) => [
-        'p-galleria-thumbnail-next-button',
+        'p-galleria-thumbnail-next-button  p-galleria-thumbnail-nav-button',
         {
             'p-disabled': instance.isNavForwardDisabled()
         }
diff --git a/components/lib/image/style/ImageStyle.js b/components/lib/image/style/ImageStyle.js
index 3aa5783c8..7f5598b8c 100644
--- a/components/lib/image/style/ImageStyle.js
+++ b/components/lib/image/style/ImageStyle.js
@@ -29,14 +29,14 @@ const theme = ({ dt }) => `
     padding: 0;
     cursor: pointer;
     background: transparent;
-    color: ${dt('image.preview.indicator.color')};
+    color: ${dt('image.preview.mask.color')};
     transition: background-color ${dt('transition.duration')};
 }
 
 .p-image-preview:hover > .p-image-preview-mask {
     opacity: 1;
     cursor: pointer;
-    background: ${dt('image.preview.indicator.background')};
+    background: ${dt('image.preview.mask.background')};
 }
 
 .p-image-preview-icon {
diff --git a/components/lib/themes/aura/carousel/index.js b/components/lib/themes/aura/carousel/index.js
index 6b89ccf4c..d81d4456a 100644
--- a/components/lib/themes/aura/carousel/index.js
+++ b/components/lib/themes/aura/carousel/index.js
@@ -1,11 +1,6 @@
 export default {
     colorScheme: {
         light: {
-            navigator: {
-                color: '{surface.500}',
-                hoverColor: '{surface.600}',
-                hoverBackground: '{surface.100}'
-            },
             indicator: {
                 background: '{surface.200}',
                 hoverBackground: '{surface.300}',
@@ -13,11 +8,6 @@ export default {
             }
         },
         dark: {
-            navigator: {
-                color: '{surface.400}',
-                hoverColor: '{surface.300}',
-                hoverBackground: '{surface.800}'
-            },
             indicator: {
                 background: '{surface.700}',
                 hoverBackground: '{surface.600}',
diff --git a/components/lib/themes/aura/galleria/index.js b/components/lib/themes/aura/galleria/index.js
index 9f0095272..2fbf64b13 100644
--- a/components/lib/themes/aura/galleria/index.js
+++ b/components/lib/themes/aura/galleria/index.js
@@ -1,31 +1,31 @@
 export default {
     colorScheme: {
         light: {
-            navigator: {
+            navButton: {
                 hoverBackground: 'rgba(255, 255, 255, 0.1)',
                 color: '{surface.100}'
             },
-            thumbnailNavigator: {
+            thumbnailNavButton: {
                 hoverBackground: '{surface.200}',
                 color: '{surface.600}',
                 hoverColor: '{surface.700}'
             },
-            thumbnailContainer: {
+            thumbnailsContent: {
                 background: '{surface.50}'
             },
             caption: {
                 background: 'rgba(0, 0, 0, 0.5)',
                 color: '{surface.100}'
             },
-            indicator: {
+            indicatorButton: {
                 background: '{surface.200}',
                 hoverBackground: '{surface.300}',
                 activeBackground: '{primary.color}'
             },
-            insetIndicators: {
+            insetIndicatorList: {
                 background: 'rgba(0, 0, 0, 0.5)'
             },
-            insetIndicator: {
+            insetIndicatorButton: {
                 background: 'rgba(255, 255, 255, 0.4)',
                 hoverBackground: 'rgba(255, 255, 255, 0.6)',
                 activeBackground: 'rgba(255, 255, 255, 0.9)'
@@ -33,38 +33,38 @@ export default {
             mask: {
                 background: 'rgba(0,0,0,0.9)'
             },
-            close: {
+            closeButton: {
                 hoverBackground: 'rgba(255,255,255,0.1)',
                 color: '{surface.50}',
                 hoverColor: '{surface.0}'
             }
         },
         dark: {
-            navigator: {
+            navButton: {
                 hoverBackground: 'rgba(255, 255, 255, 0.1)',
                 color: '{surface.400}'
             },
-            thumbnailNavigator: {
+            thumbnailNavButton: {
                 hoverBackground: '{surface.800}',
                 color: '{surface.400}',
                 hoverColor: '{surface.300}'
             },
-            thumbnailContainer: {
+            thumbnailsContent: {
                 background: '{surface.950}'
             },
             caption: {
                 background: 'rgba(0, 0, 0, 0.5)',
                 color: '{surface.100}'
             },
-            indicator: {
+            indicatorButton: {
                 background: '{surface.200}',
                 hoverBackground: '{surface.300}',
                 activeBackground: '{primary.color}'
             },
-            insetIndicators: {
+            insetIndicatorList: {
                 background: 'rgba(0, 0, 0, 0.5)'
             },
-            insetIndicator: {
+            insetIndicatorButton: {
                 background: 'rgba(255, 255, 255, 0.4)',
                 hoverBackground: 'rgba(255, 255, 255, 0.6)',
                 activeBackground: 'rgba(255, 255, 255, 0.9)'
@@ -72,7 +72,7 @@ export default {
             mask: {
                 background: 'rgba(0,0,0,0.9)'
             },
-            close: {
+            closeButton: {
                 hoverBackground: 'rgba(255,255,255,0.1)',
                 color: '{surface.50}',
                 hoverColor: '{surface.0}'
diff --git a/components/lib/themes/aura/image/index.js b/components/lib/themes/aura/image/index.js
index dc99dc9b6..0a79539de 100644
--- a/components/lib/themes/aura/image/index.js
+++ b/components/lib/themes/aura/image/index.js
@@ -1,32 +1,14 @@
 export default {
-    colorScheme: {
-        light: {
-            previewIndicator: {
-                background: '{maskBackground}',
-                color: '{surface.200}'
-            },
-            mask: {
-                background: 'rgba(0,0,0,0.9)'
-            },
-            action: {
-                hoverBackground: 'rgba(255,255,255,0.1)',
-                color: '{surface.50}',
-                hoverColor: '{surface.0}'
-            }
-        },
-        dark: {
-            previewIndicator: {
-                background: '{maskBackground}',
-                color: '{surface.200}'
-            },
-            mask: {
-                background: 'rgba(0,0,0,0.9)'
-            },
-            action: {
-                hoverBackground: 'rgba(255,255,255,0.1)',
-                color: '{surface.50}',
-                hoverColor: '{surface.0}'
-            }
-        }
+    previewMask: {
+        background: '{mask.background}',
+        color: '{surface.200}'
+    },
+    mask: {
+        background: 'rgba(0,0,0,0.9)'
+    },
+    action: {
+        hoverBackground: 'rgba(255,255,255,0.1)',
+        color: '{surface.50}',
+        hoverColor: '{surface.0}'
     }
 };