🚨 This works in production now (yehaw) but LOTS of optimizing and docs to write.

UnoCSS Preset Nye

UnoCSS Preset for fluid typography and grid-based spacing. Naming based on Tailwind. Built to make translating Figma grids and text specs really easy.

🗺️ Roadmap

Core

• [ ] Full autocomplete coverage (Roughly 20% right now)
  • [ ] Font Sizing

Grid

• [ ] Framework-agnostic grid marker injection

Colors & Themes

• [ ] Wide gamut color support
• [ ] Configurable theme media queries

Typography

• [ ] Extend Font Families configuration with font-family property
• [ ] Rework fluid typography to respect user zoom
• [ ] Configurable base font size for rem conversion (currently 10)

🛠️ Installation

Install with whichever package manager makes you happy.

npm i unocss-preset-nye

pnpm i unocss-preset-nye

yarn add unocss-preset-nye

Inside of your uno.config.ts file (at the root of your project):

import { defineConfig } from 'unocss'
import unoPresetNye from '@unocss-preset-nye'

export default defineConfig({
  presets: [unoPresetNye()], // Call the preset as a function
  // ... whatever other options your heart desires from the Uno docs.
})

⚙️ Configuration

Table of contents

Colors & Themes Color Mode Responsivness with devices Font Families Font Sizes Eases

Full Configuration Example

export default defineConfig({
  presets: [
    presetNye({
      maxScalingWidth: 2160 // px
      colorMode: 'hsl',
    }
  )],
  theme: {
    themes: {
      dark: {
        primary: '#000'
        secondary: '#ff0'
      },
      light: {
        primary: '#000'
        secondary: '#ff0'
      }
    }
    devices: {
      sm: {
        columns: 10
        gutter: 15 // px
        margin: 40 // px
        size: 375 // px
      },
      lg: {
        columns: 18
        gutter: 15 // px
        margin: 40 // px
        size: 1440 // px
      }
    },
    fontSizes: {
      12: {
        size: 12,
        line: 1.6,
        letter: -.004
      },
      '24-caps': {
        line: 1.5,
        letter: -.004,
        size: 24,
        uppercase: true,
      }
    }
}
  cli: {
    entry: {
      patterns: [
        "./src/components/**/*.astro",
        "./src/**/*.astro",
        "./src/pages/**/*.astro",
      ],
      outFile: "./src/styles/uno.css",
    },
  },
  // extractorDefault: extractorArbitrary,
});

Included Transformers and Extractors

These are already baked into this preset, you dont need to load them in again.

• extractorArbitrary from @unocss/extractor-arbitrary-variants

Colors & Themes

Theming support out of the box with hex codes. Colors can be configured in 2 ways.

⚠️ Colors and Themes cannot be used together. If both are provided, themes will be ignored

Normal colors, no theming

  colors: {
    'yellow': '#fff000'
    'red': '#ff0000',
  }

Themed color sets

themes: {
  dark: {
    'yellow': '#fff000'
    'red': '#ff0000',
  },
  light {
    'yellow': '#fff000'
    'red': '#ff0000',
  }
}

🔀 Swithing themes

Themes are generated with html[data-theme="YourThemeName"] media queries. Setting a data attribute equal to your theme name on your html element will change themes.

🚧 Support for changing what kind of media queries are generated is planned.

Defaults

A few colors are always available, no matter what options you provide to the config:

| Color | CSS Output | | :---------- | :------------- | | transparent | transparent | | current | currentColor |

List

