From f3beedf2c92b9a01fec6810eca4228a902618e8c Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 13 May 2024 13:49:38 +0300
Subject: [PATCH] Tokens for Galleria

---
 .../lib/galleria/style/GalleriaStyle.js       | 110 ++++++-----
 components/lib/themes/aura/galleria/index.js  | 169 ++++++++++-------
 components/lib/themes/lara/galleria/index.js  | 172 +++++++++++-------
 3 files changed, 280 insertions(+), 171 deletions(-)

diff --git a/components/lib/galleria/style/GalleriaStyle.js b/components/lib/galleria/style/GalleriaStyle.js
index bea3a3c88..320f706b9 100644
--- a/components/lib/galleria/style/GalleriaStyle.js
+++ b/components/lib/galleria/style/GalleriaStyle.js
@@ -1,6 +1,14 @@
 import BaseStyle from 'primevue/base/style';
 
 const theme = ({ dt }) => `
+.p-galleria {
+    overflow: hidden;
+    border-style: solid;
+    border-width: ${dt('galleria.border.width')};
+    border-color: ${dt('galleria.border.color')};
+    border-radius: ${dt('galleria.border.radius')};
+}
+
 .p-galleria-content {
     display: flex;
     flex-direction: column;
@@ -21,40 +29,48 @@ const theme = ({ dt }) => `
 .p-galleria-nav-button {
     position: absolute;
     top: 50%;
-    margin-top: -0.5rem;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
-    background: transparent;
+    background: ${dt('galleria.nav.button.background')};
     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')};
-    border-radius: 50%;
-    margin: 0 0.5rem;
+    width: ${dt('galleria.nav.button.size')};
+    height: ${dt('galleria.nav.button.size')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    margin: calc(-1 * calc(${dt('galleria.nav.button.size')}) / 2) ${dt('galleria.nav.button.gutter')} 0 ${dt('galleria.nav.button.gutter')};
     padding: 0;
     user-select: none;
-    border: none;
+    border: 0 none;
     cursor: pointer;
+    outline-color: transparent;
 }
 
 .p-galleria-nav-button:not(.p-disabled):hover {
     background: ${dt('galleria.nav.button.hover.background')};
+    color: ${dt('galleria.nav.button.hover.color')};
+}
+
+.p-galleria-nav-button:not(.p-disabled):focus-visible {
+    box-shadow: ${dt('galleria.nav.button.focus.ring.shadow')};
+    outline: ${dt('galleria.nav.button.focus.ring.width')} ${dt('galleria.nav.button.focus.ring.style')} ${dt('galleria.nav.button.focus.ring.color')};
+    outline-offset: ${dt('galleria.nav.button.focus.ring.offset')};
 }
 
 .p-galleria-next-icon,
 .p-galleria-prev-icon {
-    font-size: 1.5rem;
-    width: 1.5rem;
-    height: 1.5rem;
+    font-size: ${dt('galleria.nav.icon.size')};
+    width: ${dt('galleria.nav.icon.size')};
+    height: ${dt('galleria.nav.icon.size')};
 }
 
 .p-galleria-prev-button {
+    border-radius: ${dt('galleria.nav.button.prev.border.radius')};
     left: 0;
 }
 
 .p-galleria-next-button {
+    border-radius: ${dt('galleria.nav.button.next.border.radius')};
     right: 0;
 }
 
@@ -88,7 +104,7 @@ const theme = ({ dt }) => `
     width: 100%;
     background: ${dt('galleria.caption.background')};
     color: ${dt('galleria.caption.color')};
-    padding: 1rem;
+    padding: ${dt('galleria.caption.padding')};
 }
 
 .p-galleria-thumbnails {
@@ -106,18 +122,18 @@ const theme = ({ dt }) => `
     align-items: center;
     overflow: hidden;
     position: relative;
-    margin: 0.5rem;
+    margin: 0 ${dt('galleria.thumbnail.nav.button.gutter')};
     padding: 0;
     border: none;
     user-select: none;
     cursor: pointer;
     background: transparent;
     color: ${dt('galleria.thumbnail.nav.button.color')};
-    width: 2rem;
-    height: 2rem;
+    width: ${dt('galleria.thumbnail.nav.button.size')};
+    height: ${dt('galleria.thumbnail.nav.button.size')};
     transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     outline-color: transparent;
-    border-radius: 50%;
+    border-radius: ${dt('galleria.thumbnail.nav.button.border.radius')};
 }
 
 .p-galleria-thumbnail-nav-button:hover {
@@ -126,21 +142,23 @@ const theme = ({ dt }) => `
 }
 
 .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')};
+    box-shadow: ${dt('galleria.thumbnail.nav.button.focus.ring.shadow')};
+    outline: ${dt('galleria.thumbnail.nav.button.focus.ring.width')} ${dt('galleria.thumbnail.nav.button.focus.ring.style')} ${dt('galleria.thumbnail.nav.button.focus.ring.color')};
+    outline-offset: ${dt('galleria.thumbnail.nav.button.focus.ring.offset')};
 }
 
-.p-galleria-thumbnail-nav-button span {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-next-icon,
+.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-prev-icon {
+    font-size: ${dt('galleria.thumbnail.nav.button.icon.size')};
+    width: ${dt('galleria.thumbnail.nav.button.icon.size')};
+    height: ${dt('galleria.thumbnail.nav.button.icon.size')};
 }
 
 .p-galleria-thumbnails-content {
     display: flex;
     flex-direction: row;
     background: ${dt('galleria.thumbnails.content.background')};
-    padding: 1rem 0.25rem;
+    padding: ${dt('galleria.thumbnails.content.padding')};
 }
 
 .p-galleria-thumbnails-viewport {
@@ -165,11 +183,6 @@ const theme = ({ dt }) => `
     outline-color: transparent;
 }
 
