@gospore/theme 1.0.73 → 1.0.75

package/dist/style.css

@@ -1 +1 @@
-html,body,p,div,h1,h2,h3,h4,h5,h6,ul,ol,dl,img,pre,form,fieldset{margin:0;padding:0}img,fieldset{border:0}body,html,#app{height:100%;width:100%}body{background-color:#fff;color:#091e42;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:23px}input,select,textarea,button{font-family:inherit;font-size:inherit;font-weight:inherit;line-height:25px}p,ul,ol,dl,h1,h2,h3,h4,h5,h6,blockquote,pre,form,table{margin:16px 0 0}a{color:#0052cc;text-decoration:none;border-radius:2px;cursor:pointer}a:hover{color:#0065ff;text-decoration:underline}a:active{color:#052fad}h1{font-size:2.07142857em;font-style:normal;line-height:32 / 29;color:#172b4d;font-weight:600;letter-spacing:-.01em;margin-top:40px}[dark-mode=true] h1{color:#b8c7e0}h1:first-child{margin-top:0}h2{font-size:1.71428571em;font-style:normal;line-height:28 / 24;color:#172b4d;font-weight:500;letter-spacing:-.01em;margin-top:40px}[dark-mode=true] h2{color:#b8c7e0}h2:first-child{margin-top:0}h3{font-size:1.42857143em;font-style:normal;line-height:24 / 20;color:#172b4d;font-weight:500;letter-spacing:-.008em;margin-top:28px}[dark-mode=true] h3{color:#b8c7e0}h3:first-child{margin-top:0}h4{font-size:1.14285714em;font-style:normal;line-height:20 / 16;color:#172b4d;font-weight:600;letter-spacing:-.006em;margin-top:24px}[dark-mode=true] h4{color:#b8c7e0}h4:first-child{margin-top:0}h5{font-size:1em;font-style:normal;line-height:16 / 14;color:#172b4d;font-weight:600;letter-spacing:-.003em;margin-top:16px}[dark-mode=true] h5{color:#b8c7e0}h5:first-child{margin-top:0}h6{font-size:.85714286em;font-style:normal;line-height:16 / 12;color:#172b4d;font-weight:600;margin-top:20px;text-transform:uppercase}[dark-mode=true] h6{color:#b8c7e0}h6:first-child{margin-top:0}hr{background-color:#dfe1e6;height:2px;border-style:none;margin:40px 0}ul,ol,dl{padding-left:40px}dd,dd+dt,li+li{margin-top:4px}ul ul:not(:first-child),ol ul:not(:first-child),ul ol:not(:first-child),ol ol:not(:first-child){margin-top:4px}p:first-child,ul:first-child,ol:first-child,dl:first-child,h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child,blockquote:first-child,pre:first-child,form:first-child,table:first-child{margin-top:0}:focus{outline:none;box-shadow:0 0 0 2px #4c9aff}[data-whatintent=mouse] :focus{outline:none;box-shadow:none}pre{font-family:SFMono-Medium,SF Mono,Segoe UI Mono,Roboto Mono,Ubuntu Mono,Menlo,Consolas,Courier,monospace;white-space:pre-wrap;padding:8px 16px;border-radius:5px;background:#f4f5f7;font-size:.8rem;overflow-x:auto}blockquote{white-space:pre-wrap;border-left:3px solid #dfe1e6;padding-left:8px;font-style:italic}p code{font-family:SFMono-Medium,SF Mono,Segoe UI Mono,Roboto Mono,Ubuntu Mono,Menlo,Consolas,Courier,monospace;padding:0 8px;border-radius:3px;background:#dfe1e6}table{border-collapse:collapse;width:100%}thead,tbody,tfoot{border-bottom:2px solid #dfe1e6}td,th{border:none;padding:4px 8px;text-align:left}th{font-size:.78571429em;font-style:normal;line-height:16 / 11;color:#6b778c;font-weight:700;margin-top:16px;line-height:inherit}[dark-mode=true] th{color:#8c9cb8}th:first-child{margin-top:0}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}tr{transition:background .1s ease-out,box-shadow .15s cubic-bezier(.47,.03,.49,1.38)}tbody tr:hover{background-color:#f4f5f7}caption{font-size:1.42857143em;font-style:normal;line-height:24 / 20;color:#172b4d;font-weight:500;letter-spacing:-.008em;margin-top:28px;margin-bottom:8px;text-align:left}[dark-mode=true] caption{color:#b8c7e0}caption:first-child{margin-top:0}[dark-mode=true] body{background-color:#1b2638;color:#b8c7e0}[dark-mode=true] h1,[dark-mode=true] h2,[dark-mode=true] h3,[dark-mode=true] h4,[dark-mode=true] h5{color:#b8c7e0}[dark-mode=true] h6{color:#8c9cb8}[dark-mode=true] a{color:#4c9aff}[dark-mode=true] a:hover{color:#2684ff}[dark-mode=true] a:active{color:#4c9aff}[dark-mode=true] hr{background-color:#3b475c}[dark-mode=true] pre{background:#283447}[dark-mode=true] p code{background:#3b475c}[dark-mode=true] blockquote{border-left:3px solid #3b475c}[dark-mode=true] thead,[dark-mode=true] tbody,[dark-mode=true] tfoot{border-bottom:2px solid #3b475c}[dark-mode=true] tbody tr:hover{background-color:#283447}.heading-900{font-size:2.5em;font-style:normal;line-height:40 / 35;color:#172b4d;font-weight:500;letter-spacing:-.01em;margin-top:52px}[dark-mode=true] .heading-900{color:#b8c7e0}.heading-900:first-child{margin-top:0}.heading-800{font-size:2.07142857em;font-style:normal;line-height:32 / 29;color:#172b4d;font-weight:600;letter-spacing:-.01em;margin-top:40px}[dark-mode=true] .heading-800{color:#b8c7e0}.heading-800:first-child{margin-top:0}.heading-700{font-size:1.71428571em;font-style:normal;line-height:28 / 24;color:#172b4d;font-weight:500;letter-spacing:-.01em;margin-top:40px}[dark-mode=true] .heading-700{color:#b8c7e0}.heading-700:first-child{margin-top:0}.heading-600{font-size:1.42857143em;font-style:normal;line-height:24 / 20;color:#172b4d;font-weight:500;letter-spacing:-.008em;margin-top:28px}[dark-mode=true] .heading-600{color:#b8c7e0}.heading-600:first-child{margin-top:0}.heading-500{font-size:1.14285714em;font-style:normal;line-height:20 / 16;color:#172b4d;font-weight:600;letter-spacing:-.006em;margin-top:24px}[dark-mode=true] .heading-500{color:#b8c7e0}.heading-500:first-child{margin-top:0}.heading-400{font-size:1em;font-style:normal;line-height:16 / 14;color:#172b4d;font-weight:600;letter-spacing:-.003em;margin-top:16px}[dark-mode=true] .heading-400{color:#b8c7e0}.heading-400:first-child{margin-top:0}.heading-300{font-size:.85714286em;font-style:normal;line-height:16 / 12;color:#172b4d;font-weight:600;margin-top:20px;text-transform:uppercase}[dark-mode=true] .heading-300{color:#b8c7e0}.heading-300:first-child{margin-top:0}.heading-200{font-size:.85714286em;font-style:normal;line-height:16 / 12;color:#6b778c;font-weight:600;margin-top:16px}[dark-mode=true] .heading-200{color:#8c9cb8}.heading-200:first-child{margin-top:0}.heading-100{font-size:.78571429em;font-style:normal;line-height:16 / 11;color:#6b778c;font-weight:700;margin-top:16px}[dark-mode=true] .heading-100{color:#8c9cb8}.heading-100:first-child{margin-top:0}.text-caption{font-size:12px;font-weight:400;color:#7a869a}.text-caption-bold{font-size:12px;font-weight:600;color:#091e42}.text-prominent{font-size:14px;font-weight:600;color:#091e42}.error{color:#ff5630}[dark-mode=true] .text-caption{color:#7988a3}[dark-mode=true] .text-caption-bold,[dark-mode=true] .text-prominent{color:#b8c7e0}[dark-mode=true] .error{color:#ff5630}
+html,body,p,div,h1,h2,h3,h4,h5,h6,ul,ol,dl,img,pre,form,fieldset{margin:0;padding:0}img,fieldset{border:0}body,html,#app{height:100%;width:100%}body{background-color:#fff;color:#091e42;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:23px}input,select,textarea,button{font-family:inherit;font-size:inherit;font-weight:inherit;line-height:25px}p,ul,ol,dl,h1,h2,h3,h4,h5,h6,blockquote,pre,form,table{margin:16px 0 0}a{color:#0052cc;text-decoration:none;border-radius:2px;cursor:pointer}a:hover{color:#0065ff;text-decoration:underline}a:active{color:#052fad}h1{font-size:2.07142857em;font-style:normal;line-height:1.10344828em;color:#172b4d;font-weight:600;letter-spacing:-.01em;margin-top:40px}[dark-mode=true] h1{color:#b8c7e0}h1:first-child{margin-top:0}h2{font-size:1.71428571em;font-style:normal;line-height:1.16666667em;color:#172b4d;font-weight:500;letter-spacing:-.01em;margin-top:40px}[dark-mode=true] h2{color:#b8c7e0}h2:first-child{margin-top:0}h3{font-size:1.42857143em;font-style:normal;line-height:1.2em;color:#172b4d;font-weight:500;letter-spacing:-.008em;margin-top:28px}[dark-mode=true] h3{color:#b8c7e0}h3:first-child{margin-top:0}h4{font-size:1.14285714em;font-style:normal;line-height:1.25em;color:#172b4d;font-weight:600;letter-spacing:-.006em;margin-top:24px}[dark-mode=true] h4{color:#b8c7e0}h4:first-child{margin-top:0}h5{font-size:1em;font-style:normal;line-height:1.14285714em;color:#172b4d;font-weight:600;letter-spacing:-.003em;margin-top:16px}[dark-mode=true] h5{color:#b8c7e0}h5:first-child{margin-top:0}h6{font-size:.85714286em;font-style:normal;line-height:1.33333333em;color:#172b4d;font-weight:600;margin-top:20px;text-transform:uppercase}[dark-mode=true] h6{color:#b8c7e0}h6:first-child{margin-top:0}hr{background-color:#dfe1e6;height:2px;border-style:none;margin:40px 0}ul,ol,dl{padding-left:40px}dd,dd+dt,li+li{margin-top:4px}ul ul:not(:first-child),ol ul:not(:first-child),ul ol:not(:first-child),ol ol:not(:first-child){margin-top:4px}p:first-child,ul:first-child,ol:first-child,dl:first-child,h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child,blockquote:first-child,pre:first-child,form:first-child,table:first-child{margin-top:0}:focus{outline:none;box-shadow:0 0 0 2px #4c9aff}[data-whatintent=mouse] :focus{outline:none;box-shadow:none}pre{font-family:SFMono-Medium,SF Mono,Segoe UI Mono,Roboto Mono,Ubuntu Mono,Menlo,Consolas,Courier,monospace;white-space:pre-wrap;padding:8px 16px;border-radius:5px;background:#f4f5f7;font-size:.8rem;overflow-x:auto}blockquote{white-space:pre-wrap;border-left:3px solid #dfe1e6;padding-left:8px;font-style:italic}p code{font-family:SFMono-Medium,SF Mono,Segoe UI Mono,Roboto Mono,Ubuntu Mono,Menlo,Consolas,Courier,monospace;padding:0 8px;border-radius:3px;background:#dfe1e6}table{border-collapse:collapse;width:100%}thead,tbody,tfoot{border-bottom:2px solid #dfe1e6}td,th{border:none;padding:4px 8px;text-align:left}th{font-size:.78571429em;font-style:normal;line-height:1.45454545em;color:#6b778c;font-weight:700;margin-top:16px;line-height:inherit}[dark-mode=true] th{color:#8c9cb8}th:first-child{margin-top:0}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}tr{transition:background .1s ease-out,box-shadow .15s cubic-bezier(.47,.03,.49,1.38)}tbody tr:hover{background-color:#f4f5f7}caption{font-size:1.42857143em;font-style:normal;line-height:1.2em;color:#172b4d;font-weight:500;letter-spacing:-.008em;margin-top:28px;margin-bottom:8px;text-align:left}[dark-mode=true] caption{color:#b8c7e0}caption:first-child{margin-top:0}[dark-mode=true] body{background-color:#1b2638;color:#b8c7e0}[dark-mode=true] h1,[dark-mode=true] h2,[dark-mode=true] h3,[dark-mode=true] h4,[dark-mode=true] h5{color:#b8c7e0}[dark-mode=true] h6{color:#8c9cb8}[dark-mode=true] a{color:#4c9aff}[dark-mode=true] a:hover{color:#2684ff}[dark-mode=true] a:active{color:#4c9aff}[dark-mode=true] hr{background-color:#3b475c}[dark-mode=true] pre{background:#283447}[dark-mode=true] p code{background:#3b475c}[dark-mode=true] blockquote{border-left:3px solid #3b475c}[dark-mode=true] thead,[dark-mode=true] tbody,[dark-mode=true] tfoot{border-bottom:2px solid #3b475c}[dark-mode=true] tbody tr:hover{background-color:#283447}.heading-900{font-size:2.5em;font-style:normal;line-height:1.14285714em;color:#172b4d;font-weight:500;letter-spacing:-.01em;margin-top:52px}[dark-mode=true] .heading-900{color:#b8c7e0}.heading-900:first-child{margin-top:0}.heading-800{font-size:2.07142857em;font-style:normal;line-height:1.10344828em;color:#172b4d;font-weight:600;letter-spacing:-.01em;margin-top:40px}[dark-mode=true] .heading-800{color:#b8c7e0}.heading-800:first-child{margin-top:0}.heading-700{font-size:1.71428571em;font-style:normal;line-height:1.16666667em;color:#172b4d;font-weight:500;letter-spacing:-.01em;margin-top:40px}[dark-mode=true] .heading-700{color:#b8c7e0}.heading-700:first-child{margin-top:0}.heading-600{font-size:1.42857143em;font-style:normal;line-height:1.2em;color:#172b4d;font-weight:500;letter-spacing:-.008em;margin-top:28px}[dark-mode=true] .heading-600{color:#b8c7e0}.heading-600:first-child{margin-top:0}.heading-500{font-size:1.14285714em;font-style:normal;line-height:1.25em;color:#172b4d;font-weight:600;letter-spacing:-.006em;margin-top:24px}[dark-mode=true] .heading-500{color:#b8c7e0}.heading-500:first-child{margin-top:0}.heading-400{font-size:1em;font-style:normal;line-height:1.14285714em;color:#172b4d;font-weight:600;letter-spacing:-.003em;margin-top:16px}[dark-mode=true] .heading-400{color:#b8c7e0}.heading-400:first-child{margin-top:0}.heading-300{font-size:.85714286em;font-style:normal;line-height:1.33333333em;color:#172b4d;font-weight:600;margin-top:20px;text-transform:uppercase}[dark-mode=true] .heading-300{color:#b8c7e0}.heading-300:first-child{margin-top:0}.heading-200{font-size:.85714286em;font-style:normal;line-height:1.33333333em;color:#6b778c;font-weight:600;margin-top:16px}[dark-mode=true] .heading-200{color:#8c9cb8}.heading-200:first-child{margin-top:0}.heading-100{font-size:.78571429em;font-style:normal;line-height:1.45454545em;color:#6b778c;font-weight:700;margin-top:16px}[dark-mode=true] .heading-100{color:#8c9cb8}.heading-100:first-child{margin-top:0}.text-caption{font-size:12px;font-weight:400;color:#7a869a}.text-caption-bold{font-size:12px;font-weight:600;color:#091e42}.text-prominent{font-size:14px;font-weight:600;color:#091e42}.error{color:#ff5630}[dark-mode=true] .text-caption{color:#7988a3}[dark-mode=true] .text-caption-bold,[dark-mode=true] .text-prominent{color:#b8c7e0}[dark-mode=true] .error{color:#ff5630}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@gospore/theme",
-  "version": "1.0.73",
+  "version": "1.0.75",
   "description": "",
   "author": "Gospore",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "main": "./dist/theme.umd.js",
   "module": "./dist/theme.es.js",
