@zendeskgarden/react-tables 9.0.0-next.12 → 9.0.0-next.14

package/dist/esm/styled/StyledRow.js

@@ -5,32 +5,74 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { getColorV8, DEFAULT_THEME, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { StyledCell } from './StyledCell.js';
+import { StyledBaseRow } from './StyledBaseRow.js';
 import { StyledOverflowButton } from './StyledOverflowButton.js';
 import { getRowHeight } from './style-utils.js';
 
 const COMPONENT_ID = 'tables.row';
-const StyledBaseRow = styled.tr.withConfig({
-  displayName: "StyledRow__StyledBaseRow",
-  componentId: "sc-ek66ow-0"
-})(["display:table-row;transition:background-color 0.1s ease-in-out;border-bottom:", ";background-color:", ";vertical-align:top;box-sizing:border-box;"], props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 200, props.theme)}`, props => props.isStriped && getColorV8('neutralHue', 100, props.theme));
-StyledBaseRow.defaultProps = {
-  theme: DEFAULT_THEME
-};
-const colorStyles = props => {
-  const boxShadow = `inset ${props.theme.rtl ? '-' : ''}${props.theme.shadowWidths.md} 0 0 0 ${getColorV8('primaryHue', 600, props.theme)}`;
-  const hoveredBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.08);
-  const hoveredBorderColor = getColorV8('primaryHue', 200, props.theme);
-  const selectedBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.2);
-  const selectedBorderColor = getColorV8('primaryHue', 300, props.theme);
-  const hoveredSelectedBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.28);
+const colorStyles = _ref => {
+  let {
+    theme,
+    $isFocused,
+    $isSelected,
+    $isHovered,
+    $isReadOnly
+  } = _ref;
+  const hoveredBackgroundColor = getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[100],
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const hoveredBorderColor = getColor({
+    variable: 'border.primaryEmphasis',
+    transparency: theme.opacity[200],
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const selectedBackgroundColor = getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[200],
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const selectedBorderColor = getColor({
+    variable: 'border.primaryEmphasis',
+    light: {
+      offset: -400
+    },
+    dark: {
+      offset: 300
+    },
+    theme
+  });
+  const hoveredSelectedBackgroundColor = getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[300],
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const boxShadowColor = getColor({
+    variable: 'border.primaryEmphasis',
+    theme
+  });
+  const boxShadow = `inset ${theme.rtl ? '-' : ''}${theme.shadowWidths.md} 0 0 0 ${boxShadowColor}`;
   let backgroundColor = undefined;
   let borderColor = undefined;
   let hoverBorderBottomColor = undefined;
   let hoverBackgroundColor = undefined;
-  if (props.isSelected) {
-    if (props.isHovered) {
+  if ($isSelected) {
+    if ($isHovered) {
       backgroundColor = hoveredSelectedBackgroundColor;
     } else {
       backgroundColor = selectedBackgroundColor;
@@ -38,25 +80,27 @@ const colorStyles = props => {
     borderColor = selectedBorderColor;
     hoverBorderBottomColor = selectedBorderColor;
     hoverBackgroundColor = hoveredSelectedBackgroundColor;
-  } else if (props.isHovered) {
+  } else if ($isHovered) {
     backgroundColor = hoveredBackgroundColor;
     borderColor = hoveredBorderColor;
-  } else if (!props.isReadOnly) {
+  } else if (!$isReadOnly) {
     hoverBorderBottomColor = hoveredBorderColor;
     hoverBackgroundColor = hoveredBackgroundColor;
   }
-  return css(["border-bottom-color:", ";background-color:", ";&:hover{border-bottom-color:", ";background-color:", ";", "{opacity:1;}}&:focus{outline:none;}", ":first-of-type{box-shadow:", ";&:focus{box-shadow:", ";}}"], borderColor, backgroundColor, hoverBorderBottomColor, hoverBackgroundColor, StyledOverflowButton, StyledCell, props.isFocused && boxShadow, boxShadow);
+  return css(["border-bottom-color:", ";background-color:", ";&:hover{border-bottom-color:", ";background-color:", ";", "{opacity:1;}}&:focus{outline:none;}", ":first-of-type{box-shadow:", ";&:focus{box-shadow:", ";}}"], borderColor, backgroundColor, hoverBorderBottomColor, hoverBackgroundColor, StyledOverflowButton, StyledCell, $isFocused && boxShadow, boxShadow);
 };
-const StyledRow = styled(StyledBaseRow).attrs(props => ({
+const sizeStyles = props => {
+  return css(["height:", ";"], getRowHeight(props));
+};
+const StyledRow = styled(StyledBaseRow).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.12',
-  tabIndex: props.isReadOnly ? undefined : -1
-})).withConfig({
+  'data-garden-version': '9.0.0-next.14'
+}).withConfig({
   displayName: "StyledRow",
-  componentId: "sc-ek66ow-1"
-})(["height:", ";", " ", ";"], getRowHeight, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+  componentId: "sc-ek66ow-0"
+})(["", " ", " ", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledRow.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-export { StyledBaseRow, StyledRow };
+export { StyledRow };

package/dist/esm/styled/StyledSortableButton.js

@@ -4,9 +4,9 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { DEFAULT_THEME, getColorV8, SELECTOR_FOCUS_VISIBLE, focusStyles, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME, SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'tables.sortable';
 const StyledBaseIconWrapper = styled.div.withConfig({
@@ -30,50 +30,73 @@ const StyledSortableFillIconWrapper = styled(StyledBaseIconWrapper).withConfig({
 StyledSortableFillIconWrapper.defaultProps = {
   theme: DEFAULT_THEME
 };
+const colorStyles = _ref => {
+  let {
+    theme,
+    $sort
+  } = _ref;
+  const fgInactive = getColor({
+    variable: 'foreground.subtle',
+    transparency: theme.opacity[200],
+    theme
+  });
+  const fgActive = getColor({
+    variable: 'foreground.subtle',
+    theme
+  });
+  const fgPrimaryActive = getColor({
+    variable: 'foreground.primary',
+    theme
+  });
+  const fgPrimaryInactive = getColor({
+    variable: 'foreground.primary',
+    theme,
+    dark: {
+      offset: -100
+    },
+    transparency: theme.opacity[200]
+  });
+  let color = fgActive;
+  let fill = fgActive;
+  if ($sort === 'asc') {
+    color = fgActive;
+    fill = fgInactive;
+  } else if ($sort === 'desc') {
+    color = fgInactive;
+    fill = fgActive;
+  }
+  return css(["", "{color:", ";fill:", ";}", "{color:", ";fill:", ";}&:hover,", "{color:", ";", ";", " ", "}", ""], StyledSortableStrokeIconWrapper, fgActive, fgActive, StyledSortableFillIconWrapper, color, fill, SELECTOR_FOCUS_VISIBLE, fgPrimaryActive, $sort === undefined && `
+        ${StyledSortableFillIconWrapper} {
+          opacity: 1;
+          color: ${fgPrimaryActive};
+          fill: ${fgPrimaryActive};
+        }
+
+        ${StyledSortableStrokeIconWrapper} {
+          opacity: 0;
+        }
+      `, $sort === 'asc' && `
+        ${StyledSortableFillIconWrapper} {
+          color: ${fgPrimaryActive};
+          fill: ${fgPrimaryInactive};
+        }
+      `, $sort === 'desc' && `
+        ${StyledSortableFillIconWrapper} {
+          color: ${fgPrimaryInactive};
+          fill: ${fgPrimaryActive};
+        }
+      `, focusStyles({
+    theme
+  }));
+};
 const StyledSortableButton = styled.button.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.12',
+  'data-garden-version': '9.0.0-next.14',
   type: 'button'
 }).withConfig({
   displayName: "StyledSortableButton",
   componentId: "sc-2s1dli-3"
-})(["position:relative;transition:box-shadow 0.1s ease-in-out;border:none;border-radius:", ";background-color:transparent;cursor:pointer;padding:0;padding-", ":", ";width:", ";text-decoration:none;color:inherit;font-family:inherit;font-size:inherit;font-weight:", ";", "{opacity:", ";}", "{opacity:", ";color:", ";fill:", ";}&:hover,", "{text-decoration:none;color:", ";", ";", " ", "}", " ", ";"], props => props.theme.borderRadii.sm, props => props.theme.rtl ? 'left' : 'right', props => math(`${props.theme.space.base} + ${props.theme.iconSizes.sm}`), props => props.width, props => props.theme.fontWeights.semibold, StyledSortableStrokeIconWrapper, props => props.sort === undefined && 1, StyledSortableFillIconWrapper, props => props.sort !== undefined && 1, props => {
-  if (props.sort === 'asc') {
-    return getColorV8('neutralHue', 600, props.theme);
-  } else if (props.sort === 'desc') {
-    return getColorV8('neutralHue', 400, props.theme);
-  }
-  return undefined;
-}, props => {
-  if (props.sort === 'asc') {
-    return getColorV8('neutralHue', 400, props.theme);
-  } else if (props.sort === 'desc') {
-    return getColorV8('neutralHue', 600, props.theme);
-  }
-  return undefined;
-}, SELECTOR_FOCUS_VISIBLE, props => getColorV8('primaryHue', 600, props.theme), props => props.sort === undefined && `
-      ${StyledSortableFillIconWrapper} {
-        opacity: 1;
-        color: ${getColorV8('primaryHue', 600, props.theme)};
-        fill: ${getColorV8('primaryHue', 600, props.theme)};
-      }
-
-      ${StyledSortableStrokeIconWrapper} {
-        opacity: 0;
-      }
-    `, props => props.sort === 'asc' && `
-      ${StyledSortableFillIconWrapper} {
-        color: ${getColorV8('primaryHue', 600, props.theme)};
-        fill: ${getColorV8('primaryHue', 600, props.theme, 0.25)};
-      }
-    `, props => props.sort === 'desc' && `
-      ${StyledSortableFillIconWrapper} {
-        color: ${getColorV8('primaryHue', 600, props.theme, 0.25)};
-        fill: ${getColorV8('primaryHue', 600, props.theme)};
-      }
-    `, props => focusStyles({
-  theme: props.theme
-}), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["position:relative;transition:box-shadow 0.1s ease-in-out;border:none;border-radius:", ";background-color:transparent;cursor:pointer;padding:0;padding-", ":", ";width:", ";text-decoration:none;color:inherit;font-family:inherit;font-size:inherit;font-weight:", ";", "{opacity:", ";}", "{opacity:", ";}&:hover,", "{text-decoration:none;}", " ", ";"], props => props.theme.borderRadii.sm, props => props.theme.rtl ? 'left' : 'right', props => math(`${props.theme.space.base} + ${props.theme.iconSizes.sm}`), props => props.width, props => props.theme.fontWeights.semibold, StyledSortableStrokeIconWrapper, props => props.$sort === undefined && 1, StyledSortableFillIconWrapper, props => props.$sort !== undefined && 1, SELECTOR_FOCUS_VISIBLE, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledSortableButton.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/StyledTable.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'tables.table';
 const getLineHeight = props => {
@@ -13,11 +13,14 @@ const getLineHeight = props => {
 };
 const StyledTable = styled.table.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.12'
+  'data-garden-version': '9.0.0-next.14'
 }).withConfig({
   displayName: "StyledTable",
   componentId: "sc-gje7na-0"
-})(["display:table;border:none;width:100%;table-layout:fixed;border-collapse:collapse;border-spacing:0;line-height:", ";color:", ";font-size:", ";direction:", ";", ";"], props => getLineHeight(props), props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:table;border:none;width:100%;table-layout:fixed;border-collapse:collapse;border-spacing:0;line-height:", ";color:", ";font-size:", ";direction:", ";", ";"], props => getLineHeight(props), props => getColor({
+  variable: 'foreground.default',
+  theme: props.theme
+}), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledTable.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/style-utils.js

@@ -5,9 +5,9 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 const getRowHeight = props => {
-  if (props.size === 'large') {
+  if (props.$size === 'large') {
     return `${props.theme.space.base * 16}px`;
-  } else if (props.size === 'small') {
+  } else if (props.$size === 'small') {
     return `${props.theme.space.base * 8}px`;
   }
   return `${props.theme.space.base * 10}px`;