change outline semantics to not clash with css outline semantics (and esp projects that use tailwind [outline class adds an outline border])

Author: Nikos Katsikanis

css/button-badge.css

@@ -28,7 +28,7 @@ button,
     }
   }
 
-  &.outline {
+  &.wireframe {
     background-color: var(--bg-color);
     color: var(--default-text);
     border: 1px solid var(--default-text);
@@ -81,7 +81,7 @@ button,
   color: var(--default-text);
 }
 
-.badge.outline {
+.badge.wireframe {
   background-color: var(--bg-color);
   color: var(--default-text);
   border: 1px solid var(--default-text);

css/dark.css

@@ -7,7 +7,7 @@
   --form-control-bg: #333;
 
   --bg-color: hsl(var(--base-hue), var(--base-saturation), var(--base-lightness));
-  --bg-outline-hover: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 10%));
+  --bg-wireframe-hover: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 10%));
   --primary-color: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 70%));
   --primary-hover-color: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 80%));
 

examples/vue-project/vanilla_app/css/button-badge.css

@@ -24,7 +24,7 @@ button,
     }
   }
 
-  &.outline {
+  &.wireframe {
     background-color: var(--bg-color);
     color: var(--default-text);
     border: 1px solid var(--default-text);
@@ -50,7 +50,7 @@ button,
   color: var(--default-text);
 }
 
-.badge.outline {
+.badge.wireframe {
   background-color: var(--bg-color);
   color: var(--default-text);
   border: 1px solid var(--default-text);

js/components/nav.js

@@ -149,7 +149,7 @@ export default (hostComponent) => {
       hostComponent.parentElement.insertAdjacentHTML(
           'afterbegin',
           `
-          <button class="burger-button squarify outline border-none">
+          <button class="burger-button squarify wireframe border-none">
             <svg class="icon" viewBox="0 0 100 80" width="20" height="20" fill="currentColor">
               <rect width="100" height="20"></rect>
               <rect y="30" width="100" height="20"></rect>

js/routes/button-badge.js

@@ -45,10 +45,10 @@ export default (hostComponent) => {
     <button class="squarify">Squarify</button>
   </div>
 
-  <p>Outline (hover matches secondary)</p>
+  <p>wireframe (hover matches secondary)</p>
   <div>
-    <button class="outline">Text</button>
-    <button class="outline">
+    <button class="wireframe">Text</button>
+    <button class="wireframe">
       <span class="icon">&#x270F;</span>
       <span class="text">Text + Icon</span>
     </button>
@@ -74,7 +74,7 @@ export default (hostComponent) => {
 <p>Special Cases</p>
 
 <div>
-  <button class="outline small-button" data-component="copy" data-text-to-copy="[email protected]" 
+  <button class="wireframe small-button" data-component="copy" data-text-to-copy="[email protected]" 
   data-initial-text="Copy Email" data-success-text="Copied!"></button>
   </div>
 
@@ -84,7 +84,7 @@ export default (hostComponent) => {
     Some Text
     <span class="badge primary">test</span>
     <span class="badge secondary">test</span>
-    <span class="badge outline">test</span>
+    <span class="badge wireframe">test</span>
     <span class="badge destructive">test</span>
     <span class="badge success">test</span>
   </div>