Make current code library + add docs

lib/assets/styles/accessibility.scss

@@ -0,0 +1,6 @@
+button:focus-visible,
+a:focus-visible,
+[tabindex='0']:focus-visible {
+  outline: 0.25rem solid #ea80ff;
+  border-radius: 0.25rem;
+}

lib/assets/styles/classes.scss

@@ -0,0 +1,53 @@
+a,
+.clickable {
+  transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, scale 0.05s ease-in-out,
+    outline 0.2s ease-in-out;
+
+  &:active:not(&:disabled) {
+    scale: 0.95;
+  }
+}
+
+.button-base {
+  @extend .clickable;
+  font-weight: 500;
+  border: none;
+  outline: 2px solid transparent;
+
+  &:focus-visible:not(&:disabled),
+  &:hover:not(&:disabled) {
+    cursor: pointer;
+    filter: brightness(0.85);
+  }
+
+  &:active:not(&:disabled) {
+    filter: brightness(0.8);
+  }
+
+  &:disabled.quiet-disabled {
+    cursor: unset;
+  }
+
+  &:disabled:not(.quiet-disabled),
+  &[disabled]:not(.quiet-disabled) {
+    cursor: not-allowed;
+    filter: grayscale(50%);
+    opacity: 0.5;
+    box-shadow: none;
+  }
+}
+
+.standard-button {
+  box-sizing: border-box;
+
+  color: var(--color-contrast);
+  background-color: var(--color-button-bg);
+  box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
+  border-radius: var(--radius-sm);
+}
+
+.standard-body {
+  :last-child {
+    margin-bottom: 0;
+  }
+}

lib/assets/styles/defaults.scss

@@ -0,0 +1,31 @@
+// Use border box on everything to preserve everyone's sanity
+* {
+  box-sizing: border-box;
+}
+
+body {
+  // Defaults
+  background-color: var(--color-bg);
+  color: var(--color-base);
+  --font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto,
+    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  --mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+  font-family: var(--font-standard);
+  font-size: 16px;
+  font-weight: var(--font-weight-regular);
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: var(--color-blue);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+a.uncolored {
+  color: inherit;
+}

lib/assets/styles/highlightjs.scss

@@ -0,0 +1,89 @@
+.hljs,
+.hljs-subst {
+  color: #444;
+}
+
+.hljs-comment {
+  color: #888888;
+}
+
+.hljs-keyword,
+.hljs-attribute,
+.hljs-selector-tag,
+.hljs-meta-keyword,
+.hljs-doctag,
+.hljs-name {
+  color: #f58300;
+  font-weight: bold;
+}
+
+.hljs-type,
+.hljs-string,
+.hljs-number,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-quote,
+.hljs-template-tag,
+.hljs-deletion {
+  color: var(--color-brand);
+}
+
+.hljs-title,
+.hljs-section {
+  color: #008888;
+  font-weight: bold;
+}
+
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #bc6060;
+}
+
+.hljs-literal {
+  color: #78a960;
+}
+
+.hljs-built_in,
+.hljs-bullet,
+.hljs-code,
+.hljs-addition {
+  color: #f58300;
+}
+
+.hljs-meta {
+  color: #1f7199;
+}
+
+.hljs-meta-string {
+  color: #4d99bf;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+pre {
+  background-color: #222222;
+  padding: 1em 1em 1em 1em;
+  border-width: 5px;
+  border-radius: 2em;
+  border-color: var(--color-brand);
+  overflow-x: hidden;
+
+  code {
+    line-height: 100%;
+    padding: 0.2em;
+    letter-spacing: -0.05em;
+    word-break: normal;
+    font-family: monospace;
+  }
+}

lib/assets/styles/normalize.scss

@@ -0,0 +1,351 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type='checkbox'],
+[type='radio'] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

lib/assets/styles/utility.scss

