davejansen/system.css
1
0
Fork 0
mirror of https://github.com/sakofchit/system.css.git synced 2026-05-05 06:01:22 +09:00
Code Issues Activity

Merge branch 'patrickhlauke-patrickhlauke-a11y-improvements'

Browse Source
This commit is contained in:
sakofchit
2022-08-13 10:55:18 -04:00
parent e186d97305 bbedf07e43
commit ebe052fa95
13 changed files with 177 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@@ -30,9 +30,9 @@ Here's some starter code to help you get started:
<body>
<div class="window" style="width:30rem;">
<div class="title-bar">
<button class="close"></button>
<button aria-label="Close" class="close"></button>
<h1 class="title">System.css</h1>
<button class="resize"></button>
<button aria-label="Resize" class="resize"></button>
</div>
<div class="separator"></div>
@@ -43,9 +43,9 @@ Here's some starter code to help you get started:
<div class="window" style="width:30rem;">
<div class="title-bar">
<button class="close"></button>
<button aria-label="Close" class="close"></button>
<h1 class="title">Search</h1>
<button class="hidden"></button>
<button aria-label="Resize" disabled class="hidden"></button>
</div>
<div class="separator"></div>
@@ -89,5 +89,4 @@ If you'd like to see what else I'm up to, consider following me on [Twitter](htt
## Sponsors
[![CSS Scan](https://d33wubrfki0l68.cloudfront.net/6da92d1f39c939204d13f67ec76e725362b41e70/55cb0/img/logo.png)](https://getcssscan.com/?ref=systemcss)
[CSS Scan](https://getcssscan.com/?ref=systemcss): The fastest and easiest way to check, copy and edit CSS

27
docs/docs.css
View File

@@ -73,26 +73,23 @@ h3 {
font-size: 1em;
}
.dialog-text {
font-family: Chicago_12;
font-size: 1em;
margin-top: 20px;
vertical-align: center;
}
.modal-text, .alert-text {
font-family: Chicago_12;
font-size: 1.2em;
margin-top: 10px;
vertical-align: center;
}
.alert-text,
.dialog-text,
.modal-text,
.modeless-text {
font-family: Chicago_12;
font-size: 1em;
vertical-align: center;
font-weight: normal;
}
.dialog-text {
margin-top: 20px;
}
.modal-text, .alert-text {
font-size: 1.2em;
margin-top: 10px;
}
p {
font-family: Geneva;

138
docs/index.html.ejs
View File

@@ -1,5 +1,5 @@
<!doctype html>
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>system.css | A design system for building retro Apple-inspired interfaces</title>
<link rel="Shortcut Icon" type="image/x-icon" href="icon.png" />
@@ -17,38 +17,36 @@
<aside>
<div class="window">
<div class="title-bar">
<button class="close"><span class="hidden">Close</span></button>
<button aria-label="Close" class="close"></button>
<h1 class="title">Docs</h1>
<button class="resize"><span class="hidden">Resize</span></button>
<button aria-label="Resize" class="resize"></button>
</div>
<div class="separator"></div>
<div class="window-pane">
<ul class="menu-items">
<a href="#intro"><li>Intro</li></a>
<li>Components</li>
<li><a href="#intro">Intro</a></li>
<li>Components
<ul>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#radio-buttons">Radio Buttons</a></li>
<li><a href="#checkboxes">Checkboxes</a></li>
<li><a href="#dropdown">Dropdown</a></li>
<li><a href="#text-box">Text Box</a></li>
</ul>
</li>
<li>Windows
<ul>
<a href="#buttons"><li>Buttons</li></a>
<a href="#radio-buttons"><li>Radio Buttons</li></a>
<a href="#checkboxes"><li>Checkboxes</li></a>
<a href="#dropdown"><li>Dropdown</li></a>
<a href="#text-box"><li>Text Box</li></a>
<li><a href="#title-bar">Title Bar</a></li>
<li><a href="#window-contents">Window Contents</a></li>
<li><a href="#dialogs">Dialogs</a></li>
</ul>
<br>
<li>Windows</li>
<ul>
<a href="#title-bar"><li>Title Bar</li></a>
<a href="#window-contents"><li>Window Contents</li></a>
<a href="#dialogs"><li>Dialogs</li></a>
</ul>
<br>
<a href="#contributing"><li>Contributing, Credits, etc.</li></a>
<br>
<li>Sponsors</li>
</li>
<li><a href="#contributing">Contributing, Credits, etc.</a></li>
<li>Sponsors
<ul>
<a href="https://getcssscan.com/?ref=systemcss" target="_blank"><li>Get CSS Scan browser extension</li></a>
<li><a href="https://getcssscan.com/?ref=systemcss" target="_blank">Get CSS Scan browser extension</a></li>
</ul>
</li>
</ul>
</div>
</div>
@@ -59,7 +57,7 @@
<div class="container">
<div class="standard-dialog">
<p class="heading center">System.css</p>
<p class="desc center">A design system for building retro <img class="apple">-inspired interfaces</p>
<p class="desc center">A design system for building retro <span role="img" class="apple" aria-label="Apple"></span>-inspired interfaces</p>
<h2 class="subheading" id="intro">Intro</h2>
<p>System.css is a CSS library for building interfaces that resemble Apple's System OS which ran from 1984-1991. Design-wise, not much really changed from System 1 to System 6; however this library is based on System 6 as it was the final monochrome version of MacOS.</p>
@@ -89,7 +87,7 @@
<%- example(`
<button [[class="btn active"]] class="btn">Active</button>
<button [[class="btn active"]]>Active</button>
`)%>
@@ -196,13 +194,11 @@
<%- example(`
<label class="dropdown">
<details class="dropdown">
<div class="dd-toggle">
<summary class="dd-toggle">
File
</div>
<input type="checkbox" class="dd-input" id="test">
</summary>
<ul class="dd-menu">
<li>Action</li>
@@ -214,15 +210,13 @@
</li>
</ul>
</label>
</details>
<label class="dropdown">
<details class="dropdown">
<div class="dd-toggle">
<summary class="dd-toggle">
Edit
</div>
<input type="checkbox" class="dd-input" id="test">
</summary>
<ul class="dd-menu">
<li>Woah</li>
@@ -235,15 +229,13 @@
</li>
</ul>
</label>
</details>
<label class="dropdown">
<details class="dropdown">
<div class="dd-toggle">
<summary class="dd-toggle">
View
</div>
<input type="checkbox" class="dd-input" id="test">
</summary>
<ul class="dd-menu">
<li>Action</li>
@@ -255,15 +247,13 @@
</li>
</ul>
</label>
</details>
<label class="dropdown">
<details class="dropdown">
<div class="dd-toggle">
<summary class="dd-toggle">
Special
</div>
<input type="checkbox" class="dd-input" id="test">
</summary>
<ul class="dd-menu">
<li>You probably</li>
@@ -272,7 +262,7 @@
<li>Idea</li>
</ul>
</label>
</details>
`)%>
</div>
@@ -290,17 +280,17 @@
<%- example(`
<input type="text" placeholder="some cool text"/>
<input aria-label="Example text box" type="text" placeholder="some cool text"/>
`)%>
<p>Other types of text are also supported</p>
<%- example(`
<form>
<label for="email">Email</label><br>
<input type="email" placeholder="panic@thedis.co"/><br>
<label for="password">Password</label><br>
<input type="password" placeholder="password"/><br><br>
<label for="text_email">Email</label><br>
<input id="text_email" type="email" placeholder="panic@thedis.co"/><br>
<label for="text_pwd">Password</label><br>
<input id="text_pwd" type="password" placeholder="password"/><br><br>
</form>
`)%>
@@ -337,9 +327,9 @@
<div class="window">
<div class="title-bar">
<button class="close"></button>
<button aria-label="Close" class="close"></button>
<h1 class="title">A Title Bar</h1>
<button class="hidden"></button>
<button aria-label="Resize" disabled class="hidden"></button>
</div>
</div>
@@ -351,9 +341,9 @@
<div class="window">
<div class="title-bar">
<button class="close"></button>
<button aria-label="Close" class="close"></button>
<h1 class="title">Also a Title Bar</h1>
<button class="resize"></button>
<button aria-label="Resize" class="resize"></button>
</div>
</div>
@@ -399,9 +389,9 @@
<div class="window">
<div class="title-bar">
<button class="close"></button>
<button aria-label="Close" class="close"></button>
<h1 class="title">Window Without Stuff</h1>
<button class="resize"></button>
<button aria-label="Resize" class="resize"></button>
</div>
</div>
@@ -414,9 +404,9 @@
<div class="window">
<div class="title-bar">
<button class="close"></button>
<button aria-label="Close" class="close"></button>
<h1 class="title">Window With Stuff</h1>
<button class="resize"></button>
<button aria-label="Resize" class="resize"></button>
</div>
<div class="separator"></div>
@@ -435,9 +425,9 @@
<div class="window">
<div class="title-bar">
<button class="close"></button>
<button aria-label="Close" class="close"></button>
<h1 class="title">Window With Details</h1>
<button class="resize"></button>
<button aria-label="Resize" class="resize"></button>
</div>
<div class="details-bar">
<span>some</span>
@@ -491,7 +481,7 @@
<%- example(`
<div class="standard-dialog center" style="width:50%;">
<p class="dialog-text">The Macintosh Finder, Version 1.0 (18 Jan 84)</p>
<h1 class="dialog-text">The Macintosh Finder, Version 1.0 (18 Jan 84)</h1>
<p class="dialog-text">&copy; 1984 Apple Computer</p>
</div>
@@ -506,16 +496,16 @@
<%- example(`
<div class="window" style="width:30rem;">
<div class="title-bar">
<button class="close"></button>
<button aria-label="Close" class="close"></button>
<h1 class="title">Modeless Dialog</h1>
<button class="hidden"></button>
<button aria-label="Resize" disabled class="hidden"></button>
</div>
<div class="separator"></div>
<div class="modeless-dialog">
<section class="field-row" style="justify-content: flex-start">
<p class="modeless-text">Find:</p>
<input type="text" style="width:100%;" placeholder=""/>
<label for="text_find" class="modeless-text">Find:</label>
<input id="text_find" type="text" style="width:100%;" placeholder=""/>
</section>
<section class="field-row" style="justify-content: flex-end">
@@ -535,7 +525,7 @@
<div class="inner-border center">
<div class="modal-contents">
<p class="modal-text">Modal Dialog</p>
<h1 class="modal-text">Modal Dialog</h1>
<div style="padding-left: 20px;">
<div class="field-row">
<input id="radio${getNewId()}" type="radio" name="second-example">
@@ -617,6 +607,10 @@
</div>
</section>
<h2 class="subheading">Sponsors</h2>
<p><a href="https://getcssscan.com/?ref=systemcss" target="_blank">CSS Scan</a>: The fastest and easiest way to check, copy and edit CSS</p>
</div>
</div>

BIN
icon/apple.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 380 B

30
icon/apple.svg
View File

@@ -1,19 +1,13 @@
<svg width="17" height="21" viewBox="0 0 17 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="9.6087" y="0.26088" width="3.69565" height="0.73913" fill="black"/>
<rect x="9.6087" y="1" width="2.21739" height="0.73913" fill="black"/>
<rect x="9.6087" y="1" width="2.21739" height="2.95652" fill="black"/>
<rect x="2.21741" y="5.43478" width="5.91304" height="1.47826" fill="black"/>
<rect width="5.91304" height="0.73913" transform="matrix(1 0 0 -1 2.21741 7.65218)" fill="black"/>
<rect width="5.17391" height="0.73913" transform="matrix(1 0 0 -1 9.6087 7.65218)" fill="black"/>
<rect x="9.6087" y="5.43478" width="5.17391" height="1.47826" fill="black"/>
<rect width="7.3913" height="0.73913" transform="matrix(1 0 0 -1 9.6087 9.13043)" fill="black"/>
<rect width="6.65217" height="0.73913" transform="matrix(1 0 0 -1 9.6087 8.39131)" fill="black"/>
<rect x="1.47827" y="7.65218" width="11.087" height="9.6087" fill="black"/>
<rect x="1.47827" y="13.5652" width="15.5217" height="3.69565" fill="black"/>
<rect x="2.21741" y="14.3044" width="13.3043" height="5.17391" fill="black"/>
<rect x="4.43481" y="19.4783" width="3.69565" height="1.47826" fill="black"/>
<rect x="9.6087" y="19.4783" width="3.69565" height="1.47826" fill="black"/>
<rect x="8.13043" y="1.73914" width="1.47826" height="3.69565" fill="black"/>
<rect x="0.739136" y="7.65218" width="1.47826" height="9.6087" fill="black"/>
<rect y="8.39131" width="1.47826" height="8.86957" fill="black"/>
<svg width="18" height="22" viewBox="0 0 09 11" fill="black" xmlns="http://www.w3.org/2000/svg">
<rect x="5" width="2" height="1"/>
<rect x="4" y="1" width="2" height="1"/>
<rect x="4" y="2" width="1" height="1"/>
<rect x="1" y="3" width="3" height="1"/>
<rect x="5" y="3" width="3" height="1"/>
<rect x="0" y="4" width="9" height="1"/>
<rect x="0" y="5" width="7" height="2"/>
<rect x="0" y="7" width="9" height="2"/>
<rect x="1" y="9" width="7" height="1"/>
<rect x="2" y="10" width="2" height="1"/>
<rect x="5" y="10" width="2" height="1"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 551 B

51
icon/checkmark.svg
View File

@@ -1,27 +1,26 @@
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H1V1H0V0Z" fill="black"/>
<path d="M12 0H13V1H12V0Z" fill="black"/>
<path d="M1 1H2V2H1V1Z" fill="black"/>
<path d="M2 2H3V3H2V2Z" fill="black"/>
<path d="M3 3H4V4H3V3Z" fill="black"/>
<path d="M4 4H5V5H4V4Z" fill="black"/>
<path d="M5 5H6V6H5V5Z" fill="black"/>
<path d="M11 1H12V2H11V1Z" fill="black"/>
<path d="M10 2H11V3H10V2Z" fill="black"/>
<path d="M9 3H10V4H9V3Z" fill="black"/>
<path d="M8 4H9V5H8V4Z" fill="black"/>
<path d="M7 5H8V6H7V5Z" fill="black"/>
<path d="M0 13H1V12H0V13Z" fill="black"/>
<path d="M12 13H13V12H12V13Z" fill="black"/>
<path d="M1 12H2V11H1V12Z" fill="black"/>
<path d="M2 11H3V10H2V11Z" fill="black"/>
<path d="M3 10H4V9H3V10Z" fill="black"/>
<path d="M4 9H5V8H4V9Z" fill="black"/>
<path d="M5 8H6V7H5V8Z" fill="black"/>
<path d="M11 12H12V11H11V12Z" fill="black"/>
<path d="M10 11H11V10H10V11Z" fill="black"/>
<path d="M9 10H10V9H9V10Z" fill="black"/>
<path d="M8 9H9V8H8V9Z" fill="black"/>
<path d="M7 8H8V7H7V8Z" fill="black"/>
<path d="M6 7H7V6H6V7Z" fill="black"/>
<svg width="12" height="12" viewBox="0 0 12 12" fill="black" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="1" height="1"/>
<rect x="1" y="1" width="1" height="1"/>
<rect x="2" y="2" width="1" height="1"/>
<rect x="3" y="3" width="1" height="1"/>
<rect x="4" y="4" width="1" height="1"/>
<rect x="5" y="5" width="1" height="1"/>
<rect x="6" y="6" width="1" height="1"/>
<rect x="7" y="7" width="1" height="1"/>
<rect x="8" y="8" width="1" height="1"/>
<rect x="9" y="9" width="1" height="1"/>
<rect x="10" y="10" width="1" height="1"/>
<rect x="11" y="11" width="1" height="1"/>
<rect x="11" y="0" width="1" height="1"/>
<rect x="10" y="1" width="1" height="1"/>
<rect x="9" y="2" width="1" height="1"/>
<rect x="8" y="3" width="1" height="1"/>
<rect x="7" y="4" width="1" height="1"/>
<rect x="6" y="5" width="1" height="1"/>
<rect x="5" y="6" width="1" height="1"/>
<rect x="4" y="7" width="1" height="1"/>
<rect x="3" y="8" width="1" height="1"/>
<rect x="2" y="9" width="1" height="1"/>
<rect x="1" y="10" width="1" height="1"/>
<rect x="0" y="11" width="1" height="1"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
icon/default_button.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 634 B

14
icon/radio-border-focused.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="black" xmlns="http://www.w3.org/2000/svg">
<rect x="4" width="4" height="2"/>
<rect y="4" width="2" height="4"/>
<rect x="10" y="4" width="2" height="4"/>
<rect x="2" y="1" width="2" height="2"/>
<rect x="8" y="1" width="2" height="2"/>
<rect x="9" y="2" width="2" height="2"/>
<rect x="1" y="2" width="2" height="2" />
<rect x="4" y="10" width="4" height="2"/>
<rect x="2" y="9" width="2" height="2"/>
<rect x="8" y="9" width="2" height="2"/>
<rect x="9" y="8" width="2" height="2"/>
<rect x="1" y="8" width="2" height="2" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 587 B

26
icon/radio-border.svg
View File

@@ -1,14 +1,14 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 0H4V1H8V0Z" fill="black"/>
<path d="M8 12H4V11H8V12Z" fill="black"/>
<path d="M0 4L0 8H1L1 4H0Z" fill="black"/>
<path d="M11 4V8H12V4H11Z" fill="black"/>
<path d="M4 1H2V2H4V1Z" fill="black"/>
<path d="M4 11H2V10H4V11Z" fill="black"/>
<path d="M10 1H8V2H10V1Z" fill="black"/>
<path d="M10 11H8V10H10V11Z" fill="black"/>
<path d="M10 2V4H11V2H10Z" fill="black"/>
<path d="M10 10V8H11V10H10Z" fill="black"/>
<path d="M1 2L1 4H2V2H1Z" fill="black"/>
<path d="M1 10L1 8H2V10H1Z" fill="black"/>
<svg width="12" height="12" viewBox="0 0 12 12" fill="black" xmlns="http://www.w3.org/2000/svg">
<rect x="4" width="4" height="1"/>
<rect y="4" width="1" height="4"/>
<rect x="11" y="4" width="1" height="4"/>
<rect x="2" y="1" width="2" height="1"/>
<rect x="8" y="1" width="2" height="1"/>
<rect x="10" y="2" width="1" height="2"/>
<rect x="1" y="2" width="1" height="2" />
<rect x="4" y="11" width="4" height="1"/>
<rect x="2" y="10" width="2" height="1"/>
<rect x="8" y="10" width="2" height="1"/>
<rect x="10" y="8" width="1" height="2"/>
<rect x="1" y="8" width="1" height="2" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 605 B

After

Width:  |  Height:  |  Size: 592 B

8
icon/radio-dot.svg
View File

@@ -1,5 +1,5 @@
<svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.99783 0H1V1H4.99783V0Z" fill="black"/>
<path d="M4.99783 5H1V6H4.99783V5Z" fill="black"/>
<path d="M6 1H0V4.99783H6V1Z" fill="black"/>
<svg width="7" height="7" viewBox="0 0 7 7" fill="black" xmlns="http://www.w3.org/2000/svg">
<rect x="1" width="4" height="1"/>
<rect x="1" y="5" width="4" height="1"/>
<rect y="1" width="6" height="4"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 246 B

After

Width:  |  Height:  |  Size: 211 B

2
package-lock.json generated
View File

@@ -1,6 +1,6 @@
{
"name": "@sakun/system.css",
"version": "0.1.3",
"version": "0.1.4",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@sakun/system.css",
"version": "0.1.3",
"version": "0.1.4",
"description": "A design system for building retro Apple interfaces",
"main": "dist/system.css",
"directories": {

41
style.css
View File

@@ -29,9 +29,9 @@
var(--radio-label-spacing);
--checkbox-total-width: calc(var(--checkbox-total-width-precalc));
--checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));
--checkmark-width: 13px;
--checkmark-top: 1.5px;
--checkmark-left: 1.5px;
--checkmark-width: 12px;
--checkmark-top: 2px;
--checkmark-left: 2px;
}
@font-face {
@@ -179,7 +179,7 @@ h2 {
.modeless-dialog {
height: 100%;
padding: 0.5rem 0.5rem;
padding: 1.5rem 0.5rem 0.5rem 0.5rem;
font-size: 18px;
letter-spacing: -0.025em;
}
@@ -454,6 +454,9 @@ input[type="radio"] + label::before {
background: svg-load("./icon/radio-border.svg");
}
input[type="radio"]:focus-visible + label::before {
background-image: svg-load("./icon/radio-border-focused.svg");
}
input[type="radio"]:checked + label::after {
content: "";
@@ -483,6 +486,10 @@ input[type="checkbox"] + label::before {
margin-right: var(--radio-label-spacing);
}
input[type="checkbox"]:focus-visible + label::before {
outline: 1px solid black;
}
input[type="checkbox"]:checked + label::after {
content: "";
display: block;
@@ -523,11 +530,12 @@ input[type="checkbox"][disabled]:checked + label::after {
.apple {
background: svg-load("./icon/apple.svg");
height: 20.7px;
width: 17px;
height: 22px;
width: 18px;
background-repeat: no-repeat;
border: none;
display: inline-block;
margin-right: 2px;
}
/* Form */
@@ -563,13 +571,11 @@ form {
height: 0;
}
.dd-toggle:focus,
.dd-toggle:hover {
background-color: black;
color: white;
}
.dd-input {
display: none;
outline: none;
}
.dd-menu {
@@ -585,14 +591,6 @@ form {
font-size: 1em;
}
.dd-input + .dd-menu {
display: none;
}
.dd-input:checked + .dd-menu {
display: block;
}
.dd-menu li {
padding: 5px 20px;
cursor: pointer;
@@ -613,3 +611,8 @@ form {
padding: 0;
border-bottom: 1.5px dotted #000;
}
/* styles specific to demo page */
.menu-items > li {
margin-bottom: 1rem;
}