@ni/nimble-components 1.0.0-beta.125 → 1.0.0-beta.126

package/dist/tokens-internal.scss

@@ -0,0 +1,261 @@
+// 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;
+
+/// Internal property for $ni-nimble-password-reveal-filter.
+/// 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-password-reveal-filter}: <new value>;`.
+$ni-nimble-internal-password-reveal-filter: --ni-nimble-password-reveal-filter;

package/dist/tokens.scss

@@ -0,0 +1,135 @@
+// 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);
+
+
+$ni-nimble-password-reveal-filter: var($ni-nimble-internal-password-reveal-filter);

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@ni/nimble-components",
-  "version": "1.0.0-beta.125",
+  "version": "1.0.0-beta.126",
   "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 .",
@@ -16,6 +16,9 @@
     "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",
@@ -40,17 +43,17 @@
   "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",
+    "@microsoft/fast-web-utilities": "^5.0.2",
     "@ni/nimble-tokens": "^1.0.0-beta.38",
-    "hex-rgb": "^5.0.0",
-    "lodash-es": "^4.17.21"
+    "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-javascript": "^3.1.0",
     "@ni/eslint-config-typescript": "^3.0.5",
     "@storybook/addon-a11y": "^6.4.0",
     "@storybook/addon-actions": "^6.4.0",
@@ -89,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",