@@ -24,5 +25,5 @@
     "@vitejs/plugin-vue": "^2.2.2",
     "vite": "^2.8.4"
   },
-  "gitHead": "499a31083970b61fae5e851ba29db3bbb38695a4"
+  "gitHead": "e550d83c1a91b3cf9b2911f0440bf4bc244e20e6"
 }

package/src/Theme.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="theme">
+    <slot />
+  </div>
+</template>
+
+<script>
+// Global imports - Accessibility & Stylesheets
+import "what-input";
+import "./index.less";
+
+export default {
+  // eslint-disable-next-line vue/multi-word-component-names
+  name: "Theme",
+  provide() {
+    return {
+      theme: this.theme,
+    };
+  },
+  data() {
+    return {
+      theme: {
+        darkMode: window.matchMedia("(prefers-color-scheme: dark)").matches,
+      },
+    };
+  },
+  watch: {
+    theme: {
+      handler() {
+        document.documentElement.setAttribute("dark-mode", this.theme.darkMode);
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  created() {
+    window
+      .matchMedia("(prefers-color-scheme: dark)")
+      .addEventListener("change", this.updateDarkMode);
+
+    // Set the color-scheme meta tag.
+    var colorSchemeMeta = document.createElement("meta");
+    colorSchemeMeta.name = "color-scheme";
+    colorSchemeMeta.setAttribute("content", "light dark");
+    document.getElementsByTagName("head")[0].appendChild(colorSchemeMeta);
+  },
+  beforeUnmount() {
+    window
+      .matchMedia("(prefers-color-scheme: dark)")
+      .removeEventListener("change", this.updateDarkMode);
+  },
+  methods: {
+    updateDarkMode(event) {
+      if (!event) {
+        return;
+      }
+      this.theme.darkMode = event.matches;
+    },
+  },
+};
+</script>

package/src/base.less

@@ -0,0 +1,255 @@
+@import "./fonts.less";
+@import "./grid.less";
+
+@link-text-decoration: {
+  default: none;
+  hover: underline;
+};
+
+body,
+html,
+#app {
+  height: 100%;
+  width: 100%;
+}
+body {
+  background-color: @background-color[light];
+  color: @text-color[light];
+  font-family: @font-family;
+  font-size: @font-size-default;
+  font-style: normal;
+  font-weight: @font-weight-regular;
+  line-height: 23px;
+}
+
+input,
+select,
+textarea,
+button {
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: 25px;
+}
+
+// Default margins
+p,
+ul,
+ol,
+dl,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+blockquote,
+pre,
+form,
+table {
+  margin: (@gridSize * 2px) 0 0 0;
+}
+
+// Links
+a {
+  color: #link-color.default[light];
+  text-decoration: @link-text-decoration[default];
+  border-radius: @borderWidth;
+  cursor: pointer;
+
+  &:hover {
+    color: #link-color.hover[light];
+    text-decoration: @link-text-decoration[hover];
+  }
+  &:active {
+    color: #link-color.active[light];
+  }
+}
+
+// Headings
+h1 {
+  .heading-800;
+}
+h2 {
+  .heading-700;
+}
+h3 {
+  .heading-600;
+}
+h4 {
+  .heading-500;
+}
+h5 {
+  .heading-400;
+}
+h6 {
+  .heading-300;
+}
+
+hr {
+  background-color: @horizontal-rule-color[light];
+  height: 2px;
+  border-style: none;
+  margin: 40px 0;
+}
+
+// Lists
+ul,
+ol,
+dl {
+  padding-left: (@gridSize * 5px);
+}
+dd,
+dd + dt,
+li + li {
+  margin-top: (@gridSize / 2px);
+}
+ul,
+ol {
+  ul,
+  ol {
+    &:not(:first-child) {
+      margin-top: (@gridSize / 2px);
+    }
+  }
+}
+
+// remove top margin for first element
+p:first-child,
+ul:first-child,
+ol:first-child,
+dl:first-child,
+h1:first-child,
+h2:first-child,
+h3:first-child,
+h4:first-child,
+h5:first-child,
+h6:first-child,
+blockquote:first-child,
+pre:first-child,
+form:first-child,
+table:first-child {
+  margin-top: 0;
+}
+
+:focus {
+  outline: none;
+  box-shadow: 0px 0px 0px @focus-outline-width @focus-outline-color;
+}
+[data-whatintent="mouse"] :focus {
+  outline: none;
+  box-shadow: none;
+}
+
+pre {
+  font-family: @font-family-code;
+  white-space: pre-wrap;
+  padding: @size8 @size16;
+  border-radius: 5px;
+  background: @code-block-color[light];
+  font-size: 0.8rem;
+  overflow-x: auto;
+}
+
+blockquote {
+  white-space: pre-wrap;
+  border-left: 3px solid @blockquote-border-color[light];
+  padding-left: @size8;
+  font-style: italic;
+}
+
+p code {
+  font-family: @font-family-code;
+  padding: @size0 @size8;
+  border-radius: @borderRadius;
+  background: @code-color[light];
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+thead,
+tbody,
+tfoot {
+  border-bottom: @borderWidth solid @table-border-color[light];
+}
+td,
+th {
+  border: none;
+  padding: (@gridSize / 2) * 1px @gridSize*1px;
+  text-align: left;
+}
+th {
+  .heading-100;
+  line-height: inherit;
+}
+td:first-child,
+th:first-child {
+  padding-left: 0;
+}
+td:last-child,
+th:last-child {
+  padding-right: 0;
+}
+tr {
+  transition: background 0.1s ease-out,
+    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);
+}
+tbody tr:hover {
+  background-color: @table-hover-color[light];
+}
+caption {
+  .heading-600;
+
+  margin-bottom: @gridSize * 1px;
+  text-align: left;
+}
+
+[dark-mode="true"] {
+  body {
+    background-color: @background-color[dark];
+    color: @text-color[dark];
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    color: #heading-color.default[dark];
+  }
+  h6 {
+    color: #heading-color.subtle[dark];
+  }
+  a {
+    color: #link-color.default[dark];
+
+    &:hover {
+      color: #link-color.hover[dark];
+    }
+    &:active {
+      color: #link-color.active[dark];
+    }
+  }
+  hr {
+    background-color: @horizontal-rule-color[dark];
+  }
+  pre {
+    background: @code-block-color[dark];
+  }
+  p code {
+    background: @code-color[dark];
+  }
+  blockquote {
+    border-left: 3px solid @blockquote-border-color[dark];
+  }
+  thead,
+  tbody,
+  tfoot {
+    border-bottom: @borderWidth solid @table-border-color[dark];
+  }
+  tbody tr:hover {
+    background-color: @table-hover-color[dark];
+  }
+}

package/src/borders.less

@@ -0,0 +1,5 @@
+@borderRadius: 3px;
+@borderRadiusLarge: 6px;
+@borderWidth: @borderWidth2;
+@borderWidth1: 1px;
+@borderWidth2: 2px;

package/src/colors.js

@@ -0,0 +1,49 @@
+// Blues
+export const B900 = "hsl(225, 90%, 16%)";
+// @go-color-b700 = #000e7f;
+export const B600 = "#061f80";
+export const B500 = "hsl(225, 94%, 35%)";
+// @go-color-b550 = #131ff2;
+// @go-color-b500 = #001dff;
+// @go-color-b400 = #3333ff;
+export const B400 = "#06c";
+export const B300 = "hsl(210, 100%, 50%)";
+export const B200 = "hsl(210, 100%, 93%)";
+export const B100 = "hsl(225, 100%, 96%)";
+
+// Reds
+export const R400 = "hsl(12, 91%, 46%)";
+export const R300 = "hsl(11, 100%, 59%)";
+
+// Yellows
+export const Y300 = "hsl(40, 100%, 50%)";
+export const Y200 = "hsl(46, 100%, 50%)";
+
+// Greens
+export const G500 = "hsl(120, 100%, 25%)";
+
+// Neutrals
+export const N1000 = "hsl(0, 0%, 0%)";
+export const N900 = "hsl(218, 76%, 15%)";
+// @go-color-n900 = hsl(218, 54%, 20%);
+export const N800 = "hsla(0,0%,10%,.9)";
+export const N500 = "hsla(0,0%,10%,.6)";
+export const N400 = "hsl(218, 20%, 39%)";
+export const N300 = "hsl(218, 17%, 44%)";
+export const N200 = "hsl(218, 14%, 49%)";
+export const N100 = "hsl(218, 14%, 54%)";
+export const N90 = "hsl(218, 13%, 59%)";
+export const N80 = "hsl(218, 13%, 64%)";
+export const N70 = "hsl(217, 13%, 69%)";
+export const N40 = "hsl(223, 12%, 89%)";
+export const N30 = "hsl(228, 14%, 93%)";
+export const N25 = "hsl(210, 7%, 95%)";
+export const N20 = "hsl(220, 16%, 96%)";
+export const N10 = "hsl(210, 25%, 98%)";
+export const N5 = "hsl(0, 0%, 98%)";
+export const N0 = "hsl(0, 0%, 100%)";
+
+// Primary color palette
+export const primary1 = B500;
+export const primary2 = B500;
+export const primary3 = N0;

package/src/colors.less

@@ -0,0 +1,236 @@
+// Primary Color Palette
+@go-color-primary1: @go-color-b600;
+@go-color-primary2: @go-color-b500;
+@go-color-primary3: @go-color-n0;
+
+// Neutrals
+@go-color-n0: #ffffff;
+@go-color-n10: #fafbfc;
+@go-color-n20: #f4f5f7;
+@go-color-n30: #ebecf0;
+@go-color-n40: #dfe1e6;
+@go-color-n50: #c1c7d0;
+@go-color-n60: #b3bac5;
+@go-color-n70: #a5adba;
+@go-color-n80: #97a0af;
+@go-color-n90: #8993a4;
+@go-color-n100: #7a869a;
+@go-color-n200: #6b778c;
+@go-color-n300: #5e6c84;
+@go-color-n400: #505f79;
+@go-color-n500: #42526e;
+@go-color-n600: #344563;
+@go-color-n700: #253858;
+@go-color-n800: #172b4d;
+@go-color-n900: #091e42;
+
+// Dark Mode Neutrals
+@go-color-dn0: #0d1424;
+@go-color-dn10: #0e1624;
+@go-color-dn20: #121a29;
+@go-color-dn30: #1b2638;
+@go-color-dn40: #202b3d;
+@go-color-dn50: #283447;
+@go-color-dn60: #313d52;
+@go-color-dn70: #3b475c;
+@go-color-dn80: #455166;
+@go-color-dn90: #56637a;
+@go-color-dn100: #67758f;
+@go-color-dn200: #7988a3;
+@go-color-dn300: #8c9cb8;
+@go-color-dn400: #9fb0cc;
+@go-color-dn500: #abbbd6;
+@go-color-dn600: #b8c7e0;
+@go-color-dn700: #ced9eb;
+@go-color-dn800: #dce5f5;
+@go-color-dn900: #e6edfa;
+
+// Reds
+@go-color-r50: #ffebe6;
+@go-color-r75: #ffbdad;
+@go-color-r100: #ff8f73;
+@go-color-r200: #ff7452;
+@go-color-r300: #ff5630;
+@go-color-r400: #de350b;
+@go-color-r500: #bf2600;
+
+// Yellows
+@go-color-y50: #fffae6;
+@go-color-y75: #fff0b3;
+@go-color-y100: #ffe380;
+@go-color-y200: #ffc400;
+@go-color-y300: #ffab00;
+@go-color-y400: #ff991f;
+@go-color-y500: #ff8b00;
+
+// Greens
+@go-color-g50: #e3fcef;
+@go-color-g75: #abf5d1;
+@go-color-g100: #79f2c0;
+@go-color-g200: #57d9a3;
+@go-color-g300: #36b37e;
+@go-color-g400: #00875a;
+@go-color-g500: #006644;
+
+// Blues
+@go-color-b50: #deebff;
+@go-color-b75: #b3d4ff;
+@go-color-b100: #4c9aff;
+@go-color-b200: #2684ff;
+@go-color-b300: #0065ff;
+@go-color-b400: #0052cc;
+@go-color-b500: #0747a6;
+
+// Purples
+@go-color-p50: #eae6ff;
+@go-color-p75: #c0b6f2;
+@go-color-p100: #998dd9;
+@go-color-p200: #8777d9;
+@go-color-p300: #6554c0;
+@go-color-p400: #5243aa;
+@go-color-p500: #403294;
+
+// Teals
+@go-color-t50: #e6fcff;
+@go-color-t75: #b3f5ff;
+@go-color-t100: #79e2f2;
+@go-color-t200: #00c7e6;
+@go-color-t300: #00b8d9;
+@go-color-t400: #00a3bf;
+@go-color-t500: #008da6;
+
+// Themed
+@go-color-primary: {
+  light: @go-color-b400;
+  dark: @go-color-b100;
+};
+@go-color-blue: {
+  light: @go-color-b400;
+  dark: @go-color-b100;
+};
+@go-color-teal: {
+  light: @go-color-t300;
+  dark: @go-color-t200;
+};
+@go-color-purple: {
+  light: @go-color-p300;
+  dark: @go-color-p100;
+};
+@go-color-red: {
+  light: @go-color-r300;
+  dark: @go-color-r300;
+};
+@go-color-yellow: {
+  light: @go-color-y300;
+  dark: @go-color-y300;
+};
+@go-color-green: {
+  light: @go-color-g300;
+  dark: @go-color-g300;
+};
+@background-color: {
+  light: @go-color-n0;
+  dark: @go-color-dn30;
+};
+@text-color: {
+  light: @go-color-n900;
+  dark: @go-color-dn600;
+};
+@placeholder-color: {
+  light: @go-color-n100;
+  dark: @go-color-dn200;
+};
+#heading-color() {
+  .default() {
+    light: @go-color-n800;
+    dark: @go-color-dn600;
+  }
+  .subtle() {
+    light: @go-color-n200;
+    dark: @go-color-dn300;
+  }
+}
+#link-color() {
+  .default() {
+    light: @go-color-b400;
+    dark: @go-color-b100;
+  }
+  .hover() {
+    light: @go-color-b300;
+    dark: @go-color-b200;
+  }
+  .active() {
+    light: @go-color-b500;
+    dark: @go-color-b100;
+  }
+}
+@focus-outline-color: @go-color-b100;
+@table-border-color: {
+  light: @go-color-n40;
+  dark: @go-color-dn70;
+};
+@table-hover-color: {
+  light: @go-color-n20;
+  dark: @go-color-dn50;
+};
+@horizontal-rule-color: {
+  light: @go-color-n40;
+  dark: @go-color-dn70;
+};
+@code-color: {
+  light: @go-color-n40;
+  dark: @go-color-dn70;
+};
+@code-block-color: {
+  light: @go-color-n20;
+  dark: @go-color-dn50;
+};
+@blockquote-border-color: {
+  light: @go-color-n40;
+  dark: @go-color-dn70;
+};
+
+// // Neutrals
+// @go-color-n0: hsl(0, 0%, 100%);
+// @go-color-n5: hsl(0, 0%, 98%);
+// @go-color-n10: hsl(210, 25%, 98%);
+// @go-color-n20: hsl(220, 16%, 96%);
+@go-color-n25: hsl(210, 7%, 95%);
+// @go-color-n30: hsl(228, 14%, 93%);
+// @go-color-n40: hsl(223, 12%, 89%);
+// @go-color-n70: hsl(217, 13%, 69%);
+// @go-color-n80: hsl(218, 13%, 64%);
+// @go-color-n90: hsl(218, 13%, 59%);
+// @go-color-n100: hsl(218, 14%, 54%);
+// @go-color-n200: hsl(218, 14%, 49%);
+// @go-color-n300: hsl(218, 17%, 44%);
+// @go-color-n400: hsl(218, 20%, 39%);
+// @go-color-n500: hsla(0,0%,10%,.6);
+// @go-color-n800: hsla(0,0%,10%,.9);
+// // @go-color-n900: hsl(218, 54%, 20%);
+// @go-color-n900: hsl(240, 7%, 6%);
+@go-color-n1000: hsl(0, 0%, 0%);
+
+// Blues
+@go-color-b900: hsl(225, 90%, 16%);
+// @go-color-b700: #000e7f;
+@go-color-b600: #061f80;
+@go-color-b500: hsl(225, 94%, 35%);
+// @go-color-b550: #131ff2;
+// @go-color-b500: #001dff;
+// @go-color-b400: #3333ff;
+// @go-color-b400: #06c;
+// @go-color-b300: hsl(210, 100%, 50%);
+// @go-color-b200: hsl(210, 100%, 93%);
+// @go-color-b100: hsl(225, 100%, 96%);
+
+// // Reds
+// @go-color-r400: hsl(12, 91%, 46%);
+// @go-color-r300: hsl(11, 100%, 59%);
+
+// // Yellows
+// @go-color-y300: hsl(40, 100%, 50%);
+// @go-color-y200: hsl(46, 100%, 50%);
+
+// // Greens
+// @go-color-g500: hsl(120, 100%, 25%);