{
  black: '#000',
  white: '#fff',
  'gray-100': '#f7fafc',
  'gray-200': '#edf2f7',
  'gray-300': '#e2e8f0',
  'gray-400': '#cbd5e0',
  'gray-500': '#a0aec0',
  'gray-600': '#718096',
  'gray-700': '#4a5568',
  'gray-800': '#2d3748',
  'gray-900': '#1a202c',
  'red-100': '#fff5f5',
  'red-200': '#fed7d7',
  'red-300': '#feb2b2',
  'red-400': '#fc8181',
  'red-500': '#f56565',
  'red-600': '#e53e3e',
  'red-700': '#c53030',
  'red-800': '#9b2c2c',
  'red-900': '#742a2a',
  'yellow-100': '#fffff0',
  'yellow-200': '#fefcbf',
  'yellow-300': '#faf089',
  'yellow-400': '#f6e05e',
  'yellow-500': '#ecc94b',
  'yellow-600': '#d69e2e',
  'yellow-700': '#b7791f',
  'yellow-800': '#975a16',
  'yellow-900': '#744210',
  'green-100': '#f0fff4',
  'green-200': '#c6f6d5',
  'green-300': '#9ae6b4',
  'green-400': '#68d391',
  'green-500': '#48bb78',
  'green-600': '#38a169',
  'green-700': '#2f855a',
  'green-800': '#276749',
  'green-900': '#22543d',
  'blue-100': '#ebf8ff',
  'blue-200': '#bee3f8',
  'blue-300': '#90cdf4',
  'blue-400': '#63b3ed',
  'blue-500': '#4299e1',
  'blue-600': '#3182ce',
  'blue-700': '#2b6cb0',
  'blue-800': '#2c5282',
  'blue-900': '#2a4365',
  'indigo-100': '#ebf4ff',
  'indigo-200': '#c3dafe',
  'indigo-300': '#a3bffa',
  'indigo-400': '#7f9cf5',
  'indigo-500': '#667eea',
  'indigo-600': '#5a67d8',
  'indigo-700': '#4c51bf',
  'indigo-800': '#434190',
  'indigo-900': '#3c366b',
  'purple-100': '#faf5ff',
  'purple-200': '#e9d8fd',
  'purple-300': '#d6bcfa',
  'purple-400': '#b794f4',
  'purple-500': '#9f7aea',
  'purple-600': '#805ad5',
  'purple-700': '#6b46c1',
  'purple-800': '#553c9a',
  'purple-900': '#44337a',
  'pink-100': '#fff5f7',
  'pink-200': '#fed7e2',
  'pink-300': '#fbb6ce',
  'pink-400': '#f687b3',
  'pink-500': '#ed64a6',
  'pink-600': '#d53f8c',
  'pink-700': '#b83280',
  'pink-800': '#97266d',
  'pink-900': '#702459',
}

Color Mode

Choose which format color variables are created as. HSL or RGB.

🚧 P3 color support planned.

| Option | Generated CSS | | :----- | :--------------------------------------------- | | hsl | hsl(var(--yourColorVar), var(--opacity-var)) | | rgb | hsl(rgb(--yourColorVar), var(--opacity-var)) |

Devices

An object that defines sizes, gutters, margins, and columns for each breakpoint. Have as many objects as you like but each must have the following properties:

| Property | Description | Type | | :------- | :---------------------------- | -------- | | columns | Number of columns | number | | size | Pixel size of breakpoint | number | | gutter | Pixel size of gutter in Figma | number | | margin | Pixel size of margin in Figma | number |

These properties are used in the Grid Preflight to create variables like var(--column). The grid created by this preset is generated to the spec you provide.

Font Sizes

An object used to generate classes like text-50 or text-12-caps. These are converted to rems on build. Provide px values. Each object must have the following properties:

Note: The key of each object can be a number or string. Example: 12 and '12-caps' are both valid.

| Property | Description | Type | | :---------- | :---------------------------- | --------------------------------- | | size | Pixel size of font | number | | line | Line height of font (decimal) | number ex: 1.2 for 120% | | letter | Letter spacing of font | number ex: .002 for 2% in Figma | | uppercase | Is this text size all caps? | boolean, defaults to false |

Example

{
  12: {
    size: 12,
    line: 1.4,
    letter: -.0015
  },
  '18-caps': {
    size: 18,
    line: 1.1,
    letter: 0.011,
  },
  50: {
    size: 50,
    line: 1.1,
    letter: -0.003,
  },
  62: {
    size: 62,
    letter: -0.01,
    line: 1.05,
  }
}

Font Families

Object declaring font families. These are converted to variables at build. Example: 'sans' becomes var(--sans).

| Property | Description | | :------- | :------------------------------------------------------ | | family | Pixel size of font | | type | cursive, fantasy, monospace, serif,sans-serif | | letter | Letter spacing of font |

Eases ease-

Define easings for transition-timing-function, defalts to this list of common eases.

Usage example: ease-quad-in

