@ni/nimble-components 1.0.0-beta.97 → 1.1.0

package/dist/esm/utilities/style/theme.js

@@ -0,0 +1,116 @@
+/* eslint-disable max-classes-per-file */
+import { ElementStyles } from '@microsoft/fast-element';
+import { theme as themeToken } from '../../theme-provider';
+/**
+ * Subscription for {@link ThemeStyleSheetBehavior}
+ */
+class ThemeStyleSheetBehaviorSubscription {
+    constructor(themeStyles, source) {
+        this.themeStyles = themeStyles;
+        this.source = source;
+        this.attached = null;
+    }
+    handleChange({ target, token }) {
+        this.attach(token.getValueFor(target));
+    }
+    attach(theme) {
+        if (this.attached !== this.themeStyles[theme]) {
+            if (this.attached !== null) {
+                this.source.$fastController.removeStyles(this.attached);
+            }
+            this.attached = this.themeStyles[theme];
+            if (this.attached !== null) {
+                this.source.$fastController.addStyles(this.attached);
+            }
+        }
+    }
+}
+/**
+ * Behavior to conditionally apply theme-based stylesheets.
+ */
+class ThemeStyleSheetBehavior {
+    constructor(lightStyle, darkStyleOrAlias, colorStyleOrAlias, legacyBlueStyleOrAlias) {
+        this.cache = new WeakMap();
+        const light = lightStyle;
+        const dark = ThemeStyleSheetBehavior.resolveTheme(darkStyleOrAlias, {
+            light,
+            dark: null,
+            color: null,
+            'legacy-blue': null
+        });
+        const color = ThemeStyleSheetBehavior.resolveTheme(colorStyleOrAlias, {
+            light,
+            dark,
+            color: null,
+            'legacy-blue': null
+        });
+        const legacyBlue = ThemeStyleSheetBehavior.resolveTheme(legacyBlueStyleOrAlias, {
+            light,
+            dark,
+            color,
+            'legacy-blue': null
+        });
+        this.themeStyles = {
+            light,
+            dark,
+            color,
+            'legacy-blue': legacyBlue
+        };
+    }
+    static resolveTheme(value, currentThemeStyles) {
+        if (value instanceof ElementStyles || value === null) {
+            return value;
+        }
+        const currentStyle = currentThemeStyles[value];
+        if (currentStyle === null) {
+            throw new Error(`Tried to alias to theme '${value}' but the theme value is not set to a style.`);
+        }
+        return currentStyle;
+    }
+    /**
+     * @internal
+     */
+    bind(source) {
+        const subscriber = this.cache.get(source)
+            || new ThemeStyleSheetBehaviorSubscription(this.themeStyles, source);
+        const value = themeToken.getValueFor(source);
+        // Currently subscriber from cache may have gone through unbind
+        // but still be in cache so always resubscribe
+        // See: https://github.com/microsoft/fast/issues/3246#issuecomment-1030424876
+        themeToken.subscribe(subscriber);
+        subscriber.attach(value);
+        this.cache.set(source, subscriber);
+    }
+    /**
+     * @internal
+     */
+    unbind(source) {
+        const subscriber = this.cache.get(source);
+        if (subscriber) {
+            themeToken.unsubscribe(subscriber);
+        }
+        // Currently does not evict subscriber from cache
+        // See: https://github.com/microsoft/fast/issues/3246#issuecomment-1030424876
+    }
+}
+/**
+ * Behavior to conditionally apply theme-based stylesheets. To determine which to apply,
+ * the behavior will use the nearest ThemeProvider's 'theme' design system value.
+ * To re-use the same style for multiple themes you can specify the name of an already
+ * defined theme to alias them together.
+ *
+ * @public
+ * @example
+ * ```ts
+ * css`
+ *  // ...
+ * `.withBehaviors(new ThemeStyleSheetBehavior(
+ *   css`:host { ... Theme.Light style... }`),
+ *   css`:host { ... Theme.Dark style... }`),
+ *   null, // No style needed for Theme.Color style
+ *   Theme.Light, // For the Theme.LegacyBlue style, re-use the previously set Theme.Light style
+ * )
+ * ```
+ */
+export const themeBehavior = (lightStyle, darkStyleOrAlias, colorStyleOrAlias, legacyBlueStyleOrAlias) => new ThemeStyleSheetBehavior(lightStyle, darkStyleOrAlias, colorStyleOrAlias, legacyBlueStyleOrAlias);
+//# sourceMappingURL=theme.js.map

