@bitrise/bitkit-v2 0.3.252 → 0.3.253-beta.1710

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (123) hide show
  1. package/AGENTS.md +6 -0
  2. package/dist/components/BitkitActionBar/BitkitActionBar.js +1 -1
  3. package/dist/components/BitkitActionBar/BitkitActionBar.js.map +1 -1
  4. package/dist/components/BitkitAlert/BitkitAlert.js +2 -2
  5. package/dist/components/BitkitAlert/BitkitAlert.js.map +1 -1
  6. package/dist/components/BitkitAvatar/BitkitAvatar.d.ts +3 -4
  7. package/dist/components/BitkitAvatar/BitkitAvatar.js +4 -6
  8. package/dist/components/BitkitAvatar/BitkitAvatar.js.map +1 -1
  9. package/dist/components/BitkitBadge/BitkitBadge.d.ts +2 -5
  10. package/dist/components/BitkitBadge/BitkitBadge.js.map +1 -1
  11. package/dist/components/BitkitCloseButton/BitkitCloseButton.d.ts +1 -1
  12. package/dist/components/BitkitCloseButton/BitkitCloseButton.js +6 -3
  13. package/dist/components/BitkitCloseButton/BitkitCloseButton.js.map +1 -1
  14. package/dist/components/BitkitColorButton/BitkitColorButton.d.ts +1 -1
  15. package/dist/components/BitkitColorButton/BitkitColorButton.js.map +1 -1
  16. package/dist/components/BitkitLabel/BitkitLabel.js +1 -1
  17. package/dist/components/BitkitLabel/BitkitLabel.js.map +1 -1
  18. package/dist/components/BitkitList/BitkitList.d.ts +1 -1
  19. package/dist/components/BitkitList/BitkitList.js +6 -6
  20. package/dist/components/BitkitList/BitkitList.js.map +1 -1
  21. package/dist/components/BitkitMarkdown/BitkitMarkdown.js +1 -1
  22. package/dist/components/BitkitMarkdown/BitkitMarkdown.js.map +1 -1
  23. package/dist/components/BitkitMultiselect/BitkitMultiselect.js +3 -3
  24. package/dist/components/BitkitMultiselect/BitkitMultiselect.js.map +1 -1
  25. package/dist/components/BitkitPageFooter/BitkitPageFooter.d.ts +2 -2
  26. package/dist/components/BitkitPageFooter/BitkitPageFooter.js +7 -7
  27. package/dist/components/BitkitPageFooter/BitkitPageFooter.js.map +1 -1
  28. package/dist/components/BitkitRadio/BitkitRadio.js +1 -1
  29. package/dist/components/BitkitRadio/BitkitRadio.js.map +1 -1
  30. package/dist/components/BitkitRibbon/BitkitRibbon.d.ts +1 -1
  31. package/dist/components/BitkitRibbon/BitkitRibbon.js +4 -6
  32. package/dist/components/BitkitRibbon/BitkitRibbon.js.map +1 -1
  33. package/dist/components/BitkitSearchInput/BitkitSearchInput.js +1 -1
  34. package/dist/components/BitkitSearchInput/BitkitSearchInput.js.map +1 -1
  35. package/dist/components/BitkitSwitch/components/BitkitSwitchReadOnly.js +2 -2
  36. package/dist/components/BitkitSwitch/components/BitkitSwitchReadOnly.js.map +1 -1
  37. package/dist/components/BitkitTable/BitkitSortableColumnHeader.js +1 -1
  38. package/dist/components/BitkitTable/BitkitSortableColumnHeader.js.map +1 -1
  39. package/dist/components/BitkitTag/BitkitTag.js +1 -1
  40. package/dist/components/BitkitTag/BitkitTag.js.map +1 -1
  41. package/dist/components/BitkitToast/BitkitToaster.js +2 -2
  42. package/dist/components/BitkitToast/BitkitToaster.js.map +1 -1
  43. package/dist/components/BitkitTooltip/BitkitTooltip.js +1 -1
  44. package/dist/components/BitkitTooltip/BitkitTooltip.js.map +1 -1
  45. package/dist/components/common/notificationMaps.d.ts +8 -1
  46. package/dist/components/common/notificationMaps.js.map +1 -1
  47. package/dist/docs/shared.d.ts +1 -1
  48. package/dist/theme/common/AlertAndToast.common.js +1 -1
  49. package/dist/theme/common/AlertAndToast.common.js.map +1 -1
  50. package/dist/theme/global-css.js +1 -1
  51. package/dist/theme/global-css.js.map +1 -1
  52. package/dist/theme/recipes/Badge.recipe.d.ts +39 -5
  53. package/dist/theme/recipes/Badge.recipe.js +77 -20
  54. package/dist/theme/recipes/Badge.recipe.js.map +1 -1
  55. package/dist/theme/recipes/Button.recipe.js +12 -12
  56. package/dist/theme/recipes/Button.recipe.js.map +1 -1
  57. package/dist/theme/recipes/CloseButton.recipe.d.ts +68 -0
  58. package/dist/theme/recipes/CloseButton.recipe.js +56 -17
  59. package/dist/theme/recipes/CloseButton.recipe.js.map +1 -1
  60. package/dist/theme/recipes/ColorButton.recipe.d.ts +93 -0
  61. package/dist/theme/recipes/ColorButton.recipe.js +75 -30
  62. package/dist/theme/recipes/ColorButton.recipe.js.map +1 -1
  63. package/dist/theme/recipes/DefinitionTooltip.recipe.js +2 -2
  64. package/dist/theme/recipes/DefinitionTooltip.recipe.js.map +1 -1
  65. package/dist/theme/recipes/Link.recipe.d.ts +1 -1
  66. package/dist/theme/recipes/Link.recipe.js +1 -1
  67. package/dist/theme/recipes/Link.recipe.js.map +1 -1
  68. package/dist/theme/recipes/Separator.recipe.js +1 -1
  69. package/dist/theme/recipes/Separator.recipe.js.map +1 -1
  70. package/dist/theme/recipes/Skeleton.recipe.js +2 -2
  71. package/dist/theme/recipes/Skeleton.recipe.js.map +1 -1
  72. package/dist/theme/recipes/index.d.ts +201 -6
  73. package/dist/theme/semantic-tokens/index.d.ts +1772 -1
  74. package/dist/theme/semantic-tokens/semanticColors.d.ts +1772 -1
  75. package/dist/theme/semantic-tokens/semanticColors.js +356 -472
  76. package/dist/theme/semantic-tokens/semanticColors.js.map +1 -1
  77. package/dist/theme/slot-recipes/Avatar.recipe.d.ts +56 -0
  78. package/dist/theme/slot-recipes/Avatar.recipe.js +40 -3
  79. package/dist/theme/slot-recipes/Avatar.recipe.js.map +1 -1
  80. package/dist/theme/slot-recipes/Collapsible.recipe.js +1 -1
  81. package/dist/theme/slot-recipes/Collapsible.recipe.js.map +1 -1
  82. package/dist/theme/slot-recipes/Dialog.recipe.js +1 -1
  83. package/dist/theme/slot-recipes/Dialog.recipe.js.map +1 -1
  84. package/dist/theme/slot-recipes/Drawer.recipe.js +2 -2
  85. package/dist/theme/slot-recipes/Drawer.recipe.js.map +1 -1
  86. package/dist/theme/slot-recipes/EmptyState.recipe.d.ts +2 -2
  87. package/dist/theme/slot-recipes/EmptyState.recipe.js +3 -3
  88. package/dist/theme/slot-recipes/EmptyState.recipe.js.map +1 -1
  89. package/dist/theme/slot-recipes/MarkdownCard.recipe.d.ts +3 -3
  90. package/dist/theme/slot-recipes/MarkdownCard.recipe.js +4 -4
  91. package/dist/theme/slot-recipes/MarkdownCard.recipe.js.map +1 -1
  92. package/dist/theme/slot-recipes/NoteCard.recipe.d.ts +2 -2
  93. package/dist/theme/slot-recipes/NoteCard.recipe.js +8 -8
  94. package/dist/theme/slot-recipes/NoteCard.recipe.js.map +1 -1
  95. package/dist/theme/slot-recipes/OverflowContent.recipe.js +1 -1
  96. package/dist/theme/slot-recipes/OverflowContent.recipe.js.map +1 -1
  97. package/dist/theme/slot-recipes/PageFooter.recipe.d.ts +4 -4
  98. package/dist/theme/slot-recipes/PageFooter.recipe.js +5 -5
  99. package/dist/theme/slot-recipes/PageFooter.recipe.js.map +1 -1
  100. package/dist/theme/slot-recipes/Ribbon.recipe.d.ts +39 -1
  101. package/dist/theme/slot-recipes/Ribbon.recipe.js +29 -5
  102. package/dist/theme/slot-recipes/Ribbon.recipe.js.map +1 -1
  103. package/dist/theme/slot-recipes/Tabs.recipe.d.ts +1 -1
  104. package/dist/theme/slot-recipes/Tabs.recipe.js +1 -1
  105. package/dist/theme/slot-recipes/Tabs.recipe.js.map +1 -1
  106. package/dist/theme/slot-recipes/Tag.recipe.d.ts +44 -0
  107. package/dist/theme/slot-recipes/Tag.recipe.js +38 -7
  108. package/dist/theme/slot-recipes/Tag.recipe.js.map +1 -1
  109. package/dist/theme/slot-recipes/TagsInput.recipe.js +5 -5
  110. package/dist/theme/slot-recipes/TagsInput.recipe.js.map +1 -1
  111. package/dist/theme/slot-recipes/Tooltip.recipe.d.ts +2 -2
  112. package/dist/theme/slot-recipes/Tooltip.recipe.js +3 -3
  113. package/dist/theme/slot-recipes/Tooltip.recipe.js.map +1 -1
  114. package/dist/theme/slot-recipes/index.d.ts +153 -15
  115. package/dist/theme/slot-recipes/index.js +1 -1
  116. package/dist/theme/tokens/colors.d.ts +4 -846
  117. package/dist/theme/tokens/colors.js +22 -137
  118. package/dist/theme/tokens/colors.js.map +1 -1
  119. package/dist/theme/tokens/index.d.ts +15 -312
  120. package/dist/theme/tokens/index.js +1 -1
  121. package/package.json +6 -5
  122. package/scripts/postinstall.cjs +8 -0
  123. package/scripts/prune-color-tokens.cjs +78 -0
