Releases: mayank99/open-props-scss
v0.7.1
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;