@kelvininc/ui-components/dist/collection/components/action-button-icon/action-button-icon.css

Kelvin UI Components

/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** TODO: CODE/CONSOLE **/
@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-border {
  to {
    --rotation: 360deg;
  }
}
/**
* Design Tokens - Auto-generated by Style Dictionary
* Do not edit manually - run `pnpm tokens:build` to regenerate
*/
kv-dropdown-base:not(.hydrated) > [slot=list] {
  display: none;
}

:host {
  /**
   * @prop --button-icon-large-size: Button's icon large size.
   * @prop --button-icon-small-size: Button's icon small size.
   * @prop --button-size-large: Button's height and width size when size is large.
   * @prop --button-size-small: Button's height and width size when size is small.
   */
  --button-icon-large-size: var(--icon-button-primary-icon-size-regular);
  --button-icon-small-size: var(--icon-button-primary-icon-size-compact);
  --button-size-large: var(--icon-button-height-regular);
  --button-size-small: var(--icon-button-height-compact);
  position: relative;
}

.action-button-icon--size-large kv-action-button::part(button) {
  width: var(--button-size-large);
}

.action-button-icon--size-small kv-action-button::part(button) {
  width: var(--button-size-small);
}

kv-action-button {
  --button-height-large: var(--button-size-large);
  --button-height-small: var(--button-size-small);
  --button-padding-x-large: var(--icon-button-padding-x-regular);
  --button-padding-y-large: var(--icon-button-padding-y-regular);
  --button-padding-x-small: var(--icon-button-padding-x-compact);
  --button-padding-y-small: var(--icon-button-padding-y-compact);
  --button-border-thickness: var(--icon-button-secondary-border-thickness-default);
  --button-border-radius-large: var(--icon-button-radius-regular);
  --button-border-radius-small: var(--icon-button-radius-compact);
  --button-icon-size-primary-large: var(--button-icon-large-size, --icon-button-primary-icon-size-regular);
  --button-icon-size-primary-small: var(--button-icon-small-size, --icon-button-primary-icon-size-compact);
  --button-icon-size-secondary-large: var(--button-icon-large-size, --icon-button-secondary-icon-size-regular);
  --button-icon-size-secondary-small: var(--button-icon-small-size, --icon-button-secondary-icon-size-compact);
  --button-icon-size-tertiary-large: var(--button-icon-large-size, --icon-button-tertiary-icon-size-regular);
  --button-icon-size-tertiary-small: var(--button-icon-small-size, --icon-button-tertiary-icon-size-compact);
  --button-icon-size-text-large: var(--button-icon-large-size, --icon-button-text-icon-size-regular);
  --button-icon-size-text-small: var(--button-icon-small-size, --icon-button-text-icon-size-compact);
  --button-icon-size-danger-large: var(--button-icon-large-size, --icon-button-danger-icon-size-regular);
  --button-icon-size-danger-small: var(--button-icon-small-size, --icon-button-danger-icon-size-compact);
  --icon-color-default-primary: var(--icon-button-primary-icon-color-default);
  --icon-color-default-secondary: var(--icon-button-secondary-icon-color-default);
  --icon-color-default-tertiary: var(--icon-button-tertiary-icon-color-default);
  --icon-color-default-danger: var(--icon-button-danger-icon-color-default);
  --icon-color-hover-primary: var(--icon-button-primary-icon-color-default);
  --icon-color-hover-secondary: var(--icon-button-secondary-icon-color-subtle);
  --icon-color-hover-tertiary: var(--icon-button-tertiary-icon-color-subtle);
  --icon-color-hover-danger: var(--icon-button-danger-icon-color-default);
  --icon-color-focus-primary: var(--icon-button-primary-icon-color-default);
  --icon-color-focus-secondary: var(--icon-button-secondary-icon-color-default);
  --icon-color-focus-tertiary: var(--icon-button-tertiary-icon-color-default);
  --icon-color-focus-danger: var(--icon-button-danger-icon-color-default);
  --icon-color-disabled-primary: var(--icon-button-primary-icon-color-disabled);
  --icon-color-disabled-secondary: var(--icon-button-secondary-icon-color-disabled);
  --icon-color-disabled-tertiary: var(--icon-button-tertiary-icon-color-disabled);
  --icon-color-disabled-danger: var(--icon-button-danger-icon-color-disabled);
  --icon-color-active-primary: var(--icon-button-primary-icon-color-default);
  --icon-color-active-secondary: var(--icon-button-secondary-icon-color-subtle);
  --icon-color-active-tertiary: var(--icon-button-tertiary-icon-color-subtle);
  --icon-color-active-danger: var(--icon-button-danger-icon-color-default);
  --background-color-default-primary: var(--icon-button-primary-background-default);
  --background-color-default-secondary: var(--transparent);
  --background-color-default-tertiary: var(--transparent);
  --background-color-default-text: var(--transparent);
  --background-color-default-danger: var(--icon-button-danger-background-default);
  --background-color-hover-primary: var(--icon-button-primary-background-hover);
  --background-color-hover-secondary: var(--icon-button-secondary-background-hover);
  --background-color-hover-tertiary: var(--icon-button-tertiary-background-hover);
  --background-color-hover-text: var(--transparent);
  --background-color-hover-danger: var(--icon-button-danger-background-hover);
  --background-color-focus-primary: var(--icon-button-primary-background-default);
  --background-color-focus-secondary: var(--transparent);
  --background-color-focus-tertiary: var(--transparent);
  --background-color-focus-text: var(--transparent);
  --background-color-focus-danger: var(--icon-button-danger-background-default);
  --background-color-disabled-primary: var(--icon-button-primary-background-disabled);
  --background-color-disabled-secondary: var(--icon-button-secondary-background-disabled);
  --background-color-disabled-tertiary: var(--icon-button-tertiary-background-disabled);
  --background-color-disabled-text: var(--transparent);
  --background-color-disabled-danger: var(--icon-button-danger-background-disabled);
  --background-color-active-primary: var(--icon-button-primary-background-pressed);
  --background-color-active-secondary: var(--icon-button-secondary-background-pressed);
  --background-color-active-tertiary: var(--icon-button-tertiary-background-pressed);
  --background-color-active-text: var(--transparent);
  --background-color-active-danger: var(--icon-button-danger-background-pressed);
  --border-color-default-primary: var(--icon-button-primary-background-default);
  --border-color-default-secondary: var(--icon-button-secondary-border-color-default);
  --border-color-default-tertiary: var(--transparent);
  --border-color-default-text: var(--transparent);
  --border-color-default-danger: var(--icon-button-danger-background-default);
  --border-color-hover-primary: var(--icon-button-primary-background-hover);
  --border-color-hover-secondary: var(--icon-button-secondary-border-color-hover);
  --border-color-hover-tertiary: var(--icon-button-tertiary-background-hover);
  --border-color-hover-text: var(--transparent);
  --border-color-hover-danger: var(--icon-button-danger-background-hover);
  --border-color-focus-primary: var(--icon-button-primary-background-default);
  --border-color-focus-secondary: var(--icon-button-secondary-border-color-hover);
  --border-color-focus-tertiary: var(--transparent);
  --border-color-focus-text: var(--transparent);
  --border-color-focus-danger: var(--icon-button-danger-background-default);
  --border-color-disabled-primary: var(--icon-button-primary-background-disabled);
  --border-color-disabled-secondary: var(--icon-button-secondary-background-disabled);
  --border-color-disabled-tertiary: var(--icon-button-tertiary-background-disabled);
  --border-color-disabled-text: var(--transparent);
  --border-color-disabled-danger: var(--icon-button-danger-background-disabled);
  --border-color-active-primary: var(--icon-button-primary-background-pressed);
  --border-color-active-secondary: var(--icon-button-secondary-border-color-pressed);
  --border-color-active-tertiary: var(--icon-button-tertiary-background-pressed);
  --border-color-active-text: var(--transparent);
  --border-color-active-danger: var(--icon-button-danger-background-pressed);
  display: flex;
}
kv-action-button::part(button) {
  justify-content: center;
}