"use strict";
(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_web_components_badge_badge_json"],{

/***/ "./src/tokens/web/components/badge/badge.json"
/*!****************************************************!*\
  !*** ./src/tokens/web/components/badge/badge.json ***!
  \****************************************************/
(module) {

module.exports = /*#__PURE__*/JSON.parse('{"badge":{"meta":{},"mapping":{"background":{"value":"{color.error.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the background color of notification badges (small circular or pill-shaped elements that show numbers or status indicators). This is typically a bright color like red to grab attention.<br>CSS variable: --wm-badge-background"}},"color":{"value":"{color.on-error.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the text color of notification badges (the color of the numbers or text inside the badge). This should contrast well with the background color for readability.<br>CSS variable: --wm-badge-color"}},"min-height":{"value":"20px","type":"space","attributes":{"subtype":"space","description":"Controls the minimum height of notification badges to ensure they\'re always tall enough to be visible and clickable, even when they contain small numbers or text.<br>CSS variable: --wm-badge-min-height"}},"inline":{"padding":{"value":"~\\"calc({space.2.value} * 0.75)\\"","type":"space","attributes":{"subtype":"space","description":"Controls the left and right spacing inside notification badges (the horizontal padding). This creates breathing room around the badge content.<br>CSS variable: --wm-badge-inline-padding"}}},"block":{"padding":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the top and bottom spacing inside notification badges (the vertical padding). This creates breathing room above and below the badge content.<br>CSS variable: --wm-badge-block-padding"}}},"radius":{"value":"{radius.lg.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of notification badges. Larger values make badges more pill-shaped, smaller values make them more rectangular.<br>CSS variable: --wm-badge-radius"}},"font-family":{"value":"{body.small.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for notification badge text. This determines whether the badge numbers/text appear in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-badge-font-family"}},"font-size":{"value":"{body.small.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the text appears in notification badges. Since badges are small, this is typically a small font size to fit the compact space.<br>CSS variable: --wm-badge-font-size"}},"font-weight":{"value":"{font.weight.700.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the badge text appears. Higher values (like 700) make the text thicker and more prominent, which helps badge numbers stand out.<br>CSS variable: --wm-badge-font-weight"}},"line-height":{"value":"1","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines in badge text. A value of 1 keeps lines close together, which is ideal for small badge content.<br>CSS variable: --wm-badge-line-height"}},"letter-spacing":{"value":"{body.small.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual letters in badge text. This can help make small badge text more readable.<br>CSS variable: --wm-badge-letter-spacing"}}},"appearances":{}}}');

/***/ }

}]);