From aade20489a4ffcd8a5b65ddf7e5946201eebf96f Mon Sep 17 00:00:00 2001
From: Adam Argyle <atom@argyleink.com>
Date: Wed, 29 Nov 2023 21:22:00 -0800
Subject: [PATCH] more granular

---
 css/durations.css          |  2 +-
 css/font/families.css      |  7 +++++
 css/font/index.css         |  6 ++++
 css/font/letterspacing.css | 10 +++++++
 css/font/lineheight.css    |  9 ++++++
 css/font/weight.css        | 11 +++++++
 css/fonts.css              | 45 -----------------------------
 css/index.css              |  4 +--
 css/index.v2.css           | 11 +++++--
 css/sizes.css              | 59 --------------------------------------
 css/sizes/content.css      |  5 ++++
 css/sizes/fluid.css        | 12 ++++++++
 css/sizes/font.css         | 12 ++++++++
 css/sizes/fontfluid.css    |  6 ++++
 css/sizes/header.css       |  5 ++++
 css/sizes/index.css        |  6 ++++
 css/sizes/media.css        |  9 ++++++
 css/sizes/relative.css     | 19 ++++++++++++
 css/sizes/size.css         | 19 ++++++++++++
 19 files changed, 147 insertions(+), 110 deletions(-)
 create mode 100644 css/font/families.css
 create mode 100644 css/font/index.css
 create mode 100644 css/font/letterspacing.css
 create mode 100644 css/font/lineheight.css
 create mode 100644 css/font/weight.css
 delete mode 100644 css/fonts.css
 delete mode 100644 css/sizes.css
 create mode 100644 css/sizes/content.css
 create mode 100644 css/sizes/fluid.css
 create mode 100644 css/sizes/font.css
 create mode 100644 css/sizes/fontfluid.css
 create mode 100644 css/sizes/header.css
 create mode 100644 css/sizes/index.css
 create mode 100644 css/sizes/media.css
 create mode 100644 css/sizes/relative.css
 create mode 100644 css/sizes/size.css