-.p-galleria-thumbnail:focus-visible {
-    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
-    outline-offset: ${dt('focus.ring.offset')};
-}
-
 .p-galleria-thumbnail-item:hover {
     opacity: 1;
     transition: opacity 0.3s;
@@ -215,8 +228,8 @@ const theme = ({ dt }) => `
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 1rem;
-    gap: 0.5rem;
+    padding: ${dt('galleria.indicator.list.padding')};
+    gap: ${dt('galleria.indicator.list.gap')};
     margin: 0;
     list-style: none;
 }
@@ -225,11 +238,11 @@ const theme = ({ dt }) => `
     display: inline-flex;
     align-items: center;
     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')};
+    width: ${dt('galleria.indicator.button.width')};
+    height: ${dt('galleria.indicator.button.height')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
     outline-color: transparent;
-    border-radius: 50%;
+    border-radius: ${dt('galleria.indicator.button.border.radius')};
     margin: 0;
     padding: 0;
     border: none;
@@ -242,8 +255,9 @@ const theme = ({ dt }) => `
 }
 
 .p-galleria-indicator-button:focus-visible {
-    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
-    outline-offset: ${dt('focus.ring.offset')};
+    box-shadow: ${dt('galleria.indicator.button.focus.ring.shadow')};
+    outline: ${dt('galleria.indicator.button.focus.ring.width')} ${dt('galleria.indicator.button.focus.ring.style')} ${dt('galleria.indicator.button.focus.ring.color')};
+    outline-offset: ${dt('galleria.indicator.button.focus.ring.offset')};
 }
 
 .p-galleria-indicator-active .p-galleria-indicator-button {
@@ -338,24 +352,24 @@ const theme = ({ dt }) => `
     justify-content: center;
     align-items: center;
     overflow: hidden;
-    margin: 0.5rem;
-    background: transparent;
+    margin: ${dt('galleria.close.button.gutter')};
+    background: ${dt('galleria.close.button.background')};
     color: ${dt('galleria.close.button.color')};
-    width: 3rem;
-    height: 3rem;
+    width: ${dt('galleria.close.button.size')};
+    height: ${dt('galleria.close.button.size')};
     padding: 0;
     border: none;
     user-select: none;
     cursor: pointer;
-    border-radius: 50%;
+    border-radius: ${dt('galleria.close.button.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')};
 }
 
 .p-galleria-close-icon {
-    font-size: 1.5rem;
-    width: 1.5rem;
-    height: 1.5rem;
+    font-size: ${dt('galleria.close.button.icon.size')};
+    width: ${dt('galleria.close.button.icon.size')};
+    height: ${dt('galleria.close.button.icon.size')};
 }
 
 .p-galleria-close-button:hover {
@@ -364,14 +378,14 @@ const theme = ({ dt }) => `
 }
 
 .p-galleria-close-button:focus-visible {
-    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
-    outline-offset: ${dt('focus.ring.offset')};
+    box-shadow: ${dt('galleria.close.button.focus.ring.shadow')};
+    outline: ${dt('galleria.close.button.focus.ring.width')} ${dt('galleria.close.button.focus.ring.style')} ${dt('galleria.close.button.focus.ring.color')};
+    outline-offset: ${dt('galleria.close.button.focus.ring.offset')};
 }
 
 .p-galleria-mask .p-galleria-nav-button {
     position: fixed;
     top: 50%;
-    margin-top: -0.5rem;
 }
 
 .p-galleria-enter-active {
diff --git a/components/lib/themes/aura/galleria/index.js b/components/lib/themes/aura/galleria/index.js
index 2fbf64b13..6d100eafd 100644
--- a/components/lib/themes/aura/galleria/index.js
+++ b/components/lib/themes/aura/galleria/index.js
@@ -1,81 +1,126 @@
 export default {
+    root: {
+        borderWidth: '1px',
+        borderColor: '{content.border.color}',
+        borderRadius: '{content.border.radius}'
+    },
+    navButton: {
+        background: 'rgba(255, 255, 255, 0.1)',
+        hoverBackground: 'rgba(255, 255, 255, 0.2)',
+        color: '{surface.100}',
+        hoverColor: '{surface.0}',
+        size: '3rem',
+        gutter: '0.5rem',
+        prev: {
+            borderRadius: '50%'
+        },
+        next: {
+            borderRadius: '50%'
+        },
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
+    },
+    navIcon: {
+        size: '1.5rem'
+    },
+    thumbnailsContent: {
+        background: '{content.background}',
+        padding: '1rem 0.25rem'
+    },
+    thumbnailNavButton: {
+        size: '2rem',
+        borderRadius: '{content.border.radius}',
+        gutter: '0.5rem',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
+    },
+    thumbnailNavButtonIcon: {
+        size: '1rem'
+    },
+    caption: {
+        background: 'rgba(0, 0, 0, 0.5)',
+        color: '{surface.100}',
+        padding: '1rem'
+    },
+    indicatorList: {
+        gap: '0.5rem',
+        padding: '1rem'
+    },
+    indicatorButton: {
+        width: '1rem',
+        height: '1rem',
+        activeBackground: '{primary.color}',
+        borderRadius: '50%',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
+    },
+    insetIndicatorList: {
+        background: 'rgba(0, 0, 0, 0.5)'
+    },
+    insetIndicatorButton: {
+        background: 'rgba(255, 255, 255, 0.4)',
+        hoverBackground: 'rgba(255, 255, 255, 0.6)',
+        activeBackground: 'rgba(255, 255, 255, 0.9)'
+    },
+    mask: {
+        background: '{mask.background}',
+        color: '{mask.color}'
+    },
+    closeButton: {
+        size: '3rem',
+        gutter: '0.5rem',
+        background: 'rgba(255, 255, 255, 0.1)',
+        hoverBackground: 'rgba(255, 255, 255, 0.2)',
+        color: '{surface.50}',
+        hoverColor: '{surface.0}',
+        borderRadius: '50%',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
+    },
+    closeButtonIcon: {
+        size: '1.5rem'
+    },
     colorScheme: {
         light: {
-            navButton: {
-                hoverBackground: 'rgba(255, 255, 255, 0.1)',
-                color: '{surface.100}'
-            },
             thumbnailNavButton: {
-                hoverBackground: '{surface.200}',
+                hoverBackground: '{surface.100}',
                 color: '{surface.600}',
                 hoverColor: '{surface.700}'
             },
-            thumbnailsContent: {
-                background: '{surface.50}'
-            },
-            caption: {
-                background: 'rgba(0, 0, 0, 0.5)',
-                color: '{surface.100}'
-            },
             indicatorButton: {
                 background: '{surface.200}',
-                hoverBackground: '{surface.300}',
-                activeBackground: '{primary.color}'
-            },
-            insetIndicatorList: {
-                background: 'rgba(0, 0, 0, 0.5)'
-            },
-            insetIndicatorButton: {
-                background: 'rgba(255, 255, 255, 0.4)',
-                hoverBackground: 'rgba(255, 255, 255, 0.6)',
-                activeBackground: 'rgba(255, 255, 255, 0.9)'
-            },
-            mask: {
-                background: 'rgba(0,0,0,0.9)'
-            },
-            closeButton: {
-                hoverBackground: 'rgba(255,255,255,0.1)',
-                color: '{surface.50}',
-                hoverColor: '{surface.0}'
+                hoverBackground: '{surface.300}'
             }
         },
         dark: {
-            navButton: {
-                hoverBackground: 'rgba(255, 255, 255, 0.1)',
-                color: '{surface.400}'
-            },
             thumbnailNavButton: {
-                hoverBackground: '{surface.800}',
+                hoverBackground: '{surface.700}',
                 color: '{surface.400}',
-                hoverColor: '{surface.300}'
-            },
-            thumbnailsContent: {
-                background: '{surface.950}'
-            },
-            caption: {
-                background: 'rgba(0, 0, 0, 0.5)',
-                color: '{surface.100}'
+                hoverColor: '{surface.0}'
             },
             indicatorButton: {
-                background: '{surface.200}',
-                hoverBackground: '{surface.300}',
-                activeBackground: '{primary.color}'
-            },
-            insetIndicatorList: {
-                background: 'rgba(0, 0, 0, 0.5)'
-            },
-            insetIndicatorButton: {
-                background: 'rgba(255, 255, 255, 0.4)',
-                hoverBackground: 'rgba(255, 255, 255, 0.6)',
-                activeBackground: 'rgba(255, 255, 255, 0.9)'
-            },
-            mask: {
-                background: 'rgba(0,0,0,0.9)'
-            },
-            closeButton: {
-                hoverBackground: 'rgba(255,255,255,0.1)',
-                color: '{surface.50}',
-                hoverColor: '{surface.0}'
+                background: '{surface.700}',
+                hoverBackground: '{surface.600}'
             }
         }
     }
diff --git a/components/lib/themes/lara/galleria/index.js b/components/lib/themes/lara/galleria/index.js
index 2fbf64b13..896aefe26 100644
--- a/components/lib/themes/lara/galleria/index.js
+++ b/components/lib/themes/lara/galleria/index.js
@@ -1,81 +1,131 @@
 export default {
+    root: {
+        borderWidth: '1px',
+        borderColor: '{content.border.color}',
+        borderRadius: '{content.border.radius}'
+    },
+    navButton: {
+        background: 'rgba(255, 255, 255, 0.1)',
+        hoverBackground: 'rgba(255, 255, 255, 0.2)',
+        color: '{surface.100}',
+        hoverColor: '{surface.0}',
+        size: '3rem',
+        gutter: '0',
+        prev: {
+            borderRadius: '0 12px 12px 0'
+        },
+        next: {
+            borderRadius: '12px 0 0 12px'
+        },
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
+    },
+    navIcon: {
+        size: '1.5rem'
+    },
+    thumbnailsContent: {
+        padding: '1rem 0.25rem'
+    },
+    thumbnailNavButton: {
+        size: '2rem',
+        borderRadius: '{content.border.radius}',
+        gutter: '0.5rem',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
+    },
+    thumbnailNavButtonIcon: {
+        size: '1rem'
+    },
+    caption: {
+        background: 'rgba(0, 0, 0, 0.5)',
+        color: '{surface.100}',
+        padding: '1rem'
+    },
+    indicatorList: {
+        gap: '0.5rem',
+        padding: '1rem'
+    },
+    indicatorButton: {
+        width: '1rem',
+        height: '1rem',
+        activeBackground: '{primary.color}',
+        borderRadius: '50%',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
+    },
+    insetIndicatorList: {
+        background: 'rgba(0, 0, 0, 0.5)'
+    },
+    insetIndicatorButton: {
+        background: 'rgba(255, 255, 255, 0.4)',
+        hoverBackground: 'rgba(255, 255, 255, 0.6)',
+        activeBackground: 'rgba(255, 255, 255, 0.9)'
+    },
+    mask: {
+        background: '{mask.background}',
+        color: '{mask.color}'
+    },
+    closeButton: {
+        size: '3rem',
+        gutter: '0.5rem',
+        background: 'rgba(255, 255, 255, 0.1)',
+        hoverBackground: 'rgba(255, 255, 255, 0.2)',
+        color: '{surface.50}',
+        hoverColor: '{surface.0}',
+        borderRadius: '50%',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
+    },
+    closeButtonIcon: {
+        size: '1.5rem'
+    },
     colorScheme: {
         light: {
-            navButton: {
-                hoverBackground: 'rgba(255, 255, 255, 0.1)',
-                color: '{surface.100}'
-            },
-            thumbnailNavButton: {
-                hoverBackground: '{surface.200}',
-                color: '{surface.600}',
-                hoverColor: '{surface.700}'
-            },
             thumbnailsContent: {
                 background: '{surface.50}'
             },
-            caption: {
-                background: 'rgba(0, 0, 0, 0.5)',
-                color: '{surface.100}'
+            thumbnailNavButton: {
+                hoverBackground: '{surface.100}',
+                color: '{surface.600}',
+                hoverColor: '{surface.700}'
             },
             indicatorButton: {
                 background: '{surface.200}',
-                hoverBackground: '{surface.300}',
-                activeBackground: '{primary.color}'
-            },
-            insetIndicatorList: {
-                background: 'rgba(0, 0, 0, 0.5)'
-            },
-            insetIndicatorButton: {
-                background: 'rgba(255, 255, 255, 0.4)',
-                hoverBackground: 'rgba(255, 255, 255, 0.6)',
-                activeBackground: 'rgba(255, 255, 255, 0.9)'
-            },
-            mask: {
-                background: 'rgba(0,0,0,0.9)'
-            },
-            closeButton: {
-                hoverBackground: 'rgba(255,255,255,0.1)',
-                color: '{surface.50}',
-                hoverColor: '{surface.0}'
+                hoverBackground: '{surface.300}'
             }
         },
         dark: {
-            navButton: {
-                hoverBackground: 'rgba(255, 255, 255, 0.1)',
-                color: '{surface.400}'
+            thumbnailsContent: {
+                background: '{surface.800}'
             },
             thumbnailNavButton: {
-                hoverBackground: '{surface.800}',
+                hoverBackground: '{surface.700}',
                 color: '{surface.400}',
-                hoverColor: '{surface.300}'
-            },
-            thumbnailsContent: {
-                background: '{surface.950}'
-            },
-            caption: {
-                background: 'rgba(0, 0, 0, 0.5)',
-                color: '{surface.100}'
+                hoverColor: '{surface.0}'
             },
             indicatorButton: {
-                background: '{surface.200}',
-                hoverBackground: '{surface.300}',
-                activeBackground: '{primary.color}'
-            },
-            insetIndicatorList: {
-                background: 'rgba(0, 0, 0, 0.5)'
-            },
-            insetIndicatorButton: {
-                background: 'rgba(255, 255, 255, 0.4)',
-                hoverBackground: 'rgba(255, 255, 255, 0.6)',
-                activeBackground: 'rgba(255, 255, 255, 0.9)'
-            },
-            mask: {
-                background: 'rgba(0,0,0,0.9)'
-            },
-            closeButton: {
-                hoverBackground: 'rgba(255,255,255,0.1)',
-                color: '{surface.50}',
-                hoverColor: '{surface.0}'
+                background: '{surface.700}',
+                hoverBackground: '{surface.600}'
             }
         }
     }