package/dist/esm/utilities/style/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../../src/utilities/style/theme.ts"],"names":[],"mappings":"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"}

package/dist/fonts.scss

@@ -0,0 +1,3 @@
+// Nimble Components Fonts SCSS
+
+@import '~@ni/nimble-tokens/source/fonts';

package/dist/tokens-internal.scss

@@ -0,0 +1,255 @@
+// Nimble Components Internal Tokens SCSS
+// Used by Nimble Components Tokens SCSS
+// For more information see https://github.com/ni/nimble/tree/main/packages/nimble-components#theming
+
+/// Internal property for $ni-nimble-action-color-rgb-partial.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-action-color-rgb-partial}: <new value>;`.
+$ni-nimble-internal-action-color-rgb-partial: --ni-nimble-action-color-rgb-partial;
+
+/// Internal property for $ni-nimble-application-background-color.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-application-background-color}: <new value>;`.
+$ni-nimble-internal-application-background-color: --ni-nimble-application-background-color;
+
+/// Internal property for $ni-nimble-fill-color-selected.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-fill-color-selected}: <new value>;`.
+$ni-nimble-internal-fill-color-selected: --ni-nimble-fill-color-selected;
+
+/// Internal property for $ni-nimble-fill-color-selected-rgb-partial.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-fill-color-selected-rgb-partial}: <new value>;`.
+$ni-nimble-internal-fill-color-selected-rgb-partial: --ni-nimble-fill-color-selected-rgb-partial;
+
+/// Internal property for $ni-nimble-fill-color-selected-hover.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-fill-color-selected-hover}: <new value>;`.
+$ni-nimble-internal-fill-color-selected-hover: --ni-nimble-fill-color-selected-hover;
+
+/// Internal property for $ni-nimble-fill-color-hover.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-fill-color-hover}: <new value>;`.
+$ni-nimble-internal-fill-color-hover: --ni-nimble-fill-color-hover;
+
+/// Internal property for $ni-nimble-border-color.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-border-color}: <new value>;`.
+$ni-nimble-internal-border-color: --ni-nimble-border-color;
+
+/// Internal property for $ni-nimble-border-color-rgb-partial.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-border-color-rgb-partial}: <new value>;`.
+$ni-nimble-internal-border-color-rgb-partial: --ni-nimble-border-color-rgb-partial;
+
+/// Internal property for $ni-nimble-fail-color.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-fail-color}: <new value>;`.
+$ni-nimble-internal-fail-color: --ni-nimble-fail-color;
+
+/// Internal property for $ni-nimble-warning-color.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-warning-color}: <new value>;`.
+$ni-nimble-internal-warning-color: --ni-nimble-warning-color;
+
+/// Internal property for $ni-nimble-pass-color.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-pass-color}: <new value>;`.
+$ni-nimble-internal-pass-color: --ni-nimble-pass-color;
+
+/// Internal property for $ni-nimble-border-color-hover.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-border-color-hover}: <new value>;`.
+$ni-nimble-internal-border-color-hover: --ni-nimble-border-color-hover;
+
+/// Internal property for $ni-nimble-icon-color.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-icon-color}: <new value>;`.
+$ni-nimble-internal-icon-color: --ni-nimble-icon-color;
+
+/// Internal property for $ni-nimble-popup-box-shadow-color.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-popup-box-shadow-color}: <new value>;`.
+$ni-nimble-internal-popup-box-shadow-color: --ni-nimble-popup-box-shadow-color;
+
+/// Internal property for $ni-nimble-popup-border-color.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-popup-border-color}: <new value>;`.
+$ni-nimble-internal-popup-border-color: --ni-nimble-popup-border-color;
+
+/// Internal property for $ni-nimble-control-height.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-control-height}: <new value>;`.
+$ni-nimble-internal-control-height: --ni-nimble-control-height;
+
+/// Internal property for $ni-nimble-standard-padding.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-standard-padding}: <new value>;`.
+$ni-nimble-internal-standard-padding: --ni-nimble-standard-padding;
+
+/// Internal property for $ni-nimble-label-height.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-label-height}: <new value>;`.
+$ni-nimble-internal-label-height: --ni-nimble-label-height;
+
+/// Internal property for $ni-nimble-border-width.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-border-width}: <new value>;`.
+$ni-nimble-internal-border-width: --ni-nimble-border-width;
+
+/// Internal property for $ni-nimble-icon-size.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-icon-size}: <new value>;`.
+$ni-nimble-internal-icon-size: --ni-nimble-icon-size;
+
+/// Internal property for $ni-nimble-drawer-width.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-drawer-width}: <new value>;`.
+$ni-nimble-internal-drawer-width: --ni-nimble-drawer-width;
+
+/// Internal property for $ni-nimble-font-family.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-font-family}: <new value>;`.
+$ni-nimble-internal-font-family: --ni-nimble-font-family;
+
+/// Internal property for $ni-nimble-label-font-family.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-label-font-family}: <new value>;`.
+$ni-nimble-internal-label-font-family: --ni-nimble-label-font-family;
+
+/// Internal property for $ni-nimble-group-label-font-family.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-group-label-font-family}: <new value>;`.
+$ni-nimble-internal-group-label-font-family: --ni-nimble-group-label-font-family;
+
+/// Internal property for $ni-nimble-drawer-header-font-family.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-drawer-header-font-family}: <new value>;`.
+$ni-nimble-internal-drawer-header-font-family: --ni-nimble-drawer-header-font-family;
+
+/// Internal property for $ni-nimble-label-font-size.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-label-font-size}: <new value>;`.
+$ni-nimble-internal-label-font-size: --ni-nimble-label-font-size;
+
+/// Internal property for $ni-nimble-content-font-size.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-content-font-size}: <new value>;`.
+$ni-nimble-internal-content-font-size: --ni-nimble-content-font-size;
+
+/// Internal property for $ni-nimble-group-label-font-size.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-group-label-font-size}: <new value>;`.
+$ni-nimble-internal-group-label-font-size: --ni-nimble-group-label-font-size;
+
+/// Internal property for $ni-nimble-drawer-header-font-size.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-drawer-header-font-size}: <new value>;`.
+$ni-nimble-internal-drawer-header-font-size: --ni-nimble-drawer-header-font-size;
+
+/// Internal property for $ni-nimble-group-label-font-weight.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-group-label-font-weight}: <new value>;`.
+$ni-nimble-internal-group-label-font-weight: --ni-nimble-group-label-font-weight;
+
+/// Internal property for $ni-nimble-label-font-weight.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-label-font-weight}: <new value>;`.
+$ni-nimble-internal-label-font-weight: --ni-nimble-label-font-weight;
+
+/// Internal property for $ni-nimble-label-font-color.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-label-font-color}: <new value>;`.
+$ni-nimble-internal-label-font-color: --ni-nimble-label-font-color;
+
+/// Internal property for $ni-nimble-group-label-font-color.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-group-label-font-color}: <new value>;`.
+$ni-nimble-internal-group-label-font-color: --ni-nimble-group-label-font-color;
+
+/// Internal property for $ni-nimble-content-font-color.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-content-font-color}: <new value>;`.
+$ni-nimble-internal-content-font-color: --ni-nimble-content-font-color;
+
+/// Internal property for $ni-nimble-button-content-font-color.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-button-content-font-color}: <new value>;`.
+$ni-nimble-internal-button-content-font-color: --ni-nimble-button-content-font-color;
+
+/// Internal property for $ni-nimble-label-font-color-disabled.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-label-font-color-disabled}: <new value>;`.
+$ni-nimble-internal-label-font-color-disabled: --ni-nimble-label-font-color-disabled;
+
+/// Internal property for $ni-nimble-label-text-transform.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-label-text-transform}: <new value>;`.
+$ni-nimble-internal-label-text-transform: --ni-nimble-label-text-transform;
+
+/// Internal property for $ni-nimble-group-label-text-transform.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-group-label-text-transform}: <new value>;`.
+$ni-nimble-internal-group-label-text-transform: --ni-nimble-group-label-text-transform;
+
+/// Internal property for $ni-nimble-content-font-color-disabled.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-content-font-color-disabled}: <new value>;`.
+$ni-nimble-internal-content-font-color-disabled: --ni-nimble-content-font-color-disabled;
+
+/// Internal property for $ni-nimble-small-delay.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-small-delay}: <new value>;`.
+$ni-nimble-internal-small-delay: --ni-nimble-small-delay;
+
+/// Internal property for $ni-nimble-medium-delay.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-medium-delay}: <new value>;`.
+$ni-nimble-internal-medium-delay: --ni-nimble-medium-delay;
+
+/// Internal property for $ni-nimble-drawer-animation-duration-ms.
+/// Not intended for general use. If used, inform Nimble squad of use-case.
+/// Used to override a token value (generally making it no longer theme-aware).
+/// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-drawer-animation-duration-ms}: <new value>;`.
+$ni-nimble-internal-drawer-animation-duration-ms: --ni-nimble-drawer-animation-duration-ms;

package/dist/tokens.scss

@@ -0,0 +1,132 @@
+// Nimble Components Tokens SCSS
+// Used to integrate theme-aware design tokens in an application.
+// Requires using a <nimble-theme-provider> in the page.
+// For more information see https://github.com/ni/nimble/tree/main/packages/nimble-components#theming
+
+@import './tokens-internal';
+
+
+$ni-nimble-action-color-rgb-partial: var($ni-nimble-internal-action-color-rgb-partial);
+
+/// Background color for the application.
+$ni-nimble-application-background-color: var($ni-nimble-internal-application-background-color);
+
+
+$ni-nimble-fill-color-selected: var($ni-nimble-internal-fill-color-selected);
+
+
+$ni-nimble-fill-color-selected-rgb-partial: var($ni-nimble-internal-fill-color-selected-rgb-partial);
+
+
+$ni-nimble-fill-color-selected-hover: var($ni-nimble-internal-fill-color-selected-hover);
+
+
+$ni-nimble-fill-color-hover: var($ni-nimble-internal-fill-color-hover);
+
+
+$ni-nimble-border-color: var($ni-nimble-internal-border-color);
+
+
+$ni-nimble-border-color-rgb-partial: var($ni-nimble-internal-border-color-rgb-partial);
+
+
+$ni-nimble-fail-color: var($ni-nimble-internal-fail-color);
+
+
+$ni-nimble-warning-color: var($ni-nimble-internal-warning-color);
+
+
+$ni-nimble-pass-color: var($ni-nimble-internal-pass-color);
+
+
+$ni-nimble-border-color-hover: var($ni-nimble-internal-border-color-hover);
+
+
+$ni-nimble-icon-color: var($ni-nimble-internal-icon-color);
+
+
+$ni-nimble-popup-box-shadow-color: var($ni-nimble-internal-popup-box-shadow-color);
+
+
+$ni-nimble-popup-border-color: var($ni-nimble-internal-popup-border-color);
+
+
+$ni-nimble-control-height: var($ni-nimble-internal-control-height);
+
+
+$ni-nimble-standard-padding: var($ni-nimble-internal-standard-padding);
+
+
+$ni-nimble-label-height: var($ni-nimble-internal-label-height);
+
+
+$ni-nimble-border-width: var($ni-nimble-internal-border-width);
+
+
+$ni-nimble-icon-size: var($ni-nimble-internal-icon-size);
+
+
+$ni-nimble-drawer-width: var($ni-nimble-internal-drawer-width);
+
+
+$ni-nimble-font-family: var($ni-nimble-internal-font-family);
+
+
+$ni-nimble-label-font-family: var($ni-nimble-internal-label-font-family);
+
+
+$ni-nimble-group-label-font-family: var($ni-nimble-internal-group-label-font-family);
+
+
+$ni-nimble-drawer-header-font-family: var($ni-nimble-internal-drawer-header-font-family);
+
+
+$ni-nimble-label-font-size: var($ni-nimble-internal-label-font-size);
+
+
+$ni-nimble-content-font-size: var($ni-nimble-internal-content-font-size);
+
+
+$ni-nimble-group-label-font-size: var($ni-nimble-internal-group-label-font-size);
+
+
+$ni-nimble-drawer-header-font-size: var($ni-nimble-internal-drawer-header-font-size);
+
+
+$ni-nimble-group-label-font-weight: var($ni-nimble-internal-group-label-font-weight);
+
+
+$ni-nimble-label-font-weight: var($ni-nimble-internal-label-font-weight);
+
+
+$ni-nimble-label-font-color: var($ni-nimble-internal-label-font-color);
+
+
+$ni-nimble-group-label-font-color: var($ni-nimble-internal-group-label-font-color);
+
+
+$ni-nimble-content-font-color: var($ni-nimble-internal-content-font-color);
+
+
+$ni-nimble-button-content-font-color: var($ni-nimble-internal-button-content-font-color);
+
+
+$ni-nimble-label-font-color-disabled: var($ni-nimble-internal-label-font-color-disabled);
+
+
+$ni-nimble-label-text-transform: var($ni-nimble-internal-label-text-transform);
+
+
+$ni-nimble-group-label-text-transform: var($ni-nimble-internal-group-label-text-transform);
+
+
+$ni-nimble-content-font-color-disabled: var($ni-nimble-internal-content-font-color-disabled);
+
+
+$ni-nimble-small-delay: var($ni-nimble-internal-small-delay);
+
+
+$ni-nimble-medium-delay: var($ni-nimble-internal-medium-delay);
+
+
+$ni-nimble-drawer-animation-duration-ms: var($ni-nimble-internal-drawer-animation-duration-ms);

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@ni/nimble-components",
-  "version": "1.0.0-beta.97",
+  "version": "1.1.0",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
-    "build": "npm run build-components && npm run build-storybook",
+    "build": "npm run build-components && npm run generate-scss && npm run build-storybook",
     "lint": "npm run eslint && npm run prettier",
     "format": "npm run eslint-fix && npm run prettier-fix",
     "eslint": "eslint .",
