From 0f6f5736d60d3007c6105acf532d55cae44e776b Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 13 May 2024 12:10:09 +0300
Subject: [PATCH] Tokens for Image

---
 components/lib/base/style/BaseStyle.js    |  8 ++---
 components/lib/image/style/ImageStyle.js  | 43 ++++++++++++++---------
 components/lib/themes/aura/image/index.js | 39 ++++++++++++++++----
 components/lib/themes/aura/index.js       | 10 ++++--
 components/lib/themes/lara/image/index.js | 39 ++++++++++++++++----
 components/lib/themes/lara/index.js       | 10 ++++--
 6 files changed, 112 insertions(+), 37 deletions(-)

diff --git a/components/lib/base/style/BaseStyle.js b/components/lib/base/style/BaseStyle.js
index a5e77a3a3..857d4207e 100644
--- a/components/lib/base/style/BaseStyle.js
+++ b/components/lib/base/style/BaseStyle.js
@@ -186,18 +186,18 @@ const theme = ({ dt }) => `
 
 @keyframes p-component-overlay-enter-animation {
     from {
-        background-color: transparent;
+        background: transparent;
     }
     to {
-        background-color: ${dt('mask.background')};
+        background: ${dt('mask.background')};
     }
 }
 @keyframes p-component-overlay-leave-animation {
     from {
-        background-color: ${dt('mask.background')};
+        background: ${dt('mask.background')};
     }
     to {
-        background-color: transparent;
+        background: transparent;
     }
 }
 `;
diff --git a/components/lib/image/style/ImageStyle.js b/components/lib/image/style/ImageStyle.js
index 7f5598b8c..6c65fea51 100644
--- a/components/lib/image/style/ImageStyle.js
+++ b/components/lib/image/style/ImageStyle.js
@@ -5,7 +5,6 @@ const theme = ({ dt }) => `
     display: flex;
     align-items: center;
     justify-content: center;
-    --p-mask-background: ${dt('image.mask.background')};
 }
 
 .p-image-preview {
@@ -30,7 +29,7 @@ const theme = ({ dt }) => `
     cursor: pointer;
     background: transparent;
     color: ${dt('image.preview.mask.color')};
