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

    - npm + npm - gzip size + gzip size

    @@ -147,8 +146,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.

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

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

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

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