package/src/component-bundle.less

@@ -0,0 +1,8 @@
+@import "styles.less";
+@import "colors.less";
+@import "borders.less";
+@import "fonts.less";
+@import "sizing.less";
+@import "layering.less";
+@import "elevation.less";
+@import "transitions.less";

package/src/elevation.less

@@ -0,0 +1,26 @@
+#elevation() {
+  .card() {
+    light: 0 1px 1px @go-color-n50, 0 0 1px 0 @go-color-n60;
+    dark: 0 1px 1px @go-color-dn20, 0 0 1px @go-color-dn30;
+  }
+  .dialog() {
+    light: 0 4px 8px -2px @go-color-n50, 0 0 1px @go-color-n60;
+    dark: 0 4px 8px -2px @go-color-dn20, 0 0 1px @go-color-dn30;
+  }
+  .modal() {
+    light: 0 8px 16px -4px @go-color-n50, 0 0 1px @go-color-n60;
+    dark: 0 8px 16px -4px @go-color-dn20, 0 0 1px @go-color-dn30;
+  }
+  .panel() {
+    light: 0 12px 24px -6px @go-color-n50, 0 0 1px @go-color-n60;
+    dark: 0 12px 24px -6px @go-color-dn20, 0 0 1px @go-color-dn30;
+  }
+  .flag() {
+    light: 0 20px 32px -8px @go-color-n50, 0 0 1px @go-color-n60;
+    dark: 0 20px 32px -8px @go-color-dn20, 0 0 1px @go-color-dn30;
+  }
+  .avatar() {
+    light: inset 0 0 10px fade(@go-color-n900, 5%);
+    dark: inset 0 0 10px fade(@go-color-n900, 5%)
+  }
+}; ;

