From c127e00e2ff13aa0b9098fb57e3b490f3eebbb17 Mon Sep 17 00:00:00 2001 From: Brian-Pob Date: Mon, 8 Apr 2024 14:51:21 -0400 Subject: [PATCH 1/4] add px-based sizes --- docsite/index.html | 26 +++++++++++++++++++++++++- src/props.sizes.css | 17 +++++++++++++++++ src/props.sizes.js | 18 ++++++++++++++++++ test/basic.test.cjs | 4 ++-- 4 files changed, 62 insertions(+), 3 deletions(-) diff --git a/docsite/index.html b/docsite/index.html index fd84a144..2f6ffa2a 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -2935,7 +2935,7 @@
Push Out

Sizes

-

No px here, relative units all the way. 0s are unsafe but common negative values, while 1-N are safe.

+

Sizes use relative units by default with rem but px-based units are also available. 0s are unsafe but common negative values, while 1-N are safe.

The Props
@@ -2975,6 +2975,30 @@
Document Relative Sizes
+
+
Pixel-based Sizes
+
+

+              --size-px-000: -8px;
+              --size-px-00: -4px;
+              --size-px-1: 4px;
+              --size-px-2: 8px;
+              --size-px-3: 16px;
+              --size-px-4: 20px;
+              --size-px-5: 24px;
+              --size-px-6: 28px;
+              --size-px-7: 32px;
+              --size-px-8: 48px;
+              --size-px-9: 64px;
+              --size-px-10: 80px;
+              --size-px-11: 120px;
+              --size-px-12: 160px;
+              --size-px-13: 240px;
+              --size-px-14: 320px;
+              --size-px-15: 480px;
+            
+
+
Usage Sample

diff --git a/src/props.sizes.css b/src/props.sizes.css
index e8b2a6e1..f41ec61d 100644
--- a/src/props.sizes.css
+++ b/src/props.sizes.css
@@ -16,6 +16,23 @@
   --size-13: 15rem;
   --size-14: 20rem;
   --size-15: 30rem;
+  --size-px-000: -8px;
+  --size-px-00: -4px;
+  --size-px-1: 4px;
+  --size-px-2: 8px;
+  --size-px-3: 16px;
+  --size-px-4: 20px;
+  --size-px-5: 24px;
+  --size-px-6: 28px;
+  --size-px-7: 32px;
+  --size-px-8: 48px;
+  --size-px-9: 64px;
+  --size-px-10: 80px;
+  --size-px-11: 120px;
+  --size-px-12: 160px;
+  --size-px-13: 240px;
+  --size-px-14: 320px;
+  --size-px-15: 480px;
   --size-fluid-1: clamp(.5rem, 1vw, 1rem);
   --size-fluid-2: clamp(1rem, 2vw, 1.5rem);
   --size-fluid-3: clamp(1.5rem, 3vw, 2rem);
