171 lines
2.8 KiB
SCSS
171 lines
2.8 KiB
SCSS
.base {
|
|
--bg: transparent;
|
|
--bg-hover: color-mix(in srgb, var(--bg) 90%, var(--fg));
|
|
--fg: var(--color-text-primary);
|
|
|
|
background-color: var(--bg);
|
|
border-radius: var(--radius-round);
|
|
color: var(--fg);
|
|
transition:
|
|
background-color 200ms,
|
|
color 200ms;
|
|
border: 0;
|
|
appearance: none;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: var(--fs-sm);
|
|
line-height: 1;
|
|
box-sizing: border-box;
|
|
|
|
&:hover:not(:active) {
|
|
background-color: var(--bg-hover);
|
|
}
|
|
|
|
&:focus-visible,
|
|
&:focus-within {
|
|
outline: 2px solid var(--color-bg-brand-base);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
&:disabled,
|
|
&:hover:disabled {
|
|
cursor: auto;
|
|
}
|
|
}
|
|
|
|
// Override default anchor styles
|
|
a.base {
|
|
&:focus {
|
|
border-radius: var(--radius-round);
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: inherit;
|
|
}
|
|
}
|
|
|
|
// Sizes
|
|
|
|
.xs {
|
|
padding: var(--space-3xs) var(--space-2xs);
|
|
font-size: var(--fs-2xs);
|
|
min-height: 20px;
|
|
}
|
|
|
|
.sm {
|
|
padding: var(--space-xs);
|
|
min-height: 32px;
|
|
}
|
|
|
|
.md {
|
|
padding: var(--space-xs) var(--space-sm);
|
|
min-height: 40px;
|
|
}
|
|
|
|
.lg {
|
|
padding: var(--space-sm) var(--space-md);
|
|
min-height: 48px;
|
|
}
|
|
|
|
// Solid variant
|
|
|
|
.solid {
|
|
--bg: var(--color-bg-inverted);
|
|
--fg: var(--color-text-inverted);
|
|
|
|
&.accent {
|
|
--bg: var(--color-bg-brand-base);
|
|
--bg-hover: var(--color-bg-brand-base-hover);
|
|
}
|
|
|
|
.neutral {
|
|
// This technically is a duplicate, but it's added so TS realizes this class is an option.
|
|
--bg: var(--color-bg-inverted);
|
|
--fg: var(--color-text-inverted);
|
|
}
|
|
|
|
&.tonal:not(:active) {
|
|
--bg: var(--color-bg-highlight);
|
|
--fg: var(--color-text-primary);
|
|
}
|
|
|
|
&.destructive {
|
|
--bg: var(--color-bg-error-base);
|
|
--bg-hover: var(--color-bg-error-base-hover);
|
|
}
|
|
|
|
&.solid:disabled {
|
|
--bg: var(--color-bg-disabled);
|
|
--bg-hover: var(--bg);
|
|
--fg: var(--color-text-on-disabled);
|
|
}
|
|
}
|
|
|
|
// Ghost
|
|
|
|
.ghost {
|
|
&:active {
|
|
--bg: var(--color-bg-inverted);
|
|
--fg: var(--color-text-inverted);
|
|
}
|
|
|
|
&.accent {
|
|
--fg: var(--color-text-brand);
|
|
|
|
&:active {
|
|
--bg: var(--color-bg-brand-base);
|
|
--fg: var(--color-text-on-brand-base);
|
|
}
|
|
}
|
|
|
|
&.destructive {
|
|
--fg: var(--color-text-error);
|
|
|
|
&:active {
|
|
--fg: var(--color-text-on-error-base);
|
|
--bg: var(--color-bg-error-base);
|
|
}
|
|
}
|
|
|
|
&:disabled,
|
|
&:hover:disabled {
|
|
--fg: var(--color-text-disabled);
|
|
--bg: transparent;
|
|
--bg-hover: transparent;
|
|
}
|
|
}
|
|
|
|
// Helper classes
|
|
|
|
.icon {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
// Adds padding to the text label. This is supposed to be there even if there is no icon.
|
|
.content {
|
|
display: inline-block;
|
|
margin: 0 var(--space-2xs);
|
|
|
|
.xs & {
|
|
margin: 0 var(--space-3xs);
|
|
}
|
|
}
|
|
|
|
.iconOnly {
|
|
aspect-ratio: 1;
|
|
}
|
|
|
|
.loading {
|
|
color: inherit;
|
|
height: 0.8em;
|
|
width: 0.8em;
|
|
|
|
.iconOnly & {
|
|
height: 1em;
|
|
width: 1em;
|
|
}
|
|
}
|