@puffin-ui/utilities-color v0.0.1

@puffin-ui/utilities-color

A suite of color formatting utilities used in Puffin UI packages and presets.

!CAUTION These types are not considered public API and support Puffin UI internal packages. Breaking changes may occur at any time. Use at your own risk.

Contents

• Install
• Utilities
• License

Install

npm

npm install -D @puffin-ui/utilities-color

pnpm

pnpm install -D @puffin-ui/utilities-color

yarn

yarn add -D @puffin-ui/utilities-color

bun

bun add -D @puffin-ui/utilities-color

> Back to Contents

Utilities

• transformColorScale

transformColorScale

Generate a new color scale in light and dark mode from a color provider's native color scale.

• Included Color Providers
  • Material 2014
  • Open Color
  • Radix UI Colors
  • Tailwind CSS
• Included Color Scales
  • 0-9
  • 50-900
  • 50-950
  • 1-12

Parameters

• provider (string, Required)
  • The color provider to lookup colors from.
  • Accepted values: "material" | "open-color" | "radix" | "tailwind"
• colors ("*" | ProviderColorKeys[], Required)
  • The colors from the color provider to generate scales for.
  • Accepted values:
    • "*" generates all colors from the color scale.
    • An array of colors from the color provider. Accepted values for each provider are provided as built-in Typescript types.
      • Type ColorKeyMaterial - Material color keys
      • Type ColorKeyOpenColor - Open Color color keys
      • Type ColorKeyRadix - Radix color keys
      • Type ColorKeyTailwind - Tailwind color keys
  • Default value: "*"
• outputScale (ColorScaleKey, Required)
  • The output scale to generate for each color.
    • Accepted values:
      • "0-9" - Used by Open Color
      • "50-900" - Used by Chakra UI
      • "50-900A" - Used by Material
      • "50-950" - Used by Tailwind
      • "1-12" - Used by Radix UI Colors

Returns

Returns a color map with the calculated scale as well as light and dark values for the scale.

// transformColorScale({provider: 'material', colors: ['*'], scale: '0-9'})

const materialToZeroNineResult = {
  scale: '0-9',
  light: {
    amber: {
      '0': '#fff8e1',
      '1': '#ffecb3',
      '2': '#ffe082',
      '3': '#ffd54f',
      '4': '#ffca28',
      '5': '#ffc107',
      '6': '#ffb300',
      '7': '#ffa000',
      '8': '#ff8f00',
      '9': '#ff6f00',
    },
    // ... Other colors
    yellow: {
      '0': '#fffde7',
      '1': '#fff9c4',
      '2': '#fff59d',
      '3': '#fff176',
      '4': '#ffee58',
      '5': '#ffeb3b',
      '6': '#fdd835',
      '7': '#fbc02d',
      '8': '#f9a825',
      '9': '#f57f17',
    },
  },
  dark: {
    amber: {
      '0': '#ff6f00',
      '1': '#ff8f00',
      '2': '#ffa000',
      '3': '#ffb300',
      '4': '#ffc107',
      '5': '#ffca28',
      '6': '#ffd54f',
      '7': '#ffe082',
      '8': '#ffecb3',
      '9': '#fff8e1',
    },
    // ... Other colors
    yellow: {
      '0': '#f57f17',
      '1': '#f9a825',
      '2': '#fbc02d',
      '3': '#fdd835',
      '4': '#ffeb3b',
      '5': '#ffee58',
      '6': '#fff176',
      '7': '#fff59d',
      '8': '#fff9c4',
      '9': '#fffde7',
    },
  },
};

> Back to Utilities

> Back to Contents

License

MIT © 2024 Amanda Guthrie

> Back to Contents