Add negative sizes as a prop pack

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));
+}

css/packs/negative-sizes/index.css

@@ -0,0 +1,3 @@
+@import 'size.css';
+@import 'fluid.css';
+@import 'relative.css';

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;
+}

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;
+}

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,

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,
+}