@@ -11,10 +11,14 @@
     "prettier": "prettier-eslint \"**/*.*\" --list-different --prettier-ignore",
     "prettier-fix": "prettier-eslint \"**/*.*\" --write --prettier-ignore",
     "pack": "npm pack",
+    "invoke-publish": "npm publish",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook -o dist/storybook",
     "build-components": "tsc -p ./tsconfig.json",
     "build-components:watch": "tsc -p ./tsconfig.json -w",
+    "generate-scss": "npm run generate-scss:bundle && npm run generate-scss:run",
+    "generate-scss:bundle": "rollup build/generate-scss/source/index.js --format cjs --file build/generate-scss/dist/index.js",
+    "generate-scss:run": "node build/generate-scss/dist/index.js",
     "chromatic": "chromatic",
     "tdd": "npm run build-components && npm run test-chrome",
     "tdd:watch": "npm run build-components:watch & npm run test-chrome:watch",
@@ -39,28 +43,31 @@
   "homepage": "https://github.com/ni/nimble#readme",
   "dependencies": {
     "@microsoft/fast-animation": "^4.1.5",
-    "@microsoft/fast-components": "^2.0.0",
     "@microsoft/fast-element": "^1.6.1",
     "@microsoft/fast-foundation": "^2.22.0",
-    "@ni/nimble-tokens": "^1.0.0-beta.27",
-    "hex-rgb": "^5.0.0",
-    "lodash-es": "^4.17.21"
+    "@microsoft/fast-web-utilities": "^5.0.2",
+    "@ni/nimble-tokens": "^1.0.0",
+    "hex-rgb": "^5.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.13.16",
     "@babel/core": "^7.14.6",
     "@babel/preset-env": "^7.13.15",
-    "@ni/eslint-config-typescript": "^3.0.0",
-    "@storybook/addon-a11y": "^6.4.0-alpha.28",
-    "@storybook/addon-actions": "^6.4.0-alpha.28",
-    "@storybook/addon-docs": "^6.4.0-alpha.28",
-    "@storybook/addon-essentials": "^6.4.0-alpha.28",
-    "@storybook/addon-links": "^6.4.0-alpha.28",
-    "@storybook/addons": "^6.4.0-alpha.28",
-    "@storybook/builder-webpack5": "^6.4.0-alpha.28",
-    "@storybook/html": "^6.4.0-alpha.28",
-    "@storybook/manager-webpack5": "^6.4.0-alpha.28",
-    "@storybook/theming": "^6.4.0-alpha.28",
+    "@ni/eslint-config-javascript": "^3.1.0",
+    "@ni/eslint-config-typescript": "^3.0.5",
+    "@storybook/addon-a11y": "^6.4.0",
+    "@storybook/addon-actions": "^6.4.0",
+    "@storybook/addon-docs": "^6.4.0",
+    "@storybook/addon-essentials": "^6.4.0",
+    "@storybook/addon-interactions": "^6.4.0",
+    "@storybook/addon-links": "^6.4.0",
+    "@storybook/addons": "^6.4.0",
+    "@storybook/builder-webpack5": "^6.4.0",
+    "@storybook/html": "^6.4.0",
+    "@storybook/jest": "^0.0.5",
+    "@storybook/manager-webpack5": "^6.4.0",
+    "@storybook/testing-library": "^0.0.7",
+    "@storybook/theming": "^6.4.0",
     "@types/jasmine": "^3.6.0",
     "@types/webpack-env": "^1.15.2",
     "babel-loader": "^8.2.2",
@@ -69,6 +76,7 @@
     "css-loader": "^6.2.0",
     "dotenv-webpack": "^7.0.2",
     "eslint-plugin-jsdoc": "^36.1.0",
+    "eslint-plugin-storybook": "^0.5.1",
     "html-webpack-plugin": "^5.3.1",
     "jasmine-core": "^3.7.0",
     "karma": "^6.3.0",
@@ -84,6 +92,7 @@
     "prettier-eslint": "^13.0.0",
     "prettier-eslint-cli": "^5.0.1",
     "puppeteer": "^10.1.0",
+    "rollup": "^2.61.1",
     "storybook-addon-xd-designs": "file:storybook-addon-xd-designs-6.0.0.tgz",
     "ts-loader": "^9.2.5",
     "typescript": "^4.3.2",

package/dist/esm/button/behaviors.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"behaviors.js","sourceRoot":"","sources":["../../../src/button/behaviors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAIxE;;;;;;;;GAQG;AACH,MAAM,UAAU,kBAAkB,CAC9B,KAAuB,EACvB,MAAqB;IAErB,OAAO,IAAI,0BAA0B,CAAC,YAAY,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AACvE,CAAC"}

package/dist/esm/button/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EACH,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,sBAAsB,EACtB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;kBAIV,aAAa;iBACd,sBAAsB;uBAChB,UAAU;qBACZ,eAAe;;;;;UAK1B;AACE;;;EAGE,CAAC,EACP;;;;;iBAKS,wBAAwB;;;;;;;;kBAQvB,WAAW;;;;;;;;;;;;;;qBAcR,eAAe;iCACH,UAAU;;;;;;;;;;kCAUT,WAAW,IAAI,gBAAgB;;;;cAInD,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;wBAuBhC,sBAAsB;;;;;;;;;;CAU7C;IACG,kBAAkB;KACjB,aAAa,CACV,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;yCAG0B,cAAc;;;;;oCAKnB,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;;;;;;yCAMhB,cAAc;;aAE1C,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;;;oCAQqB,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;;;;;;;;aAQ5C,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;6CAE8B,cAAc;;;;;6CAKd,cAAc;oCACvB,gBAAgB;;;0BAG1B,YAAY;6CACO,cAAc;oCACvB,gBAAgB;;;;wCAIZ,iBAAiB;;;;;6CAKZ,cAAc;yCAClB,cAAc;;aAE1C,CACJ,CACJ,CAAC"}

package/dist/esm/testing/dom-next-update.d.ts

@@ -1,4 +0,0 @@
-/**
- * Allows test code to wait for the render update cycle of the components.
- */
-export declare const domNextUpdate: () => Promise<void>;

package/dist/esm/testing/dom-next-update.js

@@ -1,6 +0,0 @@
-import { DOM } from '@microsoft/fast-element';
-/**
- * Allows test code to wait for the render update cycle of the components.
- */
-export const domNextUpdate = async () => DOM.nextUpdate();
-//# sourceMappingURL=dom-next-update.js.map

package/dist/esm/testing/dom-next-update.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dom-next-update.js","sourceRoot":"","sources":["../../../src/testing/dom-next-update.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,IAAmB,EAAE,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC"}

package/dist/esm/theme-provider/themes.js

@@ -1,8 +0,0 @@
-export var NimbleTheme;
-(function (NimbleTheme) {
-    NimbleTheme["Light"] = "light";
-    NimbleTheme["Dark"] = "dark";
-    NimbleTheme["Color"] = "color";
-    NimbleTheme["LegacyBlue"] = "legacy-blue"; // ⛔️ only for use within SystemLink apps that haven't been updated to brand-aligned controls
-})(NimbleTheme || (NimbleTheme = {}));
-//# sourceMappingURL=themes.js.map

package/dist/esm/theme-provider/themes.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../src/theme-provider/themes.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,WAKX;AALD,WAAY,WAAW;IACnB,8BAAe,CAAA;IACf,4BAAa,CAAA;IACb,8BAAe,CAAA;IACf,yCAA0B,CAAA,CAAC,6FAA6F;AAC5H,CAAC,EALW,WAAW,KAAX,WAAW,QAKtB"}