@gospore/theme 1.0.75 → 1.0.77

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: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}
+.heading-900{font-size:2.5em;font-style:normal;line-height:1.14285714em;color:#000;font-weight:500;letter-spacing:-.01em;margin-top:52px}[dark-mode=true] .heading-900{color:#e6edfa}.heading-900:first-child{margin-top:0}.heading-800{font-size:2.07142857em;font-style:normal;line-height:1.10344828em;color:#000;font-weight:600;letter-spacing:-.01em;margin-top:40px}[dark-mode=true] .heading-800{color:#e6edfa}.heading-800:first-child{margin-top:0}.heading-700{font-size:1.71428571em;font-style:normal;line-height:1.16666667em;color:#000;font-weight:500;letter-spacing:-.01em;margin-top:40px}[dark-mode=true] .heading-700{color:#e6edfa}.heading-700:first-child{margin-top:0}.heading-600{font-size:1.42857143em;font-style:normal;line-height:1.2em;color:#000;font-weight:500;letter-spacing:-.008em;margin-top:28px}[dark-mode=true] .heading-600{color:#e6edfa}.heading-600:first-child{margin-top:0}.heading-500{font-size:1.14285714em;font-style:normal;line-height:1.25em;color:#000;font-weight:600;letter-spacing:-.006em;margin-top:24px}[dark-mode=true] .heading-500{color:#e6edfa}.heading-500:first-child{margin-top:0}.heading-400{font-size:1em;font-style:normal;line-height:1.14285714em;color:#000;font-weight:600;letter-spacing:-.003em;margin-top:16px}[dark-mode=true] .heading-400{color:#e6edfa}.heading-400:first-child{margin-top:0}.heading-300{font-size:.85714286em;font-style:normal;line-height:1.33333333em;color:#000;font-weight:600;margin-top:20px;text-transform:uppercase}[dark-mode=true] .heading-300{color:#e6edfa}.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:#000}.text-prominent{font-size:14px;font-weight:600;color:#000}.error{color:#ff5630}[dark-mode=true] .text-caption{color:#7988a3}[dark-mode=true] .text-caption-bold,[dark-mode=true] .text-prominent{color:#e6edfa}[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:#000;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:#0747a6}h1{font-size:2.07142857em;font-style:normal;line-height:1.10344828em;color:#000;font-weight:600;letter-spacing:-.01em;margin-top:40px}[dark-mode=true] h1{color:#e6edfa}h1:first-child{margin-top:0}h2{font-size:1.71428571em;font-style:normal;line-height:1.16666667em;color:#000;font-weight:500;letter-spacing:-.01em;margin-top:40px}[dark-mode=true] h2{color:#e6edfa}h2:first-child{margin-top:0}h3{font-size:1.42857143em;font-style:normal;line-height:1.2em;color:#000;font-weight:500;letter-spacing:-.008em;margin-top:28px}[dark-mode=true] h3{color:#e6edfa}h3:first-child{margin-top:0}h4{font-size:1.14285714em;font-style:normal;line-height:1.25em;color:#000;font-weight:600;letter-spacing:-.006em;margin-top:24px}[dark-mode=true] h4{color:#e6edfa}h4:first-child{margin-top:0}h5{font-size:1em;font-style:normal;line-height:1.14285714em;color:#000;font-weight:600;letter-spacing:-.003em;margin-top:16px}[dark-mode=true] h5{color:#e6edfa}h5:first-child{margin-top:0}h6{font-size:.85714286em;font-style:normal;line-height:1.33333333em;color:#000;font-weight:600;margin-top:20px;text-transform:uppercase}[dark-mode=true] h6{color:#e6edfa}h6:first-child{margin-top: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}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}hr{background-color:#dfe1e6;height:2px;border-style:none;margin:40px 0}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:6px;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}caption{font-size:1.42857143em;font-style:normal;line-height:1.2em;color:#000;font-weight:500;letter-spacing:-.008em;margin-top:28px;margin-bottom:8px;text-align:left}[dark-mode=true] caption{color:#e6edfa}caption:first-child{margin-top:0}[dark-mode=true] body{background-color:#0d1424;color:#e6edfa}[dark-mode=true] h1,[dark-mode=true] h2,[dark-mode=true] h3,[dark-mode=true] h4,[dark-mode=true] h5{color:#e6edfa}[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}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gospore/theme",
-  "version": "1.0.75",
+  "version": "1.0.77",
   "description": "",
   "author": "Gospore",
   "files": [
@@ -13,7 +13,8 @@
     ".": {
       "import": "./dist/theme.es.js",
       "require": "./dist/theme.umd.js"
-    }
+    },
+    "./src/component-bundle.less": "./src/component-bundle.less"
   },
   "scripts": {
     "build": "vite build"
@@ -25,5 +26,5 @@
     "@vitejs/plugin-vue": "^2.2.2",
     "vite": "^2.8.4"
   },
-  "gitHead": "e550d83c1a91b3cf9b2911f0440bf4bc244e20e6"
+  "gitHead": "7946ca073b98051601f818429d8e2502703f6c23"
 }

package/src/Theme.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-// Global imports - Accessibility & Stylesheets
+// Global imports - accessibility & stylesheets
 import "what-input";
 import "./index.less";
 

package/src/borders.less

@@ -1,5 +1,6 @@
-@borderRadius: 3px;
-@borderRadiusLarge: 6px;
-@borderWidth: @borderWidth2;
-@borderWidth1: 1px;
-@borderWidth2: 2px;
+@border-radius-regular: 3px;
+@border-radius-large: 6px;
+@border-width: @border-width-2;
+@border-width-1: 1px;
+@border-width-2: 2px;
+@border-width-3: 3px;

package/src/colors.less

@@ -23,6 +23,7 @@
 @go-color-n700: #253858;
 @go-color-n800: #172b4d;
 @go-color-n900: #091e42;
+@go-color-n1000: hsl(0, 0%, 0%);
 
 // Dark Mode Neutrals
 @go-color-dn0: #0d1424;
@@ -80,6 +81,7 @@
 @go-color-b300: #0065ff;
 @go-color-b400: #0052cc;
 @go-color-b500: #0747a6;
+@go-color-b600: #061f80;
 
 // Purples
 @go-color-p50: #eae6ff;
@@ -130,11 +132,11 @@
 };
 @background-color: {
   light: @go-color-n0;
-  dark: @go-color-dn30;
+  dark: @go-color-dn0;
 };
 @text-color: {
-  light: @go-color-n900;
-  dark: @go-color-dn600;
+  light: @go-color-n1000;
+  dark: @go-color-dn900;
 };
 @placeholder-color: {
   light: @go-color-n100;
@@ -142,8 +144,8 @@
 };
 #heading-color() {
   .default() {
-    light: @go-color-n800;
-    dark: @go-color-dn600;
+    light: @go-color-n1000;
+    dark: @go-color-dn900;
   }
   .subtle() {
     light: @go-color-n200;
@@ -188,49 +190,4 @@
 @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

@@ -5,4 +5,4 @@
 @import "sizing.less";
 @import "layering.less";
 @import "elevation.less";
-@import "transitions.less";
+@import "transitions.less";

package/src/elevation.less

@@ -21,6 +21,6 @@
   }
   .avatar() {
     light: inset 0 0 10px fade(@go-color-n900, 5%);
-    dark: inset 0 0 10px fade(@go-color-n900, 5%)
+    dark: inset 0 0 10px fade(@go-color-n900, 5%);
   }
-}; ;
+}

package/src/fonts.less

@@ -3,10 +3,10 @@
 @font-family-code: "SFMono-Medium", "SF Mono", "Segoe UI Mono", "Roboto Mono",
   "Ubuntu Mono", Menlo, Consolas, Courier, monospace;
 
-@font-style: normal;
+@font-style-normal: normal;
+@font-style-italic: italic;
 
 @font-size-default: @font-size-14;
-// @font-size-11: 11px;
 @font-size-12: 12px;
 @font-size-14: 14px;
 @font-size-15: 15px;

package/src/index.less

@@ -1,10 +1,271 @@
-@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";
+// 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;
+}
+
+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: @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: (@grid-size * 2px) @size0 @size0 @size0;
+}
+
+// Links
+a {
+  color: #link-color.default[light];
+  text-decoration: @link-text-decoration[default];
+  border-radius: @border-width;
+  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;
+}
+
+// Lists
+ul,
+ol,
+dl {
+  padding-left: (@grid-size * 5px);
+}
+dd,
+dd + dt,
+li + li {
+  margin-top: (@grid-size / 2px);
+}
+ul,
+ol {
+  ul,
+  ol {
+    &:not(:first-child) {
+      margin-top: (@grid-size / 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: @size0;
+}
+
+// Outline
+:focus {
+  outline: none;
+  box-shadow: @size0 @size0 @size0 @focus-outline-width @focus-outline-color;
+}
+[data-whatintent="mouse"] :focus {
+  outline: none;
+  box-shadow: none;
+}
+
+// Tables
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+thead,
+tbody,
+tfoot {
+  border-bottom: @border-width solid @table-border-color[light];
+}
+td,
+th {
+  border: none;
+  padding: (@grid-size / 2) * 1px @grid-size * 1px;
+  text-align: left;
+}
+th {
+  .heading-100;
+  line-height: inherit;
+}
+td:first-child,
+th:first-child {
+  padding-left: @size0;
+}
+td:last-child,
+th:last-child {
+  padding-right: @size0;
+}
+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];
+}
+
+// Other elements
+hr {
+  background-color: @horizontal-rule-color[light];
+  height: 2px;
+  border-style: none;
+  margin: 40px @size0;
+}
+pre {
+  font-family: @font-family-code;
+  white-space: pre-wrap;
+  padding: @size8 @size16;
+  border-radius: @border-radius-large;
+  background: @code-block-color[light];
+  font-size: 0.8rem;
+  overflow-x: auto;
+}
+blockquote {
+  white-space: pre-wrap;
+  border-left: @border-width-3 solid @blockquote-border-color[light];
+  padding-left: @size8;
+  font-style: @font-style-italic;
+}
+p code {
+  font-family: @font-family-code;
+  padding: @size0 @size8;
+  border-radius: @border-radius-regular;
+  background: @code-color[light];
+}
+caption {
+  .heading-600;
+  margin-bottom: @size8;
+  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: @border-width-3 solid @blockquote-border-color[dark];
+  }
+  thead,
+  tbody,
+  tfoot {
+    border-bottom: @border-width solid @table-border-color[dark];
+  }
+  tbody tr:hover {
+    background-color: @table-hover-color[dark];
+  }
+}

package/src/styles.less

@@ -1,13 +1,18 @@
-@import "grid.less";
+@grid-size: 8;
+@focus-outline-width: 2px;
+@link-text-decoration: {
+  default: none;
+  hover: underline;
+};
 
 .heading-900 {
   font-size: unit((35px / @font-size-default), em);
-  font-style: @font-style;
+  font-style: @font-style-normal;
   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;
+  margin-top: @grid-size * 6.5px;
 
   [dark-mode="true"] & {
     color: #heading-color.default[dark];
@@ -18,12 +23,12 @@
 }
 .heading-800 {
   font-size: unit((29px / @font-size-default), em);
-  font-style: @font-style;
+  font-style: @font-style-normal;
   line-height: unit((32px / 29px), em);
   color: #heading-color.default[light];
   font-weight: @font-weight-semibold;
   letter-spacing: -0.01em;
-  margin-top: @gridSize * 5px;
+  margin-top: @grid-size * 5px;
 
   [dark-mode="true"] & {
     color: #heading-color.default[dark];
@@ -34,12 +39,12 @@
 }
 .heading-700 {
   font-size: unit((24px / @font-size-default), em);
-  font-style: @font-style;
+  font-style: @font-style-normal;
   line-height: unit((28px / 24px), em);
   color: #heading-color.default[light];
   font-weight: @font-weight-medium;
   letter-spacing: -0.01em;
-  margin-top: @gridSize * 5px;
+  margin-top: @grid-size * 5px;
 
   [dark-mode="true"] & {
     color: #heading-color.default[dark];
@@ -50,12 +55,12 @@
 }
 .heading-600 {
   font-size: unit((20px / @font-size-default), em);
-  font-style: @font-style;
+  font-style: @font-style-normal;
   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;
+  margin-top: @grid-size * 3.5px;
 
   [dark-mode="true"] & {
     color: #heading-color.default[dark];
@@ -66,12 +71,12 @@
 }
 .heading-500 {
   font-size: unit((16px / @font-size-default), em);
-  font-style: @font-style;
+  font-style: @font-style-normal;
   line-height: unit((20px / 16px), em);
   color: #heading-color.default[light];
   font-weight: @font-weight-semibold;
   letter-spacing: -0.006em;
-  margin-top: @gridSize * 3px;
+  margin-top: @grid-size * 3px;
 
   [dark-mode="true"] & {
     color: #heading-color.default[dark];
@@ -82,12 +87,12 @@
 }
 .heading-400 {
   font-size: unit((14px / @font-size-default), em);
-  font-style: @font-style;
+  font-style: @font-style-normal;
   line-height: unit((16px / 14px), em);
   color: #heading-color.default[light];
   font-weight: @font-weight-semibold;
   letter-spacing: -0.003em;
-  margin-top: @gridSize * 2px;
+  margin-top: @grid-size * 2px;
 
   [dark-mode="true"] & {
     color: #heading-color.default[dark];
@@ -98,11 +103,11 @@
 }
 .heading-300 {
   font-size: unit((12px / @font-size-default), em);
-  font-style: @font-style;
+  font-style: @font-style-normal;
   line-height: unit((16px / 12px), em);
   color: #heading-color.default[light];
   font-weight: @font-weight-semibold;
-  margin-top: @gridSize * 2.5px;
+  margin-top: @grid-size * 2.5px;
   text-transform: uppercase;
 
   [dark-mode="true"] & {
@@ -114,11 +119,11 @@
 }
 .heading-200 {
   font-size: unit((12px / @font-size-default), em);
-  font-style: @font-style;
+  font-style: @font-style-normal;
   line-height: unit((16px / 12px), em);
   color: #heading-color.subtle[light];
   font-weight: @font-weight-semibold;
-  margin-top: @gridSize * 2px;
+  margin-top: @grid-size * 2px;
 
   [dark-mode="true"] & {
     color: #heading-color.subtle[dark];
@@ -129,11 +134,11 @@
 }
 .heading-100 {
   font-size: unit((11px / @font-size-default), em);
-  font-style: @font-style;
+  font-style: @font-style-normal;
   line-height: unit((16px / 11px), em);
   color: #heading-color.subtle[light];
   font-weight: @font-weight-bold;
-  margin-top: @gridSize * 2px;
+  margin-top: @grid-size * 2px;
 
   [dark-mode="true"] & {
     color: #heading-color.subtle[dark];

package/src/base.less

@@ -1,255 +0,0 @@
-@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/grid.less

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

package/src/reset.less

@@ -1,25 +0,0 @@
-// 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;
-}