v0.8.0

Updated open-props to 1.7.7 (thanks @Leftium). This release includes new variables for px-based sizes, system font stacks, brand colors, and more.

@use 'open-props-scss' as op;

.foo {
  font-family: op.$font-industrial;
  min-block-size: op.$size-px-5;
  background-color: op.$brand-discord;
}

See all generated .scss files on npm.

_{Full source diff: v0.7.1...v0.8.0}

v0.7.1

fixed missing internal inner-shadow-highlight variable in the shadows module.

v0.7.0

This release adds support for animations, thanks to @woodcox.

Animations are made available as mixins rather than variables.

@use 'open-props-scss' as op;

button {
  @include op.scale-up;
}

Some animations (e.g. fade-in-bloom and fade-out-bloom) also have a dark theme version, which can be included by passing a dark argument to the mixin.

section {
  @include op.fade-in-bloom(dark);
}

v0.6.0

This release adds support for oklch colors, thanks to @woodcox

To use, import /colors-oklch.scss, then use the variables like you normally would.

@import 'open-props-scss/colors-oklch.scss' as oklch;

button {
  background: oklch.$purple-3;
  color: oklch.$purple-13;
}

Also, open-props has been bumped to the latest version, which includes some new relative sizes.

Full Changelog: v0.5.0...v0.6.0

v0.5.0

This release includes a few big improvements!

• Instead of one big index.scss, the props are now split up into several files and forwarded in the index. This makes it possible to only import some of the props if needed.

  @use 'open-props-scss/media.scss';
  @media (media.$OSdark) { /* ... */ }

• Breaking: Light and dark shadows are now exposed through a shadow() function and the shadow color/strength can be customized.

  @use 'open-props-scss' as op;
  
  .somewhere {
    box-shadow: op.shadow(1);
    // box-shadow: op.shadow('inner-3', dark);
    // box-shadow: op.shadow(5, $shadow-color: var(--my-shadow-color));
  }

• Fixed an issue where $radius-conditional- props were referencing a non-existent CSS variable.

---

Huge thanks to @woodcox for contributing all of these changes.

Full diff: v0.4.1...v0.5.0

v0.4.1

Fixed sass console warnings about / being deprecated (#4). This was done by using list.slash in the aspect ratio variables.

$ratio-square: 1;
$ratio-landscape: list.slash(4,3);
$ratio-portrait: list.slash(3,4);
$ratio-widescreen: list.slash(16,9);
$ratio-ultrawide: list.slash(18,5);
$ratio-golden: list.slash(1.6180,1);

See details: https://sass-lang.com/documentation/breaking-changes/slash-div

v0.4.0

Masks have been reintroduced 😷

A previous release inadvertently removed masks. They have now been added back and can be found under the $mask- prefix. Remember to use autoprefixer/lightningcss or manually add the -webkit-mask property when using masks.

.foo {
  -webkit-mask: $mask-corner-cut-angles-2;
  mask: $mask-corner-cut-angles-2;
}

See open-props documentation: https://open-props.style/#masks

v0.3.0

Media queries are now available 🚀

@use 'open-props-scss' as op;

@media (op.$OSdark) { ... } // (prefers-color-scheme: dark)
@media (op.$highContrast) { ... } // (prefers-contrast: more)
@media (op.$touch) { ... } // (hover: none) and (pointer: coarse)
@media (op.$motionOK) { ... } // (prefers-reduced-motion: no-preference)
// ...etc

v0.2.0

All variables now follow the same kebab-case format as documented on open-props.style instead of camelCase.

- font-family: op.$fontSans;
+ font-family: op.$font-sans;

v0.1.1

Initial release 🎉

Includes all props except any at-rules and animations (because those cannot be easily assigned to Sass variables).