Merge branch 'argyleink:main' into reduced-motion

argyleink · Aug 3, 2023 · 1b865f6 · 1b865f6
2 parents b873ef4 + 4a0b8c7
commit 1b865f6
Show file tree

Hide file tree

Showing 15 changed files with 167 additions and 28 deletions.
diff --git a/docsite/index.css b/docsite/index.css
@@ -220,13 +220,13 @@ section.hero {
 
  & > * {
  background: var(--gradient-1) fixed;
- background-size: 12ch 7ch;
+ background-size: var(--size-relative-13) var(--size-relative-11);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
 
  @nest [data-theme="dark"] & {
  background: var(--gradient-4) fixed;
- background-size: 12ch 7ch;
+ background-size: var(--size-relative-13) var(--size-relative-11);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
@@ -587,7 +587,7 @@ pre[class*="language-"] {
  color: var(--text-1);
  box-shadow: var(--shadow-2);
  text-shadow: 0 1px 0 hsl(0 0% 0% / 25%);
- inline-size: 3ch;
+ inline-size: var(--size-relative-8);
  display: grid;
  place-content: center;
  margin: var(--size-3);
@@ -857,7 +857,7 @@ pre[class*="language-"] {
 
  & > svg {
  margin-block-start: -.25em;
- inline-size: 2ch;
+ inline-size: var(--size-relative-7);
  stroke-width: 2px;
  }
  }
@@ -1216,6 +1216,17 @@ pre[class*="language-"] {
  }
 }
 
+.match-h5 > * {
+ font-size: var(--font-size-3);
+ font-weight: var(--font-weight-9);
+}
+
+.relative-sizes-demo {
+ display: flex;
+ gap: var(--size-2);
+ flex-flow: column wrap;
+}
+
 .content-demo {
  display: flex;
  gap: var(--size-2);

diff --git a/docsite/index.html b/docsite/index.html
@@ -119,7 +119,7 @@ <h1><span>CSS</span> <span>variables.</span></h1>
  </li>
  </ul>
  <small>
- v1.5.8
+ v1.5.10
  <span class="license">
  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16">
  <path fill-rule="evenodd" d="M8.75.75a.75.75 0 00-1.5 0V2h-.984c-.305 0-.604.08-.869.23l-1.288.737A.25.25 0 013.984 3H1.75a.75.75 0 000 1.5h.428L.066 9.192a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.514 3.514 0 00.686.45A4.492 4.492 0 003 11c.88 0 1.556-.22 2.023-.454a3.515 3.515 0 00.686-.45l.045-.04.016-.015.006-.006.002-.002.001-.002L5.25 9.5l.53.53a.75.75 0 00.154-.838L3.822 4.5h.162c.305 0 .604-.08.869-.23l1.289-.737a.25.25 0 01.124-.033h.984V13h-2.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-2.5V3.5h.984a.25.25 0 01.124.033l1.29.736c.264.152.563.231.868.231h.162l-2.112 4.692a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.517 3.517 0 00.686.45A4.492 4.492 0 0013 11c.88 0 1.556-.22 2.023-.454a3.512 3.512 0 00.686-.45l.045-.04.01-.01.006-.005.006-.006.002-.002.001-.002-.529-.531.53.53a.75.75 0 00.154-.838L13.823 4.5h.427a.75.75 0 000-1.5h-2.234a.25.25 0 01-.124-.033l-1.29-.736A1.75 1.75 0 009.735 2H8.75V.75zM1.695 9.227c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327l-1.305 2.9zm10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327l-1.305 2.9z"></path>
@@ -2796,13 +2796,14 @@ <h5>The Props</h5>
  --size-fluid-{1-10}
  --size-content-{1-3}
  --size-header-{1-3}
+ --size-relative-{000-15}
  </code></pre>
  </div>
  </div>
 
  <div class="block-wrap">
  <div>
- <h5>Relative Sizes</h5>
+ <h5>Document Relative Sizes</h5>
  <div class="var-examples">
  <pre class="language-css"><code>
  --size-000: -.5rem;
@@ -2964,7 +2965,7 @@ <h5>Usage Sample</h5>
  }
  </code></pre>
  </div>
- <div class="large-sizes sizes-demo count-em scroll-x-overflow">
+ <div class="large-sizes match-h5 sizes-demo count-em scroll-x-overflow">
  <span style="inline-size: var(--size-header-1)"></span>
  <span style="inline-size: var(--size-header-2)"></span>
  <span style="inline-size: var(--size-header-3)"></span>
@@ -2976,6 +2977,62 @@ <h5 style="inline-size: var(--size-header-3)">Carrot cake gummi bears sweet cara
  </div>
  </div>
 
+ <div class="block-wrap">
+ <div>
+ <h5>Relative Sizes</h5>
+ <div class="var-examples">
+ <pre class="language-css"><code>
+ --size-relative-000: -.5ch;
+ --size-relative-00: -.25ch;
+ --size-relative-1: .25ch;
+ --size-relative-2: .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;
+ </code></pre>
+ </div>
+ </div>
+ <div class="relative-sizes-demo">
+ <label>
+ Pick a different base font size: 
+ <select>
+ <optgroup label="Base Font Size">
+ <option value="5">--font-size-5</option>
+ <option value="6">--font-size-6</option>
+ <option value="7">--font-size-7</option>
+ <option value="8">--font-size-8</option>
+ </optgroup>
+ </select>
+ </label>
+ <div class="sizes-demo count-em scroll-x-overflow">
+ <div style="inline-size: var(--size-relative-1)"></div>
+ <div style="inline-size: var(--size-relative-2)"></div>
+ <div style="inline-size: var(--size-relative-3)"></div>
+ <div style="inline-size: var(--size-relative-4)"></div>
+ <div style="inline-size: var(--size-relative-5)"></div>
+ <div style="inline-size: var(--size-relative-6)"></div>
+ <div style="inline-size: var(--size-relative-7)"></div>
+ <div style="inline-size: var(--size-relative-8)"></div>
+ <div style="inline-size: var(--size-relative-9)"></div>
+ <div style="inline-size: var(--size-relative-10)"></div>
+ <div style="inline-size: var(--size-relative-11)"></div>
+ <div style="inline-size: var(--size-relative-12)"></div>
+ <div style="inline-size: var(--size-relative-13)"></div>
+ <div style="inline-size: var(--size-relative-14)"></div>
+ <div style="inline-size: var(--size-relative-15)"></div>
+ </div>
+ </div>
+ </div>
  </section>
 
  <section id="borders">
@@ -3215,8 +3272,8 @@ <h5>Preference Vars</h5>
  <h5>Preference Vars Extended</h5>
  <div class="var-examples">
  <pre class="language-css"><code>
- @custom-media --highContrast (prefers-contrast: high);
- @custom-media --lowContrast (prefers-contrast: low);
+ @custom-media --highContrast (prefers-contrast: more);
+ @custom-media --lowContrast (prefers-contrast: less);
 
  @custom-media --opacityOK (prefers-reduced-transparency: no-preference);
  @custom-media --opacityNotOK (prefers-reduced-transparency: reduce);

diff --git a/docsite/index.js b/docsite/index.js
@@ -5,3 +5,4 @@ import '/js/easing.js'
 import '/js/animations.js'
 import '/js/slider.js'
 import '/js/scrollspy.js'
+import '/js/select.js'
diff --git a/docsite/js/animations.js b/docsite/js/animations.js
@@ -1,9 +1,9 @@
-import {toggleIcons} from './easing.js'
+import {showPlayIcon} from './easing.js'
 
 const cleanup = e => {
  setTimeout(()=> {
  e.target.style = ''
- toggleIcons(e.target.querySelector('button'))
+ showPlayIcon(e.target.querySelector('button'))
  }, 500)
 }
 

diff --git a/docsite/js/easing.js b/docsite/js/easing.js
@@ -18,6 +18,18 @@ export const toggleIcons = button => {
  })
 }
 
+export const showPlayIcon = button => {
+ button
+ .querySelectorAll('use')
+ .forEach(icon => {
+ if (icon.getAttribute('href') === '#play-icon') {
+ icon.classList.remove('hidden')
+ } else {
+ icon.classList.add('hidden');
+ }
+ })
+}
+
 // play buttons
 document
  .querySelectorAll('.play-button')

diff --git a/docsite/js/select.js b/docsite/js/select.js
@@ -0,0 +1,19 @@
+const selects = document.querySelectorAll('select')
+
+selects.forEach(select => {
+ select.addEventListener('change', e => {
+
+ let value = e.target.value
+
+ let sizes = select
+ .closest('.relative-sizes-demo')
+ .querySelector('.sizes-demo')
+ .children
+
+ for (let i = 0; i < sizes.length; i++) {
+ let size = sizes[i];
+ size.style.fontSize = `var(--font-size-${value})`;
+ }
+ })
+})
+
diff --git a/docsite/js/slider.js b/docsite/js/slider.js
@@ -5,9 +5,9 @@ const rangeToPercent = slider => {
  let val = slider.value
  let max = slider.max
 
- if (slider.min === '-1' && (val === "-1" || val === "0"))
+ if (slider.min === '-1' && (val === '-1' || val === '0'))
  percent = (val+1) / max * 100
- else if (slider.min === '-1' && val === "1")
+ else if (slider.min === '-1' && val === '1')
  percent = val / (max-2) * 100
  else
  percent = val / max * 100

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
  "name": "open-props",
  "author": "Adam Argyle",
  "license": "MIT",
- "version": "1.5.8",
+ "version": "1.5.10",
  "repository": {
  "type": "git",
  "url": "https://github.com/argyleink/open-props"

diff --git a/src/extra/buttons.css b/src/extra/buttons.css
@@ -23,7 +23,7 @@
  --_ink-shadow-dark: 0 1px 0 var(--surface-1);
  --_ink-shadow: var(--_ink-shadow-light);
 
- --_icon-size: 2ch;
+ --_icon-size: var(--size-relative-7);
  --_icon-color: var(--_accent, var(--link));
 
  font-size: var(--_size);
@@ -46,7 +46,7 @@
  font-weight: var(--font-weight-7);
  border-radius: var(--radius-2);
  padding-block: .75ch;
- padding-inline: 1.75ch;
+ padding-inline: var(--size-relative-6);
 
  user-select: none;
  -webkit-tap-highlight-color: transparent;
@@ -141,7 +141,7 @@
 
 :where(input[type="file"])::-webkit-file-upload-button,
 :where(input[type="file"])::file-selector-button {
- margin-inline-end: 1.75ch;
+ margin-inline-end: var(--size-relative-6);
  cursor: pointer;
 }
 

diff --git a/src/extra/buttons.dark.css b/src/extra/buttons.dark.css
@@ -14,7 +14,7 @@
  --_highlight: hsl(var(--gray-12-hsl) / 25%);
  --_ink-shadow: 0 1px 0 var(--surface-1);
 
- --_icon-size: 2ch;
+ --_icon-size: var(--size-relative-7);
  --_icon-color: var(--_accent, var(--link));
 
  font-size: var(--_size);
@@ -37,7 +37,7 @@
  font-weight: var(--font-weight-7);
  border-radius: var(--radius-2);
  padding-block: .75ch;
- padding-inline: 1.75ch;
+ padding-inline: var(--size-relative-6);
 
  user-select: none;
  -webkit-tap-highlight-color: transparent;
@@ -117,7 +117,7 @@
 
 :where(input[type="file"])::-webkit-file-upload-button,
 :where(input[type="file"])::file-selector-button {
- margin-inline-end: 1.75ch;
+ margin-inline-end: var(--size-relative-6);
  cursor: pointer;
 }
 

diff --git a/src/extra/buttons.light.css b/src/extra/buttons.light.css
@@ -16,7 +16,7 @@
 
  --_ink-shadow: 0 1px 0 var(--gray-3);
 
- --_icon-size: 2ch;
+ --_icon-size: var(--size-relative-7);
  --_icon-color: var(--_accent, var(--link));
 
  font-size: var(--_size);
@@ -39,7 +39,7 @@
  font-weight: var(--font-weight-7);
  border-radius: var(--radius-2);
  padding-block: .75ch;
- padding-inline: 1.75ch;
+ padding-inline: var(--size-relative-6);
 
  user-select: none;
  -webkit-tap-highlight-color: transparent;
@@ -119,6 +119,6 @@
 
 :where(input[type="file"])::-webkit-file-upload-button,
 :where(input[type="file"])::file-selector-button {
- margin-inline-end: 1.75ch;
+ margin-inline-end: var(--size-relative-6);
  cursor: pointer;
 }
diff --git a/src/extra/normalize.src.css b/src/extra/normalize.src.css
@@ -44,6 +44,7 @@
 :where(h1, h2, h3, h4, h5, h6) {
  line-height: var(--font-lineheight-1);
  font-weight: var(--font-weight-9);
+ text-wrap: balance;
 }
 
 :where(h1) { 
@@ -76,8 +77,11 @@
  }
 }
 
-:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
+:where(a[href], area, button, input:not([type="text"], [type="email"], [type="number"], [type="password"], [type=""], [type="tel"], [type="url"]), label[for], select, summary, [tabindex]:not([tabindex*="-"])) {
  cursor: pointer;
+}
+
+:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
 }
@@ -129,7 +133,7 @@
 }
 
 :where(select) {
- padding-inline: 1.25ch 0;
+ padding-inline: var(--size-relative-4) 0;
  padding-block: .75ch;
 }
 
@@ -181,7 +185,7 @@
 :where(ol, ul) { padding-inline-start: var(--size-8) }
 :where(li) { padding-inline-start: var(--size-2) }
 :where(li, dd, figcaption) { max-inline-size: var(--size-content-2) }
-:where(p) { max-inline-size: var(--size-content-3) }
+:where(p) { max-inline-size: var(--size-content-3); text-wrap: pretty; }
 :where(dt, summary) { font-weight: var(--font-weight-7) }
 
 :where(dt:not(:first-of-type)) {

diff --git a/src/props.sizes.css b/src/props.sizes.css
@@ -39,4 +39,21 @@
  --size-lg: 1024px;
  --size-xl: 1440px;
  --size-xxl: 1920px;
+ --size-relative-000: -.5ch;
+ --size-relative-00: -.25ch;
+ --size-relative-1: .25ch;
+ --size-relative-2: .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;
 }