diff --git a/LICENSE b/LICENSE index 55b4959..544bcc4 100644 --- a/LICENSE +++ b/LICENSE @@ -1,4 +1,4 @@ -Copyright 2020 Jordan Scales +Copyright 2020 Adam Hammad, Jordan Scales Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: diff --git a/README.md b/README.md index a7c1c07..75c7a51 100644 --- a/README.md +++ b/README.md @@ -1,39 +1,39 @@ ## 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](https://98badges.now.sh/api/version)](http://npm.im/gui.css) +[![gzip size](https://98badges.now.sh/api/size)](https://unpkg.com/gui.css) A design system for building faithful recreations of old UIs. a screenshot of a window with the title 'My First VB4 Program' and two buttons OK and Cancel, styled like a Windows 98 dialog a magnified view showing pixel-perfect borders on a scrollbar and button element -98.css is a CSS file that takes semantic HTML and makes it look pretty. It does not ship with any JavaScript, so it is compatible with your frontend framework of choice. +GUI.css is a CSS file that takes semantic HTML and makes it look pretty. It does not ship with any JavaScript, so it is compatible with your frontend framework of choice. ### Installation / Usage -The easiest way to use 98.css is to import it from [unpkg](https://unpkg.com/). +The easiest way to use GUI.css is to import it from [unpkg](https://unpkg.com/). ```html - - 98.css example - - - - - -
-
-
- My First VB4 Program + + 98.css example + + + + + +
+
+
+ My First VB4 Program +
+
+
+

Hello, world!

-
-

Hello, world!

