Change 'theme' to 'type' #18 (#40)

Addressing issue #18 
Co-Authored-By: Domenic Denicola <[email protected]>

README.md

@@ -91,7 +91,7 @@ and then show them inside the application logic.
 import 'std:elements/toast';
 </script>
 
-<std-toast id="sample-toast" theme="info">
+<std-toast id="sample-toast" type="info">
     Hello World!
 </std-toast>
 ```
@@ -112,7 +112,7 @@ similar to how the `alert()` function can be used show alerts.
 import { showToast } from 'std:elements/toast';
 
 const toast = showToast("Hello World!", {
-    theme: "info",
+    type: "info",
     duration: 3000
 });
 ```
@@ -176,8 +176,9 @@ though this timeout will be suspended while the toast has focus or the mouse is
 - [Global attributes](https://html.spec.whatwg.org/multipage/dom.html#global-attributes)
 - `open`: a boolean attribute, determining whether the toast is visible or not (according to the default styles).
 By default toasts are not shown.
-- `theme`: one of `"default"`, ???, or ???, conveying the semantic priority of the toast, and influencing its styling (both default and user-provided)
-    - TODO([#18](https://github.com/jackbsteinberg/std-toast/issues/18)): decide on list of themes to natively support and create and style them.
+- `type`: category of toast, conveying the semantic priority of the toast, and influencing its styling (both default and user-provided). This will correspond closely with certain [WAI-ARIA roles](https://w3c.github.io/using-aria/#aria-roles) 
+(more discussion in [#18](https://github.com/jackbsteinberg/std-toast/issues/18)).
+    - TODO([#18](https://github.com/jackbsteinberg/std-toast/issues/18)): decide on list of WAI-ARIA Roles to use, and decide on types to natively support, create, and style.
 - `position`: default position will be ???
     - Options for position:
         - `"top-left"`
@@ -324,7 +325,7 @@ allowing further manipulation by script.
 and the options for this particular showing of the toast.
 Thus, the possible options are:
 
-- `theme`, like the attribute
+- `type`, like the attribute
 - `position`, like the attribute
 - `closeButton`, like the attribute
 - `duration`, like the `show()` option
@@ -349,7 +350,7 @@ when the `open` attribute is not present.
 #### `std-toast[open]`
 
 TODO: figure out some default styles, and state them here.
-Additionally figure out default styles for themes.
+Additionally figure out default styles for types.
 
 ### Appearance customization
 
@@ -381,7 +382,7 @@ document.querySelector('#sample-toast').show();
 ### Create and show new toast with options
 ```js
 const toast = showToast("Hello World!", {
-    theme: "info",
+    type: "info",
     duration: 3000
 });
 ```
@@ -400,7 +401,7 @@ document.querySelector("#container").append(toast);
 
 ```js
 const configs = {
-    theme: 'info',
+    type: 'info',
     duration: 3000
 }
 

study-group/README.md

@@ -28,7 +28,7 @@ If there are any mistakes, please open an issue to get them corrected.
 | [Events](#properties)                                 |     |     | yes | yes |     |     | yes |     |     | yes |     |     |
 | [Icon](#properties)                                   |     | yes | yes | yes | yes |     |     | yes | yes |     |     |     |
 | [Progress Bar](#properties)                           | yes |     | yes |     |     |     |     |     |     |     |     |     |
-| [Theme Support](#built-in-support)                    | yes | yes | yes |     | yes |     | yes | yes | yes |     |     |     |
+| [Type Support](#built-in-support)                     | yes | yes | yes |     | yes |     | yes | yes | yes |     |     |     |
 | [Global Custom Configuration](#built-in-support)      | yes | yes | yes |     |     |     |     |     | yes |     |     |     |
 | [Configured / Created in JS](#built-in-support)       | yes | yes | yes |     | yes | yes | yes |     | yes |     |     |     |
 | [Explicit Component Pattern](#built-in-support)       | yes | yes |     | yes |     | yes |     | yes |     | yes |     |     |
@@ -87,9 +87,9 @@ as well as what it's allowed to be used with.
 It consists of a collection of implementation details, patterns, and technologies 
 that are supported by popular libraries.
 
-- Theme Support: offers built-in theming options, such as `success`, `info`, or `error`.
+- Type Support: offers built-in typing options, such as `success`, `info`, or `error`.
 
-- Global Custom Configuration: support for global config objects defining custom themes / patterns, which can be applied to individual toasts.
+- Global Custom Configuration: support for global config objects defining custom types / patterns, which can be applied to individual toasts.
 
 - Configured / Created in JS: the toast object is set up and called to display using JavaScript.
     - Upon display this creates a new DOM element or injects the settings into an existing HTML element.

study-group/Toast-Implementation-Studies.md

@@ -236,7 +236,7 @@ but the documentation recommends the [notistack](https://github.com/iamhosseindh
 ### Takeaways
 - Material-UI Snackbar ships with a many properties allowing for high control.
 - Customization is supported, but sometimes complicated 
-  (e.g. custom styles and [theme support using SnackbarContent](https://material-ui.com/demos/snackbars/#customized-snackbars))
+  (e.g. custom styles and [type support using SnackbarContent](https://material-ui.com/demos/snackbars/#customized-snackbars))
 - The library supports callbacks for `close`, `enter`, and `exit`, 
   for before during and after each event.
 - Allows control of the transition direction.
@@ -373,7 +373,7 @@ class App extends Component {
 }
 ```
 
-react-toastify supports built-in themes for toasts, 
+react-toastify supports built-in types for toasts, 
 such as `success`, `info`, and `warning`, among others.
 It also provides intuitive positioning, 
 that can be set from the toast or configured on the `ToastContainer`.