package/src/fonts.less

@@ -0,0 +1,30 @@
+@font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+  "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+@font-family-code: "SFMono-Medium", "SF Mono", "Segoe UI Mono", "Roboto Mono",
+  "Ubuntu Mono", Menlo, Consolas, Courier, monospace;
+
+@font-style: normal;
+
+@font-size-default: @font-size-14;
+// @font-size-11: 11px;
+@font-size-12: 12px;
+@font-size-14: 14px;
+@font-size-15: 15px;
+@font-size-16: 16px;
+@font-size-18: 18px;
+@font-size-20: 20px;
+@font-size-24: 24px;
+@font-size-30: 30px;
+@font-size-36: 36px;
+@font-size-48: 48px;
+@font-size-60: 60px;
+@font-size-72: 72px;
+
+@font-weight-thin: 100;
+@font-weight-light: 300;
+@font-weight-regular: 400;
+@font-weight-medium: 500;
+@font-weight-semibold: 600;
+@font-weight-bold: 700;
+@font-weight-extrabold: 800;
+@font-weight-black: 900;

package/src/grid.less

@@ -0,0 +1,2 @@
+@gridSize: 8;
+@focus-outline-width: 2px;

package/src/index.js

@@ -0,0 +1,4 @@
+import Theme from "./Theme.vue";
+
+export default Theme;
+export * from "./colors.js";

