jb-core 0.29.0 → 0.30.0

package/theme/dist/index.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.umd.js","names":[],"sources":["../lib/color/file:/A:/Home/NeveshtAfzar/work/Azad/source/design-system/design-system/modules/jb-core/theme/lib/color/jb-color.ts","../lib/color/file:/A:/Home/NeveshtAfzar/work/Azad/source/design-system/design-system/modules/jb-core/theme/lib/color/utils.ts","../lib/color/file:/A:/Home/NeveshtAfzar/work/Azad/source/design-system/design-system/modules/jb-core/theme/lib/color/constants.ts","../lib/file:/A:/Home/NeveshtAfzar/work/Azad/source/design-system/design-system/modules/jb-core/theme/lib/utils.ts","../../dist/index.js","../lib/color/file:/A:/Home/NeveshtAfzar/work/Azad/source/design-system/design-system/modules/jb-core/theme/lib/color/define-colors.ts","../lib/color/file:/A:/Home/NeveshtAfzar/work/Azad/source/design-system/design-system/modules/jb-core/theme/lib/color/index.ts","../lib/sizes/file:/A:/Home/NeveshtAfzar/work/Azad/source/design-system/design-system/modules/jb-core/theme/lib/sizes/index.ts","../lib/file:/A:/Home/NeveshtAfzar/work/Azad/source/design-system/design-system/modules/jb-core/theme/lib/theme.ts"],"sourcesContent":[null,null,null,null,"function e(e, t, o, n = {}) {\n\tdocument.addEventListener(t, (t) => {\n\t\tt.composedPath().includes(e) && (t.stopPropagation(), t.stopImmediatePropagation(), o(t));\n\t}, {\n\t\tcapture: !0,\n\t\t...n\n\t});\n}\nfunction t(e, t, o) {\n\tconst n = {\n\t\taltKey: t.altKey,\n\t\tbubbles: t.bubbles,\n\t\tcancelable: t.cancelable,\n\t\tcode: t.code,\n\t\tcomposed: t.composed,\n\t\tctrlKey: t.ctrlKey,\n\t\tdetail: t.detail,\n\t\tisComposing: t.isComposing,\n\t\tkey: t.key,\n\t\tlocation: t.location,\n\t\tmetaKey: t.metaKey,\n\t\trepeat: t.repeat,\n\t\tshiftKey: t.shiftKey,\n\t\tview: t.view,\n\t\tcharCode: t.charCode,\n\t\tkeyCode: t.keyCode,\n\t\twhich: t.which,\n\t\t...o\n\t};\n\treturn new KeyboardEvent(e, n);\n}\nfunction o(e, t, o) {\n\tconst n = {\n\t\tbubbles: t.bubbles,\n\t\tcancelable: t.cancelable,\n\t\tcomposed: t.composed,\n\t\tdetail: t.detail,\n\t\tisComposing: t.isComposing,\n\t\tview: t.view,\n\t\twhich: t.which,\n\t\tdata: t.data,\n\t\tdataTransfer: t.dataTransfer,\n\t\tinputType: t.inputType,\n\t\ttargetRanges: \"function\" == typeof t.getTargetRanges ? t.getTargetRanges() : [],\n\t\t...o\n\t};\n\treturn new InputEvent(e, n);\n}\nfunction n(e, t, o) {\n\tconst n = {\n\t\tbubbles: t.bubbles,\n\t\tcancelable: t.cancelable,\n\t\tcomposed: t.composed,\n\t\tdetail: t.detail,\n\t\tview: t.view,\n\t\twhich: t.which,\n\t\taltKey: t.altKey,\n\t\tbutton: t.button,\n\t\tbuttons: t.buttons,\n\t\tclientX: t.clientX,\n\t\tclientY: t.clientY,\n\t\tctrlKey: t.ctrlKey,\n\t\tmetaKey: t.metaKey,\n\t\tshiftKey: t.shiftKey,\n\t\tmovementX: t.movementX,\n\t\tmovementY: t.movementY,\n\t\tscreenX: t.screenX,\n\t\tscreenY: t.screenY,\n\t\trelatedTarget: t.relatedTarget,\n\t\tmodifierAltGraph: t.getModifierState(\"AltGraph\"),\n\t\tmodifierCapsLock: t.getModifierState(\"CapsLock\"),\n\t\tmodifierFn: t.getModifierState(\"Fn\"),\n\t\tmodifierFnLock: t.getModifierState(\"FnLock\"),\n\t\tmodifierHyper: t.getModifierState(\"Hyper\"),\n\t\tmodifierNumLock: t.getModifierState(\"NumLock\"),\n\t\tmodifierScrollLock: t.getModifierState(\"ScrollLock\"),\n\t\tmodifierSuper: t.getModifierState(\"Super\"),\n\t\tmodifierSymbol: t.getModifierState(\"Symbol\"),\n\t\tmodifierSymbolLock: t.getModifierState(\"SymbolLock\"),\n\t\t...o\n\t};\n\treturn new MouseEvent(e, n);\n}\nfunction i(e, t, o) {\n\tconst n = {\n\t\tbubbles: t.bubbles,\n\t\tcancelable: t.cancelable,\n\t\tcomposed: t.composed,\n\t\tdetail: t.detail,\n\t\tview: t.view,\n\t\twhich: t.which,\n\t\trelatedTarget: t.relatedTarget,\n\t\t...o\n\t};\n\treturn new FocusEvent(e, n);\n}\nconst r = () => /Mobi/i.test(window.navigator.userAgent);\nfunction a(e) {\n\treturn \"string\" != typeof e ? \"\" : e.replace(/[۰-۹]/g, function(e) {\n\t\treturn String.fromCharCode(e.charCodeAt(0) - 1728);\n\t});\n}\nfunction c(e) {\n\treturn \"string\" != typeof e && isNaN(e) ? \"\" : e.toString().replace(/[0-9]/g, function(e) {\n\t\treturn String.fromCharCode(e.charCodeAt(0) + 1728);\n\t});\n}\nfunction l(e, t = document) {\n\tconst o = new CSSStyleSheet();\n\treturn o.replaceSync(e), t.adoptedStyleSheets.push(o), o;\n}\nfunction d(e = \"\") {\n\treturn crypto?.randomUUID ? `${e}-${crypto.randomUUID()}` : `${e}-${Date.now()}-${Math.random().toString(36).slice(2)}`;\n}\nfunction s(e, t = !1) {\n\treturn null === e ? t : \"\" === e || \"true\" === e.toLowerCase() || \"false\" !== e.toLowerCase() && Boolean(e);\n}\nexport { i as createFocusEvent, o as createInputEvent, t as createKeyboardEvent, n as createMouseEvent, c as enToFaDigits, a as faToEnDigits, l as injectCss, r as isMobile, e as listenAndSilentEvent, s as parseBooleanAttribute, d as uniqueId };\n\n//# sourceMappingURL=index.js.map",null,null,null,null],"mappings":"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"}
+{"version":3,"file":"index.umd.js","names":["uniqueId"],"sources":["../lib/color/jb-color.ts","../lib/color/utils.ts","../lib/color/constants.ts","../lib/utils.ts","../../dist/index.js","../lib/color/define-colors.ts","../lib/color/index.ts","../lib/sizes/index.ts","../lib/theme.ts"],"sourcesContent":["import type { OklchParams } from \"./types\";\r\n\r\nexport class JBColor {\r\n  lightness:number;\r\n  chroma:number;\r\n  hue:number;\r\n  variableName?:`--${string}`;\r\n  get value(){\r\n    return `oklch(${this.lightness} ${this.chroma} ${this.hue})`;\r\n  }\r\n  constructor(colorParams:OklchParams, variableName?:`--${string}`) {\r\n    this.variableName = variableName;\r\n    this.lightness = colorParams.lightness;\r\n    this.chroma = colorParams.chroma;\r\n    this.hue = colorParams.hue;\r\n  }\r\n}\r\n","import { JBColor } from \"./jb-color\";\r\nimport type { JBColorGroup } from \"./types\";\r\n\r\n//TODO: add DarkMode and LightMode to all the utils functions.\r\n\r\n\r\nexport function getNeutralColor(index: number) {\r\n  return new JBColor({ lightness: (6 * (3 + index * 1.3)) * 0.01, chroma: (14 + (index * 0.09)) * 0.001, hue: 258.36 }, `--jb-neutral-${index}`);\r\n}\r\nexport function getHoverColor(color: JBColor) {\r\n  return new JBColor({ lightness: color.lightness + 0.07, chroma: color.chroma + 0.07, hue: color.hue, }, `${color.variableName!}-hover`);\r\n}\r\nexport function getPressedColor(color: JBColor) {\r\n  return new JBColor({ lightness: color.lightness - 0.1, chroma: color.chroma - 0.05, hue: color.hue, }, `${color.variableName!}-pressed`);\r\n}\r\n\r\nexport function getLighterColor(color: JBColor) {\r\n  // Perceptual lightness increase (curved adjustment)\r\n  const newL = Math.min(color.lightness + 0.12 * (1 - color.lightness), 0.985);\r\n\r\n  // Chroma preservation with gamut safety\r\n  const newC = color.chroma * (1 - 0.15 * (newL - color.lightness));\r\n\r\n  return new JBColor({ lightness: newL, chroma: Number(newC.toFixed(3)), hue: color.hue }, `${color.variableName!}-l`);\r\n}\r\n\r\nexport function getDarkerColor(color: JBColor) {\r\n  // Perceptual lightness decrease (curved adjustment)\r\n  const newL = Math.max(color.lightness - 0.12 * color.lightness, 0.02);\r\n\r\n  // Chroma preservation with gamut safety (slightly increased chroma as we darken)\r\n  const newC = color.chroma * (1 - 0.15 * (newL - color.lightness));\r\n\r\n  return new JBColor({ lightness: newL, chroma: newC, hue: color.hue }, `${color.variableName!}-d`);\r\n}\r\nexport function getSubtleColor(color: JBColor) {\r\n  // High lightness while maintaining color presence\r\n  const newL = Math.min(color.lightness + 0.65 * (1 - color.lightness), 0.93);\r\n\r\n  // Keep substantial chroma but adjusted for lighter tones\r\n  const newC = color.chroma * 0.55 * (1 - 0.08 * (newL - color.lightness));\r\n\r\n  // Optional slight hue tuning for pastel aesthetics\r\n  const hueShift = color.hue >= 70 && color.hue <= 162 ? 5 : -3;\r\n  const newHue = color.hue + hueShift;\r\n\r\n  return new JBColor(\r\n    { lightness: newL, chroma: Number(newC.toFixed(3)), hue: newHue },\r\n    `${color.variableName!}-subtle`\r\n  );\r\n}\r\n/**\r\n * contrast is the color mostly used for text on top of the background. in light mode it is really dark and in dark mode it is really light.\r\n * It is not the same as the text color, and can be used elsewhere too.\r\n */\r\nexport function getContrastColor(color: JBColor) {\r\n  // Fixed contrast parameters\r\n  const LIGHTNESS_DEPTH = 0.35; // How much darker we make the color\r\n  const CHROMA_BOOST = 1.6; // Color intensity multiplier\r\n  const MIN_LIGHTNESS = 0.22; // Darkest allowed value\r\n  const MAX_CHROMA = 0.28;// Prevent over-saturation\r\n\r\n  // Calculate new values\r\n  const newLightness = Math.max(color.lightness - LIGHTNESS_DEPTH, MIN_LIGHTNESS);\r\n  const newChroma = Math.min(color.chroma * CHROMA_BOOST, MAX_CHROMA);\r\n\r\n  // Maintain original hue for color harmony\r\n  return new JBColor(\r\n    {\r\n      lightness: Number(newLightness.toFixed(3)),\r\n      chroma: Number(newChroma.toFixed(3)),\r\n      hue: color.hue\r\n    },\r\n    `${color.variableName!}-contrast`\r\n  );\r\n}\r\n\r\nexport function createColorGroup(color: JBColor): JBColorGroup {\r\n  return {\r\n    main: color,\r\n    hover: getHoverColor(color),\r\n    pressed: getPressedColor(color),\r\n    light: getLighterColor(color),\r\n    dark: getDarkerColor(color),\r\n    subtle: getSubtleColor(color),\r\n    contrast: getContrastColor(color)\r\n  }\r\n}","import { JBColor } from \"./jb-color\";\r\nimport type { JBThemeColors } from \"./types\";\r\nimport { getNeutralColor, createColorGroup } from \"./utils\";\r\n\r\nconst primary = new JBColor({lightness:0.6,chroma:0.26,hue:256},'--jb-primary');\r\nconst secondary = new JBColor({lightness:0.6,chroma:0.26,hue:286},'--jb-secondary');\r\nconst yellow = new JBColor({lightness:0.75,chroma:0.18,hue:70},'--jb-yellow');\r\nconst green = new JBColor({lightness:0.68,chroma:0.1484,hue:162.1},'--jb-green');\r\nconst red = new JBColor({lightness:0.6,chroma:0.22,hue:23.21},'--jb-red');\r\n\r\nexport const defaultColors:JBThemeColors = {\r\n  single:{\r\n    black: new JBColor({lightness:0.14,chroma:0,hue:0},'--jb-black'),\r\n    white: new JBColor({lightness:1,chroma:0,hue:0},'--jb-white'),\r\n    highlight:new JBColor({lightness:0.93,chroma:0.2302,hue:125.18},'--jb-highlight'),\r\n  },\r\n  neutral: [getNeutralColor(0),getNeutralColor(1),getNeutralColor(2),getNeutralColor(3),getNeutralColor(4),getNeutralColor(5),getNeutralColor(6),getNeutralColor(7),getNeutralColor(8),getNeutralColor(9),getNeutralColor(10)],\r\n  primary:createColorGroup(primary),\r\n  secondary:createColorGroup(secondary),\r\n  yellow:createColorGroup(yellow),\r\n  green:createColorGroup(green),\r\n  red:createColorGroup(red),\r\n} as const;\r\n\r\n","export type PropertyDefinitionParameter = PropertyDefinition & {\r\n  value?: string,\r\n}\r\n\r\nexport function registerCssProperty(parameter: PropertyDefinitionParameter) {\r\n  try {\r\n    const { value, ...rest } = parameter;\r\n    if (typeof window.CSS.registerProperty == \"function\") {\r\n      window.CSS.registerProperty({\r\n        ...rest\r\n      });\r\n    }\r\n    setCssProperty(parameter.name, value);\r\n  } catch (e) {\r\n    // if property is already defined or any other type of error\r\n  }\r\n}\r\n\r\nexport function setCssProperty(name: string, value?: string) {\r\n  try {\r\n    if (value) {\r\n      if (!document.documentElement.style.getPropertyValue(name)) {\r\n        document.documentElement.style.setProperty(name, value);\r\n      }\r\n    }\r\n  } catch (e) {\r\n    //\r\n  }\r\n}","function e(e, t, o, n = {}) {\n\tdocument.addEventListener(t, (t) => {\n\t\tt.composedPath().includes(e) && (t.stopPropagation(), t.stopImmediatePropagation(), o(t));\n\t}, {\n\t\tcapture: !0,\n\t\t...n\n\t});\n}\nfunction t(e, t, o) {\n\tconst n = {\n\t\taltKey: t.altKey,\n\t\tbubbles: t.bubbles,\n\t\tcancelable: t.cancelable,\n\t\tcode: t.code,\n\t\tcomposed: t.composed,\n\t\tctrlKey: t.ctrlKey,\n\t\tdetail: t.detail,\n\t\tisComposing: t.isComposing,\n\t\tkey: t.key,\n\t\tlocation: t.location,\n\t\tmetaKey: t.metaKey,\n\t\trepeat: t.repeat,\n\t\tshiftKey: t.shiftKey,\n\t\tview: t.view,\n\t\tcharCode: t.charCode,\n\t\tkeyCode: t.keyCode,\n\t\twhich: t.which,\n\t\t...o\n\t};\n\treturn new KeyboardEvent(e, n);\n}\nfunction o(e, t, o) {\n\tconst n = {\n\t\tbubbles: t.bubbles,\n\t\tcancelable: t.cancelable,\n\t\tcomposed: t.composed,\n\t\tdetail: t.detail,\n\t\tisComposing: t.isComposing,\n\t\tview: t.view,\n\t\twhich: t.which,\n\t\tdata: t.data,\n\t\tdataTransfer: t.dataTransfer,\n\t\tinputType: t.inputType,\n\t\ttargetRanges: \"function\" == typeof t.getTargetRanges ? t.getTargetRanges() : [],\n\t\t...o\n\t};\n\treturn new InputEvent(e, n);\n}\nfunction n(e, t, o) {\n\tconst n = {\n\t\tbubbles: t.bubbles,\n\t\tcancelable: t.cancelable,\n\t\tcomposed: t.composed,\n\t\tdetail: t.detail,\n\t\tview: t.view,\n\t\twhich: t.which,\n\t\taltKey: t.altKey,\n\t\tbutton: t.button,\n\t\tbuttons: t.buttons,\n\t\tclientX: t.clientX,\n\t\tclientY: t.clientY,\n\t\tctrlKey: t.ctrlKey,\n\t\tmetaKey: t.metaKey,\n\t\tshiftKey: t.shiftKey,\n\t\tmovementX: t.movementX,\n\t\tmovementY: t.movementY,\n\t\tscreenX: t.screenX,\n\t\tscreenY: t.screenY,\n\t\trelatedTarget: t.relatedTarget,\n\t\tmodifierAltGraph: t.getModifierState(\"AltGraph\"),\n\t\tmodifierCapsLock: t.getModifierState(\"CapsLock\"),\n\t\tmodifierFn: t.getModifierState(\"Fn\"),\n\t\tmodifierFnLock: t.getModifierState(\"FnLock\"),\n\t\tmodifierHyper: t.getModifierState(\"Hyper\"),\n\t\tmodifierNumLock: t.getModifierState(\"NumLock\"),\n\t\tmodifierScrollLock: t.getModifierState(\"ScrollLock\"),\n\t\tmodifierSuper: t.getModifierState(\"Super\"),\n\t\tmodifierSymbol: t.getModifierState(\"Symbol\"),\n\t\tmodifierSymbolLock: t.getModifierState(\"SymbolLock\"),\n\t\t...o\n\t};\n\treturn new MouseEvent(e, n);\n}\nfunction i(e, t, o) {\n\tconst n = {\n\t\tbubbles: t.bubbles,\n\t\tcancelable: t.cancelable,\n\t\tcomposed: t.composed,\n\t\tdetail: t.detail,\n\t\tview: t.view,\n\t\twhich: t.which,\n\t\trelatedTarget: t.relatedTarget,\n\t\t...o\n\t};\n\treturn new FocusEvent(e, n);\n}\nconst r = () => /Mobi/i.test(window.navigator.userAgent);\nfunction a(e) {\n\treturn \"string\" != typeof e ? \"\" : e.replace(/[۰-۹]/g, function(e) {\n\t\treturn String.fromCharCode(e.charCodeAt(0) - 1728);\n\t});\n}\nfunction c(e) {\n\treturn \"string\" != typeof e && isNaN(e) ? \"\" : e.toString().replace(/[0-9]/g, function(e) {\n\t\treturn String.fromCharCode(e.charCodeAt(0) + 1728);\n\t});\n}\nfunction l(e, t = document) {\n\tconst o = new CSSStyleSheet();\n\treturn o.replaceSync(e), t.adoptedStyleSheets.push(o), o;\n}\nfunction d(e = \"\") {\n\treturn crypto?.randomUUID ? `${e}-${crypto.randomUUID()}` : `${e}-${Date.now()}-${Math.random().toString(36).slice(2)}`;\n}\nfunction s(e, t = !1) {\n\treturn null === e ? t : \"\" === e || \"true\" === e.toLowerCase() || \"false\" !== e.toLowerCase() && Boolean(e);\n}\nexport { i as createFocusEvent, o as createInputEvent, t as createKeyboardEvent, n as createMouseEvent, c as enToFaDigits, a as faToEnDigits, l as injectCss, r as isMobile, e as listenAndSilentEvent, s as parseBooleanAttribute, d as uniqueId };\n\n//# sourceMappingURL=index.js.map","import { registerCssProperty } from \"../utils\";\r\nimport type { JBColor } from \"./jb-color\";\r\nimport { uniqueId } from \"jb-core\";\r\nimport type { JBColorGroup, JBThemeColors } from \"./types\";\r\n\r\nfunction defineColor(color:JBColor , name?:string){\r\nregisterCssProperty({\r\n    name: name??color.variableName??`--${uniqueId()}`,\r\n    syntax: \"<color>\",\r\n    inherits: true,\r\n    initialValue: color.value,\r\n  });\r\n}\r\nfunction defineColorGroup(group:JBColorGroup){\r\n  defineColor(group.main);\r\n  defineColor(group.dark);\r\n  defineColor(group.light);\r\n  defineColor(group.contrast);\r\n  defineColor(group.hover);\r\n  defineColor(group.pressed);\r\n  defineColor(group.subtle);\r\n}\r\nexport function defineColorCodes(colors:JBThemeColors){\r\n  defineColor(colors.neutral[0],'--jb-neutral');\r\n  defineColorGroup(colors.primary);\r\n  defineColorGroup(colors.secondary);\r\n  defineColorGroup(colors.red);\r\n  defineColorGroup(colors.red);\r\n  defineColorGroup(colors.green);\r\n  defineColorGroup(colors.yellow);\r\n  defineColor(colors.single.black);\r\n  defineColor(colors.single.white);\r\n  defineColor(colors.single.highlight);\r\n  for(let i=1;i<=10;i++){\r\n    defineColor(colors.neutral[i])\r\n  }\r\n}\r\n\r\nexport function defineTextColors(colors:JBThemeColors) {\r\n  defineColor(colors.single.black, \"--jb-text-primary\");\r\n  defineColor(colors.neutral[7], \"--jb-text-secondary\");\r\n  defineColor(colors.single.white, \"--jb-text-contrast\");\r\n}\r\n","import { defaultColors } from \"./constants\";\r\nimport { defineColorCodes, defineTextColors } from \"./define-colors\";\r\nimport { JBColor } from \"./jb-color\";\r\nimport type { ColorGroupsKey, JBColorGroup, JBThemeColors, OklchParams } from \"./types\";\r\nimport { createColorGroup } from \"./utils\";\r\nexport * from './utils';\r\nexport * from \"./jb-color\";\r\nexport * from \"./types\";\r\n\r\n\r\nexport { defaultColors };\r\n\r\nexport function defineColors() {\r\n  defineColorCodes(defaultColors);\r\n  defineTextColors(defaultColors);\r\n}\r\n\r\n\r\nexport type SetThemeColorParameter = {[key in ColorGroupsKey]?:JBColorGroup}\r\nexport function setColors(colors: SetThemeColorParameter) {\r\n  function setColor(color: JBColor) {\r\n    document.documentElement.style.setProperty(color.variableName as string, color.value);\r\n  }\r\n  function setColorGroup(group:JBColorGroup){\r\n    setColor(group.main);\r\n    setColor(group.light);\r\n    setColor(group.dark);\r\n    setColor(group.contrast);\r\n    setColor(group.subtle);\r\n    setColor(group.hover);\r\n    setColor(group.pressed);\r\n  }\r\n  colors.primary && setColorGroup(colors.primary);\r\n  colors.secondary && setColorGroup(colors.secondary);\r\n  colors.green && setColorGroup(colors.green);\r\n  colors.red && setColorGroup(colors.red);\r\n  colors.yellow && setColorGroup(colors.yellow);\r\n}\r\n\r\nexport type CreateThemeColorParameter = {[key in ColorGroupsKey]?:OklchParams}\r\n\r\nexport function createThemeColor(parameter: CreateThemeColorParameter): Partial<JBThemeColors> {\r\n  const themeColors: Partial<JBThemeColors> = {};\r\n  Object.keys(parameter).forEach((key: string) => {\r\n    const baseColor = new JBColor(parameter[key as ColorGroupsKey]!, `---jb-${key}`);\r\n    const colorGroup = createColorGroup(baseColor);\r\n    themeColors[key as ColorGroupsKey] = colorGroup;\r\n  });\r\n  return themeColors;\r\n}","import { registerCssProperty } from \"../utils.js\";\n\nexport function defineSizes() {\n  defineRadiusVariables();\n  defineControlHeightVariables();\n}\nfunction defineRadiusVariables() {\n  // we use px instead of rem because css variables are not support rem as default value and we need to set rem value in a root element\n  registerCssProperty({\n    name: \"--jb-radius\",\n    inherits: true,\n    value: \"1rem\",\n    // it define in @property so it should remain px not rem\n    initialValue: \"16px\",\n    syntax: \"<length-percentage>\",\n  });\n  registerCssProperty({\n    name: \"--jb-radius-xs\",\n    inherits: true,\n    value: `0.5rem`,\n    initialValue: \"8px\",\n    syntax: \"<length-percentage>\",\n  });\n  registerCssProperty({\n    name: \"--jb-radius-sm\",\n    inherits: true,\n    value: `0.75rem`,\n    initialValue: \"12px\",\n    syntax: \"<length-percentage>\",\n  });\n  registerCssProperty({\n    name: \"--jb-radius-lg\",\n    inherits: true,\n    value: `1.25rem`,\n    initialValue: \"20px\",\n    syntax: \"<length-percentage>\",\n  });\n  registerCssProperty({\n    name: \"--jb-radius-xl\",\n    inherits: true,\n    value: `1.5rem`,\n    initialValue: \"24px\",\n    syntax: \"<length-percentage>\",\n  });\n}\n\nfunction defineControlHeightVariables() {\n  registerCssProperty({\n    name: \"--jb-control-height-xs\",\n    inherits: true,\n    value: \"1.5rem\",\n    initialValue: \"24px\",\n    syntax: \"<length-percentage>\",\n  });\n  registerCssProperty({\n    name: \"--jb-control-height-sm\",\n    inherits: true,\n    value: \"2rem\",\n    initialValue: \"32px\",\n    syntax: \"<length-percentage>\",\n  });\n  registerCssProperty({\n    name: \"--jb-control-height-md\",\n    inherits: true,\n    value: \"2.5rem\",\n    initialValue: \"40px\",\n    syntax: \"<length-percentage>\",\n  });\n  registerCssProperty({\n    name: \"--jb-control-height-lg\",\n    inherits: true,\n    value: \"3rem\",\n    initialValue: \"48px\",\n    syntax: \"<length-percentage>\",\n  });\n  registerCssProperty({\n    name: \"--jb-control-height-xl\",\n    inherits: true,\n    value: \"4rem\",\n    initialValue: \"64px\",\n    syntax: \"<length-percentage>\",\n  });\n}\n","import { defineColors } from \"./color/index.js\";\r\nimport { defineSizes } from \"./sizes/index.js\";\r\n\r\nexport function registerDefaultVariables() {\r\n  defineSizes();\r\n  defineColors();\r\n}"],"mappings":"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"}

