Tokens for Dock

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);
+    background: ${dt('dock.background')};
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    border: 1px solid ${dt('dock.border.color')};
-    padding: 0.5rem 0.5rem;
+    padding: ${dt('dock.padding')};
-    border-radius: 0.5rem;
+    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;
+    padding: ${dt('dock.item.padding')};
-    border-radius: 6px;
+    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')};
+    box-shadow: ${dt('dock.item.focus.ring.shadow')};
-    outline-offset: ${dt('focus.ring.offset')};
+    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;
+    width: ${dt('dock.item.size')};
-    height: 3rem;
+    height: ${dt('dock.item.size')};
 }
 
 .p-dock-top {

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}'
+        }
+    }
+};

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}'
+        }
+    }
+};