Theme Colors[ Variable Reference ]

Jellyfish automatically generates color utilities based on the colors provided in the $colors SCSS map.

These include the utility modifiers for buttons, chips, callouts and progress bars as well as .text-* as shown below.

• .text-primary
• .text-secondary
• .text-neutral
• .text-success
• .text-warning
• .text-error

Background modifiers

Background modifiers are not generated by default, other than for .bg-white and .bg-transparent.

There are a few ways to generate background modifiers:

1. When declaring a color in the $colors SCSS map, add a second argument of "true" - this will generate .bg-* modifiers for all values in the color palette (named as such: .bg-primary-300).
2. By adding a key : value pair in the $background-colors SCSS map. The value can either be a get-color($base, $shade) statement, or a raw CSS color value.

    
      // 1. Passing an argument of "true" to the makeColorPalette() function will generate background modifiers for all values in the given color palette.
      $colors: (
        "primary": makeColorPalette(#ff3c74, "true"),
      );
      // 2. Valid options for the $background-colors map:
      $background-colors: (
        "primary-300": get-color($primary, 300),
        "secondary-500": #ff3c74,
        "chocolate": #412d1f,
      );
    
  

Any background modifier generated in this way will automatically have it's text color and heading color changed based on contrast ratio, in order to comply with WCAG standards.