Migrated buttons
Cagatay Civici
parent
580ca3a90d
commit
02104cea25
|
|
@ -8,9 +8,9 @@ export default {
|
|||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
color: var(--p-button-primary-text-color);
|
||||
background: var(--p-button-primary-background);
|
||||
border: 1px solid var(--p-button-primary-border-color);
|
||||
color: ${dt('button.primary.color')};
|
||||
background: ${dt('button.primary.background')};
|
||||
border: 1px solid ${dt('button.primary.border.color')};
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1rem;
|
||||
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
|
||||
|
|
@ -104,19 +104,19 @@ export default {
|
|||
}
|
||||
|
||||
.p-button:not(:disabled):hover {
|
||||
background: var(--p-button-primary-background-hover);
|
||||
border: 1px solid var(--p-button-primary-border-color-hover);
|
||||
color: var(--p-button-primary-text-color-hover);
|
||||
background: ${dt('button.primary.hover.background')};
|
||||
border: 1px solid ${dt('button.primary.hover.border.color')};
|
||||
color: ${dt('button.primary.hover.color')};
|
||||
}
|
||||
|
||||
.p-button:not(:disabled):active {
|
||||
background: var(--p-button-primary-background-active);
|
||||
border: 1px solid var(--p-button-primary-border-color-active);
|
||||
color: var(--p-button-primary-text-color-active);
|
||||
background: ${dt('button.primary.active.background')};
|
||||
border: 1px solid ${dt('button.primary.active.border.color')};
|
||||
color: ${dt('button.primary.active.color')};
|
||||
}
|
||||
|
||||
.p-button:focus-visible {
|
||||
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} var(--p-button-primary-background);
|
||||
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('button.primary.background')};
|
||||
outline-offset: ${dt('focus.ring.offset')};
|
||||
}
|
||||
|
||||
|
|
@ -125,8 +125,8 @@ export default {
|
|||
min-width: 1rem;
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
background: var(--p-button-primary-text-color);
|
||||
color: var(--p-button-primary-background);
|
||||
background: ${dt('button.primary.color')};
|
||||
color: ${dt('button.primary.background')};
|
||||
}
|
||||
|
||||
.p-button-raised {
|
||||
|
|
@ -139,467 +139,467 @@ export default {
|
|||
|
||||
/* Default Severities */
|
||||
.p-button-secondary {
|
||||
background: var(--p-button-secondary-background);
|
||||
border: 1px solid var(--p-button-secondary-border-color);
|
||||
color: var(--p-button-secondary-text-color);
|
||||
background: ${dt('button.secondary.background')};
|
||||
border: 1px solid ${dt('button.secondary.border.color')};
|
||||
color: ${dt('button.secondary.color')};
|
||||
}
|
||||
|
||||
.p-button-secondary:not(:disabled):hover {
|
||||
background: var(--p-button-secondary-background-hover);
|
||||
border: 1px solid var(--p-button-secondary-border-color-hover);
|
||||
color: var(--p-button-secondary-text-color-hover);
|
||||
background: ${dt('button.secondary.hover.background')};
|
||||
border: 1px solid ${dt('button.secondary.hover.border.color')};
|
||||
color: ${dt('button.secondary.hover.color')};
|
||||
}
|
||||
|
||||
.p-button-secondary:not(:disabled):active {
|
||||
background: var(--p-button-secondary-background-active);
|
||||
border: 1px solid var(--p-button-secondary-border-color-active);
|
||||
color: var(--p-button-secondary-text-color-active);
|
||||
background: ${dt('button.secondary.active.background')};
|
||||
border: 1px solid ${dt('button.secondary.active.border.color')};
|
||||
color: ${dt('button.secondary.active.color')};
|
||||
}
|
||||
|
||||
.p-button-success {
|
||||
background: var(--p-button-success-background);
|
||||
border: 1px solid var(--p-button-success-border-color);
|
||||
color: var(--p-button-success-text-color);
|
||||
background: ${dt('button.success.background')};
|
||||
border: 1px solid ${dt('button.success.border.color')};
|
||||
color: ${dt('button.success.color')};
|
||||
}
|
||||
|
||||
.p-button-success:not(:disabled):hover {
|
||||
background: var(--p-button-success-background-hover);
|
||||
border: 1px solid var(--p-button-success-border-color-hover);
|
||||
color: var(--p-button-success-text-color-hover);
|
||||
background: ${dt('button.success.hover.background')};
|
||||
border: 1px solid ${dt('button.success.hover.border.color')};
|
||||
color: ${dt('button.success.hover.color')};
|
||||
}
|
||||
|
||||
.p-button-success:not(:disabled):active {
|
||||
background: var(--p-button-success-background-active);
|
||||
border: 1px solid var(--p-button-success-border-color-active);
|
||||
color: var(--p-button-success-text-color-active);
|
||||
background: ${dt('button.success.active.background')};
|
||||
border: 1px solid ${dt('button.success.active.border.color')};
|
||||
color: ${dt('button.success.active.color')};
|
||||
}
|
||||
|
||||
.p-button-success:focus-visible {
|
||||
outline-color: var(--p-button-success-background);
|
||||
outline-color: ${dt('button.success.background')};
|
||||
}
|
||||
|
||||
.p-button-info {
|
||||
background: var(--p-button-info-background);
|
||||
border: 1px solid var(--p-button-info-border-color);
|
||||
color: var(--p-button-info-text-color);
|
||||
background: ${dt('button.info.background')};
|
||||
border: 1px solid ${dt('button.info.border.color')};
|
||||
color: ${dt('button.info.color')};
|
||||
}
|
||||
|
||||
.p-button-info:not(:disabled):hover {
|
||||
background: var(--p-button-info-background-hover);
|
||||
border: 1px solid var(--p-button-info-border-color-hover);
|
||||
color: var(--p-button-info-text-color-hover);
|
||||
background: ${dt('button.info.hover.background')};
|
||||
border: 1px solid ${dt('button.info.hover.border.color')};
|
||||
color: ${dt('button.info.hover.color')};
|
||||
}
|
||||
|
||||
.p-button-info:not(:disabled):active {
|
||||
background: var(--p-button-info-background-active);
|
||||
border: 1px solid var(--p-button-info-border-color-active);
|
||||
color: var(--p-button-info-text-color-active);
|
||||
background: ${dt('button.info.active.background')};
|
||||
border: 1px solid ${dt('button.info.active.border.color')};
|
||||
color: ${dt('button.info.active.color')};
|
||||
}
|
||||
|
||||
.p-button-info:focus-visible {
|
||||
outline-color: var(--p-button-info-background);
|
||||
outline-color: ${dt('button.info.background')};
|
||||
}
|
||||
|
||||
.p-button-warning {
|
||||
background: var(--p-button-warn-background);
|
||||
border: 1px solid var(--p-button-warn-border-color);
|
||||
color: var(--p-button-warn-text-color);
|
||||
background: ${dt('button.warn.background')};
|
||||
border: 1px solid ${dt('button.warn.border.color')};
|
||||
color: ${dt('button.warn.color')};
|
||||
}
|
||||
|
||||
.p-button-warning:not(:disabled):hover {
|
||||
background: var(--p-button-warn-background-hover);
|
||||
border: 1px solid var(--p-button-warn-border-color-hover);
|
||||
color: var(--p-button-warn-text-color-hover);
|
||||
background: ${dt('button.warn.hover.background')};
|
||||
border: 1px solid ${dt('button.warn.hover.border.color')};
|
||||
color: ${dt('button.warn.hover.color')};
|
||||
}
|
||||
|
||||
.p-button-warning:not(:disabled):active {
|
||||
background: var(--p-button-warn-background-active);
|
||||
border: 1px solid var(--p-button-warn-border-color-active);
|
||||
color: var(--p-button-warn-text-color-active);
|
||||
background: ${dt('button.warn.active.background')};
|
||||
border: 1px solid ${dt('button.warn.active.border.color')};
|
||||
color: ${dt('button.warn.active.color')};
|
||||
}
|
||||
|
||||
.p-button-warning:focus-visible {
|
||||
outline-color: var(--p-button-warn-background);
|
||||
background: ${dt('button.warn.background')};
|
||||
}
|
||||
|
||||
.p-button-help {
|
||||
background: var(--p-button-help-background);
|
||||
border: 1px solid var(--p-button-help-border-color);
|
||||
color: var(--p-button-help-text-color);
|
||||
background: ${dt('button.help.background')};
|
||||
border: 1px solid ${dt('button.help.border.color')};
|
||||
color: ${dt('button.help.color')};
|
||||
}
|
||||
|
||||
.p-button-help:not(:disabled):hover {
|
||||
background: var(--p-button-help-background-hover);
|
||||
border: 1px solid var(--p-button-help-border-color-hover);
|
||||
color: var(--p-button-help-text-color-hover);
|
||||
background: ${dt('button.help.hover.background')};
|
||||
border: 1px solid ${dt('button.help.hover.border.color')};
|
||||
color: ${dt('button.help.hover.color')};
|
||||
}
|
||||
|
||||
.p-button-help:not(:disabled):active {
|
||||
background: var(--p-button-help-background-active);
|
||||
border: 1px solid var(--p-button-help-border-color-active);
|
||||
color: var(--p-button-help-text-color-active);
|
||||
background: ${dt('button.help.active.background')};
|
||||
border: 1px solid ${dt('button.help.active.border.color')};
|
||||
color: ${dt('button.help.active.color')};
|
||||
}
|
||||
|
||||
.p-button-help:focus-visible {
|
||||
outline-color: var(--p-button-help-background);
|
||||
outline-color: ${dt('button.help.background')};
|
||||
}
|
||||
|
||||
.p-button-danger {
|
||||
background: var(--p-button-danger-background);
|
||||
border: 1px solid var(--p-button-danger-border-color);
|
||||
color: var(--p-button-danger-text-color);
|
||||
background: ${dt('button.danger.background')};
|
||||
border: 1px solid ${dt('button.danger.border.color')};
|
||||
color: ${dt('button.danger.color')};
|
||||
}
|
||||
|
||||
.p-button-danger:not(:disabled):hover {
|
||||
background: var(--p-button-danger-background-hover);
|
||||
border: 1px solid var(--p-button-danger-border-color-hover);
|
||||
color: var(--p-button-danger-text-color-hover);
|
||||
background: ${dt('button.danger.hover.background')};
|
||||
border: 1px solid ${dt('button.danger.hover.border.color')};
|
||||
color: ${dt('button.danger.hover.color')};
|
||||
}
|
||||
|
||||
.p-button-danger:not(:disabled):active {
|
||||
background: var(--p-button-danger-background-active);
|
||||
border: 1px solid var(--p-button-danger-border-color-active);
|
||||
color: var(--p-button-danger-text-color-active);
|
||||
background: ${dt('button.danger.active.background')};
|
||||
border: 1px solid ${dt('button.danger.active.border.color')};
|
||||
color: ${dt('button.danger.active.color')};
|
||||
}
|
||||
|
||||
.p-button-danger:focus-visible {
|
||||
outline-color: var(--p-button-danger-background);
|
||||
background: ${dt('button.danger.background')};
|
||||
}
|
||||
|
||||
.p-button-contrast {
|
||||
background: var(--p-button-contrast-background);
|
||||
border: 1px solid var(--p-button-contrast-border-color);
|
||||
color: var(--p-button-contrast-text-color);
|
||||
background: ${dt('button.contrast.background')};
|
||||
border: 1px solid ${dt('button.contrast.border.color')};
|
||||
color: ${dt('button.contrast.color')};
|
||||
}
|
||||
|
||||
.p-button-contrast:not(:disabled):hover {
|
||||
background: var(--p-button-contrast-background-hover);
|
||||
border: 1px solid var(--p-button-contrast-border-color-hover);
|
||||
color: var(--p-button-contrast-text-color-hover);
|
||||
background: ${dt('button.contrast.hover.background')};
|
||||
border: 1px solid ${dt('button.contrast.hover.border.color')};
|
||||
color: ${dt('button.contrast.hover.color')};
|
||||
}
|
||||
|
||||
.p-button-contrast:not(:disabled):active {
|
||||
background: var(--p-button-contrast-background-active);
|
||||
border: 1px solid var(--p-button-contrast-border-color-active);
|
||||
color: var(--p-button-contrast-text-color-active);
|
||||
background: ${dt('button.contrast.active.background')};
|
||||
border: 1px solid ${dt('button.contrast.active.border.color')};
|
||||
color: ${dt('button.contrast.active.color')};
|
||||
}
|
||||
|
||||
.p-button-contrast:focus-visible {
|
||||
outline-color: var(--p-button-contrast-background);
|
||||
outline-color: ${dt('button.contrast.background')};
|
||||
}
|
||||
|
||||
|
||||
/* Outlined Buttons */
|
||||
.p-button-outlined {
|
||||
background: transparent;
|
||||
border-color: var(--p-button-outlined-primary-border-color);
|
||||
color: var(--p-button-outlined-primary-text-color);
|
||||
border-color: ${dt('button.outlined.primary.border.color')};
|
||||
color: ${dt('button.outlined.primary.color')};
|
||||
}
|
||||
|
||||
.p-button-outlined:not(:disabled):hover {
|
||||
background: var(--p-button-outlined-primary-background-hover);
|
||||
border-color: var(--p-button-outlined-primary-border-color);
|
||||
color: var(--p-button-outlined-primary-text-color);
|
||||
background: ${dt('button.outlined.primary.hover.background')};
|
||||
border-color: ${dt('button.outlined.primary.border.color')};
|
||||
color: ${dt('button.outlined.primary.color')};
|
||||
}
|
||||
|
||||
.p-button-outlined:not(:disabled):active {
|
||||
background: var(--p-button-outlined-primary-background-active);
|
||||
border-color: var(--p-button-outlined-primary-border-color);
|
||||
color: var(--p-button-outlined-primary-text-color);
|
||||
background: ${dt('button.outlined.primary.active.background')};
|
||||
border-color: ${dt('button.outlined.primary.border.color')};
|
||||
color: ${dt('button.outlined.primary.color')};
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-secondary {
|
||||
border-color: var(--p-button-outlined-secondary-border-color);
|
||||
color: var(--p-button-outlined-secondary-text-color);
|
||||
border-color: ${dt('button.outlined.secondary.border.color')};
|
||||
color: ${dt('button.outlined.secondary.color')};
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-secondary:not(:disabled):hover {
|
||||
background: var(--p-button-outlined-secondary-background-hover);
|
||||
border-color: var(--p-button-outlined-secondary-border-color);
|
||||
color: var(--p-button-outlined-secondary-text-color);
|
||||
background: ${dt('button.outlined.secondary.hover.background')};
|
||||
border-color: ${dt('button.outlined.secondary.border.color')};
|
||||
color: ${dt('button.outlined.secondary.color')};
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-secondary:not(:disabled):active {
|
||||
background: var(--p-button-outlined-secondary-background-active);
|
||||
border-color: var(--p-button-outlined-secondary-border-color);
|
||||
color: var(--p-button-outlined-secondary-text-color);
|
||||
background: ${dt('button.outlined.secondary.active.background')};
|
||||
border-color: ${dt('button.outlined.secondary.border.color')};
|
||||
color: ${dt('button.outlined.secondary.color')};
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-success {
|
||||
border-color: var(--p-button-outlined-success-border-color);
|
||||
color: var(--p-button-outlined-success-text-color);
|
||||
border-color: ${dt('button.outlined.success.border.color')};
|
||||
color: ${dt('button.outlined.success.color')};
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-success:not(:disabled):hover {
|
||||
background: var(--p-button-outlined-success-background-hover);
|
||||
border-color: var(--p-button-outlined-success-border-color);
|
||||
color: var(--p-button-outlined-success-text-color);
|
||||
background: ${dt('button.outlined.success.hover.background')};
|
||||
border-color: ${dt('button.outlined.success.border.color')};
|
||||
color: ${dt('button.outlined.success.color')};
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-success:not(:disabled):active {
|
||||
background: var(--p-button-outlined-success-background-active);
|
||||
border-color: var(--p-button-outlined-success-border-color);
|
||||
color: var(--p-button-outlined-success-text-color);
|
||||
background: ${dt('button.outlined.success.active.background')};
|
||||
border-color: ${dt('button.outlined.success.border.color')};
|
||||
color: ${dt('button.outlined.success.color')};
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-info {
|
||||
border-color: var(--p-button-outlined-info-border-color);
|
||||
color: var(--p-button-outlined-info-text-color);
|
||||
border-color: ${dt('button.outlined.info.border.color')};
|
||||
color: ${dt('button.outlined.info.color')};
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-info:not(:disabled):hover {
|
||||
background: var(--p-button-outlined-info-background-hover);
|
||||
border-color: var(--p-button-outlined-info-border-color);
|
||||
color: var(--p-button-outlined-info-text-color);
|
||||
background: ${dt('button.outlined.info.hover.background')};
|
||||
border-color: ${dt('button.outlined.info.border.color')};
|
||||
color: ${dt('button.outlined.info.color')};
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-info:not(:disabled):active {
|
||||
background: var(--p-button-outlined-info-background-active);
|
||||
border-color: var(--p-button-outlined-info-border-color);
|
||||
color: var(--p-button-outlined-info-text-color);
|
||||
background: ${dt('button.outlined.info.active.background')};
|
||||
border-color: ${dt('button.outlined.info.border.color')};
|
||||
color: ${dt('button.outlined.info.color')};
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-warning {
|
||||
border-color: var(--p-button-outlined-warn-border-color);
|
||||
color: var(--p-button-outlined-warn-text-color);
|
||||
border-color: ${dt('button.outlined.warn.border.color')};
|
||||
color: ${dt('button.outlined.warn.color')};
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-warning:not(:disabled):hover {
|
||||
background: var(--p-button-outlined-warn-background-hover);
|
||||
border-color: var(--p-button-outlined-warn-border-color);
|
||||
color: var(--p-button-outlined-warn-text-color);
|
||||
background: ${dt('button.outlined.warn.hover.background')};
|
||||
border-color: ${dt('button.outlined.warn.border.color')};
|
||||
color: ${dt('button.outlined.warn.color')};
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-warning:not(:disabled):active {
|
||||
background: var(--p-button-outlined-warn-background-active);
|
||||
border-color: var(--p-button-outlined-warn-border-color);
|
||||
color: var(--p-button-outlined-warn-text-color);
|
||||
background: ${dt('button.outlined.warn.active.background')};
|
||||
border-color: ${dt('button.outlined.warn.border.color')};
|
||||
color: ${dt('button.outlined.warn.color')};
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-help {
|
||||
border-color: var(--p-button-outlined-help-border-color);
|
||||
color: var(--p-button-outlined-help-text-color);
|
||||
border-color: ${dt('button.outlined.help.border.color')};
|
||||
color: ${dt('button.outlined.help.color')};
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-help:not(:disabled):hover {
|
||||
background: var(--p-button-outlined-help-background-hover);
|
||||
border-color: var(--p-button-outlined-help-border-color);
|
||||
color: var(--p-button-outlined-help-text-color);
|
||||
background: ${dt('button.outlined.help.hover.background')};
|
||||
border-color: ${dt('button.outlined.help.border.color')};
|
||||
color: ${dt('button.outlined.help.color')};
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-help:not(:disabled):active {
|
||||
background: var(--p-button-outlined-help-background-active);
|
||||
border-color: var(--p-button-outlined-help-border-color);
|
||||
color: var(--p-button-outlined-help-text-color);
|
||||
background: ${dt('button.outlined.help.active.background')};
|
||||
border-color: ${dt('button.outlined.help.border.color')};
|
||||
color: ${dt('button.outlined.help.color')};
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-danger {
|
||||
border-color: var(--p-button-outlined-danger-border-color);
|
||||
color: var(--p-button-outlined-danger-text-color);
|
||||
border-color: ${dt('button.outlined.danger.border.color')};
|
||||
color: ${dt('button.outlined.danger.color')};
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-danger:not(:disabled):hover {
|
||||
background: var(--p-button-outlined-danger-background-hover);
|
||||
border-color: var(--p-button-outlined-danger-border-color);
|
||||
color: var(--p-button-outlined-danger-text-color);
|
||||
background: ${dt('button.outlined.danger.hover.background')};
|
||||
border-color: ${dt('button.outlined.danger.border.color')};
|
||||
color: ${dt('button.outlined.danger.color')};
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-danger:not(:disabled):active {
|
||||
background: var(--p-button-outlined-danger-background-active);
|
||||
border-color: var(--p-button-outlined-danger-border-color);
|
||||
color: var(--p-button-outlined-danger-text-color);
|
||||
background: ${dt('button.outlined.danger.active.background')};
|
||||
border-color: ${dt('button.outlined.danger.border.color')};
|
||||
color: ${dt('button.outlined.danger.color')};
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-contrast {
|
||||
border-color: var(--p-button-outlined-contrast-border-color);
|
||||
color: var(--p-button-outlined-contrast-text-color);
|
||||
border-color: ${dt('button.outlined.contrast.border.color')};
|
||||
color: ${dt('button.outlined.contrast.color')};
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-contrast:not(:disabled):hover {
|
||||
background: var(--p-button-outlined-contrast-background-hover);
|
||||
border-color: var(--p-button-outlined-contrast-border-color);
|
||||
color: var(--p-button-outlined-contrast-text-color);
|
||||
background: ${dt('button.outlined.contrast.hover.background')};
|
||||
border-color: ${dt('button.outlined.contrast.border.color')};
|
||||
color: ${dt('button.outlined.contrast.color')};
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-contrast:not(:disabled):active {
|
||||
background: var(--p-button-outlined-contrast-background-active);
|
||||
border-color: var(--p-button-outlined-contrast-border-color);
|
||||
color: var(--p-button-outlined-contrast-text-color);
|
||||
background: ${dt('button.outlined.contrast.active.background')};
|
||||
border-color: ${dt('button.outlined.contrast.border.color')};
|
||||
color: ${dt('button.outlined.contrast.color')};
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-plain {
|
||||
border-color: var(--p-button-outlined-plain-border-color);
|
||||
color: var(--p-button-outlined-plain-text-color);
|
||||
border-color: ${dt('button.outlined.plain.border.color')};
|
||||
color: ${dt('button.outlined.plain.color')};
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-plain:not(:disabled):hover {
|
||||
background: var(--p-button-outlined-plain-background-hover);
|
||||
border-color: var(--p-button-outlined-plain-border-color);
|
||||
color: var(--p-button-outlined-plain-text-color);
|
||||
background: ${dt('button.outlined.plain.hover.background')};
|
||||
border-color: ${dt('button.outlined.plain.border.color')};
|
||||
color: ${dt('button.outlined.plain.color')};
|
||||
}
|
||||
|
||||
.p-button-outlined.p-button-plain:not(:disabled):active {
|
||||
background: var(--p-button-outlined-plain-background-active);
|
||||
border-color: var(--p-button-outlined-plain-border-color);
|
||||
color: var(--p-button-outlined-plain-text-color);
|
||||
background: ${dt('button.outlined.plain.active.background')};
|
||||
border-color: ${dt('button.outlined.plain.border.color')};
|
||||
color: ${dt('button.outlined.plain.color')};
|
||||
}
|
||||
|
||||
/* Text Button */
|
||||
.p-button-text {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--p-button-text-primary-text-color);
|
||||
color: ${dt('button.text.primary.color')};
|
||||
}
|
||||
|
||||
.p-button-text:not(:disabled):hover {
|
||||
background: var(--p-button-text-primary-background-hover);
|
||||
background: ${dt('button.text.primary.hover.background')};
|
||||
border-color: transparent;
|
||||
color: var(--p-button-text-primary-text-color);
|
||||
color: ${dt('button.text.primary.color')};
|
||||
}
|
||||
|
||||
.p-button-text:not(:disabled):active {
|
||||
background: var(--p-button-text-primary-background-active);
|
||||
background: ${dt('button.text.primary.active.background')};
|
||||
border-color: transparent;
|
||||
color: var(--p-button-text-primary-text-color);
|
||||
color: ${dt('button.text.primary.color')};
|
||||
}
|
||||
|
||||
.p-button-text.p-button-secondary {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--p-button-text-secondary-text-color);
|
||||
color: ${dt('button.text.secondary.color')};
|
||||
}
|
||||
|
||||
.p-button-text.p-button-secondary:not(:disabled):hover {
|
||||
background: var(--p-button-text-secondary-background-hover);
|
||||
background: ${dt('button.text.secondary.hover.background')};
|
||||
border-color: transparent;
|
||||
color: var(--p-button-text-secondary-text-color);
|
||||
color: ${dt('button.text.secondary.color')};
|
||||
}
|
||||
|
||||
.p-button-text.p-button-secondary:not(:disabled):active {
|
||||
background: var(--p-button-text-secondary-background-active);
|
||||
background: ${dt('button.text.secondary.active.background')};
|
||||
border-color: transparent;
|
||||
color: var(--p-button-text-secondary-text-color);
|
||||
color: ${dt('button.text.secondary.color')};
|
||||
}
|
||||
|
||||
.p-button-text.p-button-success {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--p-button-text-success-text-color);
|
||||
color: ${dt('button.text.success.color')};
|
||||
}
|
||||
|
||||
.p-button-text.p-button-success:not(:disabled):hover {
|
||||
background: var(--p-button-text-success-background-hover);
|
||||
background: ${dt('button.text.success.hover.background')};
|
||||
border-color: transparent;
|
||||
color: var(--p-button-text-success-text-color);
|
||||
color: ${dt('button.text.success.color')};
|
||||
}
|
||||
|
||||
.p-button-text.p-button-success:not(:disabled):active {
|
||||
background: var(--p-button-text-success-background-active);
|
||||
background: ${dt('button.text.success.active.background')};
|
||||
border-color: transparent;
|
||||
color: var(--p-button-text-success-text-color);
|
||||
color: ${dt('button.text.success.color')};
|
||||
}
|
||||
|
||||
.p-button-text.p-button-info {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--p-button-text-info-text-color);
|
||||
color: ${dt('button.text.info.color')};
|
||||
}
|
||||
|
||||
.p-button-text.p-button-info:not(:disabled):hover {
|
||||
background: var(--p-button-text-info-background-hover);
|
||||
background: ${dt('button.text.info.hover.background')};
|
||||
border-color: transparent;
|
||||
color: var(--p-button-text-info-text-color);
|
||||
color: ${dt('button.text.info.color')};
|
||||
}
|
||||
|
||||
.p-button-text.p-button-info:not(:disabled):active {
|
||||
background: var(--p-button-text-info-background-active);
|
||||
background: ${dt('button.text.info.active.background')};
|
||||
border-color: transparent;
|
||||
color: var(--p-button-text-info-text-color);
|
||||
color: ${dt('button.text.info.color')};
|
||||
}
|
||||
|
||||
.p-button-text.p-button-warning {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--p-button-text-warn-text-color);
|
||||
color: ${dt('button.text.warn.color')};
|
||||
}
|
||||
|
||||
.p-button-text.p-button-warning:not(:disabled):hover {
|
||||
background: var(--p-button-text-warn-background-hover);
|
||||
background: ${dt('button.text.warn.hover.background')};
|
||||
border-color: transparent;
|
||||
color: var(--p-button-text-warn-text-color);
|
||||
color: ${dt('button.text.warn.color')};
|
||||
}
|
||||
|
||||
.p-button-text.p-button-warning:not(:disabled):active {
|
||||
background: var(--p-button-text-warn-background-active);
|
||||
background: ${dt('button.text.warn.active.background')};
|
||||
border-color: transparent;
|
||||
color: var(--p-button-text-warn-text-color);
|
||||
color: ${dt('button.text.warn.color')};
|
||||
}
|
||||
|
||||
.p-button-text.p-button-help {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--p-button-text-help-text-color);
|
||||
color: ${dt('button.text.help.color')};
|
||||
}
|
||||
|
||||
.p-button-text.p-button-help:not(:disabled):hover {
|
||||
background: var(--p-button-text-help-background-hover);
|
||||
background: ${dt('button.text.help.hover.background')};
|
||||
border-color: transparent;
|
||||
color: var(--p-button-text-help-text-color);
|
||||
color: ${dt('button.text.help.color')};
|
||||
}
|
||||
|
||||
.p-button-text.p-button-help:not(:disabled):active {
|
||||
background: var(--p-button-text-help-background-active);
|
||||
background: ${dt('button.text.help.active.background')};
|
||||
border-color: transparent;
|
||||
color: var(--p-button-text-help-text-color);
|
||||
color: ${dt('button.text.help.color')};
|
||||
}
|
||||
|
||||
.p-button-text.p-button-danger {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--p-button-text-danger-text-color);
|
||||
color: ${dt('button.text.danger.color')};
|
||||
}
|
||||
|
||||
.p-button-text.p-button-danger:not(:disabled):hover {
|
||||
background: var(--p-button-text-danger-background-hover);
|
||||
background: ${dt('button.text.danger.hover.background')};
|
||||
border-color: transparent;
|
||||
color: var(--p-button-text-danger-text-color);
|
||||
color: ${dt('button.text.danger.color')};
|
||||
}
|
||||
|
||||
.p-button-text.p-button-danger:not(:disabled):active {
|
||||
background: var(--p-button-text-danger-background-active);
|
||||
background: ${dt('button.text.danger.active.background')};
|
||||
border-color: transparent;
|
||||
color: var(--p-button-text-danger-text-color);
|
||||
color: ${dt('button.text.danger.color')};
|
||||
}
|
||||
|
||||
.p-button-text.p-button-plain {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--p-button-text-plain-text-color);
|
||||
color: ${dt('button.text.plain.color')};
|
||||
}
|
||||
|
||||
.p-button-text.p-button-plain:not(:disabled):hover {
|
||||
background: var(--p-button-text-plain-background-hover);
|
||||
background: ${dt('button.text.plain.hover.background')};
|
||||
border-color: transparent;
|
||||
color: var(--p-button-text-plain-text-color);
|
||||
color: ${dt('button.text.plain.color')};
|
||||
}
|
||||
|
||||
.p-button-text.p-button-plain:not(:disabled):active {
|
||||
background: var(--p-button-text-plain-background-active);
|
||||
background: ${dt('button.text.plain.active.background')};
|
||||
border-color: transparent;
|
||||
color: var(--p-button-text-plain-text-color);
|
||||
color: ${dt('button.text.plain.color')};
|
||||
}
|
||||
|
||||
/* Link Button */
|
||||
.p-button-link {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--p-button-link-text-color);
|
||||
color: ${dt('button.link.color')};
|
||||
}
|
||||
|
||||
.p-button-link:not(:disabled):hover {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--p-button-link-text-color-hover);
|
||||
color: ${dt('button.link.hover.color')};
|
||||
}
|
||||
|
||||
.p-button-link:not(:disabled):hover .p-button-label {
|
||||
|
|
@ -609,7 +609,7 @@ export default {
|
|||
.p-button-link:not(:disabled):active {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--p-button-link-text-color-active);
|
||||
color: ${dt('button.link.active.color')};
|
||||
}
|
||||
|
||||
.p-buttonset .p-button {
|
||||
|
|
|
|||
|
|
@ -54,15 +54,15 @@ export default {
|
|||
overflow: hidden;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
background: var(--p-speeddial-item-background);
|
||||
color: var(--p-speeddial-item-text-color);
|
||||
background: ${dt('speeddial.item.background')};
|
||||
color: ${dt('speeddial.item.color')};
|
||||
outline-color: transparent;
|
||||
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
|
||||
}
|
||||
|
||||
.p-speeddial-action:hover {
|
||||
background: var(--p-speeddial-item-background-hover);
|
||||
color: var(--p-speeddial-item-text-color-hover);
|
||||
background: ${dt('speeddial.item.hover.background')};
|
||||
color: ${dt('speeddial.item.hover.color')};
|
||||
}
|
||||
|
||||
.p-speeddial-circle .p-speeddial-item,
|
||||
|
|
@ -78,7 +78,7 @@ export default {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
background-color: var(--p-mask-background);
|
||||
background-color: ${dt('mask.background')};
|
||||
border-radius: 6px;
|
||||
transition: opacity 150ms;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,390 +4,390 @@ export default {
|
|||
root: {
|
||||
primary: {
|
||||
background: '{primary.color}',
|
||||
backgroundHover: '{primary.hoverColor}',
|
||||
backgroundActive: '{primary.activeColor}',
|
||||
hoverBackground: '{primary.hoverColor}',
|
||||
activeBackground: '{primary.activeColor}',
|
||||
borderColor: '{primary.color}',
|
||||
borderColorHover: '{primary.hoverColor}',
|
||||
borderColorActive: '{primary.activeColor}',
|
||||
textColor: '{primary.inverseColor}',
|
||||
textColorHover: '{primary.inverseColor}',
|
||||
textColorActive: '{primary.inverseColor}'
|
||||
hoverBorderColor: '{primary.hoverColor}',
|
||||
activeBorderColor: '{primary.activeColor}',
|
||||
color: '{primary.inverseColor}',
|
||||
hoverColor: '{primary.inverseColor}',
|
||||
activeColor: '{primary.inverseColor}'
|
||||
},
|
||||
secondary: {
|
||||
background: '{surface.100}',
|
||||
backgroundHover: '{surface.200}',
|
||||
backgroundActive: '{surface.300}',
|
||||
hoverBackground: '{surface.200}',
|
||||
activeBackground: '{surface.300}',
|
||||
borderColor: '{surface.100}',
|
||||
borderColorHover: '{surface.200}',
|
||||
borderColorActive: '{surface.300}',
|
||||
textColor: '{surface.600}',
|
||||
textColorHover: '{surface.700}',
|
||||
textColorActive: '{surface.800}'
|
||||
hoverBorderColor: '{surface.200}',
|
||||
activeBorderColor: '{surface.300}',
|
||||
color: '{surface.600}',
|
||||
hoverColor: '{surface.700}',
|
||||
activeColor: '{surface.800}'
|
||||
},
|
||||
info: {
|
||||
background: '{sky.500}',
|
||||
backgroundHover: '{sky.600}',
|
||||
backgroundActive: '{sky.700}',
|
||||
hoverBackground: '{sky.600}',
|
||||
activeBackground: '{sky.700}',
|
||||
borderColor: '{sky.500}',
|
||||
borderColorHover: '{sky.600}',
|
||||
borderColorActive: '{sky.700}',
|
||||
textColor: '#ffffff',
|
||||
textColorHover: '#ffffff',
|
||||
textColorActive: '#ffffff'
|
||||
hoverBorderColor: '{sky.600}',
|
||||
activeBorderColor: '{sky.700}',
|
||||
color: '#ffffff',
|
||||
hoverColor: '#ffffff',
|
||||
activeColor: '#ffffff'
|
||||
},
|
||||
success: {
|
||||
background: '{green.500}',
|
||||
backgroundHover: '{green.600}',
|
||||
backgroundActive: '{green.700}',
|
||||
hoverBackground: '{green.600}',
|
||||
activeBackground: '{green.700}',
|
||||
borderColor: '{green.500}',
|
||||
borderColorHover: '{green.600}',
|
||||
borderColorActive: '{green.700}',
|
||||
textColor: '#ffffff',
|
||||
textColorHover: '#ffffff',
|
||||
textColorActive: '#ffffff'
|
||||
hoverBorderColor: '{green.600}',
|
||||
activeBorderColor: '{green.700}',
|
||||
color: '#ffffff',
|
||||
hoverColor: '#ffffff',
|
||||
activeColor: '#ffffff'
|
||||
},
|
||||
warn: {
|
||||
background: '{orange.500}',
|
||||
backgroundHover: '{orange.600}',
|
||||
backgroundActive: '{orange.700}',
|
||||
hoverBackground: '{orange.600}',
|
||||
activeBackground: '{orange.700}',
|
||||
borderColor: '{orange.500}',
|
||||
borderColorHover: '{orange.600}',
|
||||
borderColorActive: '{orange.700}',
|
||||
textColor: '#ffffff',
|
||||
textColorHover: '#ffffff',
|
||||
textColorActive: '#ffffff'
|
||||
hoverBorderColor: '{orange.600}',
|
||||
activeBorderColor: '{orange.700}',
|
||||
color: '#ffffff',
|
||||
hoverColor: '#ffffff',
|
||||
activeColor: '#ffffff'
|
||||
},
|
||||
help: {
|
||||
background: '{purple.500}',
|
||||
backgroundHover: '{purple.600}',
|
||||
backgroundActive: '{purple.700}',
|
||||
hoverBackground: '{purple.600}',
|
||||
activeBackground: '{purple.700}',
|
||||
borderColor: '{purple.500}',
|
||||
borderColorHover: '{purple.600}',
|
||||
borderColorActive: '{purple.700}',
|
||||
textColor: '#ffffff',
|
||||
textColorHover: '#ffffff',
|
||||
textColorActive: '#ffffff'
|
||||
hoverBorderColor: '{purple.600}',
|
||||
activeBorderColor: '{purple.700}',
|
||||
color: '#ffffff',
|
||||
hoverColor: '#ffffff',
|
||||
activeColor: '#ffffff'
|
||||
},
|
||||
danger: {
|
||||
background: '{red.500}',
|
||||
backgroundHover: '{red.600}',
|
||||
backgroundActive: '{red.700}',
|
||||
hoverBackground: '{red.600}',
|
||||
activeBackground: '{red.700}',
|
||||
borderColor: '{red.500}',
|
||||
borderColorHover: '{red.600}',
|
||||
borderColorActive: '{red.700}',
|
||||
textColor: '#ffffff',
|
||||
textColorHover: '#ffffff',
|
||||
textColorActive: '#ffffff'
|
||||
hoverBorderColor: '{red.600}',
|
||||
activeBorderColor: '{red.700}',
|
||||
color: '#ffffff',
|
||||
hoverColor: '#ffffff',
|
||||
activeColor: '#ffffff'
|
||||
},
|
||||
contrast: {
|
||||
background: '{surface.950}',
|
||||
backgroundHover: '{surface.900}',
|
||||
backgroundActive: '{surface.800}',
|
||||
hoverBackground: '{surface.900}',
|
||||
activeBackground: '{surface.800}',
|
||||
borderColor: '{surface.950}',
|
||||
borderColorHover: '{surface.900}',
|
||||
borderColorActive: '{surface.800}',
|
||||
textColor: '{surface.0}',
|
||||
textColorHover: '{surface.0}',
|
||||
textColorActive: '{surface.0}'
|
||||
hoverBorderColor: '{surface.900}',
|
||||
activeBorderColor: '{surface.800}',
|
||||
color: '{surface.0}',
|
||||
hoverColor: '{surface.0}',
|
||||
activeColor: '{surface.0}'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
primary: {
|
||||
backgroundHover: '{primary.50}',
|
||||
backgroundActive: '{primary.100}',
|
||||
hoverBackground: '{primary.50}',
|
||||
activeBackground: '{primary.100}',
|
||||
borderColor: '{primary.200}',
|
||||
textColor: '{primary.color}'
|
||||
color: '{primary.color}'
|
||||
},
|
||||
secondary: {
|
||||
backgroundHover: '{surface.50}',
|
||||
backgroundActive: '{surface.100}',
|
||||
hoverBackground: '{surface.50}',
|
||||
activeBackground: '{surface.100}',
|
||||
borderColor: '{surface.200}',
|
||||
textColor: '{surface.500}'
|
||||
color: '{surface.500}'
|
||||
},
|
||||
success: {
|
||||
backgroundHover: '{green.50}',
|
||||
backgroundActive: '{green.100}',
|
||||
hoverBackground: '{green.50}',
|
||||
activeBackground: '{green.100}',
|
||||
borderColor: '{green.200}',
|
||||
textColor: '{green.500}'
|
||||
color: '{green.500}'
|
||||
},
|
||||
info: {
|
||||
backgroundHover: '{sky.50}',
|
||||
backgroundActive: '{sky.100}',
|
||||
hoverBackground: '{sky.50}',
|
||||
activeBackground: '{sky.100}',
|
||||
borderColor: '{sky.200}',
|
||||
textColor: '{sky.500}'
|
||||
color: '{sky.500}'
|
||||
},
|
||||
warn: {
|
||||
backgroundHover: '{orange.50}',
|
||||
backgroundActive: '{orange.100}',
|
||||
hoverBackground: '{orange.50}',
|
||||
activeBackground: '{orange.100}',
|
||||
borderColor: '{orange.200}',
|
||||
textColor: '{orange.500}'
|
||||
color: '{orange.500}'
|
||||
},
|
||||
help: {
|
||||
backgroundHover: '{purple.50}',
|
||||
backgroundActive: '{purple.100}',
|
||||
hoverBackground: '{purple.50}',
|
||||
activeBackground: '{purple.100}',
|
||||
borderColor: '{purple.200}',
|
||||
textColor: '{purple.500}'
|
||||
color: '{purple.500}'
|
||||
},
|
||||
danger: {
|
||||
backgroundHover: '{red.50}',
|
||||
backgroundActive: '{red.100}',
|
||||
hoverBackground: '{red.50}',
|
||||
activeBackground: '{red.100}',
|
||||
borderColor: '{red.200}',
|
||||
textColor: '{red.500}'
|
||||
color: '{red.500}'
|
||||
},
|
||||
contrast: {
|
||||
backgroundHover: '{surface.50}',
|
||||
backgroundActive: '{surface.100}',
|
||||
hoverBackground: '{surface.50}',
|
||||
activeBackground: '{surface.100}',
|
||||
borderColor: '{surface.700}',
|
||||
textColor: '{surface.950}'
|
||||
color: '{surface.950}'
|
||||
},
|
||||
plain: {
|
||||
backgroundHover: '{surface.50}',
|
||||
backgroundActive: '{surface.100}',
|
||||
hoverBackground: '{surface.50}',
|
||||
activeBackground: '{surface.100}',
|
||||
borderColor: '{surface.200}',
|
||||
textColor: '{surface.700}'
|
||||
color: '{surface.700}'
|
||||
}
|
||||
},
|
||||
text: {
|
||||
primary: {
|
||||
backgroundHover: '{primary.50}',
|
||||
backgroundActive: '{primary.100}',
|
||||
textColor: '{primary.color}'
|
||||
hoverBackground: '{primary.50}',
|
||||
activeBackground: '{primary.100}',
|
||||
color: '{primary.color}'
|
||||
},
|
||||
secondary: {
|
||||
backgroundHover: '{surface.50}',
|
||||
backgroundActive: '{surface.100}',
|
||||
textColor: '{surface.500}'
|
||||
hoverBackground: '{surface.50}',
|
||||
activeBackground: '{surface.100}',
|
||||
color: '{surface.500}'
|
||||
},
|
||||
success: {
|
||||
backgroundHover: '{green.50}',
|
||||
backgroundActive: '{green.100}',
|
||||
textColor: '{green.500}'
|
||||
hoverBackground: '{green.50}',
|
||||
activeBackground: '{green.100}',
|
||||
color: '{green.500}'
|
||||
},
|
||||
info: {
|
||||
backgroundHover: '{sky.50}',
|
||||
backgroundActive: '{sky.100}',
|
||||
textColor: '{sky.500}'
|
||||
hoverBackground: '{sky.50}',
|
||||
activeBackground: '{sky.100}',
|
||||
color: '{sky.500}'
|
||||
},
|
||||
warn: {
|
||||
backgroundHover: '{orange.50}',
|
||||
backgroundActive: '{orange.100}',
|
||||
textColor: '{orange.500}'
|
||||
hoverBackground: '{orange.50}',
|
||||
activeBackground: '{orange.100}',
|
||||
color: '{orange.500}'
|
||||
},
|
||||
help: {
|
||||
backgroundHover: '{purple.50}',
|
||||
backgroundActive: '{purple.100}',
|
||||
textColor: '{purple.600}'
|
||||
hoverBackground: '{purple.50}',
|
||||
activeBackground: '{purple.100}',
|
||||
color: '{purple.600}'
|
||||
},
|
||||
danger: {
|
||||
backgroundHover: '{red.50}',
|
||||
backgroundActive: '{red.100}',
|
||||
textColor: '{red.500}'
|
||||
hoverBackground: '{red.50}',
|
||||
activeBackground: '{red.100}',
|
||||
color: '{red.500}'
|
||||
},
|
||||
plain: {
|
||||
backgroundHover: '{surface.50}',
|
||||
backgroundActive: '{surface.100}',
|
||||
textColor: '{surface.700}'
|
||||
hoverBackground: '{surface.50}',
|
||||
activeBackground: '{surface.100}',
|
||||
color: '{surface.700}'
|
||||
}
|
||||
},
|
||||
link: {
|
||||
textColor: '{primary.color}',
|
||||
textColorHover: '{primary.color}',
|
||||
textColorActive: '{primary.color}'
|
||||
color: '{primary.color}',
|
||||
hoverColor: '{primary.color}',
|
||||
activeColor: '{primary.color}'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
root: {
|
||||
primary: {
|
||||
background: '{primary.color}',
|
||||
backgroundHover: '{primary.hoverColor}',
|
||||
backgroundActive: '{primary.activeColor}',
|
||||
hoverBackground: '{primary.hoverColor}',
|
||||
activeBackground: '{primary.activeColor}',
|
||||
borderColor: '{primary.color}',
|
||||
borderColorHover: '{primary.hoverColor}',
|
||||
borderColorActive: '{primary.activeColor}',
|
||||
textColor: '{primary.inverseColor}',
|
||||
textColorHover: '{primary.inverseColor}',
|
||||
textColorActive: '{primary.inverseColor}'
|
||||
hoverBorderColor: '{primary.hoverColor}',
|
||||
activeBorderColor: '{primary.activeColor}',
|
||||
color: '{primary.inverseColor}',
|
||||
hoverColor: '{primary.inverseColor}',
|
||||
activeColor: '{primary.inverseColor}'
|
||||
},
|
||||
secondary: {
|
||||
background: '{surface.800}',
|
||||
backgroundHover: '{surface.700}',
|
||||
backgroundActive: '{surface.600}',
|
||||
hoverBackground: '{surface.700}',
|
||||
activeBackground: '{surface.600}',
|
||||
borderColor: '{surface.800}',
|
||||
borderColorHover: '{surface.700}',
|
||||
borderColorActive: '{surface.600}',
|
||||
textColor: '{surface.300}',
|
||||
textColorHover: '{surface.200}',
|
||||
textColorActive: '{surface.100}'
|
||||
hoverBorderColor: '{surface.700}',
|
||||
activeBorderColor: '{surface.600}',
|
||||
color: '{surface.300}',
|
||||
hoverColor: '{surface.200}',
|
||||
activeColor: '{surface.100}'
|
||||
},
|
||||
info: {
|
||||
background: '{sky.400}',
|
||||
backgroundHover: '{sky.300}',
|
||||
backgroundActive: '{sky.200}',
|
||||
hoverBackground: '{sky.300}',
|
||||
activeBackground: '{sky.200}',
|
||||
borderColor: '{sky.400}',
|
||||
borderColorHover: '{sky.300}',
|
||||
borderColorActive: '{sky.200}',
|
||||
textColor: '{sky.950}',
|
||||
textColorHover: '{sky.950}',
|
||||
textColorActive: '{sky.950}'
|
||||
hoverBorderColor: '{sky.300}',
|
||||
activeBorderColor: '{sky.200}',
|
||||
color: '{sky.950}',
|
||||
hoverColor: '{sky.950}',
|
||||
activeColor: '{sky.950}'
|
||||
},
|
||||
success: {
|
||||
background: '{green.400}',
|
||||
backgroundHover: '{green.300}',
|
||||
backgroundActive: '{green.200}',
|
||||
hoverBackground: '{green.300}',
|
||||
activeBackground: '{green.200}',
|
||||
borderColor: '{green.400}',
|
||||
borderColorHover: '{green.300}',
|
||||
borderColorActive: '{green.200}',
|
||||
textColor: '{green.950}',
|
||||
textColorHover: '{green.950}',
|
||||
textColorActive: '{green.950}'
|
||||
hoverBorderColor: '{green.300}',
|
||||
activeBorderColor: '{green.200}',
|
||||
color: '{green.950}',
|
||||
hoverColor: '{green.950}',
|
||||
activeColor: '{green.950}'
|
||||
},
|
||||
warn: {
|
||||
background: '{orange.400}',
|
||||
backgroundHover: '{orange.300}',
|
||||
backgroundActive: '{orange.200}',
|
||||
hoverBackground: '{orange.300}',
|
||||
activeBackground: '{orange.200}',
|
||||
borderColor: '{orange.400}',
|
||||
borderColorHover: '{orange.300}',
|
||||
borderColorActive: '{orange.200}',
|
||||
textColor: '{orange.950}',
|
||||
textColorHover: '{orange.950}',
|
||||
textColorActive: '{orange.950}'
|
||||
hoverBorderColor: '{orange.300}',
|
||||
activeBorderColor: '{orange.200}',
|
||||
color: '{orange.950}',
|
||||
hoverColor: '{orange.950}',
|
||||
activeColor: '{orange.950}'
|
||||
},
|
||||
help: {
|
||||
background: '{purple.400}',
|
||||
backgroundHover: '{purple.300}',
|
||||
backgroundActive: '{purple.200}',
|
||||
hoverBackground: '{purple.300}',
|
||||
activeBackground: '{purple.200}',
|
||||
borderColor: '{purple.400}',
|
||||
borderColorHover: '{purple.300}',
|
||||
borderColorActive: '{purple.200}',
|
||||
textColor: '{purple.950}',
|
||||
textColorHover: '{purple.950}',
|
||||
textColorActive: '{purple.950}'
|
||||
hoverBorderColor: '{purple.300}',
|
||||
activeBorderColor: '{purple.200}',
|
||||
color: '{purple.950}',
|
||||
hoverColor: '{purple.950}',
|
||||
activeColor: '{purple.950}'
|
||||
},
|
||||
danger: {
|
||||
background: '{red.400}',
|
||||
backgroundHover: '{red.300}',
|
||||
backgroundActive: '{red.200}',
|
||||
hoverBackground: '{red.300}',
|
||||
activeBackground: '{red.200}',
|
||||
borderColor: '{red.400}',
|
||||
borderColorHover: '{red.300}',
|
||||
borderColorActive: '{red.200}',
|
||||
textColor: '{red.950}',
|
||||
textColorHover: '{red.950}',
|
||||
textColorActive: '{red.950}'
|
||||
hoverBorderColor: '{red.300}',
|
||||
activeBorderColor: '{red.200}',
|
||||
color: '{red.950}',
|
||||
hoverColor: '{red.950}',
|
||||
activeColor: '{red.950}'
|
||||
},
|
||||
contrast: {
|
||||
background: '{surface.0}',
|
||||
backgroundHover: '{surface.100}',
|
||||
backgroundActive: '{surface.200}',
|
||||
hoverBackground: '{surface.100}',
|
||||
activeBackground: '{surface.200}',
|
||||
borderColor: '{surface.0}',
|
||||
borderColorHover: '{surface.100}',
|
||||
borderColorActive: '{surface.200}',
|
||||
textColor: '{surface.950}',
|
||||
textColorHover: '{surface.950}',
|
||||
textColorActive: '{surface.950}'
|
||||
hoverBorderColor: '{surface.100}',
|
||||
activeBorderColor: '{surface.200}',
|
||||
color: '{surface.950}',
|
||||
hoverColor: '{surface.950}',
|
||||
activeColor: '{surface.950}'
|
||||
}
|
||||
},
|
||||
outlined: {
|
||||
primary: {
|
||||
backgroundHover: 'color-mix(in srgb, {primary.color}, transparent 96%)',
|
||||
backgroundActive: 'color-mix(in srgb, {primary.color}, transparent 84%)',
|
||||
hoverBackground: 'color-mix(in srgb, {primary.color}, transparent 96%)',
|
||||
activeBackground: 'color-mix(in srgb, {primary.color}, transparent 84%)',
|
||||
borderColor: '{primary.900}',
|
||||
textColor: '{primary.color}'
|
||||
color: '{primary.color}'
|
||||
},
|
||||
secondary: {
|
||||
backgroundHover: 'rgba(255,255,255,0.04)',
|
||||
backgroundActive: 'rgba(255,255,255,0.16)',
|
||||
hoverBackground: 'rgba(255,255,255,0.04)',
|
||||
activeBackground: 'rgba(255,255,255,0.16)',
|
||||
borderColor: '{surface.700}',
|
||||
textColor: '{surface.400}'
|
||||
color: '{surface.400}'
|
||||
},
|
||||
success: {
|
||||
backgroundHover: 'color-mix(in srgb, {green.400}, transparent 96%)',
|
||||
backgroundActive: 'color-mix(in srgb, {green.400}, transparent 84%)',
|
||||
hoverBackground: 'color-mix(in srgb, {green.400}, transparent 96%)',
|
||||
activeBackground: 'color-mix(in srgb, {green.400}, transparent 84%)',
|
||||
borderColor: '{green.900}',
|
||||
textColor: '{green.400}'
|
||||
color: '{green.400}'
|
||||
},
|
||||
info: {
|
||||
backgroundHover: 'color-mix(in srgb, {sky.400}, transparent 96%)',
|
||||
backgroundActive: 'color-mix(in srgb, {sky.400}, transparent 84%)',
|
||||
hoverBackground: 'color-mix(in srgb, {sky.400}, transparent 96%)',
|
||||
activeBackground: 'color-mix(in srgb, {sky.400}, transparent 84%)',
|
||||
borderColor: '{sky.900}',
|
||||
textColor: '{sky.400}'
|
||||
color: '{sky.400}'
|
||||
},
|
||||
warn: {
|
||||
backgroundHover: 'color-mix(in srgb, {orange.400}, transparent 96%)',
|
||||
backgroundActive: 'color-mix(in srgb, {orange.400}, transparent 84%)',
|
||||
hoverBackground: 'color-mix(in srgb, {orange.400}, transparent 96%)',
|
||||
activeBackground: 'color-mix(in srgb, {orange.400}, transparent 84%)',
|
||||
borderColor: '{orange.900}',
|
||||
textColor: '{orange.400}'
|
||||
color: '{orange.400}'
|
||||
},
|
||||
help: {
|
||||
backgroundHover: 'color-mix(in srgb, {help.400}, transparent 96%)',
|
||||
backgroundActive: 'color-mix(in srgb, {help.400}, transparent 84%)',
|
||||
hoverBackground: 'color-mix(in srgb, {help.400}, transparent 96%)',
|
||||
activeBackground: 'color-mix(in srgb, {help.400}, transparent 84%)',
|
||||
borderColor: '{purple.900}',
|
||||
textColor: '{purple.400}'
|
||||
color: '{purple.400}'
|
||||
},
|
||||
danger: {
|
||||
backgroundHover: 'color-mix(in srgb, {danger.400}, transparent 96%)',
|
||||
backgroundActive: 'color-mix(in srgb, {danger.400}, transparent 84%)',
|
||||
hoverBackground: 'color-mix(in srgb, {danger.400}, transparent 96%)',
|
||||
activeBackground: 'color-mix(in srgb, {danger.400}, transparent 84%)',
|
||||
borderColor: '{red.900}',
|
||||
textColor: '{red.400}'
|
||||
color: '{red.400}'
|
||||
},
|
||||
contrast: {
|
||||
backgroundHover: '{surface.800}',
|
||||
backgroundActive: '{surface.700}',
|
||||
hoverBackground: '{surface.800}',
|
||||
activeBackground: '{surface.700}',
|
||||
borderColor: '{surface.500}',
|
||||
textColor: '{surface.0}'
|
||||
color: '{surface.0}'
|
||||
},
|
||||
plain: {
|
||||
backgroundHover: '{surface.800}',
|
||||
backgroundActive: '{surface.700}',
|
||||
hoverBackground: '{surface.800}',
|
||||
activeBackground: '{surface.700}',
|
||||
borderColor: '{surface.600}',
|
||||
textColor: '{surface.0}'
|
||||
color: '{surface.0}'
|
||||
}
|
||||
},
|
||||
text: {
|
||||
primary: {
|
||||
backgroundHover: 'color-mix(in srgb, {primary.color}, transparent 96%)',
|
||||
backgroundActive: 'color-mix(in srgb, {primary.color}, transparent 84%)',
|
||||
textColor: '{primary.color}'
|
||||
hoverBackground: 'color-mix(in srgb, {primary.color}, transparent 96%)',
|
||||
activeBackground: 'color-mix(in srgb, {primary.color}, transparent 84%)',
|
||||
color: '{primary.color}'
|
||||
},
|
||||
secondary: {
|
||||
backgroundHover: '{surface.800}',
|
||||
backgroundActive: '{surface.700}',
|
||||
textColor: '{surface.400}'
|
||||
hoverBackground: '{surface.800}',
|
||||
activeBackground: '{surface.700}',
|
||||
color: '{surface.400}'
|
||||
},
|
||||
success: {
|
||||
backgroundHover: 'color-mix(in srgb, {green.400}, transparent 96%)',
|
||||
backgroundActive: 'color-mix(in srgb, {green.400}, transparent 84%)',
|
||||
textColor: '{green.400}'
|
||||
hoverBackground: 'color-mix(in srgb, {green.400}, transparent 96%)',
|
||||
activeBackground: 'color-mix(in srgb, {green.400}, transparent 84%)',
|
||||
color: '{green.400}'
|
||||
},
|
||||
info: {
|
||||
backgroundHover: 'color-mix(in srgb, {sky.400}, transparent 96%)',
|
||||
backgroundActive: 'color-mix(in srgb, {sky.400}, transparent 84%)',
|
||||
textColor: '{sky.400}'
|
||||
hoverBackground: 'color-mix(in srgb, {sky.400}, transparent 96%)',
|
||||
activeBackground: 'color-mix(in srgb, {sky.400}, transparent 84%)',
|
||||
color: '{sky.400}'
|
||||
},
|
||||
warn: {
|
||||
backgroundHover: 'color-mix(in srgb, {orange.400}, transparent 96%)',
|
||||
backgroundActive: 'color-mix(in srgb, {orange.400}, transparent 84%)',
|
||||
textColor: '{orange.400}'
|
||||
hoverBackground: 'color-mix(in srgb, {orange.400}, transparent 96%)',
|
||||
activeBackground: 'color-mix(in srgb, {orange.400}, transparent 84%)',
|
||||
color: '{orange.400}'
|
||||
},
|
||||
help: {
|
||||
backgroundHover: 'color-mix(in srgb, {purple.400}, transparent 96%)',
|
||||
backgroundActive: 'color-mix(in srgb, {purple.400}, transparent 84%)',
|
||||
textColor: '{purple.400}'
|
||||
hoverBackground: 'color-mix(in srgb, {purple.400}, transparent 96%)',
|
||||
activeBackground: 'color-mix(in srgb, {purple.400}, transparent 84%)',
|
||||
color: '{purple.400}'
|
||||
},
|
||||
danger: {
|
||||
backgroundHover: 'color-mix(in srgb, {red.400}, transparent 96%)',
|
||||
backgroundActive: 'color-mix(in srgb, {red.400}, transparent 84%)',
|
||||
textColor: '{red.400}'
|
||||
hoverBackground: 'color-mix(in srgb, {red.400}, transparent 96%)',
|
||||
activeBackground: 'color-mix(in srgb, {red.400}, transparent 84%)',
|
||||
color: '{red.400}'
|
||||
},
|
||||
plain: {
|
||||
backgroundHover: '{surface.800}',
|
||||
backgroundActive: '{surface.700}',
|
||||
textColor: '{surface.0}'
|
||||
hoverBackground: '{surface.800}',
|
||||
activeBackground: '{surface.700}',
|
||||
color: '{surface.0}'
|
||||
}
|
||||
},
|
||||
link: {
|
||||
textColor: '{primary.color}',
|
||||
textColorHover: '{primary.color}',
|
||||
textColorActive: '{primary.color}'
|
||||
color: '{primary.color}',
|
||||
hoverColor: '{primary.color}',
|
||||
activeColor: '{primary.color}'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,11 +3,18 @@ export default {
|
|||
light: {
|
||||
item: {
|
||||
background: '{surface.100}',
|
||||
backgroundHover: '{surface.200}',
|
||||
textColor: '{surface.600}',
|
||||
textColorHover: '{surface.700}'
|
||||
hoverBackground: '{surface.200}',
|
||||
color: '{surface.600}',
|
||||
hoverColor: '{surface.700}'
|
||||
}
|
||||
},
|
||||
dark: {}
|
||||
dark: {
|
||||
item: {
|
||||
background: '{surface.800}',
|
||||
hoverBackground: '{surface.700}',
|
||||
color: '{surface.300}',
|
||||
hoverColor: '{surface.200}'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue