Fix undefined class (#1839)

* chore: fix unable to create or reference variables in javascript

* chore: update package version

web-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momentum-ui/web-components",
-  "version": "2.16.0",
+  "version": "2.16.1",
   "author": "Yana Harris",
   "license": "MIT",
   "repository": "https://github.com/momentum-design/momentum-ui.git",
@@ -52,7 +52,7 @@
     "lit-element": "2.3.1",
     "lit-html": "^1.2.1"
   },
-  "dependencies": {
+  "dependencies": {    
     "@interactjs/actions": "1.10.3",
     "@interactjs/auto-start": "1.10.3",
     "@interactjs/core": "1.10.3",
@@ -71,13 +71,13 @@
     "libphonenumber-js": "^1.7.57",
     "lit-virtualizer": "0.4.2",
     "luxon": "^1.25.0",
+    "mobx": "^5.15.4",
     "nanoid": "^3.1.16",
     "papaparse": "^5.4.1",
-    "sortablejs": "^1.15.3",
-    "mobx": "^5.15.4",
-    "@adobe/lit-mobx": "^1.0.1"
+    "sortablejs": "^1.15.3"
   },
   "devDependencies": {
+    "@adobe/lit-mobx": "^1.0.1",
     "@babel/core": "^7.25.7",
     "@babel/preset-env": "^7.25.7",
     "@interactjs/types": "1.10.3",

web-components/publish-conf.js

@@ -7,7 +7,7 @@ const exec = require("child_process").exec;
 const filePkg = fs.readFileSync(path.resolve("./package.json"));
 const p = JSON.parse(filePkg.toString());
 
-module.exports.notify = function() {
+module.exports.notify = function () {
   const email = spawn(`npm config get email`).result.trim();
   const markdown = `**${p.name} - ${p.version}** by ${email} at https://www.npmjs.com/package/@momentum-ui/web-components`;
   const curl = `curl -X POST -H "Content-Type: application/json" -d '{"markdown" : "${markdown}"}' "https://webexapis.com/v1/webhooks/incoming/Y2lzY29zcGFyazovL3VzL1dFQkhPT0svMDc3ZjBlNTMtZjhlNC00NDM2LTk2MzYtNGVmYzk3NmRkNjNj"`;
@@ -23,7 +23,7 @@ function spawn(cmd) {
   };
 }
 
-module.exports.createPackageJson = function() {
+module.exports.createPackageJson = function () {
   const pkg = {
     name: p.name,
     version: p.version,
@@ -33,6 +33,7 @@ module.exports.createPackageJson = function() {
     repository: p.repository,
     main: p.main,
     types: p.types,
+    exports: p.exports,
     dependencies: p.dependencies,
     peerDependencies: p.peerDependencies,
     publishConfig: {

web-components/src/[sandbox]/sandbox.ts

@@ -1,8 +1,7 @@
 import styles from "@/[sandbox]/sandbox.scss";
 import "@/components/sass-stats/SassStats";
 import { ThemeName } from "@/components/theme/Theme";
-import "@/components/theme/ThemeManager";
-import themeManager from "@/components/theme/ThemeManager";
+import { themeManager } from "@/managers/ThemeManager";
 import reset from "@/wc_scss/reset.scss";
 import { MobxLitElement } from "@adobe/lit-mobx";
 import { customElement, html, internalProperty, PropertyValues, TemplateResult } from "lit-element";

web-components/src/components/checkbox/scss/checkbox.scss

@@ -30,7 +30,7 @@
     gap: 0.5rem;
 
     &::before {
-      background: var(--checkbox-bg-color, $lm-checkbox-bg-color-light);
+      background: var(--checkbox-bg-color);
       border: $checkbox__border;
       border-radius: $checkbox__border-radius;
       height: $checkbox__size;
@@ -49,7 +49,7 @@
 }
 
 :host([focus-visible]:not([disabled])) {
-  @include focus-boxshadow(rem-calc(2), var(--md-default-focus-outline-color, $md-blue-70));
+  @include focus-boxshadow(rem-calc(2), var(--md-default-focus-outline-color));
 
 }
 
@@ -91,7 +91,7 @@
 :host([aria-checked="true"]) {
   .checkbox-label {
     &::after {
-      border: solid var(--checkbox-icon-color, $md-white-100);
+      border: solid var(--checkbox-icon-color);
       border-width: 0 0.12em 0.12em 0;
       display: block;
       height: 0.6em;
@@ -109,7 +109,7 @@
 :host([indeterminate]) {
   .checkbox-label {
     &::after {
-      border: solid var(--checkbox-icon-color, $md-white-100);
+      border: solid var(--checkbox-icon-color);
       border-width: 0 0 0.12em;
       display: block;
       height: 0.2em;
@@ -128,8 +128,8 @@
 :host([indeterminate]:hover:not([disabled])) {
   .checkbox-label {
     &::before {
-      background: var(--checkbox-selected-hover-bg-color, $lm-checkbox-selected-hover-bg-color-light);
-      border-color: var(--checkbox-selected-hover-border-color, $lm-checkbox-selected-hover-border-color-light);
+      background: var(--checkbox-selected-hover-bg-color);
+      border-color: var(--checkbox-selected-hover-border-color);
     }
   }
 }
@@ -138,8 +138,8 @@
 :host([indeterminate]:active:not([disabled])) {
   .checkbox-label {
     &::before {
-      background: var(--checkbox-selected-pressed-bg-color, $lm-checkbox-selected-pressed-bg-color-light);
-      border-color: var(--checkbox-selected-pressed-border-color, $lm-checkbox-selected-pressed-border-color-light);
+      background: var(--checkbox-selected-pressed-bg-color);
+      border-color: var(--checkbox-selected-pressed-border-color);
     }
   }
 }

web-components/src/components/checkbox/scss/module.scss

@@ -1,12 +1,8 @@
 @import "@/wc_scss/tools/functions/core";
 
-@import "@/wc_scss/colors/settings";
 @import "@/wc_scss/settings/core";
 @import "@/wc_scss/tools/mixins/focus";
 
-
-@import "./vars/lm-checkbox-settings";
-
 @import "./settings";
 @import "./mixins";
 @import "./checkbox";

web-components/src/components/checkbox/scss/settings.scss

@@ -1,11 +1,11 @@
 
-$checkbox__border: rem-calc(1) solid var(--checkbox-border-color, $lm-checkbox-border-color-light);
-$checkbox__hover-border: rem-calc(1) solid var(--checkbox-hover-border-color, $lm-checkbox-hover-border-color-light);
-$checkbox__pressed-border: rem-calc(1) solid var(--checkbox-pressed-border-color, $lm-checkbox-pressed-border-color-light);
-$checkbox__selected-border: rem-calc(1) solid var(--checkbox-selected-border-color, $lm-checkbox-selected-border-color-light);
-$checkbox__hover-bg: var(--checkbox-hover-bg-color, $lm-checkbox-hover-bg-color-light);
-$checkbox__pressed-bg: var(--checkbox-pressed-bg-color, $lm-checkbox-pressed-bg-color-light);
-$checkbox__selected-bg: var(--checkbox-selected-bg-color, $lm-checkbox-selected-bg-color-light);
+$checkbox__border: rem-calc(1) solid var(--checkbox-border-color);
+$checkbox__hover-border: rem-calc(1) solid var(--checkbox-hover-border-color);
+$checkbox__pressed-border: rem-calc(1) solid var(--checkbox-pressed-border-color);
+$checkbox__selected-border: rem-calc(1) solid var(--checkbox-selected-border-color);
+$checkbox__hover-bg: var(--checkbox-hover-bg-color);
+$checkbox__pressed-bg: var(--checkbox-pressed-bg-color);
+$checkbox__selected-bg: var(--checkbox-selected-bg-color);
 $checkbox__horizontal-max-width: rem-calc(400);
 $checkbox__main-indent: rem-calc(4);
 $checkbox__size: rem-calc(20);

web-components/src/components/radio/scss/module.scss

@@ -1,15 +1,12 @@
 @import "@/wc_scss/path.scss";
 @import "@/wc_scss/tools/functions/core";
 
-@import "@/wc_scss/colors/settings";
 @import "@/wc_scss/settings/core";
 @import "@/wc_scss/typography/settings";
 
 @import "@/wc_scss/tools/mixins/border-radius";
 @import "@/wc_scss/tools/mixins/focus";
 
-@import "./vars/lm-radio-settings";
-
 @import "./settings";
 @import "./mixins";
 @import "./radio";

web-components/src/components/radio/scss/radio.scss

@@ -14,7 +14,7 @@
     }
 
     &-label {
-      color: var(--md-primary-text-color, $md-gray-100);
+      color: var(--md-primary-text-color);
       cursor: pointer;
       font-size: $font-size-base;
       line-height: $radio-input-max-height;
@@ -48,7 +48,7 @@
 }
 
 :host([focus-visible]:not([disabled])) {
-  @include focus-boxshadow(rem-calc(2), var(--md-default-focus-outline-color, $md-blue-70));
+  @include focus-boxshadow(rem-calc(2), var(--md-default-focus-outline-color  ));
 }
 
 :host(:hover:not([disabled])) {
@@ -79,27 +79,27 @@
 
 :host([aria-checked="true"]) {
   .md-radio-label:before {
-    border-color: var(--radio-input-selected-border-color, $lm-radio-input-selected-border-color-light);
+    border-color: var(--radio-input-selected-border-color);
     box-shadow: inset 0 0 0 $radio-input-selected-size $radio-input-selected-bg,
-      inset 0 0 0 $radio-input-size var(--radio-input-icon-color, $md-white-100);
+      inset 0 0 0 $radio-input-size var(--radio-input-icon-color);
   }
 }
 
 :host([aria-checked="true"]:hover:not([disabled])) {
   .md-radio-label:before {
-    border-color: var(--radio-input-selected-hover-border-color, $lm-radio-input-selected-hover-border-color-light);
+    border-color: var(--radio-input-selected-hover-border-color);
     box-shadow: inset 0 0 0 $radio-input-selected-size
-        var(--radio-input-selected-hover-bg-color, $lm-radio-input-selected-hover-bg-color-light),
-      inset 0 0 0 $radio-input-size var(--radio-input-icon-color, $md-white-100);
+        var(--radio-input-selected-hover-bg-color),
+      inset 0 0 0 $radio-input-size var(--radio-input-icon-color);
   }
 }
 
 :host([aria-checked="true"]:active:not([disabled])) {
   .md-radio-label:before {
-    border-color: var(--radio-input-selected-pressed-border-color, $lm-radio-input-selected-pressed-border-color-light);
+    border-color: var(--radio-input-selected-pressed-border-color);
     box-shadow: inset 0 0 0 $radio-input-selected-size
-        var(--radio-input-selected-pressed-bg-color, $lm-radio-input-selected-pressed-bg-color-light),
-      inset 0 0 0 $radio-input-size var(--radio-input-icon-color, $md-white-100);
+        var(--radio-input-selected-pressed-bg-color),
+      inset 0 0 0 $radio-input-size var(--radio-input-icon-color);
   }
 }
 

web-components/src/components/radio/scss/settings.scss

@@ -1,14 +1,14 @@
 :host {
-  --radio-label-text-color: var(--radio-input-text-color, $lm-radio-input-text-color-light);
+  --radio-label-text-color: var(--radio-input-text-color);
 }
 
-$radio-input-bg: var(--radio-input-bg-color, $lm-radio-input-bg-color-light);
-$radio-input-border: rem-calc(1) solid var(--radio-input-border-color, $lm-radio-input-border-color-light);
-$radio-input-hover-border: rem-calc(1) solid var(--radio-input-hover-border-color, $lm-radio-input-hover-border-color-light);
-$radio-input-pressed-border: rem-calc(1) solid var(--radio-input-pressed-border-color, $lm-radio-input-pressed-border-color-light);
-$radio-input-hover-bg: var(--radio-input-hover-bg-color, $lm-radio-input-border-color-light);
-$radio-input-pressed-bg: var(--radio-input-pressed-bg-color, $lm-radio-input-pressed-bg-color-light);
-$radio-input-selected-bg: var(--radio-input-selected-bg-color, $lm-radio-input-selected-bg-color-light);
+$radio-input-bg: var(--radio-input-bg-color);
+$radio-input-border: rem-calc(1) solid var(--radio-input-border-color);
+$radio-input-hover-border: rem-calc(1) solid var(--radio-input-hover-border-color);
+$radio-input-pressed-border: rem-calc(1) solid var(--radio-input-pressed-border-color);
+$radio-input-hover-bg: var(--radio-input-hover-bg-color);
+$radio-input-pressed-bg: var(--radio-input-pressed-bg-color);
+$radio-input-selected-bg: var(--radio-input-selected-bg-color);
 $radio-main-indent: rem-calc(4);
 $radio-input-size: rem-calc(20);
 $radio-input-left-padding: rem-calc(30);

web-components/src/index.ts

@@ -74,9 +74,9 @@ export { TabPanel } from "./components/tabs/TabPanel";
 export { Tabs } from "./components/tabs/Tabs";
 export { TaskItem } from "./components/taskitem/TaskItem";
 export { Theme, ThemeName } from "./components/theme/Theme";
-export { ThemeManager, default as themeManager } from "./components/theme/ThemeManager";
 export { TimePicker } from "./components/timepicker/TimePicker";
 export { ToggleSwitch } from "./components/toggle-switch/ToggleSwitch";
 export { Tooltip } from "./components/tooltip/Tooltip";
+export { ThemeManager, themeManager } from "./managers/ThemeManager";
 
 // eslint-disable-next-line prettier/prettier