Cosmetics on Nora preset
parent
83ec2a8b3e
commit
8281a63f40
|
@ -1,24 +1,17 @@
|
||||||
export default {
|
export default {
|
||||||
|
root: {
|
||||||
padding: '{form.field.padding.y} {form.field.padding.x}',
|
padding: '{form.field.padding.y} {form.field.padding.x}',
|
||||||
|
borderRadius: '{content.border.radius}',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
width: '{focus.ring.width}',
|
width: '{focus.ring.width}',
|
||||||
style: '{focus.ring.style}',
|
style: '{focus.ring.style}',
|
||||||
color: '{focus.ring.color}',
|
color: '{focus.ring.color}',
|
||||||
offset: '{focus.ring.offset}',
|
offset: '{focus.ring.offset}',
|
||||||
shadow: '{focus.ring.shadow}'
|
shadow: '{focus.ring.shadow}'
|
||||||
},
|
|
||||||
colorScheme: {
|
|
||||||
light: {
|
|
||||||
display: {
|
|
||||||
hoverBackground: '{surface.100}',
|
|
||||||
hoverColor: '{surface.800}'
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
dark: {
|
|
||||||
display: {
|
display: {
|
||||||
hoverBackground: '{surface.800}',
|
hoverBackground: '{content.hover.background}',
|
||||||
hoverColor: '{surface.0}'
|
hoverColor: '{content.hover.color}'
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -3,11 +3,11 @@ export default {
|
||||||
padding: '{form.field.padding.y} {form.field.padding.x}',
|
padding: '{form.field.padding.y} {form.field.padding.x}',
|
||||||
borderRadius: '{content.border.radius}',
|
borderRadius: '{content.border.radius}',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
width: '{form.field.focus.ring.width}',
|
width: '{focus.ring.width}',
|
||||||
style: '{form.field.focus.ring.style}',
|
style: '{focus.ring.style}',
|
||||||
color: '{form.field.focus.ring.color}',
|
color: '{focus.ring.color}',
|
||||||
offset: '{form.field.focus.ring.offset}',
|
offset: '{focus.ring.offset}',
|
||||||
shadow: '{form.field.focus.ring.shadow}'
|
shadow: '{focus.ring.shadow}'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
display: {
|
display: {
|
||||||
|
|
|
@ -3,7 +3,7 @@ export default {
|
||||||
width: '2rem',
|
width: '2rem',
|
||||||
height: '2rem',
|
height: '2rem',
|
||||||
fontSize: '1rem',
|
fontSize: '1rem',
|
||||||
background: '{content.border.color}',
|
background: '{content.hover.background}',
|
||||||
borderRadius: '{content.border.radius}'
|
borderRadius: '{content.border.radius}'
|
||||||
},
|
},
|
||||||
group: {
|
group: {
|
||||||
|
|
|
@ -32,23 +32,23 @@ export default {
|
||||||
color: '{primary.contrast.color}'
|
color: '{primary.contrast.color}'
|
||||||
},
|
},
|
||||||
secondary: {
|
secondary: {
|
||||||
background: '{surface.100}',
|
background: '{surface.200}',
|
||||||
color: '{surface.600}'
|
color: '{surface.700}'
|
||||||
},
|
},
|
||||||
success: {
|
success: {
|
||||||
background: '{green.500}',
|
background: '{green.600}',
|
||||||
color: '{surface.0}'
|
color: '{surface.0}'
|
||||||
},
|
},
|
||||||
info: {
|
info: {
|
||||||
background: '{sky.500}',
|
background: '{sky.600}',
|
||||||
color: '{surface.0}'
|
color: '{surface.0}'
|
||||||
},
|
},
|
||||||
warn: {
|
warn: {
|
||||||
background: '{orange.500}',
|
background: '{orange.600}',
|
||||||
color: '{surface.0}'
|
color: '{surface.0}'
|
||||||
},
|
},
|
||||||
danger: {
|
danger: {
|
||||||
background: '{red.500}',
|
background: '{red.600}',
|
||||||
color: '{surface.0}'
|
color: '{surface.0}'
|
||||||
},
|
},
|
||||||
contrast: {
|
contrast: {
|
||||||
|
@ -62,23 +62,23 @@ export default {
|
||||||
color: '{primary.contrast.color}'
|
color: '{primary.contrast.color}'
|
||||||
},
|
},
|
||||||
secondary: {
|
secondary: {
|
||||||
background: '{surface.800}',
|
background: '{surface.700}',
|
||||||
color: '{surface.300}'
|
color: '{surface.200}'
|
||||||
},
|
},
|
||||||
success: {
|
success: {
|
||||||
background: '{green.400}',
|
background: '{green.500}',
|
||||||
color: '{green.950}'
|
color: '{green.950}'
|
||||||
},
|
},
|
||||||
info: {
|
info: {
|
||||||
background: '{sky.400}',
|
background: '{sky.500}',
|
||||||
color: '{sky.950}'
|
color: '{sky.950}'
|
||||||
},
|
},
|
||||||
warn: {
|
warn: {
|
||||||
background: '{orange.400}',
|
background: '{orange.500}',
|
||||||
color: '{orange.950}'
|
color: '{orange.950}'
|
||||||
},
|
},
|
||||||
danger: {
|
danger: {
|
||||||
background: '{red.400}',
|
background: '{red.500}',
|
||||||
color: '{red.950}'
|
color: '{red.950}'
|
||||||
},
|
},
|
||||||
contrast: {
|
contrast: {
|
||||||
|
|
|
@ -20,15 +20,15 @@ export default {
|
||||||
colorScheme: {
|
colorScheme: {
|
||||||
light: {
|
light: {
|
||||||
indicator: {
|
indicator: {
|
||||||
background: '{surface.200}',
|
background: '{surface.300}',
|
||||||
hoverBackground: '{surface.300}',
|
hoverBackground: '{surface.400}',
|
||||||
activeBackground: '{primary.color}'
|
activeBackground: '{primary.color}'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
dark: {
|
dark: {
|
||||||
indicator: {
|
indicator: {
|
||||||
background: '{surface.700}',
|
background: '{surface.600}',
|
||||||
hoverBackground: '{surface.600}',
|
hoverBackground: '{surface.500}',
|
||||||
activeBackground: '{primary.color}'
|
activeBackground: '{primary.color}'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,7 +12,7 @@ export default {
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
fontSize: '1.25rem',
|
fontSize: '1.25rem',
|
||||||
fontWeight: '600'
|
fontWeight: '700'
|
||||||
},
|
},
|
||||||
content: {
|
content: {
|
||||||
padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}'
|
padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}'
|
||||||
|
|
|
@ -11,7 +11,7 @@ export default {
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
fontSize: '1.5rem',
|
fontSize: '1.5rem',
|
||||||
fontWeight: '600'
|
fontWeight: '700'
|
||||||
},
|
},
|
||||||
content: {
|
content: {
|
||||||
padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}'
|
padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}'
|
||||||
|
|
|
@ -103,24 +103,24 @@ export default {
|
||||||
colorScheme: {
|
colorScheme: {
|
||||||
light: {
|
light: {
|
||||||
thumbnailNavButton: {
|
thumbnailNavButton: {
|
||||||
hoverBackground: '{surface.100}',
|
hoverBackground: '{surface.200}',
|
||||||
color: '{surface.600}',
|
color: '{text.color}',
|
||||||
hoverColor: '{surface.700}'
|
hoverColor: '{text.hover.color}'
|
||||||
},
|
},
|
||||||
indicatorButton: {
|
indicatorButton: {
|
||||||
background: '{surface.200}',
|
background: '{surface.300}',
|
||||||
hoverBackground: '{surface.300}'
|
hoverBackground: '{surface.400}'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
dark: {
|
dark: {
|
||||||
thumbnailNavButton: {
|
thumbnailNavButton: {
|
||||||
hoverBackground: '{surface.700}',
|
hoverBackground: '{surface.700}',
|
||||||
color: '{surface.400}',
|
color: '{surface.0}',
|
||||||
hoverColor: '{surface.0}'
|
hoverColor: '{surface.0}'
|
||||||
},
|
},
|
||||||
indicatorButton: {
|
indicatorButton: {
|
||||||
background: '{surface.700}',
|
background: '{surface.600}',
|
||||||
hoverBackground: '{surface.600}'
|
hoverBackground: '{surface.500}'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -19,7 +19,7 @@ export default {
|
||||||
background: 'rgba(255,255,255,0.1)',
|
background: 'rgba(255,255,255,0.1)',
|
||||||
borderColor: 'rgba(255,255,255,0.2)',
|
borderColor: 'rgba(255,255,255,0.2)',
|
||||||
borderWidth: '1px',
|
borderWidth: '1px',
|
||||||
borderRadius: '30px',
|
borderRadius: '{content.border.radius}',
|
||||||
padding: '.5rem',
|
padding: '.5rem',
|
||||||
gap: '0.5rem'
|
gap: '0.5rem'
|
||||||
},
|
},
|
||||||
|
@ -29,7 +29,7 @@ export default {
|
||||||
hoverColor: '{surface.0}',
|
hoverColor: '{surface.0}',
|
||||||
size: '3rem',
|
size: '3rem',
|
||||||
iconSize: '1.5rem',
|
iconSize: '1.5rem',
|
||||||
borderRadius: '50%',
|
borderRadius: '{content.border.radius}',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
width: '{focus.ring.width}',
|
width: '{focus.ring.width}',
|
||||||
style: '{focus.ring.style}',
|
style: '{focus.ring.style}',
|
||||||
|
|
|
@ -1,24 +1,17 @@
|
||||||
export default {
|
export default {
|
||||||
|
root: {
|
||||||
padding: '{form.field.padding.y} {form.field.padding.x}',
|
padding: '{form.field.padding.y} {form.field.padding.x}',
|
||||||
|
borderRadius: '{content.border.radius}',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
width: '{focus.ring.width}',
|
width: '{focus.ring.width}',
|
||||||
style: '{focus.ring.style}',
|
style: '{focus.ring.style}',
|
||||||
color: '{focus.ring.color}',
|
color: '{focus.ring.color}',
|
||||||
offset: '{focus.ring.offset}',
|
offset: '{focus.ring.offset}',
|
||||||
shadow: '{focus.ring.shadow}'
|
shadow: '{focus.ring.shadow}'
|
||||||
},
|
|
||||||
colorScheme: {
|
|
||||||
light: {
|
|
||||||
display: {
|
|
||||||
hoverBackground: '{surface.100}',
|
|
||||||
hoverColor: '{surface.800}'
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
dark: {
|
|
||||||
display: {
|
display: {
|
||||||
hoverBackground: '{surface.800}',
|
hoverBackground: '{content.hover.background}',
|
||||||
hoverColor: '{surface.0}'
|
hoverColor: '{content.hover.color}'
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
export default {
|
export default {
|
||||||
root: {
|
root: {
|
||||||
gap: '0.5rem'
|
gap: '0'
|
||||||
},
|
},
|
||||||
panel: {
|
panel: {
|
||||||
background: '{content.background}',
|
background: '{content.background}',
|
||||||
|
@ -8,13 +8,13 @@ export default {
|
||||||
borderWidth: '1px',
|
borderWidth: '1px',
|
||||||
color: '{content.color}',
|
color: '{content.color}',
|
||||||
padding: '0.25rem 0.25rem',
|
padding: '0.25rem 0.25rem',
|
||||||
borderRadius: '{content.border.radius}',
|
borderRadius: '0',
|
||||||
first: {
|
first: {
|
||||||
borderWidth: '1px',
|
borderWidth: '1px 1px 0 1px',
|
||||||
topBorderRadius: '{content.border.radius}'
|
topBorderRadius: '{content.border.radius}'
|
||||||
},
|
},
|
||||||
last: {
|
last: {
|
||||||
borderWidth: '1px',
|
borderWidth: '0 1px 1px 1px',
|
||||||
bottomBorderRadius: '{content.border.radius}'
|
bottomBorderRadius: '{content.border.radius}'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -5,13 +5,13 @@ export default {
|
||||||
colorScheme: {
|
colorScheme: {
|
||||||
light: {
|
light: {
|
||||||
root: {
|
root: {
|
||||||
background: '{surface.200}',
|
background: '{surface.300}',
|
||||||
animationBackground: 'rgba(255,255,255,0.4)'
|
animationBackground: 'rgba(255,255,255,0.4)'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
dark: {
|
dark: {
|
||||||
root: {
|
root: {
|
||||||
background: 'rgba(255, 255, 255, 0.06)',
|
background: 'rgba(255, 255, 255, 0.1)',
|
||||||
animationBackground: 'rgba(255, 255, 255, 0.04)'
|
animationBackground: 'rgba(255, 255, 255, 0.04)'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -40,7 +40,7 @@ export default {
|
||||||
fontSize: '1.143rem',
|
fontSize: '1.143rem',
|
||||||
fontWeight: '500',
|
fontWeight: '500',
|
||||||
borderRadius: '50%',
|
borderRadius: '50%',
|
||||||
shadow: '0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12)'
|
shadow: 'none'
|
||||||
},
|
},
|
||||||
verticalPanelContainer: {
|
verticalPanelContainer: {
|
||||||
paddingLeft: '1rem'
|
paddingLeft: '1rem'
|
||||||
|
|
|
@ -28,6 +28,6 @@ export default {
|
||||||
fontSize: '1.143rem',
|
fontSize: '1.143rem',
|
||||||
fontWeight: '500',
|
fontWeight: '500',
|
||||||
borderRadius: '50%',
|
borderRadius: '50%',
|
||||||
shadow: '0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12)'
|
shadow: 'none'
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -5,19 +5,19 @@ export default {
|
||||||
borderColor: '{content.border.color}'
|
borderColor: '{content.border.color}'
|
||||||
},
|
},
|
||||||
item: {
|
item: {
|
||||||
background: 'transparent',
|
background: '{content.background}',
|
||||||
hoverBackground: 'transparent',
|
hoverBackground: '{surface.200}',
|
||||||
activeBackground: 'transparent',
|
activeBackground: '{primary.color}',
|
||||||
borderWidth: '0 0 1px 0',
|
borderWidth: '0',
|
||||||
borderColor: '{content.border.color}',
|
borderColor: 'transparent',
|
||||||
hoverBorderColor: '{content.border.color}',
|
hoverBorderColor: 'transparent',
|
||||||
activeBorderColor: '{primary.color}',
|
activeBorderColor: 'transparent',
|
||||||
color: '{text.muted.color}',
|
color: '{text.muted.color}',
|
||||||
hoverColor: '{text.color}',
|
hoverColor: '{text.color}',
|
||||||
activeColor: '{primary.color}',
|
activeColor: '{primary.contrast.color}',
|
||||||
padding: '1rem 1.125rem',
|
padding: '1rem 1.25rem',
|
||||||
fontWeight: '600',
|
fontWeight: '700',
|
||||||
margin: '0 0 -1px 0',
|
margin: '0',
|
||||||
gap: '0.5rem',
|
gap: '0.5rem',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
width: '{focus.ring.width}',
|
width: '{focus.ring.width}',
|
||||||
|
@ -28,13 +28,13 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
itemIcon: {
|
itemIcon: {
|
||||||
color: '{text.muted.color}',
|
color: '{text.color}',
|
||||||
hoverColor: '{text.color}',
|
hoverColor: '{text.color}',
|
||||||
activeColor: '{primary.color}'
|
activeColor: '{primary.contrast.color}'
|
||||||
},
|
},
|
||||||
activeBar: {
|
activeBar: {
|
||||||
height: '1px',
|
height: '0',
|
||||||
bottom: '-1px',
|
bottom: '0',
|
||||||
background: '{primary.color}'
|
background: 'transparent'
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -13,28 +13,28 @@ export default {
|
||||||
colorScheme: {
|
colorScheme: {
|
||||||
light: {
|
light: {
|
||||||
primary: {
|
primary: {
|
||||||
background: '{primary.100}',
|
background: '{primary.color}',
|
||||||
color: '{primary.700}'
|
color: '{primary.contrast.color}'
|
||||||
},
|
},
|
||||||
secondary: {
|
secondary: {
|
||||||
background: '{surface.100}',
|
background: '{surface.200}',
|
||||||
color: '{surface.600}'
|
color: '{surface.700}'
|
||||||
},
|
},
|
||||||
success: {
|
success: {
|
||||||
background: '{green.100}',
|
background: '{green.600}',
|
||||||
color: '{green.700}'
|
color: '{surface.0}'
|
||||||
},
|
},
|
||||||
info: {
|
info: {
|
||||||
background: '{sky.100}',
|
background: '{sky.600}',
|
||||||
color: '{sky.700}'
|
color: '{surface.0}'
|
||||||
},
|
},
|
||||||
warn: {
|
warn: {
|
||||||
background: '{orange.100}',
|
background: '{orange.600}',
|
||||||
color: '{orange.700}'
|
color: '{surface.0}'
|
||||||
},
|
},
|
||||||
danger: {
|
danger: {
|
||||||
background: '{red.100}',
|
background: '{red.600}',
|
||||||
color: '{red.700}'
|
color: '{surface.0}'
|
||||||
},
|
},
|
||||||
contrast: {
|
contrast: {
|
||||||
background: '{surface.950}',
|
background: '{surface.950}',
|
||||||
|
@ -43,28 +43,28 @@ export default {
|
||||||
},
|
},
|
||||||
dark: {
|
dark: {
|
||||||
primary: {
|
primary: {
|
||||||
background: 'color-mix(in srgb, {primary.500}, transparent 84%)',
|
background: '{primary.color}',
|
||||||
color: '{primary.300}'
|
color: '{primary.contrast.color}'
|
||||||
},
|
},
|
||||||
secondary: {
|
secondary: {
|
||||||
background: '{surface.800}',
|
background: '{surface.700}',
|
||||||
color: '{surface.300}'
|
color: '{surface.200}'
|
||||||
},
|
},
|
||||||
success: {
|
success: {
|
||||||
background: 'color-mix(in srgb, {green.500}, transparent 84%)',
|
background: '{green.500}',
|
||||||
color: '{green.300}'
|
color: '{green.950}'
|
||||||
},
|
},
|
||||||
info: {
|
info: {
|
||||||
background: 'color-mix(in srgb, {sky.500}, transparent 84%)',
|
background: '{sky.500}',
|
||||||
color: '{sky.300}'
|
color: '{sky.950}'
|
||||||
},
|
},
|
||||||
warn: {
|
warn: {
|
||||||
background: 'color-mix(in srgb, {orange.500}, transparent 84%)',
|
background: '{orange.500}',
|
||||||
color: '{orange.300}'
|
color: '{orange.950}'
|
||||||
},
|
},
|
||||||
danger: {
|
danger: {
|
||||||
background: 'color-mix(in srgb, {red.500}, transparent 84%)',
|
background: '{red.500}',
|
||||||
color: '{red.300}'
|
color: '{red.950}'
|
||||||
},
|
},
|
||||||
contrast: {
|
contrast: {
|
||||||
background: '{surface.0}',
|
background: '{surface.0}',
|
||||||
|
|
|
@ -16,13 +16,13 @@ export default {
|
||||||
size: '1.125rem',
|
size: '1.125rem',
|
||||||
borderRadius: '50%',
|
borderRadius: '50%',
|
||||||
borderWidth: '2px',
|
borderWidth: '2px',
|
||||||
background: '{content.background}',
|
background: '{primary.color}',
|
||||||
borderColor: '{content.border.color}',
|
borderColor: '{primary.color}',
|
||||||
content: {
|
content: {
|
||||||
borderRadius: '50%',
|
borderRadius: '50%',
|
||||||
size: '0.375rem',
|
size: '0.375rem',
|
||||||
background: '{primary.color}',
|
background: 'transparent',
|
||||||
insetShadow: '0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12)'
|
insetShadow: 'none'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
eventConnector: {
|
eventConnector: {
|
||||||
|
|
|
@ -9,14 +9,14 @@ export default {
|
||||||
colorScheme: {
|
colorScheme: {
|
||||||
light: {
|
light: {
|
||||||
root: {
|
root: {
|
||||||
background: '{surface.700}',
|
background: '{surface.900}',
|
||||||
color: '{surface.0}'
|
color: '{surface.0}'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
dark: {
|
dark: {
|
||||||
root: {
|
root: {
|
||||||
background: '{surface.700}',
|
background: '{surface.0}',
|
||||||
color: '{surface.0}'
|
color: '{surface.900}'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -97,7 +97,7 @@ export default {
|
||||||
colorScheme: {
|
colorScheme: {
|
||||||
light: {
|
light: {
|
||||||
root: {
|
root: {
|
||||||
borderColor: '{content.border.color}'
|
borderColor: '{surface.300}'
|
||||||
},
|
},
|
||||||
bodyCell: {
|
bodyCell: {
|
||||||
selectedBorderColor: '{primary.100}'
|
selectedBorderColor: '{primary.100}'
|
||||||
|
@ -105,7 +105,7 @@ export default {
|
||||||
},
|
},
|
||||||
dark: {
|
dark: {
|
||||||
root: {
|
root: {
|
||||||
borderColor: '{surface.800}'
|
borderColor: '{surface.700}'
|
||||||
},
|
},
|
||||||
bodyCell: {
|
bodyCell: {
|
||||||
selectedBorderColor: '{primary.900}'
|
selectedBorderColor: '{primary.900}'
|
||||||
|
|
Loading…
Reference in New Issue