{
  'quad-in': 'cubic-bezier(0.26, 0, 0.6, 0.2)',
  'cubic-in': 'cubic-bezier(0.4, 0, 0.68, 0.06)',
  'quart-in': 'cubic-bezier(0.52, 0, 0.74, 0)',
  'quint-in': 'cubic-bezier(0.64, 0, 0.78, 0)',
  'sine-in': 'cubic-bezier(0.32, 0, 0.6, 0.36)',
  'expo-in': 'cubic-bezier(0.66, 0, 0.86, 0)',
  'circ-in': 'cubic-bezier(0.54, 0, 1, 0.44)',
  'back-in': 'cubic-bezier(0.6, -0.28, 0.735, 0.045)',
  // Out
  'quad-out': 'cubic-bezier(0.4, 0.8, 0.74, 1)',
  'cubic-out': 'cubic-bezier(0.34, 1.02, 0.68, 1)',
  'quart-out': 'cubic-bezier(0.26, 1.04, 0.54, 1)',
  'quint-out': 'cubic-bezier(0.22, 1.1, 0.48, 1)',
  'sine-out': 'cubic-bezier(0.4, 0.64, 0.68, 1)',
  'expo-out': 'cubic-bezier(0.16, 1.08, 0.38, 0.98)',
  'circ-out': 'cubic-bezier(0, 0.56, 0.46, 1)',
  'back-out': 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
  // In Out
  'quad-inout': 'cubic-bezier(0.48, 0.04, 0.52, 0.96)',
  'cubic-inout': 'cubic-bezier(0.66, 0, 0.34, 1)',
  'quart-inout': 'cubic-bezier(0.77, 0, 0.175, 1)',
  'quint-inout': 'cubic-bezier(0.84, 0, 0.16, 1)',
  'sine-inout': 'cubic-bezier(0.36, 0, 0.64, 1)',
  'expo-inout': 'cubic-bezier(0.9, 0, 0.1, 1)',
  'circ-inout': 'cubic-bezier(0.88, 0.14, 0.12, 0.86)',
  'back-inout': 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',

  bounce: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
}

Generic Config

Grid-based Spacing

Allows classes like cols-5 and margin-mb-2 for spacing based on grid variables defined in the config.

A few examples: |Class|Output| |:----|:-----| |cols-3| width: calc(var(--column) * 3 + var(--gutter) * 2)| |margin-pt-2| padding-top: calc(var(--margin) * 2)| |gutter-mr-12| margin-right: calc(var(--gutter) * 12)|

These work for the follwing properties. These properties use the same naming as tailwing. Example: padding-top is pt- and width is w-.

⚠️ Width has 2 classes. w- and cols-. These act differently:

w-[number] Ouput: width: [number]rem

cols-[number] Ouput: width: calc((var(--cols) * [number]) - (var(--gutter) - [number - 1]))

Adding width to columns with spreads

Sometimes you might need an extra gutter or 2 to your column width. You can do this by adding another parameter to the end cols-[number]-[spread].

| Spread keyword | Output | | :------------- | :--------- | | wide | +1 gutter | | wider | +2 gutters | | narrow | -1 gutter | | narrower | -2 gutters |

Behind the scenes: cols-4-wider is calc((var(--column) * 4) + (var(--gutter) * 5)). Without the -wider at the end, cols-4 is equivalent to calc((var(--column) * 4) + (var(--gutter) * 3))

margin-right margin-left margin-top margin-bottom margin padding top left right bottom inset padding-right padding-left padding-top padding-bottom min-width max-width width min-height max-height height scroll-padding scroll-margin scroll-padding-left scroll-padding-right scroll-margin-left scroll-margin-right scroll-padding-top scroll-padding-bottom scroll-margin-top scroll-margin-bottom text-indent column-gap row-gap gap gap-x gap-y indent

Shortcuts

| Shortcut | Output | | :------------------- | :---------------------------------------- | | flex-center | flex justify-center items-center | | inline-flex-center | inline-flex justify-center items-center |

Media Queries

The media queries options default to the following:

| Object | Output | | :----------------------------------- | :-------------------------------------- | | { 'short': '(max-height: 700px)' } | '@media screen and (max-height: 700px)' |