package/theme/lib/sizes/index.ts

@@ -1,43 +1,83 @@
-import { registerCssProperty } from "../utils.js";
-
-export function defineSizes(){  
-  defineRadiusVariables();
-}
-function defineRadiusVariables(){
-  // we use px instead of rem because css variables are not support rem as default value and we need to set rem value in a root element
-  registerCssProperty({
-    name:'--jb-radius',
-    inherits:true,
-    value:'1rem',
-    initialValue:'16px',
-    syntax:'<length-percentage>',
-  });
-  registerCssProperty({
-    name:'--jb-radius-xs',
-    inherits:true,
-    value:`0.5rem`,
-    initialValue:'8px',
-    syntax:'<length-percentage>'
-  });
-  registerCssProperty({
-    name:'--jb-radius-sm',
-    inherits:true,
-    value:`0.75rem`,
-    initialValue:'12px',
-    syntax:'<length-percentage>'
-  });
-  registerCssProperty({
-    name:'--jb-radius-lg',
-    inherits:true,
-    value:`1.25rem`,
-    initialValue:'20px',
-    syntax:'<length-percentage>'
-  });
-  registerCssProperty({
-    name:'--jb-radius-xl',
-    inherits:true,
-    value:`1.5rem`,
-    initialValue:'24px',
-    syntax:'<length-percentage>'
-  });
-}
+import { registerCssProperty } from "../utils.js";
+
+export function defineSizes() {
+  defineRadiusVariables();
+  defineControlHeightVariables();
+}
+function defineRadiusVariables() {
+  // we use px instead of rem because css variables are not support rem as default value and we need to set rem value in a root element
+  registerCssProperty({
+    name: "--jb-radius",
+    inherits: true,
+    value: "1rem",
+    // it define in @property so it should remain px not rem
+    initialValue: "16px",
+    syntax: "<length-percentage>",
+  });
+  registerCssProperty({
+    name: "--jb-radius-xs",
+    inherits: true,
+    value: `0.5rem`,
+    initialValue: "8px",
+    syntax: "<length-percentage>",
+  });
+  registerCssProperty({
+    name: "--jb-radius-sm",
+    inherits: true,
+    value: `0.75rem`,
+    initialValue: "12px",
+    syntax: "<length-percentage>",
+  });
+  registerCssProperty({
+    name: "--jb-radius-lg",
+    inherits: true,
+    value: `1.25rem`,
+    initialValue: "20px",
+    syntax: "<length-percentage>",
+  });
+  registerCssProperty({
+    name: "--jb-radius-xl",
+    inherits: true,
+    value: `1.5rem`,
+    initialValue: "24px",
+    syntax: "<length-percentage>",
+  });
+}
+
+function defineControlHeightVariables() {
+  registerCssProperty({
+    name: "--jb-control-height-xs",
+    inherits: true,
+    value: "1.5rem",
+    initialValue: "24px",
+    syntax: "<length-percentage>",
+  });
+  registerCssProperty({
+    name: "--jb-control-height-sm",
+    inherits: true,
+    value: "2rem",
+    initialValue: "32px",
+    syntax: "<length-percentage>",
+  });
+  registerCssProperty({
+    name: "--jb-control-height-md",
+    inherits: true,
+    value: "2.5rem",
+    initialValue: "40px",
+    syntax: "<length-percentage>",
+  });
+  registerCssProperty({
+    name: "--jb-control-height-lg",
+    inherits: true,
+    value: "3rem",
+    initialValue: "48px",
+    syntax: "<length-percentage>",
+  });
+  registerCssProperty({
+    name: "--jb-control-height-xl",
+    inherits: true,
+    value: "4rem",
+    initialValue: "64px",
+    syntax: "<length-percentage>",
+  });
+}