diff --git a/css/durations.css b/css/durations.css
index 0ca269d1..650cd515 100644
--- a/css/durations.css
+++ b/css/durations.css
@@ -1,4 +1,4 @@
-:where(html) {
+:where(:root) {
 	--minute: 60s;
 	--hour: calc(60 * var(--minute));
 	--day: calc(24 * var(--hour));
diff --git a/css/font/families.css b/css/font/families.css
new file mode 100644
index 00000000..c6e9d801
--- /dev/null
+++ b/css/font/families.css
@@ -0,0 +1,7 @@
+:where(:root) {
+	--font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
+		Noto Sans, sans-serif;
+	--font-serif: ui-serif, serif;
+	--font-mono: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace,
+		SF Mono, Monaco, Droid Sans Mono, Source Code Pro, monospace;
+}
diff --git a/css/font/index.css b/css/font/index.css
new file mode 100644
index 00000000..40108bf1
--- /dev/null
+++ b/css/font/index.css
@@ -0,0 +1,6 @@
+@import 'families.css';
+@import 'weight.css';
+@import 'lineheight.css';
+@import 'letterspacing.css';
+@import '../sizes/font.css';
+@import '../sizes/fontfluid.css';
diff --git a/css/font/letterspacing.css b/css/font/letterspacing.css
new file mode 100644
index 00000000..16cd2049
--- /dev/null
+++ b/css/font/letterspacing.css
@@ -0,0 +1,10 @@
+:where(:root) {
+	--font-letterspacing-0: -0.05em;
+	--font-letterspacing-1: 0.025em;
+	--font-letterspacing-2: 0.05em;
+	--font-letterspacing-3: 0.075em;
+	--font-letterspacing-4: 0.15em;
+	--font-letterspacing-5: 0.5em;
+	--font-letterspacing-6: 0.75em;
+	--font-letterspacing-7: 1em;
+}
diff --git a/css/font/lineheight.css b/css/font/lineheight.css
new file mode 100644
index 00000000..c530e3cc
--- /dev/null
+++ b/css/font/lineheight.css
@@ -0,0 +1,9 @@
+:where(:root) {
+	--font-lineheight-00: 0.95;
+	--font-lineheight-0: 1.1;
+	--font-lineheight-1: 1.25;
+	--font-lineheight-2: 1.375;
+	--font-lineheight-3: 1.5;
+	--font-lineheight-4: 1.75;
+	--font-lineheight-5: 2;
+}
diff --git a/css/font/weight.css b/css/font/weight.css
new file mode 100644
index 00000000..165f09e5
--- /dev/null
+++ b/css/font/weight.css
@@ -0,0 +1,11 @@
+:where(:root) {
+	--font-weight-1: 100;
+	--font-weight-2: 200;
+	--font-weight-3: 300;
+	--font-weight-4: 400;
+	--font-weight-5: 500;
+	--font-weight-6: 600;
+	--font-weight-7: 700;
+	--font-weight-8: 800;
+	--font-weight-9: 900;
+}
diff --git a/css/fonts.css b/css/fonts.css
deleted file mode 100644
index 266458ea..00000000
--- a/css/fonts.css
+++ /dev/null
@@ -1,45 +0,0 @@
-:where(html) {
-	--font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
-		Noto Sans, sans-serif;
-	--font-serif: ui-serif, serif;
-	--font-mono: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace,
-		SF Mono, Monaco, Droid Sans Mono, Source Code Pro, monospace;
-	--font-weight-1: 100;
-	--font-weight-2: 200;
-	--font-weight-3: 300;
-	--font-weight-4: 400;
-	--font-weight-5: 500;
-	--font-weight-6: 600;
-	--font-weight-7: 700;
-	--font-weight-8: 800;
-	--font-weight-9: 900;
-	--font-lineheight-00: 0.95;
-	--font-lineheight-0: 1.1;
-	--font-lineheight-1: 1.25;
-	--font-lineheight-2: 1.375;
-	--font-lineheight-3: 1.5;
-	--font-lineheight-4: 1.75;
-	--font-lineheight-5: 2;
-	--font-letterspacing-0: -0.05em;
-	--font-letterspacing-1: 0.025em;
-	--font-letterspacing-2: 0.05em;
-	--font-letterspacing-3: 0.075em;
-	--font-letterspacing-4: 0.15em;
-	--font-letterspacing-5: 0.5em;
-	--font-letterspacing-6: 0.75em;
-	--font-letterspacing-7: 1em;
-	--font-size-00: 0.5rem;
-	--font-size-0: 0.75rem;
-	--font-size-1: 1rem;
-	--font-size-2: 1.1rem;
-	--font-size-3: 1.25rem;
-	--font-size-4: 1.5rem;
-	--font-size-5: 2rem;
-	--font-size-6: 2.5rem;
-	--font-size-7: 3rem;
-	--font-size-8: 3.5rem;
-	--font-size-fluid-0: clamp(0.75rem, 2vw, 1rem);
-	--font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
-	--font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);
-	--font-size-fluid-3: clamp(2rem, 9vw, 3.5rem);
-}
diff --git a/css/index.css b/css/index.css
index e5d3e9c3..0c552da5 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,6 +1,6 @@
 @import 'media-queries.css';
-@import 'fonts.css';
-@import 'sizes.css';
+@import 'font/index.css';
+@import 'sizes/index.css';
 @import 'aspect-ratios.css';
 @import 'z-index.css';
 @import 'borders.css';
diff --git a/css/index.v2.css b/css/index.v2.css
index 83ca814e..93b20e64 100644
--- a/css/index.v2.css
+++ b/css/index.v2.css
@@ -1,10 +1,15 @@
 @import 'media-queries.css';
-@import 'fonts.css';
-@import 'sizes.css';
+@import 'font/families.css';
+@import 'font/weight.css';
+@import 'sizes/font.css';
+@import 'sizes/fontfluid.css';
+@import 'sizes/size.css';
+@import 'sizes/fluid.css';
+@import 'sizes/header.css';
+@import 'sizes/content.css';
 @import 'aspect-ratios.css';
 @import 'z-index.css';
 @import 'borders.css';
 @import 'shadows.css';
 @import 'motion/easings.css';
 @import 'color/palette.oklch.css';
-@import 'color/gradients.css';
diff --git a/css/sizes.css b/css/sizes.css
deleted file mode 100644
index 89eaac66..00000000
--- a/css/sizes.css
+++ /dev/null
@@ -1,59 +0,0 @@
-:where(:root) {
-	--size-000: -0.5rem;
-	--size-00: -0.25rem;
-	--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;
-	--size-fluid-1: clamp(0.5rem, 1vw, 1rem);
-	--size-fluid-2: clamp(1rem, 2vw, 1.5rem);
-	--size-fluid-3: clamp(1.5rem, 3vw, 2rem);
-	--size-fluid-4: clamp(2rem, 4vw, 3rem);
-	--size-fluid-5: clamp(4rem, 5vw, 5rem);
-	--size-fluid-6: clamp(5rem, 7vw, 7.5rem);
-	--size-fluid-7: clamp(7.5rem, 10vw, 10rem);
-	--size-fluid-8: clamp(10rem, 20vw, 15rem);
-	--size-fluid-9: clamp(15rem, 30vw, 20rem);
-	--size-fluid-10: clamp(20rem, 40vw, 30rem);
-	--size-content-1: 20ch;
-	--size-content-2: 45ch;
-	--size-content-3: 60ch;
-	--size-header-1: 20ch;
-	--size-header-2: 25ch;
-	--size-header-3: 35ch;
-	--size-xxs: 240px;
-	--size-xs: 360px;
-	--size-sm: 480px;
-	--size-md: 768px;
-	--size-lg: 1024px;
-	--size-xl: 1440px;
-	--size-xxl: 1920px;
-	--size-relative-000: -0.5ch;
-	--size-relative-00: -0.25ch;
-	--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/sizes/content.css b/css/sizes/content.css
new file mode 100644
index 00000000..dcab37a4
--- /dev/null
+++ b/css/sizes/content.css
@@ -0,0 +1,5 @@
+:where(:root) {
+	--size-content-1: 20ch;
+	--size-content-2: 45ch;
+	--size-content-3: 60ch;
+}
diff --git a/css/sizes/fluid.css b/css/sizes/fluid.css
new file mode 100644
index 00000000..03791bfe
--- /dev/null
+++ b/css/sizes/fluid.css
@@ -0,0 +1,12 @@
+:where(:root) {
+	--size-fluid-1: clamp(0.5rem, 1vw, 1rem);
+	--size-fluid-2: clamp(1rem, 2vw, 1.5rem);
+	--size-fluid-3: clamp(1.5rem, 3vw, 2rem);
+	--size-fluid-4: clamp(2rem, 4vw, 3rem);
+	--size-fluid-5: clamp(4rem, 5vw, 5rem);
+	--size-fluid-6: clamp(5rem, 7vw, 7.5rem);
+	--size-fluid-7: clamp(7.5rem, 10vw, 10rem);
+	--size-fluid-8: clamp(10rem, 20vw, 15rem);
+	--size-fluid-9: clamp(15rem, 30vw, 20rem);
+	--size-fluid-10: clamp(20rem, 40vw, 30rem);
+}
diff --git a/css/sizes/font.css b/css/sizes/font.css
new file mode 100644
index 00000000..5d00ebd9
--- /dev/null
+++ b/css/sizes/font.css
@@ -0,0 +1,12 @@
+:where(:root) {
+	--font-size-00: 0.5rem;
+	--font-size-0: 0.75rem;
+	--font-size-1: 1rem;
+	--font-size-2: 1.1rem;
+	--font-size-3: 1.25rem;
+	--font-size-4: 1.5rem;
+	--font-size-5: 2rem;
+	--font-size-6: 2.5rem;
+	--font-size-7: 3rem;
+	--font-size-8: 3.5rem;
+}
diff --git a/css/sizes/fontfluid.css b/css/sizes/fontfluid.css
new file mode 100644
index 00000000..93cb3aa1
--- /dev/null
+++ b/css/sizes/fontfluid.css
@@ -0,0 +1,6 @@
+:where(:root) {
+	--font-size-fluid-0: clamp(0.75rem, 2vw, 1rem);
+	--font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
+	--font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);
+	--font-size-fluid-3: clamp(2rem, 9vw, 3.5rem);
+}
diff --git a/css/sizes/header.css b/css/sizes/header.css
new file mode 100644
index 00000000..188c2d0f
--- /dev/null
+++ b/css/sizes/header.css
@@ -0,0 +1,5 @@
+:where(:root) {
+	--size-header-1: 20ch;
+	--size-header-2: 25ch;
+	--size-header-3: 35ch;
+}
diff --git a/css/sizes/index.css b/css/sizes/index.css
new file mode 100644
index 00000000..79eadc40
--- /dev/null
+++ b/css/sizes/index.css
@@ -0,0 +1,6 @@
+@import 'size.css';
+@import 'fluid.css';
+@import 'content.css';
+@import 'header.css';
+@import 'media.css';
+@import 'relative.css';
diff --git a/css/sizes/media.css b/css/sizes/media.css
new file mode 100644
index 00000000..6ca484ac
--- /dev/null
+++ b/css/sizes/media.css
@@ -0,0 +1,9 @@
+:where(:root) {
+	--size-xxs: 240px;
+	--size-xs: 360px;
+	--size-sm: 480px;
+	--size-md: 768px;
+	--size-lg: 1024px;
+	--size-xl: 1440px;
+	--size-xxl: 1920px;
+}
diff --git a/css/sizes/relative.css b/css/sizes/relative.css
new file mode 100644
index 00000000..97e96634
--- /dev/null
+++ b/css/sizes/relative.css
@@ -0,0 +1,19 @@
+:where(:root) {
+	--size-relative-000: -0.5ch;
+	--size-relative-00: -0.25ch;
+	--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/sizes/size.css b/css/sizes/size.css
new file mode 100644
index 00000000..c315dfdd
--- /dev/null
+++ b/css/sizes/size.css
@@ -0,0 +1,19 @@
+:where(:root) {
+	--size-000: -0.5rem;
+	--size-00: -0.25rem;
+	--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;
+}