- @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
index 35455e80..2d02d1a7 100644
--- 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
index 9dc3ae3d..55adae73 100644
--- 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
index 2a40170d..d718e4ad 100644
--- 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
new file mode 100644
index 00000000..2c371f72
--- /dev/null
+++ 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
index defb04e4..837ab403 100644
--- 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
index afa161e7..3ecdfe50 100644
--- 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
index 7aea3fd6..265b202b 100644
--- 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
index 5a9880b3..bae77a30 100644
--- 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
index 4f82bebb..41a6cec9 100644
--- 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
index 833ba5cd..d87cf638 100644
--- 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
index 697c2848..e8b2a6e1 100644
--- 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;
}
diff --git a/src/props.sizes.js b/src/props.sizes.js
index a9f4d8e5..5bdcd335 100644
--- a/src/props.sizes.js
+++ b/src/props.sizes.js
@@ -43,4 +43,22 @@ export default {
'--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',
}
diff --git a/test/basic.test.cjs b/test/basic.test.cjs
index 3501ff03..13e20ea3 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, 1566)
+ t.is(Object.keys(OpenProps).length, 1600)
})
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, 397)
+ t.is(Object.keys(OPtokens).length, 414)
t.assert(Object.keys(OPtokens).includes('--orange-0'))
})