@api-client/ui 0.2.10 → 0.2.11

package/src/md/icon-button/internals/IconButton.styles.ts

@@ -1,614 +0,0 @@
-import { css } from 'lit'
-
-export default css`
-  :host {
-    display: inline-flex;
-    vertical-align: middle;
-    box-sizing: content-box;
-    writing-mode: horizontal-tb !important;
-    text-rendering: auto;
-    cursor: default;
-    user-select: none;
-    height: 48px;
-    width: 48px;
-    border-radius: var(--md-sys-shape-corner-extra-small);
-    align-items: center;
-    justify-content: center;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  }
-
-  .content ::slotted(*) {
-    width: 24px !important;
-    height: 24px !important;
-  }
-
-  .surface {
-    height: 40px;
-    width: 40px;
-    position: relative;
-    border-radius: var(--md-sys-shape-corner-full);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  .container,
-  .state {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: var(--md-sys-shape-corner-full);
-  }
-
-  .container {
-    z-index: 1;
-    transition: background-color 230ms cubic-bezier(0.4, 0, 0.2, 1);
-    pointer-events: none;
-  }
-
-  .state {
-    z-index: 2;
-    opacity: 0;
-    transition: opacity 260ms cubic-bezier(0.4, 0, 0.2, 1);
-    pointer-events: none;
-  }
-
-  .content {
-    z-index: 3;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .ripple {
-    border-radius: inherit;
-    z-index: 3;
-  }
-
-  :host([disabled]) {
-    pointer-events: none;
-  }
-
-  /* General states */
-
-  :host .container {
-    background-color: var(--md-sys-color-primary);
-  }
-
-  :host([toggle]) .container {
-    background-color: var(--md-sys-color-surface-variant);
-  }
-
-  :host([toggle][aria-pressed='true']) .container,
-  :host([toggle][type='filled'][active]) .container {
-    background-color: var(--md-sys-color-primary);
-  }
-
-  :host .content ::slotted(*) {
-    color: var(--md-sys-color-on-primary);
-    fill: var(--md-sys-color-on-primary);
-  }
-
-  :host([toggle]) .content ::slotted(*) {
-    color: var(--md-sys-color-primary);
-    fill: var(--md-sys-color-primary);
-  }
-
-  :host([toggle][active]) .content ::slotted(*),
-  :host([toggle][type='filled'][active]) .content ::slotted(*) {
-    color: var(--md-sys-color-on-primary);
-    fill: var(--md-sys-color-on-primary);
-  }
-
-  /* Filled states */
-
-  :host([type='filled']) {
-    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-primary);
-    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-primary);
-    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-primary);
-  }
-
-  :host([type='filled'][disabled]) .container {
-    background-color: var(--md-sys-color-on-surface) !important;
-    opacity: 0.12;
-  }
-
-  :host([type='filled'][disabled]) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface) !important;
-    color: var(--md-sys-color-on-surface) !important;
-    opacity: 0.38;
-  }
-
-  :host([type='filled']:hover) .state {
-    background-color: var(--md-sys-color-on-primary);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host([type='filled']:hover) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-primary);
-    color: var(--md-sys-color-on-primary);
-  }
-
-  :host([toggle][type='filled']:hover) .state {
-    background-color: var(--md-sys-color-primary);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host([toggle][type='filled']:hover) .content ::slotted(*) {
-    fill: var(--md-sys-color-primary);
-    color: var(--md-sys-color-primary);
-  }
-
-  :host([toggle][type='filled'][active]:hover) .state {
-    background-color: var(--md-sys-color-on-primary);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host([toggle][type='filled'][active]:hover) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-primary);
-    color: var(--md-sys-color-on-primary);
-  }
-
-  :host([type='filled']:focus) .state {
-    background-color: var(--md-sys-color-on-primary);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
-  }
-
-  :host([type='filled']:focus) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-primary);
-    color: var(--md-sys-color-on-primary);
-  }
-
-  :host([toggle][type='filled']:focus) .state {
-    background-color: var(--md-sys-color-primary);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
-  }
-
-  :host([toggle][type='filled']:focus) .content ::slotted(*) {
-    fill: var(--md-sys-color-primary);
-    color: var(--md-sys-color-primary);
-  }
-
-  :host([toggle][type='filled'][active]:focus) .state {
-    background-color: var(--md-sys-color-on-primary);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
-  }
-
-  :host([toggle][type='filled'][active]:focus) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-primary);
-    color: var(--md-sys-color-on-primary);
-  }
-
-  :host([type='filled']:active) .state,
-  :host([type='filled']) .pressed .state {
-    background-color: var(--md-sys-color-on-primary);
-    opacity: var(--md-sys-state-pressed-state-layer-opacity);
-  }
-
-  :host([type='filled']:active) .content ::slotted(*),
-  :host([type='filled']) .pressed .content ::slotted(*) {
-    fill: var(--md-sys-color-on-primary);
-    color: var(--md-sys-color-on-primary);
-  }
-
-  :host([toggle][type='filled']:active) .state,
-  :host([toggle][type='filled']) .pressed .state {
-    background-color: var(--md-sys-color-primary);
-    opacity: var(--md-sys-state-pressed-state-layer-opacity);
-  }
-
-  :host([toggle][type='filled']:active) .content ::slotted(*),
-  :host([toggle][type='filled']:active) .pressed .content ::slotted(*) {
-    fill: var(--md-sys-color-primary);
-    color: var(--md-sys-color-primary);
-  }
-
-  :host([toggle][type='filled'][active]:active) .state,
-  :host([toggle][type='filled'][active]) .pressed .state {
-    background-color: var(--md-sys-color-on-primary);
-    opacity: var(--md-sys-state-pressed-state-layer-opacity);
-  }
-
-  :host([toggle][type='filled'][active]:active) .content ::slotted(*),
-  :host([toggle][type='filled'][active]:active) .pressed .content ::slotted(*) {
-    fill: var(--md-sys-color-on-primary);
-    color: var(--md-sys-color-on-primary);
-  }
-
-  /* Tonal states */
-
-  :host([type='tonal']) {
-    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-secondary-container);
-    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-secondary-container);
-    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-secondary-container);
-  }
-
-  :host([type='tonal']) .container {
-    background-color: var(--md-sys-color-secondary-container);
-  }
-
-  :host([type='tonal'][toggle]) .container {
-    background-color: var(--md-sys-color-surface-variant);
-  }
-
-  :host([type='tonal'][toggle]) .content ::slotted(*) {
-    color: var(--md-sys-color-on-surface-variant);
-    fill: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='tonal'][active]) .container {
-    background-color: var(--md-sys-color-secondary-container);
-  }
-
-  :host([toggle][type='tonal'][active]) .content ::slotted(*) {
-    color: var(--md-sys-color-on-secondary-container);
-    fill: var(--md-sys-color-on-secondary-container);
-  }
-
-  :host([type='tonal']) .content ::slotted(*) {
-    color: var(--md-sys-color-on-secondary-container);
-    fill: var(--md-sys-color-on-secondary-container);
-  }
-
-  :host([type='tonal'][toggle]) .content ::slotted(*) {
-    color: var(--md-sys-color-on-surface-variant);
-    fill: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([type='tonal'][disabled]) .container {
-    background-color: var(--md-sys-color-on-surface);
-    opacity: 0.12;
-  }
-
-  :host([type='tonal'][disabled]) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface);
-    color: var(--md-sys-color-on-surface);
-    opacity: 0.38;
-  }
-
-  :host([type='tonal']:hover) .state {
-    background-color: var(--md-sys-color-on-secondary-container);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host([type='tonal']:hover) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-secondary-container);
-    color: var(--md-sys-color-on-secondary-container);
-  }
-
-  :host([toggle][type='tonal']:hover) .state {
-    background-color: var(--md-sys-color-on-surface-variant);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host([toggle][type='tonal']:hover) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='tonal'][active]:hover) .state {
-    background-color: var(--md-sys-color-on-secondary-container);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host([toggle][type='tonal'][active]:hover) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-secondary-container);
-    color: var(--md-sys-color-on-secondary-container);
-  }
-
-  :host([type='tonal']:focus) .state {
-    background-color: var(--md-sys-color-on-secondary-container);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
-  }
-
-  :host([type='tonal']:focus) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-secondary-container);
-    color: var(--md-sys-color-on-secondary-container);
-  }
-
-  :host([toggle][type='tonal']:focus) .state {
-    background-color: var(--md-sys-color-on-surface-variant);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
-  }
-
-  :host([toggle][type='tonal']:focus) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='tonal'][active]:focus) .state {
-    background-color: var(--md-sys-color-on-secondary-container);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
-  }
-
-  :host([toggle][type='tonal'][active]:focus) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-secondary-container);
-    color: var(--md-sys-color-on-secondary-container);
-  }
-
-  :host([type='tonal']:active) .state,
-  :host([type='tonal']) .pressed .state {
-    background-color: var(--md-sys-color-on-secondary-container);
-    opacity: var(--md-sys-state-pressed-state-layer-opacity);
-  }
-
-  :host([type='tonal']:active) .content ::slotted(*),
-  :host([type='tonal']) .pressed .content ::slotted(*) {
-    fill: var(--md-sys-color-on-secondary-container);
-    color: var(--md-sys-color-on-secondary-container);
-  }
-
-  :host([toggle][type='tonal']:active) .state,
-  :host([toggle][type='tonal']) .pressed .state {
-    background-color: var(--md-sys-color-on-surface-variant);
-    opacity: var(--md-sys-state-pressed-state-layer-opacity);
-  }
-
-  :host([toggle][type='tonal']:active) .content ::slotted(*),
-  :host([toggle][type='tonal']) .pressed .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  /* Outlined states */
-
-  :host([type='outlined']) {
-    --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);
-    --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);
-    --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);
-  }
-
-  :host([type='outlined']) .container {
-    border: 1px var(--md-sys-color-outline) solid;
-    background-color: transparent;
-  }
-
-  :host([toggle][type='outlined'][active]) .container {
-    background-color: var(--md-sys-color-inverse-surface);
-  }
-
-  :host([type='outlined']) .content ::slotted(*) {
-    color: var(--md-sys-color-on-surface-variant);
-    fill: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='outlined'][active]) .content ::slotted(*) {
-    color: var(--md-sys-color-inverse-on-surface);
-    fill: var(--md-sys-color-inverse-on-surface);
-  }
-
-  :host([type='outlined'][disabled]) .container {
-    background-color: var(--md-sys-color-on-surface);
-    opacity: 0.12;
-  }
-
-  :host([type='outlined'][disabled]) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface);
-    color: var(--md-sys-color-on-surface);
-    opacity: 0.38;
-  }
-
-  :host([type='outlined']:hover) .state {
-    background-color: var(--md-sys-color-on-surface-variant);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host([type='outlined']:hover) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='outlined']:hover) .state {
-    background-color: var(--md-sys-color-on-surface-variant);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host([toggle][type='outlined']:hover) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='outlined'][active]:hover) .state {
-    background-color: var(--md-sys-color-inverse-on-surface);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host([toggle][type='outlined'][active]:hover) .content ::slotted(*) {
-    fill: var(--md-sys-color-inverse-on-surface);
-    color: var(--md-sys-color-inverse-on-surface);
-  }
-
-  :host([type='outlined']:focus) .state {
-    background-color: var(--md-sys-color-on-surface-variant);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
-  }
-
-  :host([type='outlined']:focus) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='outlined']:focus) .state {
-    background-color: var(--md-sys-color-on-surface-variant);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
-  }
-
-  :host([toggle][type='outlined']:focus) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='outlined'][active]:focus) .state {
-    background-color: var(--md-sys-color-inverse-on-surface);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
-  }
-
-  :host([toggle][type='outlined'][active]:focus) .content ::slotted(*) {
-    fill: var(--md-sys-color-inverse-on-surface);
-    color: var(--md-sys-color-inverse-on-surface);
-  }
-
-  :host([type='outlined']:active) .state,
-  :host([type='outlined']) .pressed .state {
-    background-color: var(--md-sys-color-on-surface);
-    opacity: var(--md-sys-state-pressed-state-layer-opacity);
-  }
-
-  :host([type='outlined']:active) .content ::slotted(*),
-  :host([type='outlined']) .pressed .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface);
-    color: var(--md-sys-color-on-surface);
-  }
-
-  :host([toggle][type='outlined']:active) .state,
-  :host([toggle][type='outlined']) .pressed .state {
-    background-color: var(--md-sys-color-on-surface);
-    opacity: var(--md-sys-state-pressed-state-layer-opacity);
-  }
-
-  :host([toggle][type='outlined']:active) .content ::slotted(*),
-  :host([toggle][type='outlined']) .pressed .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface);
-    color: var(--md-sys-color-on-surface);
-  }
-
-  :host([toggle][type='outlined'][active]:active) .state,
-  :host([toggle][type='outlined'][active]) .pressed .state {
-    background-color: var(--md-sys-color-inverse-on-surface);
-    opacity: var(--md-sys-state-pressed-state-layer-opacity);
-  }
-
-  :host([toggle][type='outlined'][active]:active) .content ::slotted(*),
-  :host([toggle][type='outlined'][active]) .pressed .content ::slotted(*) {
-    fill: var(--md-sys-color-inverse-on-surface);
-    color: var(--md-sys-color-inverse-on-surface);
-  }
-
-  /* Standard states */
-
-  :host([type='text']) {
-    --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);
-    --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);
-    --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);
-  }
-
-  :host([type='standard']) .container,
-  :host([type='standard'][toggle]) .container {
-    background-color: transparent;
-  }
-
-  :host([type='standard']) .content ::slotted(*) {
-    color: var(--md-sys-color-on-surface-variant);
-    fill: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='standard'][active]) .content ::slotted(*) {
-    color: var(--md-sys-color-primary);
-    fill: var(--md-sys-color-primary);
-  }
-
-  :host([type='standard'][disabled]) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface);
-    color: var(--md-sys-color-on-surface);
-    opacity: 0.38;
-  }
-
-  :host([type='standard']:hover) .state {
-    background-color: var(--md-sys-color-on-surface-variant);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host([type='standard']:hover) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='standard']:hover) .state {
-    background-color: var(--md-sys-color-on-surface-variant);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host([toggle][type='standard']:hover) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='standard'][active]:hover) .state {
-    background-color: var(--md-sys-color-primary);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host([toggle][type='standard'][active]:hover) .content ::slotted(*) {
-    fill: var(--md-sys-color-primary);
-    color: var(--md-sys-color-primary);
-  }
-
-  :host([type='standard']:focus) .state {
-    background-color: var(--md-sys-color-on-surface-variant);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
-  }
-
-  :host([type='standard']:focus) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='standard']:focus) .state {
-    background-color: var(--md-sys-color-on-surface-variant);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
-  }
-
-  :host([toggle][type='standard']:focus) .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='standard'][active]:focus) .state {
-    background-color: var(--md-sys-color-primary);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
-  }
-
-  :host([toggle][type='standard'][active]:focus) .content ::slotted(*) {
-    fill: var(--md-sys-color-primary);
-    color: var(--md-sys-color-primary);
-  }
-
-  :host([type='standard']:active) .state,
-  :host([type='standard']) .pressed .state {
-    background-color: var(--md-sys-color-on-surface-variant);
-    opacity: var(--md-sys-state-pressed-state-layer-opacity);
-  }
-
-  :host([type='standard']:active) .content ::slotted(*),
-  :host([type='standard']) .pressed .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='standard']:active) .state,
-  :host([toggle][type='standard']) .pressed .state {
-    background-color: var(--md-sys-color-on-surface-variant);
-    opacity: var(--md-sys-state-pressed-state-layer-opacity);
-  }
-
-  :host([toggle][type='standard']:active) .content ::slotted(*),
-  :host([toggle][type='standard']) .pressed .content ::slotted(*) {
-    fill: var(--md-sys-color-on-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  :host([toggle][type='standard'][active]:active) .state,
-  :host([toggle][type='standard'][active]) .pressed .state {
-    background-color: var(--md-sys-color-primary);
-    opacity: var(--md-sys-state-pressed-state-layer-opacity);
-  }
-
-  :host([toggle][type='standard'][active]:active) .content ::slotted(*),
-  :host([toggle][type='standard'][active]) .pressed .content ::slotted(*) {
-    fill: var(--md-sys-color-primary);
-    color: var(--md-sys-color-primary);
-  }
-`