@ni/nimble-components 18.12.3 → 18.12.4

package/dist/esm/table/components/group-row/styles.js

@@ -1,17 +1,18 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { borderWidth, controlHeight, controlSlimHeight, fillHoverColor, mediumDelay, smallPadding, standardPadding, tableRowBorderColor } from '../../../theme-provider/design-tokens';
+import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { applicationBackgroundColor, borderWidth, controlHeight, controlSlimHeight, fillHoverColor, mediumDelay, smallPadding, standardPadding } from '../../../theme-provider/design-tokens';
+import { Theme } from '../../../theme-provider/types';
+import { hexToRgbaCssColor } from '../../../utilities/style/colors';
+import { themeBehavior } from '../../../utilities/style/theme';
 export const styles = css `
     ${display('flex')}
 
     :host {
         align-items: center;
         height: calc(${controlHeight} + 2 * ${borderWidth});
-        border-top: calc(2 * ${borderWidth}) solid ${tableRowBorderColor};
-    }
-
-    :host(:hover) {
-        background: ${fillHoverColor};
+        border-top: calc(2 * ${borderWidth}) solid ${applicationBackgroundColor};
+        box-sizing: border-box;
     }
 
     :host([expanded]) .animating,
@@ -19,6 +20,19 @@ export const styles = css `
         transition: ${mediumDelay} ease-in-out;
     }
 
+    :host::before {
+        content: '';
+        width: 100%;
+        height: ${controlHeight};
+        pointer-events: none;
+        bottom: 0px;
+        position: absolute;
+    }
+
+    :host(:hover)::before {
+        background-color: ${fillHoverColor};
+    }
+
     .expand-collapse-button {
         margin-left: calc(
             ${smallPadding} * 2 + ${standardPadding} * 2 *
@@ -72,5 +86,13 @@ export const styles = css `
     .selection-checkbox::part(label) {
         padding-left: 0px;
     }
-`;
+`.withBehaviors(themeBehavior(Theme.color, css `
+            :host(:hover)::before {
+                background-color: ${hexToRgbaCssColor(White, 0.05)};
+            }
+        `), themeBehavior(Theme.dark, css `
+            :host(:hover)::before {
+                background-color: ${hexToRgbaCssColor(White, 0.1)};
+            }
+        `));
 //# sourceMappingURL=styles.js.map

package/dist/esm/table/components/group-row/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/group-row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,WAAW,EACX,YAAY,EACZ,eAAe,EACf,mBAAmB,EACtB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;uBAIE,aAAa,UAAU,WAAW;+BAC1B,WAAW,WAAW,mBAAmB;;;;sBAIlD,cAAc;;;;;sBAKd,WAAW;;;;;cAKnB,YAAY,UAAU,eAAe;;;iBAGlC,iBAAiB;kBAChB,iBAAiB;;;;;;;;;;;;;;;;;6BAiBN,eAAe;;;;;;;;;;;;;;;;;;;;;;;;uBAwBrB,eAAe;;;;;;CAMrC,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/group-row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,WAAW,EACX,YAAY,EACZ,eAAe,EAClB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAE/D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;uBAIE,aAAa,UAAU,WAAW;+BAC1B,WAAW,WAAW,0BAA0B;;;;;;sBAMzD,WAAW;;;;;;kBAMf,aAAa;;;;;;;4BAOH,cAAc;;;;;cAK5B,YAAY,UAAU,eAAe;;;iBAGlC,iBAAiB;kBAChB,iBAAiB;;;;;;;;;;;;;;;;;6BAiBN,eAAe;;;;;;;;;;;;;;;;;;;;;;;;uBAwBrB,eAAe;;;;;;CAMrC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;oCAEyB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEzD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;oCAEyB,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;SAExD,CACJ,CACJ,CAAC"}

package/dist/esm/table/components/row/styles.js

@@ -1,14 +1,43 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { borderWidth, controlHeight, standardPadding, tableRowBorderColor } from '../../../theme-provider/design-tokens';
+import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { applicationBackgroundColor, borderWidth, controlHeight, fillHoverColor, fillHoverSelectedColor, fillSelectedColor, standardPadding } from '../../../theme-provider/design-tokens';
+import { Theme } from '../../../theme-provider/types';
+import { hexToRgbaCssColor } from '../../../utilities/style/colors';
+import { themeBehavior } from '../../../utilities/style/theme';
 export const styles = css `
     ${display('flex')}
 
     :host {
-        height: calc(${controlHeight} + 2 * ${borderWidth});
-        border-top: calc(2 * ${borderWidth}) solid ${tableRowBorderColor};
         width: fit-content;
         min-width: 100%;
+        background-color: ${applicationBackgroundColor};
+        height: calc(${controlHeight} + 2 * ${borderWidth});
+        border-top: calc(2 * ${borderWidth}) solid transparent;
+        box-sizing: border-box;
+        background-clip: padding-box;
+    }
+
+    :host::before {
+        content: '';
+        width: 100%;
+        height: ${controlHeight};
+        pointer-events: none;
+        box-sizing: border-box;
+        bottom: 0px;
+        position: absolute;
+    }
+
+    :host([selectable]:not([selected]):hover)::before {
+        background-color: ${fillHoverColor};
+    }
+
+    :host([selected])::before {
+        background-color: ${fillSelectedColor};
+    }
+
+    :host([selected]:hover)::before {
+        background-color: ${fillHoverSelectedColor};
     }
 
     .checkbox-container {
@@ -46,5 +75,17 @@ export const styles = css `
     :host([selected]) nimble-table-cell {
         --ni-private-table-cell-action-menu-display: block;
     }
-`;
+`.withBehaviors(themeBehavior(Theme.color, css `
+            :host([selectable]:not([selected]):hover)::before {
+                background-color: ${hexToRgbaCssColor(White, 0.05)};
+            }
+
+            :host([selected])::before {
+                background-color: ${hexToRgbaCssColor(White, 0.25)};
+            }
+
+            :host([selected]:hover)::before {
+                background-color: ${hexToRgbaCssColor(White, 0.2)};
+            }
+        `));
 //# sourceMappingURL=styles.js.map

package/dist/esm/table/components/row/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,WAAW,EACX,aAAa,EACb,eAAe,EACf,mBAAmB,EACtB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;uBAGE,aAAa,UAAU,WAAW;+BAC1B,WAAW,WAAW,mBAAmB;;;;;;;;;;uBAUjD,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BrC,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,eAAe,EAClB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAE/D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;4BAKO,0BAA0B;uBAC/B,aAAa,UAAU,WAAW;+BAC1B,WAAW;;;;;;;;kBAQxB,aAAa;;;;;;;;4BAQH,cAAc;;;;4BAId,iBAAiB;;;;4BAIjB,sBAAsB;;;;;;;;uBAQ3B,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BrC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;oCAEyB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;;;oCAI9B,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;;;oCAI9B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;SAExD,CACJ,CACJ,CAAC"}

package/dist/esm/table/styles.js

@@ -1,7 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
-import { applicationBackgroundColor, bodyFont, bodyFontColor, fillHoverColor, fillHoverSelectedColor, fillSelectedColor, standardPadding } from '../theme-provider/design-tokens';
+import { applicationBackgroundColor, bodyFont, bodyFontColor, standardPadding, tableRowBorderColor } from '../theme-provider/design-tokens';
 import { Theme } from '../theme-provider/types';
 import { hexToRgbaCssColor } from '../utilities/style/colors';
 import { themeBehavior } from '../utilities/style/theme';
@@ -40,6 +40,7 @@ export const styles = css `
         width: 100%;
         position: relative;
         top: var(--ni-private-table-row-container-top);
+        background-color: ${tableRowBorderColor};
     }
 
     .header-container {
@@ -82,61 +83,20 @@ export const styles = css `
         padding-left: 0px;
     }
 
-    .row {
-        background: ${applicationBackgroundColor};
+    .group-row {
         position: relative;
-        box-sizing: border-box;
-    }
-
-    .row::before {
-        content: '';
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        pointer-events: none;
-    }
-
-    :host([selection-mode='single']) .row:hover::before,
-    :host([selection-mode='multiple']) .row:hover::before {
-        background: ${fillHoverColor};
-    }
-
-    :host([selection-mode='single']) .row[selected]::before,
-    :host([selection-mode='multiple']) .row[selected]::before {
-        background: ${fillSelectedColor};
     }
 
-    :host([selection-mode='single']) .row[selected]:hover::before,
-    :host([selection-mode='multiple']) .row[selected]:hover::before {
-        background: ${fillHoverSelectedColor};
+    .row {
+        position: relative;
     }
 `.withBehaviors(themeBehavior(Theme.color, css `
-            .header-row::before {
+            .table-row-container::before {
                 content: '';
                 width: 100%;
                 height: 100%;
+                background-color: ${hexToRgbaCssColor(White, 0.1)};
                 position: absolute;
-                background: ${fillHoverColor};
-                pointer-events: none;
-            }
-
-            .row::before {
-                background: ${fillHoverColor};
-            }
-
-            :host([selection-mode='single']) .row:hover::before,
-            :host([selection-mode='multiple']) .row:hover::before {
-                background: ${hexToRgbaCssColor(White, 0.15)};
-            }
-
-            :host([selection-mode='single']) .row[selected]::before,
-            :host([selection-mode='multiple']) .row[selected]::before {
-                background: ${hexToRgbaCssColor(White, 0.25)};
-            }
-
-            :host([selection-mode='single']) .row[selected]:hover::before,
-            :host([selection-mode='multiple']) .row[selected]:hover::before {
-                background: ${hexToRgbaCssColor(White, 0.2)};
             }
         `));
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;gBAWL,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA+BR,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;uBA0BzB,eAAe;;;;;;;;sBAQhB,0BAA0B;;;;;;;;;;;;;;;sBAe1B,cAAc;;;;;sBAKd,iBAAiB;;;;;sBAKjB,sBAAsB;;CAE3C,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;;;8BAMmB,cAAc;;;;;8BAKd,cAAc;;;;;8BAKd,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;;;;8BAK9B,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;;;;8BAK9B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;SAElD,CACJ,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,eAAe,EACf,mBAAmB,EACtB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;gBAWL,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;;;;;4BAsBF,mBAAmB;;;;;;;;;;sBAUzB,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;uBA0BzB,eAAe;;;;;;;;;;;;;;CAcrC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;;oCAKyB,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;;SAGxD,CACJ,CACJ,CAAC"}

package/dist/esm/theme-provider/design-tokens.js

@@ -48,7 +48,7 @@ export const iconColor = DesignToken.create(styleNameFromTokenName(tokenNames.ic
 export const modalBackdropColor = DesignToken.create(styleNameFromTokenName(tokenNames.modalBackdropColor)).withDefault((element) => getModalBackdropForTheme(element));
 export const popupBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.popupBorderColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.3));
 export const tooltipBackgroundColor = DesignToken.create(styleNameFromTokenName(tokenNames.tooltipBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black85, ForestGreen));
-export const tableRowBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.tableRowBorderColor)).withDefault((element) => getColorForTheme(element, Black15, Black88, ForestGreen));
+export const tableRowBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.tableRowBorderColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
 // Component Sizing Tokens
 export const controlHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlHeight)).withDefault('32px');
 export const controlSlimHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlSlimHeight)).withDefault('24px');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "18.12.3",
+  "version": "18.12.4",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",