Tokens for Drawer
parent
e7853c5f70
commit
1fe8518158
|
@ -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 {
|
||||
|
|
|
@ -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}'
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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}'
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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: {
|
||||
|
|
Loading…
Reference in New Issue