open-props

CHANGELOG Copy Section

Changelog Copy Section

All notable changes to this project will be documented in this file. Dates are displayed in UTC.

Generated by auto-changelog.

#### v1.7.23

31 January 2026

- Add commit message input to version-bump workflow #585
- ✂️ 1.7.23 74515a5

#### v1.7.22

31 January 2026

- Add id-token permission to version-bump workflow #584
- Add TypeScript types to submodule exports #582
- [WIP] Fix issue with npm_publish workflow not triggering #583
- ✂️ 1.7.22 ef7acc0

#### v1.7.21

31 January 2026

- Add non-adaptive shadows.light.min.css and shadows.dark.min.css exports #580
- Inject docsite version from package.json at build time #578
- ✂️ 1.7.21 1368169

#### v1.7.20

31 January 2026

- build and action fixes a547335
- ✂️ 1.7.20 6a208d1

#### v1.7.19

31 January 2026

- Add workflow_dispatch action for version bumping #577
- Update NPM Publish workflow to latest action versions #576
- chore: bump version to 1.7.19 1f63fef

#### v1.7.18

30 January 2026

- Add new resolver tokens to docs #575
- Add interactive shadow playground and fix shadow CSS regression #573
- Add interactive duration documentation with animated demo #574
- Support shadows in design tokens #570
- Group design tokens #569
- Support fonts in design tokens resolver #568
- feat: add palette file, add palette tests #566
- Support latest design tokens specification #567
- ✂️ v1.7.18 1c10c5f

#### v1.7.17

1 December 2025

- fix(duration): add missing semicolon #564
- Fix: restore newline so logo renders properly in README #560
- ✂️ v1.7.17 5a79f44

#### v1.7.16

10 July 2025

- Add Robert Penner's easing functions (#526) #559
- ✂️ v1.7.16 with classic easing variables, thx #559! 5d458d2

#### v1.7.15

8 April 2025

