fix: tokens

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boomerang-io/carbon-addons-boomerang-react",
-  "version": "3.0.0-beta.9",
+  "version": "3.0.0-beta.10",
   "license": "Apache-2",
   "repository": {
     "type": "git",

src/components/Header/_header.scss

@@ -94,7 +94,7 @@
 }
 
 .#{$prefix}--bmrg-header-brand__text {
-  color: shell.$bmrg-brand-accent;
+  color: shell.$bmrg-accent;
   font-size: utils.rem(16px);
   font-weight: 600;
   letter-spacing: 0.16px;

src/styles/index.scss

@@ -86,19 +86,19 @@ $use-theme-boomerang: false !default;
 .#{$prefix}--bmrg-signout-container,
 .#{$prefix}--bmrg-redirect-container {
   .#{$prefix}--modal-container {
-    background-color: shell.$bmrg-header-modal-background-color;
+    background-color: shell.$bmrg-header-modal-background;
     border-radius: var(--cds-border-radius, 0);
 
     * {
       &:focus,
       &::before {
-        outline-color: shell.$bmrg-secondary-color !important;
-        border-color: shell.$bmrg-secondary-color !important;
+        outline-color: shell.$bmrg-secondary !important;
+        border-color: shell.$bmrg-secondary !important;
       }
     }
 
     .#{$prefix}--btn:focus {
-      outline-color: shell.$bmrg-primary-color;
+      outline-color: shell.$bmrg-primary;
     }
 
     .#{$prefix}--modal-content {
@@ -113,10 +113,10 @@ $use-theme-boomerang: false !default;
   }
   .#{$prefix}--modal-close {
     &:hover {
-      background-color: shell.$bmrg-header-hover-background-color;
+      background-color: shell.$bmrg-header-hover-background;
     }
     &:focus {
-      outline: utils.rem(1px) solid shell.$bmrg-secondary-color;
+      outline: utils.rem(1px) solid shell.$bmrg-secondary;
     }
   }
 
@@ -143,7 +143,7 @@ $use-theme-boomerang: false !default;
     }
   }
   .#{$prefix}--modal-footer {
-    background-color: shell.$bmrg-primary-color;
+    background-color: shell.$bmrg-primary;
     margin: 0;
     /** carbon 10 override */
     padding: 0;
@@ -172,11 +172,11 @@ $use-theme-boomerang: false !default;
 
   .#{$prefix}--accordion__heading {
     &:hover:before {
-      background-color: shell.$bmrg-header-hover-background-color;
+      background-color: shell.$bmrg-header-hover-background;
     }
 
     &:focus:before {
-      border-color: shell.$bmrg-secondary-color;
+      border-color: shell.$bmrg-secondary;
     }
   }
 }

src/styles/themes/_boomerang.scss

@@ -1,7 +1,7 @@
 @use "sass:map";
 @use "../config" as *;
 
-/// Boomerang's default color theme
+/// Boomerang's default color theme, defines tokens for v10 and v11 for backwards compat
 /// @type Map
 /// @access public
 /// @group @boomerang/carbon-addons-boomerang
@@ -179,7 +179,7 @@ $shell-tokens: (
   bmrg-header-button-text: #272727,
   bmrg-header-attachment-background: #50565b,
   bmrg-sidenav-active-background: #343a3f,
-  bmrg-active: #009d9a
+  bmrg-active: #009d9a,
 );
 
 $theme: map.merge($v11-tokens, $v10-tokens);

src/styles/themes/_default.scss

@@ -2,26 +2,26 @@
 @use '@carbon/themes/scss/tokens' as theme;
 
 $shell-tokens: (
-  bmrg-primary-color: #161616,
-  bmrg-secondary-color: #c0c7ce,
-  bmrg-tertiary-color: #161616,
-  bmrg-accent-color: theme.$background-brand,
+  bmrg-primary: #161616,
+  bmrg-secondary: #c0c7ce,
+  bmrg-tertiary: #161616,
+  bmrg-accent: theme.$background-brand,
   bmrg-brand-white: #f2f4f8,
-  bmrg-header-active-background-color: theme.$background-brand,
-  bmrg-header-active-text-color: #f2f4f8,
-  bmrg-header-hover-background-color: #343a3f,
-  bmrg-header-menu-options-accent-color: #262626,
-  bmrg-header-menu-options-active-background-color: #262626,
-  bmrg-header-menu-options-top-border-color: theme.$background-brand,
+  bmrg-header-active-background: theme.$background-brand,
+  bmrg-header-active-text: #f2f4f8,
+  bmrg-header-hover-background: #343a3f,
+  bmrg-header-menu-options-accent: #262626,
+  bmrg-header-menu-options-active-background: #262626,
+  bmrg-header-menu-options-top-border: theme.$background-brand,
   bmrg-header-notification-default: #9fa5ad,
   bmrg-header-notification-icon: #bb8eff,
   bmrg-header-modal-overlay: rgba(39, 39, 39, 0.5),
-  bmrg-header-modal-cancel-color: #b9bfc7,
-  bmrg-header-modal-confirm-color: theme.$background-brand,
-  bmrg-header-modal-link-color: theme.$background-brand,
-  bmrg-header-nav-color: #161616,
-  bmrg-header-modal-background-color: #161616,
-  bmrg-header-button-text-color: theme.$text-inverse,
-  bmrg-header-attachment-background-color: #50565b,
-  bmrg-sidenav-active-background-color: #343a3f,
+  bmrg-header-modal-cancel: #b9bfc7,
+  bmrg-header-modal-confirm: theme.$background-brand,
+  bmrg-header-modal-link: theme.$background-brand,
+  bmrg-header-nav: #161616,
+  bmrg-header-modal-background: #161616,
+  bmrg-header-button-text: theme.$text-inverse,
+  bmrg-header-attachment-background: #50565b,
+  bmrg-sidenav-active-background: #343a3f,
 );