package/src/index.less

@@ -0,0 +1,10 @@
+@import "reset.less";
+@import "colors.less";
+@import "base.less";
+@import "tables.less";
+@import "borders.less";
+@import "elevation.less";
+@import "sizing.less";
+@import "layering.less";
+@import "transitions.less";
+@import "styles.less";

package/src/layering.less

@@ -0,0 +1,10 @@
+@layer: {
+  card: 100;
+  navigation: 200;
+  dialog: 300;
+  overlay: 400;
+  modal: 500;
+  flag: 600;
+  spotlight: 700;
+  tooltip: 800;
+};

package/src/reset.less

@@ -0,0 +1,25 @@
+// Reset
+html,
+body,
+p,
+div,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+ol,
+dl,
+img,
+pre,
+form,
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+img,
+fieldset {
+  border: 0;
+}

package/src/sizing.less

@@ -0,0 +1,17 @@
+@size0: 0px;
+@size4: 4px;
+@size8: 8px;
+@size12: 12px;
+@size16: 16px;
+@size24: 24px;
+@size32: 32px;
+@size48: 48px;
+@size64: 64px;
+@size96: 96px;
+@size128: 128px;
+@size192: 192px;
+@size256: 256px;
+@size384: 384px;
+@size512: 512px;
+@size640: 640px;
+@size768: 768px;

