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

@@ -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",

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);
+  }
+}

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;