@momentum-design/components 0.28.1 → 0.28.2

package/dist/components/themeprovider/themeprovider.component.d.ts

@@ -24,6 +24,14 @@ import ThemeProviderContext from './themeprovider.context';
  * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`
  * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,
  * default: `-0.25px` (this is to match the old CiscoSans)
+ * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,
+ * default: `normal`
+ * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.
+ * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.
+ * @cssproperty --mdc-themeprovider-scrollbar-thumb-hover-color - Option to override the color of the
+ * scrollbar thumb on hover. Applicable only on webkit browsers.
+ * @cssproperty --mdc-themeprovider-scrollbar-thumb-active-color - Option to override the color of the
+ * scrollbar thumb on press. Applicable only on webkit browsers.
  */
 declare class ThemeProvider extends Provider<ThemeProviderContext> {
     constructor();

package/dist/components/themeprovider/themeprovider.component.js

@@ -35,6 +35,14 @@ import styles from './themeprovider.styles';
  * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`
  * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,
  * default: `-0.25px` (this is to match the old CiscoSans)
+ * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,
+ * default: `normal`
+ * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.
+ * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.
+ * @cssproperty --mdc-themeprovider-scrollbar-thumb-hover-color - Option to override the color of the
+ * scrollbar thumb on hover. Applicable only on webkit browsers.
+ * @cssproperty --mdc-themeprovider-scrollbar-thumb-active-color - Option to override the color of the
+ * scrollbar thumb on press. Applicable only on webkit browsers.
  */
 class ThemeProvider extends Provider {
     constructor() {

package/dist/components/themeprovider/themeprovider.styles.js

@@ -9,6 +9,12 @@ const styles = css `
     /* Adjusting font feature settings for accessibility reasons */
     --mdc-themeprovider-font-feature-settings: "ss02" on;
 
+    /* Custom scrollbar variables */
+    --mdc-themeprovider-scrollbar-track-color: var(--mds-color-theme-background-secondary-normal);
+    --mdc-themeprovider-scrollbar-thumb-color: var(--mds-color-theme-scrollbar-button-normal);
+    --mdc-themeprovider-scrollbar-thumb-hover-color: var(--mds-color-theme-scrollbar-button-hover);
+    --mdc-themeprovider-scrollbar-thumb-active-color: var(--mds-color-theme-scrollbar-button-pressed);
+    
     color: var(--mdc-themeprovider-color-default);
     font-family: var(--mdc-themeprovider-font-family);
     font-weight: var(--mdc-themeprovider-font-weight);
@@ -16,5 +22,11 @@ const styles = css `
 
     font-feature-settings: var(--mdc-themeprovider-font-feature-settings);
   }
+   
+/** Scrollbar Theme for Chrome, Edge, and Firefox. This has limited support on other browsers.
+    https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color for more details */
+  * {
+    scrollbar-color: var(--mdc-themeprovider-scrollbar-thumb-color) var(--mdc-themeprovider-scrollbar-track-color);
+  }
 `;
 export default [styles];

package/dist/custom-elements.json

@@ -8685,6 +8685,26 @@
             {
               "description": "Option to override the default letter-spacing, default: `-0.25px` (this is to match the old CiscoSans)",
               "name": "--mdc-themeprovider-letter-spacing-adjustment"
+            },
+            {
+              "description": "Option to override the font feature settings, default: `normal`",
+              "name": "--mdc-themeprovider-font-feature-settings"
+            },
+            {
+              "description": "Option to override the color of the scrollbar track.",
+              "name": "--mdc-themeprovider-scrollbar-track-color"
+            },
+            {
+              "description": "Option to override the color of the scrollbar thumb.",
+              "name": "--mdc-themeprovider-scrollbar-thumb-color"
+            },
+            {
+              "description": "Option to override the color of the scrollbar thumb on hover. Applicable only on webkit browsers.",
+              "name": "--mdc-themeprovider-scrollbar-thumb-hover-color"
+            },
+            {
+              "description": "Option to override the color of the scrollbar thumb on press. Applicable only on webkit browsers.",
+              "name": "--mdc-themeprovider-scrollbar-thumb-active-color"
             }
           ],
           "slots": [
@@ -8744,7 +8764,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-themeprovider",
-          "jsDoc": "/**\n * ThemeProvider component, which sets the passed in themeclass as class.\n * If the themeclass switches, the existing themeclass will be removed as a class\n * and the new themeclass will be added.\n *\n * CSS variables defined in the themeclass will be used for the styling of child dom nodes.\n *\n * Themeclass context can be be consumed from Lit child components\n * (see providerUtils.consume for how to consume)\n *\n * ThemeProvider also includes basic font defaults for text.\n *\n * @tagname mdc-themeprovider\n *\n * @slot - children\n *\n * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,\n * default: color-theme-text-primary-normal\n * @cssproperty --mdc-themeprovider-font-family - Option to override the font family,\n * default: `Momentum` (from momentum-design/fonts)\n * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`\n * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,\n * default: `-0.25px` (this is to match the old CiscoSans)\n */",
+          "jsDoc": "/**\n * ThemeProvider component, which sets the passed in themeclass as class.\n * If the themeclass switches, the existing themeclass will be removed as a class\n * and the new themeclass will be added.\n *\n * CSS variables defined in the themeclass will be used for the styling of child dom nodes.\n *\n * Themeclass context can be be consumed from Lit child components\n * (see providerUtils.consume for how to consume)\n *\n * ThemeProvider also includes basic font defaults for text.\n *\n * @tagname mdc-themeprovider\n *\n * @slot - children\n *\n * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,\n * default: color-theme-text-primary-normal\n * @cssproperty --mdc-themeprovider-font-family - Option to override the font family,\n * default: `Momentum` (from momentum-design/fonts)\n * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`\n * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,\n * default: `-0.25px` (this is to match the old CiscoSans)\n * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,\n * default: `normal`\n * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-hover-color - Option to override the color of the\n * scrollbar thumb on hover. Applicable only on webkit browsers.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-active-color - Option to override the color of the\n * scrollbar thumb on press. Applicable only on webkit browsers.\n */",
           "customElement": true
         }
       ],

package/dist/react/themeprovider/index.d.ts

@@ -22,6 +22,14 @@ import Component from '../../components/themeprovider';
  * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`
  * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,
  * default: `-0.25px` (this is to match the old CiscoSans)
+ * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,
+ * default: `normal`
+ * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.
+ * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.
+ * @cssproperty --mdc-themeprovider-scrollbar-thumb-hover-color - Option to override the color of the
+ * scrollbar thumb on hover. Applicable only on webkit browsers.
+ * @cssproperty --mdc-themeprovider-scrollbar-thumb-active-color - Option to override the color of the
+ * scrollbar thumb on press. Applicable only on webkit browsers.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/themeprovider/index.js

@@ -25,6 +25,14 @@ import { TAG_NAME } from '../../components/themeprovider/themeprovider.constants
  * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`
  * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,
  * default: `-0.25px` (this is to match the old CiscoSans)
+ * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,
+ * default: `normal`
+ * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.
+ * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.
+ * @cssproperty --mdc-themeprovider-scrollbar-thumb-hover-color - Option to override the color of the
+ * scrollbar thumb on hover. Applicable only on webkit browsers.
+ * @cssproperty --mdc-themeprovider-scrollbar-thumb-active-color - Option to override the color of the
+ * scrollbar thumb on press. Applicable only on webkit browsers.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/package.json

@@ -38,5 +38,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.28.1"
+  "version": "0.28.2"
 }