- feat: auto-upgrade gradients to oklab and HDR (#397) #554
- Optimizing the mask gradients #553
- add animation durations #550
- Added flinch to durations.css #548
- fix: add missing size-px props to style-dictionary-tokens #543
- fix(normalize): use surface-3 on tr:hover #544
- chore: document theme switch imports #540
- Fix: Ensure consistent fonts and correct usage of --font-monospace-code #542
- Add text-decoration: none to .btn links for better styling #538
- chore: add field-sizing to select and textarea #535
- Add social media brand colors pack (Closes #471) #520
- Fix typo in index.html - ease-elastic-out-3 #516
- fix docsite font-size-fluid variables #508
- Add Modern Font Stacks #498
- Drawn Borders #496
- add px-based sizes #493
- Remove anchor link focus padding #492
- add shake-z animation #489
- Fix media queries "-only" breakpoints bug and update documentation #488
- Assorted typos #487
- add from-one class to size and box-shadow demos #482
- Fix Gradient Docs #480
- Implement clickable color swatches to copy color props to clipboard #476
- Fix the broken link for durations.css #477
- durations.css – correct leap-year duration; introduce olympiad #475
- Add script to generate bundle sizes #474
- docs: configure Open Graph metadata properly #472
- feat(media): add inverted colors custom media query #469
- undo part of 327a70f (#392) to fix #455 to make figma-tokens plugin work again #456
- fix: naming to --animation-slide-in-up #452
- bookmarklet suggestion #447
- feat(custom-media): add --forcedColors to the custom media queries list #445
- fix(customMQ): extend --HDcolor media query with color-gamut check #444
- fixes #440 #441
- Chore: add width: fit-content to a tag #436
- fix(props.js): prefix mask individual props file names as all others #435
- Style dictionary tokens #433
- Bounce easings #430
- fix referencing of elastic easing #428
- fixes #425 #426
- Created durations.css to address #415; #424
- Add social media brand colors pack (Closes #471) (#520) #471 #471
- Add Modern Font Stacks (#498) #500
- undo part of 327a70f (#392) to fix #455 to make figma-tokens plugin work again (#456) #455
- fixes #440 (#441) #440
- fixes #298 #298
- fixes #425 (#426) #425
- [docsite] update vite, remove @nest ff5efea
- 📖 v1.6.10 - adds style dictionary json 62317b4
- v1.6.5 text color improvements to normalize e297950

#### v1.6.0

29 September 2023

- v1.6 #421
- balance figcaptions #418
- custom plugin to combine rules #412
- fix typo #413
- adds inner-shadow-highlight variable to inner shadow 1-4 #399
- fix breaking centered text-alignment for td, th #400
- restore #408
- fixes #310 #395
- Table styles #394
- Spring Easings ⚽️ #387
- add text-wrap: balance; #382
- add relative sizes to OP #370
- fix inconsistent quotes #377
- fix #375 #376
- Text cursor on text inputs #368
- Fix documentation for postcss JIT plugin in CSS mode #369
- Fix accessibility issues on theme toggle button #365
- fixes #310 (#395) #310
- Table styles (#394) #319
- fixes #392 #392
- fixes #386 #386
- fixes #385 #385
- fix #375 (#376) #375
- Text cursor on text inputs (#368) #366
- fixes #364 #364
- bug fix for bright oklch color f7fe070
- cut v1.5.16 ✂️ a641661
- ✂️ v1.5.15 dd553ca

#### v1.5.1

30 March 2023

- init build process #360
- op-logo-svg-fix #359
- chore: include color helper #355
- typescript part 2: electric boogaloo #338
- add TS support, cleans up modules #335
- docs: autocomplete instructions in Sublime Text #330
- Fix redundant selectors in normalize #331
- Add missing exports for masks and media js files #326
- update autocomplete settings #323
- fixes #353 #353
- fixes #327 #327
- updates color demos to align with codepen updates b22fe8e
- cut v1.5.1 - esm custom media 8e54deb
- cut v1.5.7 🎨 19690a1

#### v1.5.0

20 November 2022

- v1.5.0 #317
- Fix range padding #309
- fix dark and light normalize #302
- animate outline offset for buttons #301
- v1.5.0 (#317) #232 #296 #316
- cut v1.4.25, fixes #312 #312
- fix dark and light normalize (#302) #299
- cuts v1.4.20 with dark mode fixes 340f141
- fixes icons after normalize update 21859f3
- cut v1.4.19 0e0cfe4

#### v1.4.17

28 October 2022

- normalize light and dark imports #285
- Update VScode instruction #293
- docs: update pos-css link with new repo #292
- Fix #278 and extend with --firefoxMacONLY, --chromiumONLY, --webkitONLY #280
- fixes #283 #284
- fixes #277 #279
- replace single '' with \"\"in build scripts #282
- A tiny update to the scooped edges #269
- color-scheme adaptive fade-in/out-bloom #268
- Better syntax for the corner cuts #265
- fade-in-bloom and fade-out-boom for #255 #260
- Optimizing the Scalloped edges #262
- Small typo in the Doc #261
- Optimizing the Drips edges + minor updates #259
- Optimization for the mask edges #258
- Optimizing the code of square cut a little #257
- Masks #126
- fix: vscode-cssvar documentation for setting example #256
- fixes #245 #246
- renamed --scrollbar-color to --scrollthumb-color and set grays that pass WCAG AA contrast ratios with surfaces in dark and light modes #243
- Fix #278 and extend with --firefoxMacONLY, --chromiumONLY, --webkitONLY (#280) #278
- fixes #283 (#284) #283
- fixes #277 (#279) #277 #277
- fixes #276 #276
- fixes #266 #266
- fixes #253, cut release #253
- fixes #252 #252
- fixes #245 (#246) #245 #245
- document new bloom animations 28606ed
- ready for simple file mods b4ec9c6
- fixes masks having :host as selector 94fed77

#### v1.4.0

1 July 2022

- Shadow DOM builds #241
- Shadow DOM builds (#241) #240
- push lock for ci builds c1bbf3d
- fixes build machines running out of memory during bundling a04a090
- updates job script to latest 35e8c25

#### v1.3.16

1 June 2022

- update cssnano #235
- Add unnecessary config files to the .npmignore & change logo alt text #226
- fixes #227 #228
- Add .github and .firebaserc to .npmignore #224
- Adjust build script to improve readability #221
- Jit props dark adaptive props #220
- fixes #211 #219
- fixes #216 #218
- Made the scrollnav bar work on firefox #210
- fixes #188 #206
- Update gradient import in docs #198
- Fix build on windows devices #193
- fix to draft spec #196
- Object accessor DX #190
- add src/ folder to package.json exports #187
- fixes #180 #181
- Fix typo #179
- DOCS: Fix counters in Firefox #177
- update colors-hsl usage in docs #176
- HSL for all colors #171
- remove vertical-align as it doesn't apply on display: block-elements #172
- Fix missing anchor in footer-link #170
- Extras buttons.min.css #154
- Add t-shirt size props to sizes #164
- fixes #125 #162
- fix: Update props.animations formatting #157
- normalize iOS safari landscape body font size #151
- Update readme to reflect all categories #147
- generate JSON for figma-tokens plugin to use #144
- fix: shadow counter on firefox #145
- Bugfix/responsiveness site #142
- docs: add autocomplete guidelines for users that use VScode as their primary IDE #130
- Jit animations fix #138
- Updating tabindex selector to exclude negative values #134
- fix a custom proprty in usage field #131
- fix subheading background gradient #132
- Design token color types #123
- Import JSON #97
- Proposed edits to docsite copy #91
- Fix typo: provie => provide #90
- removes supports vars #88
- Fix typo where "CSS plugin" should be "PostCSS plugin" IMHO #82
- fixes #227 (#228) #227
- fixes #211 (#219) #211
- fixes #216 (#218) #216
- fixes #215 #215
- fixes #188 (#206) #188
- fixes #200 #200
- Object accessor DX (#190) #189
- fixes #182 #182
- fixes #180 (#181) #180 #180
- fixes #174 #174
- fixes #146 #146
- fixes #158 #158
- fixes #125 (#162) #125 #125
- fixes #149 #149
- fixes #143 #143
- Design token color types (#123) #111
- fixes #81 #81
- fixes #110 #110
- fixes #96 - plus some #96
- removes supports vars (#88) #77 #85
- fixes #76 #76
- removes the 3 unused mixins cdd45bc
- docsite fixes and nudges to demos a858c03
- fool microbundle a1ae306

v1.0.0 v1.0.0')" title="Copy section prompt for LLMs"> Copy Section

29 November 2021

- Create LICENSE #59
- Custom highlighting #58
- Scroll Spy #53
- fixes #54 #55
- Deploy to Firebase #52
- Theme toggle #42
- Responsive radii #37
- [WIP] Generate CSS from JS objects #32
- Docsite #22
- fixes #54 (#55) #54 #54
- fixes #45 #45
- fixes #50 #50
- fixes #49 #49
- fixes #47 #47
- fixes #38 #38
- fixes #40 #40
- fixes #8 #8
- fixes #34 #34
- Responsive radii (#37) #36
- fixes #9 #9
- microbundle props to JS for JS delivery #1
- fixes #12 #12
- fixes #7 #7
- adds tests and test workflow 467acb2
- use lib from npm 61567de
- deploy to firebase d9a1672

#### v0.0.2

10 September 2021

- adds builds 8efac23
- Initial commit 0cd8de4
- adds colors from open-colors project 9368ef1

---

Readme Copy Section

<div align="center">

Open Source CSS Variables Copy Chapter

[](https://github.com/argyleink/open-props/actions/workflows/tests.yml)
[](https://npmjs.org/package/open-props)

<br>

Need help? &nbsp; 👉 &nbsp; Discord Discord ')" title="Copy section prompt for LLMs"> Copy Section

<br>

#### 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

#### Testing

npm run build && npm run bundle
npm test

---