From 0c39374fa3c0e4c4c0463b6e67332ae8835dd1ae Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Wed, 26 Jan 2022 19:11:12 -0800 Subject: [PATCH] Extras `buttons.min.css` (#154) * v0.4 ported * fixes multi-line * moves normalize styles * adds size as a single lever to customize * file upload button support * proper cursor for file input * fixes firefox not allowing comments as values breaking the styling system * fixes firefox svg path not colorized * fileinput space matches inline padding * cut release, for eap buttons.min.css --- package.json | 4 +- src/extra/buttons.css | 154 ++++++++++++++++++++++++++++++++++++++++ src/extra/normalize.css | 6 -- 3 files changed, 157 insertions(+), 7 deletions(-) create mode 100644 src/extra/buttons.css diff --git a/package.json b/package.json index 186af002..68eb7140 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "name": "open-props", "author": "Adam Argyle", "license": "MIT", - "version": "1.2.2", + "version": "1.2.3", "repository": { "type": "git", "url": "https://github.com/argyleink/open-props" @@ -29,6 +29,7 @@ "./style": "./open-props.min.css", "./postcss/style": "./src/index.css", "./normalize": "./normalize.min.css", + "./buttons": "./buttons.min.css", "./postcss/normalize": "./src/extra/normalize.css", "./animations": "./animations.min.css", "./aspects": "./aspects.min.css", @@ -73,6 +74,7 @@ "lib:js": "npm run bundle:pre-edit && microbundle --no-sourcemap && npm run bundle:post-edit", "lib:all": "postcss src/index.css -o open-props.min.css", "lib:normalize": "postcss src/extra/normalize.css -o normalize.min.css", + "lib:buttons": "postcss src/extra/buttons.css -o buttons.min.css", "lib:animations": "postcss src/props.animations.css -o animations.min.css", "lib:aspects": "postcss src/props.aspects.css -o aspects.min.css", "lib:borders": "postcss src/props.borders.css -o borders.min.css", diff --git a/src/extra/buttons.css b/src/extra/buttons.css new file mode 100644 index 00000000..e2cca9ee --- /dev/null +++ b/src/extra/buttons.css @@ -0,0 +1,154 @@ +@import "../props.media.css"; + +:where(button,button[type],input[type="button"],input[type="submit"],input[type="reset"]), +:where(input[type="file"])::-webkit-file-upload-button, +:where(input[type="file"])::file-selector-button { + --_accent: initial /* your color */; + --_text: initial /* your text color */; + --_size: initial /* your size */; + + --_bg-light: white; + --_bg-dark: var(--surface-3); + --_bg: var(--_bg-light); + + --_border: var(--surface-3); + + --_highlight-size: 0; + --_highlight-light: hsl(210 10% 71% / 25%); + --_highlight-dark: hsl(210 10% 5% / 25%); + --_highlight: var(--_highlight-light); + + --_ink-shadow-light: 0 1px 0 var(--gray-3); + --_ink-shadow-dark: 0 1px 0 var(--surface-1); + --_ink-shadow: var(--_ink-shadow-light); + + --_icon-size: 2ch; + --_icon-color: var(--_accent, var(--link)); + + font-size: var(--_size); + background: var(--_bg); + color: var(--_text); + border: var(--border-size-2) solid var(--_border); + box-shadow: + var(--shadow-2), + 0 1px var(--surface-3), + 0 0 0 var(--_highlight-size) var(--_highlight) + ; + text-shadow: var(--_ink-shadow); + + display: inline-flex; + justify-content: center; + align-items: center; + text-align: center; + place-self: flex-start; + gap: var(--size-2); + + font-weight: var(--font-weight-7); + border-radius: var(--radius-2); + padding-block: .75ch; + padding-inline: 1.75ch; + + user-select: none; + -webkit-tap-highlight-color: transparent; + -webkit-touch-callout: none; + + transition: border-color .5s var(--ease-3) 3s; + + @media (--OSdark) { + --_highlight: var(--_highlight-dark); + --_bg: var(--_bg-dark); + --_ink-shadow: var(--_ink-shadow-dark); + } + + @media (--motionOK) { + transition: + border-color .5s var(--ease-3) 3s, + box-shadow 145ms var(--ease-4); + } +} + +:where(button,button[type],input[type="button"],input[type="submit"],input[type="reset"]) { + /* disabled */ + &[disabled] { + --_bg: none; + --_text: var(--gray-6); + cursor: not-allowed; + box-shadow: var(--shadow-1); + + @media (--OSdark) { + --_text: var(--gray-5); + } + } + + /* pressing */ + &:where(:not(:active):hover) { + --_highlight-size: var(--size-2); + transition-delay: 0s; + transition-duration: .25s; + } + + /* icons */ + & > :where(svg) { + flex-shrink: 0; + filter: drop-shadow(var(--_ink-shadow)); + block-size: var(--_icon-size); + inline-size: var(--_icon-size); + } + + & > :where(svg > *) { + stroke: var(--_icon-color); + stroke-width: var(--border-size-2); + } +} + +/* adaptive indigo text */ +:where([type="submit"], form button:not([type],[disabled])) { + --_text: var(--_accent, var(--link)); +} + +/* red reset */ +:where([type="reset"]) { + --_text: var(--red-6); + --_border: var(--red-3); + + &:focus-visible { + outline-color: var(--red-6); + } + + @media (--OSdark) { + --_text: var(--red-2); + --_border: var(--surface-2); + } +} + +/* submit, form > button, reset matching hover border color */ +:where([type="submit"], [type="reset"], form button:not([type])):is(:hover, :focus-visible):not([disabled]) { + --_border: currentColor; +} + +/* file input */ +:where(input[type="file"]) { + padding: 0; + cursor: initial; + align-self: flex-start; + border-radius: var(--radius-2); + border: var(--border-size-1) solid var(--surface-2); + box-shadow: var(--inner-shadow-4); + color: var(--text-2); +} + +:where(input[type="file"])::-webkit-file-upload-button, +:where(input[type="file"])::file-selector-button { + margin-inline-end: 1.75ch; + cursor: pointer; +} + +/* special dark theme styles */ +@media (--OSdark) { + :where([type="submit"]), + :where(form button:not([type="button"])), + :where([type="reset"]), + :where([disabled]) { + --_bg: var(--surface-1); + } +} \ No newline at end of file diff --git a/src/extra/normalize.css b/src/extra/normalize.css index c4559ac3..78d0e787 100644 --- a/src/extra/normalize.css +++ b/src/extra/normalize.css @@ -97,12 +97,6 @@ } } -:where(button) { - user-select: none; - -webkit-tap-highlight-color: transparent; - -webkit-touch-callout: none; -} - :where(img, svg, video, canvas, audio, iframe, embed, object) { display: block; vertical-align: middle;