package/theme/stories/sizes.mdx

@@ -29,8 +29,18 @@ you can easily change every css variable value like any other css variable see [
 
 jb design system by default is a Modern and have a Round corner but you can change it base on your design language.
 
-- `--jb-radius`:1rem (16px) - default border radius used in inputs or buttons.
-- `--jb-radius-xs`:0.5rem (8px) - for extra small button or some small elements
-- `--jb-radius-sm`:0.75rem (12px) - for small  buttons
-- `--jb-radius-lg`:1.25rem (20px) - for big buttons
-- `--jb-radius-xl`:1.25rem (24px) - for extra large buttons and Box elements like modals content corner
+- `--jb-radius`:1rem (1rem) - default border radius used in inputs or buttons.
+- `--jb-radius-xs`:0.5rem (0.5rem) - for extra small button or some small elements
+- `--jb-radius-sm`:0.75rem (0.75rem) - for small  buttons
+- `--jb-radius-lg`:1.25rem (1.25rem) - for big buttons
+- `--jb-radius-xl`:1.5rem (1.5rem) - for extra large buttons and Box elements like modals content corner
+
+## control height
+
+Control height tokens keep interactive controls such as buttons, inputs, and selects aligned across the design system. Component-specific height variables can still override these shared defaults.
+
+- `--jb-control-height-xs`:1.5rem (24px) - extra-small controls
+- `--jb-control-height-sm`:2rem (32px) - small controls
+- `--jb-control-height-md`:2.5rem (40px) - medium and default controls
+- `--jb-control-height-lg`:3rem (48px) - large controls
+- `--jb-control-height-xl`:4rem (64px) - extra-large controls