Showcase base styles iterations. I think more work will need to be do…

…ne here.
AgnosticUI · Sep 15, 2020 · 3b2dc19 · 3b2dc19
1 parent a890167
commit 3b2dc19
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 11 deletions.
diff --git a/showcase/src/partials/Colors.vue b/showcase/src/partials/Colors.vue
@@ -91,16 +91,16 @@
 * --agnostic-primary.
 */
 :root {
-  --agnostic-primary: Fuchsia;
-  --agnostic-secondary: Teal;
-  --agnostic-gray-extra-light: #f8f8f8;
-  --agnostic-gray-light: #e9e9e9;
-  --agnostic-gray-mid: #d8d8d8;
-  --agnostic-gray-mid-dark: #cccccc;
-  --agnostic-gray-dark: #aaaaaa;
-  --agnostic-dark: #333333;
-  --agnostic-light: #ffffff;
-  /* More TBD */
+  /* Please, please, please, at mimimum redefine primary and secondary ;) */
+  --agnostic-default-primary: Fuchsia;
+  --agnostic-default-secondary: Teal;
+  --agnostic-default-gray-extra-light: #f8f8f8;
+  --agnostic-default-gray-light: #e9e9e9;
+  --agnostic-default-gray-mid: #d8d8d8;
+  --agnostic-default-gray-mid-dark: #cccccc;
+  --agnostic-default-gray-dark: #aaaaaa;
+  --agnostic-default-dark: #333333;
+  --agnostic-default-light: #ffffff;
 }
 
 /* You will override these by defining them in your top-level stylesheet: */

diff --git a/showcase/src/partials/Spacing.vue b/showcase/src/partials/Spacing.vue
@@ -4,7 +4,9 @@
     <h1 id="spacing">Spacing</h1>
     <h3>
       Consistent spacing is key to visual harmony and balance. AgnosticUI's spacing is based off of an
-      <a href="https://www.designsystems.com/space-grids-and-layouts/">8pt system</a> which is conveniently
+      <a
+        href="https://www.designsystems.com/space-grids-and-layouts/"
+      >8pt system</a> which is conveniently
       relative to the base 16px (1rem) unit used on the web. Spacing is done via CSS custom property tokens.
     </h3>
     <div :class="$style.hotips">
@@ -16,6 +18,10 @@
       </div>
     </div>
     <pre v-highlightjs><code class="css">
+/**
+ * agnostic-default- is not used here since these are, essentially, literals for
+ * use on a slightly modified 8pt grid.
+ */
 :root {
   --Space-80: 80px;
   --Space-72: 72px;

diff --git a/showcase/src/partials/Typography.vue b/showcase/src/partials/Typography.vue
@@ -36,6 +36,22 @@
         </p>
       </div>
     </div>
+    <pre v-highlightjs><code class="css">
+/**
+ * These are only meant to be minimal point of departure to work from. You're encouraged
+ * to customize your font stack and sizes to whatever suits you.
+ */
+:root {
+  --agnostic-default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --agnostic-default-h1: 64px;
+  --agnostic-default-h2: 48px;
+  --agnostic-default-h3: 36px;
+  --agnostic-default-h4: 24px;
+  --agnostic-default-h5: 18px;
+  --agnostic-default-h6: 14px;
+  --agnostic-default-body: 16px;
+}
+    </code></pre>
   </section>
 </template>
 <style module>