-
-
- + ``` diff --git a/build.js b/build.js index 4327df9..3ec0aba 100644 --- a/build.js +++ b/build.js @@ -10,21 +10,41 @@ const postcss = require("postcss"); const { homepage, version } = require("./package.json"); +const postcssParser = postcss() + .use(require("postcss-import")) + .use(require("postcss-nested")) + .use(require("postcss-inline-svg")) + .use(require("postcss-css-variables")) + .use(require("postcss-calc")) + .use(require("postcss-copy")({ dest: "dist", template: "[name].[ext]" })) + .use(require("cssnano")); + function buildCSS() { + const input = + `/*! GUI.css v${version} - ${homepage} */\n` + + fs.readFileSync("gui/index.scss"); + + return postcssParser + .process(input, { + from: "gui/index.scss", + to: "dist/GUI.css", + map: { inline: false }, + }) + .then((result) => { + mkdirp.sync("dist"); + fs.writeFileSync("dist/GUI.css", result.css); + fs.writeFileSync("dist/GUI.css.map", result.map.toString()); + }); +} + +function build98CSS() { const input = `/*! 98.css v${version} - ${homepage} */\n` + - fs.readFileSync("themes/XP/index.scss"); + fs.readFileSync("themes/98/index.scss"); - return postcss() - .use(require("postcss-import")) - .use(require("postcss-nested")) - .use(require("postcss-inline-svg")) - .use(require("postcss-css-variables")) - .use(require("postcss-calc")) - .use(require("postcss-copy")({ dest: "dist", template: "[name].[ext]" })) - .use(require("cssnano")) + return postcssParser .process(input, { - from: "themes/XP/index.scss", + from: "themes/98/index.scss", to: "dist/98.css", map: { inline: false }, }) @@ -35,6 +55,24 @@ function buildCSS() { }); } +function buildXPCSS() { + const input = + `/*! XP.css v${version} - ${homepage} */\n` + + fs.readFileSync("themes/XP/index.scss"); + + return postcssParser + .process(input, { + from: "themes/XP/index.scss", + to: "dist/XP.css", + map: { inline: false }, + }) + .then((result) => { + mkdirp.sync("dist"); + fs.writeFileSync("dist/XP.css", result.css); + fs.writeFileSync("dist/XP.css.map", result.map.toString()); + }); +} + function buildDocs() { let id = 0; function getNewId() { @@ -45,6 +83,7 @@ function buildDocs() { } const template = fs.readFileSync("docs/index.html.ejs", "utf-8"); + function example(code) { const magicBrackets = /\[\[(.*)\]\]/g; const dedented = dedent(code); @@ -75,7 +114,9 @@ function buildDocs() { } function build() { - buildCSS() + build98CSS() + .then(buildXPCSS) + .then(buildCSS) .then(buildDocs) .catch((err) => console.log(err)); } diff --git a/docs/docs.css b/docs/docs.css index a27183e..742727a 100644 --- a/docs/docs.css +++ b/docs/docs.css @@ -156,3 +156,13 @@ button.active { overflow-x: scroll; } } + +.theme-switcher { + position: fixed; + top: 1em; + right: 1em; + background: black; + color: white; + font-weight: bold; + padding: 5px; +} diff --git a/docs/index.html.ejs b/docs/index.html.ejs index 4a53dfb..bd4b930 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -10,14 +10,14 @@ - + - + - + +
+
+ + +
+
+
-

98.css

+

XP.css

A design system for building faithful recreations of old UIs.

@@ -61,14 +72,15 @@

Intro

- 98.css is a CSS library for building interfaces that look like Windows 98. - See more on GitHub. + XP.css is an extention of 98.css. A CSS library for building interfaces that look like old UIs.
+ See XP.css on GitHub
+ See 98.css on GitHub

- My First VB4 Program + My First Program
@@ -850,4 +862,6 @@
+ + \ No newline at end of file diff --git a/docs/script.js b/docs/script.js new file mode 100644 index 0000000..1d18f4e --- /dev/null +++ b/docs/script.js @@ -0,0 +1,9 @@ +const themeSwitcher = document.getElementById("theme-switcher-select"); +const stylesheet = document.getElementById("theme-stylesheet"); + +let theme = stylesheet.href; + +themeSwitcher.addEventListener("change", (e) => { + stylesheet.href = e.target.value; + document.getElementsByTagName("h1")[0].innerText = e.target.value; +}); diff --git a/gui/_tabs.scss b/gui/_tabs.scss index 6a2d8bf..79ab4ae 100644 --- a/gui/_tabs.scss +++ b/gui/_tabs.scss @@ -1,6 +1,6 @@ :root { --tab-border: 1px solid #888; - --tab-bg: white; + --tab-bg: var(--surface); } .tabs { diff --git a/gui/_variables.scss b/gui/_variables.scss index 4c3bbd0..ee7711e 100644 --- a/gui/_variables.scss +++ b/gui/_variables.scss @@ -5,7 +5,7 @@ :root { --sans-serif: "Pixelated MS Sans Serif", Arial; /* Color */ - --surface: #c0c0c0; + --surface: lightblue; --button-highlight: #ffffff; --button-face: #dfdfdf; --button-shadow: #808080; diff --git a/gui/_window.scss b/gui/_window.scss index 19a586a..098c0b8 100644 --- a/gui/_window.scss +++ b/gui/_window.scss @@ -1,3 +1,6 @@ +:root { + --title-bar-bg: black; +} .window { -webkit-font-smoothing: none; font-size: 11px; @@ -11,7 +14,7 @@ .title-bar { -webkit-font-smoothing: none; font-size: 11px; - background: linear-gradient(90deg, var(--dialog-blue), var(--dialog-blue-light)); + background: var(--title-bar-bg); padding: 3px 2px 3px 3px; display: flex; justify-content: space-between; @@ -41,7 +44,6 @@ button[aria-label="Help"] { } button[aria-label="Close"] { - margin-left: 2px; } } .window-body { diff --git a/gui/index.scss b/gui/index.scss index 5fe5b28..b4a5d95 100644 --- a/gui/index.scss +++ b/gui/index.scss @@ -14,3 +14,7 @@ @import "_treeview.scss"; @import "_fieldset.scss"; @import "_tabs.scss"; + +.surface { + background: var(--surface); +} diff --git a/package-lock.json b/package-lock.json index d8d1c16..e74d30a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { - "name": "98.css", - "version": "0.1.14", + "name": "XP.css", + "version": "0.0.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -254,6 +254,16 @@ "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==", "dev": true }, + "bindings": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", + "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", + "dev": true, + "optional": true, + "requires": { + "file-uri-to-path": "1.0.0" + } + }, "boolbase": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", @@ -522,12 +532,6 @@ "simple-swizzle": "^0.2.2" } }, - "colors": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz", - "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==", - "dev": true - }, "commander": { "version": "2.20.3", "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", @@ -570,16 +574,6 @@ "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "dev": true }, - "cors": { - "version": "2.8.5", - "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", - "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", - "dev": true, - "requires": { - "object-assign": "^4", - "vary": "^1" - } - }, "cosmiconfig": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz", @@ -1135,6 +1129,13 @@ "websocket-driver": ">=0.5.1" } }, + "file-uri-to-path": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", + "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", + "dev": true, + "optional": true + }, "filename-reserved-regex": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz", @@ -1879,553 +1880,37 @@ "upath": "^1.1.1" } }, + "colors": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz", + "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==", + "dev": true + }, + "cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "dev": true, + "requires": { + "object-assign": "^4", + "vary": "^1" + } + }, + "depd": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", + "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=", + "dev": true + }, "fsevents": { - "version": "1.2.12", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.12.tgz", - "integrity": "sha512-Ggd/Ktt7E7I8pxZRbGIs7vwqAPscSESMrCSkx2FtWeqmheJgCo2R74fTsZFCifr0VTPwqRpPv17+6b8Zp7th0Q==", + "version": "1.2.13", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", + "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", "dev": true, "optional": true, "requires": { - "node-pre-gyp": "*" - }, - "dependencies": { - "abbrev": { - "version": "1.1.1", - "bundled": true, - "dev": true, - "optional": true - }, - "ansi-regex": { - "version": "2.1.1", - "bundled": true, - "dev": true, - "optional": true - }, - "aproba": { - "version": "1.2.0", - "bundled": true, - "dev": true, - "optional": true - }, - "are-we-there-yet": { - "version": "1.1.5", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "delegates": "^1.0.0", - "readable-stream": "^2.0.6" - } - }, - "balanced-match": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "brace-expansion": { - "version": "1.1.11", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "balanced-match": "^1.0.0", - "concat-map": "0.0.1" - } - }, - "chownr": { - "version": "1.1.4", - "bundled": true, - "dev": true, - "optional": true - }, - "code-point-at": { - "version": "1.1.0", - "bundled": true, - "dev": true, - "optional": true - }, - "concat-map": { - "version": "0.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "console-control-strings": { - "version": "1.1.0", - "bundled": true, - "dev": true, - "optional": true - }, - "core-util-is": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "debug": { - "version": "3.2.6", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "ms": "^2.1.1" - } - }, - "deep-extend": { - "version": "0.6.0", - "bundled": true, - "dev": true, - "optional": true - }, - "delegates": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "detect-libc": { - "version": "1.0.3", - "bundled": true, - "dev": true, - "optional": true - }, - "fs-minipass": { - "version": "1.2.7", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "minipass": "^2.6.0" - } - }, - "fs.realpath": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "gauge": { - "version": "2.7.4", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "aproba": "^1.0.3", - "console-control-strings": "^1.0.0", - "has-unicode": "^2.0.0", - "object-assign": "^4.1.0", - "signal-exit": "^3.0.0", - "string-width": "^1.0.1", - "strip-ansi": "^3.0.1", - "wide-align": "^1.1.0" - } - }, - "glob": { - "version": "7.1.6", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^3.0.4", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" - } - }, - "has-unicode": { - "version": "2.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "iconv-lite": { - "version": "0.4.24", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "safer-buffer": ">= 2.1.2 < 3" - } - }, - "ignore-walk": { - "version": "3.0.3", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "minimatch": "^3.0.4" - } - }, - "inflight": { - "version": "1.0.6", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "once": "^1.3.0", - "wrappy": "1" - } - }, - "inherits": { - "version": "2.0.4", - "bundled": true, - "dev": true, - "optional": true - }, - "ini": { - "version": "1.3.5", - "bundled": true, - "dev": true, - "optional": true - }, - "is-fullwidth-code-point": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "number-is-nan": "^1.0.0" - } - }, - "isarray": { - "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "minimatch": { - "version": "3.0.4", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "brace-expansion": "^1.1.7" - } - }, - "minimist": { - "version": "1.2.5", - "bundled": true, - "dev": true, - "optional": true - }, - "minipass": { - "version": "2.9.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "safe-buffer": "^5.1.2", - "yallist": "^3.0.0" - } - }, - "minizlib": { - "version": "1.3.3", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "minipass": "^2.9.0" - } - }, - "mkdirp": { - "version": "0.5.3", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "minimist": "^1.2.5" - } - }, - "ms": { - "version": "2.1.2", - "bundled": true, - "dev": true, - "optional": true - }, - "needle": { - "version": "2.3.3", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "debug": "^3.2.6", - "iconv-lite": "^0.4.4", - "sax": "^1.2.4" - } - }, - "node-pre-gyp": { - "version": "0.14.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "detect-libc": "^1.0.2", - "mkdirp": "^0.5.1", - "needle": "^2.2.1", - "nopt": "^4.0.1", - "npm-packlist": "^1.1.6", - "npmlog": "^4.0.2", - "rc": "^1.2.7", - "rimraf": "^2.6.1", - "semver": "^5.3.0", - "tar": "^4.4.2" - } - }, - "nopt": { - "version": "4.0.3", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "abbrev": "1", - "osenv": "^0.1.4" - } - }, - "npm-bundled": { - "version": "1.1.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "npm-normalize-package-bin": "^1.0.1" - } - }, - "npm-normalize-package-bin": { - "version": "1.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "npm-packlist": { - "version": "1.4.8", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "ignore-walk": "^3.0.1", - "npm-bundled": "^1.0.1", - "npm-normalize-package-bin": "^1.0.1" - } - }, - "npmlog": { - "version": "4.1.2", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "are-we-there-yet": "~1.1.2", - "console-control-strings": "~1.1.0", - "gauge": "~2.7.3", - "set-blocking": "~2.0.0" - } - }, - "number-is-nan": { - "version": "1.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "object-assign": { - "version": "4.1.1", - "bundled": true, - "dev": true, - "optional": true - }, - "once": { - "version": "1.4.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "wrappy": "1" - } - }, - "os-homedir": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "os-tmpdir": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "osenv": { - "version": "0.1.5", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "os-homedir": "^1.0.0", - "os-tmpdir": "^1.0.0" - } - }, - "path-is-absolute": { - "version": "1.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "process-nextick-args": { - "version": "2.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "rc": { - "version": "1.2.8", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "deep-extend": "^0.6.0", - "ini": "~1.3.0", - "minimist": "^1.2.0", - "strip-json-comments": "~2.0.1" - } - }, - "readable-stream": { - "version": "2.3.7", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "core-util-is": "~1.0.0", - "inherits": "~2.0.3", - "isarray": "~1.0.0", - "process-nextick-args": "~2.0.0", - "safe-buffer": "~5.1.1", - "string_decoder": "~1.1.1", - "util-deprecate": "~1.0.1" - } - }, - "rimraf": { - "version": "2.7.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "glob": "^7.1.3" - } - }, - "safe-buffer": { - "version": "5.1.2", - "bundled": true, - "dev": true, - "optional": true - }, - "safer-buffer": { - "version": "2.1.2", - "bundled": true, - "dev": true, - "optional": true - }, - "sax": { - "version": "1.2.4", - "bundled": true, - "dev": true, - "optional": true - }, - "semver": { - "version": "5.7.1", - "bundled": true, - "dev": true, - "optional": true - }, - "set-blocking": { - "version": "2.0.0", - "bundled": true, - "dev": true, - "optional": true - }, - "signal-exit": { - "version": "3.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "string-width": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "code-point-at": "^1.0.0", - "is-fullwidth-code-point": "^1.0.0", - "strip-ansi": "^3.0.0" - } - }, - "string_decoder": { - "version": "1.1.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "safe-buffer": "~5.1.0" - } - }, - "strip-ansi": { - "version": "3.0.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "ansi-regex": "^2.0.0" - } - }, - "strip-json-comments": { - "version": "2.0.1", - "bundled": true, - "dev": true, - "optional": true - }, - "tar": { - "version": "4.4.13", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "chownr": "^1.1.1", - "fs-minipass": "^1.2.5", - "minipass": "^2.8.6", - "minizlib": "^1.2.1", - "mkdirp": "^0.5.0", - "safe-buffer": "^5.1.2", - "yallist": "^3.0.3" - } - }, - "util-deprecate": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "wide-align": { - "version": "1.1.3", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "string-width": "^1.0.2 || 2" - } - }, - "wrappy": { - "version": "1.0.2", - "bundled": true, - "dev": true, - "optional": true - }, - "yallist": { - "version": "3.1.1", - "bundled": true, - "dev": true, - "optional": true - } + "bindings": "^1.5.0", + "nan": "^2.12.1" } }, "glob-parent": { @@ -2458,12 +1943,33 @@ "binary-extensions": "^1.0.0" } }, + "ms": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", + "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==", + "dev": true + }, "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", "dev": true }, + "opn": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/opn/-/opn-6.0.0.tgz", + "integrity": "sha512-I9PKfIZC+e4RXZ/qr1RhgyCnGgYX0UEIlXgWnCOVACIvFgaC9rz6Won7xbdhoHrd8IIhV7YEpHjreNUNkqCGkQ==", + "dev": true, + "requires": { + "is-wsl": "^1.1.0" + } + }, + "proxy-middleware": { + "version": "0.15.0", + "resolved": "https://registry.npmjs.org/proxy-middleware/-/proxy-middleware-0.15.0.tgz", + "integrity": "sha1-o/3xvvtzD5UZZYcqwvYHTGFHelY=", + "dev": true + }, "readable-stream": { "version": "2.3.7", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz", @@ -2496,6 +2002,27 @@ "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "dev": true }, + "send": { + "version": "0.17.1", + "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz", + "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==", + "dev": true, + "requires": { + "debug": "2.6.9", + "depd": "~1.1.2", + "destroy": "~1.0.4", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "fresh": "0.5.2", + "http-errors": "~1.7.2", + "mime": "1.6.0", + "ms": "2.1.1", + "on-finished": "~2.3.0", + "range-parser": "~1.2.1", + "statuses": "~1.5.0" + } + }, "string_decoder": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", @@ -2665,6 +2192,13 @@ "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", "dev": true }, + "nan": { + "version": "2.14.1", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz", + "integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==", + "dev": true, + "optional": true + }, "nanomatch": { "version": "1.2.13", "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz", @@ -2842,15 +2376,6 @@ "wrappy": "1" } }, - "opn": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/opn/-/opn-6.0.0.tgz", - "integrity": "sha512-I9PKfIZC+e4RXZ/qr1RhgyCnGgYX0UEIlXgWnCOVACIvFgaC9rz6Won7xbdhoHrd8IIhV7YEpHjreNUNkqCGkQ==", - "dev": true, - "requires": { - "is-wsl": "^1.1.0" - } - }, "p-limit": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz", @@ -3674,12 +3199,6 @@ "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==", "dev": true }, - "proxy-middleware": { - "version": "0.15.0", - "resolved": "https://registry.npmjs.org/proxy-middleware/-/proxy-middleware-0.15.0.tgz", - "integrity": "sha1-o/3xvvtzD5UZZYcqwvYHTGFHelY=", - "dev": true - }, "q": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz", @@ -3696,6 +3215,12 @@ "strict-uri-encode": "^1.0.0" } }, + "range-parser": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", + "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==", + "dev": true + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -3821,47 +3346,6 @@ "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "dev": true }, - "send": { - "version": "0.17.1", - "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz", - "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==", - "dev": true, - "requires": { - "debug": "2.6.9", - "depd": "~1.1.2", - "destroy": "~1.0.4", - "encodeurl": "~1.0.2", - "escape-html": "~1.0.3", - "etag": "~1.8.1", - "fresh": "0.5.2", - "http-errors": "~1.7.2", - "mime": "1.6.0", - "ms": "2.1.1", - "on-finished": "~2.3.0", - "range-parser": "~1.2.1", - "statuses": "~1.5.0" - }, - "dependencies": { - "depd": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", - "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=", - "dev": true - }, - "ms": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", - "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==", - "dev": true - }, - "range-parser": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", - "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==", - "dev": true - } - } - }, "serve-index": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz", diff --git a/package.json b/package.json index f83c0b0..8af3b9d 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { - "name": "98.css", - "version": "0.1.14", + "name": "XP.css", + "version": "0.0.1", "description": "A design system for building faithful recreations of old UIs", - "main": "dist/98.css", + "main": "dist/XP.css", "directories": { "doc": "docs" }, @@ -13,18 +13,20 @@ }, "repository": { "type": "git", - "url": "git+https://github.com/jdan/98.css.git" + "url": "git+https://github.com/botoxparty/XP.css.git" }, "keywords": [ "css", - "windows98" + "windows98", + "windowsXP", + "gui" ], - "author": "Jordan Scales ", + "author": "Adam Hammad ", "license": "MIT", "bugs": { - "url": "https://github.com/jdan/98.css/issues" + "url": "https://github.com/botoxparty/XP.css/issues" }, - "homepage": "https://github.com/jdan/98.css", + "homepage": "https://github.com/botoxparty/XP.css", "devDependencies": { "chokidar": "^3.3.1", "cssnano": "^4.1.10", diff --git a/themes/98/_forms.scss b/themes/98/_forms.scss index f304040..d418636 100644 --- a/themes/98/_forms.scss +++ b/themes/98/_forms.scss @@ -1,7 +1,6 @@ input[type="checkbox"] { & + label:before { box-shadow: none; - border: 1px solid #1d5281; background: linear-gradient(135deg, rgba(220, 220, 215, 1) 0%, rgba(255, 255, 255, 1) 100%); } &:checked + label { diff --git a/themes/98/_tabs.scss b/themes/98/_tabs.scss new file mode 100644 index 0000000..96e882d --- /dev/null +++ b/themes/98/_tabs.scss @@ -0,0 +1,38 @@ +:root { + --tab-border: none; +} + +.tabs { + > input[type="radio"] { + ~ label { + background: var(--surface); + box-shadow: inset 1px 1px #dfdfdf, inset 2px 2px #fff; + margin-right: 2px; + border-top-right-radius: 3px; + border-top-left-radius: 3px; + &:before, + &:after { + display: none; + } + } + &:checked + label:after { + display: none; + } + } + .tab-title { + top: 3px; + } + .tab-link { + padding: 3px 12px; + } + > [type="radio"]:checked + label { + z-index: 2; + box-shadow: inset 1px 1px #dfdfdf, inset 2px 2px #fff; + } + article { + box-shadow: inset 1px 1px #fcfcfe, inset -1px -1px #fcfcfe, 1px 2px 2px 0px rgba(208, 206, 191, 0.75); + } + .tab { + box-shadow: var(--border-window-outer), var(--border-window-inner); + } +} diff --git a/themes/98/_window.scss b/themes/98/_window.scss index 49ecb6d..73bd0d8 100644 --- a/themes/98/_window.scss +++ b/themes/98/_window.scss @@ -1,3 +1,6 @@ +:root { + --title-bar-bg: linear-gradient(90deg, var(--dialog-blue), var(--dialog-blue-light)); +} .window { font-family: var(--sans-serif); } diff --git a/themes/98/icon/button-down-active.svg b/themes/98/icon/button-down-active.svg new file mode 100644 index 0000000..0ef5732 --- /dev/null +++ b/themes/98/icon/button-down-active.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/themes/98/icon/button-down.svg b/themes/98/icon/button-down.svg new file mode 100644 index 0000000..2d0b52b --- /dev/null +++ b/themes/98/icon/button-down.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/themes/98/icon/button-left.svg b/themes/98/icon/button-left.svg new file mode 100644 index 0000000..f31b886 --- /dev/null +++ b/themes/98/icon/button-left.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/themes/98/icon/button-right.svg b/themes/98/icon/button-right.svg new file mode 100644 index 0000000..ddab662 --- /dev/null +++ b/themes/98/icon/button-right.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/themes/98/icon/button-up.svg b/themes/98/icon/button-up.svg new file mode 100644 index 0000000..91f8d4f --- /dev/null +++ b/themes/98/icon/button-up.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/themes/98/icon/checkmark-disabled.svg b/themes/98/icon/checkmark-disabled.svg new file mode 100644 index 0000000..ac065de --- /dev/null +++ b/themes/98/icon/checkmark-disabled.svg @@ -0,0 +1,3 @@ + + + diff --git a/themes/98/icon/checkmark.svg b/themes/98/icon/checkmark.svg new file mode 100644 index 0000000..6a3bbb4 --- /dev/null +++ b/themes/98/icon/checkmark.svg @@ -0,0 +1,3 @@ + + + diff --git a/themes/98/icon/close.svg b/themes/98/icon/close.svg new file mode 100644 index 0000000..419a57a --- /dev/null +++ b/themes/98/icon/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/themes/98/icon/help.svg b/themes/98/icon/help.svg new file mode 100644 index 0000000..20a3fda --- /dev/null +++ b/themes/98/icon/help.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/themes/98/icon/indicator-horizontal.svg b/themes/98/icon/indicator-horizontal.svg new file mode 100644 index 0000000..f6db8b0 --- /dev/null +++ b/themes/98/icon/indicator-horizontal.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/themes/98/icon/indicator-rectangle-horizontal.svg b/themes/98/icon/indicator-rectangle-horizontal.svg new file mode 100644 index 0000000..7d0d9b1 --- /dev/null +++ b/themes/98/icon/indicator-rectangle-horizontal.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/themes/98/icon/maximize.svg b/themes/98/icon/maximize.svg new file mode 100644 index 0000000..e9d4982 --- /dev/null +++ b/themes/98/icon/maximize.svg @@ -0,0 +1,3 @@ + + + diff --git a/themes/98/icon/minimize.svg b/themes/98/icon/minimize.svg new file mode 100644 index 0000000..a676778 --- /dev/null +++ b/themes/98/icon/minimize.svg @@ -0,0 +1,3 @@ + + + diff --git a/themes/98/icon/radio-border-disabled.svg b/themes/98/icon/radio-border-disabled.svg new file mode 100644 index 0000000..fd003cd --- /dev/null +++ b/themes/98/icon/radio-border-disabled.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/themes/98/icon/radio-border.svg b/themes/98/icon/radio-border.svg new file mode 100644 index 0000000..633be90 --- /dev/null +++ b/themes/98/icon/radio-border.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/themes/98/icon/radio-dot-disabled.svg b/themes/98/icon/radio-dot-disabled.svg new file mode 100644 index 0000000..7d59f52 --- /dev/null +++ b/themes/98/icon/radio-dot-disabled.svg @@ -0,0 +1,3 @@ + + + diff --git a/themes/98/icon/radio-dot.svg b/themes/98/icon/radio-dot.svg new file mode 100644 index 0000000..61b884d --- /dev/null +++ b/themes/98/icon/radio-dot.svg @@ -0,0 +1,3 @@ + + + diff --git a/themes/98/icon/scrollbar-background.svg b/themes/98/icon/scrollbar-background.svg new file mode 100644 index 0000000..3770071 --- /dev/null +++ b/themes/98/icon/scrollbar-background.svg @@ -0,0 +1,4 @@ + + + + diff --git a/themes/98/index.scss b/themes/98/index.scss index cad6266..9b00157 100644 --- a/themes/98/index.scss +++ b/themes/98/index.scss @@ -1,5 +1,8 @@ @import "../../gui/index.scss"; @import "_window.scss"; +@import "_forms.scss"; +@import "_tabs.scss"; + :root { --sans-serif: "Pixelated MS Sans Serif", Arial; --surface: #c0c0c0; @@ -42,3 +45,9 @@ --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); } + +body { + font-family: Arial; + font-size: 12px; + color: #222222; +} diff --git a/themes/XP/_forms.scss b/themes/XP/_forms.scss index 8a17126..48081b3 100644 --- a/themes/XP/_forms.scss +++ b/themes/XP/_forms.scss @@ -199,10 +199,11 @@ input[type="range"].has-box-indicator { select { border: 1px solid #7f9db9; -} -select { background-image: svg-load("./icon/dropdown.svg"); background-size: 15px; + &:focus { + box-shadow: inset 2px 2px white, inset -2px -2px white; + } &:hover { background-image: svg-load("./icon/dropdown-hover.svg"); }