Tokens for Dock

pull/5756/head
Cagatay Civici 2024-05-10 12:40:10 +03:00
parent cd3ee39e5f
commit 731951b0a9
3 changed files with 51 additions and 12 deletions

View File

@ -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 {

View File

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

View File

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