@ni/nimble-components 23.0.1 → 24.0.0

package/dist/esm/toggle-button/styles.js

@@ -1,63 +1,26 @@
 import { css } from '@microsoft/fast-element';
-import { focusVisible } from '../utilities/style/focus';
-import { borderHoverColor, borderWidth, fillSelectedColor, fillSelectedRgbPartialColor } from '../theme-provider/design-tokens';
-import { styles as buttonStyles } from '../patterns/button/styles';
+import { buttonAccentOutlineFontColor, buttonLabelFontColor, fillSelectedColor, fillSelectedRgbPartialColor, iconColor } from '../theme-provider/design-tokens';
+import { buttonAppearanceVariantStyles, styles as buttonStyles } from '../patterns/button/styles';
+import { appearanceBehavior } from '../utilities/style/appearance';
+import { ButtonAppearance } from './types';
 export const styles = css `
     ${buttonStyles}
+    ${buttonAppearanceVariantStyles}
 
-    @layer base {
+    @layer checked {
         .control[aria-pressed='true'] {
             background-color: transparent;
+            color: ${buttonLabelFontColor};
             background-image: linear-gradient(
                 ${fillSelectedColor},
                 ${fillSelectedColor}
             );
             border-color: rgba(${fillSelectedRgbPartialColor}, 0.3);
         }
-    }
-
-    @layer hover {
-        .control[aria-pressed='true']:hover {
-            border-color: ${borderHoverColor};
-            box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-            background-image: linear-gradient(
-                ${fillSelectedColor},
-                ${fillSelectedColor}
-            );
-            background-size: calc(100% - 4px) calc(100% - 4px);
-        }
-    }
-
-    @layer focusVisible {
-        .control[aria-pressed='true']${focusVisible} {
-            border-color: ${borderHoverColor};
-            box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-            background-image: linear-gradient(
-                ${fillSelectedColor},
-                ${fillSelectedColor}
-            );
-            background-size: calc(100% - 4px) calc(100% - 4px);
-        }
-
-        .control[aria-pressed='true']${focusVisible}::before {
-            outline: ${borderWidth} solid ${borderHoverColor};
-            outline-offset: -3px;
-            color: transparent;
-        }
-    }
-
-    @layer active {
-        .control[aria-pressed='true']:active {
-            box-shadow: none;
-            background-image: linear-gradient(
-                ${fillSelectedColor},
-                ${fillSelectedColor}
-            );
-            background-size: calc(100% - 2px) calc(100% - 2px);
-        }
 
-        .control[aria-pressed='true']:active::before {
-            outline: none;
+        .control[aria-pressed='true'] [part='start'],
+        .control[aria-pressed='true'] [part='end'] {
+            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
         }
     }
 
@@ -69,16 +32,22 @@ export const styles = css `
             );
             border-color: rgba(${fillSelectedRgbPartialColor}, 0.3);
         }
-
-        :host([disabled]) .control[aria-pressed='true']:hover {
-            background-image: linear-gradient(
-                ${fillSelectedColor},
-                ${fillSelectedColor}
-            );
-            background-size: 100% 100%;
-            border-color: rgba(${fillSelectedRgbPartialColor}, 0.3);
-            box-shadow: none;
-        }
     }
-`;
+`.withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
+            @layer checked {
+                :host([appearance-variant='accent'])
+                    .control[aria-pressed='true'] {
+                    color: ${buttonAccentOutlineFontColor};
+                }
+
+                :host([appearance-variant='accent'])
+                    .control[aria-pressed='true']
+                    [part='start'],
+                :host([appearance-variant='accent'])
+                    .control[aria-pressed='true']
+                    [part='end'] {
+                    ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};
+                }
+            }
+        `));
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/toggle-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,gBAAgB,EAChB,WAAW,EACX,iBAAiB,EACjB,2BAA2B,EAC9B,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEnE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,YAAY;;;;;;kBAMA,iBAAiB;kBACjB,iBAAiB;;iCAEF,2BAA2B;;;;;;4BAMhC,gBAAgB;sCACN,WAAW,IAAI,gBAAgB;;kBAEnD,iBAAiB;kBACjB,iBAAiB;;;;;;;uCAOI,YAAY;4BACvB,gBAAgB;sCACN,WAAW,IAAI,gBAAgB;;kBAEnD,iBAAiB;kBACjB,iBAAiB;;;;;uCAKI,YAAY;uBAC5B,WAAW,UAAU,gBAAgB;;;;;;;;;;kBAU1C,iBAAiB;kBACjB,iBAAiB;;;;;;;;;;;;;kBAajB,iBAAiB;kBACjB,iBAAiB;;iCAEF,2BAA2B;;;;;kBAK1C,iBAAiB;kBACjB,iBAAiB;;;iCAGF,2BAA2B;;;;CAI3D,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { focusVisible } from '../utilities/style/focus';\n\nimport {\n    borderHoverColor,\n    borderWidth,\n    fillSelectedColor,\n    fillSelectedRgbPartialColor\n} from '../theme-provider/design-tokens';\nimport { styles as buttonStyles } from '../patterns/button/styles';\n\nexport const styles = css`\n    ${buttonStyles}\n\n    @layer base {\n        .control[aria-pressed='true'] {\n            background-color: transparent;\n            background-image: linear-gradient(\n                ${fillSelectedColor},\n                ${fillSelectedColor}\n            );\n            border-color: rgba(${fillSelectedRgbPartialColor}, 0.3);\n        }\n    }\n\n    @layer hover {\n        .control[aria-pressed='true']:hover {\n            border-color: ${borderHoverColor};\n            box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n            background-image: linear-gradient(\n                ${fillSelectedColor},\n                ${fillSelectedColor}\n            );\n            background-size: calc(100% - 4px) calc(100% - 4px);\n        }\n    }\n\n    @layer focusVisible {\n        .control[aria-pressed='true']${focusVisible} {\n            border-color: ${borderHoverColor};\n            box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n            background-image: linear-gradient(\n                ${fillSelectedColor},\n                ${fillSelectedColor}\n            );\n            background-size: calc(100% - 4px) calc(100% - 4px);\n        }\n\n        .control[aria-pressed='true']${focusVisible}::before {\n            outline: ${borderWidth} solid ${borderHoverColor};\n            outline-offset: -3px;\n            color: transparent;\n        }\n    }\n\n    @layer active {\n        .control[aria-pressed='true']:active {\n            box-shadow: none;\n            background-image: linear-gradient(\n                ${fillSelectedColor},\n                ${fillSelectedColor}\n            );\n            background-size: calc(100% - 2px) calc(100% - 2px);\n        }\n\n        .control[aria-pressed='true']:active::before {\n            outline: none;\n        }\n    }\n\n    @layer disabled {\n        :host([disabled]) .control[aria-pressed='true'] {\n            background-image: linear-gradient(\n                ${fillSelectedColor},\n                ${fillSelectedColor}\n            );\n            border-color: rgba(${fillSelectedRgbPartialColor}, 0.3);\n        }\n\n        :host([disabled]) .control[aria-pressed='true']:hover {\n            background-image: linear-gradient(\n                ${fillSelectedColor},\n                ${fillSelectedColor}\n            );\n            background-size: 100% 100%;\n            border-color: rgba(${fillSelectedRgbPartialColor}, 0.3);\n            box-shadow: none;\n        }\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/toggle-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,OAAO,EACH,4BAA4B,EAC5B,oBAAoB,EACpB,iBAAiB,EACjB,2BAA2B,EAC3B,SAAS,EACZ,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACH,6BAA6B,EAC7B,MAAM,IAAI,YAAY,EACzB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,YAAY;MACZ,6BAA6B;;;;;qBAKd,oBAAoB;;kBAEvB,iBAAiB;kBACjB,iBAAiB;;iCAEF,2BAA2B;;;;;cAK9C,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;kBAOhD,iBAAiB;kBACjB,iBAAiB;;iCAEF,2BAA2B;;;CAG3D,CAAC,aAAa,CACX,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;;6BAIkB,4BAA4B;;;;;;;;;sBASnC,SAAS,CAAC,iBAAiB,KAAK,4BAA4B;;;SAGzE,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\n\nimport {\n    buttonAccentOutlineFontColor,\n    buttonLabelFontColor,\n    fillSelectedColor,\n    fillSelectedRgbPartialColor,\n    iconColor\n} from '../theme-provider/design-tokens';\nimport {\n    buttonAppearanceVariantStyles,\n    styles as buttonStyles\n} from '../patterns/button/styles';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { ButtonAppearance } from './types';\n\nexport const styles = css`\n    ${buttonStyles}\n    ${buttonAppearanceVariantStyles}\n\n    @layer checked {\n        .control[aria-pressed='true'] {\n            background-color: transparent;\n            color: ${buttonLabelFontColor};\n            background-image: linear-gradient(\n                ${fillSelectedColor},\n                ${fillSelectedColor}\n            );\n            border-color: rgba(${fillSelectedRgbPartialColor}, 0.3);\n        }\n\n        .control[aria-pressed='true'] [part='start'],\n        .control[aria-pressed='true'] [part='end'] {\n            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n        }\n    }\n\n    @layer disabled {\n        :host([disabled]) .control[aria-pressed='true'] {\n            background-image: linear-gradient(\n                ${fillSelectedColor},\n                ${fillSelectedColor}\n            );\n            border-color: rgba(${fillSelectedRgbPartialColor}, 0.3);\n        }\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        ButtonAppearance.outline,\n        css`\n            @layer checked {\n                :host([appearance-variant='accent'])\n                    .control[aria-pressed='true'] {\n                    color: ${buttonAccentOutlineFontColor};\n                }\n\n                :host([appearance-variant='accent'])\n                    .control[aria-pressed='true']\n                    [part='start'],\n                :host([appearance-variant='accent'])\n                    .control[aria-pressed='true']\n                    [part='end'] {\n                    ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};\n                }\n            }\n        `\n    )\n);\n"]}

package/dist/esm/toggle-button/types.d.ts

@@ -2,4 +2,4 @@
  * Types of toggle button appearance.
  * @public
  */
-export { ButtonAppearance } from '../patterns/button/types';
+export { ButtonAppearance, ButtonAppearanceVariant } from '../patterns/button/types';

package/dist/esm/toggle-button/types.js

@@ -2,5 +2,5 @@
  * Types of toggle button appearance.
  * @public
  */
-export { ButtonAppearance } from '../patterns/button/types';
+export { ButtonAppearance, ButtonAppearanceVariant } from '../patterns/button/types';
 //# sourceMappingURL=types.js.map

package/dist/esm/toggle-button/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/toggle-button/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC","sourcesContent":["/**\n * Types of toggle button appearance.\n * @public\n */\nexport { ButtonAppearance } from '../patterns/button/types';\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/toggle-button/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EACH,gBAAgB,EAChB,uBAAuB,EAC1B,MAAM,0BAA0B,CAAC","sourcesContent":["/**\n * Types of toggle button appearance.\n * @public\n */\nexport {\n    ButtonAppearance,\n    ButtonAppearanceVariant\n} from '../patterns/button/types';\n"]}

package/dist/tokens-internal.scss

@@ -44,12 +44,6 @@ $ni-nimble-internal-button-fill-primary-color: --ni-nimble-button-fill-primary-c
 /// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-button-primary-font-color}: <new value>;`.
 $ni-nimble-internal-button-primary-font-color: --ni-nimble-button-primary-font-color;
 
-/// Internal property for $ni-nimble-button-fill-active-primary-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-fill-active-primary-color}: <new value>;`.
-$ni-nimble-internal-button-fill-active-primary-color: --ni-nimble-button-fill-active-primary-color;
-
 /// Internal property for $ni-nimble-button-fill-accent-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).
@@ -74,12 +68,6 @@ $ni-nimble-internal-button-accent-outline-font-color: --ni-nimble-button-accent-
 /// Requires SCSS interpolation to set, ie `#{$ni-nimble-internal-button-border-accent-outline-color}: <new value>;`.
 $ni-nimble-internal-button-border-accent-outline-color: --ni-nimble-button-border-accent-outline-color;
 
-/// Internal property for $ni-nimble-button-fill-accent-active-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-fill-accent-active-color}: <new value>;`.
-$ni-nimble-internal-button-fill-accent-active-color: --ni-nimble-button-fill-accent-active-color;
-
 /// Internal property for $ni-nimble-fill-selected-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).

package/dist/tokens.scss

@@ -26,9 +26,6 @@ $ni-nimble-button-fill-primary-color: var($ni-nimble-internal-button-fill-primar
 /// Font color for "primary" appearance-variant buttons
 $ni-nimble-button-primary-font-color: var($ni-nimble-internal-button-primary-font-color);
 
-/// Active fill color for "primary" appearance-variant buttons
-$ni-nimble-button-fill-active-primary-color: var($ni-nimble-internal-button-fill-active-primary-color);
-
 /// Control fill color for "accent" appearance-variant buttons
 $ni-nimble-button-fill-accent-color: var($ni-nimble-internal-button-fill-accent-color);
 
@@ -41,9 +38,6 @@ $ni-nimble-button-accent-outline-font-color: var($ni-nimble-internal-button-acce
 /// Border color for "accent" appearance-variant outline buttons
 $ni-nimble-button-border-accent-outline-color: var($ni-nimble-internal-button-border-accent-outline-color);
 
-/// Active fill color for "accent" appearance-variant buttons
-$ni-nimble-button-fill-accent-active-color: var($ni-nimble-internal-button-fill-accent-active-color);
-
 /// Control fill color when a control is selected
 $ni-nimble-fill-selected-color: var($ni-nimble-internal-fill-selected-color);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "23.0.1",
+  "version": "24.0.0",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run generate-workers && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",
@@ -68,7 +68,7 @@
     "@microsoft/fast-element": "^1.12.0",
     "@microsoft/fast-foundation": "2.49.4",
     "@microsoft/fast-web-utilities": "^6.0.0",
-    "@ni/nimble-tokens": "^6.13.0",
+    "@ni/nimble-tokens": "^6.13.1",
     "@tanstack/table-core": "^8.10.7",
     "@tanstack/virtual-core": "^3.0.0-beta.68",
     "@tiptap/core": "^2.2.2",