Removing a bunch of the -default agnosticui variables

AgnosticUI · Oct 4, 2020 · d265324 · d265324
1 parent 645668e
commit d265324
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 103 deletions.
diff --git a/agnosticui-css/card.html b/agnosticui-css/card.html
@@ -61,13 +61,13 @@
     }
 
     .card-rating span {
-      color: var(--agnosticui-default-gray-dark);
+      color: var(--agnosticui-gray-dark);
     }
 
     .card-votes {
       font-size: .825em;
       font-style: italic;
-      color: var(--agnosticui-default-gray-light);
+      color: var(--agnosticui-gray-light);
     }
 
     .card-image-wrap {

diff --git a/agnosticui-css/colors.css b/agnosticui-css/colors.css
@@ -1,28 +1,17 @@
 /**
  * Color tokens
- *
- * These spacing tokens are, essentially, literals for use on a
- * slightly modified 8pt grid, but also converge conveniently with
- * some common type scale boundaries:
- * 10, 12, 14, 18, 24, 36, 48, 64, 72
- * Note, that we do not prefix these with `agnostic-default-` as
- * they're not meant to be overriden and mainly used:
- * 1. internally within AgnosticUI
- * 2. optionally by your app if you like these and want to
- * import them for example.
- * Feel free to use your spacing scale if you so desire.
  */
 
 :root {
   /* Please, please, please, at mimimum redefine primary and secondary ;) */
-  --agnosticui-default-primary: Fuchsia;
-  --agnosticui-default-secondary: Teal;
-  --agnosticui-default-gray-extra-light: #f8f8f8;
-  --agnosticui-default-gray-light: #e9e9e9;
-  --agnosticui-default-gray-mid: #d8d8d8;
-  --agnosticui-default-gray-mid-dark: #cccccc;
-  --agnosticui-default-gray-dark: #aaaaaa;
-  --agnosticui-default-dark: #333333;
-  --agnosticui-default-light: #ffffff;
+  --agnosticui-primary: Fuchsia;
+  --agnosticui-secondary: Teal;
+  --agnosticui-gray-extra-light: #f8f8f8;
+  --agnosticui-gray-light: #e9e9e9;
+  --agnosticui-gray-mid: #d8d8d8;
+  --agnosticui-gray-mid-dark: #cccccc;
+  --agnosticui-gray-dark: #aaaaaa;
+  --agnosticui-dark: #333333;
+  --agnosticui-light: #ffffff;
   /* Caption, Sub-heading, etc., can be added here */
 }
diff --git a/agnosticui-css/common.css b/agnosticui-css/common.css
@@ -14,28 +14,28 @@
 @import "typography.css";
 
 body {
-  font-family: var(--agnosticui-default-font-family);
-  line-height: var(--agnosticui-default-line-height);
-  font-size: var(--agnosticui-default-body);
+  font-family: var(--agnosticui-font-family);
+  line-height: var(--agnosticui-line-height);
+  font-size: var(--agnosticui-body);
 }
 
 h1, h2, h3, h4, h5, h6 { font-weight: 300; margin-bottom: 40px; }
-h1 { font-size: var(--agnosticui-default-h1); }
-h2 { font-size: var(--agnosticui-default-h2); }
-h3 { font-size: var(--agnosticui-default-h3); }
-h4 { font-size: var(--agnosticui-default-h4); }
-h5 { font-size: var(--agnosticui-default-h5); }
-h6 { font-size: var(--agnosticui-default-h6); }
+h1 { font-size: var(--agnosticui-h1); }
+h2 { font-size: var(--agnosticui-h2); }
+h3 { font-size: var(--agnosticui-h3); }
+h4 { font-size: var(--agnosticui-h4); }
+h5 { font-size: var(--agnosticui-h5); }
+h6 { font-size: var(--agnosticui-h6); }
 
 /* For inline code blocks I use <i> */
 i {
-  background-color: var(--agnosticui-default-gray-extra-light);
-  border: 1px solid var(--agnosticui-default-gray-mid);
+  background-color: var(--agnosticui-gray-extra-light);
+  border: 1px solid var(--agnosticui-gray-mid);
   border-radius: 3px;
   display: inline;
-  font-family: var(--agnosticui-default-font-family-mono);
+  font-family: var(--agnosticui-font-family-mono);
   font-style: normal;
-  color: var(--agnosticui-default-dark);
+  color: var(--agnosticui-dark);
   margin: 0 3px 0 1px;
   padding: 1px 5px 2px 5px;
   position: relative;

diff --git a/agnosticui-css/typography.css b/agnosticui-css/typography.css
@@ -10,17 +10,17 @@
  */
 
 :root {
-  --agnosticui-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";
-  --agnosticui-default-font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
-  --agnosticui-default-font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  --agnosticui-default-line-height: 1.5;
-  --agnosticui-default-h1: 64px;
-  --agnosticui-default-h2: 48px;
-  --agnosticui-default-h3: 36px;
-  --agnosticui-default-h4: 24px;
-  --agnosticui-default-h5: 18px;
-  --agnosticui-default-h6: 14px;
-  --agnosticui-default-body: 16px;
-  --agnosticui-default-font-weight-bold: 600;
-  --agnosticui-default-font-weight-light: 300;
+  --agnosticui-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";
+  --agnosticui-font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
+  --agnosticui-font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --agnosticui-line-height: 1.5;
+  --agnosticui-h1: 64px;
+  --agnosticui-h2: 48px;
+  --agnosticui-h3: 36px;
+  --agnosticui-h4: 24px;
+  --agnosticui-h5: 18px;
+  --agnosticui-h6: 14px;
+  --agnosticui-body: 16px;
+  --agnosticui-font-weight-bold: 600;
+  --agnosticui-font-weight-light: 300;
 }
diff --git a/showcase/public/index.html b/showcase/public/index.html
@@ -13,9 +13,9 @@
       --agnosticui-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";
       --agnosticui-body: 21px;
       --agnosticui-font-weight-light: 300;
-      --agnosticui-h1: var(--agnosticui-default-h1);
-      --agnosticui-h2: var(--agnosticui-default-h2);
-      --agnosticui-h3: var(--agnosticui-default-h3);
+      --agnosticui-h1: var(--agnosticui-h1);
+      --agnosticui-h2: var(--agnosticui-h2);
+      --agnosticui-h3: var(--agnosticui-h3);
       --agnosticui-h4: 21px;
       --agnosticui-h5: 18px;
       --agnosticui-h6: 11px;

diff --git a/showcase/src/partials/Colors.vue b/showcase/src/partials/Colors.vue
@@ -12,31 +12,37 @@
             The appropriate and
             <a
               href="https://medium.com/@raquel/inclusive-color-resources-for-your-a11y-color-needs-cf3448c63335"
-            >inclusive use of color</a>
+              >inclusive use of color</a
+            >
             can help to set the tone of your brand and encourage users to
             <a
               href="https://blog.adobe.com/en/publish/2017/03/29/the-impact-of-color-on-conversion-rates.html#gs.f5rtr2"
               class="href"
-            >take certain actions</a>.
+              >take certain actions</a
+            >.
           </h3>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
         <FlexCol v-bind:xs="12">
           <div :class="$style.hotips">
             <p :class="$style.tip">
-              <span class="quoted">Colors express the main psychic functions of man.</span>
+              <span class="quoted"
+                >Colors express the main psychic functions of man.</span
+              >
               <a
                 href="https://www.facebook.com/cgjungny/posts/colors-express-the-main-psychic-functions-of-man-carl-gustav-jung/10155223465700093/"
                 class="href"
-              >Carl Gustav Jung</a>
+                >Carl Gustav Jung</a
+              >
             </p>
             <div :class="$style.tipcontent">
               <p>
-                AgnosticUI creates a minimal set of color tokens which you're encouraged to customize
-                and extend by simply redefining them in your top-level stylesheet. We use sensible
-                neutral gray color defaults, but intentionally use loud primary and secondary colors
-                in hopes that it will persuade you to define your own.
+                AgnosticUI creates a minimal set of color tokens which you're
+                encouraged to customize and extend by simply redefining them in
+                your top-level stylesheet. We use sensible neutral gray color
+                defaults, but intentionally use loud primary and secondary
+                colors in hopes that it will persuade you to define your own.
               </p>
 
               <p>Here's what the defaults look like if not redefined:</p>
@@ -48,7 +54,9 @@
                   </li>
                   <li :class="[$style.swatch, $style.secondary]">
                     <div :class="$style.body"></div>
-                    <footer :class="$style.footer">--agnosticui-secondary</footer>
+                    <footer :class="$style.footer">
+                      --agnosticui-secondary
+                    </footer>
                   </li>
                   <li :class="[$style.swatch, $style.light]">
                     <div :class="$style.body"></div>
@@ -60,27 +68,37 @@
                 <ul :class="$style.swatcheswrap">
                   <li :class="[$style.swatch, $style.grayextralight]">
                     <div :class="$style.body"></div>
-                    <footer :class="$style.footer">--agnosticui-gray-extra-light</footer>
+                    <footer :class="$style.footer">
+                      --agnosticui-gray-extra-light
+                    </footer>
                   </li>
                   <li :class="[$style.swatch, $style.graylight]">
                     <div :class="$style.body"></div>
-                    <footer :class="$style.footer">--agnosticui-gray-light</footer>
+                    <footer :class="$style.footer">
+                      --agnosticui-gray-light
+                    </footer>
                   </li>
                   <li :class="[$style.swatch, $style.graymid]">
                     <div :class="$style.body"></div>
-                    <footer :class="$style.footer">--agnosticui-gray-mid</footer>
+                    <footer :class="$style.footer">
+                      --agnosticui-gray-mid
+                    </footer>
                   </li>
                 </ul>
               </div>
               <div :class="$style.swatches">
                 <ul :class="$style.swatcheswrap">
                   <li :class="[$style.swatch, $style.graymiddark]">
                     <div :class="$style.body"></div>
-                    <footer :class="$style.footer">--agnosticui-gray-mid-dark</footer>
+                    <footer :class="$style.footer">
+                      --agnosticui-gray-mid-dark
+                    </footer>
                   </li>
                   <li :class="[$style.swatch, $style.graydark]">
                     <div :class="$style.body"></div>
-                    <footer :class="$style.footer">--agnosticui-gray-dark</footer>
+                    <footer :class="$style.footer">
+                      --agnosticui-gray-dark
+                    </footer>
                   </li>
                   <li :class="[$style.swatch, $style.dark]">
                     <div :class="$style.body"></div>
@@ -98,27 +116,27 @@
 /**
 * You should override these by simply defining them less the
 * `-default` in your top-level stylesheet. For example, to
-* override `--agnosticui-default-primary` simply define
+* override `--agnosticui-primary` simply define
 * `--agnosticui-primary` and that will take precedence.
 *
 * Under the hood, when AgnosticUI applies one of these it
 * does something like:
 *   margin-left: var(--agnosticui-primary,
-*                    var(--agnosticui-default-primary));
-* where the --agnosticui-default-primary is the fallback
+*                    var(--agnosticui-primary));
+* where the --agnosticui-primary is the fallback
 * if you haven't supplied --agnosticui-primary.
 */
 :root {
   /* Please, at mimimum redefine primary and secondary ;) */
-  --agnosticui-default-primary: Fuchsia;
-  --agnosticui-default-secondary: Tomato;
-  --agnosticui-default-gray-extra-light: #f8f8f8;
-  --agnosticui-default-gray-light: #e9e9e9;
-  --agnosticui-default-gray-mid: #d8d8d8;
-  --agnosticui-default-gray-mid-dark: #cccccc;
-  --agnosticui-default-gray-dark: #aaaaaa;
-  --agnosticui-default-dark: #333333;
-  --agnosticui-default-light: #ffffff;
+  --agnosticui-primary: Fuchsia;
+  --agnosticui-secondary: Tomato;
+  --agnosticui-gray-extra-light: #f8f8f8;
+  --agnosticui-gray-light: #e9e9e9;
+  --agnosticui-gray-mid: #d8d8d8;
+  --agnosticui-gray-mid-dark: #cccccc;
+  --agnosticui-gray-dark: #aaaaaa;
+  --agnosticui-dark: #333333;
+  --agnosticui-light: #ffffff;
 }
 
 /* You will override these by defining them in your top-level

diff --git a/showcase/src/partials/Typography.vue b/showcase/src/partials/Typography.vue
@@ -8,15 +8,21 @@
       </FlexRow>
       <FlexRow v-bind:gutter="16">
         <FlexCol v-bind:xs="12">
-          <h3>Typography and scale are the foundations your designs are built on.</h3>
+          <h3>
+            Typography and scale are the foundations your designs are built on.
+          </h3>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
         <FlexCol v-bind:xs="12">
           <div :class="$style.hotips">
             <p :class="$style.tip">
               <span class="quoted">Make it easy to read.</span>
-              <a href="https://www.fastcompany.com/32656/web-sites-work" class="href">Roger Black</a>
+              <a
+                href="https://www.fastcompany.com/32656/web-sites-work"
+                class="href"
+                >Roger Black</a
+              >
             </p>
             <div :class="$style.tipcontent">
               Please consider heeding Black's 6 rules for web design:
@@ -26,31 +32,37 @@
                 <li :class="$style.li">Faster beats fancier</li>
                 <li :class="$style.li">Content is king</li>
                 <li :class="$style.li">Small bytes go down easier</li>
-                <li :class="$style.li">If you don’t have something good to say, don’t say anything</li>
+                <li :class="$style.li">
+                  If you don’t have something good to say, don’t say anything
+                </li>
               </ul>
               <h5 :class="$style.customize">Using CSS Custom to Theme</h5>
               <p>
                 <a
                   href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties"
-                >CSS custom properties</a>
-                are an underutilized tool for web designers and developers alike. They allow us to define and use
-                <span
-                  class="quoted"
-                >variables</span> that can be shared across our app. But, even more powerfully, they
-                provide a built-in fallback system which allows us to replace default values with our own.
-                This makes theming easy!
+                  >CSS custom properties</a
+                >
+                are an underutilized tool for web designers and developers
+                alike. They allow us to define and use
+                <span class="quoted">variables</span> that can be shared across
+                our app. But, even more powerfully, they provide a built-in
+                fallback system which allows us to replace default values with
+                our own. This makes theming easy!
               </p>
               <p>
-                For example, AgnosticUI uses a system font stack by default, but you
-                may want to instead use your own. This can be achieved by simply defining
-                the custom css property for font family. Under the hood, AgnosticUI will do:
+                For example, AgnosticUI uses a system font stack by default, but
+                you may want to instead use your own. This can be achieved by
+                simply defining the custom css property for font family. Under
+                the hood, AgnosticUI will do:
               </p>
               <pre class="inline-code">
 var(--agnosticui-font-family,
-var(--agnosticui-default-font-family));</pre>
+var(--agnosticui-font-family));</pre
+              >
               <p>
-                Essentially, the left variable will be used if defined, otherwise it will fallback to
-                default one. All override variables in AgnosticUI are defined using this same naming
+                Essentially, the left variable will be used if defined,
+                otherwise it will fallback to default one. All override
+                variables in AgnosticUI are defined using this same naming
                 convention where you simply remove the
                 <i>--default</i>.
               </p>
@@ -67,19 +79,19 @@ var(--agnosticui-default-font-family));</pre>
  * suits you. Note the newlines here are for readability only.
  */
 :root {
-  --agnosticui-default-font-family: -apple-system, BlinkMacSystemFont,
+  --agnosticui-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";
-  --agnosticui-default-h1: 64px;
-  --agnosticui-default-h2: 48px;
-  --agnosticui-default-h3: 36px;
-  --agnosticui-default-h4: 24px;
-  --agnosticui-default-h5: 18px;
-  --agnosticui-default-h6: 14px;
-  --agnosticui-default-body: 16px;
-  --agnosticui-default-font-weight-bold: 600;
-  --agnosticui-default-font-weight-light: 300;
+  --agnosticui-h1: 64px;
+  --agnosticui-h2: 48px;
+  --agnosticui-h3: 36px;
+  --agnosticui-h4: 24px;
+  --agnosticui-h5: 18px;
+  --agnosticui-h6: 14px;
+  --agnosticui-body: 16px;
+  --agnosticui-font-weight-bold: 600;
+  --agnosticui-font-weight-light: 300;
 }
     </code></pre>
         </FlexCol>