From 731951b0a96a852c69af25c3f8460ac337b6e021 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 10 May 2024 12:40:10 +0300
Subject: [PATCH] Tokens for Dock

---
 components/lib/dock/style/DockStyle.js   | 21 +++++++++++----------
 components/lib/themes/aura/dock/index.js | 21 ++++++++++++++++++++-
 components/lib/themes/lara/dock/index.js | 21 ++++++++++++++++++++-
 3 files changed, 51 insertions(+), 12 deletions(-)

diff --git a/components/lib/dock/style/DockStyle.js b/components/lib/dock/style/DockStyle.js
index 64bd4b40e..ebd21ec9d 100644
--- a/components/lib/dock/style/DockStyle.js
+++ b/components/lib/dock/style/DockStyle.js
@@ -13,10 +13,10 @@ const theme = ({ dt }) => `
 .p-dock-list-container {
     display: flex;
     pointer-events: auto;
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    padding: 0.5rem 0.5rem;
-    border-radius: 0.5rem;
+    background: ${dt('dock.background')};
+    border: 1px solid ${dt('dock.border.color')};
+    padding: ${dt('dock.padding')};
+    border-radius: ${dt('dock.border.radius')};
 }
 
 .p-dock-list {
@@ -32,13 +32,14 @@ const theme = ({ dt }) => `
 .p-dock-item {
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     will-change: transform;
-    padding: 0.5rem;
-    border-radius: 6px;
+    padding: ${dt('dock.item.padding')};
+    border-radius: ${dt('dock.item.border.radius')};
 }
 
 .p-dock-item.p-focus {
-    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
-    outline-offset: ${dt('focus.ring.offset')};
+    box-shadow: ${dt('dock.item.focus.ring.shadow')};
+    outline: ${dt('dock.item.focus.ring.width')} ${dt('dock.item.focus.ring.style')} ${dt('dock.item.focus.ring.color')};
+    outline-offset: ${dt('dock.item.focus.ring.offset')};
 }
 
 .p-dock-item-link {
@@ -49,8 +50,8 @@ const theme = ({ dt }) => `
     position: relative;
     overflow: hidden;
     cursor: default;
-    width: 3rem;
-    height: 3rem;
+    width: ${dt('dock.item.size')};
+    height: ${dt('dock.item.size')};
 }
 
 .p-dock-top {
diff --git a/components/lib/themes/aura/dock/index.js b/components/lib/themes/aura/dock/index.js
index ff8b4c563..19548ace8 100644
--- a/components/lib/themes/aura/dock/index.js
+++ b/components/lib/themes/aura/dock/index.js
@@ -1 +1,20 @@
-export default {};
+export default {
+    root: {
+        background: 'rgba(255, 255, 255, 0.1)',
+        borderColor: 'rgba(255, 255, 255, 0.2)',
+        padding: '0.5rem',
+        borderRadius: '{border.radius.xl}'
+    },
+    item: {
+        borderRadius: '{content.border.radius}',
+        padding: '0.5rem',
+        size: '3rem',
+        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/dock/index.js b/components/lib/themes/lara/dock/index.js
index ff8b4c563..042a8a7dc 100644
--- a/components/lib/themes/lara/dock/index.js
+++ b/components/lib/themes/lara/dock/index.js
@@ -1 +1,20 @@
-export default {};
+export default {
+    root: {
+        background: 'rgba(255, 255, 255, 0.1)',
+        borderColor: 'rgba(255, 255, 255, 0.2)',
+        padding: '0.5rem',
+        borderRadius: '{border.radius.lg}'
+    },
+    item: {
+        borderRadius: '{content.border.radius}',
+        padding: '0.5rem',
+        size: '3rem',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
+    }
+};