From 06c068efb535acff55201716c3f265b530068518 Mon Sep 17 00:00:00 2001 From: Felix Date: Tue, 3 Dec 2024 09:47:24 +0100 Subject: [PATCH 1/6] feat(negative-sizes): add negative versions of fluid, relative, sizes --- css/packs/negative-sizes/fluid.css | 12 ++++++++++++ css/packs/negative-sizes/index.css | 3 +++ css/packs/negative-sizes/relative.css | 17 +++++++++++++++++ css/packs/negative-sizes/size.css | 17 +++++++++++++++++ 4 files changed, 49 insertions(+) create mode 100644 css/packs/negative-sizes/fluid.css create mode 100644 css/packs/negative-sizes/index.css create mode 100644 css/packs/negative-sizes/relative.css create mode 100644 css/packs/negative-sizes/size.css diff --git a/css/packs/negative-sizes/fluid.css b/css/packs/negative-sizes/fluid.css new file mode 100644 index 00000000..2e6a0d30 --- /dev/null +++ b/css/packs/negative-sizes/fluid.css @@ -0,0 +1,12 @@ +:where(:root) { + --size-fluid-1-: clamp(-1rem, -1vw, -0.5rem); + --size-fluid-2-: clamp(-1.5rem, -2vw, -1rem); + --size-fluid-3-: clamp(-2rem, -3vw, -1.5rem); + --size-fluid-4-: clamp(-3rem, -4vw, -2rem); + --size-fluid-5-: clamp(-5rem, -5vw, -4rem); + --size-fluid-6-: clamp(-7.5rem, -7vw, -5rem); + --size-fluid-7-: clamp(-10rem, -10vw, -7.5rem); + --size-fluid-8-: clamp(-15rem, -20vw, -10rem); + --size-fluid-9-: clamp(-20rem, -30vw, -15rem); + --size-fluid-10-: clamp(-30rem, -40vw, -20rem); +} 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; +} From 6a72f7082d37c69051983b0eeaeec43328f61f4d Mon Sep 17 00:00:00 2001 From: Felix Date: Wed, 4 Dec 2024 09:17:23 +0100 Subject: [PATCH 2/6] feat(negative-sizes): add js files --- js/index.js | 2 ++ js/packs/negative-sizes.js | 54 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 56 insertions(+) create mode 100644 js/packs/negative-sizes.js 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..9254e667 --- /dev/null +++ b/js/packs/negative-sizes.js @@ -0,0 +1,54 @@ +export const NegativeSize = [ + '-.25rem', + '-.5rem', + '-1rem', + '-1.25rem', + '-1.5rem', + '-1.75rem', + '-2rem', + '-3rem', + '-4rem', + '-5rem', + '-7.5rem', + '-10rem', + '-15rem', + '-20rem', + '-30rem', +] + +export const NegativeRelative = [ + '-.25ch', + '-.5ch', + '-1ch', + '-1.25ch', + '-1.5ch', + '-1.75ch', + '-2ch', + '-3ch', + '-4ch', + '-5ch', + '-7.5ch', + '-10ch', + '-15ch', + '-20ch', + '-30ch', +] + +export const NegativeFluid = [ + 'clamp(-1rem, -1vw, -.5rem)', + 'clamp(-1.5rem, -2vw, -1rem)', + 'clamp(-2rem, -3vw, -1.5rem)', + 'clamp(-3rem, -4vw, -2rem)', + 'clamp(-5rem, -5vw, -4rem)', + 'clamp(-7.5rem, -7vw, -5rem)', + 'clamp(-10rem, -10vw, -7.5rem)', + 'clamp(-15rem, -20vw, -10rem)', + 'clamp(-20rem, -30vw, -15rem)', + 'clamp(-30rem, -40vw, -20rem)', +] + +export default { + NegativeSize, + NegativeRelative, + NegativeFluid, +} From e58950003256486087a5b661658907a8326b9d28 Mon Sep 17 00:00:00 2001 From: Felix Date: Thu, 5 Dec 2024 20:54:44 +0100 Subject: [PATCH 3/6] refactor(negative fluid): change vw to vi --- css/packs/negative-sizes/fluid.css | 20 ++++++++++---------- js/packs/negative-sizes.js | 20 ++++++++++---------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/css/packs/negative-sizes/fluid.css b/css/packs/negative-sizes/fluid.css index 2e6a0d30..2ee7244a 100644 --- a/css/packs/negative-sizes/fluid.css +++ b/css/packs/negative-sizes/fluid.css @@ -1,12 +1,12 @@ :where(:root) { - --size-fluid-1-: clamp(-1rem, -1vw, -0.5rem); - --size-fluid-2-: clamp(-1.5rem, -2vw, -1rem); - --size-fluid-3-: clamp(-2rem, -3vw, -1.5rem); - --size-fluid-4-: clamp(-3rem, -4vw, -2rem); - --size-fluid-5-: clamp(-5rem, -5vw, -4rem); - --size-fluid-6-: clamp(-7.5rem, -7vw, -5rem); - --size-fluid-7-: clamp(-10rem, -10vw, -7.5rem); - --size-fluid-8-: clamp(-15rem, -20vw, -10rem); - --size-fluid-9-: clamp(-20rem, -30vw, -15rem); - --size-fluid-10-: clamp(-30rem, -40vw, -20rem); + --size-fluid-1-: clamp(-1rem, -1vi, -0.5rem); + --size-fluid-2-: clamp(-1.5rem, -2vi, -1rem); + --size-fluid-3-: clamp(-2rem, -3vi, -1.5rem); + --size-fluid-4-: clamp(-3rem, -4vi, -2rem); + --size-fluid-5-: clamp(-5rem, -5vi, -4rem); + --size-fluid-6-: clamp(-7.5rem, -7vi, -5rem); + --size-fluid-7-: clamp(-10rem, -10vi, -7.5rem); + --size-fluid-8-: clamp(-15rem, -20vi, -10rem); + --size-fluid-9-: clamp(-20rem, -30vi, -15rem); + --size-fluid-10-: clamp(-30rem, -40vi, -20rem); } diff --git a/js/packs/negative-sizes.js b/js/packs/negative-sizes.js index 9254e667..821bee58 100644 --- a/js/packs/negative-sizes.js +++ b/js/packs/negative-sizes.js @@ -35,16 +35,16 @@ export const NegativeRelative = [ ] export const NegativeFluid = [ - 'clamp(-1rem, -1vw, -.5rem)', - 'clamp(-1.5rem, -2vw, -1rem)', - 'clamp(-2rem, -3vw, -1.5rem)', - 'clamp(-3rem, -4vw, -2rem)', - 'clamp(-5rem, -5vw, -4rem)', - 'clamp(-7.5rem, -7vw, -5rem)', - 'clamp(-10rem, -10vw, -7.5rem)', - 'clamp(-15rem, -20vw, -10rem)', - 'clamp(-20rem, -30vw, -15rem)', - 'clamp(-30rem, -40vw, -20rem)', + 'clamp(-1rem, -1vi, -.5rem)', + 'clamp(-1.5rem, -2vi, -1rem)', + 'clamp(-2rem, -3vi, -1.5rem)', + 'clamp(-3rem, -4vi, -2rem)', + 'clamp(-5rem, -5vi, -4rem)', + 'clamp(-7.5rem, -7vi, -5rem)', + 'clamp(-10rem, -10vi, -7.5rem)', + 'clamp(-15rem, -20vi, -10rem)', + 'clamp(-20rem, -30vi, -15rem)', + 'clamp(-30rem, -40vi, -20rem)', ] export default { From 7ec767eea6adac6fc9bda02b9d9e2a9deb68d951 Mon Sep 17 00:00:00 2001 From: Felix Date: Tue, 10 Dec 2024 13:12:52 +0100 Subject: [PATCH 4/6] feat(normalize): add interpolate-size on `:root` --- css/packs/normalize/normalize.src.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/css/packs/normalize/normalize.src.css b/css/packs/normalize/normalize.src.css index 8a55a584..4396fe5f 100644 --- a/css/packs/normalize/normalize.src.css +++ b/css/packs/normalize/normalize.src.css @@ -10,6 +10,8 @@ @supports (transition-timing-function: linear(0, 1)) { --transition-focus: outline-offset 145ms var(--ease-spring-3); } + + interpolate-size: allow-keywords; } :where(:not(dialog)) { From 81cf6bd874fdc0845e271a338bc4712e4850893f Mon Sep 17 00:00:00 2001 From: Felix Date: Tue, 10 Dec 2024 13:14:30 +0100 Subject: [PATCH 5/6] Revert "feat(normalize): add interpolate-size on `:root`" This reverts commit 7ec767eea6adac6fc9bda02b9d9e2a9deb68d951. --- css/packs/normalize/normalize.src.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/css/packs/normalize/normalize.src.css b/css/packs/normalize/normalize.src.css index 4396fe5f..8a55a584 100644 --- a/css/packs/normalize/normalize.src.css +++ b/css/packs/normalize/normalize.src.css @@ -10,8 +10,6 @@ @supports (transition-timing-function: linear(0, 1)) { --transition-focus: outline-offset 145ms var(--ease-spring-3); } - - interpolate-size: allow-keywords; } :where(:not(dialog)) { From 2dcb12cdaaccbdf140173d573a55f078c97152a3 Mon Sep 17 00:00:00 2001 From: Felix Date: Fri, 20 Dec 2024 22:03:45 +0100 Subject: [PATCH 6/6] feat(negative-sizes): use calc approach --- css/packs/negative-sizes/fluid.css | 14 +++----- js/packs/negative-sizes.js | 51 +++--------------------------- 2 files changed, 9 insertions(+), 56 deletions(-) diff --git a/css/packs/negative-sizes/fluid.css b/css/packs/negative-sizes/fluid.css index 2ee7244a..ce9f2d22 100644 --- a/css/packs/negative-sizes/fluid.css +++ b/css/packs/negative-sizes/fluid.css @@ -1,12 +1,6 @@ :where(:root) { - --size-fluid-1-: clamp(-1rem, -1vi, -0.5rem); - --size-fluid-2-: clamp(-1.5rem, -2vi, -1rem); - --size-fluid-3-: clamp(-2rem, -3vi, -1.5rem); - --size-fluid-4-: clamp(-3rem, -4vi, -2rem); - --size-fluid-5-: clamp(-5rem, -5vi, -4rem); - --size-fluid-6-: clamp(-7.5rem, -7vi, -5rem); - --size-fluid-7-: clamp(-10rem, -10vi, -7.5rem); - --size-fluid-8-: clamp(-15rem, -20vi, -10rem); - --size-fluid-9-: clamp(-20rem, -30vi, -15rem); - --size-fluid-10-: clamp(-30rem, -40vi, -20rem); + --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/js/packs/negative-sizes.js b/js/packs/negative-sizes.js index 821bee58..565cbad7 100644 --- a/js/packs/negative-sizes.js +++ b/js/packs/negative-sizes.js @@ -1,51 +1,10 @@ -export const NegativeSize = [ - '-.25rem', - '-.5rem', - '-1rem', - '-1.25rem', - '-1.5rem', - '-1.75rem', - '-2rem', - '-3rem', - '-4rem', - '-5rem', - '-7.5rem', - '-10rem', - '-15rem', - '-20rem', - '-30rem', -] +import { Fluid, Relative, Size } from '../sizes.js' -export const NegativeRelative = [ - '-.25ch', - '-.5ch', - '-1ch', - '-1.25ch', - '-1.5ch', - '-1.75ch', - '-2ch', - '-3ch', - '-4ch', - '-5ch', - '-7.5ch', - '-10ch', - '-15ch', - '-20ch', - '-30ch', -] +export const NegativeSize = Size.map((size) => `-${size}`) -export const NegativeFluid = [ - 'clamp(-1rem, -1vi, -.5rem)', - 'clamp(-1.5rem, -2vi, -1rem)', - 'clamp(-2rem, -3vi, -1.5rem)', - 'clamp(-3rem, -4vi, -2rem)', - 'clamp(-5rem, -5vi, -4rem)', - 'clamp(-7.5rem, -7vi, -5rem)', - 'clamp(-10rem, -10vi, -7.5rem)', - 'clamp(-15rem, -20vi, -10rem)', - 'clamp(-20rem, -30vi, -15rem)', - 'clamp(-30rem, -40vi, -20rem)', -] +export const NegativeRelative = Relative.map((size) => `-${size}`) + +export const NegativeFluid = Fluid.map((size) => `calc(-1 * ${size})`) export default { NegativeSize,