jellyfish_designtokens/dist/comps/button.css

Ultimate design tokens from Jelly Fish Design System

/**
 * Do not edit directly
 * Generated on Thu, 31 Aug 2023 03:12:00 GMT
 */

:root {
  --jf-button-label-text-decoration: none;
  --jf-button-label-text-case: var(--jf-font-case-navigation);
  --jf-button-label-paragraph-spacing: 0;
  --jf-button-children-color-fg-filled-secondary: var(--jf-color-fg-white);
  --jf-button-children-color-fg-filled-primary: var(--jf-color-fg-white);
  --jf-button-label-letter-spacing: var(--jf-font-letter-spacing-label-md);
  --jf-button-label-font-size: var(--jf-font-size-label-md);
  --jf-button-label-line-height: 1.5;
  --jf-button-label-font-weight: 500;
  --jf-button-label-font-family: var(--jf-font-family-navigation);
  --jf-button-base-regular-size-min-width: var(--jf-component-dimension-xl2);
  --jf-button-children-color-fg-text-critical-focus: hsl(5.64 90.2% 40.5%);
  --jf-button-children-color-fg-text-critical-selected: hsl(5.64 90.2% 38.2%);
  --jf-button-children-color-fg-text-critical-hover: hsl(5.64 90.2% 58.2%);
  --jf-button-children-color-fg-text-critical-enabled: var(--jf-color-fg-critical);
  --jf-button-children-color-fg-text-primary-focus: hsl(260 65.1% 38.9%);
  --jf-button-children-color-fg-text-primary-selected: hsl(260 65.1% 36.6%);
  --jf-button-children-color-fg-text-primary-hover: hsl(260 65.1% 56.6%);
  --jf-button-children-color-fg-text-primary-enabled: var(--jf-color-fg-primary);
  --jf-button-children-color-fg-filled-critical: var(--jf-color-fg-critical);
  --jf-button-children-color-fg-filled-neutral: var(--jf-color-fg-default);
  --jf-button-children-color-fg-outlined-critical: var(--jf-color-fg-critical);
  --jf-button-children-color-fg-outlined-secondary: var(--jf-color-fg-critical);
  --jf-button-children-color-fg-outlined-primary: var(--jf-color-fg-primary);
  --jf-button-base-border-text: var(--jf-form-component-border-width-default) solid transparent;
  --jf-button-base-border-filled: var(--jf-form-component-border-width-default) solid transparent;
  --jf-button-base-border-outlined-critical: var(--jf-form-component-border-width-default) solid var(--jf-color-border-critical);
  --jf-button-base-border-outlined-neutral: var(--jf-form-component-border-width-default) solid var(--jf-color-border-default);
  --jf-button-base-border-outlined-primary: var(--jf-form-component-border-width-default) solid var(--jf-color-border-primary);
  --jf-button-base-border-radius-alt: var(--jf-form-component-border-radius-alt);
  --jf-button-base-border-radius-default: var(--jf-form-component-border-radius-default);
  --jf-button-base-regular-size-lg: var(--jf-form-component-base-size-height-lg);
  --jf-button-base-regular-size-md: var(--jf-form-component-base-size-height-md);
  --jf-button-base-regular-size-sm: var(--jf-form-component-base-size-height-sm);
  --jf-button-children-color-fg-text-secondary-focus: hsl(193 100% 29.2%);
  --jf-button-children-color-fg-text-secondary-selected: hsl(193 100% 27.4%);
  --jf-button-children-color-fg-text-secondary-hover: hsl(193 100% 47.4%);
  --jf-button-children-color-fg-text-secondary-enabled: var(--jf-color-fg-secondary);
  --jf-button-children-color-fg-text-neutral-focus: hsl(212 17.4% 22.5%);
  --jf-button-children-color-fg-text-neutral-selected: hsl(212 17.4% 21.2%);
  --jf-button-children-color-fg-text-neutral-hover: hsl(212 17.4% 41.2%);
  --jf-button-children-color-fg-text-neutral-enabled: var(--jf-color-fg-muted);
  --jf-button-children-color-fg-outlined-neutral: var(--jf-color-fg-muted);
  --jf-button-spacing-gap-inline-lg: var(--jf-form-component-spacing-gap-inline-xs);
  --jf-button-spacing-gap-inline-md: var(--jf-form-component-spacing-gap-inline-xs2);
  --jf-button-spacing-gap-inline-sm: var(--jf-form-component-spacing-gap-inline-xs3);
  --jf-button-base-color-bg-filled-critical-disabled: var(--jf-container-color-bg-filled-regular-critical-disabled);
  --jf-button-base-color-bg-filled-critical-focus: var(--jf-container-color-bg-filled-regular-critical-focus);
  --jf-button-base-color-bg-filled-critical-selected: var(--jf-container-color-bg-filled-regular-critical-selected);
  --jf-button-base-color-bg-filled-critical-hover: var(--jf-container-color-bg-filled-regular-critical-hover);
  --jf-button-base-color-bg-filled-critical-enabled: var(--jf-container-color-bg-filled-regular-critical-enabled);
  --jf-button-base-color-bg-filled-neutral-disabled: var(--jf-container-color-bg-filled-regular-alt-disabled);
  --jf-button-base-color-bg-filled-neutral-focus: var(--jf-container-color-bg-filled-regular-alt-focus);
  --jf-button-base-color-bg-filled-neutral-selected: var(--jf-container-color-bg-filled-regular-alt-selected);
  --jf-button-base-color-bg-filled-neutral-hover: var(--jf-container-color-bg-filled-regular-alt-hover);
  --jf-button-base-color-bg-filled-neutral-enabled: var(--jf-container-color-bg-filled-regular-alt-enabled);
  --jf-button-base-color-bg-filled-primary-disabled: var(--jf-container-color-bg-filled-regular-primary-disabled);
  --jf-button-base-color-bg-filled-primary-focus: var(--jf-container-color-bg-filled-regular-primary-focus);
  --jf-button-base-color-bg-filled-primary-selected: var(--jf-container-color-bg-filled-regular-primary-selected);
  --jf-button-base-color-bg-filled-primary-hover: var(--jf-container-color-bg-filled-regular-primary-hover);
  --jf-button-base-color-bg-filled-primary-enabled: var(--jf-container-color-bg-filled-regular-primary-enabled);
  --jf-button-base-border-outlined-secondary: var(--jf-form-component-border-width-default) solid var(--jf-color-border-secondary);
  --jf-button-base-color-bg-text-critical-disabled: var(--jf-container-color-bg-naked-regular-critical-disabled);
  --jf-button-base-color-bg-text-critical-focus: var(--jf-container-color-bg-naked-regular-critical-focus);
  --jf-button-base-color-bg-text-critical-selected: var(--jf-container-color-bg-naked-regular-critical-selected);
  --jf-button-base-color-bg-text-critical-hover: var(--jf-container-color-bg-naked-regular-critical-hover);
  --jf-button-base-color-bg-text-critical-enabled: var(--jf-container-color-bg-naked-regular-critical-enabled);
  --jf-button-base-color-bg-text-neutral-disabled: var(--jf-container-color-bg-naked-regular-alt-disabled);
  --jf-button-base-color-bg-text-neutral-focus: var(--jf-container-color-bg-naked-regular-alt-focus);
  --jf-button-base-color-bg-text-neutral-selected: var(--jf-container-color-bg-naked-regular-alt-selected);
  --jf-button-base-color-bg-text-neutral-hover: var(--jf-container-color-bg-naked-regular-alt-hover);
  --jf-button-base-color-bg-text-neutral-enabled: var(--jf-container-color-bg-naked-regular-alt-enabled);
  --jf-button-base-color-bg-text-primary-disabled: var(--jf-container-color-bg-naked-regular-primary-disabled);
  --jf-button-base-color-bg-text-primary-focus: var(--jf-container-color-bg-naked-regular-primary-focus);
  --jf-button-base-color-bg-text-primary-selected: var(--jf-container-color-bg-naked-regular-primary-selected);
  --jf-button-base-color-bg-text-primary-hover: var(--jf-container-color-bg-naked-regular-primary-hover);
  --jf-button-base-color-bg-text-primary-enabled: var(--jf-container-color-bg-naked-regular-primary-enabled);
  --jf-button-base-color-bg-outlined-critical-disabled: var(--jf-container-color-bg-naked-regular-critical-disabled);
  --jf-button-base-color-bg-outlined-critical-focus: var(--jf-container-color-bg-naked-regular-critical-focus);
  --jf-button-base-color-bg-outlined-critical-selected: var(--jf-container-color-bg-naked-regular-critical-selected);
  --jf-button-base-color-bg-outlined-critical-hover: var(--jf-container-color-bg-naked-regular-critical-hover);
  --jf-button-base-color-bg-outlined-critical-enabled: var(--jf-container-color-bg-naked-regular-critical-enabled);
  --jf-button-base-color-bg-outlined-neutral-disabled: var(--jf-container-color-bg-naked-regular-alt-disabled);
  --jf-button-base-color-bg-outlined-neutral-focus: var(--jf-container-color-bg-naked-regular-alt-focus);
  --jf-button-base-color-bg-outlined-neutral-selected: var(--jf-container-color-bg-naked-regular-alt-selected);
  --jf-button-base-color-bg-outlined-neutral-hover: var(--jf-container-color-bg-naked-regular-alt-hover);
  --jf-button-base-color-bg-outlined-neutral-enabled: var(--jf-container-color-bg-naked-regular-alt-enabled);
  --jf-button-base-color-bg-outlined-primary-disabled: var(--jf-container-color-bg-naked-regular-primary-disabled);
  --jf-button-base-color-bg-outlined-primary-focus: var(--jf-container-color-bg-naked-regular-primary-focus);
  --jf-button-base-color-bg-outlined-primary-selected: var(--jf-container-color-bg-naked-regular-primary-selected);
  --jf-button-base-color-bg-outlined-primary-hover: var(--jf-container-color-bg-naked-regular-primary-hover);
  --jf-button-base-color-bg-outlined-primary-enabled: var(--jf-container-color-bg-naked-regular-primary-enabled);
  --jf-button-base-color-bg-filled-secondary-disabled: var(--jf-container-color-bg-filled-regular-secondary-disabled);
  --jf-button-base-color-bg-filled-secondary-focus: var(--jf-container-color-bg-filled-regular-secondary-focus);
  --jf-button-base-color-bg-filled-secondary-selected: var(--jf-container-color-bg-filled-regular-secondary-selected);
  --jf-button-base-color-bg-filled-secondary-hover: var(--jf-container-color-bg-filled-regular-secondary-hover);
  --jf-button-base-color-bg-filled-secondary-enabled: var(--jf-container-color-bg-filled-regular-secondary-enabled);
  --jf-button-base-regular-spacing-lg: var(--jf-form-component-base-spacing-padding-horizontals-lg);
  --jf-button-base-regular-spacing-md: var(--jf-form-component-base-spacing-padding-horizontals-md);
  --jf-button-base-regular-spacing-sm: var(--jf-form-component-base-spacing-padding-horizontals-sm);
  --jf-button-base-color-bg-text-secondary-disabled: var(--jf-container-color-bg-naked-regular-secondary-disabled);
  --jf-button-base-color-bg-text-secondary-focus: var(--jf-container-color-bg-naked-regular-secondary-focus);
  --jf-button-base-color-bg-text-secondary-selected: var(--jf-container-color-bg-naked-regular-secondary-selected);
  --jf-button-base-color-bg-text-secondary-hover: var(--jf-container-color-bg-naked-regular-secondary-hover);
  --jf-button-base-color-bg-text-secondary-enabled: var(--jf-container-color-bg-naked-regular-secondary-enabled);
  --jf-button-base-color-bg-outlined-secondary-disabled: var(--jf-container-color-bg-naked-regular-secondary-disabled);
  --jf-button-base-color-bg-outlined-secondary-focus: var(--jf-container-color-bg-naked-regular-secondary-focus);
  --jf-button-base-color-bg-outlined-secondary-selected: var(--jf-container-color-bg-naked-regular-secondary-selected);
  --jf-button-base-color-bg-outlined-secondary-hover: var(--jf-container-color-bg-naked-regular-secondary-hover);
  --jf-button-base-color-bg-outlined-secondary-enabled: var(--jf-container-color-bg-naked-regular-secondary-enabled);
}