@razorpay/blade/build/lib/web/production/components/Button/BaseButton/buttonTokens.js

The Design System that powers Razorpay

import '../../../tokens/global/index.js';
import '../../../utils/index.js';
import { size } from '../../../tokens/global/size.js';
import { makeSize } from '../../../utils/makeSize/makeSize.js';

/* eslint-disable @typescript-eslint/explicit-function-return-type */

var backgroundGradient = function backgroundGradient(color) {
  return {
    base: {
      primary: {
        "default": "interactive.background.".concat(color, ".default"),
        highlighted: "interactive.background.".concat(color, ".highlighted"),
        disabled: "interactive.background.".concat(color, ".disabled")
      },
      secondary: {
        "default": 'surface.background.gray.intense',
        highlighted: 'surface.background.gray.intense',
        disabled: 'interactive.background.staticWhite.ghost'
      },
      tertiary: {
        "default": 'surface.background.gray.intense',
        highlighted: 'surface.background.gray.intense',
        disabled: 'interactive.background.staticWhite.ghost'
      },
      transparent: {
        "default": 'transparent',
        highlighted: 'interactive.background.gray.faded',
        disabled: 'interactive.background.gray.disabled'
      }
    },
    white: {
      primary: {
        "default": 'interactive.background.staticWhite.default',
        highlighted: 'interactive.background.staticWhite.highlighted',
        disabled: 'interactive.background.staticWhite.disabled'
      },
      secondary: {
        "default": 'interactive.background.staticWhite.faded',
        highlighted: 'interactive.background.staticBlack.faded',
        disabled: 'interactive.background.gray.disabled'
      },
      tertiary: {
        "default": 'interactive.background.staticWhite.faded',
        highlighted: 'interactive.background.staticBlack.faded',
        disabled: 'interactive.background.gray.disabled'
      }
    }
  };
};
/**
 * Box-shadow tokens for buttons (includes border + 3D effects)
 * Each shadow is: inset 0 {y}px {blur}px {spread}px {color}
 */
