| [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; |
| outline: none; |
| white-space: nowrap; |
|
|
| &[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); |
|
|
| [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-base-hover); |
| } |
| &:focus-visible:not(:disabled) { |
| background-color: var(--surface-base-hover); |
| } |
| &:active:not(:disabled) { |
| background-color: var(--surface-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-base-hover); |
| } |
| &[data-active="true"] { |
| background-color: var(--surface-base-active); |
| } |
| } |
|
|
| &[data-variant="secondary"] { |
| border: transparent; |
| background-color: var(--button-secondary-base); |
| color: var(--text-strong); |
| box-shadow: var(--shadow-xs-border-base); |
|
|
| &: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); |
| color: var(--text-weak); |
| cursor: not-allowed; |
| } |
|
|
| [data-slot="icon-svg"] { |
| color: var(--icon-base); |
| } |
| } |
|
|
| &[data-size="small"] { |
| height: 24px; |
| padding: 0 8px; |
| &[data-icon] { |
| padding: 0 12px 0 4px; |
| } |
|
|
| font-size: var(--font-size-small); |
| line-height: var(--line-height-large); |
| gap: 8px; |
|
|
| |
| 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); |
| letter-spacing: var(--letter-spacing-normal); |
| } |
|
|
| &[data-size="normal"] { |
| height: 28px; |
| line-height: 28px; |
| padding: 0 6px; |
| &[data-icon] { |
| padding: 0 12px 0 4px; |
| } |
|
|
| font-size: var(--font-size-small); |
| gap: 8px; |
|
|
| |
| 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: 6px 12px; |
|
|
| &[data-icon] { |
| padding: 0 12px 0 8px; |
| } |
|
|
| gap: 8px; |
|
|
| |
| font-family: var(--font-family-sans); |
| font-size: 14px; |
| font-style: normal; |
| font-weight: var(--font-weight-medium); |
| line-height: var(--line-height-large); |
| letter-spacing: var(--letter-spacing-normal); |
| } |
|
|
| &:focus { |
| outline: none; |
| } |
| } |
|
|
| [data-component="button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"] { |
| background-color: var(--surface-base-active); |
| } |
|
|
| [data-component="button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"] [data-slot="icon-svg"] { |
| color: var(--icon-strong-base); |
| } |
|
|
| [data-component="button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"]:hover:not(:disabled) { |
| background-color: var(--surface-base-active); |
| } |
|
|
| [data-component="button"].titlebar-icon[data-variant="ghost"][aria-current="page"] { |
| background-color: var(--surface-base-active); |
| } |
|
|
| [data-component="button"].titlebar-icon[data-variant="ghost"][aria-current="page"] [data-slot="icon-svg"] { |
| color: var(--icon-strong-base); |
| } |
|
|
| [data-component="button"].titlebar-icon[data-variant="ghost"][aria-current="page"]:hover:not(:disabled) { |
| background-color: var(--surface-base-active); |
| } |
|
|
