diff options
| author | opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com> | 2026-01-30 17:58:31 +0000 |
|---|---|---|
| committer | opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com> | 2026-01-30 17:58:31 +0000 |
| commit | fe66ca163cbb9d689cf296c4c2f7a63414c1cf45 (patch) | |
| tree | e330cc07e4ce3b68f64592f7c123cfa1ce77ef23 /packages/ui/src/components/icon-button.css | |
| parent | 20619a6a26ec0cfc2707b7ed13387715e9f9cdaa (diff) | |
| download | opencode-fe66ca163cbb9d689cf296c4c2f7a63414c1cf45.tar.gz opencode-fe66ca163cbb9d689cf296c4c2f7a63414c1cf45.zip | |
chore: generate
Diffstat (limited to 'packages/ui/src/components/icon-button.css')
| -rw-r--r-- | packages/ui/src/components/icon-button.css | 282 |
1 files changed, 141 insertions, 141 deletions
diff --git a/packages/ui/src/components/icon-button.css b/packages/ui/src/components/icon-button.css index 94aa80f02..f1371bfa9 100644 --- a/packages/ui/src/components/icon-button.css +++ b/packages/ui/src/components/icon-button.css @@ -1,143 +1,143 @@ [data-component="icon-button"] { - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: var(--radius-sm); - text-decoration: none; - user-select: none; - aspect-ratio: 1; - flex-shrink: 0; - transition-property: background-color, color, opacity, box-shadow; - transition-duration: var(--transition-duration); - transition-timing-function: var(--transition-easing); - - &[data-variant="primary"] { - background-color: var(--icon-strong-base); - - [data-slot="icon-svg"] { - /* color: var(--icon-weak-base); */ - color: var(--icon-invert-base); - - /* &:hover:not(:disabled) { */ - /* color: var(--icon-weak-hover); */ - /* } */ - /* &:active:not(:disabled) { */ - /* color: var(--icon-strong-active); */ - /* } */ - } - - &: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="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); - } - - [data-slot="icon-svg"] { - color: var(--icon-strong-base); - } - - &:disabled { - background-color: var(--icon-strong-disabled); - color: var(--icon-invert-base); - cursor: not-allowed; - } - } - - &[data-variant="ghost"] { - background-color: transparent; - /* color: var(--icon-base); */ - - [data-slot="icon-svg"] { - color: var(--icon-base); - } - - &:hover:not(:disabled) { - background-color: var(--surface-raised-base-hover); - - /* [data-slot="icon-svg"] { */ - /* color: var(--icon-hover); */ - /* } */ - } - &:focus-visible:not(:disabled) { - background-color: var(--surface-raised-base-hover); - } - &:active:not(:disabled) { - background-color: var(--surface-raised-base-active); - /* [data-slot="icon-svg"] { */ - /* color: var(--icon-active); */ - /* } */ - } - &[data-selected]:not(:disabled) { - background-color: var(--surface-raised-base-active); - /* [data-slot="icon-svg"] { */ - /* color: var(--icon-selected); */ - /* } */ - } - &:disabled { - color: var(--icon-invert-base); - cursor: not-allowed; - } - } - - &[data-size="normal"] { - width: 24px; - height: 24px; - - font-size: var(--font-size-small); - line-height: var(--line-height-large); - gap: calc(var(--spacing) * 0.5); - } - - &[data-size="large"] { - height: 32px; - /* padding: 0 8px 0 6px; */ - gap: 8px; - - /* 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); - } - - &:focus { - outline: none; - } + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: var(--radius-sm); + text-decoration: none; + user-select: none; + aspect-ratio: 1; + flex-shrink: 0; + transition-property: background-color, color, opacity, box-shadow; + transition-duration: var(--transition-duration); + transition-timing-function: var(--transition-easing); + + &[data-variant="primary"] { + background-color: var(--icon-strong-base); + + [data-slot="icon-svg"] { + /* color: var(--icon-weak-base); */ + color: var(--icon-invert-base); + + /* &:hover:not(:disabled) { */ + /* color: var(--icon-weak-hover); */ + /* } */ + /* &:active:not(:disabled) { */ + /* color: var(--icon-strong-active); */ + /* } */ + } + + &: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="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); + } + + [data-slot="icon-svg"] { + color: var(--icon-strong-base); + } + + &:disabled { + background-color: var(--icon-strong-disabled); + color: var(--icon-invert-base); + cursor: not-allowed; + } + } + + &[data-variant="ghost"] { + background-color: transparent; + /* color: var(--icon-base); */ + + [data-slot="icon-svg"] { + color: var(--icon-base); + } + + &:hover:not(:disabled) { + background-color: var(--surface-raised-base-hover); + + /* [data-slot="icon-svg"] { */ + /* color: var(--icon-hover); */ + /* } */ + } + &:focus-visible:not(:disabled) { + background-color: var(--surface-raised-base-hover); + } + &:active:not(:disabled) { + background-color: var(--surface-raised-base-active); + /* [data-slot="icon-svg"] { */ + /* color: var(--icon-active); */ + /* } */ + } + &[data-selected]:not(:disabled) { + background-color: var(--surface-raised-base-active); + /* [data-slot="icon-svg"] { */ + /* color: var(--icon-selected); */ + /* } */ + } + &:disabled { + color: var(--icon-invert-base); + cursor: not-allowed; + } + } + + &[data-size="normal"] { + width: 24px; + height: 24px; + + font-size: var(--font-size-small); + line-height: var(--line-height-large); + gap: calc(var(--spacing) * 0.5); + } + + &[data-size="large"] { + height: 32px; + /* padding: 0 8px 0 6px; */ + gap: 8px; + + /* 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); + } + + &:focus { + outline: none; + } } |
