diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml deleted file mode 100644 index 17a83f5..0000000 --- a/.github/workflows/npm-publish.yml +++ /dev/null @@ -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}} diff --git a/README.md b/README.md index 3fa4de2..8aaac9a 100644 --- a/README.md +++ b/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) +npm +gzip size 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 diff --git a/docs/index.html.ejs b/docs/index.html.ejs index 088064a..be5a9a8 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -44,6 +44,7 @@
  • Tabs
  • TableView
  • Progress Indicator
    • +
  • Field borders
  • Issues, Contributing, etc.
    • @@ -57,10 +58,10 @@

    - npm + npm - gzip size + gzip size

    @@ -146,8 +147,8 @@ `)%>

    - You can add the class default to any button to apply additional styling, - useful when communicating to the user what default action would happen in the active window if + You can add the class default to any button to apply additional styling, + useful when communicating to the user what default action would happen in the active window if the Enter key was pressed on Windows 98.

    @@ -413,34 +414,6 @@ `) %> - -

    - Other types of HTML5 text inputs are also supported. -

    - - <%- example(` -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    - `) %> - @@ -1073,6 +1046,66 @@ +
    +

    Field borders

    +
    +
    + Text boxes, check boxes, drop-down list boxes, spin boxes and list + boxes use the field border style. 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. + +
    + — Microsoft Windows User Experience p. 421 +
    +
    + +
    + Status fields use the status field border style. 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. + +
    + — Microsoft Windows User Experience p. 422 +
    +
    + + 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, field-border, + field-border-disabled, and + status-field-border. 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(` +
    + Work area +
    + `) %> + + + <%- example(` +
    + Disabled work area +
    + `) %> + + <%- example(` +
    + Dynamic content +
    + `) %> +
    +
    +

    Issues, Contributing, etc.

    diff --git a/package-lock.json b/package-lock.json index 97cc4ab..ea55b69 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 148f9f8..1a4a01b 100644 --- a/package.json +++ b/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": { diff --git a/style.css b/style.css index 5abea5a..606d933 100644 --- a/style.css +++ b/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; +}