package/dist/theme/slot-recipes/TagsInput.recipe.js CHANGED
@@ -79,8 +79,8 @@ var tagsInputSlotRecipe = defineSlotRecipe({
79
79
  },
80
80
  itemPreview: {
81
81
  alignItems: "center",
82
- background: "sys/neutral/subtle",
83
- borderColor: "sys/neutral/muted",
82
+ background: "color/neutral/subtle",
83
+ borderColor: "color/neutral/muted",
84
84
  borderRadius: "4",
85
85
  borderStyle: "solid",
86
86
  borderWidth: rem(1),
@@ -94,7 +94,7 @@ var tagsInputSlotRecipe = defineSlotRecipe({
94
94
  paddingInlineEnd: "1",
95
95
  paddingInlineStart: "8",
96
96
  textStyle: "comp/tag/sm",
97
- _highlighted: { background: "sys/neutral/moderate" },
97
+ _highlighted: { background: "color/neutral/moderate" },
98
98
  _disabled: {
99
99
  background: "background/disabled",
100
100
  borderColor: "border/disabled",
@@ -123,7 +123,7 @@ var tagsInputSlotRecipe = defineSlotRecipe({
123
123
  height: "20",
124
124
  justifyContent: "center",
125
125
  width: "20",
126
- _hover: { background: "sys/neutral/moderate" },
126
+ _hover: { background: "color/neutral/moderate" },
127
127
  _disabled: {
128
128
  cursor: "not-allowed",
129
129
  opacity: "0.5"
@@ -137,7 +137,7 @@ var tagsInputSlotRecipe = defineSlotRecipe({
137
137
  display: "flex",
138
138
  justifyContent: "center",
139
139
  padding: "4",
140
- _hover: { background: "sys/neutral/moderate" },
140
+ _hover: { background: "color/neutral/moderate" },
141
141
  _disabled: {
142
142
  cursor: "not-allowed",
143
143
  opacity: "0.5"
package/dist/theme/slot-recipes/TagsInput.recipe.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TagsInput.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/TagsInput.recipe.ts"],"sourcesContent":["import { tagsInputAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst extendedTagsInputAnatomy = tagsInputAnatomy.extendWith('tagsBlock', 'suffixBlock');\n\nconst tagsInputSlotRecipe = defineSlotRecipe({\n className: 'tags-input',\n slots: extendedTagsInputAnatomy.keys(),\n base: {\n root: {\n width: 'full',\n },\n control: {\n alignItems: 'flex-start',\n background: 'background/primary',\n borderColor: 'border/regular',\n borderRadius: '4',\n borderStyle: 'solid',\n borderWidth: rem(1),\n boxShadow: 'inset/field',\n display: 'flex',\n height: rem(88),\n overflowY: 'auto',\n transition: 'border-color 200ms',\n _focusWithin: {\n focusRing: 'outside',\n },\n _hover: {\n borderColor: 'border/hover',\n },\n _invalid: {\n borderColor: 'border/error',\n _hover: {\n borderColor: 'border/error',\n },\n },\n _disabled: {\n background: 'background/disabled',\n borderColor: 'border/disabled',\n cursor: 'not-allowed',\n _hover: {\n borderColor: 'border/disabled',\n },\n },\n _readOnly: {\n background: 'background/disabled',\n borderColor: 'border/disabled',\n _hover: {\n borderColor: 'border/disabled',\n },\n },\n },\n tagsBlock: {\n alignContent: 'flex-start',\n alignItems: 'center',\n display: 'flex',\n flex: '1',\n flexWrap: 'wrap',\n gap: '8',\n minWidth: 0,\n },\n suffixBlock: {\n alignItems: 'center',\n alignSelf: 'flex-start',\n display: 'flex',\n flexShrink: '0',\n gap: '8',\n paddingInline: '4',\n position: 'sticky',\n top: 0,\n '&:has(button)': {\n paddingInline: 0,\n },\n },\n input: {\n background: 'transparent',\n color: 'input/text/inputValue',\n flex: '1',\n lineHeight: 'normal',\n minWidth: rem(80),\n outline: 'none',\n // Per Figma, the empty-state placeholder is offset 4px further from the control's\n // left edge than a filled-state tag chip. That 4px comes from an \"input\" layer in\n // Figma that wraps the typing area — in our recipe we apply it as a left padding on\n // the typing <input> itself so tag chips (which live alongside but not inside the\n // input) remain flush with the control's padding.\n paddingInlineStart: '4',\n _placeholder: {\n color: 'input/text/placeholder',\n },\n _disabled: {\n cursor: 'not-allowed',\n _placeholder: {\n color: 'text/disabled',\n },\n },\n _readOnly: {\n display: 'none',\n },\n },\n item: {\n display: 'flex',\n maxWidth: '100%',\n minWidth: 0,\n },\n itemPreview: {\n alignItems: 'center',\n background: 'sys/neutral/subtle',\n borderColor: 'sys/neutral/muted',\n borderRadius: '4',\n borderStyle: 'solid',\n borderWidth: rem(1),\n color: 'text/primary',\n display: 'flex',\n gap: '4',\n height: '24',\n maxWidth: '100%',\n overflow: 'hidden',\n paddingBlock: '2',\n paddingInlineEnd: '1',\n paddingInlineStart: '8',\n textStyle: 'comp/tag/sm',\n _highlighted: {\n background: 'sys/neutral/moderate',\n },\n _disabled: {\n background: 'background/disabled',\n borderColor: 'border/disabled',\n color: 'text/on-disabled',\n },\n '&:not(:has(button))': {\n paddingInlineEnd: '8',\n },\n },\n itemText: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n },\n itemInput: {\n background: 'transparent',\n height: '24',\n minWidth: '20',\n outline: 'none',\n },\n itemDeleteTrigger: {\n alignItems: 'center',\n borderRadius: '2',\n color: 'icon/secondary',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: '0',\n height: '20',\n justifyContent: 'center',\n width: '20',\n _hover: {\n background: 'sys/neutral/moderate',\n },\n _disabled: {\n cursor: 'not-allowed',\n opacity: '0.5',\n },\n },\n clearTrigger: {\n alignItems: 'center',\n borderRadius: '4',\n color: 'icon/secondary',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n padding: '4',\n _hover: {\n background: 'sys/neutral/moderate',\n },\n _disabled: {\n cursor: 'not-allowed',\n opacity: '0.5',\n },\n },\n },\n variants: {\n size: {\n // Padding values below match the Figma control + input layer spec exactly\n // (see FRONTEND-572 thread / Figma node 1941:3510 for md, 1941:3487 for lg).\n // The outer control carries the size-specific padding; the inner tagsBlock adds a\n // constant 4px horizontal padding (set in the base) around the content regardless of size.\n md: {\n control: {\n paddingInlineEnd: '12',\n paddingInlineStart: '8',\n },\n // paddingBlock lives on tagsBlock (not control) so the suffixBlock (clear button) sits\n // at the control's inner top and its vertical center lines up with the first tag-row /\n // placeholder center — matches Figma's filled-state layout.\n tagsBlock: {\n paddingBlock: '8',\n },\n suffixBlock: {\n height: '40',\n },\n input: {\n height: '24',\n fontSize: '0.875rem',\n fontWeight: '400',\n lineHeight: 'normal',\n },\n },\n lg: {\n control: {\n paddingInlineEnd: '16',\n paddingInlineStart: '12',\n },\n tagsBlock: {\n paddingBlock: '12',\n },\n suffixBlock: {\n height: '48',\n },\n input: {\n fontSize: '1rem',\n fontWeight: '400',\n lineHeight: 'normal',\n },\n },\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n});\n\nexport default tagsInputSlotRecipe;\n"],"mappings":"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"}
1
+ {"version":3,"file":"TagsInput.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/TagsInput.recipe.ts"],"sourcesContent":["import { tagsInputAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst extendedTagsInputAnatomy = tagsInputAnatomy.extendWith('tagsBlock', 'suffixBlock');\n\nconst tagsInputSlotRecipe = defineSlotRecipe({\n className: 'tags-input',\n slots: extendedTagsInputAnatomy.keys(),\n base: {\n root: {\n width: 'full',\n },\n control: {\n alignItems: 'flex-start',\n background: 'background/primary',\n borderColor: 'border/regular',\n borderRadius: '4',\n borderStyle: 'solid',\n borderWidth: rem(1),\n boxShadow: 'inset/field',\n display: 'flex',\n height: rem(88),\n overflowY: 'auto',\n transition: 'border-color 200ms',\n _focusWithin: {\n focusRing: 'outside',\n },\n _hover: {\n borderColor: 'border/hover',\n },\n _invalid: {\n borderColor: 'border/error',\n _hover: {\n borderColor: 'border/error',\n },\n },\n _disabled: {\n background: 'background/disabled',\n borderColor: 'border/disabled',\n cursor: 'not-allowed',\n _hover: {\n borderColor: 'border/disabled',\n },\n },\n _readOnly: {\n background: 'background/disabled',\n borderColor: 'border/disabled',\n _hover: {\n borderColor: 'border/disabled',\n },\n },\n },\n tagsBlock: {\n alignContent: 'flex-start',\n alignItems: 'center',\n display: 'flex',\n flex: '1',\n flexWrap: 'wrap',\n gap: '8',\n minWidth: 0,\n },\n suffixBlock: {\n alignItems: 'center',\n alignSelf: 'flex-start',\n display: 'flex',\n flexShrink: '0',\n gap: '8',\n paddingInline: '4',\n position: 'sticky',\n top: 0,\n '&:has(button)': {\n paddingInline: 0,\n },\n },\n input: {\n background: 'transparent',\n color: 'input/text/inputValue',\n flex: '1',\n lineHeight: 'normal',\n minWidth: rem(80),\n outline: 'none',\n // Per Figma, the empty-state placeholder is offset 4px further from the control's\n // left edge than a filled-state tag chip. That 4px comes from an \"input\" layer in\n // Figma that wraps the typing area — in our recipe we apply it as a left padding on\n // the typing <input> itself so tag chips (which live alongside but not inside the\n // input) remain flush with the control's padding.\n paddingInlineStart: '4',\n _placeholder: {\n color: 'input/text/placeholder',\n },\n _disabled: {\n cursor: 'not-allowed',\n _placeholder: {\n color: 'text/disabled',\n },\n },\n _readOnly: {\n display: 'none',\n },\n },\n item: {\n display: 'flex',\n maxWidth: '100%',\n minWidth: 0,\n },\n itemPreview: {\n alignItems: 'center',\n background: 'color/neutral/subtle',\n borderColor: 'color/neutral/muted',\n borderRadius: '4',\n borderStyle: 'solid',\n borderWidth: rem(1),\n color: 'text/primary',\n display: 'flex',\n gap: '4',\n height: '24',\n maxWidth: '100%',\n overflow: 'hidden',\n paddingBlock: '2',\n paddingInlineEnd: '1',\n paddingInlineStart: '8',\n textStyle: 'comp/tag/sm',\n _highlighted: {\n background: 'color/neutral/moderate',\n },\n _disabled: {\n background: 'background/disabled',\n borderColor: 'border/disabled',\n color: 'text/on-disabled',\n },\n '&:not(:has(button))': {\n paddingInlineEnd: '8',\n },\n },\n itemText: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n },\n itemInput: {\n background: 'transparent',\n height: '24',\n minWidth: '20',\n outline: 'none',\n },\n itemDeleteTrigger: {\n alignItems: 'center',\n borderRadius: '2',\n color: 'icon/secondary',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: '0',\n height: '20',\n justifyContent: 'center',\n width: '20',\n _hover: {\n background: 'color/neutral/moderate',\n },\n _disabled: {\n cursor: 'not-allowed',\n opacity: '0.5',\n },\n },\n clearTrigger: {\n alignItems: 'center',\n borderRadius: '4',\n color: 'icon/secondary',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n padding: '4',\n _hover: {\n background: 'color/neutral/moderate',\n },\n _disabled: {\n cursor: 'not-allowed',\n opacity: '0.5',\n },\n },\n },\n variants: {\n size: {\n // Padding values below match the Figma control + input layer spec exactly\n // (see FRONTEND-572 thread / Figma node 1941:3510 for md, 1941:3487 for lg).\n // The outer control carries the size-specific padding; the inner tagsBlock adds a\n // constant 4px horizontal padding (set in the base) around the content regardless of size.\n md: {\n control: {\n paddingInlineEnd: '12',\n paddingInlineStart: '8',\n },\n // paddingBlock lives on tagsBlock (not control) so the suffixBlock (clear button) sits\n // at the control's inner top and its vertical center lines up with the first tag-row /\n // placeholder center — matches Figma's filled-state layout.\n tagsBlock: {\n paddingBlock: '8',\n },\n suffixBlock: {\n height: '40',\n },\n input: {\n height: '24',\n fontSize: '0.875rem',\n fontWeight: '400',\n lineHeight: 'normal',\n },\n },\n lg: {\n control: {\n paddingInlineEnd: '16',\n paddingInlineStart: '12',\n },\n tagsBlock: {\n paddingBlock: '12',\n },\n suffixBlock: {\n height: '48',\n },\n input: {\n fontSize: '1rem',\n fontWeight: '400',\n lineHeight: 'normal',\n },\n },\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n});\n\nexport default tagsInputSlotRecipe;\n"],"mappings":"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"}
package/dist/theme/slot-recipes/Tooltip.recipe.d.ts CHANGED
@@ -2,13 +2,13 @@ declare const tooltipSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition
2
2
  variant: {
3
3
  dark: {
4
4
  content: {
5
- '--tooltip-bg': "colors.background.contrast";
5
+ '--tooltip-bg': "colors.background/contrast";
6
6
  color: "text/on-contrast";
7
7
  };
8
8
  };
9
9
  light: {
10
10
  content: {
11
- '--tooltip-bg': "colors.background.tertiary";
11
+ '--tooltip-bg': "colors.background/tertiary";
12
12
  color: "text/primary";
13
13
  };
14
14
  };
package/dist/theme/slot-recipes/Tooltip.recipe.js CHANGED
@@ -11,7 +11,7 @@ var tooltipSlotRecipe = defineSlotRecipe({
11
11
  pointerEvents: "none"
12
12
  },
13
13
  content: {
14
- "--tooltip-bg": "colors.background.contrast",
14
+ "--tooltip-bg": "colors.background/contrast",
15
15
  backgroundColor: "var(--tooltip-bg)",
16
16
  color: "text/on-contrast",
17
17
  boxShadow: "elevation/tooltip",
@@ -39,11 +39,11 @@ var tooltipSlotRecipe = defineSlotRecipe({
39
39
  variants: {
40
40
  variant: {
41
41
  dark: { content: {
42
- "--tooltip-bg": "colors.background.contrast",
42
+ "--tooltip-bg": "colors.background/contrast",
43
43
  color: "text/on-contrast"
44
44
  } },
45
45
  light: { content: {
46
- "--tooltip-bg": "colors.background.tertiary",
46
+ "--tooltip-bg": "colors.background/tertiary",
47
47
  color: "text/primary"
48
48
  } }
49
49
  },
package/dist/theme/slot-recipes/Tooltip.recipe.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Tooltip.recipe.ts"],"sourcesContent":["import { tooltipAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst tooltipSlotRecipe = defineSlotRecipe({\n className: 'tooltip',\n slots: tooltipAnatomy.keys(),\n base: {\n positioner: {\n fontFamily: 'body',\n pointerEvents: 'none',\n },\n content: {\n '--tooltip-bg': 'colors.background.contrast',\n backgroundColor: 'var(--tooltip-bg)',\n color: 'text/on-contrast',\n boxShadow: 'elevation/tooltip',\n zIndex: 'tooltip',\n transformOrigin: 'var(--transform-origin)',\n _open: {\n animationStyle: 'scale-fade-in',\n animationDuration: 'fast',\n },\n _closed: {\n animationStyle: 'scale-fade-out',\n animationDuration: 'fast',\n },\n },\n arrow: {\n '--arrow-size': rem(8),\n '--arrow-background': 'var(--tooltip-bg)',\n },\n arrowTip: {\n borderTopWidth: rem(1),\n borderInlineStartWidth: rem(1),\n borderColor: 'var(--tooltip-bg)',\n },\n },\n variants: {\n variant: {\n dark: {\n content: {\n '--tooltip-bg': 'colors.background.contrast',\n color: 'text/on-contrast',\n },\n },\n light: {\n content: {\n '--tooltip-bg': 'colors.background.tertiary',\n color: 'text/primary',\n },\n },\n },\n paddingSize: {\n sm: {\n content: {\n paddingInline: '8',\n paddingBlock: '4',\n borderRadius: '4',\n },\n },\n md: {\n content: {\n paddingInline: '12',\n paddingBlock: '8',\n borderRadius: '8',\n },\n },\n lg: {\n content: {\n padding: '16',\n borderRadius: '8',\n },\n },\n },\n textStyle: {\n 'sm/regular': {\n content: {\n textStyle: 'body/sm/regular',\n },\n },\n 'sm/semibold': {\n content: {\n textStyle: 'body/sm/semibold',\n },\n },\n 'md/regular': {\n content: {\n textStyle: 'body/md/regular',\n },\n },\n },\n },\n defaultVariants: {\n variant: 'dark',\n paddingSize: 'md',\n textStyle: 'md/regular',\n },\n});\n\nexport default tooltipSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,oBAAoB,iBAAiB;CACzC,WAAW;CACX,OAAO,eAAe,KAAK;CAC3B,MAAM;EACJ,YAAY;GACV,YAAY;GACZ,eAAe;EACjB;EACA,SAAS;GACP,gBAAgB;GAChB,iBAAiB;GACjB,OAAO;GACP,WAAW;GACX,QAAQ;GACR,iBAAiB;GACjB,OAAO;IACL,gBAAgB;IAChB,mBAAmB;GACrB;GACA,SAAS;IACP,gBAAgB;IAChB,mBAAmB;GACrB;EACF;EACA,OAAO;GACL,gBAAgB,IAAI,CAAC;GACrB,sBAAsB;EACxB;EACA,UAAU;GACR,gBAAgB,IAAI,CAAC;GACrB,wBAAwB,IAAI,CAAC;GAC7B,aAAa;EACf;CACF;CACA,UAAU;EACR,SAAS;GACP,MAAM,EACJ,SAAS;IACP,gBAAgB;IAChB,OAAO;GACT,EACF;GACA,OAAO,EACL,SAAS;IACP,gBAAgB;IAChB,OAAO;GACT,EACF;EACF;EACA,aAAa;GACX,IAAI,EACF,SAAS;IACP,eAAe;IACf,cAAc;IACd,cAAc;GAChB,EACF;GACA,IAAI,EACF,SAAS;IACP,eAAe;IACf,cAAc;IACd,cAAc;GAChB,EACF;GACA,IAAI,EACF,SAAS;IACP,SAAS;IACT,cAAc;GAChB,EACF;EACF;EACA,WAAW;GACT,cAAc,EACZ,SAAS,EACP,WAAW,kBACb,EACF;GACA,eAAe,EACb,SAAS,EACP,WAAW,mBACb,EACF;GACA,cAAc,EACZ,SAAS,EACP,WAAW,kBACb,EACF;EACF;CACF;CACA,iBAAiB;EACf,SAAS;EACT,aAAa;EACb,WAAW;CACb;AACF,CAAC"}
1
+ {"version":3,"file":"Tooltip.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Tooltip.recipe.ts"],"sourcesContent":["import { tooltipAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst tooltipSlotRecipe = defineSlotRecipe({\n className: 'tooltip',\n slots: tooltipAnatomy.keys(),\n base: {\n positioner: {\n fontFamily: 'body',\n pointerEvents: 'none',\n },\n content: {\n '--tooltip-bg': 'colors.background/contrast',\n backgroundColor: 'var(--tooltip-bg)',\n color: 'text/on-contrast',\n boxShadow: 'elevation/tooltip',\n zIndex: 'tooltip',\n transformOrigin: 'var(--transform-origin)',\n _open: {\n animationStyle: 'scale-fade-in',\n animationDuration: 'fast',\n },\n _closed: {\n animationStyle: 'scale-fade-out',\n animationDuration: 'fast',\n },\n },\n arrow: {\n '--arrow-size': rem(8),\n '--arrow-background': 'var(--tooltip-bg)',\n },\n arrowTip: {\n borderTopWidth: rem(1),\n borderInlineStartWidth: rem(1),\n borderColor: 'var(--tooltip-bg)',\n },\n },\n variants: {\n variant: {\n dark: {\n content: {\n '--tooltip-bg': 'colors.background/contrast',\n color: 'text/on-contrast',\n },\n },\n light: {\n content: {\n '--tooltip-bg': 'colors.background/tertiary',\n color: 'text/primary',\n },\n },\n },\n paddingSize: {\n sm: {\n content: {\n paddingInline: '8',\n paddingBlock: '4',\n borderRadius: '4',\n },\n },\n md: {\n content: {\n paddingInline: '12',\n paddingBlock: '8',\n borderRadius: '8',\n },\n },\n lg: {\n content: {\n padding: '16',\n borderRadius: '8',\n },\n },\n },\n textStyle: {\n 'sm/regular': {\n content: {\n textStyle: 'body/sm/regular',\n },\n },\n 'sm/semibold': {\n content: {\n textStyle: 'body/sm/semibold',\n },\n },\n 'md/regular': {\n content: {\n textStyle: 'body/md/regular',\n },\n },\n },\n },\n defaultVariants: {\n variant: 'dark',\n paddingSize: 'md',\n textStyle: 'md/regular',\n },\n});\n\nexport default tooltipSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,oBAAoB,iBAAiB;CACzC,WAAW;CACX,OAAO,eAAe,KAAK;CAC3B,MAAM;EACJ,YAAY;GACV,YAAY;GACZ,eAAe;EACjB;EACA,SAAS;GACP,gBAAgB;GAChB,iBAAiB;GACjB,OAAO;GACP,WAAW;GACX,QAAQ;GACR,iBAAiB;GACjB,OAAO;IACL,gBAAgB;IAChB,mBAAmB;GACrB;GACA,SAAS;IACP,gBAAgB;IAChB,mBAAmB;GACrB;EACF;EACA,OAAO;GACL,gBAAgB,IAAI,CAAC;GACrB,sBAAsB;EACxB;EACA,UAAU;GACR,gBAAgB,IAAI,CAAC;GACrB,wBAAwB,IAAI,CAAC;GAC7B,aAAa;EACf;CACF;CACA,UAAU;EACR,SAAS;GACP,MAAM,EACJ,SAAS;IACP,gBAAgB;IAChB,OAAO;GACT,EACF;GACA,OAAO,EACL,SAAS;IACP,gBAAgB;IAChB,OAAO;GACT,EACF;EACF;EACA,aAAa;GACX,IAAI,EACF,SAAS;IACP,eAAe;IACf,cAAc;IACd,cAAc;GAChB,EACF;GACA,IAAI,EACF,SAAS;IACP,eAAe;IACf,cAAc;IACd,cAAc;GAChB,EACF;GACA,IAAI,EACF,SAAS;IACP,SAAS;IACT,cAAc;GAChB,EACF;EACF;EACA,WAAW;GACT,cAAc,EACZ,SAAS,EACP,WAAW,kBACb,EACF;GACA,eAAe,EACb,SAAS,EACP,WAAW,mBACb,EACF;GACA,cAAc,EACZ,SAAS,EACP,WAAW,kBACb,EACF;EACF;CACF;CACA,iBAAiB;EACf,SAAS;EACT,aAAa;EACb,WAAW;CACb;AACF,CAAC"}
package/dist/theme/slot-recipes/index.d.ts CHANGED
@@ -218,6 +218,62 @@ declare const slotRecipes: {
218
218
  };
219
219
  rounded: {};
220
220
  };
221
+ colorVariant: {
222
+ neutral: {
223
+ root: {
224
+ color: "color/neutral/strong";
225
+ backgroundColor: "color/neutral/subtle";
226
+ };
227
+ };
228
+ purple: {
229
+ root: {
230
+ color: "color/purple/strong";
231
+ backgroundColor: "color/purple/subtle";
232
+ };
233
+ };
234
+ indigo: {
235
+ root: {
236
+ color: "color/indigo/strong";
237
+ backgroundColor: "color/indigo/subtle";
238
+ };
239
+ };
240
+ blue: {
241
+ root: {
242
+ color: "color/blue/strong";
243
+ backgroundColor: "color/blue/subtle";
244
+ };
245
+ };
246
+ green: {
247
+ root: {
248
+ color: "color/green/strong";
249
+ backgroundColor: "color/green/subtle";
250
+ };
251
+ };
252
+ yellow: {
253
+ root: {
254
+ color: "color/yellow/strong";
255
+ backgroundColor: "color/yellow/subtle";
256
+ };
257
+ };
258
+ red: {
259
+ root: {
260
+ color: "color/red/strong";
261
+ backgroundColor: "color/red/subtle";
262
+ };
263
+ };
264
+ orange: {
265
+ root: {
266
+ color: "color/orange/strong";
267
+ backgroundColor: "color/orange/subtle";
268
+ };
269
+ };
270
+ turquoise: {
271
+ root: {
272
+ color: "color/turquoise/strong";
273
+ backgroundColor: "color/turquoise/subtle";
274
+ };
275
+ };
276
+ };
221
277
  }>;
222
278
  breadcrumb: import('@chakra-ui/react').SlotRecipeDefinition<"link" | "separator" | "list" | "ellipsis" | "root" | "item" | "currentLink", import('@chakra-ui/react').SlotRecipeVariantRecord<"link" | "separator" | "list" | "ellipsis" | "root" | "item" | "currentLink">>;
223
279
  card: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "root" | "description", {
@@ -856,13 +912,13 @@ declare const slotRecipes: {
856
912
  };
857
913
  }>;
858
914
  emptyState: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "indicator" | "description", {
859
- colorScheme: {
915
+ colorVariant: {
860
916
  white: {
861
917
  root: {
862
918
  backgroundColor: "background/primary";
863
919
  };
864
920
  };
865
- grey: {
921
+ gray: {
866
922
  root: {
867
923
  backgroundColor: "background/secondary";
868
924
  };
@@ -1007,7 +1063,7 @@ declare const slotRecipes: {
1007
1063
  iconBar: {
1008
1064
  backgroundColor: "status/success/bg";
1009
1065
  borderColor: "status/success/border";
1010
- color: "sys/green/base";
1066
+ color: "color/green/base";
1011
1067
  };
1012
1068
  root: {
1013
1069
  borderColor: "status/success/border";
@@ -1017,7 +1073,7 @@ declare const slotRecipes: {
1017
1073
  iconBar: {
1018
1074
  backgroundColor: "status/warning/bg";
1019
1075
  borderColor: "status/warning/border";
1020
- color: "sys/yellow/base";
1076
+ color: "color/yellow/base";
1021
1077
  };
1022
1078
  root: {
1023
1079
  borderColor: "status/warning/border";
@@ -1027,7 +1083,7 @@ declare const slotRecipes: {
1027
1083
  iconBar: {
1028
1084
  backgroundColor: "status/critical/bg";
1029
1085
  borderColor: "status/critical/border";
1030
- color: "sys/red/base";
1086
+ color: "color/red/base";
1031
1087
  };
1032
1088
  root: {
1033
1089
  borderColor: "status/critical/border";
@@ -1105,7 +1161,7 @@ declare const slotRecipes: {
1105
1161
  status: {
1106
1162
  ai: {
1107
1163
  iconBar: {
1108
- background: "{colors.ai.background.minimal-vertical}";
1164
+ background: "ai/background/minimal-vertical";
1109
1165
  color: string;
1110
1166
  };
1111
1167
  messageSolo: {
@@ -1114,7 +1170,7 @@ declare const slotRecipes: {
1114
1170
  root: {
1115
1171
  backgroundColor: "transparent";
1116
1172
  border: "1px solid transparent";
1117
- background: "linear-gradient({colors.background.primary}, {colors.background.primary}) padding-box, {colors.status.ai.border} border-box";
1173
+ background: "linear-gradient({colors.neutral.100}, {colors.neutral.100}) padding-box, linear-gradient(135deg, {colors.purple.80} 0%, {colors.indigo.80} 50%, {colors.blue.80} 100%) border-box";
1118
1174
  };
1119
1175
  title: {
1120
1176
  color: string;
@@ -1243,7 +1299,7 @@ declare const slotRecipes: {
1243
1299
  }>;
1244
1300
  overflowContent: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "action" | "preview", import('@chakra-ui/react').SlotRecipeVariantRecord<"root" | "action" | "preview">>;
1245
1301
  pageFooter: import('@chakra-ui/react').SlotRecipeDefinition<"link" | "status" | "root" | "statusLabel" | "statusDot" | "copyright" | "copyrightText" | "links", {
1246
- colorScheme: {
1302
+ colorVariant: {
1247
1303
  gray: {
1248
1304
  root: {
1249
1305
  background: "background/secondary";
@@ -1304,11 +1360,11 @@ declare const slotRecipes: {
1304
1360
  };
1305
1361
  links: {
1306
1362
  borderBlockEnd: {
1307
- base: "1px solid {colors.border.minimal}";
1363
+ base: "1px solid {colors.neutral.93}";
1308
1364
  tablet: "none";
1309
1365
  };
1310
1366
  borderBlockStart: {
1311
- base: "1px solid {colors.border.minimal}";
1367
+ base: "1px solid {colors.neutral.93}";
1312
1368
  tablet: "none";
1313
1369
  };
1314
1370
  paddingBlock: {
@@ -1326,7 +1382,7 @@ declare const slotRecipes: {
1326
1382
  };
1327
1383
  links: {
1328
1384
  borderBlockEnd: {
1329
- base: "1px solid {colors.border.minimal}";
1385
+ base: "1px solid {colors.neutral.93}";
1330
1386
  tablet: "none";
1331
1387
  };
1332
1388
  paddingBlockEnd: {
@@ -1448,7 +1504,45 @@ declare const slotRecipes: {
1448
1504
  };
1449
1505
  };
1450
1506
  }>;
1451
- ribbon: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "root" | "textBlock", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "root" | "textBlock">>;
1507
+ ribbon: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "root" | "textBlock", {
1508
+ colorVariant: {
1509
+ blue: {
1510
+ root: {
1511
+ background: "color/blue/subtle";
1512
+ borderColor: "color/blue/muted";
1513
+ color: "color/blue/strong";
1514
+ };
1515
+ };
1516
+ green: {
1517
+ root: {
1518
+ background: "color/green/subtle";
1519
+ borderColor: "color/green/muted";
1520
+ color: "color/green/strong";
1521
+ };
1522
+ };
1523
+ yellow: {
1524
+ root: {
1525
+ background: "color/yellow/subtle";
1526
+ borderColor: "color/yellow/muted";
1527
+ color: "color/yellow/strong";
1528
+ };
1529
+ };
1530
+ red: {
1531
+ root: {
1532
+ background: "color/red/subtle";
1533
+ borderColor: "color/red/muted";
1534
+ color: "color/red/strong";
1535
+ };
1536
+ };
1537
+ purple: {
1538
+ root: {
1539
+ background: "color/purple/subtle";
1540
+ borderColor: "color/purple/muted";
1541
+ color: "color/purple/strong";
1542
+ };
1543
+ };
1544
+ };
1545
+ }>;
1452
1546
  sectionHeading: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "icon" | "root" | "titleBlock" | "helperText" | "contentBlock" | "helperBlock", import('@chakra-ui/react').SlotRecipeVariantRecord<"label" | "icon" | "root" | "titleBlock" | "helperText" | "contentBlock" | "helperBlock">>;
1453
1547
  labeledData: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "value" | "root" | "limit" | "helpText", {
1454
1548
  size: {
@@ -2032,7 +2126,7 @@ declare const slotRecipes: {
2032
2126
  backgroundColor: "background/active";
2033
2127
  };
2034
2128
  _disabled: {
2035
- backgroundColor: "sys/neutral/moderate";
2129
+ backgroundColor: "color/neutral/moderate";
2036
2130
  color: "text/on-disabled";
2037
2131
  };
2038
2132
  _selected: {
@@ -2047,6 +2141,50 @@ declare const slotRecipes: {
2047
2141
  };
2048
2142
  }>;
2049
2143
  tag: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "closeTrigger" | "startElement" | "endElement", {
2144
+ colorVariant: {
2145
+ neutral: {
2146
+ root: {
2147
+ backgroundColor: "color/neutral/subtle";
2148
+ borderColor: "color/neutral/muted";
2149
+ color: "color/neutral/strong";
2150
+ };
2151
+ };
2152
+ blue: {
2153
+ root: {
2154
+ backgroundColor: "color/blue/subtle";
2155
+ borderColor: "color/blue/muted";
2156
+ color: "color/blue/strong";
2157
+ };
2158
+ };
2159
+ green: {
2160
+ root: {
2161
+ backgroundColor: "color/green/subtle";
2162
+ borderColor: "color/green/muted";
2163
+ color: "color/green/strong";
2164
+ };
2165
+ };
2166
+ red: {
2167
+ root: {
2168
+ backgroundColor: "color/red/subtle";
2169
+ borderColor: "color/red/muted";
2170
+ color: "color/red/strong";
2171
+ };
2172
+ };
2173
+ yellow: {
2174
+ root: {
2175
+ backgroundColor: "color/yellow/subtle";
2176
+ borderColor: "color/yellow/muted";
2177
+ color: "color/yellow/strong";
2178
+ };
2179
+ };
2180
+ purple: {
2181
+ root: {
2182
+ backgroundColor: "color/purple/subtle";
2183
+ borderColor: "color/purple/muted";
2184
+ color: "color/purple/strong";
2185
+ };
2186
+ };
2187
+ };
2050
2188
  disabled: {
2051
2189
  true: {
2052
2190
  root: {
@@ -2170,13 +2308,13 @@ declare const slotRecipes: {
2170
2308
  variant: {
2171
2309
  dark: {
2172
2310
  content: {
2173
- '--tooltip-bg': "colors.background.contrast";
2311
+ '--tooltip-bg': "colors.background/contrast";
2174
2312
  color: "text/on-contrast";
2175
2313
  };
2176
2314
  };
2177
2315
  light: {
2178
2316
  content: {
2179
- '--tooltip-bg': "colors.background.tertiary";
2317
+ '--tooltip-bg': "colors.background/tertiary";
2180
2318
  color: "text/primary";
2181
2319
  };
2182
2320
  };
package/dist/theme/slot-recipes/index.js CHANGED
@@ -1,8 +1,8 @@
1
+ import avatarSlotRecipe from "./Avatar.recipe.js";
1
2
  import numberInputSlotRecipe from "./NumberInput.recipe.js";
2
3
  import accordionSlotRecipe from "./Accordion.recipe.js";
3
4
  import actionBarSlotRecipe from "./ActionBar.recipe.js";
4
5
  import alertSlotRecipe from "./Alert.recipe.js";
5
- import avatarSlotRecipe from "./Avatar.recipe.js";
6
6
  import breadcrumbSlotRecipe from "./Breadcrumb.recipe.js";
7
7
  import cardSlotRecipe from "./Card.recipe.js";
8
8
  import checkboxSlotRecipe from "./Checkbox.recipe.js";