Tokens for Drawer

pull/5756/head
Cagatay Civici 2024-05-09 14:29:29 +03:00
parent e7853c5f70
commit 1fe8518158
5 changed files with 66 additions and 12 deletions

View File

@ -11,13 +11,13 @@ const theme = ({ dt }) => `
background: ${dt('drawer.background')};
color: ${dt('drawer.color')};
border: 1px solid ${dt('drawer.border.color')};
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
box-shadow: ${dt('drawer.shadow')};
}
.p-drawer-content {
overflow-y: auto;
flex-grow: 1;
padding: 0 1.125rem 1.125rem 1.125rem;
padding: ${dt('drawer.content.padding')};
}
.p-drawer-header {
@ -25,12 +25,12 @@ const theme = ({ dt }) => `
align-items: center;
justify-content: space-between;
flex-shrink: 0;
padding: 1.125rem;
padding: ${dt('drawer.header.padding')};
}
.p-drawer-title {
font-weight: 600;
font-size: 1.25rem;
font-weight: ${dt('drawer.title.font.weight')};
font-size: ${dt('drawer.title.font.size')};
}
.p-drawer-full .p-drawer {

View File

@ -1,7 +1,19 @@
export default {
root: {
background: '{content.background}',
borderColor: '{content.border.color}',
color: '{content.color}'
background: '{overlay.modal.background}',
borderColor: '{overlay.modal.border.color}',
color: '{overlay.modal.color}',
borderRadius: '{overlay.modal.border.radius}',
shadow: '{overlay.modal.shadow}'
},
header: {
padding: '{overlay.modal.padding}'
},
title: {
fontSize: '1.25rem',
fontWeight: '600'
},
content: {
padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}'
}
};

View File

@ -180,6 +180,11 @@ export default {
borderRadius: '{border.radius.md}',
padding: '0.75rem',
shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
},
modal: {
borderRadius: '{border.radius.sm}',
padding: '1.125rem',
shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)'
}
},
colorScheme: {
@ -252,6 +257,11 @@ export default {
background: '{surface.0}',
borderColor: '{surface.200}',
color: '{text.color}'
},
modal: {
background: '{surface.0}',
borderColor: '{surface.200}',
color: '{text.color}'
}
},
list: {
@ -357,6 +367,11 @@ export default {
background: '{surface.900}',
borderColor: '{surface.700}',
color: '{text.color}'
},
modal: {
background: '{surface.900}',
borderColor: '{surface.700}',
color: '{text.color}'
}
},
list: {

View File

@ -1,7 +1,19 @@
export default {
root: {
background: '{content.background}',
borderColor: '{content.border.color}',
color: '{content.color}'
background: '{overlay.modal.background}',
borderColor: '{overlay.modal.border.color}',
color: '{overlay.modal.color}',
borderRadius: '{overlay.modal.border.radius}',
shadow: '{overlay.modal.shadow}'
},
header: {
padding: '{overlay.modal.padding}'
},
title: {
fontSize: '1.25rem',
fontWeight: '600'
},
content: {
padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}'
}
};

View File

@ -178,7 +178,12 @@ export default {
popover: {
borderRadius: '{border.radius.sm}',
padding: '1rem',
shadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)'
shadow: '0 1px 3px rgba(0, 0, 0, 0.3)'
},
modal: {
borderRadius: '{border.radius.sm}',
padding: '1.25rem',
shadow: '0 1px 3px rgba(0, 0, 0, 0.3)'
}
},
colorScheme: {
@ -254,6 +259,11 @@ export default {
background: '{surface.0}',
borderColor: '{surface.200}',
color: '{text.color}'
},
modal: {
background: '{surface.0}',
borderColor: '{surface.200}',
color: '{text.color}'
}
},
list: {
@ -362,6 +372,11 @@ export default {
background: '{surface.900}',
borderColor: '{surface.700}',
color: '{text.color}'
},
modal: {
background: '{surface.900}',
borderColor: '{surface.700}',
color: '{text.color}'
}
},
list: {