diff --git a/src/props.sizes.js b/src/props.sizes.js
index 5bdcd335..a6c8d4ed 100644
--- a/src/props.sizes.js
+++ b/src/props.sizes.js
@@ -17,6 +17,24 @@ export default {
   '--size-14': '20rem',
   '--size-15': '30rem',
 
+  '--size-px-000': '-8px',
+  '--size-px-00': '-4px',
+  '--size-px-1': '4px',
+  '--size-px-2': '8px',
+  '--size-px-3': '16px',
+  '--size-px-4': '20px',
+  '--size-px-5': '24px',
+  '--size-px-6': '28px',
+  '--size-px-7': '32px',
+  '--size-px-8': '48px',
+  '--size-px-9': '64px',
+  '--size-px-10': '80px',
+  '--size-px-11': '120px',
+  '--size-px-12': '160px',
+  '--size-px-13': '240px',
+  '--size-px-14': '320px',
+  '--size-px-15': '480px',
+
   '--size-fluid-1': 'clamp(.5rem, 1vw, 1rem)',
   '--size-fluid-2': 'clamp(1rem, 2vw, 1.5rem)',
   '--size-fluid-3': 'clamp(1.5rem, 3vw, 2rem)',
diff --git a/test/basic.test.cjs b/test/basic.test.cjs
index 9ba5120b..9a80c1b8 100644
--- a/test/basic.test.cjs
+++ b/test/basic.test.cjs
@@ -4,7 +4,7 @@ const OpenProps = require('../dist/open-props.cjs')
 const OPtokens = require('../open-props.tokens.json')
 
 test('Should have an all included import', t => {
-  t.is(Object.keys(OpenProps).length, 1658)
+  t.is(Object.keys(OpenProps).length, 1692)
 })
 
 test('Import should have animations', async t => {
@@ -24,7 +24,7 @@ test('Import should have colors', async t => {
 })
 
 test('JSON Import should have colors', async t => {
-  t.is(Object.keys(OPtokens).length, 439)
+  t.is(Object.keys(OPtokens).length, 456)
   t.assert(Object.keys(OPtokens).includes('--orange-0'))
 })
 

From 1e6b3695142d8f27a97cb38ef36936100e9a6a96 Mon Sep 17 00:00:00 2001
From: Brian-Pob 
Date: Mon, 8 Apr 2024 15:43:08 -0400
Subject: [PATCH 2/4] change heading capitalization to match others

---
 docsite/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docsite/index.html b/docsite/index.html
index 2f6ffa2a..a350bf0c 100644
--- a/docsite/index.html
+++ b/docsite/index.html
@@ -2976,7 +2976,7 @@ 
Document Relative Sizes
-
Pixel-based Sizes
+
Pixel-Based Sizes

               --size-px-000: -8px;

From 71811988aca239a5e2f0159ad6775753c30ad545 Mon Sep 17 00:00:00 2001
From: Brian-Pob 
Date: Thu, 11 Apr 2024 14:38:29 -0400
Subject: [PATCH 3/4] replace size-px with size-static

---
 docsite/index.html  | 38 +++++++++++++++++++-------------------
 src/props.sizes.css | 34 +++++++++++++++++-----------------
 src/props.sizes.js  | 34 +++++++++++++++++-----------------
 3 files changed, 53 insertions(+), 53 deletions(-)

diff --git a/docsite/index.html b/docsite/index.html
index a350bf0c..20d9a875 100644
--- a/docsite/index.html
+++ b/docsite/index.html
@@ -2935,7 +2935,7 @@ 
Push Out

Sizes

-

Sizes use relative units by default with rem but px-based units are also available. 0s are unsafe but common negative values, while 1-N are safe.

+

Sizes use relative units by default with rem but static, px-based units are also available. 0s are unsafe but common negative values, while 1-N are safe.

The Props
@@ -2976,26 +2976,26 @@
Document Relative Sizes
-
Pixel-Based Sizes
+
Static Sizes

-              --size-px-000: -8px;
-              --size-px-00: -4px;
-              --size-px-1: 4px;
-              --size-px-2: 8px;
-              --size-px-3: 16px;
-              --size-px-4: 20px;
-              --size-px-5: 24px;
-              --size-px-6: 28px;
-              --size-px-7: 32px;
-              --size-px-8: 48px;
-              --size-px-9: 64px;
-              --size-px-10: 80px;
-              --size-px-11: 120px;
-              --size-px-12: 160px;
-              --size-px-13: 240px;
-              --size-px-14: 320px;
-              --size-px-15: 480px;
+              --size-static-000: -8px;
+              --size-static-00: -4px;
+              --size-static-1: 4px;
+              --size-static-2: 8px;
+              --size-static-3: 16px;
+              --size-static-4: 20px;
+              --size-static-5: 24px;
+              --size-static-6: 28px;
+              --size-static-7: 32px;
+              --size-static-8: 48px;
+              --size-static-9: 64px;
+              --size-static-10: 80px;
+              --size-static-11: 120px;
+              --size-static-12: 160px;
+              --size-static-13: 240px;
+              --size-static-14: 320px;
+              --size-static-15: 480px;
             
diff --git a/src/props.sizes.css b/src/props.sizes.css index f41ec61d..51db09dd 100644 --- a/src/props.sizes.css +++ b/src/props.sizes.css @@ -16,23 +16,23 @@ --size-13: 15rem; --size-14: 20rem; --size-15: 30rem; - --size-px-000: -8px; - --size-px-00: -4px; - --size-px-1: 4px; - --size-px-2: 8px; - --size-px-3: 16px; - --size-px-4: 20px; - --size-px-5: 24px; - --size-px-6: 28px; - --size-px-7: 32px; - --size-px-8: 48px; - --size-px-9: 64px; - --size-px-10: 80px; - --size-px-11: 120px; - --size-px-12: 160px; - --size-px-13: 240px; - --size-px-14: 320px; - --size-px-15: 480px; + --size-static-000: -8px; + --size-static-00: -4px; + --size-static-1: 4px; + --size-static-2: 8px; + --size-static-3: 16px; + --size-static-4: 20px; + --size-static-5: 24px; + --size-static-6: 28px; + --size-static-7: 32px; + --size-static-8: 48px; + --size-static-9: 64px; + --size-static-10: 80px; + --size-static-11: 120px; + --size-static-12: 160px; + --size-static-13: 240px; + --size-static-14: 320px; + --size-static-15: 480px; --size-fluid-1: clamp(.5rem, 1vw, 1rem); --size-fluid-2: clamp(1rem, 2vw, 1.5rem); --size-fluid-3: clamp(1.5rem, 3vw, 2rem); diff --git a/src/props.sizes.js b/src/props.sizes.js index a6c8d4ed..8d4b4ed2 100644 --- a/src/props.sizes.js +++ b/src/props.sizes.js @@ -17,23 +17,23 @@ export default { '--size-14': '20rem', '--size-15': '30rem', - '--size-px-000': '-8px', - '--size-px-00': '-4px', - '--size-px-1': '4px', - '--size-px-2': '8px', - '--size-px-3': '16px', - '--size-px-4': '20px', - '--size-px-5': '24px', - '--size-px-6': '28px', - '--size-px-7': '32px', - '--size-px-8': '48px', - '--size-px-9': '64px', - '--size-px-10': '80px', - '--size-px-11': '120px', - '--size-px-12': '160px', - '--size-px-13': '240px', - '--size-px-14': '320px', - '--size-px-15': '480px', + '--size-static-000': '-8px', + '--size-static-00': '-4px', + '--size-static-1': '4px', + '--size-static-2': '8px', + '--size-static-3': '16px', + '--size-static-4': '20px', + '--size-static-5': '24px', + '--size-static-6': '28px', + '--size-static-7': '32px', + '--size-static-8': '48px', + '--size-static-9': '64px', + '--size-static-10': '80px', + '--size-static-11': '120px', + '--size-static-12': '160px', + '--size-static-13': '240px', + '--size-static-14': '320px', + '--size-static-15': '480px', '--size-fluid-1': 'clamp(.5rem, 1vw, 1rem)', '--size-fluid-2': 'clamp(1rem, 2vw, 1.5rem)', From 95738952edfe0c3a84b8953e488526b2598a4b27 Mon Sep 17 00:00:00 2001 From: Brian Poblete Date: Tue, 16 Apr 2024 19:23:35 -0400 Subject: [PATCH 4/4] revert to size-px instead of size-static --- docsite/index.html | 34 +++++++++++++++++----------------- package-lock.json | 4 ++-- src/props.sizes.css | 34 +++++++++++++++++----------------- src/props.sizes.js | 34 +++++++++++++++++----------------- 4 files changed, 53 insertions(+), 53 deletions(-) diff --git a/docsite/index.html b/docsite/index.html index 20d9a875..13678598 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -2979,23 +2979,23 @@
Document Relative Sizes
Static Sizes

-              --size-static-000: -8px;
-              --size-static-00: -4px;
-              --size-static-1: 4px;
-              --size-static-2: 8px;
-              --size-static-3: 16px;
-              --size-static-4: 20px;
-              --size-static-5: 24px;
-              --size-static-6: 28px;
-              --size-static-7: 32px;
-              --size-static-8: 48px;
-              --size-static-9: 64px;
-              --size-static-10: 80px;
-              --size-static-11: 120px;
-              --size-static-12: 160px;
-              --size-static-13: 240px;
-              --size-static-14: 320px;
-              --size-static-15: 480px;
+              --size-px-000: -8px;
+              --size-px-00: -4px;
+              --size-px-1: 4px;
+              --size-px-2: 8px;
+              --size-px-3: 16px;
+              --size-px-4: 20px;
+              --size-px-5: 24px;
+              --size-px-6: 28px;
+              --size-px-7: 32px;
+              --size-px-8: 48px;
+              --size-px-9: 64px;
+              --size-px-10: 80px;
+              --size-px-11: 120px;
+              --size-px-12: 160px;
+              --size-px-13: 240px;
+              --size-px-14: 320px;
+              --size-px-15: 480px;
             
diff --git a/package-lock.json b/package-lock.json index 02ffb787..e37b76de 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "open-props", - "version": "1.6.19", + "version": "1.7.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "open-props", - "version": "1.6.19", + "version": "1.7.2", "license": "MIT", "devDependencies": { "ava": "^3.15.0", diff --git a/src/props.sizes.css b/src/props.sizes.css index 51db09dd..f41ec61d 100644 --- a/src/props.sizes.css +++ b/src/props.sizes.css @@ -16,23 +16,23 @@ --size-13: 15rem; --size-14: 20rem; --size-15: 30rem; - --size-static-000: -8px; - --size-static-00: -4px; - --size-static-1: 4px; - --size-static-2: 8px; - --size-static-3: 16px; - --size-static-4: 20px; - --size-static-5: 24px; - --size-static-6: 28px; - --size-static-7: 32px; - --size-static-8: 48px; - --size-static-9: 64px; - --size-static-10: 80px; - --size-static-11: 120px; - --size-static-12: 160px; - --size-static-13: 240px; - --size-static-14: 320px; - --size-static-15: 480px; + --size-px-000: -8px; + --size-px-00: -4px; + --size-px-1: 4px; + --size-px-2: 8px; + --size-px-3: 16px; + --size-px-4: 20px; + --size-px-5: 24px; + --size-px-6: 28px; + --size-px-7: 32px; + --size-px-8: 48px; + --size-px-9: 64px; + --size-px-10: 80px; + --size-px-11: 120px; + --size-px-12: 160px; + --size-px-13: 240px; + --size-px-14: 320px; + --size-px-15: 480px; --size-fluid-1: clamp(.5rem, 1vw, 1rem); --size-fluid-2: clamp(1rem, 2vw, 1.5rem); --size-fluid-3: clamp(1.5rem, 3vw, 2rem); diff --git a/src/props.sizes.js b/src/props.sizes.js index 8d4b4ed2..a6c8d4ed 100644 --- a/src/props.sizes.js +++ b/src/props.sizes.js @@ -17,23 +17,23 @@ export default { '--size-14': '20rem', '--size-15': '30rem', - '--size-static-000': '-8px', - '--size-static-00': '-4px', - '--size-static-1': '4px', - '--size-static-2': '8px', - '--size-static-3': '16px', - '--size-static-4': '20px', - '--size-static-5': '24px', - '--size-static-6': '28px', - '--size-static-7': '32px', - '--size-static-8': '48px', - '--size-static-9': '64px', - '--size-static-10': '80px', - '--size-static-11': '120px', - '--size-static-12': '160px', - '--size-static-13': '240px', - '--size-static-14': '320px', - '--size-static-15': '480px', + '--size-px-000': '-8px', + '--size-px-00': '-4px', + '--size-px-1': '4px', + '--size-px-2': '8px', + '--size-px-3': '16px', + '--size-px-4': '20px', + '--size-px-5': '24px', + '--size-px-6': '28px', + '--size-px-7': '32px', + '--size-px-8': '48px', + '--size-px-9': '64px', + '--size-px-10': '80px', + '--size-px-11': '120px', + '--size-px-12': '160px', + '--size-px-13': '240px', + '--size-px-14': '320px', + '--size-px-15': '480px', '--size-fluid-1': 'clamp(.5rem, 1vw, 1rem)', '--size-fluid-2': 'clamp(1rem, 2vw, 1.5rem)',