jellyfish_designtokens/dist/patterns/container.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-container-spacing-gap-stack-xl2: var(--jf-spacing-gap-xl3);
  --jf-container-spacing-gap-stack-xl: var(--jf-spacing-gap-xl2);
  --jf-container-spacing-gap-stack-lg: var(--jf-spacing-gap-xl);
  --jf-container-spacing-gap-stack-md: var(--jf-spacing-gap-lg);
  --jf-container-spacing-gap-stack-sm: var(--jf-spacing-gap-md);
  --jf-container-spacing-gap-stack-xs: var(--jf-spacing-gap-sm);
  --jf-container-spacing-gap-stack-xs2: var(--jf-spacing-gap-xs);
  --jf-container-spacing-gap-inline-g: var(--jf-spacing-gap-g);
  --jf-container-spacing-gap-inline-xl3: var(--jf-spacing-gap-xl3);
  --jf-container-spacing-gap-inline-xl2: var(--jf-spacing-gap-xl2);
  --jf-container-spacing-gap-inline-xl: var(--jf-spacing-gap-xl);
  --jf-container-spacing-gap-inline-lg: var(--jf-spacing-gap-lg);
  --jf-container-spacing-gap-inline-md: var(--jf-spacing-gap-md);
  --jf-container-spacing-gap-inline-sm: var(--jf-spacing-gap-sm);
  --jf-container-spacing-gap-inline-xs: var(--jf-spacing-gap-xs);
  --jf-container-spacing-gap-inline-xs2: var(--jf-spacing-gap-xs2);
  --jf-container-spacing-padding-verticals-xg: var(--jf-spacing-padding-xg) var(--jf-spacing-padding-none) var(--jf-spacing-padding-xg);
  --jf-container-spacing-padding-verticals-g: var(--jf-spacing-padding-g) var(--jf-spacing-padding-none) var(--jf-spacing-padding-g);
  --jf-container-spacing-padding-verticals-xl3: var(--jf-spacing-padding-xl3) var(--jf-spacing-padding-none) var(--jf-spacing-padding-xl3);
  --jf-container-spacing-padding-verticals-xl2: var(--jf-spacing-padding-xl2) var(--jf-spacing-padding-none) var(--jf-spacing-padding-xl2);
  --jf-container-spacing-padding-verticals-xl: var(--jf-spacing-padding-xl) var(--jf-spacing-padding-none) var(--jf-spacing-padding-xl);
  --jf-container-spacing-padding-verticals-lg: var(--jf-spacing-padding-lg) var(--jf-spacing-padding-none) var(--jf-spacing-padding-lg);
  --jf-container-spacing-padding-verticals-md: var(--jf-spacing-padding-md) var(--jf-spacing-padding-none) var(--jf-spacing-padding-md);
  --jf-container-spacing-padding-verticals-sm: var(--jf-spacing-padding-sm) var(--jf-spacing-padding-none) var(--jf-spacing-padding-sm);
  --jf-container-spacing-padding-verticals-xs: var(--jf-spacing-padding-xs) var(--jf-spacing-padding-none) var(--jf-spacing-padding-xs);
  --jf-container-spacing-padding-verticals-xs2: var(--jf-spacing-padding-xs2) var(--jf-spacing-padding-none) var(--jf-spacing-padding-xs2);
  --jf-container-spacing-padding-stretch-g: var(--jf-spacing-padding-xg) var(--jf-spacing-padding-g) var(--jf-spacing-padding-xg);
  --jf-container-spacing-padding-stretch-xl3: var(--jf-spacing-padding-g) var(--jf-spacing-padding-xl3) var(--jf-spacing-padding-g);
  --jf-container-spacing-padding-stretch-xl2: var(--jf-spacing-padding-xl3) var(--jf-spacing-padding-xl2) var(--jf-spacing-padding-xl3);
  --jf-container-spacing-padding-stretch-xl: var(--jf-spacing-padding-xl2) var(--jf-spacing-padding-xl) var(--jf-spacing-padding-xl2);
  --jf-container-spacing-padding-stretch-lg: var(--jf-spacing-padding-xl) var(--jf-spacing-padding-lg) var(--jf-spacing-padding-xl);
  --jf-container-spacing-padding-stretch-md: var(--jf-spacing-padding-lg) var(--jf-spacing-padding-md) var(--jf-spacing-padding-lg);
  --jf-container-spacing-padding-stretch-sm: var(--jf-spacing-padding-md) var(--jf-spacing-padding-sm) var(--jf-spacing-padding-md);
  --jf-container-spacing-padding-stretch-xs: var(--jf-spacing-padding-sm) var(--jf-spacing-padding-xs) var(--jf-spacing-padding-sm);
  --jf-container-spacing-padding-stretch-xs2: var(--jf-spacing-padding-xs) var(--jf-spacing-padding-xs2) var(--jf-spacing-padding-xs);
  --jf-container-spacing-padding-stretch-xs3: var(--jf-spacing-padding-xs2) var(--jf-spacing-padding-none) var(--jf-spacing-padding-xs2);
  --jf-container-spacing-padding-squish-g: var(--jf-spacing-padding-g) var(--jf-spacing-padding-xg) var(--jf-spacing-padding-g);
  --jf-container-spacing-padding-squish-xl3: var(--jf-spacing-padding-xl3) var(--jf-spacing-padding-g) var(--jf-spacing-padding-xl3);
  --jf-container-spacing-padding-squish-xl2: var(--jf-spacing-padding-xl2) var(--jf-spacing-padding-xl3) var(--jf-spacing-padding-xl2);
  --jf-container-spacing-padding-squish-xl: var(--jf-spacing-padding-xl) var(--jf-spacing-padding-xl2) var(--jf-spacing-padding-xl);
  --jf-container-spacing-padding-squish-lg: var(--jf-spacing-padding-lg) var(--jf-spacing-padding-xl) var(--jf-spacing-padding-lg);
  --jf-container-spacing-padding-squish-md: var(--jf-spacing-padding-md) var(--jf-spacing-padding-lg) var(--jf-spacing-padding-md);
  --jf-container-spacing-padding-squish-sm: var(--jf-spacing-padding-sm) var(--jf-spacing-padding-md) var(--jf-spacing-padding-sm);
  --jf-container-spacing-padding-squish-xs: var(--jf-spacing-padding-xs) var(--jf-spacing-padding-sm) var(--jf-spacing-padding-xs);
  --jf-container-spacing-padding-squish-xs2: var(--jf-spacing-padding-xs2) var(--jf-spacing-padding-xs) var(--jf-spacing-padding-xs2);
  --jf-container-spacing-padding-inset-xg: var(--jf-spacing-padding-xg)var(--jf-spacing-padding-xg) var(--jf-spacing-padding-xg);
  --jf-container-spacing-padding-inset-g: var(--jf-spacing-padding-g) var(--jf-spacing-padding-g) var(--jf-spacing-padding-g);
  --jf-container-spacing-padding-inset-xl3: var(--jf-spacing-padding-xl3) var(--jf-spacing-padding-xl3) var(--jf-spacing-padding-xl3);
  --jf-container-spacing-padding-inset-xl2: var(--jf-spacing-padding-xl2) var(--jf-spacing-padding-xl2) var(--jf-spacing-padding-xl2);
  --jf-container-spacing-padding-inset-xl: var(--jf-spacing-padding-xl) var(--jf-spacing-padding-xl) var(--jf-spacing-padding-xl);
  --jf-container-spacing-padding-inset-lg: var(--jf-spacing-padding-lg) var(--jf-spacing-padding-lg) var(--jf-spacing-padding-lg);
  --jf-container-spacing-padding-inset-md: var(--jf-spacing-padding-md) var(--jf-spacing-padding-md) var(--jf-spacing-padding-md);
  --jf-container-spacing-padding-inset-sm: var(--jf-spacing-padding-sm) var(--jf-spacing-padding-sm) var(--jf-spacing-padding-sm);
  --jf-container-spacing-padding-inset-xs: var(--jf-spacing-padding-xs) var(--jf-spacing-padding-xs) var(--jf-spacing-padding-xs);
  --jf-container-spacing-padding-inset-xs2: var(--jf-spacing-padding-xs2) var(--jf-spacing-padding-xs2) var(--jf-spacing-padding-xs2);
  --jf-container-spacing-gap-stack-none: var(--jf-spacing-gap-none);
  --jf-container-spacing-gap-inline-none: var(--jf-spacing-gap-none);
  --jf-container-spacing-padding-horizontals-xg: var(--jf-spacing-padding-none) var(--jf-spacing-padding-xg2) var(--jf-spacing-padding-none);
  --jf-container-spacing-padding-horizontals-g: var(--jf-spacing-padding-none) var(--jf-spacing-padding-g) var(--jf-spacing-padding-none);
  --jf-container-spacing-padding-horizontals-xl3: var(--jf-spacing-padding-none) var(--jf-spacing-padding-xl3) var(--jf-spacing-padding-none);
  --jf-container-spacing-padding-horizontals-xl2: var(--jf-spacing-padding-none) var(--jf-spacing-padding-xl2) var(--jf-spacing-padding-none);
  --jf-container-spacing-padding-horizontals-xl: var(--jf-spacing-padding-none) var(--jf-spacing-padding-xl) var(--jf-spacing-padding-none);
  --jf-container-spacing-padding-horizontals-lg: var(--jf-spacing-padding-none) var(--jf-spacing-padding-lg) var(--jf-spacing-padding-none);
  --jf-container-spacing-padding-horizontals-md: var(--jf-spacing-padding-none) var(--jf-spacing-padding-md) var(--jf-spacing-padding-none);
  --jf-container-spacing-padding-horizontals-sm: var(--jf-spacing-padding-none) var(--jf-spacing-padding-sm) var(--jf-spacing-padding-none);
  --jf-container-spacing-padding-horizontals-xs: var(--jf-spacing-padding-none) var(--jf-spacing-padding-xs) var(--jf-spacing-padding-none);
  --jf-container-spacing-padding-horizontals-xs2: var(--jf-spacing-padding-none) var(--jf-spacing-padding-xs2) var(--jf-spacing-padding-none);
  --jf-container-spacing-padding-squish-xs3: var(--jf-spacing-padding-none) var(--jf-spacing-padding-xs2) var(--jf-spacing-padding-none);
  --jf-container-spacing-padding-inset-none: var(--jf-spacing-padding-none) var(--jf-spacing-padding-none) var(--jf-spacing-padding-none);
  --jf-container-color-bg-filled-regular-warning-disabled: var(--jf-color-bg-regular-warning);
  --jf-container-color-bg-filled-regular-warning-loading: var(--jf-color-bg-regular-warning);
  --jf-container-color-bg-filled-regular-warning-focus: hsl(36.9 60.9% 45.8%);
  --jf-container-color-bg-filled-regular-warning-selected: hsl(36.9 60.9% 43.1%);
  --jf-container-color-bg-filled-regular-warning-hover: hsl(36.9 60.9% 63.1%);
  --jf-container-color-bg-filled-regular-warning-enabled: var(--jf-color-bg-regular-warning);
  --jf-container-color-bg-filled-regular-critical-disabled: var(--jf-color-bg-regular-critical);
  --jf-container-color-bg-filled-regular-critical-loading: var(--jf-color-bg-regular-critical);
  --jf-container-color-bg-filled-regular-critical-focus: hsl(5.64 90.2% 47.7%);
  --jf-container-color-bg-filled-regular-critical-selected: hsl(5.64 90.2% 44.9%);
  --jf-container-color-bg-filled-regular-critical-hover: hsl(5.64 90.2% 64.9%);
  --jf-container-color-bg-filled-regular-critical-enabled: var(--jf-color-bg-regular-critical);
  --jf-container-color-bg-filled-regular-primary-disabled: var(--jf-color-bg-regular-primary);
  --jf-container-color-bg-filled-regular-primary-loading: var(--jf-color-bg-regular-primary);
  --jf-container-color-bg-filled-regular-primary-focus: hsl(260 65.1% 51.7%);
  --jf-container-color-bg-filled-regular-primary-selected: hsl(260 65.1% 48.6%);
  --jf-container-color-bg-filled-regular-primary-hover: hsl(260 65.1% 68.6%);
  --jf-container-color-bg-filled-regular-primary-enabled: var(--jf-color-bg-regular-primary);
  --jf-container-color-bg-filled-regular-alt-disabled: var(--jf-color-bg-regular-alt);
  --jf-container-color-bg-filled-regular-alt-loading: var(--jf-color-bg-regular-alt);
  --jf-container-color-bg-filled-regular-alt-focus: hsl(212 17.4% 71.3%);
  --jf-container-color-bg-filled-regular-alt-selected: hsl(212 17.4% 67.1%);
  --jf-container-color-bg-filled-regular-alt-hover: hsl(212 17.4% 87.1%);
  --jf-container-color-bg-filled-regular-alt-enabled: var(--jf-color-bg-regular-alt);
  --jf-container-color-bg-filled-regular-default-disabled: var(--jf-color-bg-regular-default);
  --jf-container-color-bg-filled-regular-default-loading: var(--jf-color-bg-regular-default);
  --jf-container-color-bg-filled-regular-default-focus: hsl(212 17.4% 79.1%);
  --jf-container-color-bg-filled-regular-default-selected: hsl(212 17.4% 74.5%);
  --jf-container-color-bg-filled-regular-default-hover: hsl(212 17.4% 94.5%);
  --jf-container-color-bg-filled-regular-default-enabled: var(--jf-color-bg-regular-default);
  --jf-container-color-bg-naked-regular-warning-disabled: hsl(36.9 60.9% 88.5% / 0);
  --jf-container-color-bg-naked-regular-warning-loading: hsl(36.9 60.9% 88.5% / 0);
  --jf-container-color-bg-naked-regular-warning-focus: hsl(36.9 60.9% 75.2%);
  --jf-container-color-bg-naked-regular-warning-selected: hsl(36.9 60.9% 70.8%);
  --jf-container-color-bg-naked-regular-warning-hover: hsl(36.9 60.9% 90.8%);
  --jf-container-color-bg-naked-regular-warning-enabled: hsl(36.9 60.9% 88.5% / 0);
  --jf-container-color-bg-naked-regular-critical-disabled: hsl(5.64 90.2% 89% / 0);
  --jf-container-color-bg-naked-regular-critical-loading: hsl(5.64 90.2% 89% / 0);
  --jf-container-color-bg-naked-regular-critical-focus: hsl(5.64 90.2% 75.7%);
  --jf-container-color-bg-naked-regular-critical-selected: hsl(5.64 90.2% 71.2%);
  --jf-container-color-bg-naked-regular-critical-hover: hsl(5.64 90.2% 91.2%);
  --jf-container-color-bg-naked-regular-critical-enabled: hsl(5.64 90.2% 89% / 0);
  --jf-container-color-bg-naked-regular-primary-disabled: hsl(260 65.1% 90.2% / 0);
  --jf-container-color-bg-naked-regular-primary-loading: hsl(260 65.1% 90.2% / 0);
  --jf-container-color-bg-naked-regular-primary-focus: hsl(260 65.1% 76.7%);
  --jf-container-color-bg-naked-regular-primary-selected: hsl(260 65.1% 72.2%);
  --jf-container-color-bg-naked-regular-primary-hover: hsl(260 65.1% 92.2%);
  --jf-container-color-bg-naked-regular-primary-enabled: hsl(260 65.1% 90.2% / 0);
  --jf-container-color-bg-naked-regular-alt-disabled: hsl(212 17.4% 94.4% / 0);
  --jf-container-color-bg-naked-regular-alt-loading: hsl(212 17.4% 94.4% / 0);
  --jf-container-color-bg-naked-regular-alt-focus: hsl(212 17.4% 80.2%);
  --jf-container-color-bg-naked-regular-alt-selected: hsl(212 17.4% 75.5%);
  --jf-container-color-bg-naked-regular-alt-hover: hsl(212 17.4% 95.5%);
  --jf-container-color-bg-naked-regular-alt-enabled: hsl(212 17.4% 94.4% / 0);
  --jf-container-color-bg-naked-regular-default-disabled: hsl(212 17.4% 98.3% / 0);
  --jf-container-color-bg-naked-regular-default-loading: hsl(212 17.4% 98.3% / 0);
  --jf-container-color-bg-naked-regular-default-focus: hsl(212 17.4% 83.6%);
  --jf-container-color-bg-naked-regular-default-selected: rgb(78.4% 78.6% 78.9%);
  --jf-container-color-bg-naked-regular-default-hover: hsl(212 17.4% 98.6%);
  --jf-container-color-bg-naked-regular-default-enabled: hsl(212 17.4% 98.3% / 0);
  --jf-container-color-bg-filled-subtle-warning-disabled: var(--jf-color-bg-subtle-warning);
  --jf-container-color-bg-filled-subtle-warning-loading: var(--jf-color-bg-subtle-warning);
  --jf-container-color-bg-filled-subtle-warning-focus: hsl(36.9 60.9% 75.2%);
  --jf-container-color-bg-filled-subtle-warning-selected: hsl(36.9 60.9% 70.8%);
  --jf-container-color-bg-filled-subtle-warning-hover: hsl(36.9 60.9% 90.8%);
  --jf-container-color-bg-filled-subtle-warning-enabled: var(--jf-color-bg-subtle-warning);
  --jf-container-color-bg-filled-subtle-critical-disabled: var(--jf-color-bg-subtle-critical);
  --jf-container-color-bg-filled-subtle-critical-loading: var(--jf-color-bg-subtle-critical);
  --jf-container-color-bg-filled-subtle-critical-focus: hsl(5.64 90.2% 75.7%);
  --jf-container-color-bg-filled-subtle-critical-selected: hsl(5.64 90.2% 71.2%);
  --jf-container-color-bg-filled-subtle-critical-hover: hsl(5.64 90.2% 91.2%);
  --jf-container-color-bg-filled-subtle-critical-enabled: var(--jf-color-bg-subtle-critical);
  --jf-container-color-bg-filled-subtle-primary-disabled: var(--jf-color-bg-subtle-primary);
  --jf-container-color-bg-filled-subtle-primary-loading: var(--jf-color-bg-subtle-primary);
  --jf-container-color-bg-filled-subtle-primary-focus: hsl(260 65.1% 76.7%);
  --jf-container-color-bg-filled-subtle-primary-selected: hsl(260 65.1% 72.2%);
  --jf-container-color-bg-filled-subtle-primary-hover: hsl(260 65.1% 92.2%);
  --jf-container-color-bg-filled-subtle-primary-enabled: var(--jf-color-bg-subtle-primary);
  --jf-container-color-bg-filled-subtle-alt-disabled: var(--jf-color-bg-subtle-alt);
  --jf-container-color-bg-filled-subtle-alt-loading: var(--jf-color-bg-subtle-alt);
  --jf-container-color-bg-filled-subtle-alt-focus: hsl(212 17.4% 80.2%);
  --jf-container-color-bg-filled-subtle-alt-selected: hsl(212 17.4% 75.5%);
  --jf-container-color-bg-filled-subtle-alt-hover: hsl(212 17.4% 95.5%);
  --jf-container-color-bg-filled-subtle-alt-enabled: var(--jf-color-bg-subtle-alt);
  --jf-container-color-bg-filled-subtle-default-disabled: var(--jf-color-bg-subtle-default);
  --jf-container-color-bg-filled-subtle-default-loading: var(--jf-color-bg-subtle-default);
  --jf-container-color-bg-filled-subtle-default-focus: hsl(212 17.4% 83.6%);
  --jf-container-color-bg-filled-subtle-default-selected: rgb(78.4% 78.6% 78.9%);
  --jf-container-color-bg-filled-subtle-default-hover: hsl(212 17.4% 98.6%);
  --jf-container-color-bg-filled-subtle-default-enabled: var(--jf-color-bg-subtle-default);
  --jf-container-color-bg-filled-regular-success-disabled: var(--jf-color-bg-regular-success);
  --jf-container-color-bg-filled-regular-success-loading: var(--jf-color-bg-regular-success);
  --jf-container-color-bg-filled-regular-success-focus: hsl(94.9 65.1% 33%);
  --jf-container-color-bg-filled-regular-success-selected: hsl(94.9 65.1% 31%);
  --jf-container-color-bg-filled-regular-success-hover: hsl(94.9 65.1% 51%);
  --jf-container-color-bg-filled-regular-success-enabled: var(--jf-color-bg-regular-success);
  --jf-container-color-bg-filled-regular-secondary-disabled: var(--jf-color-bg-regular-secondary);
  --jf-container-color-bg-filled-regular-secondary-loading: var(--jf-color-bg-regular-secondary);
  --jf-container-color-bg-filled-regular-secondary-focus: hsl(193 100% 34.3%);
  --jf-container-color-bg-filled-regular-secondary-selected: hsl(193 100% 32.2%);
  --jf-container-color-bg-filled-regular-secondary-hover: hsl(193 100% 52.2%);
  --jf-container-color-bg-filled-regular-secondary-enabled: var(--jf-color-bg-regular-secondary);
  --jf-container-color-bg-naked-regular-success-disabled: hsl(94.9 65.1% 84.7% / 0);
  --jf-container-color-bg-naked-regular-success-loading: hsl(94.9 65.1% 84.7% / 0);
  --jf-container-color-bg-naked-regular-success-focus: hsl(94.9 65.1% 72%);
  --jf-container-color-bg-naked-regular-success-selected: hsl(94.9 65.1% 67.8%);
  --jf-container-color-bg-naked-regular-success-hover: hsl(94.9 65.1% 87.8%);
  --jf-container-color-bg-naked-regular-success-enabled: hsl(94.9 65.1% 84.7% / 0);
  --jf-container-color-bg-naked-regular-secondary-disabled: hsl(193 100% 85.1% / 0);
  --jf-container-color-bg-naked-regular-secondary-loading: hsl(193 100% 85.1% / 0);
  --jf-container-color-bg-naked-regular-secondary-focus: hsl(193 100% 72.3%);
  --jf-container-color-bg-naked-regular-secondary-selected: hsl(193 100% 68.1%);
  --jf-container-color-bg-naked-regular-secondary-hover: hsl(193 100% 88.1%);
  --jf-container-color-bg-naked-regular-secondary-enabled: hsl(193 100% 85.1% / 0);
  --jf-container-color-bg-filled-subtle-success-disabled: var(--jf-color-bg-subtle-success);
  --jf-container-color-bg-filled-subtle-success-loading: var(--jf-color-bg-subtle-success);
  --jf-container-color-bg-filled-subtle-success-focus: hsl(94.9 65.1% 72%);
  --jf-container-color-bg-filled-subtle-success-selected: hsl(94.9 65.1% 67.8%);
  --jf-container-color-bg-filled-subtle-success-hover: hsl(94.9 65.1% 87.8%);
  --jf-container-color-bg-filled-subtle-success-enabled: var(--jf-color-bg-subtle-success);
  --jf-container-color-bg-filled-subtle-secondary-disabled: var(--jf-color-bg-subtle-secondary);
  --jf-container-color-bg-filled-subtle-secondary-loading: var(--jf-color-bg-subtle-secondary);
  --jf-container-color-bg-filled-subtle-secondary-focus: hsl(193 100% 72.3%);
  --jf-container-color-bg-filled-subtle-secondary-selected: hsl(193 100% 68.1%);
  --jf-container-color-bg-filled-subtle-secondary-hover: hsl(193 100% 88.1%);
  --jf-container-color-bg-filled-subtle-secondary-enabled: var(--jf-color-bg-subtle-secondary);
}