src/styles/themes/_shell-tokens.scss

@@ -1,25 +1,25 @@
 @use '@carbon/themes/scss/tokens' as theme;
 
-$bmrg-primary-color: var(--cds-bmrg-primary-color);
-$bmrg-secondary-color: var(--cds-bmrg-secondary-color);
-$bmrg-tertiary-color: var(--cds-bmrg-tertiary-color);
-$bmrg-accent-color: var(--cds-bmrg-accent-color);
+$bmrg-primary: var(--cds-bmrg-primary);
+$bmrg-secondary: var(--cds-bmrg-secondary);
+$bmrg-tertiary: var(--cds-bmrg-tertiary);
+$bmrg-accent: var(--cds-bmrg-accent);
 $bmrg-brand-white: var(--cds-bmrg-brand-white);
-$bmrg-header-active-background-color: var(--cds-bmrg-header-menu-options-active-background-color);
-$bmrg-header-active-text-color: var(--cds-bmrg-header-active-text-color);
-$bmrg-header-hover-background-color: var(--cds-bmrg-header-hover-background-color);
-$bmrg-header-menu-options-accent-color: var(--cds-bmrg-header-menu-options-accent-color);
-$bmrg-header-menu-options-active-background-color: var(--cds-bmrg-header-menu-options-active-background-color);
-$bmrg-header-menu-options-top-border-color: var(--cds-bmrg-header-menu-options-top-border-color);
+$bmrg-header-active-background: var(--cds-bmrg-header-menu-options-active-background);
+$bmrg-header-active-text: var(--cds-bmrg-header-active-text);
+$bmrg-header-hover-background: var(--cds-bmrg-header-hover-background);
+$bmrg-header-menu-options-accent: var(--cds-bmrg-header-menu-options-accent);
+$bmrg-header-menu-options-active-background: var(--cds-bmrg-header-menu-options-active-background);
+$bmrg-header-menu-options-top-border: var(--cds-bmrg-header-menu-options-top-border);
 $bmrg-header-notification-default: var(--cds-bmrg-header-notification-defaul);
 $bmrg-header-notification-icon: var(--cds-bmrg-header-notification-icon);
 $bmrg-header-modal-overlay: var(--cds-bmrg-header-modal-overlay);
-$bmrg-header-modal-cancel-color: var(--cds-bmrg-header-modal-cancel-color);
-$bmrg-header-modal-confirm-color: theme.$background-brand;
-$bmrg-header-modal-link-color: theme.$background-brand;
-$bmrg-header-nav-color: var(--cds-bmrg-header-nav-color);
-$bmrg-header-modal-background-color: var(--cds-bmrg-header-modal-background-color);
-$bmrg-header-button-text-color: theme.$text-inverse;
-$bmrg-header-attachment-background-color: var(--cds-bmrg-header-attachment-background-color);
-$bmrg-sidenav-active-background-color: var(--cds-bmrg-sidenav-active-background-color);
-$bmrg-active-color: var(--cds-bmrg-active-color, theme.$background-brand);
+$bmrg-header-modal-cancel: var(--cds-bmrg-header-modal-cancel);
+$bmrg-header-modal-confirm: theme.$background-brand;
+$bmrg-header-modal-link: theme.$background-brand;
+$bmrg-header-nav: var(--cds-bmrg-header-nav);
+$bmrg-header-modal-background: var(--cds-bmrg-header-modal-background);
+$bmrg-header-button-text: theme.$text-inverse;
+$bmrg-header-attachment-background: var(--cds-bmrg-header-attachment-background);
+$bmrg-sidenav-active-background: var(--cds-bmrg-sidenav-active-background);
+$bmrg-active: var(--cds-bmrg-active, theme.$background-brand);