[data-component="button"] { display: inline-flex; align-items: center; justify-content: center; border-style: solid; border-width: 1px; border-radius: var(--radius-md); text-decoration: none; user-select: none; cursor: default; white-space: nowrap; transition: scale var(--duration-fast) var(--ease-standard); &:focus-visible { outline: 2px solid var(--border-selected); outline-offset: 2px; } &:active:not(:disabled) { scale: 0.99; } &[data-variant="primary"] { background-color: var(--button-primary-base); border-color: var(--border-weak-base); color: var(--icon-invert-base); [data-slot="icon-svg"] { color: var(--icon-invert-base); } &:hover:not(:disabled) { background-color: var(--icon-strong-hover); } &:focus:not(:disabled) { background-color: var(--icon-strong-focus); } &:active:not(:disabled) { background-color: var(--icon-strong-active); } &:disabled { background-color: var(--icon-strong-disabled); cursor: not-allowed; [data-slot="icon-svg"] { color: var(--icon-invert-base); } } } &[data-variant="ghost"] { border-color: transparent; background-color: transparent; color: var(--text-strong); [data-slot="icon-svg"] { color: var(--icon-base); } &:hover:not(:disabled) { background-color: var(--surface-raised-base-hover); } &:focus-visible:not(:disabled) { background-color: var(--surface-raised-base-hover); } &:active:not(:disabled) { background-color: var(--surface-raised-base-active); } &:disabled { color: var(--text-weak); cursor: not-allowed; [data-slot="icon-svg"] { color: var(--icon-disabled); } } &[data-selected="true"]:not(:disabled) { background-color: var(--surface-raised-base-hover); } &[data-active="true"] { background-color: var(--surface-raised-base-active); } } &[data-variant="secondary"] { border: transparent; background-color: var(--button-secondary-base); color: var(--text-strong); box-shadow: var(--shadow-xs-border); &:hover:not(:disabled) { background-color: var(--button-secondary-hover); } &:focus:not(:disabled) { background-color: var(--button-secondary-base); } &:focus-visible:not(:active) { background-color: var(--button-secondary-base); box-shadow: var(--shadow-xs-border-focus); } &:focus-visible:active { box-shadow: none; } &:active:not(:disabled) { background-color: var(--button-secondary-base); } &:disabled { border-color: var(--border-disabled); background-color: var(--surface-disabled); box-shadow: var(--shadow-xxs-border); color: var(--text-weak); cursor: not-allowed; } [data-slot="icon-svg"] { color: var(--icon-strong-base); } } &[data-size="small"] { height: 22px; padding: 0 8px; gap: 4px; &[data-icon] { padding: 0 12px 0 4px; } /* text-12-medium */ font-family: var(--font-family-sans); font-size: var(--font-size-small); font-style: normal; font-weight: var(--font-weight-medium); line-height: var(--line-height-large); /* 166.667% */ letter-spacing: var(--letter-spacing-normal); } &[data-size="normal"] { height: 24px; line-height: 24px; padding: 0 10px; gap: 6px; &[data-icon] { padding: 0 12px 0 4px; } /* text-12-medium */ font-family: var(--font-family-sans); font-size: var(--font-size-small); font-style: normal; font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-normal); } &[data-size="large"] { height: 32px; padding: 0 12px; gap: 6px; &[data-icon] { padding: 0 12px 0 8px; } /* text-13-medium */ font-family: var(--font-family-sans); font-size: var(--font-size-base); font-style: normal; font-weight: var(--font-weight-medium); line-height: var(--line-height-large); letter-spacing: var(--letter-spacing-normal); }}
[data-component="button"] {
display: inline-flex;
align-items: center;
justify-content: center;
border-style: solid;
border-width: 1px;
border-radius: var(--radius-md);
text-decoration: none;
user-select: none;
cursor: default;
white-space: nowrap;
transition: scale var(--duration-fast) var(--ease-standard);
&:focus-visible {
outline: 2px solid var(--border-selected);
outline-offset: 2px;
}
&:active:not(:disabled) {
scale: 0.99;
}
&[data-variant="primary"] {
background-color: var(--button-primary-base);
border-color: var(--border-weak-base);
color: var(--icon-invert-base);
[data-slot="icon-svg"] {
color: var(--icon-invert-base);
}
&:hover:not(:disabled) {
background-color: var(--icon-strong-hover);
}
&:focus:not(:disabled) {
background-color: var(--icon-strong-focus);
}
&:active:not(:disabled) {
background-color: var(--icon-strong-active);
}
&:disabled {
background-color: var(--icon-strong-disabled);
cursor: not-allowed;
[data-slot="icon-svg"] {
color: var(--icon-invert-base);
}
}
}
&[data-variant="ghost"] {
border-color: transparent;
background-color: transparent;
color: var(--text-strong);
[data-slot="icon-svg"] {
color: var(--icon-base);
}
&:hover:not(:disabled) {
background-color: var(--surface-raised-base-hover);
}
&:focus-visible:not(:disabled) {
background-color: var(--surface-raised-base-hover);
}
&:active:not(:disabled) {
background-color: var(--surface-raised-base-active);
}
&:disabled {
color: var(--text-weak);
cursor: not-allowed;
[data-slot="icon-svg"] {
color: var(--icon-disabled);
}
}
&[data-selected="true"]:not(:disabled) {
background-color: var(--surface-raised-base-hover);
}
&[data-active="true"] {
background-color: var(--surface-raised-base-active);
}
}
&[data-variant="secondary"] {
border: transparent;
background-color: var(--button-secondary-base);
color: var(--text-strong);
box-shadow: var(--shadow-xs-border);
&:hover:not(:disabled) {
background-color: var(--button-secondary-hover);
}
&:focus:not(:disabled) {
background-color: var(--button-secondary-base);
}
&:focus-visible:not(:active) {
background-color: var(--button-secondary-base);
box-shadow: var(--shadow-xs-border-focus);
}
&:focus-visible:active {
box-shadow: none;
}
&:active:not(:disabled) {
background-color: var(--button-secondary-base);
}
&:disabled {
border-color: var(--border-disabled);
background-color: var(--surface-disabled);
box-shadow: var(--shadow-xxs-border);
color: var(--text-weak);
cursor: not-allowed;
}
[data-slot="icon-svg"] {
color: var(--icon-strong-base);
}
}
&[data-size="small"] {
height: 22px;
padding: 0 8px;
gap: 4px;
&[data-icon] {
padding: 0 12px 0 4px;
}
/* text-12-medium */
font-family: var(--font-family-sans);
font-size: var(--font-size-small);
font-style: normal;
font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); /* 166.667% */
letter-spacing: var(--letter-spacing-normal);
}
&[data-size="normal"] {
height: 24px;
line-height: 24px;
padding: 0 10px;
gap: 6px;
&[data-icon] {
padding: 0 12px 0 4px;
}
/* text-12-medium */
font-family: var(--font-family-sans);
font-size: var(--font-size-small);
font-style: normal;
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-normal);
}
&[data-size="large"] {
height: 32px;
padding: 0 12px;
gap: 6px;
&[data-icon] {
padding: 0 12px 0 8px;
}
/* text-13-medium */
font-family: var(--font-family-sans);
font-size: var(--font-size-base);
font-style: normal;
font-weight: var(--font-weight-medium);
line-height: var(--line-height-large);
letter-spacing: var(--letter-spacing-normal);
}
}