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

Kelvin UI Components

:host kv-action-button-text::part(button) {
  --button-height-large: var(--magic-button-height-regular);
  --button-height-small: var(--magic-button-height-compact);
  --button-gap-large: var(--magic-button-gap-regular);
  --button-gap-small: var(--magic-button-gap-compact);
  --button-padding-x-large: var(--magic-button-padding-x-regular);
  --button-padding-y-large: var(--magic-button-padding-y-regular);
  --button-padding-x-small: var(--magic-button-padding-x-compact);
  --button-padding-y-small: var(--magic-button-padding-y-compact);
  --button-border-thickness: var(--magic-button-secondary-border-thickness-default);
  --button-border-radius-large: var(--magic-button-radius-regular);
  --button-border-radius-small: var(--magic-button-radius-compact);
  --button-icon-size-primary-large: var(--magic-button-primary-icon-size-regular);
  --button-icon-size-primary-small: var(--magic-button-primary-icon-size-compact);
  --button-icon-size-secondary-large: var(--magic-button-secondary-icon-size-regular);
  --button-icon-size-secondary-small: var(--magic-button-secondary-icon-size-compact);
  --icon-color-default-primary: var(--magic-button-primary-icon-color-default);
  --icon-color-default-secondary: var(--magic-button-secondary-icon-color-default);
  --icon-color-hover-primary: var(--magic-button-primary-icon-color-default);
  --icon-color-hover-secondary: var(--magic-button-secondary-icon-color-subtle);
  --icon-color-focus-primary: var(--magic-button-primary-icon-color-default);
  --icon-color-focus-secondary: var(--magic-button-secondary-icon-color-default);
  --icon-color-disabled-primary: var(--magic-button-primary-icon-color-disabled);
  --icon-color-disabled-secondary: var(--magic-button-secondary-icon-color-disabled);
  --icon-color-active-primary: var(--magic-button-primary-icon-color-default);
  --icon-color-active-secondary: var(--magic-button-secondary-icon-color-subtle);
  --text-color-default-primary: var(--magic-button-primary-label-default);
  --text-color-default-secondary: var(--magic-button-secondary-label-default);
  --text-color-hover-primary: var(--magic-button-primary-label-default);
  --text-color-hover-secondary: var(--magic-button-secondary-label-subtle);
  --text-color-focus-primary: var(--magic-button-primary-label-default);
  --text-color-focus-secondary: var(--magic-button-secondary-label-default);
  --text-color-disabled-primary: var(--magic-button-primary-label-disabled);
  --text-color-disabled-secondary: var(--magic-button-secondary-label-disabled);
  --text-color-active-primary: var(--magic-button-primary-label-default);
  --text-color-active-secondary: var(--magic-button-secondary-label-subtle);
  --background-color-default-primary: var(--magic-button-primary-background-default);
  --background-color-default-secondary: var(--transparent);
  --background-color-hover-primary: var(--magic-button-primary-background-hover);
  --background-color-hover-secondary: var(--magic-button-secondary-background-hover);
  --background-color-focus-primary: var(--magic-button-primary-background-default);
  --background-color-focus-secondary: var(--transparent);
  --background-color-disabled-primary: var(--magic-button-primary-background-disabled);
  --background-color-disabled-secondary: var(--magic-button-secondary-background-disabled);
  --background-color-active-primary: var(--magic-button-primary-background-pressed);
  --background-color-active-secondary: var(--magic-button-secondary-background-pressed);
  --border-color-default-primary: var(--magic-button-primary-background-default);
  --border-color-default-secondary: var(--magic-button-secondary-border-color-default);
  --border-color-hover-primary: var(--magic-button-primary-background-hover);
  --border-color-hover-secondary: var(--magic-button-secondary-border-color-hover);
  --border-color-focus-primary: var(--magic-button-primary-background-default);
  --border-color-focus-secondary: var(--magic-button-secondary-border-color-hover);
  --border-color-disabled-primary: var(--magic-button-primary-background-disabled);
  --border-color-disabled-secondary: var(--magic-button-secondary-background-disabled);
  --border-color-active-primary: var(--magic-button-primary-background-pressed);
  --border-color-active-secondary: var(--magic-button-secondary-border-color-pressed);
}