-    transition: background-color ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')};
 }
 
 .p-image-preview:hover > .p-image-preview-mask {
@@ -40,18 +39,27 @@ const theme = ({ dt }) => `
 }
 
 .p-image-preview-icon {
-    width: 1.5rem;
-    height: 1.5rem;
+    font-size: ${dt('image.preview.icon.size')};
+    width: ${dt('image.preview.icon.size')};
+    height: ${dt('image.preview.icon.size')};
 }
 
 .p-image-toolbar {
     position: absolute;
-    top: 0;
-    right: 0;
+    top: ${dt('image.toolbar.position.top')};
+    right: ${dt('image.toolbar.position.right')};
+    left: ${dt('image.toolbar.position.left')};
+    bottom: ${dt('image.toolbar.position.bottom')};
     display: flex;
     z-index: 1;
-    padding: 1rem;
-    gap: 0.5rem;
+    padding: ${dt('image.toolbar.padding')};
+    background: ${dt('image.toolbar.background')};
+    backdrop-filter: blur(${dt('image.toolbar.blur')});
+    border-color: ${dt('image.toolbar.border.color')};
+    border-style: solid;
+    border-width: ${dt('image.toolbar.border.width')};
+    border-radius: ${dt('image.toolbar.border.radius')};
+    gap: ${dt('image.toolbar.gap')};
 }
 
 .p-image-action {
@@ -60,16 +68,16 @@ const theme = ({ dt }) => `
     align-items: center;
     color: ${dt('image.action.color')};
     background: transparent;
-    width: 3rem;
+    width: ${dt('image.action.size')};
+    height: ${dt('image.action.size')};
     margin: 0;
     padding: 0;
     border: 0 none;
     cursor: pointer;
     user-select: none;
-    height: 3rem;
-    border-radius: 50%;
+    border-radius: ${dt('image.action.border.radius')};
     outline-color: transparent;
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
 }
 
 .p-image-action:hover {
@@ -78,14 +86,15 @@ const theme = ({ dt }) => `
 }
 
 .p-image-action:focus-visible {
-    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
-    outline-offset: ${dt('focus.ring.offset')};
+    box-shadow: ${dt('toolbar.action.focus.ring.shadow')};
+    outline: ${dt('toolbar.action.focus.ring.width')} ${dt('toolbar.action.focus.ring.style')} ${dt('toolbar.action.focus.ring.color')};
+    outline-offset: ${dt('toolbar.action.focus.ring.offset')};
 }
 
 .p-image-action .p-icon {
-    font-size: 1.5rem;
-    width: 1.5rem;
-    height: 1.5rem;
+    font-size: ${dt('image.action.icon.size')};
+    width: ${dt('image.action.icon.size')};
+    height: ${dt('image.action.icon.size')};
 }
 
 .p-image-action.p-disabled {
diff --git a/components/lib/themes/aura/image/index.js b/components/lib/themes/aura/image/index.js
index 0a79539de..3d9f664e3 100644
--- a/components/lib/themes/aura/image/index.js
+++ b/components/lib/themes/aura/image/index.js
@@ -1,14 +1,41 @@
 export default {
-    previewMask: {
-        background: '{mask.background}',
-        color: '{surface.200}'
+    preview: {
+        icon: {
+            size: '1.5rem'
+        },
+        mask: {
+            background: '{mask.background}',
+            color: '{mask.color}'
+        }
     },
-    mask: {
-        background: 'rgba(0,0,0,0.9)'
+    toolbar: {
+        position: {
+            left: 'auto',
+            right: '1rem',
+            top: '1rem',
+            bottom: 'auto'
+        },
+        blur: '8px',
+        background: 'rgba(255,255,255,0.1)',
+        borderColor: 'rgba(255,255,255,0.2)',
+        borderWidth: '1px',
+        borderRadius: '{30px}',
+        padding: '.5rem',
+        gap: '0.5rem'
     },
     action: {
         hoverBackground: 'rgba(255,255,255,0.1)',
         color: '{surface.50}',
-        hoverColor: '{surface.0}'
+        hoverColor: '{surface.0}',
+        size: '3rem',
+        iconSize: '1.5rem',
+        borderRadius: '50%',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
     }
 };
diff --git a/components/lib/themes/aura/index.js b/components/lib/themes/aura/index.js
index d545596d4..325e40b68 100644
--- a/components/lib/themes/aura/index.js
+++ b/components/lib/themes/aura/index.js
@@ -236,7 +236,10 @@ export default {
                     color: '{primary.700}',
                     focusColor: '{primary.800}'
                 },
-                maskBackground: 'rgba(0,0,0,0.4)',
+                mask: {
+                    background: 'rgba(0,0,0,0.4)',
+                    color: '{surface.200}'
+                },
                 formField: {
                     background: '{surface.0}',
                     disabledBackground: '{surface.200}',
@@ -355,7 +358,10 @@ export default {
                     color: 'rgba(255,255,255,.87)',
                     focusColor: 'rgba(255,255,255,.87)'
                 },
-                maskBackground: 'rgba(0,0,0,0.4)',
+                mask: {
+                    background: 'rgba(0,0,0,0.4)',
+                    color: '{surface.200}'
+                },
                 formField: {
                     background: '{surface.950}',
                     disabledBackground: '{surface.700}',
diff --git a/components/lib/themes/lara/image/index.js b/components/lib/themes/lara/image/index.js
index 0a79539de..c0a42ce18 100644
--- a/components/lib/themes/lara/image/index.js
+++ b/components/lib/themes/lara/image/index.js
@@ -1,14 +1,41 @@
 export default {
-    previewMask: {
-        background: '{mask.background}',
-        color: '{surface.200}'
+    preview: {
+        icon: {
+            size: '1.5rem'
+        },
+        mask: {
+            background: '{mask.background}',
+            color: '{mask.color}'
+        }
     },
-    mask: {
-        background: 'rgba(0,0,0,0.9)'
+    toolbar: {
+        position: {
+            left: 'auto',
+            right: '1rem',
+            top: '1rem',
+            bottom: 'auto'
+        },
+        blur: '8px',
+        background: 'rgba(255,255,255,0.1)',
+        borderColor: 'rgba(255,255,255,0.2)',
+        borderWidth: '1px',
+        borderRadius: '{content.border.radius}',
+        padding: '.5rem',
+        gap: '0.5rem'
     },
     action: {
         hoverBackground: 'rgba(255,255,255,0.1)',
         color: '{surface.50}',
-        hoverColor: '{surface.0}'
+        hoverColor: '{surface.0}',
+        size: '3rem',
+        iconSize: '1.5rem',
+        borderRadius: '{content.border.radius}',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
     }
 };
diff --git a/components/lib/themes/lara/index.js b/components/lib/themes/lara/index.js
index f36704dd8..a44ec3487 100644
--- a/components/lib/themes/lara/index.js
+++ b/components/lib/themes/lara/index.js
@@ -238,7 +238,10 @@ export default {
                 focusRing: {
                     shadow: '0 0 0 0.2rem {primary.200}'
                 },
-                maskBackground: 'rgba(0,0,0,0.4)',
+                mask: {
+                    background: 'rgba(0,0,0,0.4)',
+                    color: '{surface.200}'
+                },
                 formField: {
                     background: '{surface.0}',
                     disabledBackground: '{surface.200}',
@@ -360,7 +363,10 @@ export default {
                 focusRing: {
                     shadow: '0 0 0 0.2rem color-mix(in srgb, {primary.color}, transparent 80%)'
                 },
-                maskBackground: 'rgba(0,0,0,0.4)',
+                mask: {
+                    background: 'rgba(0,0,0,0.4)',
+                    color: '{surface.200}'
+                },
                 formField: {
                     background: '{surface.950}',
                     disabledBackground: '{surface.700}',