@razorpay/blade/build/lib/web/development/components/Table/tokens.js

The Design System that powers Razorpay

import '../Icons/index.js';
import '../../tokens/global/index.js';
import { size } from '../../tokens/global/size.js';
import CheckIcon from '../Icons/CheckIcon/CheckIcon.js';
import AlertCircleIcon from '../Icons/AlertCircleIcon/AlertCircleIcon.js';

var firstColumnStickyZIndex = 2;
var refreshWrapperZIndex = 3;
var checkboxCellWidth = size['44'];
var tableBackgroundColor = 'surface.background.gray.intense';
var tableHeader = {
  paddingTop: 'spacing.5',
  paddingBottom: 'spacing.5',
  paddingLeft: 'spacing.4',
  paddingRight: 'spacing.4',
  backgroundColor: 'surface.background.gray.moderate',
  borderBottomAndTopWidth: 'thin',
  borderBottomAndTopColor: 'surface.border.gray.muted'
};
var tableFooter = {
  paddingTop: 'spacing.5',
  paddingBottom: 'spacing.5',
  paddingLeft: 'spacing.4',
  paddingRight: 'spacing.4',
  borderBottomAndTopWidth: 'thin',
  borderBottomAndTopColor: 'surface.border.gray.muted',
  backgroundColor: 'interactive.background.gray.faded'
};
var tableRow = {
  paddingLeft: {
    compact: 'spacing.4',
    normal: 'spacing.4',
    comfortable: 'spacing.4'
  },
  paddingRight: {
    compact: 'spacing.4',
    normal: 'spacing.4',
    comfortable: 'spacing.4'
  },
  minHeight: {
    compact: '36',
    normal: '48',
    comfortable: '60'
  },
  nonStripe: {
    backgroundColor: 'transparent',
    backgroundColorHover: 'interactive.background.gray.default',
    backgroundColorFocus: 'transparent',
    // TODO: Rebranding - on design side: explore pressed state color change, right now both hover & active are same
    backgroundColorActive: 'interactive.background.gray.default',
    backgroundColorSelected: 'interactive.background.gray.fadedHighlighted',
    backgroundColorSelectedHover: 'interactive.background.gray.fadedHighlighted',
    backgroundColorSelectedFocus: 'interactive.background.gray.fadedHighlighted',
    backgroundColorSelectedActive: 'interactive.background.gray.fadedHighlighted'
  },
  nonStripeWrapper: {
    // not used anywhere
    backgroundColor: 'transparent',
    backgroundColorHover: 'transparent',
    backgroundColorFocus: 'transparent',
    backgroundColorActive: 'interactive.background.gray.default',
    backgroundColorSelected: 'transparent',
    backgroundColorSelectedHover: 'transparent',
    backgroundColorSelectedFocus: 'transparent',
    backgroundColorSelectedActive: 'transparent'
  },
  stripe: {
    backgroundColor: 'transparent',
    backgroundColorHover: 'interactive.background.gray.default',
    backgroundColorFocus: 'transparent',
    backgroundColorActive: 'interactive.background.gray.default',
    backgroundColorSelected: 'interactive.background.gray.fadedHighlighted',
    backgroundColorSelectedHover: 'interactive.background.gray.fadedHighlighted',
    backgroundColorSelectedFocus: 'interactive.background.gray.fadedHighlighted',
    backgroundColorSelectedActive: 'interactive.background.gray.fadedHighlighted'
  },
  stripeWrapper: {
    backgroundColor: 'interactive.background.gray.default',
    backgroundColorHover: 'interactive.background.gray.default',
    backgroundColorFocus: 'interactive.background.gray.default',
    backgroundColorActive: 'interactive.background.gray.default',
    backgroundColorSelected: 'interactive.background.gray.default',
    backgroundColorSelectedHover: 'interactive.background.gray.default',
    backgroundColorSelectedFocus: 'interactive.background.gray.default',
    backgroundColorSelectedActive: 'interactive.background.gray.default'
  },
  borderBottomWidth: 'thin',
  borderColor: 'surface.border.gray.muted',
  backgroundColorMotionEasing: 'easing.standard',
  backgroundColorMotionDuration: 'duration.xquick',
  groupHeaderBackgroundColor: 'surface.background.gray.moderate'
};
var tableToolbar = {
  backgroundColor: 'transparent',
  backgroundColorSelected: 'interactive.background.primary.faded',
  backgroundColorMotionEasing: 'easing.standard',
  backgroundColorMotionDuration: 'duration.xquick',
  minHeight: size[37],
  // 37px to accommodate 1px border, matching TableHeader height
  padding: ['spacing.3', 'spacing.3', 'spacing.3', 'spacing.4']
};
var tablePagination = {
  defaultPageSize: 10,
  backgroundColor: 'surface.background.gray.moderate'
};
var tableEditableCellRowDensityToInputSizeMap = {
  compact: 'small',
  normal: 'medium',
  comfortable: 'large'
};
var validationStateToInputTrailingIconMap = {
  none: undefined,
  success: CheckIcon,
  error: AlertCircleIcon
};
var rowDensityToIsTableInputCellMapping = {
  comfortable: false,
  normal: true,
  compact: true
};
var classes = {
  HOVER_ACTIONS: 'hover-actions',
  HOVER_ACTIONS_LAYER2: 'hover-actions-layer-2',
  HOVER_ACTIONS_LAYER3: 'hover-actions-layer-3',
  HAS_ROW_SPANNING: 'has-row-spanning'
};

export { checkboxCellWidth, classes, firstColumnStickyZIndex, refreshWrapperZIndex, rowDensityToIsTableInputCellMapping, tableBackgroundColor, tableEditableCellRowDensityToInputSizeMap, tableFooter, tableHeader, tablePagination, tableRow, tableToolbar, validationStateToInputTrailingIconMap };
//# sourceMappingURL=tokens.js.map