I'm taking a look at this one. I'm currently planning on putting together a PR that exposes the unocss preset as a sub-export within the main package, and declares unocss as a devDependency in the main package. I'm not 100% sure if that's the cleanest approach long-term vs. creating a standalone npm package, though.

Let me know if you feel strongly, @argyleink!

thanks jeff! great thoughts. I'd originally imagined a sub-export yeah, something like import "open-props/presets/uno"; that was a file built by a new build script like this to-object one, it'd be like, to-preset-uno.js. sounds like we're aligned in this! i think you'll find the workflow for calling that build script and testing the output a quick feedback loop. sorry for some of the complexity showing up in props.js but i think you'll be able to add your build task there easy enough. dont hesitate to ask me questions, i'll make sure you're moving along nicely!

for the devDep addition, i'm not 100% sure on that either. i kinda feel like, for now at least, we just export the file and let authors manage their uno installation/dep, and this package just offers the preset. but i dunno, maybe uno has opinions about it.

I'm learning a bit more about how uno learns about style tokens (as part of a theme) and then applies those tokens (via rules).

This changes how I'm going to structure the exported configuration a bit, but it makes sense since uno is library whose focus is actually applying style definitions via rules.

@argyleink following on from our discussion on #423, I wanted to make sure of a couple of things first.

In my over simplified understanding about the work @jeffposnick started on #423, the /^op-color-(.*)$/ rule converts an OP prop into an atomic CSS class using the token's value var(--violet-4)?

Example

if the OP was --violet-4 the class ends up begin

op-color-violet-4 {
  color: #9775fa;
}

More rules in the preset would extrapolate OP custom properties into its respective atomic CSS classes.

Atomic CSS Class Prefix

What do you think of having the atomic class prefix be configurable via the preset, but we also provide a default to op?

EDIT: Thinking about the default some more I realised some folks might not want a prefix at all! Maybe the default is to not have a prefix? Prefix could be useful if you have a CSS class name clash; maybe you're using OP with Tailwind or something. The inverse of this is that when there isn't a likelihood of a name clash, then omitting the prefix makes sense.

Example

import { defineConfig } from 'unocss'
import openPropsPreset from "open-props/presets/uno";

export default defineConfig({
  presets: [
    openPropsPreset({
      prefix: 'ops', // default value is 'op'
    }),
  ],
})

Yields atomic CSS classes with the ops prefix

ops-color-violet-4 { }

Or, with the default value of op, which yields

op-color-violet-4 { }

It's lines up nicely with the customisability of a build. The following taken from the docs

// full custom! pass args with node to the props.js script
node props.js 'ns' true ':root' 'my'

TODOs

Here is a list of todo items with the one's Jeff addressed and of which is still to be done

• Colors
  • Hex (done by @jeffposnick )
  • HCL
  • OKLCH
• Gradients
  • Gradients
  • Noisy
• Shadows
  • Shadow
  • Inner shadow
• Aspect ratios
• Typography
  • Font size
  • Font size fluid
  • Font weight
  • Font Letterspacing
  • Font Lineheight
  • Font families (done by @jeffposnick )
• Easing
  • Ease
  • Ease out
  • Ease in
  • Ease in/out
  • Elastic out
  • Elastic-in
  • Elastic-in/out
  • Ease spring
  • Ease bounce
  • Ease step
• Animations
  • Animation fade in/out
  • Animation fade in/out bloom
  • Animation shake X/Y
  • Animation slide in/out up/down/left/right
  • Animation spin/ping/blink/float/bounce/pulse
• Sizes
  • Size
  • Size fluid
  • Size content
  • Size header
  • Size relative
• Borders
  • Border Size
  • Radius
  • Round
  • Radius blob
  • Radius conditional
• zIndex
  • Layer
  • Layer important
• Media queries
  • Size (--size-sm, --size-md etc)
  • Portrait
  • Landscape
  • Only xxs/xs/sm/md/lg/xl/xxl
  • N above xxs/xs/sm/md/lg/xl/xxl
  • N below xxs/xs/sm/md/lg/xl/xxl
  • Phone xxs/xs/sm/md/lg
  • Capability
    • Touch
    • Stylus
    • Pointer
    • Mouse
    • HDColor
  • Preference
    • OSdark
    • OSlight
    • MotionOK
    • MotionNotOk
    • ForcedColors
  • Preference extended
    • HighContrast
    • LowContrast
    • OpacityOk
    • OpacityNotOk
    • UseDataOk
    • UseDataNotOk
• Masks
  • Mask edge scoop
  • Mask edge scalloped
  • Mask edge drip
  • Mask edge zig-zag
  • Mask corner cut circles
  • Mask corner cut squares
  • Mask corner cut angles

What do you think of having the atomic class prefix be configurable via the preset, but we also provide a default to op

Sounds good!

Everything in the comment is on point 🤘💀
Have fun transforming

@argyleink I'm unable to continue work on the Uno preset. I have stretched myself too thin time wise. I'm so sorry for committing and not being able to finish it :-(
Same goes for the work on #25 (comment)

No worries @bjorntheart, appreciate the honesty and I'm very familiar with the feeling.

@argyleink I've thought about this a lot, and found a way forward where I can still contribute, but not neglect my responsibilities at home.
Sorry for the back and forth on this, but I'm figuring it out as I go. I'm quite new to contributing to open-source.

I'll pick this up again :-)