style: 💄 add initial style variables

2020-04-27 11:37:28 -04:00
1 parent 7d023c4ea2
commit ec16774074
@@ -0,0 +1,4 @@
+@import "reset";
+@import "variables";
+
+html { background: pink; }
@@ -0,0 +1,50 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote {
+  &:before, &:after {
+    content: '';
+    content: none;
+  }
+}
+
+q {
+  &:before, &:after {
+    content: '';
+    content: none;
+  }
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
@@ -1 +0,0 @@
-html { background: pink; }
@@ -0,0 +1,2 @@
+@import "color";
+@import "opacity";
@@ -0,0 +1,24 @@
+/**
+ * Defines the opacity CSS custom properties that should be used throughout
+ * these stylesheets.
+ */
+
+// Light Mode
+:root {
+  --opacity-4: 0.05;
+  --opacity-3: 0.1;
+  --opacity-2: 0.25;
+  --opacity-1: 0.5;
+}
+
+// Dark Mode
+// Subtler opacities look better in dark mode, so these are halved compared to
+// light mode.
+@media (prefers-color-scheme: dark) {
+  :root {
+    --opacity-4: 0.025;
+    --opacity-3: 0.05;
+    --opacity-2: 0.125;
+    --opacity-1: 0.25;
+  }
+}
@@ -0,0 +1,141 @@
+/**
+ * CSS custom properties defining colors.  These are the color variables that
+ * should be consumed throughout these stylesheets (rather than SCSS vars).
+ */
+
+// Light Mode
+:root {
+  // absolutes
+  --white: #{color(white)};
+  --black: #{color(black)};
+  --black-components: 0, 0, 0;
+
+  // poles
+  --subtle: var(--white);
+  --stark: var(--black);
+  --stark-components: 0, 0, 0;
+
+  // brand colors
+  --brand-black: #{brand-color(black)};
+  --brand-white: #{brand-color(white)};
+  --brand-secondary: #{brand-color(secondary)};
+  --brand-gray-7: #{brand-color(gray-7)};
+  --brand-gray-6: #{brand-color(gray-6)};
+  --brand-gray-5: #{brand-color(gray-5)};
+  --brand-gray-4: #{brand-color(gray-4)};
+  --brand-gray-3: #{brand-color(gray-3)};
+  --brand-gray-2: #{brand-color(gray-2)};
+  --brand-gray-1: #{brand-color(gray-1)};
+
+  // theme colors
+  --info-subtler-3: #{color(blue, 010)};
+  --info-subtler-2: #{color(blue, 100)};
+  --info-subtler-1: #{color(blue, 400)};
+  --info: #{color(blue)};
+  --info-starker-1: #{color(blue, 700)};
+  --info-starker-2: #{color(blue, 800)};
+
+  --alert-subtler-2: #{color(orange, 010)};
+  --alert-subtler-1: #{color(orange, 100)};
+  --alert: #{color(orange)};
+  --alert-starker-1: #{color(orange, 800)};
+
+  --warning-subtler-2: #{color(yellow, 010)};
+  --warning-subtler-1: #{color(yellow, 100)};
+  --warning: #{color(yellow)};
+  --warning-starker-1: #{color(yellow, 800)};
+
+  --failure-subtler-2: #{color(red, 010)};
+  --failure-subtler-1: #{color(red, 100)};
+  --failure: #{color(red)};
+  --failure-starker-1: #{color(red, 800)};
+
+  --success-subtler-2: #{color(green, 010)};
+  --success-subtler-1: #{color(green, 100)};
+  --success: #{color(green)};
+  --success-starker-1: #{color(green, 800)};
+
+  --action-subtler-2: #{color(blue, 010)};
+  --action-subtler-1: #{color(blue, 100)};
+  --action: #{color(blue)};
+  --action-starker-1: #{color(blue, 700)};
+
+  --ui-border-subtler-1: #{color(ui-gray, 200)};
+  --ui-border: #{color(ui-gray, 300)};
+
+  --ui-gray-subtler-6: #{color(ui-gray, 010)};
+  --ui-gray-subtler-5: #{color(ui-gray, 050)};
+  --ui-gray-subtler-4: #{color(ui-gray, 100)};
+  --ui-gray-subtler-3: #{color(ui-gray, 200)};
+  --ui-gray-subtler-2: #{color(ui-gray, 300)};
+  --ui-gray-subtler-1: #{color(ui-gray, 400)};
+  --ui-gray: #{color(ui-gray)};
+  --ui-gray-starker-1: #{color(ui-gray, 600)};
+  --ui-gray-starker-2: #{color(ui-gray, 700)};
+  --ui-gray-starker-3: #{color(ui-gray, 800)};
+  --ui-gray-starker-4: #{color(ui-gray, 900)};
+}
+
+// Dark Mode
+@media (prefers-color-scheme: dark) {
+  :root {
+    // opacities
+    --opacity-4: 0.025;
+    --opacity-3: 0.05;
+    --opacity-2: 0.15;
+    --opacity-1: 0.35;
+
+    // poles
+    --subtle: #{color(ui-cool-gray, 800)};
+    --stark: var(--white);
+    --stark-components: 255, 255, 255;
+
+    // theme colors
+    --info-subtler-3: #{color(blue, 800)};
+    --info-subtler-2: #{color(blue, 700)};
+    --info-subtler-1: #{color(blue, 600)};
+    --info: #{color(blue)};
+    --info-starker-1: #{color(blue, 300)};
+    --info-starker-2: #{color(blue, 200)};
+
+    --alert-subtler-2: #{color(orange, 900)};
+    --alert-subtler-1: #{color(orange, 800)};
+    --alert: #{color(orange)};
+    --alert-starker-1: #{color(orange, 200)};
+
+    --warning-subtler-2: #{color(yellow, 900)};
+    --warning-subtler-1: #{color(yellow, 800)};
+    --warning: #{color(yellow)};
+    --warning-starker-1: #{color(yellow, 200)};
+
+    --failure-subtler-2: #{color(red, 900)};
+    --failure-subtler-1: #{color(red, 800)};
+    --failure: #{color(red)};
+    --failure-starker-1: #{color(red, 200)};
+
+    --success-subtler-2: #{color(green, 900)};
+    --success-subtler-1: #{color(green, 800)};
+    --success: #{color(green)};
+    --success-starker-1: #{color(green, 200)};
+
+    --action-subtler-2: #{color(blue, 900)};
+    --action-subtler-1: #{color(blue, 800)};
+    --action: #{color(blue)};
+    --action-starker-1: #{color(blue, 300)};
+
+    --ui-border-subtler-1: #{color(ui-gray, 800)};
+    --ui-border: #{color(ui-gray, 700)};
+
+    --ui-gray-subtler-6: #{color(ui-gray, 900)};
+    --ui-gray-subtler-5: #{color(ui-gray, 800)};
+    --ui-gray-subtler-4: #{color(ui-gray, 700)};
+    --ui-gray-subtler-3: #{color(ui-gray, 600)};
+    --ui-gray-subtler-2: #{color(ui-gray, 500)};
+    --ui-gray-subtler-1: #{color(ui-gray, 400)};
+    --ui-gray: #{color(ui-gray, 300)};
+    --ui-gray-starker-1: #{color(ui-gray, 200)};
+    --ui-gray-starker-2: #{color(ui-gray, 100)};
+    --ui-gray-starker-3: #{color(ui-gray, 050)};
+    --ui-gray-starker-4: #{color(ui-gray, 010)};
+  }
+}
@@ -0,0 +1,2 @@
+@import "sass";
+@import "css";
@@ -0,0 +1,103 @@
+@use "sass:map";
+
+/**
+ * SASS variables defining colors.  These should not be consumed
+ * directly. See `_css.scss` for CSS custom properties, which are the primary
+ * variables used throughout these stylesheets.
+ */
+
+$colors: (
+  magenta: #c62a71,
+  ui-cool-gray: #7c8797,
+  ui-gray: #6f7682,
+  purple: #5c4ee5,
+  cyan: #00bbff,
+  teal: #25ba81,
+  green: #2eb039,
+  yellow: #fac402,
+  orange: #fa8f37,
+  blue: #1563ff,
+  red: #c73445,
+  black: rgb(0, 0, 0),
+  white: rgb(255, 255, 255)
+) !default;
+
+$color-values: (
+  white: (500: map.get($colors, white)),
+  black: (500: map.get($colors, black)),
+  ui-gray: (
+    010: #fbfbfc,
+    050: #f7f8fa,
+    100: #ebeef2,
+    200: #dce0e6,
+    300: #bac1cc,
+    500: map.get($colors, ui-gray),
+    600: #626873,
+    800: #373a42,
+    900: #1f2124
+  ),
+  ui-cool-gray: (
+    500: map.get($colors, ui-cool-gray),
+    800: #1d2126,
+    900: #060708
+  ),
+  green: (
+    010: #fafdfa,
+    100: #c6e9c9,
+    500: map.get($colors, green),
+    800: #15501a
+  ),
+  yellow: (
+    010: #fffdf6,
+    100: #fdeeba,
+    500: map.get($colors, yellow),
+    800: #725a01
+  ),
+  orange: (
+    010: #fffcfa,
+    100: #fde0c8,
+    500: map.get($colors, orange),
+    800: #724119
+  ),
+  blue: (
+    010: #fbfcff,
+    100: #bfd4ff,
+    200: #8ab1ff,
+    300: #5b92ff,
+    400: #387aff,
+    500: map.get($colors, blue),
+    600: #0f4fd1,
+    700: #0e40a3,
+    800: #0a2d74,
+    900: #061b46
+  ),
+  red: (
+    010: #fdfafb,
+    100: #efc7cc,
+    500: map.get($colors, red),
+    800: #5b1820
+  )
+) !default;
+
+// tokens: brand
+$brand: (
+  black: map.get($colors, black),
+  white: map.get($colors, white),
+  secondary: map.get($colors, blue),
+  gray-7: #f7f7f9,
+  gray-6: #dcdde0,
+  gray-5: #bdbec2,
+  gray-4: #7f7f86,
+  gray-3: #4c4c53,
+  gray-2: #323339,
+  gray-1: #1d1e23
+) !default;
+
+// functions to simplify color lookups
+@function brand-color($name) {
+  @return map.get($brand, $name);
+}
+
+@function color($name, $value: 500) {
+  @return map.get(map.get($color-values, $name), $value);
+}