docs(variant): redo depraction docs properly for previous modes that …

…were moved to variants

demo/api.md

@@ -20,7 +20,7 @@
 | [fluid](#fluid)          | `fluid`          | `Boolean` | false   | Alters the shape of the button to be full width of its parent container |
 | [iconOnly](#iconOnly)       | `iconOnly`       | `Boolean` | false   | If set to true, the button will contain an icon with no additional content |
 | [loading](#loading)        | `loading`        | `Boolean` | false   | If set to true button text will be replaced with `auro-loader` and become disabled |
-| [ondark](#ondark)         | `ondark`         | `Boolean` | false   | Set value for on-dark version of auro-button     |
+| [onDark](#onDark)         | `onDark`         | `Boolean` | false   | Set value for on-dark version of auro-button     |
 | [ready](#ready)          | `ready`          | `Boolean` | false   | When false the component API should not be called. |
 | [rounded](#rounded)        | `rounded`        | `Boolean` | false   | If set to true, the button will have a rounded shape |
 | [secondary](#secondary)      | `secondary`      | `Boolean` | false   | DEPRECATED                                       |
@@ -564,10 +564,10 @@ The component may be restyled using the following code sample and changing the v
 
 ```scss
 :host {
+  --ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-default, $ds-color-container-ui-primary-active-default);
+  --ds-auro-button-container-color: var(--ds-color-container-ui-primary-active-default, $ds-color-container-ui-primary-active-default);
+  --ds-auro-button-container-image: var(--ds-color-container-ui-primary-active-default, $ds-color-container-ui-primary-active-default);
   --ds-auro-button-text-color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse);
-  --ds-auro-button-container-color: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
-  --ds-auro-button-container-image: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
-  --ds-auro-button-border-color: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
 
   // THE BELOW TOKEN SEEMS WRONG - WAITING FOR RESPONSE FROM JUNE
   --ds-auro-button-border-inset-color: var(--ds-color-border-emphasis-inverse, $ds-color-border-emphasis-inverse);

demo/index.md

@@ -54,7 +54,7 @@ In cases were the action of the button would not fit the criteria above, it is m
 
 These examples illustrate the core button types and a `disabled` state on dark backgrounds using the `onDark` attribute.
 
-<div class="exampleWrapper">
+<div class="exampleWrapper--ondark">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/onDark.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/onDark.html -->
   <auro-button ondark>Primary</auro-button>

docs/api.md

@@ -17,7 +17,7 @@
 | `fluid`          | `fluid`          | `Boolean` | false   | Alters the shape of the button to be full width of its parent container |
 | `iconOnly`       | `iconOnly`       | `Boolean` | false   | If set to true, the button will contain an icon with no additional content |
 | `loading`        | `loading`        | `Boolean` | false   | If set to true button text will be replaced with `auro-loader` and become disabled |
-| `ondark`         | `ondark`         | `Boolean` | false   | Set value for on-dark version of auro-button     |
+| `onDark`         | `onDark`         | `Boolean` | false   | Set value for on-dark version of auro-button     |
 | `ready`          | `ready`          | `Boolean` | false   | When false the component API should not be called. |
 | `rounded`        | `rounded`        | `Boolean` | false   | If set to true, the button will have a rounded shape |
 | `secondary`      | `secondary`      | `Boolean` | false   | DEPRECATED                                       |

docs/partials/index.md

@@ -68,7 +68,7 @@ This example demonstrates `auro-button` in it's `disabled` state.
 
 </auro-accordion>
 
-<div class="exampleWrapper">
+<div class="exampleWrapper--ondark">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/disabledOnDark.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>

package.json

@@ -92,11 +92,12 @@
     "build:test": "npm-run-all test linters",
     "build:release": "npm-run-all build:test build types postinstall",
     "build:ci": "npm-run-all sweep build:release",
-    "build:dev:assets": "npm-run-all build:sass:component postCss:component sass:render",
+    "build:sass": "npm-run-all build:sass:component postCss:component sass:render",
     "build:api": "wca analyze 'src/auro-button.js' --outFiles docs/api.md",
     "build:docs": "node scripts/generateDocs.mjs",
-    "build:watch": "nodemon -e scss,js --watch src --exec npm run build:dev:assets",
+    "build:watch": "nodemon -e scss,js,html,md --watch src,docs,apiExamples --exec npm run build",
     "build:version": "node scripts/version.mjs",
+    "build:sass:component": "sass --no-source-map src:src",
     "bundler": "rollup -c",
     "bundle:test": "rollup -c -w",
     "scssLint": "stylelint \"./src/**/*.scss\"",
@@ -109,8 +110,6 @@
     "preCommit": "node scripts/pre-commit.mjs",
     "test": "wtr --coverage",
     "test:watch": "wtr --watch",
-    "build:sass": "npm-run-all build:sass:component postCss:component sass:render",
-    "build:sass:component": "sass --no-source-map src:src",
     "postinstall": "node packageScripts/postinstall.mjs",
     "postCss:component": "node scripts/postCss.mjs",
     "serve": "web-dev-server --open demo/ --node-resolve --watch",

src/auro-button.js

@@ -31,6 +31,8 @@ import loaderVersion from './loaderVersion';
  * @attr {String} type - The type of the button. Possible values are: `submit`, `reset`, `button`
  * @attr {String} value - Defines the value associated with the button which is submitted with the form data.
  * @attr {String} variant - Sets button variant option. Possible values are: `secondary`, `tertiary`
+ * @attr {Boolean} secondary - DEPRECATED
+ * @attr {Boolean} tertiary - DEPRECATED
  * @prop {Boolean} ready - When false the component API should not be called.
  * @event auroButton-ready - Notifies that the component has finished initializing.
  * @slot - Default slot for the text of the button.
@@ -63,6 +65,10 @@ export class AuroButton extends LitElement {
      * Generate unique names for dependency components.
      */
     const versioning = new AuroDependencyVersioning();
+
+    /**
+     * @private
+     */
     this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
   }
 
@@ -168,6 +174,17 @@ export class AuroButton extends LitElement {
     }));
   }
 
+  updated() {
+    // support the old `secondary` and `tertiary` attributes` that are deprecated
+    if (this.secondary) {
+      this.setAttribute('variant', 'secondary');
+    }
+
+    if (this.tertiary) {
+      this.setAttribute('variant', 'tertiary');
+    }
+  }
+
   firstUpdated() {
     this.notifyReady();
   }
@@ -192,8 +209,6 @@ export class AuroButton extends LitElement {
         class="${classMap(classes)}"
         ?disabled="${this.disabled || this.loading}"
         ?onDark="${this.onDark}"
-        ?secondary="${this.secondary}"
-        ?tertiary="${this.tertiary}"
         title="${ifDefined(this.title ? this.title : undefined)}"
         name="${ifDefined(this.name ? this.name : undefined)}"
         type="${ifDefined(this.type ? this.type : undefined)}"