argyleink / open-props

CSS custom properties to help accelerate adaptive and consistent design.

Open Source CSS Variables

colors gradients shadows aspect ratios typography
easings animations sizes borders z-indexes media-queries

Need help?   👉   Discord

CDN (browse)

• https://unpkg.com/open-props
• https://unpkg.com/open-props/normalize.min.css - Normalize (light + dark) demo
• https://unpkg.com/open-props/open-props.tokens.json - Design Tokens
• https://unpkg.com/open-props/open-props.figma-tokens.sync.json - Figma Design Tokens
• https://unpkg.com/open-props/open-props.style-dictionary-tokens.json - Style Dictionary Tokens

Bookmarklet

javascript: (() => {
  const href = "https://unpkg.com/open-props";
  document.head.append(Object.assign(document.createElement("link"),{rel:"stylesheet",href}));
})();

CLI

• npm run gen:op - runs through src/ js files and creates the PostCSS files in src/
• npm run gen:nowhere - creates a version of Open Props without the use of :where()
• npm run gen:shadowdom - creates a version of Open Props with :host as the selector scope
• npm run gen:prefixed - creates a version of Open Props with each prop prefixed with op, like --op-font-size-1
• npm run bundle - creates all the various minified bundles of props
• npm run lib:js - builds the JS modules for NPM

open-props's Issues

`normalize.css` demo page

something between the html5 test page and an actually semi-designed page

• should showcase web elements
• should showcase light/dark theme
• should explain reasons for many of the opinionated reset choices

Add responsive/conditional radii

https://ishadeed.com/article/conditional-border-radius/

--radii-conditional-1: clamp(0px, ((100vw - 4px) - 100%) * 9999, 8px);

Optional property namespaced version

--op-${whatever} so that it can comingle with other props better

Installation sections should use <details> element

this will drastically cut down on cognitive overload in this sections

Figma plugin to add colors and sizes for the designer

Add `drop-shadow` to shadows

More color scheme examples

grab n go files
codepen examples

Readme marketing treatment

visual regression testing

even if for now it screenshots the test index page and compares a PR against it. it'd be testing the reset mostly, so it'd be more like an e2e test, but that's coo until something stronger get's built.

Update theme switch aria

role="switch" on the button instead, with aria-checked toggled to on or off

Gen props from a javascript object

see https://github.com/tailwindlabs/tailwindcss/blob/master/colors.js

open-props is already generating props for conics and colors, this just leans into the js base objects even more. it also unlocks the ability for devs to provide their own js objects.

Add way to change linear gradient direction

something like?

.box {
  --op-gradient-direction: to bottom right;
  background-image: var(--gradient-1);
}

Create some go-to codepen components with it

Nice looking sandboxes and playgrounds

Headline ideas

what's the one thing that's most valuable about open props?

Accessibility color pass

light theme mostly

Scrollspy

Navbar links should highlight when you're within each section

Offer versions without `:where()`

Semver publishing with GH actions

currently manually pushing builds. dont really care for now, but tracking it'd be nice to automate by the time this goes live.

PR awesome-css-frameworks

https://github.com/troxler/awesome-css-frameworks

see if this fits anywhere on there!

Theming

light and dark custom theme examples for designcember

Automate bundle size report in docsite

not so bad manually compressing and updating values, but would be sweet to automate the lib sizes and feed them into a build system

launch December 1st

Add one more level of raised shadow

Remove SVG

put grain work into gradients and see if there's actual path data worth stashing in this svg file for use in d

Guides section

How to's with open-props:

• light, dark, dim themes
• dense, loose spacing themes
• use with sprinkles
• use with tailwind
• use with something else?

what other guides should we be looking to have ready?

Motivations and why blog post

Document conditional border radii

Bundles need selector grouping/merging

the props.css bundle ships the selector html {} or :where(html) {} for each imported prop pack. optimally, these would be merged for production and share selectors.

maybe it's an optional build time flag to flip on? it sounds aggressive, so maybe that's why it's off by default?

Social embed meta

img, description, etc

reset stylesheet should ship normal looking links

the hotpink links are a bit much, instead:

• use pinks as visited links
• use the standard dark and light theme blue from browsers (light: hsl(240 100% 47%), dark: hsl(240 100% 81%))
• provide HD upgraded display-p3 colors

Make a discord or slack server

Easings demos need play/pause button

use astro to build docsite

currently using vite and a single html and css file. would be nice to break out sections into astro components, with scoped generated classnames. hosting on firebase with PR actions would be sweet too =)

Add section between getting started and opening marketing sections

something like this. it's primo components to build with open props too.

Document individual color imports

touch action props?

they're hard to remember, and sorta act opposite than what you think. we could provide named aliases for "sets" or "certain functionality" that makes it much easier to drop these in.

.map {
  touch-action: var(--touch-action-custom-touch-y-handling);
}

rename `radii` to `radius`

• term is more common
• most other props arent plural prefixed
• it's still not much to write

Datavis color set

this needed or can be accomplished with the current colors?

Colors: consider making a stylesheet for each set so they can be snagged a-la-carte

of course, still offer an entry file that bundles all of theme into colors.css, but also provide pieces.

Docs: help folks setup autocomplete for variables

VScode lets you point to files, could have them point to props.css in the npm module or remote file?

Add radial gradients

especially opposing corner radials

icons

https://preview.icon.kitchen/

test out using a multiplier in the fluid sizes

some of the fluid sizes do most their scaling in the lower widths, while others in the larger widths. using a multiplier in the equation could enable controlling these flow points better, for hopefully a more linear experience between lower and upper bounds.

--font-size-fluid-1: clamp(1rem, 2vw, 1.5rem);

/* becomes */
--fluidity: 2vw;
@media (min-width: 1024px) { --fluidity: 4vw }

--font-size-fluid-1: clamp(1rem, var(--fluidity), 1.5rem);

too much? the fluid props are really fun to use, but i feel it needs a tiny bit more variety and a bit more consistency.

Sliders should show the value

as you scrub you need to know which number you're at

optimize `normalize.css`

there's room to run minifiers heavy on it, so like all border-radius's assignments to the same value are 1 merged selector

Publish to Github Packages

similar to the npm action

Typography vars naming

I've always disliked using kerning and leading for web vars.. it's not really those.. The "make this a webby library" part of my goals makes me want to name them line height and letter spacing, but the industry has been using the traditional typography names for years.

thoughts?

Consolidate gradients

devs shouldnt even know whether or not this lib provided a conic, linear or radial gradient right? if the primary use case will be "let me try on all 30 of these and see which i like", why not offer less gradients at better quality.

Current: 90 gradients, 30 radial (todo), 30 linear, 30 conic
Proposed: 30 gradients, the best of the bunch (prolly mostly conics, some opposing radial gradients, and a few linear ones)

mobile alignment issue

Add dark/light clientside theme switcher

consider Steiners great work here https://github.com/GoogleChromeLabs/dark-mode-toggle