package/src/styles.less

@@ -0,0 +1,176 @@
+@import "grid.less";
+
+.heading-900 {
+  font-size: unit((35px / @font-size-default), em);
+  font-style: @font-style;
+  line-height: unit((40px / 35px), em);
+  color: #heading-color.default[light];
+  font-weight: @font-weight-medium;
+  letter-spacing: -0.01em;
+  margin-top: @gridSize * 6.5px;
+
+  [dark-mode="true"] & {
+    color: #heading-color.default[dark];
+  }
+  &:first-child {
+    margin-top: @size0;
+  }
+}
+.heading-800 {
+  font-size: unit((29px / @font-size-default), em);
+  font-style: @font-style;
+  line-height: unit((32px / 29px), em);
+  color: #heading-color.default[light];
+  font-weight: @font-weight-semibold;
+  letter-spacing: -0.01em;
+  margin-top: @gridSize * 5px;
+
+  [dark-mode="true"] & {
+    color: #heading-color.default[dark];
+  }
+  &:first-child {
+    margin-top: @size0;
+  }
+}
+.heading-700 {
+  font-size: unit((24px / @font-size-default), em);
+  font-style: @font-style;
+  line-height: unit((28px / 24px), em);
+  color: #heading-color.default[light];
+  font-weight: @font-weight-medium;
+  letter-spacing: -0.01em;
+  margin-top: @gridSize * 5px;
+
+  [dark-mode="true"] & {
+    color: #heading-color.default[dark];
+  }
+  &:first-child {
+    margin-top: @size0;
+  }
+}
+.heading-600 {
+  font-size: unit((20px / @font-size-default), em);
+  font-style: @font-style;
+  line-height: unit((24px / 20px), em);
+  color: #heading-color.default[light];
+  font-weight: @font-weight-medium;
+  letter-spacing: -0.008em;
+  margin-top: @gridSize * 3.5px;
+
+  [dark-mode="true"] & {
+    color: #heading-color.default[dark];
+  }
+  &:first-child {
+    margin-top: @size0;
+  }
+}
+.heading-500 {
+  font-size: unit((16px / @font-size-default), em);
+  font-style: @font-style;
+  line-height: unit((20px / 16px), em);
+  color: #heading-color.default[light];
+  font-weight: @font-weight-semibold;
+  letter-spacing: -0.006em;
+  margin-top: @gridSize * 3px;
+
+  [dark-mode="true"] & {
+    color: #heading-color.default[dark];
+  }
+  &:first-child {
+    margin-top: @size0;
+  }
+}
+.heading-400 {
+  font-size: unit((14px / @font-size-default), em);
+  font-style: @font-style;
+  line-height: unit((16px / 14px), em);
+  color: #heading-color.default[light];
+  font-weight: @font-weight-semibold;
+  letter-spacing: -0.003em;
+  margin-top: @gridSize * 2px;
+
+  [dark-mode="true"] & {
+    color: #heading-color.default[dark];
+  }
+  &:first-child {
+    margin-top: @size0;
+  }
+}
+.heading-300 {
+  font-size: unit((12px / @font-size-default), em);
+  font-style: @font-style;
+  line-height: unit((16px / 12px), em);
+  color: #heading-color.default[light];
+  font-weight: @font-weight-semibold;
+  margin-top: @gridSize * 2.5px;
+  text-transform: uppercase;
+
+  [dark-mode="true"] & {
+    color: #heading-color.default[dark];
+  }
+  &:first-child {
+    margin-top: @size0;
+  }
+}
+.heading-200 {
+  font-size: unit((12px / @font-size-default), em);
+  font-style: @font-style;
+  line-height: unit((16px / 12px), em);
+  color: #heading-color.subtle[light];
+  font-weight: @font-weight-semibold;
+  margin-top: @gridSize * 2px;
+
+  [dark-mode="true"] & {
+    color: #heading-color.subtle[dark];
+  }
+  &:first-child {
+    margin-top: @size0;
+  }
+}
+.heading-100 {
+  font-size: unit((11px / @font-size-default), em);
+  font-style: @font-style;
+  line-height: unit((16px / 11px), em);
+  color: #heading-color.subtle[light];
+  font-weight: @font-weight-bold;
+  margin-top: @gridSize * 2px;
+
+  [dark-mode="true"] & {
+    color: #heading-color.subtle[dark];
+  }
+  &:first-child {
+    margin-top: @size0;
+  }
+}
+
+.text-caption {
+  font-size: @font-size-12;
+  font-weight: @font-weight-regular;
+  color: @placeholder-color[light];
+}
+.text-caption-bold {
+  font-size: @font-size-12;
+  font-weight: @font-weight-semibold;
+  color: @text-color[light];
+}
+.text-prominent {
+  font-size: @font-size-default;
+  font-weight: @font-weight-semibold;
+  color: @text-color[light];
+}
+.error {
+  color: @go-color-red[light];
+}
+
+[dark-mode="true"] {
+  .text-caption {
+    color: @placeholder-color[dark];
+  }
+  .text-caption-bold,
+  .text-prominent {
+    color: @text-color[dark];
+  }
+  .error {
+    color: @go-color-red[dark];
+  }
+}

package/src/transitions.less

@@ -0,0 +1,4 @@
+@transition-100ms-ease-out: all 100ms ease-out;
+@transition-100ms-ease-in-out: all 100ms ease-out;
+@transition-200ms-ease-in: all 200ms ease-in;
+@transition-200ms-ease-in-out: all 200ms ease-in-out;