diff --git a/css/packs/negative-sizes/fluid.css b/css/packs/negative-sizes/fluid.css new file mode 100644 index 00000000..ce9f2d22 --- /dev/null +++ b/css/packs/negative-sizes/fluid.css @@ -0,0 +1,6 @@ +:where(:root) { + --font-size-fluid-0-: calc(-1 * var(--font-size-fluid-0)); + --font-size-fluid-1-: calc(-1 * var(--font-size-fluid-1)); + --font-size-fluid-2-: calc(-1 * var(--font-size-fluid-2)); + --font-size-fluid-3-: calc(-1 * var(--font-size-fluid-3)); +} diff --git a/css/packs/negative-sizes/index.css b/css/packs/negative-sizes/index.css new file mode 100644 index 00000000..812743ed --- /dev/null +++ b/css/packs/negative-sizes/index.css @@ -0,0 +1,3 @@ +@import 'size.css'; +@import 'fluid.css'; +@import 'relative.css'; diff --git a/css/packs/negative-sizes/relative.css b/css/packs/negative-sizes/relative.css new file mode 100644 index 00000000..4ae3b893 --- /dev/null +++ b/css/packs/negative-sizes/relative.css @@ -0,0 +1,17 @@ +:where(:root) { + --size-relative-1-: -0.25ch; + --size-relative-2-: -0.5ch; + --size-relative-3-: -1ch; + --size-relative-4-: -1.25ch; + --size-relative-5-: -1.5ch; + --size-relative-6-: -1.75ch; + --size-relative-7-: -2ch; + --size-relative-8-: -3ch; + --size-relative-9-: -4ch; + --size-relative-10-: -5ch; + --size-relative-11-: -7.5ch; + --size-relative-12-: -10ch; + --size-relative-13-: -15ch; + --size-relative-14-: -20ch; + --size-relative-15-: -30ch; +} diff --git a/css/packs/negative-sizes/size.css b/css/packs/negative-sizes/size.css new file mode 100644 index 00000000..f33ac542 --- /dev/null +++ b/css/packs/negative-sizes/size.css @@ -0,0 +1,17 @@ +:where(:root) { + --size-1-: -0.25rem; + --size-2-: -0.5rem; + --size-3-: -1rem; + --size-4-: -1.25rem; + --size-5-: -1.5rem; + --size-6-: -1.75rem; + --size-7-: -2rem; + --size-8-: -3rem; + --size-9-: -4rem; + --size-10-: -5rem; + --size-11-: -7.5rem; + --size-12-: -10rem; + --size-13-: -15rem; + --size-14-: -20rem; + --size-15-: -30rem; +} diff --git a/js/index.js b/js/index.js index 7ebebfb9..0a81e004 100644 --- a/js/index.js +++ b/js/index.js @@ -1,5 +1,6 @@ import Animations from './motion/animations.js' import Sizes from './sizes.js' +import NegativeSizes from './packs/negative-sizes.js' import ColorsHex from './color/colors.hex.js' import ColorsHSL from './color/colors.hsl.js' import Palette from './color/palette.oklch.js' @@ -19,6 +20,7 @@ import MaskCornerCuts from './masks/corner-cuts.js' export default { Animations, Sizes, + NegativeSizes, ColorsHex, ColorsHSL, Palette, diff --git a/js/packs/negative-sizes.js b/js/packs/negative-sizes.js new file mode 100644 index 00000000..565cbad7 --- /dev/null +++ b/js/packs/negative-sizes.js @@ -0,0 +1,13 @@ +import { Fluid, Relative, Size } from '../sizes.js' + +export const NegativeSize = Size.map((size) => `-${size}`) + +export const NegativeRelative = Relative.map((size) => `-${size}`) + +export const NegativeFluid = Fluid.map((size) => `calc(-1 * ${size})`) + +export default { + NegativeSize, + NegativeRelative, + NegativeFluid, +}