.github/workflows/npm-publish.yml

@@ -0,0 +1,23 @@
+# 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
 
-<a href="https://npm.im/98.css"><img height="29" alt="npm" src="https://98badges.now.sh/api/version" /></a>
+[![npm](https://98badges.now.sh/api/version)](http://npm.im/98.css)
-<a href="https://unpkg.com/98.css"><img height="29" alt="gzip size" src="https://98badges.now.sh/api/size" /></a>
+[![gzip size](https://98badges.now.sh/api/size)](https://unpkg.com/98.css)
 
 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 reading my posts on [Bluesky](https://bsky.app/profile/jdan.me). 👋
+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). 👋
 
 ### Publishing
 

docs/index.html.ejs

@@ -44,7 +44,6 @@
           <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>
@@ -58,10 +57,10 @@
 
     <p>
       <a href="http://npm.im/98.css" rel="nofollow" style="text-decoration: none">
-        <img height="29" alt="npm" src="https://98badges.now.sh/api/version" style="max-width:100%;">
+        <img 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 height="29" alt="gzip size" src="https://98badges.now.sh/api/size" style="max-width:100%;">
+        <img alt="gzip size" src="https://98badges.now.sh/api/size" style="max-width:100%;">
       </a>
     </p>
 
@@ -414,6 +413,34 @@
             <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>
 
 
@@ -1046,66 +1073,6 @@
       </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.21",
+  "version": "0.1.20",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "98.css",
-      "version": "0.1.21",
+      "version": "0.1.20",
       "license": "MIT",
       "devDependencies": {
         "chokidar": "^3.3.1",

package.json

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

style.css

@@ -73,7 +73,6 @@
   --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),
@@ -105,7 +104,6 @@ body {
 }
 
 button,
-.button,
 label,
 input,
 legend,
@@ -144,7 +142,6 @@ u {
 }
 
 button,
-.button,
 input[type="submit"],
 input[type="reset"] {
   box-sizing: border-box;
@@ -161,7 +158,6 @@ 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);
@@ -175,30 +171,27 @@ 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="submit"]:not(:disabled).active,
+input[type="reset"]: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;
@@ -206,7 +199,6 @@ 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;
@@ -220,7 +212,6 @@ input[readonly] + label {
 }
 
 button:disabled,
-.button:disabled,
 input[type="submit"]:disabled,
 input[type="reset"]:disabled,
 :disabled + label {
@@ -329,7 +320,7 @@ input[type="reset"]:disabled,
 }
 
 .status-bar-field {
-  box-shadow: var(--border-status-field);
+  box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px #808080;
   flex-grow: 1;
   padding: 2px 3px;
   margin: 0;
@@ -375,7 +366,6 @@ legend {
 label {
   display: inline-flex;
   align-items: center;
-  user-select: none;
 }
 
 input[type="radio"],
@@ -484,7 +474,6 @@ 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"],
@@ -504,7 +493,6 @@ textarea {
 input[type="text"],
 input[type="password"],
 input[type="email"],
-input[type="url"],
 input[type="tel"],
 input[type="search"],
 select {
@@ -526,7 +514,6 @@ 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"] {
@@ -535,14 +522,12 @@ 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,
@@ -568,7 +553,6 @@ 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,
@@ -982,21 +966,3 @@ 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;
-}