@@ -0,0 +1,136 @@
+$gaps: (
+  '0': 0,
+  'auto': auto,
+  'xs': var(--gap-xs),
+  'sm': var(--gap-sm),
+  'md': var(--gap-md),
+  'lg': var(--gap-lg),
+  'xl': var(--gap-xl),
+);
+
+@each $name, $value in $gaps {
+  [class*='padding-#{$name}'] {
+    padding: $value;
+  }
+  [class*='padding-inline-#{$name}'] {
+    padding-inline: $value;
+  }
+  [class*='padding-block-#{$name}'] {
+    padding-block: $value;
+  }
+  [class*='padding-top-#{$name}'] {
+    padding-top: $value;
+  }
+  [class*='padding-bottom-#{$name}'] {
+    padding-bottom: $value;
+  }
+  [class*='padding-left-#{$name}'] {
+    padding-left: $value;
+  }
+  [class*='padding-right-#{$name}'] {
+    padding-right: $value;
+  }
+  [class*='margin-#{$name}'] {
+    margin: $value;
+  }
+  [class*='margin-inline-#{$name}'] {
+    margin-inline: $value;
+  }
+  [class*='margin-block-#{$name}'] {
+    margin-block: $value;
+  }
+  [class*='margin-top-#{$name}'] {
+    margin-top: $value;
+  }
+  [class*='margin-bottom-#{$name}'] {
+    margin-bottom: $value;
+  }
+  [class*='margin-left-#{$name}'] {
+    margin-left: $value;
+  }
+  [class*='margin-right-#{$name}'] {
+    margin-right: $value;
+  }
+}
+
+$bg-colors: (
+  'base': var(--color-bg),
+  'raised': var(--color-raised-bg),
+  'clickable': var(--color-button-bg),
+  'brand': var(--color-brand),
+  'red': var(--color-red),
+  'orange': var(--color-orange),
+  'green': var(--color-green),
+  'blue': var(--color-blue),
+  'purple': var(--color-purple),
+  'gray': var(--color-gray),
+);
+
+@each $name, $value in $bg-colors {
+  [class*='bg-#{$name}'] {
+    background-color: $value;
+  }
+}
+
+$colors: (
+  'base': var(--color-base),
+  'contrast': var(--color-contrast),
+  'accent-contrast': var(--color-accent-contrast),
+  'brand': var(--color-brand),
+  'red': var(--color-red),
+  'orange': var(--color-orange),
+  'green': var(--color-green),
+  'blue': var(--color-blue),
+  'purple': var(--color-purple),
+  'gray': var(--color-gray),
+);
+
+@each $name, $value in $colors {
+  [class*='color-#{$name}'] {
+    color: $value;
+  }
+}
+
+$radii: (
+  '0': 0,
+  'xs': var(--radius-xs),
+  'sm': var(--radius-sm),
+  'md': var(--radius-md),
+  'lg': var(--radius-lg),
+  'xl': var(--radius-xl),
+  'max': var(--radius-max),
+);
+
+@each $name, $value in $gaps {
+  [class*='radius-#{$name}'] {
+    border-radius: $value;
+  }
+  [class*='radius-top-left-#{$name}'] {
+    border-top-left-radius: $value;
+  }
+  [class*='radius-bottom-left-#{$name}'] {
+    border-bottom-left-radius: $value;
+  }
+  [class*='radius-top-right-#{$name}'] {
+    border-top-right-radius: $value;
+  }
+  [class*='radius-bottom-right-#{$name}'] {
+    border-bottom-right-radius: $value;
+  }
+  [class*='radius-top-#{$name}'] {
+    border-top-right-radius: $value;
+    border-top-left-radius: $value;
+  }
+  [class*='radius-bottom-#{$name}'] {
+    border-bottom-right-radius: $value;
+    border-bottom-left-radius: $value;
+  }
+  [class*='radius-left-#{$name}'] {
+    border-top-left-radius: $value;
+    border-bottom-left-radius: $value;
+  }
+  [class*='radius-right-#{$name}'] {
+    border-top-right-radius: $value;
+    border-bottom-right-radius: $value;
+  }
+}

lib/assets/styles/variables.scss

@@ -0,0 +1,63 @@
+html {
+  @extend .light-mode;
+  --dark-color-base: #b0bac5;
+  --dark-color-contrast: #ecf9fb;
+
+  --gap-xs: 0.25rem;
+  --gap-sm: 0.5rem;
+  --gap-md: 0.75rem;
+  --gap-lg: 1rem;
+  --gap-xl: 1.5rem;
+
+  --radius-xs: 0.25rem;
+  --radius-sm: 0.5rem;
+  --radius-md: 0.75rem;
+  --radius-lg: 1rem;
+  --radius-xl: 1.25rem;
+  --radius-max: 999999999px;
+}
+
+.light-mode, .light {
+  --color-bg: #e5e7eb;
+  --color-raised-bg: #ffffff;
+  --color-button-bg: hsl(220, 13%, 91%);
+
+  --color-base: hsl(221, 39%, 11%);
+  --color-contrast: #1a202c;
+  --color-accent-contrast: #ffffff;
+
+  --color-red: #cb2245;
+  --color-orange: #e08325;
+  --color-green: #00af5c;
+  --color-blue: #1f68c0;
+  --color-purple: #8e32f3;
+  --color-gray: #595b61;
+
+  --color-brand: var(--color-green);
+}
+
+.dark-mode, .dark {
+  --color-bg: #16181c;
+  --color-raised-bg: #26292f;
+  --color-button-bg: hsl(222, 13%, 30%);
+
+  --color-base: var(--dark-color-base);
+  --color-contrast: var(--dark-color-contrast);
+  --color-accent-contrast: #000000;
+
+  --color-red: #ff496e;
+  --color-orange: #ffa347;
+  --color-green: #1bd96a;
+  --color-blue: #4f9cff;
+  --color-purple: #c78aff;
+  --color-gray: #9fa4b3;
+
+  --color-brand: var(--color-green);
+}
+
+.oled-mode {
+  @extend .dark-mode;
+  --color-bg: #000000;
+  --color-raised-bg: #101013;
+  --color-button-bg: #222329;
+}