feat: .button

Add classes for generic usages of (status) field borders

.github/workflows/npm-publish.yml

@@ -1,23 +0,0 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
-
-name: Publish to NPM
-
-on:
-  workflow_dispatch:
-  release:
-    types: [published]
-
-jobs:
-  publish-npm:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          registry-url: https://registry.npmjs.org/
-      - run: npm ci
-      - run: npm run release
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

README.md

@@ -1,7 +1,7 @@
 ## 98.css
 
-[![npm](https://98badges.now.sh/api/version)](http://npm.im/98.css)
-[![gzip size](https://98badges.now.sh/api/size)](https://unpkg.com/98.css)
+<a href="https://npm.im/98.css"><img height="29" alt="npm" src="https://98badges.now.sh/api/version" /></a>
+<a href="https://unpkg.com/98.css"><img height="29" alt="gzip size" src="https://98badges.now.sh/api/size" /></a>
 
 A design system for building faithful recreations of old UIs.
 
@@ -63,7 +63,7 @@ You can run a build manually with `npm run build`. This will write to the `dist/
 
 Refer to [the GitHub issues page](https://github.com/jdan/98.css/issues) to see bugs in my CSS or report new ones. I'd really like to see your pull requests (especially those new to open-source!) and will happily provide code review. 98.css is a fun, silly project and I'd like to make it a fun place to build your open-source muscle.
 
-Thank you for checking my little project out, I hope it brought you some joy today. Consider [starring/following along on GitHub](https://github.com/jdan/98.css/stargazers) and maybe subscribing to more fun things on [my twitter](https://twitter.com/jdan). 👋
+Thank you for checking my little project out, I hope it brought you some joy today. Consider [starring/following along on GitHub](https://github.com/jdan/98.css/stargazers) and maybe reading my posts on [Bluesky](https://bsky.app/profile/jdan.me). 👋
 
 ### Publishing
 

docs/index.html.ejs

@@ -44,6 +44,7 @@
           <li><a href="#tabs">Tabs</a></li>
           <li><a href="#table-view">TableView</a></li>
           <li><a href="#progress-indicator">Progress Indicator</a></li>
+          <li><a href="#field-borders">Field borders</a></li>
         </ul>
       </li>
       <li><a href="#issues-contributing-etc">Issues, Contributing, etc.</a></li>
@@ -57,10 +58,10 @@
 
     <p>
       <a href="http://npm.im/98.css" rel="nofollow" style="text-decoration: none">
-        <img alt="npm" src="https://98badges.now.sh/api/version" style="max-width:100%;">
+        <img height="29" alt="npm" src="https://98badges.now.sh/api/version" style="max-width:100%;">
       </a>
       <a href="https://unpkg.com/98.css" rel="nofollow" style="text-decoration: none">
-        <img alt="gzip size" src="https://98badges.now.sh/api/size" style="max-width:100%;">
+        <img height="29" alt="gzip size" src="https://98badges.now.sh/api/size" style="max-width:100%;">
       </a>
     </p>
 
@@ -413,34 +414,6 @@
             <input id="text${getCurrentId()}" disabled type="text" value="Windows Green"/>
           </div>
         `) %>
-
-        <p>
-          Other types of HTML5 text inputs are also supported.
-        </p>
-
-        <%- example(`
-        <div class="field-row-stacked" style="width: 200px">
-          <label for="text${getNewId()}">Email</label>
-          <input id="text${getCurrentId()}" type="email" value="admin@contoso.com"/>
-        </div>
-        <div class="field-row-stacked" style="width: 200px">
-          <label for="text${getNewId()}">Phone</label>
-          <input id="text${getCurrentId()}" type="tel" value="636-555-3226"/>
-        </div>
-        <div class="field-row-stacked" style="width: 200px">
-          <label for="text${getNewId()}">Password</label>
-          <input id="text${getCurrentId()}" type="password" value="hunter2"/>
-        </div>
-        <div class="field-row-stacked" style="width: 200px">
-          <label for="text${getNewId()}">Favorite Number</label>
-          <input id="text${getCurrentId()}" type="number" value="98"/>
-        </div>
-        <div class="field-row-stacked" style="width: 200px">
-          <label for="text${getNewId()}">Search</label>
-          <input id="text${getCurrentId()}" type="search" value="98 css"/>
-        </div>
-      `) %>
-
       </div>
 
 
@@ -1073,6 +1046,66 @@
       </div>
     </section>
 
+    <section class="component">
+      <h3 id="field-borders">Field borders</a></li></h3>
+      <div>
+        <blockquote>
+          Text boxes, check boxes, drop-down list boxes, spin boxes and list
+          boxes use the <em>field border style</em>. You can also use the style
+          for define the work area within a window. It uses the sunken outer and
+          sunken inner basic border styles.
+
+          For most controls, the interior of the field uses the button highlight
+          color. For text fields, such as text boxes and combo boxes, the
+          interior uses the button face color when the field is read-only or
+          disabled.
+
+          <footer>
+            &mdash; Microsoft Windows User Experience p. 421
+          </footer>
+        </blockquote>
+
+        <blockquote>
+          Status fields use the <em>status field border style</em>. This style
+          uses only the sunken outer basic border style. You use the status
+          field style in status bars and other read-only fields where the
+          content of the file can change dynamically.
+
+          <footer>
+            &mdash; Microsoft Windows User Experience p. 422
+          </footer>
+        </blockquote>
+
+        As mentioned in these guidelines, these styles are used in other
+        contexts than just form elements and status fields such as to indicate
+        work areas and dynamic content. For that reason, we provide three
+        classes for these generic usages, <code>field-border</code>,
+        <code>field-border-disabled</code>, and
+        <code>status-field-border</code>. These classes only define the border
+        and background color and minimal padding, so you will typically need to
+        at least provide some extra padding yourself.
+
+        <%- example(`
+          <div class="field-border" style="padding: 8px">
+            Work area
+          </div>
+        `) %>
+
+
+        <%- example(`
+          <div class="field-border-disabled" style="padding: 8px">
+            Disabled work area
+          </div>
+        `) %>
+
+        <%- example(`
+          <div class="status-field-border" style="padding: 8px">
+            Dynamic content
+          </div>
+        `) %>
+      </div>
+    </section>
+
     <h2 id="issues-contributing-etc">Issues, Contributing, etc.</h2>
 
     <p>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "98.css",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "98.css",
-      "version": "0.1.20",
+      "version": "0.1.21",
       "license": "MIT",
       "devDependencies": {
         "chokidar": "^3.3.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "98.css",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "description": "A design system for building faithful recreations of old UIs",
   "main": "dist/98.css",
   "directories": {

style.css

@@ -73,6 +73,7 @@
   --border-field: inset -1px -1px var(--button-highlight),
     inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
     inset 2px 2px var(--window-frame);
+  --border-status-field: inset -1px -1px var(--button-face), inset 1px 1px var(--button-shadow);
 
   /* Tabs */
   --border-tab: inset -1px 0 var(--window-frame),
@@ -104,6 +105,7 @@ body {
 }
 
 button,
+.button,
 label,
 input,
 legend,
@@ -142,6 +144,7 @@ u {
 }
 
 button,
+.button,
 input[type="submit"],
 input[type="reset"] {
   box-sizing: border-box;
@@ -158,6 +161,7 @@ input[type="reset"] {
 }
 
 button.default,
+.button.default,
 input[type="submit"].default,
 input[type="reset"].default {
   box-shadow: var(--default-button-border-raised-outer), var(--default-button-border-raised-inner);
@@ -171,27 +175,30 @@ input[type="reset"].default {
 }
 
 button:not(:disabled):active,
+button:not(:disabled).active,
+.button:not(:disabled):active,
+.button:not(:disabled).active,
 input[type="submit"]:not(:disabled):active,
-input[type="reset"]:not(:disabled):active {
+input[type="submit"]:not(:disabled).active,
+input[type="reset"]:not(:disabled):active,
+input[type="reset"]:not(:disabled).active {
   box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
   text-shadow: 1px 1px var(--text-color);
 }
 
 button.default:not(:disabled):active,
+.button.default:not(:disabled):active,
 input[type="submit"].default:not(:disabled):active,
-input[type="reset"].default:not(:disabled):active {
+input[type="reset"].default:not(:disabled):active,
+button.default:not(:disabled).active,
+.button.default:not(:disabled).active,
+input[type="submit"].default:not(:disabled).active,
+input[type="reset"].default:not(:disabled).active {
   box-shadow: var(--default-button-border-sunken-outer), var(--default-button-border-sunken-inner);
 }
 
-@media (not(hover)) {
-  button:not(:disabled):hover,
-  input[type="submit"]:not(:disabled):hover,
-  input[type="reset"]:not(:disabled):hover {
-    box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
-  }
-}
-
 button:focus,
+.button:focus,
 input[type="submit"]:focus,
 input[type="reset"]:focus {
   outline: 1px dotted #000000;
@@ -199,6 +206,7 @@ input[type="reset"]:focus {
 }
 
 button::-moz-focus-inner,
+.button::-moz-focus-inner,
 input[type="submit"]::-moz-focus-inner,
 input[type="reset"]::-moz-focus-inner {
   border: 0;
@@ -212,6 +220,7 @@ input[readonly] + label {
 }
 
 button:disabled,
+.button:disabled,
 input[type="submit"]:disabled,
 input[type="reset"]:disabled,
 :disabled + label {
@@ -320,7 +329,7 @@ input[type="reset"]:disabled,
 }
 
 .status-bar-field {
-  box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px #808080;
+  box-shadow: var(--border-status-field);
   flex-grow: 1;
   padding: 2px 3px;
   margin: 0;
@@ -366,6 +375,7 @@ legend {
 label {
   display: inline-flex;
   align-items: center;
+  user-select: none;
 }
 
 input[type="radio"],
@@ -474,6 +484,7 @@ input[type="checkbox"][disabled]:checked + label::after {
 input[type="text"],
 input[type="password"],
 input[type="email"],
+input[type="url"],
 input[type="tel"],
 input[type="number"],
 input[type="search"],
@@ -493,6 +504,7 @@ textarea {
 input[type="text"],
 input[type="password"],
 input[type="email"],
+input[type="url"],
 input[type="tel"],
 input[type="search"],
 select {
@@ -514,6 +526,7 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
 input[type="text"],
 input[type="password"],
 input[type="email"],
+input[type="url"],
 input[type="tel"],
 input[type="number"],
 input[type="search"] {
@@ -522,12 +535,14 @@ input[type="search"] {
 }
 
 input[type="email"]:disabled,
+input[type="url"]:disabled,
 input[type="tel"]:disabled,
 input[type="password"]:disabled,
 input[type="text"]:disabled,
 input[type="number"]:disabled,
 input[type="search"]:disabled,
 input[type="email"]:read-only,
+input[type="url"]:read-only,
 input[type="tel"]:read-only,
 input[type="password"]:read-only,
 input[type="text"]:read-only,
@@ -553,6 +568,7 @@ select:focus,
 input[type="text"]:focus,
 input[type="password"]:focus,
 input[type="email"]:focus,
+input[type="url"]:focus,
 input[type="tel"]:focus,
 input[type="number"]:focus,
 input[type="search"]:focus,
@@ -966,3 +982,21 @@ table > tbody > tr > * {
   background-repeat: repeat;
   background-size: 18px 100%;
 }
+
+.field-border {
+  background: var(--button-highlight);
+  box-shadow: var(--border-field);
+  padding: 2px;
+}
+
+.field-border-disabled {
+  background: var(--surface);
+  box-shadow: var(--border-field);
+  padding: 2px;
+}
+
+.status-field-border {
+  background: var(--surface);
+  box-shadow: var(--border-status-field);
+  padding: 1px;
+}