jellyfish_designtokens/dist/comps/icon.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-icon-color-fill-white-focus: hsl(0 0% 85%);
  --jf-icon-color-fill-white-selected: hsl(0 0% 80%);
  --jf-icon-color-fill-white-hover: hsl(0 0% 100%);
  --jf-icon-color-fill-white-enabled: var(--jf-color-fg-white);
  --jf-icon-dimension-lg: var(--jf-component-dimension-lg);
  --jf-icon-dimension-md: var(--jf-component-dimension-md);
  --jf-icon-dimension-sm: var(--jf-component-dimension-sm);
  --jf-icon-dimension-xs: var(--jf-component-dimension-xs);
  --jf-icon-color-fill-warning-focus: hsl(36.9 60.9% 23.8%);
  --jf-icon-color-fill-warning-selected: hsl(36.9 60.9% 22.4%);
  --jf-icon-color-fill-warning-hover: hsl(36.9 60.9% 42.4%);
  --jf-icon-color-fill-warning-enabled: var(--jf-color-fg-warning);
  --jf-icon-color-fill-critical-focus: hsl(5.64 90.2% 40.5%);
  --jf-icon-color-fill-critical-selected: hsl(5.64 90.2% 38.2%);
  --jf-icon-color-fill-critical-hover: hsl(5.64 90.2% 58.2%);
  --jf-icon-color-fill-critical-enabled: var(--jf-color-fg-critical);
  --jf-icon-color-fill-primary-focus: hsl(260 65.1% 38.9%);
  --jf-icon-color-fill-primary-selected: hsl(260 65.1% 36.6%);
  --jf-icon-color-fill-primary-hover: hsl(260 65.1% 56.6%);
  --jf-icon-color-fill-primary-enabled: var(--jf-color-fg-primary);
  --jf-icon-color-fill-neutral-focus: hsl(212 17.4% 11.5%);
  --jf-icon-color-fill-neutral-selected: hsl(212 17.4% 10.8%);
  --jf-icon-color-fill-neutral-hover: hsl(212 17.4% 30.8%);
  --jf-icon-color-fill-neutral-enabled: var(--jf-color-fg-default);
  --jf-icon-color-fill-success-focus: hsl(94.9 65.1% 20.2%);
  --jf-icon-color-fill-success-selected: hsl(94.9 65.1% 19%);
  --jf-icon-color-fill-success-hover: hsl(94.9 65.1% 39%);
  --jf-icon-color-fill-success-enabled: var(--jf-color-fg-success);
  --jf-icon-color-fill-secondary-focus: hsl(193 100% 29.2%);
  --jf-icon-color-fill-secondary-selected: hsl(193 100% 27.4%);
  --jf-icon-color-fill-secondary-hover: hsl(193 100% 47.4%);
  --jf-icon-color-fill-secondary-enabled: var(--jf-color-fg-secondary);
  --jf-icon-color-fill-inverted-focus: hsl(212 17.4% 74%);
  --jf-icon-color-fill-inverted-selected: hsl(212 17.4% 69.6%);
  --jf-icon-color-fill-inverted-hover: hsl(212 17.4% 89.6%);
  --jf-icon-color-fill-inverted-enabled: var(--jf-color-fg-inverted);
}