Updated tokens for Buttons
Cagatay Civici
parent
46fd1be593
commit
3520377e74
|
|
@ -12,14 +12,14 @@ const theme = ({ dt }) => `
|
|||
color: ${dt('button.primary.color')};
|
||||
background: ${dt('button.primary.background')};
|
||||
border: 1px solid ${dt('button.primary.border.color')};
|
||||
padding: 0.5rem 1rem;
|
||||
padding: ${dt('button.padding.y')} ${dt('button.padding.x')};
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
font-feature-settings: inherit;
|
||||
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
|
||||
border-radius: ${dt('border.radius.md')};
|
||||
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
|
||||
border-radius: ${dt('button.border.radius')};
|
||||
outline-color: transparent;
|
||||
gap: 0.5rem;
|
||||
gap: ${dt('button.gap')};
|
||||
}
|
||||
|
||||
.p-button:disabled {
|
||||
|
|
@ -36,31 +36,32 @@ const theme = ({ dt }) => `
|
|||
|
||||
.p-button-icon-only {
|
||||
justify-content: center;
|
||||
width: 2.5rem;
|
||||
padding: 0.5rem 0;
|
||||
width: ${dt('button.icon.only.width')};
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.p-button-icon-only.p-button-rounded {
|
||||
border-radius: 50%;
|
||||
height: 2.5rem;
|
||||
height: ${dt('button.icon.only.width')};
|
||||
}
|
||||
|
||||
.p-button-sm {
|
||||
font-size: 0.875rem;
|
||||
padding: 0.375rem 0.875rem;
|
||||
font-size: ${dt('button.sm.font.size')};
|
||||
padding: ${dt('button.sm.padding.y')} ${dt('button.sm.padding.x')};
|
||||
}
|
||||
|
||||
.p-button-sm .p-button-icon {
|
||||
font-size: 0.875rem;
|
||||
font-size: ${dt('button.sm.font.size')};
|
||||
}
|
||||
|
||||
.p-button-lg {
|
||||
font-size: 1.25rem;
|
||||
padding: 0.625rem 1.25rem;
|
||||
font-size: ${dt('button.lg.font.size')};
|
||||
padding: ${dt('button.lg.padding.y')} ${dt('button.lg.padding.x')};
|
||||
}
|
||||
|
||||
.p-button-lg .p-button-icon {
|
||||
font-size: 1.25rem;
|
||||
font-size: ${dt('button.lg.font.size')};
|
||||
}
|
||||
|
||||
.p-button-vertical {
|
||||
|
|
@ -68,7 +69,7 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-button-label {
|
||||
font-weight: 500;
|
||||
font-weight: ${dt('button.label.font.weight')};
|
||||
}
|
||||
|
||||
.p-fluid .p-button {
|
||||
|
|
@ -76,7 +77,7 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-fluid .p-button-icon-only {
|
||||
width: 2.5rem;
|
||||
width: ${dt('button.icon.only.width')};
|
||||
}
|
||||
|
||||
.p-button:not(:disabled):hover {
|
||||
|
|
@ -92,12 +93,12 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-button:focus-visible {
|
||||
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('button.primary.background')};
|
||||
outline-offset: ${dt('focus.ring.offset')};
|
||||
box-shadow: ${dt('button.primary.focus.ring.shadow')};
|
||||
outline: ${dt('button.focus.ring.width')} ${dt('button.focus.ring.style')} ${dt('button.primary.focus.ring.color')};
|
||||
outline-offset: ${dt('button.focus.ring.offset')};
|
||||
}
|
||||
|
||||
.p-button .p-badge {
|
||||
margin-left: 0.5rem;
|
||||
min-width: 1rem;
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
|
|
@ -106,14 +107,13 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-button-raised {
|
||||
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
box-shadow: ${dt('button.raised.shadow')};
|
||||
}
|
||||
|
||||
.p-button-rounded {
|
||||
border-radius: 2rem;
|
||||
border-radius: ${dt('button.rounded.border.radius')};
|
||||
}
|
||||
|
||||
/* Default Severities */
|
||||
.p-button-secondary {
|
||||
background: ${dt('button.secondary.background')};
|
||||
border: 1px solid ${dt('button.secondary.border.color')};
|
||||
|
|
@ -132,6 +132,11 @@ const theme = ({ dt }) => `
|
|||
color: ${dt('button.secondary.active.color')};
|
||||
}
|
||||
|
||||
.p-button-secondary:focus-visible {
|
||||
outline-color: ${dt('button.secondary.focus.ring.color')};
|
||||
box-shadow: ${dt('button.secondary.focus.ring.shadow')};
|
||||
}
|
||||
|
||||
.p-button-success {
|
||||
background: ${dt('button.success.background')};
|
||||
border: 1px solid ${dt('button.success.border.color')};
|
||||
|
|
@ -151,7 +156,8 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-button-success:focus-visible {
|
||||
outline-color: ${dt('button.success.background')};
|
||||
outline-color: ${dt('button.success.focus.ring.color')};
|
||||
box-shadow: ${dt('button.success.focus.ring.shadow')};
|
||||
}
|
||||
|
||||
.p-button-info {
|
||||
|
|
@ -173,7 +179,8 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-button-info:focus-visible {
|
||||
outline-color: ${dt('button.info.background')};
|
||||
outline-color: ${dt('button.info.focus.ring.color')};
|
||||
box-shadow: ${dt('button.info.focus.ring.shadow')};
|
||||
}
|
||||
|
||||
.p-button-warn {
|
||||
|
|
@ -195,7 +202,8 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-button-warn:focus-visible {
|
||||
background: ${dt('button.warn.background')};
|
||||
outline-color: ${dt('button.warn.focus.ring.color')};
|
||||
box-shadow: ${dt('button.warn.focus.ring.shadow')};
|
||||
}
|
||||
|
||||
.p-button-help {
|
||||
|
|
@ -217,7 +225,8 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-button-help:focus-visible {
|
||||
outline-color: ${dt('button.help.background')};
|
||||
outline-color: ${dt('button.help.focus.ring.color')};
|
||||
box-shadow: ${dt('button.help.focus.ring.shadow')};
|
||||
}
|
||||
|
||||
.p-button-danger {
|
||||
|
|
@ -239,7 +248,8 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-button-danger:focus-visible {
|
||||
background: ${dt('button.danger.background')};
|
||||
outline-color: ${dt('button.danger.focus.ring.color')};
|
||||
box-shadow: ${dt('button.danger.focus.ring.shadow')};
|
||||
}
|
||||
|
||||
.p-button-contrast {
|
||||
|
|
@ -261,11 +271,10 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-button-contrast:focus-visible {
|
||||
outline-color: ${dt('button.contrast.background')};
|
||||
outline-color: ${dt('button.contrast.focus.ring.color')};
|
||||
box-shadow: ${dt('button.contrast.focus.ring.shadow')};
|
||||
}
|
||||
|
||||
|
||||
/* Outlined Buttons */
|
||||
.p-button-outlined {
|
||||
background: transparent;
|
||||
border-color: ${dt('button.outlined.primary.border.color')};
|
||||
|
|
@ -420,7 +429,6 @@ const theme = ({ dt }) => `
|
|||
color: ${dt('button.outlined.plain.color')};
|
||||
}
|
||||
|
||||
/* Text Button */
|
||||
.p-button-text {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
|
|
@ -565,7 +573,6 @@ const theme = ({ dt }) => `
|
|||
color: ${dt('button.text.plain.color')};
|
||||
}
|
||||
|
||||
/* Link Button */
|
||||
.p-button-link {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,31 @@
|
|||
export default {
|
||||
root: {
|
||||
borderRadius: '{form.field.border.radius}',
|
||||
roundedBorderRadius: '2rem',
|
||||
gap: '0.5rem',
|
||||
paddingX: '{form.field.padding.x}',
|
||||
paddingY: '{form.field.padding.y}',
|
||||
iconOnlyWidth: '2.5rem',
|
||||
sm: {
|
||||
fontSize: '0.875rem',
|
||||
paddingX: '0.625rem',
|
||||
paddingY: '0.375rem'
|
||||
},
|
||||
lg: {
|
||||
fontSize: '1.125rem',
|
||||
paddingX: '0.875rem',
|
||||
paddingY: '0.625rem'
|
||||
},
|
||||
label: {
|
||||
fontWeight: '500'
|
||||
},
|
||||
raisedShadow: '0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)',
|
||||
focusRing: {
|
||||
width: '{focus.ring.width}',
|
||||
style: '{focus.ring.style}',
|
||||
offset: '{focus.ring.offset}'
|
||||
}
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
root: {
|
||||
|
|
@ -11,7 +38,11 @@ export default {
|
|||
activeBorderColor: '{primary.active.color}',
|
||||
color: '{primary.inverseColor}',
|
||||
hoverColor: '{primary.inverseColor}',
|
||||
activeColor: '{primary.inverseColor}'
|
||||
activeColor: '{primary.inverseColor}',
|
||||
focusRing: {
|
||||
color: '{primary.color}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
secondary: {
|
||||
background: '{surface.100}',
|
||||
|
|
@ -22,7 +53,11 @@ export default {
|
|||
activeBorderColor: '{surface.300}',
|
||||
color: '{surface.600}',
|
||||
hoverColor: '{surface.700}',
|
||||
activeColor: '{surface.800}'
|
||||
activeColor: '{surface.800}',
|
||||
focusRing: {
|
||||
color: '{surface.600}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
info: {
|
||||
background: '{sky.500}',
|
||||
|
|
@ -33,7 +68,11 @@ export default {
|
|||
activeBorderColor: '{sky.700}',
|
||||
color: '#ffffff',
|
||||
hoverColor: '#ffffff',
|
||||
activeColor: '#ffffff'
|
||||
activeColor: '#ffffff',
|
||||
focusRing: {
|
||||
color: '{sky.500}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
success: {
|
||||
background: '{green.500}',
|
||||
|
|
@ -44,7 +83,11 @@ export default {
|
|||
activeBorderColor: '{green.700}',
|
||||
color: '#ffffff',
|
||||
hoverColor: '#ffffff',
|
||||
activeColor: '#ffffff'
|
||||
activeColor: '#ffffff',
|
||||
focusRing: {
|
||||
color: '{green.500}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
warn: {
|
||||
background: '{orange.500}',
|
||||
|
|
@ -55,7 +98,11 @@ export default {
|
|||
activeBorderColor: '{orange.700}',
|
||||
color: '#ffffff',
|
||||
hoverColor: '#ffffff',
|
||||
activeColor: '#ffffff'
|
||||
activeColor: '#ffffff',
|
||||
focusRing: {
|
||||
color: '{orange.500}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
help: {
|
||||
background: '{purple.500}',
|
||||
|
|
@ -66,7 +113,11 @@ export default {
|
|||
activeBorderColor: '{purple.700}',
|
||||
color: '#ffffff',
|
||||
hoverColor: '#ffffff',
|
||||
activeColor: '#ffffff'
|
||||
activeColor: '#ffffff',
|
||||
focusRing: {
|
||||
color: '{purple.500}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
danger: {
|
||||
background: '{red.500}',
|
||||
|
|
@ -77,7 +128,11 @@ export default {
|
|||
activeBorderColor: '{red.700}',
|
||||
color: '#ffffff',
|
||||
hoverColor: '#ffffff',
|
||||
activeColor: '#ffffff'
|
||||
activeColor: '#ffffff',
|
||||
focusRing: {
|
||||
color: '{red.500}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
contrast: {
|
||||
background: '{surface.950}',
|
||||
|
|
@ -88,7 +143,11 @@ export default {
|
|||
activeBorderColor: '{surface.800}',
|
||||
color: '{surface.0}',
|
||||
hoverColor: '{surface.0}',
|
||||
activeColor: '{surface.0}'
|
||||
activeColor: '{surface.0}',
|
||||
focusRing: {
|
||||
color: '{surface.950}',
|
||||
shadow: 'none'
|
||||
}
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
|
|
@ -206,7 +265,11 @@ export default {
|
|||
activeBorderColor: '{primary.active.color}',
|
||||
color: '{primary.inverseColor}',
|
||||
hoverColor: '{primary.inverseColor}',
|
||||
activeColor: '{primary.inverseColor}'
|
||||
activeColor: '{primary.inverseColor}',
|
||||
focusRing: {
|
||||
color: '{primary.color}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
secondary: {
|
||||
background: '{surface.800}',
|
||||
|
|
@ -217,7 +280,11 @@ export default {
|
|||
activeBorderColor: '{surface.600}',
|
||||
color: '{surface.300}',
|
||||
hoverColor: '{surface.200}',
|
||||
activeColor: '{surface.100}'
|
||||
activeColor: '{surface.100}',
|
||||
focusRing: {
|
||||
color: '{surface.300}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
info: {
|
||||
background: '{sky.400}',
|
||||
|
|
@ -228,7 +295,11 @@ export default {
|
|||
activeBorderColor: '{sky.200}',
|
||||
color: '{sky.950}',
|
||||
hoverColor: '{sky.950}',
|
||||
activeColor: '{sky.950}'
|
||||
activeColor: '{sky.950}',
|
||||
focusRing: {
|
||||
color: '{sky.400}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
success: {
|
||||
background: '{green.400}',
|
||||
|
|
@ -239,7 +310,12 @@ export default {
|
|||
activeBorderColor: '{green.200}',
|
||||
color: '{green.950}',
|
||||
hoverColor: '{green.950}',
|
||||
activeColor: '{green.950}'
|
||||
activeColor: '{green.950}',
|
||||
activeColor: '{green.950}',
|
||||
focusRing: {
|
||||
color: '{green.400}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
warn: {
|
||||
background: '{orange.400}',
|
||||
|
|
@ -250,7 +326,11 @@ export default {
|
|||
activeBorderColor: '{orange.200}',
|
||||
color: '{orange.950}',
|
||||
hoverColor: '{orange.950}',
|
||||
activeColor: '{orange.950}'
|
||||
activeColor: '{orange.950}',
|
||||
focusRing: {
|
||||
color: '{orange.400}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
help: {
|
||||
background: '{purple.400}',
|
||||
|
|
@ -261,7 +341,11 @@ export default {
|
|||
activeBorderColor: '{purple.200}',
|
||||
color: '{purple.950}',
|
||||
hoverColor: '{purple.950}',
|
||||
activeColor: '{purple.950}'
|
||||
activeColor: '{purple.950}',
|
||||
focusRing: {
|
||||
color: '{purple.400}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
danger: {
|
||||
background: '{red.400}',
|
||||
|
|
@ -272,7 +356,11 @@ export default {
|
|||
activeBorderColor: '{red.200}',
|
||||
color: '{red.950}',
|
||||
hoverColor: '{red.950}',
|
||||
activeColor: '{red.950}'
|
||||
activeColor: '{red.950}',
|
||||
focusRing: {
|
||||
color: '{red.400}',
|
||||
shadow: 'none'
|
||||
}
|
||||
},
|
||||
contrast: {
|
||||
background: '{surface.0}',
|
||||
|
|
@ -283,7 +371,11 @@ export default {
|
|||
activeBorderColor: '{surface.200}',
|
||||
color: '{surface.950}',
|
||||
hoverColor: '{surface.950}',
|
||||
activeColor: '{surface.950}'
|
||||
activeColor: '{surface.950}',
|
||||
focusRing: {
|
||||
color: '{surface.0}',
|
||||
shadow: 'none'
|
||||
}
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,31 @@
|
|||
export default {
|
||||
root: {
|
||||
borderRadius: '{form.field.border.radius}',
|
||||
roundedBorderRadius: '2rem',
|
||||
gap: '0.5rem',
|
||||
paddingX: '{form.field.padding.x}',
|
||||
paddingY: '{form.field.padding.y}',
|
||||
iconOnlyWidth: '2.5rem',
|
||||
sm: {
|
||||
fontSize: '0.875rem',
|
||||
paddingX: '0.625rem',
|
||||
paddingY: '0.5rem'
|
||||
},
|
||||
lg: {
|
||||
fontSize: '1.125rem',
|
||||
paddingX: '0.875rem',
|
||||
paddingY: '0.75rem'
|
||||
},
|
||||
label: {
|
||||
fontWeight: '600'
|
||||
},
|
||||
raisedShadow: '0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)',
|
||||
focusRing: {
|
||||
width: '{form.field.focus.ring.width}',
|
||||
style: '{form.field.focus.ring.style}',
|
||||
offset: '{form.field.focus.ring.offset}'
|
||||
}
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
root: {
|
||||
|
|
@ -11,7 +38,11 @@ export default {
|
|||
activeBorderColor: '{primary.active.color}',
|
||||
color: '{primary.inverseColor}',
|
||||
hoverColor: '{primary.inverseColor}',
|
||||
activeColor: '{primary.inverseColor}'
|
||||
activeColor: '{primary.inverseColor}',
|
||||
focusRing: {
|
||||
color: 'transparent',
|
||||
shadow: '0 0 0 0.2rem {primary.200}'
|
||||
}
|
||||
},
|
||||
secondary: {
|
||||
background: '{surface.100}',
|
||||
|
|
@ -22,7 +53,11 @@ export default {
|
|||
activeBorderColor: '{surface.300}',
|
||||
color: '{surface.600}',
|
||||
hoverColor: '{surface.700}',
|
||||
activeColor: '{surface.800}'
|
||||
activeColor: '{surface.800}',
|
||||
focusRing: {
|
||||
color: 'transparent',
|
||||
shadow: '0 0 0 0.2rem {surface.200}'
|
||||
}
|
||||
},
|
||||
info: {
|
||||
background: '{sky.500}',
|
||||
|
|
@ -33,7 +68,11 @@ export default {
|
|||
activeBorderColor: '{sky.700}',
|
||||
color: '#ffffff',
|
||||
hoverColor: '#ffffff',
|
||||
activeColor: '#ffffff'
|
||||
activeColor: '#ffffff',
|
||||
focusRing: {
|
||||
color: 'transparent',
|
||||
shadow: '0 0 0 0.2rem {sky.200}'
|
||||
}
|
||||
},
|
||||
success: {
|
||||
background: '{green.500}',
|
||||
|
|
@ -44,7 +83,11 @@ export default {
|
|||
activeBorderColor: '{green.700}',
|
||||
color: '#ffffff',
|
||||
hoverColor: '#ffffff',
|
||||
activeColor: '#ffffff'
|
||||
activeColor: '#ffffff',
|
||||
focusRing: {
|
||||
color: 'transparent',
|
||||
shadow: '0 0 0 0.2rem {green.200}'
|
||||
}
|
||||
},
|
||||
warn: {
|
||||
background: '{orange.500}',
|
||||
|
|
@ -55,7 +98,11 @@ export default {
|
|||
activeBorderColor: '{orange.700}',
|
||||
color: '#ffffff',
|
||||
hoverColor: '#ffffff',
|
||||
activeColor: '#ffffff'
|
||||
activeColor: '#ffffff',
|
||||
focusRing: {
|
||||
color: 'transparent',
|
||||
shadow: '0 0 0 0.2rem {orange.200}'
|
||||
}
|
||||
},
|
||||
help: {
|
||||
background: '{purple.500}',
|
||||
|
|
@ -66,7 +113,11 @@ export default {
|
|||
activeBorderColor: '{purple.700}',
|
||||
color: '#ffffff',
|
||||
hoverColor: '#ffffff',
|
||||
activeColor: '#ffffff'
|
||||
activeColor: '#ffffff',
|
||||
focusRing: {
|
||||
color: 'transparent',
|
||||
shadow: '0 0 0 0.2rem {purple.200}'
|
||||
}
|
||||
},
|
||||
danger: {
|
||||
background: '{red.500}',
|
||||
|
|
@ -77,7 +128,11 @@ export default {
|
|||
activeBorderColor: '{red.700}',
|
||||
color: '#ffffff',
|
||||
hoverColor: '#ffffff',
|
||||
activeColor: '#ffffff'
|
||||
activeColor: '#ffffff',
|
||||
focusRing: {
|
||||
color: 'transparent',
|
||||
shadow: '0 0 0 0.2rem {red.200}'
|
||||
}
|
||||
},
|
||||
contrast: {
|
||||
background: '{surface.950}',
|
||||
|
|
@ -88,7 +143,11 @@ export default {
|
|||
activeBorderColor: '{surface.800}',
|
||||
color: '{surface.0}',
|
||||
hoverColor: '{surface.0}',
|
||||
activeColor: '{surface.0}'
|
||||
activeColor: '{surface.0}',
|
||||
focusRing: {
|
||||
color: 'transparent',
|
||||
shadow: '0 0 0 0.2rem {surface.400}'
|
||||
}
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
|
|
@ -206,7 +265,11 @@ export default {
|
|||
activeBorderColor: '{primary.active.color}',
|
||||
color: '{primary.inverseColor}',
|
||||
hoverColor: '{primary.inverseColor}',
|
||||
activeColor: '{primary.inverseColor}'
|
||||
activeColor: '{primary.inverseColor}',
|
||||
focusRing: {
|
||||
color: 'transparent',
|
||||
shadow: '0 0 0 0.2rem color-mix(in srgb, {primary.color}, transparent 80%)'
|
||||
}
|
||||
},
|
||||
secondary: {
|
||||
background: '{surface.800}',
|
||||
|
|
@ -217,7 +280,11 @@ export default {
|
|||
activeBorderColor: '{surface.600}',
|
||||
color: '{surface.300}',
|
||||
hoverColor: '{surface.200}',
|
||||
activeColor: '{surface.100}'
|
||||
activeColor: '{surface.100}',
|
||||
focusRing: {
|
||||
color: 'transparent',
|
||||
shadow: '0 0 0 0.2rem color-mix(in srgb, {surface.300}, transparent 80%)'
|
||||
}
|
||||
},
|
||||
info: {
|
||||
background: '{sky.400}',
|
||||
|
|
@ -228,7 +295,11 @@ export default {
|
|||
activeBorderColor: '{sky.200}',
|
||||
color: '{sky.950}',
|
||||
hoverColor: '{sky.950}',
|
||||
activeColor: '{sky.950}'
|
||||
activeColor: '{sky.950}',
|
||||
focusRing: {
|
||||
color: 'transparent',
|
||||
shadow: '0 0 0 0.2rem color-mix(in srgb, {sky.400}, transparent 80%)'
|
||||
}
|
||||
},
|
||||
success: {
|
||||
background: '{green.400}',
|
||||
|
|
@ -239,7 +310,11 @@ export default {
|
|||
activeBorderColor: '{green.200}',
|
||||
color: '{green.950}',
|
||||
hoverColor: '{green.950}',
|
||||
activeColor: '{green.950}'
|
||||
activeColor: '{green.950}',
|
||||
focusRing: {
|
||||
color: 'transparent',
|
||||
shadow: '0 0 0 0.2rem color-mix(in srgb, {green.400}, transparent 80%)'
|
||||
}
|
||||
},
|
||||
warn: {
|
||||
background: '{orange.400}',
|
||||
|
|
@ -250,7 +325,11 @@ export default {
|
|||
activeBorderColor: '{orange.200}',
|
||||
color: '{orange.950}',
|
||||
hoverColor: '{orange.950}',
|
||||
activeColor: '{orange.950}'
|
||||
activeColor: '{orange.950}',
|
||||
focusRing: {
|
||||
color: 'transparent',
|
||||
shadow: '0 0 0 0.2rem color-mix(in srgb, {orange.400}, transparent 80%)'
|
||||
}
|
||||
},
|
||||
help: {
|
||||
background: '{purple.400}',
|
||||
|
|
@ -261,7 +340,11 @@ export default {
|
|||
activeBorderColor: '{purple.200}',
|
||||
color: '{purple.950}',
|
||||
hoverColor: '{purple.950}',
|
||||
activeColor: '{purple.950}'
|
||||
activeColor: '{purple.950}',
|
||||
focusRing: {
|
||||
color: 'transparent',
|
||||
shadow: '0 0 0 0.2rem color-mix(in srgb, {purple.400}, transparent 80%)'
|
||||
}
|
||||
},
|
||||
danger: {
|
||||
background: '{red.400}',
|
||||
|
|
@ -272,7 +355,11 @@ export default {
|
|||
activeBorderColor: '{red.200}',
|
||||
color: '{red.950}',
|
||||
hoverColor: '{red.950}',
|
||||
activeColor: '{red.950}'
|
||||
activeColor: '{red.950}',
|
||||
focusRing: {
|
||||
color: 'transparent',
|
||||
shadow: '0 0 0 0.2rem color-mix(in srgb, {red.400}, transparent 80%)'
|
||||
}
|
||||
},
|
||||
contrast: {
|
||||
background: '{surface.0}',
|
||||
|
|
@ -283,7 +370,11 @@ export default {
|
|||
activeBorderColor: '{surface.200}',
|
||||
color: '{surface.950}',
|
||||
hoverColor: '{surface.950}',
|
||||
activeColor: '{surface.950}'
|
||||
activeColor: '{surface.950}',
|
||||
focusRing: {
|
||||
color: 'transparent',
|
||||
shadow: '0 0 0 0.2rem color-mix(in srgb, {surface.0}, transparent 80%)'
|
||||
}
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue