@ni/nimble-components 16.1.2 → 16.1.3

package/dist/all-components-bundle.js

@@ -15442,6 +15442,8 @@
     const Headline1Weight = "400";
     const ErrorLightUiFamily = "Source Sans Pro";
     const ErrorLightUiWeight = "400";
+    const GridHeaderFamily = "Source Sans Pro";
+    const GridHeaderWeight = "600";
     const Title2Size = "22px";
     const ControlLabel1Size = "11px";
     const BodySize = "14px";
@@ -15458,6 +15460,7 @@
     const LinkLightUiSize = "14px";
     const Headline1Size = "25px";
     const ErrorLightUiSize = "11px";
+    const GridHeaderSize = "12.800000190734863px";
     const BodyLineHeight = "18px";
     const ControlLabel1LineHeight = "16px";
     const GroupLabel1LineHeight = "16px";
@@ -15559,6 +15562,14 @@
         headlineFontWeight: 'headline-font-weight',
         headlineFontLineHeight: 'headline-font-line-height',
         headlineFallbackFontFamily: 'headline-fallback-font-family',
+        tableHeaderFont: 'table-header-font',
+        tableHeaderFontColor: 'table-header-font-color',
+        tableHeaderDisabledFontColor: 'table-header-disabled-font-color',
+        tableHeaderFontFamily: 'table-header-font-family',
+        tableHeaderFontSize: 'table-header-font-size',
+        tableHeaderFontWeight: 'table-header-font-weight',
+        tableHeaderFontLineHeight: 'table-header-font-line-height',
+        tableHeaderFallbackFontFamily: 'table-header-fallback-font-family',
         titlePlus2Font: 'title-plus-2-font',
         titlePlus2FontColor: 'title-plus-2-font-color',
         titlePlus2DisabledFontColor: 'title-plus-2-disabled-font-color',
@@ -15695,7 +15706,8 @@
         errorTextFontSize: 'error-text-font-size',
         errorTextFontWeight: 'error-text-font-weight',
         errorTextFontLineHeight: 'error-text-font-line-height',
-        errorTextFallbackFontFamily: 'error-text-fallback-font-family'
+        errorTextFallbackFontFamily: 'error-text-fallback-font-family',
+        tableRowBorderColor: 'table-row-border-color'
     };
     const prefix = 'ni-nimble';
     const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
@@ -15789,6 +15801,7 @@
     const popupBoxShadowColor = DesignToken.create(styleNameFromTokenName(tokenNames.popupBoxShadowColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black75, Black85, Black85), 0.3));
     const popupBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.popupBorderColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.3));
     DesignToken.create(styleNameFromTokenName(tokenNames.tooltipBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black85, ForestGreen));
+    const tableRowBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.tableRowBorderColor)).withDefault((element) => getColorForTheme(element, Black15, Black88, ForestGreen));
     // Component Sizing Tokens
     const controlHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlHeight)).withDefault('32px');
     const smallPadding = DesignToken.create(styleNameFromTokenName(tokenNames.smallPadding)).withDefault('4px');
@@ -15817,6 +15830,7 @@
     const [buttonLabelFont, buttonLabelFontColor, buttonLabelDisabledFontColor, buttonLabelFontFamily, buttonLabelFontWeight, buttonLabelFontSize, buttonLabelFontLineHeight, buttonLabelFallbackFontFamily] = createFontTokens(tokenNames.buttonLabelFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), ButtonLabel1Family, ButtonLabel1Weight, ButtonLabel1Size, ButtonLabel1LineHeight, 'sans-serif');
     const [tooltipCaptionFont, tooltipCaptionFontColor, tooltipCaptionDisabledFontColor, tooltipCaptionFontFamily, tooltipCaptionFontWeight, tooltipCaptionFontSize, tooltipCaptionFontLineHeight, tooltipCaptionFallbackFontFamily] = createFontTokens(tokenNames.tooltipCaptionFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), TooltipCaptionFamily, TooltipCaptionWeight, TooltipCaptionSize, TooltipCaptionLineHeight, 'sans-serif');
     const [errorTextFont, errorTextFontColor, errorTextDisabledFontColor, errorTextFontFamily, errorTextFontWeight, errorTextFontSize, errorTextFontLineHeight, errorTextFallbackFontFamily] = createFontTokens(tokenNames.errorTextFont, (element) => getFailColorForTheme(element), (element) => hexToRgbaCssColor(getFailColorForTheme(element), 0.3), ErrorLightUiFamily, ErrorLightUiWeight, ErrorLightUiSize, TooltipCaptionLineHeight, 'sans-serif');
+    const [tableHeaderFont, tableHeaderFontColor, tableHeaderDisabledFontColor, tableHeaderFontFamily, tableHeaderFontWeight, tableHeaderFontSize, tableHeaderFontLineHeight, tableHeaderFallbackFontFamily] = createFontTokens(tokenNames.tableHeaderFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), GridHeaderFamily, GridHeaderWeight, GridHeaderSize, TooltipCaptionLineHeight, 'sans-serif');
     // Font Transform Tokens
     const groupHeaderTextTransform = DesignToken.create(styleNameFromTokenName(tokenNames.groupHeaderTextTransform)).withDefault('uppercase');
     // Animation Tokens
@@ -25087,6 +25101,15 @@
 
     const styles$b = css `
     ${display('flex')}
+
+    :host {
+        height: ${controlHeight};
+        align-items: center;
+        background: ${applicationBackgroundColor};
+        padding: 0px calc(${standardPadding} / 2);
+        font: ${tableHeaderFont};
+        color: ${tableHeaderFontColor};
+    }
 `;
 
     // prettier-ignore
@@ -25112,13 +25135,28 @@
     const styles$a = css `
     ${display('flex')}
 
+    :host {
+        height: ${controlHeight};
+        background: ${applicationBackgroundColor};
+        border-top: calc(2 * ${borderWidth}) solid ${tableRowBorderColor};
+    }
+
     .cell {
         flex: 1;
     }
+
+    :host(:hover) .cell {
+        background: ${fillHoverColor};
+    }
 `;
 
     const styles$9 = css `
     ${display('flex')}
+
+    :host {
+        padding: 0px calc(${standardPadding} / 2);
+        align-items: center;
+    }
 `;
 
     // prettier-ignore