release: version 2025.1.24 (#63)

Sarmaged · web-flow · commit 40b82fc7b436 · 2025-01-24T12:49:02.000+03:00
diff --git a/helpers.css b/helpers.css
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "style-forge.helpers",
-  "version": "2025.1.22",
+  "version": "2025.1.24",
   "description": "Style-Forge.Helpers: essential CSS helper classes for spacing, alignment, visibility, and more in web development.",
   "type": "module",
   "main": "helpers.css",
diff --git a/src/all.css b/src/all.css
@@ -1,4 +1,4 @@
-@import './units/all.css';
+@import './var.css';
 
 @import './columns/all.css';
 
diff --git a/src/border.css b/src/border.css
@@ -1,7 +1,3 @@
-:root {
-  --sf-bd-w: 1px;
-}
-
 .bd\:c\:i { border-color: inherit }
 .bd\:c\:ii { border-color: initial }
 
diff --git a/src/gap.css b/src/gap.css
@@ -1,8 +1,3 @@
-:root {
-  --sf-gap-x: var(--sf-em-sm);
-  --sf-gap-y: var(--sf-em-sm);
-}
-
 /* flex */
 .d\:f, .d\:f\:x, .d\:f\:y {
   row-gap: var(--sf-gap-y);
diff --git a/src/margin.css b/src/margin.css
@@ -1,12 +1,3 @@
-:root {
-  --sf-margin: var(--sf-em-sm);
-
-  --sf-margin-xs: var(--sf-em-xs);
-  --sf-margin-md: var(--sf-em-md);
-  --sf-margin-lg: var(--sf-em-lg);
-  --sf-margin-xl: var(--sf-em-xl);
-}
-
 .m, .\$m > * { margin: var(--sf-margin) }
 .m\:a, .\$m\:a > * { margin: auto }
 .m\:0, .\$m\:0 > * { margin: 0 }
diff --git a/src/outline.css b/src/outline.css
@@ -1,7 +1,3 @@
-:root {
-  --sf-ol-w: 1px;
-}
-
 .ol\:c\:i { outline-color: inherit }
 .ol\:c\:ii { outline-color: initial }
 
diff --git a/src/padding.css b/src/padding.css
@@ -1,12 +1,3 @@
-:root {
-  --sf-padding: var(--sf-em-sm);
-
-  --sf-padding-xs: var(--sf-em-xs);
-  --sf-padding-md: var(--sf-em-md);
-  --sf-padding-lg: var(--sf-em-lg);
-  --sf-padding-xl: var(--sf-em-xl);
-}
-
 .p, .\$p > * { padding: var(--sf-padding) }
 .p\:0, .\$p\:0 > * { padding: 0 }
 .p\:xs, .\$p\:xs > * { padding: var(--sf-padding-xs) }
diff --git a/src/radius.css b/src/radius.css
@@ -1,13 +1,3 @@
-:root {
-  --sf-radius: var(--sf-em-sm);
-
-  --sf-radius-xxs: var(--sf-em-xxs1);
-  --sf-radius-xs: var(--sf-em-xs);
-  --sf-radius-md: var(--sf-em-md);
-  --sf-radius-lg: var(--sf-em-lg);
-  --sf-radius-xl: var(--sf-em-xl);
-}
-
 .radius:not(html) { border-radius: var(--sf-radius) }
 .radius\:xxs { border-radius: var(--sf-radius-xxs) }
 .radius\:xs { border-radius: var(--sf-radius-xs) }
diff --git a/src/scroll.css b/src/scroll.css
@@ -1,12 +1,3 @@
-:root {
-  --sf-scroll: var(--sf-em-md);
-
-  --sf-scroll-xs: var(--sf-em-xs);
-  --sf-scroll-sm: var(--sf-em-sm);
-  --sf-scroll-lg: var(--sf-em-lg);
-  --sf-scroll-xl: var(--sf-em-xl);
-}
-
 .sb\:a { scroll-behavior: auto }
 .sb\:s { scroll-behavior: smooth }
 
diff --git a/src/text.css b/src/text.css
@@ -1,47 +1,3 @@
-:root {
-  --sf-lh: 0.8;
-  --sf-lh-normal: 1.1875;
-
-  --sf-ff-sans: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --sf-ff-serif: Times, 'Times New Roman', Georgia, serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --sf-ff-monospace: 'Lucida Console', Courier, monospace, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --sf-ff-cursive: cursive;
-  --sf-ff-fantasy: fantasy;
-  --sf-ff-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', emoji;
-  --sf-ff-math: math;
-  --sf-ff-fangsong: fangsong;
-
-  --sf-fz: 1rem;
-  --sf-fz-0: 0;
-  --sf-fz-bold: 1rem;
-
-  --sf-fz-h1: 3rem;
-  --sf-fz-h2: 2.5rem;
-  --sf-fz-h3: 2rem;
-  --sf-fz-h4: 1.5rem;
-  --sf-fz-h5: 1.25rem;
-  --sf-fz-h6: 1rem;
-
-  --sf-fz-small: 0.75rem; /* 12 */
-  --sf-fz-small-1: 0.9375rem; /* 15 */
-  --sf-fz-small-2: 0.875rem; /* 14 */
-  --sf-fz-small-3: 0.8125rem; /* 13 */
-  --sf-fz-small-4: 0.75rem; /* 12 */
-  --sf-fz-small-5: 0.6875rem; /* 11 */
-  --sf-fz-small-6: 0.625rem; /* 10 */
-
-  --sf-fw: 400;
-  --sf-fw-bold: 600;
-  --sf-fw-small: 300;
-
-  --sf-fw-h1: 700;
-  --sf-fw-h2: 700;
-  --sf-fw-h3: 700;
-  --sf-fw-h4: 600;
-  --sf-fw-h5: 600;
-  --sf-fw-h6: 600;
-}
-
 .ff\:sans { font-family: var(--sf-ff-sans) }
 .ff\:serif { font-family: var(--sf-ff-serif) }
 .ff\:monospace { font-family: var(--sf-ff-monospace) }
@@ -110,12 +66,13 @@
 .fz\:bold { font-size: var(--sf-fz-bold) }
 
 .fz\:small { font-size: var(--sf-fz-small) }
-.fz\:small\:1 { font-size: var(--sf-fz-small-1) }
-.fz\:small\:2 { font-size: var(--sf-fz-small-2) }
-.fz\:small\:3 { font-size: var(--sf-fz-small-3) }
-.fz\:small\:4 { font-size: var(--sf-fz-small-4) }
-.fz\:small\:5 { font-size: var(--sf-fz-small-5) }
-.fz\:small\:6 { font-size: var(--sf-fz-small-6) }
+
+.fz\:15 { font-size: var(--sf-fz-15) }
+.fz\:14 { font-size: var(--sf-fz-14) }
+.fz\:13 { font-size: var(--sf-fz-13) }
+.fz\:12 { font-size: var(--sf-fz-12) }
+.fz\:11 { font-size: var(--sf-fz-11) }
+.fz\:10 { font-size: var(--sf-fz-10) }
 
 .ta\:l, .\$ta\:l > * { text-align: start }
 .ta\:c, .\$ta\:c > * { text-align: center }
diff --git a/src/var.css b/src/var.css
@@ -0,0 +1,86 @@
+@import './units/all.css';
+
+:root {
+  /* border */
+  --sf-bd-w: 1px;
+
+  /* outline */
+  --sf-ol-w: 1px;
+
+  /* gap */
+  --sf-gap-x: var(--sf-em-sm);
+  --sf-gap-y: var(--sf-em-sm);
+
+  /* margin */
+  --sf-margin: var(--sf-em-sm);
+  --sf-margin-xs: var(--sf-em-xs);
+  --sf-margin-md: var(--sf-em-md);
+  --sf-margin-lg: var(--sf-em-lg);
+  --sf-margin-xl: var(--sf-em-xl);
+
+  /* padding */
+  --sf-padding: var(--sf-em-sm);
+  --sf-padding-xs: var(--sf-em-xs);
+  --sf-padding-md: var(--sf-em-md);
+  --sf-padding-lg: var(--sf-em-lg);
+  --sf-padding-xl: var(--sf-em-xl);
+
+  /* radius */
+  --sf-radius: var(--sf-em-sm);
+  --sf-radius-xxs: var(--sf-em-xxs1);
+  --sf-radius-xs: var(--sf-em-xs);
+  --sf-radius-md: var(--sf-em-md);
+  --sf-radius-lg: var(--sf-em-lg);
+  --sf-radius-xl: var(--sf-em-xl);
+
+  /* scroll */
+  --sf-scroll: var(--sf-em-md);
+  --sf-scroll-xs: var(--sf-em-xs);
+  --sf-scroll-sm: var(--sf-em-sm);
+  --sf-scroll-lg: var(--sf-em-lg);
+  --sf-scroll-xl: var(--sf-em-xl);
+
+  /* text */
+  --sf-lh: 0.8;
+  --sf-lh-normal: 1.1875;
+
+  --sf-ff-sans: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --sf-ff-serif: Times, 'Times New Roman', Georgia, serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --sf-ff-monospace: 'Lucida Console', Courier, monospace, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --sf-ff-cursive: cursive;
+  --sf-ff-fantasy: fantasy;
+  --sf-ff-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', emoji;
+  --sf-ff-math: math;
+  --sf-ff-fangsong: fangsong;
+
+  --sf-fz: 1rem;
+  --sf-fz-0: 0;
+  --sf-fz-bold: 1rem;
+
+  --sf-fz-h1: 3rem;
+  --sf-fz-h2: 2.5rem;
+  --sf-fz-h3: 2rem;
+  --sf-fz-h4: 1.5rem;
+  --sf-fz-h5: 1.25rem;
+  --sf-fz-h6: 1rem;
+
+  --sf-fz-small: 0.75rem;
+
+  --sf-fz-15: 0.9375rem;
+  --sf-fz-14: 0.875rem;
+  --sf-fz-13: 0.8125rem;
+  --sf-fz-12: 0.75rem;
+  --sf-fz-11: 0.6875rem;
+  --sf-fz-10: 0.625rem;
+
+  --sf-fw: 400;
+  --sf-fw-bold: 600;
+  --sf-fw-small: 300;
+
+  --sf-fw-h1: 700;
+  --sf-fw-h2: 700;
+  --sf-fw-h3: 700;
+  --sf-fw-h4: 600;
+  --sf-fw-h5: 600;
+  --sf-fw-h6: 600;
+}

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "style-forge.helpers",`
`3`		`- "version": "2025.1.22",`
	`3`	`+ "version": "2025.1.24",`
`4`	`4`	`"description": "Style-Forge.Helpers: essential CSS helper classes for spacing, alignment, visibility, and more in web development.",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "helpers.css",`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import './units/all.css';`
	`1`	`+@import './var.css';`
`2`	`2`
`3`	`3`	`@import './columns/all.css';`
`4`	`4`