vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Updated tokens for Buttons

pull/5756/head
Cagatay Civici 2024-05-09 11:38:15 +03:00
parent 46fd1be593
commit 3520377e74
3 changed files with 253 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
components/lib/button/style/ButtonStyle.js
View File

@ -12,14 +12,14 @@ const theme = ({ dt }) => `
color: ${dt('button.primary.color')}; color: ${dt('button.primary.color')};
background: ${dt('button.primary.background')}; background: ${dt('button.primary.background')};
border: 1px solid ${dt('button.primary.border.color')}; 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-size: 1rem;
font-family: inherit; font-family: inherit;
font-feature-settings: 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')}; 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('border.radius.md')}; border-radius: ${dt('button.border.radius')};
outline-color: transparent; outline-color: transparent;
gap: 0.5rem; gap: ${dt('button.gap')};
} }
.p-button:disabled { .p-button:disabled {
@ -36,31 +36,32 @@ const theme = ({ dt }) => `
.p-button-icon-only { .p-button-icon-only {
justify-content: center; justify-content: center;
width: 2.5rem; width: ${dt('button.icon.only.width')};
padding: 0.5rem 0; padding-left: 0;
padding-right: 0;
} }
.p-button-icon-only.p-button-rounded { .p-button-icon-only.p-button-rounded {
border-radius: 50%; border-radius: 50%;
height: 2.5rem; height: ${dt('button.icon.only.width')};
} }
.p-button-sm { .p-button-sm {
font-size: 0.875rem; font-size: ${dt('button.sm.font.size')};
padding: 0.375rem 0.875rem; padding: ${dt('button.sm.padding.y')} ${dt('button.sm.padding.x')};
} }
.p-button-sm .p-button-icon { .p-button-sm .p-button-icon {
font-size: 0.875rem; font-size: ${dt('button.sm.font.size')};
} }
.p-button-lg { .p-button-lg {
font-size: 1.25rem; font-size: ${dt('button.lg.font.size')};
padding: 0.625rem 1.25rem; padding: ${dt('button.lg.padding.y')} ${dt('button.lg.padding.x')};
} }
.p-button-lg .p-button-icon { .p-button-lg .p-button-icon {
font-size: 1.25rem; font-size: ${dt('button.lg.font.size')};
} }
.p-button-vertical { .p-button-vertical {
@ -68,7 +69,7 @@ const theme = ({ dt }) => `
} }
.p-button-label { .p-button-label {
font-weight: 500; font-weight: ${dt('button.label.font.weight')};
} }
.p-fluid .p-button { .p-fluid .p-button {
@ -76,7 +77,7 @@ const theme = ({ dt }) => `
} }
.p-fluid .p-button-icon-only { .p-fluid .p-button-icon-only {
width: 2.5rem; width: ${dt('button.icon.only.width')};
} }
.p-button:not(:disabled):hover { .p-button:not(:disabled):hover {
@ -92,12 +93,12 @@ const theme = ({ dt }) => `
} }
.p-button:focus-visible { .p-button:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('button.primary.background')}; box-shadow: ${dt('button.primary.focus.ring.shadow')};
outline-offset: ${dt('focus.ring.offset')}; 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 { .p-button .p-badge {
margin-left: 0.5rem;
min-width: 1rem; min-width: 1rem;
height: 1rem; height: 1rem;
line-height: 1rem; line-height: 1rem;
@ -106,14 +107,13 @@ const theme = ({ dt }) => `
} }
.p-button-raised { .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 { .p-button-rounded {
border-radius: 2rem; border-radius: ${dt('button.rounded.border.radius')};
} }
/* Default Severities */
.p-button-secondary { .p-button-secondary {
background: ${dt('button.secondary.background')}; background: ${dt('button.secondary.background')};
border: 1px solid ${dt('button.secondary.border.color')}; border: 1px solid ${dt('button.secondary.border.color')};
@ -132,6 +132,11 @@ const theme = ({ dt }) => `
color: ${dt('button.secondary.active.color')}; 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 { .p-button-success {
background: ${dt('button.success.background')}; background: ${dt('button.success.background')};
border: 1px solid ${dt('button.success.border.color')}; border: 1px solid ${dt('button.success.border.color')};
@ -151,7 +156,8 @@ const theme = ({ dt }) => `
} }
.p-button-success:focus-visible { .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 { .p-button-info {
@ -173,7 +179,8 @@ const theme = ({ dt }) => `
} }
.p-button-info:focus-visible { .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 { .p-button-warn {
@ -195,7 +202,8 @@ const theme = ({ dt }) => `
} }
.p-button-warn:focus-visible { .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 { .p-button-help {
@ -217,7 +225,8 @@ const theme = ({ dt }) => `
} }
.p-button-help:focus-visible { .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 { .p-button-danger {
@ -239,7 +248,8 @@ const theme = ({ dt }) => `
} }
.p-button-danger:focus-visible { .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 { .p-button-contrast {
@ -261,11 +271,10 @@ const theme = ({ dt }) => `
} }
.p-button-contrast:focus-visible { .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 { .p-button-outlined {
background: transparent; background: transparent;
border-color: ${dt('button.outlined.primary.border.color')}; border-color: ${dt('button.outlined.primary.border.color')};
@ -420,7 +429,6 @@ const theme = ({ dt }) => `
color: ${dt('button.outlined.plain.color')}; color: ${dt('button.outlined.plain.color')};
} }
/* Text Button */
.p-button-text { .p-button-text {
background: transparent; background: transparent;
border-color: transparent; border-color: transparent;
@ -565,7 +573,6 @@ const theme = ({ dt }) => `
color: ${dt('button.text.plain.color')}; color: ${dt('button.text.plain.color')};
} }
/* Link Button */
.p-button-link { .p-button-link {
background: transparent; background: transparent;
border-color: transparent; border-color: transparent;

124
components/lib/themes/aura/button/index.js
View File

@ -1,4 +1,31 @@
export default { 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: { colorScheme: {
light: { light: {
root: { root: {
@ -11,7 +38,11 @@ export default {
activeBorderColor: '{primary.active.color}', activeBorderColor: '{primary.active.color}',
color: '{primary.inverseColor}', color: '{primary.inverseColor}',
hoverColor: '{primary.inverseColor}', hoverColor: '{primary.inverseColor}',
activeColor: '{primary.inverseColor}' activeColor: '{primary.inverseColor}',
focusRing: {
color: '{primary.color}',
shadow: 'none'
}
}, },
secondary: { secondary: {
background: '{surface.100}', background: '{surface.100}',
@ -22,7 +53,11 @@ export default {
activeBorderColor: '{surface.300}', activeBorderColor: '{surface.300}',
color: '{surface.600}', color: '{surface.600}',
hoverColor: '{surface.700}', hoverColor: '{surface.700}',
activeColor: '{surface.800}' activeColor: '{surface.800}',
focusRing: {
color: '{surface.600}',
shadow: 'none'
}
}, },
info: { info: {
background: '{sky.500}', background: '{sky.500}',
@ -33,7 +68,11 @@ export default {
activeBorderColor: '{sky.700}', activeBorderColor: '{sky.700}',
color: '#ffffff', color: '#ffffff',
hoverColor: '#ffffff', hoverColor: '#ffffff',
activeColor: '#ffffff' activeColor: '#ffffff',
focusRing: {
color: '{sky.500}',
shadow: 'none'
}
}, },
success: { success: {
background: '{green.500}', background: '{green.500}',
@ -44,7 +83,11 @@ export default {
activeBorderColor: '{green.700}', activeBorderColor: '{green.700}',
color: '#ffffff', color: '#ffffff',
hoverColor: '#ffffff', hoverColor: '#ffffff',
activeColor: '#ffffff' activeColor: '#ffffff',
focusRing: {
color: '{green.500}',
shadow: 'none'
}
}, },
warn: { warn: {
background: '{orange.500}', background: '{orange.500}',
@ -55,7 +98,11 @@ export default {
activeBorderColor: '{orange.700}', activeBorderColor: '{orange.700}',
color: '#ffffff', color: '#ffffff',
hoverColor: '#ffffff', hoverColor: '#ffffff',
activeColor: '#ffffff' activeColor: '#ffffff',
focusRing: {
color: '{orange.500}',
shadow: 'none'
}
}, },
help: { help: {
background: '{purple.500}', background: '{purple.500}',
@ -66,7 +113,11 @@ export default {
activeBorderColor: '{purple.700}', activeBorderColor: '{purple.700}',
color: '#ffffff', color: '#ffffff',
hoverColor: '#ffffff', hoverColor: '#ffffff',
activeColor: '#ffffff' activeColor: '#ffffff',
focusRing: {
color: '{purple.500}',
shadow: 'none'
}
}, },
danger: { danger: {
background: '{red.500}', background: '{red.500}',
@ -77,7 +128,11 @@ export default {
activeBorderColor: '{red.700}', activeBorderColor: '{red.700}',
color: '#ffffff', color: '#ffffff',
hoverColor: '#ffffff', hoverColor: '#ffffff',
activeColor: '#ffffff' activeColor: '#ffffff',
focusRing: {
color: '{red.500}',
shadow: 'none'
}
}, },
contrast: { contrast: {
background: '{surface.950}', background: '{surface.950}',
@ -88,7 +143,11 @@ export default {
activeBorderColor: '{surface.800}', activeBorderColor: '{surface.800}',
color: '{surface.0}', color: '{surface.0}',
hoverColor: '{surface.0}', hoverColor: '{surface.0}',
activeColor: '{surface.0}' activeColor: '{surface.0}',
focusRing: {
color: '{surface.950}',
shadow: 'none'
}
} }
}, },
outlined: { outlined: {
@ -206,7 +265,11 @@ export default {
activeBorderColor: '{primary.active.color}', activeBorderColor: '{primary.active.color}',
color: '{primary.inverseColor}', color: '{primary.inverseColor}',
hoverColor: '{primary.inverseColor}', hoverColor: '{primary.inverseColor}',
activeColor: '{primary.inverseColor}' activeColor: '{primary.inverseColor}',
focusRing: {
color: '{primary.color}',
shadow: 'none'
}
}, },
secondary: { secondary: {
background: '{surface.800}', background: '{surface.800}',
@ -217,7 +280,11 @@ export default {
activeBorderColor: '{surface.600}', activeBorderColor: '{surface.600}',
color: '{surface.300}', color: '{surface.300}',
hoverColor: '{surface.200}', hoverColor: '{surface.200}',
activeColor: '{surface.100}' activeColor: '{surface.100}',
focusRing: {
color: '{surface.300}',
shadow: 'none'
}
}, },
info: { info: {
background: '{sky.400}', background: '{sky.400}',
@ -228,7 +295,11 @@ export default {
activeBorderColor: '{sky.200}', activeBorderColor: '{sky.200}',
color: '{sky.950}', color: '{sky.950}',
hoverColor: '{sky.950}', hoverColor: '{sky.950}',
activeColor: '{sky.950}' activeColor: '{sky.950}',
focusRing: {
color: '{sky.400}',
shadow: 'none'
}
}, },
success: { success: {
background: '{green.400}', background: '{green.400}',
@ -239,7 +310,12 @@ export default {
activeBorderColor: '{green.200}', activeBorderColor: '{green.200}',
color: '{green.950}', color: '{green.950}',
hoverColor: '{green.950}', hoverColor: '{green.950}',
activeColor: '{green.950}' activeColor: '{green.950}',
activeColor: '{green.950}',
focusRing: {
color: '{green.400}',
shadow: 'none'
}
}, },
warn: { warn: {
background: '{orange.400}', background: '{orange.400}',
@ -250,7 +326,11 @@ export default {
activeBorderColor: '{orange.200}', activeBorderColor: '{orange.200}',
color: '{orange.950}', color: '{orange.950}',
hoverColor: '{orange.950}', hoverColor: '{orange.950}',
activeColor: '{orange.950}' activeColor: '{orange.950}',
focusRing: {
color: '{orange.400}',
shadow: 'none'
}
}, },
help: { help: {
background: '{purple.400}', background: '{purple.400}',
@ -261,7 +341,11 @@ export default {
activeBorderColor: '{purple.200}', activeBorderColor: '{purple.200}',
color: '{purple.950}', color: '{purple.950}',
hoverColor: '{purple.950}', hoverColor: '{purple.950}',
activeColor: '{purple.950}' activeColor: '{purple.950}',
focusRing: {
color: '{purple.400}',
shadow: 'none'
}
}, },
danger: { danger: {
background: '{red.400}', background: '{red.400}',
@ -272,7 +356,11 @@ export default {
activeBorderColor: '{red.200}', activeBorderColor: '{red.200}',
color: '{red.950}', color: '{red.950}',
hoverColor: '{red.950}', hoverColor: '{red.950}',
activeColor: '{red.950}' activeColor: '{red.950}',
focusRing: {
color: '{red.400}',
shadow: 'none'
}
}, },
contrast: { contrast: {
background: '{surface.0}', background: '{surface.0}',
@ -283,7 +371,11 @@ export default {
activeBorderColor: '{surface.200}', activeBorderColor: '{surface.200}',
color: '{surface.950}', color: '{surface.950}',
hoverColor: '{surface.950}', hoverColor: '{surface.950}',
activeColor: '{surface.950}' activeColor: '{surface.950}',
focusRing: {
color: '{surface.0}',
shadow: 'none'
}
} }
}, },
outlined: { outlined: {

123
components/lib/themes/lara/button/index.js
View File

@ -1,4 +1,31 @@
export default { 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: { colorScheme: {
light: { light: {
root: { root: {
@ -11,7 +38,11 @@ export default {
activeBorderColor: '{primary.active.color}', activeBorderColor: '{primary.active.color}',
color: '{primary.inverseColor}', color: '{primary.inverseColor}',
hoverColor: '{primary.inverseColor}', hoverColor: '{primary.inverseColor}',
activeColor: '{primary.inverseColor}' activeColor: '{primary.inverseColor}',
focusRing: {
color: 'transparent',
shadow: '0 0 0 0.2rem {primary.200}'
}
}, },
secondary: { secondary: {
background: '{surface.100}', background: '{surface.100}',
@ -22,7 +53,11 @@ export default {
activeBorderColor: '{surface.300}', activeBorderColor: '{surface.300}',
color: '{surface.600}', color: '{surface.600}',
hoverColor: '{surface.700}', hoverColor: '{surface.700}',
activeColor: '{surface.800}' activeColor: '{surface.800}',
focusRing: {
color: 'transparent',
shadow: '0 0 0 0.2rem {surface.200}'
}
}, },
info: { info: {
background: '{sky.500}', background: '{sky.500}',
@ -33,7 +68,11 @@ export default {
activeBorderColor: '{sky.700}', activeBorderColor: '{sky.700}',
color: '#ffffff', color: '#ffffff',
hoverColor: '#ffffff', hoverColor: '#ffffff',
activeColor: '#ffffff' activeColor: '#ffffff',
focusRing: {
color: 'transparent',
shadow: '0 0 0 0.2rem {sky.200}'
}
}, },
success: { success: {
background: '{green.500}', background: '{green.500}',
@ -44,7 +83,11 @@ export default {
activeBorderColor: '{green.700}', activeBorderColor: '{green.700}',
color: '#ffffff', color: '#ffffff',
hoverColor: '#ffffff', hoverColor: '#ffffff',
activeColor: '#ffffff' activeColor: '#ffffff',
focusRing: {
color: 'transparent',
shadow: '0 0 0 0.2rem {green.200}'
}
}, },
warn: { warn: {
background: '{orange.500}', background: '{orange.500}',
@ -55,7 +98,11 @@ export default {
activeBorderColor: '{orange.700}', activeBorderColor: '{orange.700}',
color: '#ffffff', color: '#ffffff',
hoverColor: '#ffffff', hoverColor: '#ffffff',
activeColor: '#ffffff' activeColor: '#ffffff',
focusRing: {
color: 'transparent',
shadow: '0 0 0 0.2rem {orange.200}'
}
}, },
help: { help: {
background: '{purple.500}', background: '{purple.500}',
@ -66,7 +113,11 @@ export default {
activeBorderColor: '{purple.700}', activeBorderColor: '{purple.700}',
color: '#ffffff', color: '#ffffff',
hoverColor: '#ffffff', hoverColor: '#ffffff',
activeColor: '#ffffff' activeColor: '#ffffff',
focusRing: {
color: 'transparent',
shadow: '0 0 0 0.2rem {purple.200}'
}
}, },
danger: { danger: {
background: '{red.500}', background: '{red.500}',
@ -77,7 +128,11 @@ export default {
activeBorderColor: '{red.700}', activeBorderColor: '{red.700}',
color: '#ffffff', color: '#ffffff',
hoverColor: '#ffffff', hoverColor: '#ffffff',
activeColor: '#ffffff' activeColor: '#ffffff',
focusRing: {
color: 'transparent',
shadow: '0 0 0 0.2rem {red.200}'
}
}, },
contrast: { contrast: {
background: '{surface.950}', background: '{surface.950}',
@ -88,7 +143,11 @@ export default {
activeBorderColor: '{surface.800}', activeBorderColor: '{surface.800}',
color: '{surface.0}', color: '{surface.0}',
hoverColor: '{surface.0}', hoverColor: '{surface.0}',
activeColor: '{surface.0}' activeColor: '{surface.0}',
focusRing: {
color: 'transparent',
shadow: '0 0 0 0.2rem {surface.400}'
}
} }
}, },
outlined: { outlined: {
@ -206,7 +265,11 @@ export default {
activeBorderColor: '{primary.active.color}', activeBorderColor: '{primary.active.color}',
color: '{primary.inverseColor}', color: '{primary.inverseColor}',
hoverColor: '{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: { secondary: {
background: '{surface.800}', background: '{surface.800}',
@ -217,7 +280,11 @@ export default {
activeBorderColor: '{surface.600}', activeBorderColor: '{surface.600}',
color: '{surface.300}', color: '{surface.300}',
hoverColor: '{surface.200}', 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: { info: {
background: '{sky.400}', background: '{sky.400}',
@ -228,7 +295,11 @@ export default {
activeBorderColor: '{sky.200}', activeBorderColor: '{sky.200}',
color: '{sky.950}', color: '{sky.950}',
hoverColor: '{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: { success: {
background: '{green.400}', background: '{green.400}',
@ -239,7 +310,11 @@ export default {
activeBorderColor: '{green.200}', activeBorderColor: '{green.200}',
color: '{green.950}', color: '{green.950}',
hoverColor: '{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: { warn: {
background: '{orange.400}', background: '{orange.400}',
@ -250,7 +325,11 @@ export default {
activeBorderColor: '{orange.200}', activeBorderColor: '{orange.200}',
color: '{orange.950}', color: '{orange.950}',
hoverColor: '{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: { help: {
background: '{purple.400}', background: '{purple.400}',
@ -261,7 +340,11 @@ export default {
activeBorderColor: '{purple.200}', activeBorderColor: '{purple.200}',
color: '{purple.950}', color: '{purple.950}',
hoverColor: '{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: { danger: {
background: '{red.400}', background: '{red.400}',
@ -272,7 +355,11 @@ export default {
activeBorderColor: '{red.200}', activeBorderColor: '{red.200}',
color: '{red.950}', color: '{red.950}',
hoverColor: '{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: { contrast: {
background: '{surface.0}', background: '{surface.0}',
@ -283,7 +370,11 @@ export default {
activeBorderColor: '{surface.200}', activeBorderColor: '{surface.200}',
color: '{surface.950}', color: '{surface.950}',
hoverColor: '{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: { outlined: {