var boxShadow = function boxShadow(color) {
  return {
    base: {
      primary: {
        "default": [{
          y: -1.5,
          blur: 0,
          spread: 0,
          color: "interactive.border.".concat(color, ".highlighted")
        }, {
          y: 0,
          blur: 0,
          spread: 0.5,
          color: "interactive.border.".concat(color, ".default")
        }, {
          y: 1.5,
          blur: 0,
          spread: 0,
          color: 'interactive.border.staticWhite.faded'
        }, {
          y: -2,
          blur: 0,
          spread: 0,
          color: 'interactive.border.staticWhite.faded'
        }],
        highlighted: [{
          y: -1.5,
          blur: 0,
          spread: 0,
          color: "interactive.border.".concat(color, ".highlighted")
        }, {
          y: 0,
          blur: 0,
          spread: 0.5,
          color: "interactive.border.".concat(color, ".highlighted")
        }, {
          y: 1.5,
          blur: 0,
          spread: 0,
          color: 'interactive.border.staticWhite.faded'
        }, {
          y: -2,
          blur: 0,
          spread: 0,
          color: 'interactive.border.staticWhite.faded'
        }],
        disabled: []
      },
      secondary: {
        "default": [{
          y: -1,
          blur: 0.5,
          spread: 0,
          color: 'interactive.border.staticBlack.fadedHighlighted'
        }, {
          y: 0,
          blur: 0,
          spread: 1,
          color: 'interactive.border.gray.default'
        }, {
          y: -1.5,
          blur: 0,
          spread: 0,
          color: 'interactive.border.gray.default'
        }],
        highlighted: [{
          y: -1,
          blur: 0.5,
          spread: 0,
          color: 'interactive.border.staticBlack.fadedHighlighted'
        }, {
          y: 0,
          blur: 0,
          spread: 1,
          color: 'interactive.border.gray.highlighted'
        }, {
          y: -1.5,
          blur: 0,
          spread: 0,
          color: 'interactive.border.gray.default'
        }],
        disabled: [{
          y: 0,
          blur: 0,
          spread: 1,
          color: 'interactive.border.gray.disabled'
        }]
      },
      tertiary: {
        "default": [{
          y: -1,
          blur: 0.5,
          spread: 0,
          color: 'interactive.border.staticBlack.fadedHighlighted'
        }, {
          y: 0,
          blur: 0,
          spread: 1,
          color: 'interactive.border.gray.default'
        }, {
          y: -1.5,
          blur: 0,
          spread: 0,
          color: 'interactive.border.gray.default'
        }],
        highlighted: [{
          y: -1,
          blur: 0.5,
          spread: 0,
          color: 'interactive.border.staticBlack.fadedHighlighted'
        }, {
          y: 0,
          blur: 0,
          spread: 1,
          color: 'interactive.border.gray.highlighted'
        }, {
          y: -1.5,
          blur: 0,
          spread: 0,
          color: 'interactive.border.gray.default'
        }],
        disabled: [{
          y: 0,
          blur: 0,
          spread: 1,
          color: 'interactive.border.gray.disabled'
        }]
      },
      transparent: {
        "default": [],
        highlighted: [],
        disabled: []
      }
    },
    white: {
      primary: {
        "default": [{
          y: -1.5,
          blur: 0,
          spread: 0,
          color: 'interactive.border.staticBlack.fadedHighlighted'
        }, {
          y: 0,
          blur: 0,
          spread: 0.5,
          color: 'interactive.border.staticWhite.default'
        }],
        highlighted: [{
          y: -1.5,
          blur: 0,
          spread: 0,
          color: 'interactive.border.staticBlack.fadedHighlighted'
        }, {
          y: 0,
          blur: 0,
          spread: 0.5,
          color: 'interactive.border.staticWhite.default'
        }],
        disabled: []
      },
      secondary: {
        "default": [{
          y: -1.5,
          blur: 0,
          spread: 0,
          color: 'interactive.border.staticBlack.fadedHighlighted'
        }, {
          y: 0,
          blur: 0,
          spread: 1,
          color: 'interactive.border.staticWhite.highlighted'
        }],
        highlighted: [{
          y: -1.5,
          blur: 0,
          spread: 0,
          color: 'interactive.border.staticBlack.fadedHighlighted'
        }, {
          y: 0,
          blur: 0,
          spread: 1,
          color: 'interactive.border.staticWhite.highlighted'
        }],
        disabled: [{
          y: 0,
          blur: 0,
          spread: 1,
          color: 'interactive.border.staticWhite.disabled'
        }]
      },
      tertiary: {
        "default": [{
          y: -1.5,
          blur: 0,
          spread: 0,
          color: 'interactive.border.staticBlack.fadedHighlighted'
        }, {
          y: 0,
          blur: 0,
          spread: 1,
          color: 'interactive.border.staticWhite.highlighted'
        }],
        highlighted: [{
          y: -1.5,
          blur: 0,
          spread: 0,
          color: 'interactive.border.staticBlack.fadedHighlighted'
        }, {
          y: 0,
          blur: 0,
          spread: 1,
          color: 'interactive.border.staticWhite.highlighted'
        }],
        disabled: [{
          y: 0,
          blur: 0,
          spread: 1,
          color: 'interactive.border.staticWhite.disabled'
        }]
      }
    }
  };
};
var textColor = function textColor(property) {
  return {
    base: {
      primary: {
        "default": "interactive.".concat(property, ".onPrimary.normal"),
        highlighted: "interactive.".concat(property, ".onPrimary.normal"),
        disabled: "interactive.".concat(property, ".primary.disabled")
      },
      secondary: {
        "default": "interactive.".concat(property, ".gray.normal"),
        highlighted: "interactive.".concat(property, ".gray.normal"),
        disabled: "interactive.".concat(property, ".gray.disabled")
      },
      tertiary: {
        "default": "interactive.".concat(property, ".gray.normal"),
        highlighted: "interactive.".concat(property, ".gray.normal"),
        disabled: "interactive.".concat(property, ".gray.disabled")
      }
    },
    white: {
      primary: {
        "default": "interactive.".concat(property, ".staticBlack.muted"),
        highlighted: "interactive.".concat(property, ".staticBlack.muted"),
        disabled: "interactive.".concat(property, ".staticBlack.disabled")
      },
      secondary: {
        "default": "interactive.".concat(property, ".staticWhite.normal"),
        highlighted: "interactive.".concat(property, ".staticWhite.normal"),
        disabled: "interactive.".concat(property, ".staticWhite.disabled")
      },
      tertiary: {
        "default": "interactive.".concat(property, ".staticWhite.normal"),
        highlighted: "interactive.".concat(property, ".staticWhite.normal"),
        disabled: "interactive.".concat(property, ".staticWhite.disabled")
      }
    },
    transparent: {
      tertiary: {
        "default": property === 'icon' ? 'interactive.icon.gray.muted' : 'surface.text.gray.normal',
        highlighted: property === 'icon' ? 'interactive.icon.gray.subtle' : 'surface.text.gray.normal',
        disabled: "interactive.".concat(property, ".gray.disabled")
      }
    },
    color: function color(_color) {
      return {
        primary: {
          "default": "interactive.".concat(property, ".staticWhite.normal"),
          highlighted: "interactive.".concat(property, ".staticWhite.normal"),
          disabled: "interactive.".concat(property, ".").concat(_color, ".disabled")
        },
        secondary: {
          "default": "interactive.".concat(property, ".").concat(_color, ".normal"),
          highlighted: "interactive.".concat(property, ".").concat(_color, ".normal"),
          disabled: "interactive.".concat(property, ".").concat(_color, ".disabled")
        }
      };
    }
  };
};
var typography = {
  fonts: {
    size: {
      xsmall: 75,
      small: 75,
      medium: 100,
      large: 200
    }
  },
  lineHeights: {
    xsmall: 75,
    small: 75,
    medium: 100,
    large: 200
  }
};
var minHeight = {
  xsmall: size[28],
  small: size[32],
  medium: size[36],
  large: size[48]
};
var buttonPadding = {
  xsmall: {
    top: 0,
    bottom: 0,
    left: 3,
    right: 3
  },
  small: {
    top: 0,
    bottom: 0,
    left: 3,
    right: 3
  },
  medium: {
    top: 0,
    bottom: 0,
    left: 4,
    right: 4
  },
  large: {
    top: 0,
    bottom: 0,
    left: 5,
    right: 5
  }
};
var buttonBorderRadius = {
  xsmall: 'small',
  small: 'small',
  medium: 'small',
  large: 'medium'
};
var buttonIconOnlyHeightWidth = {
  xsmall: makeSize(size['28']),
  small: makeSize(size['32']),
  medium: makeSize(size['36']),
  large: makeSize(size['48'])
};
var buttonSizeToIconSizeMap = {
  xsmall: 'small',
  small: 'small',
  medium: 'medium',
  large: 'medium'
};
var buttonIconOnlySizeToIconSizeMap = {
  xsmall: 'medium',
  small: 'medium',
  medium: 'medium',
  large: 'medium'
};
var buttonSizeToSpinnerSizeMap = {
  xsmall: 'medium',
  small: 'medium',
  medium: 'medium',
  large: 'large'
};

/**
 * Spinner color mapping based on button variant and color
 */
var spinnerColor = {
  base: {
    primary: 'primary',
    secondary: 'neutral',
    tertiary: 'neutral',
    transparent: 'primary'
  },
  white: {
    primary: 'white',
    secondary: 'white',
    tertiary: 'white'
  },
  positive: {
    primary: 'positive',
    secondary: 'positive'
  },
  negative: {
    primary: 'negative',
    secondary: 'negative'
  },
  notice: {
    primary: 'notice',
    secondary: 'notice'
  },
  information: {
    primary: 'information',
    secondary: 'information'
  },
  neutral: {
    primary: 'neutral',
    secondary: 'neutral'
  }
};

export { backgroundGradient, boxShadow, buttonBorderRadius, buttonIconOnlyHeightWidth, buttonIconOnlySizeToIconSizeMap, buttonPadding, buttonSizeToIconSizeMap, buttonSizeToSpinnerSizeMap, minHeight, spinnerColor, textColor, typography };
//# sourceMappingURL=buttonTokens.js.map