@bitrise/bitkit-v2 0.3.483 → 0.3.485-beta.3131
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.
- package/dist/components/BitkitUIHeader/BitkitUIHeader.d.ts +2 -0
- package/dist/components/BitkitUIHeader/BitkitUIHeader.js +6 -1
- package/dist/components/BitkitUIHeader/BitkitUIHeader.js.map +1 -1
- package/dist/components/BitkitUIHeader/UIHeaderModeSwitch.d.ts +10 -0
- package/dist/components/BitkitUIHeader/UIHeaderModeSwitch.js +106 -0
- package/dist/components/BitkitUIHeader/UIHeaderModeSwitch.js.map +1 -0
- package/dist/components/index.d.ts +1 -1
- package/dist/icons/IconModeDark.d.ts +8 -0
- package/dist/icons/IconModeDark.js +31 -0
- package/dist/icons/IconModeDark.js.map +1 -0
- package/dist/icons/IconModeLight.d.ts +8 -0
- package/dist/icons/IconModeLight.js +31 -0
- package/dist/icons/IconModeLight.js.map +1 -0
- package/dist/icons/IconModeSystem.d.ts +8 -0
- package/dist/icons/IconModeSystem.js +31 -0
- package/dist/icons/IconModeSystem.js.map +1 -0
- package/dist/icons/index.d.ts +3 -0
- package/dist/main.js +4 -1
- package/dist/svgs/16x16/icon-app-store-color-16.js +2 -2
- package/dist/svgs/16x16/icon-app-store-color-16.js.map +1 -1
- package/dist/svgs/16x16/icon-bitbucket-color-16.js +2 -2
- package/dist/svgs/16x16/icon-bitbucket-color-16.js.map +1 -1
- package/dist/svgs/16x16/icon-bitbucket-neutral-16.js +2 -2
- package/dist/svgs/16x16/icon-bitbucket-neutral-16.js.map +1 -1
- package/dist/svgs/16x16/icon-bitbucket-white-16.js +2 -2
- package/dist/svgs/16x16/icon-bitbucket-white-16.js.map +1 -1
- package/dist/svgs/16x16/icon-browserstack-color-16.js +13 -9
- package/dist/svgs/16x16/icon-browserstack-color-16.js.map +1 -1
- package/dist/svgs/16x16/icon-java-duke-color-16.js +2 -2
- package/dist/svgs/16x16/icon-java-duke-color-16.js.map +1 -1
- package/dist/svgs/16x16/icon-kotlin-color-16.js +2 -2
- package/dist/svgs/16x16/icon-kotlin-color-16.js.map +1 -1
- package/dist/svgs/16x16/icon-mode-dark-16.js +23 -0
- package/dist/svgs/16x16/icon-mode-dark-16.js.map +1 -0
- package/dist/svgs/16x16/icon-mode-light-16.js +29 -0
- package/dist/svgs/16x16/icon-mode-light-16.js.map +1 -0
- package/dist/svgs/16x16/icon-mode-system-16.js +23 -0
- package/dist/svgs/16x16/icon-mode-system-16.js.map +1 -0
- package/dist/svgs/16x16/icon-python-color-16.js +4 -4
- package/dist/svgs/16x16/icon-python-color-16.js.map +1 -1
- package/dist/svgs/24x24/icon-app-store-color-24.js +2 -2
- package/dist/svgs/24x24/icon-app-store-color-24.js.map +1 -1
- package/dist/svgs/24x24/icon-bitbucket-color-24.js +2 -2
- package/dist/svgs/24x24/icon-bitbucket-color-24.js.map +1 -1
- package/dist/svgs/24x24/icon-bitbucket-neutral-24.js +2 -2
- package/dist/svgs/24x24/icon-bitbucket-neutral-24.js.map +1 -1
- package/dist/svgs/24x24/icon-bitbucket-white-24.js +2 -2
- package/dist/svgs/24x24/icon-bitbucket-white-24.js.map +1 -1
- package/dist/svgs/24x24/icon-browserstack-color-24.js +13 -9
- package/dist/svgs/24x24/icon-browserstack-color-24.js.map +1 -1
- package/dist/svgs/24x24/icon-java-duke-color-24.js +2 -2
- package/dist/svgs/24x24/icon-java-duke-color-24.js.map +1 -1
- package/dist/svgs/24x24/icon-kotlin-color-24.js +2 -2
- package/dist/svgs/24x24/icon-kotlin-color-24.js.map +1 -1
- package/dist/svgs/24x24/icon-mode-dark-24.js +23 -0
- package/dist/svgs/24x24/icon-mode-dark-24.js.map +1 -0
- package/dist/svgs/24x24/icon-mode-light-24.js +29 -0
- package/dist/svgs/24x24/icon-mode-light-24.js.map +1 -0
- package/dist/svgs/24x24/icon-mode-system-24.js +23 -0
- package/dist/svgs/24x24/icon-mode-system-24.js.map +1 -0
- package/dist/svgs/24x24/icon-python-color-24.js +4 -4
- package/dist/svgs/24x24/icon-python-color-24.js.map +1 -1
- package/dist/theme/common/ComboboxAndSelect.common.d.ts +4 -2
- package/dist/theme/common/ComboboxAndSelect.common.js +4 -2
- package/dist/theme/common/ComboboxAndSelect.common.js.map +1 -1
- package/dist/theme/semantic-tokens/index.d.ts +5 -0
- package/dist/theme/semantic-tokens/semanticColors.d.ts +5 -0
- package/dist/theme/semantic-tokens/semanticColors.js +1 -0
- package/dist/theme/semantic-tokens/semanticColors.js.map +1 -1
- package/dist/theme/slot-recipes/Combobox.recipe.d.ts +4 -2
- package/dist/theme/slot-recipes/DatePickerSelect.recipe.d.ts +4 -2
- package/dist/theme/slot-recipes/Select.recipe.d.ts +4 -2
- package/dist/theme/slot-recipes/UIHeader.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/UIHeader.recipe.js +16 -0
- package/dist/theme/slot-recipes/UIHeader.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +13 -7
- package/package.json +2 -1
|
@@ -33,7 +33,8 @@ declare const datePickerSelectSlotRecipe: import('@chakra-ui/react').SlotRecipeD
|
|
|
33
33
|
gap: "12";
|
|
34
34
|
};
|
|
35
35
|
paddingBlock: "8";
|
|
36
|
-
|
|
36
|
+
paddingInlineStart: "16";
|
|
37
|
+
paddingInlineEnd: "24";
|
|
37
38
|
textStyle: "body/md/regular";
|
|
38
39
|
_selected: {
|
|
39
40
|
textStyle: "body/md/semibold";
|
|
@@ -123,7 +124,8 @@ declare const datePickerSelectSlotRecipe: import('@chakra-ui/react').SlotRecipeD
|
|
|
123
124
|
paddingBlock: "12";
|
|
124
125
|
gap: "12";
|
|
125
126
|
};
|
|
126
|
-
|
|
127
|
+
paddingInlineStart: "16";
|
|
128
|
+
paddingInlineEnd: "24";
|
|
127
129
|
paddingBlock: "12";
|
|
128
130
|
textStyle: "body/lg/regular";
|
|
129
131
|
_selected: {
|
|
@@ -32,7 +32,8 @@ export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefi
|
|
|
32
32
|
paddingBlock: "12";
|
|
33
33
|
gap: "12";
|
|
34
34
|
};
|
|
35
|
-
|
|
35
|
+
paddingInlineStart: "16";
|
|
36
|
+
paddingInlineEnd: "24";
|
|
36
37
|
paddingBlock: "12";
|
|
37
38
|
textStyle: "body/lg/regular";
|
|
38
39
|
_selected: {
|
|
@@ -98,7 +99,8 @@ export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefi
|
|
|
98
99
|
gap: "12";
|
|
99
100
|
};
|
|
100
101
|
paddingBlock: "8";
|
|
101
|
-
|
|
102
|
+
paddingInlineStart: "16";
|
|
103
|
+
paddingInlineEnd: "24";
|
|
102
104
|
textStyle: "body/md/regular";
|
|
103
105
|
_selected: {
|
|
104
106
|
textStyle: "body/md/semibold";
|
|
@@ -10,5 +10,5 @@ export declare const uiHeaderHeightPx = 48;
|
|
|
10
10
|
* assume it.
|
|
11
11
|
*/
|
|
12
12
|
export declare const uiHeaderHeight: `${number}rem`;
|
|
13
|
-
declare const uiHeaderSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"search" | "badge" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "searchClear" | "actions" | "navButton" | "accountAvatar" | "accountIcon" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoBlock" | "logoLink", import('@chakra-ui/react').SlotRecipeVariantRecord<"search" | "badge" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "searchClear" | "actions" | "navButton" | "accountAvatar" | "accountIcon" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoBlock" | "logoLink">>;
|
|
13
|
+
declare const uiHeaderSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"search" | "badge" | "separator" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "searchClear" | "actions" | "navButton" | "accountAvatar" | "accountIcon" | "modeSwitch" | "modeControl" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoBlock" | "logoLink", import('@chakra-ui/react').SlotRecipeVariantRecord<"search" | "badge" | "separator" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "searchClear" | "actions" | "navButton" | "accountAvatar" | "accountIcon" | "modeSwitch" | "modeControl" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoBlock" | "logoLink">>;
|
|
14
14
|
export default uiHeaderSlotRecipe;
|
|
@@ -56,6 +56,8 @@ var uiHeaderSlotRecipe = defineSlotRecipe({
|
|
|
56
56
|
"leading",
|
|
57
57
|
"logoBlock",
|
|
58
58
|
"logoLink",
|
|
59
|
+
"modeControl",
|
|
60
|
+
"modeSwitch",
|
|
59
61
|
"navButton",
|
|
60
62
|
"navButtonBadge",
|
|
61
63
|
"navButtonIcon",
|
|
@@ -66,6 +68,7 @@ var uiHeaderSlotRecipe = defineSlotRecipe({
|
|
|
66
68
|
"searchField",
|
|
67
69
|
"searchIcon",
|
|
68
70
|
"searchInput",
|
|
71
|
+
"separator",
|
|
69
72
|
"spacer"
|
|
70
73
|
],
|
|
71
74
|
base: {
|
|
@@ -130,6 +133,19 @@ var uiHeaderSlotRecipe = defineSlotRecipe({
|
|
|
130
133
|
display: "block",
|
|
131
134
|
tablet: { display: "none" }
|
|
132
135
|
},
|
|
136
|
+
modeSwitch: {
|
|
137
|
+
alignItems: "center",
|
|
138
|
+
display: "flex",
|
|
139
|
+
flexShrink: 0
|
|
140
|
+
},
|
|
141
|
+
modeControl: { _open: { background: "sys/ui/header/control/bg-active" } },
|
|
142
|
+
separator: {
|
|
143
|
+
background: "sys/ui/header/separator",
|
|
144
|
+
height: "20",
|
|
145
|
+
marginInlineEnd: "8",
|
|
146
|
+
marginInlineStart: "12",
|
|
147
|
+
width: "1"
|
|
148
|
+
},
|
|
133
149
|
navButton: {
|
|
134
150
|
...controlBase,
|
|
135
151
|
paddingBlock: "8",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UIHeader.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/UIHeader.recipe.ts"],"sourcesContent":["import { defineSlotRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nimport { colorVar, rem } from '../themeUtils';\n\n/** `uiHeaderHeight` as a number, for a layout that needs one rather than a token. */\nexport const uiHeaderHeightPx = 48;\n\n/**\n * The height of the header's bar. A page that pins the header reserves this much room for it, and\n * anything anchored under the header starts here: a drawer's backdrop and positioner, a side\n * navigation's `insetBlockStart`.\n *\n * It is the bar alone. A `banner` sits below it inside the header, and its height is the\n * consumer's content, so a pinned header carrying one is taller than this — measure it rather than\n * assume it.\n */\nexport const uiHeaderHeight = rem(uiHeaderHeightPx);\n\nconst SEARCH_FIELD_WIDTH = rem(240);\n\nconst SEARCH_FIELD_TINT = colorVar('color/white/20');\n\nconst controlStates: SystemStyleObject = {\n background: 'sys/ui/header/control/bg',\n _hover: {\n background: 'sys/ui/header/control/bg-hover',\n _active: {\n background: 'sys/ui/header/control/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/header/control/bg-active',\n },\n _selected: {\n background: 'sys/ui/header/control/bg-selected',\n _hover: {\n background: 'sys/ui/header/control/bg-selected-hover',\n _active: {\n background: 'sys/ui/header/control/bg-selected',\n },\n },\n _active: {\n background: 'sys/ui/header/control/bg-selected',\n },\n },\n};\n\nconst controlBase: SystemStyleObject = {\n ...controlStates,\n alignItems: 'center',\n borderRadius: 0,\n color: 'icon/on-color',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n height: uiHeaderHeight,\n justifyContent: 'center',\n position: 'relative',\n textDecoration: 'none',\n _focusVisible: {\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n};\n\nconst uiHeaderSlotRecipe = defineSlotRecipe({\n className: 'ui-header',\n slots: [\n 'accountAvatar',\n 'accountIcon',\n 'actions',\n 'badge',\n 'banner',\n 'bar',\n 'control',\n 'indicator',\n 'leading',\n 'logoBlock',\n 'logoLink',\n 'navButton',\n 'navButtonBadge',\n 'navButtonIcon',\n 'root',\n 'search',\n 'searchButton',\n 'searchClear',\n 'searchField',\n 'searchIcon',\n 'searchInput',\n 'spacer',\n ],\n base: {\n root: {\n background: 'sys/ui/header/bg',\n color: 'text/on-color',\n display: 'flex',\n flexDirection: 'column',\n width: 'full',\n },\n bar: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n height: uiHeaderHeight,\n position: 'relative',\n tablet: {\n paddingInlineStart: '20',\n },\n },\n leading: {\n display: 'flex',\n flexShrink: 0,\n tablet: {\n display: 'none',\n },\n },\n spacer: {\n flexShrink: 1,\n width: '48',\n tablet: {\n display: 'none',\n },\n },\n logoBlock: {\n alignItems: 'center',\n display: 'flex',\n flex: 1,\n justifyContent: 'center',\n minWidth: 0,\n tablet: {\n flex: 'none',\n },\n },\n logoLink: {\n borderRadius: '4',\n color: 'text/on-color',\n display: 'flex',\n marginBlockEnd: rem(3),\n },\n actions: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n marginInlineStart: 'auto',\n tablet: {\n paddingInlineEnd: '32',\n },\n },\n banner: {\n width: 'full',\n },\n control: {\n ...controlBase,\n width: '48',\n },\n accountAvatar: {\n borderRadius: 'full',\n display: 'none',\n overflow: 'hidden',\n tablet: {\n display: 'inline-flex',\n },\n },\n accountIcon: {\n display: 'block',\n tablet: {\n display: 'none',\n },\n },\n navButton: {\n ...controlBase,\n paddingBlock: '8',\n paddingInlineEnd: '8',\n paddingInlineStart: '12',\n },\n navButtonBadge: {\n alignItems: 'flex-start',\n background: 'sys/ui/header/bg',\n borderStartStartRadius: '2',\n color: 'icon/on-color',\n display: 'flex',\n height: '12',\n insetBlockEnd: '8',\n insetInlineEnd: '8',\n overflow: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n width: '16',\n },\n navButtonIcon: {\n flexShrink: 0,\n marginBlockStart: rem(-1),\n marginInlineStart: '1',\n },\n badge: {\n background: 'sys/ui/header/badge/red',\n borderRadius: 'full',\n height: '8',\n insetBlockStart: '12',\n insetInlineStart: rem(28),\n pointerEvents: 'none',\n position: 'absolute',\n width: '8',\n '&[data-pulse]': {\n _after: {\n animation: 'ping',\n background: 'sys/ui/header/badge/red',\n borderRadius: 'full',\n content: '\"\"',\n inset: 0,\n opacity: 0.5,\n position: 'absolute',\n _motionReduce: {\n animation: 'none',\n },\n },\n },\n },\n indicator: {\n background: 'sys/ui/header/control/indicator',\n height: '4',\n insetBlockEnd: 0,\n insetInline: 0,\n pointerEvents: 'none',\n position: 'absolute',\n },\n search: {\n display: 'flex',\n flexShrink: 0,\n position: 'relative',\n },\n searchField: {\n alignItems: 'center',\n backgroundColor: 'sys/ui/header/bg',\n backgroundImage: `linear-gradient(0deg, ${SEARCH_FIELD_TINT} 0%, ${SEARCH_FIELD_TINT} 100%)`,\n borderColor: 'border/strong',\n borderRadius: '4',\n borderStyle: 'solid',\n borderWidth: '1',\n display: 'none',\n gap: '8',\n height: '40',\n insetBlockStart: '4',\n insetInlineEnd: 0,\n opacity: 0,\n paddingInlineEnd: '12',\n paddingInlineStart: '8',\n position: 'absolute',\n transitionDuration: 'fast',\n // `visibility` is what takes the closed field out of hit-testing, the tab order and the\n // accessibility tree in one go. Transitioning it keeps the field visible for the whole fade\n // and flips it at the end, which `opacity` alone could not do.\n transitionProperty: 'opacity, visibility',\n transitionTimingFunction: 'ease-out',\n visibility: 'hidden',\n width: SEARCH_FIELD_WIDTH,\n '&:has(input:focus-visible)': {\n boxShadow: '0 0 0 var(--focus-ring-width) var(--focus-ring-color) inset',\n },\n _open: {\n opacity: 1,\n visibility: 'visible',\n },\n _motionReduce: {\n transitionProperty: 'none',\n },\n tablet: {\n display: 'flex',\n },\n },\n searchButton: {\n tablet: {\n _open: {\n visibility: 'hidden',\n },\n },\n },\n searchClear: {\n color: 'icon/on-color',\n flexShrink: 0,\n },\n searchIcon: {\n color: 'icon/on-color',\n flexShrink: 0,\n },\n searchInput: {\n background: 'transparent',\n borderWidth: 0,\n color: 'text/on-color',\n flex: 1,\n minWidth: 0,\n padding: 0,\n textStyle: 'body/lg/regular',\n '&::-webkit-search-cancel-button': { display: 'none' },\n _focusVisible: {\n outline: 'none',\n outlineWidth: 0,\n },\n _placeholder: {\n color: 'text/on-color',\n opacity: 0.6,\n },\n },\n },\n});\n\nexport default uiHeaderSlotRecipe;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"UIHeader.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/UIHeader.recipe.ts"],"sourcesContent":["import { defineSlotRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nimport { colorVar, rem } from '../themeUtils';\n\n/** `uiHeaderHeight` as a number, for a layout that needs one rather than a token. */\nexport const uiHeaderHeightPx = 48;\n\n/**\n * The height of the header's bar. A page that pins the header reserves this much room for it, and\n * anything anchored under the header starts here: a drawer's backdrop and positioner, a side\n * navigation's `insetBlockStart`.\n *\n * It is the bar alone. A `banner` sits below it inside the header, and its height is the\n * consumer's content, so a pinned header carrying one is taller than this — measure it rather than\n * assume it.\n */\nexport const uiHeaderHeight = rem(uiHeaderHeightPx);\n\nconst SEARCH_FIELD_WIDTH = rem(240);\n\nconst SEARCH_FIELD_TINT = colorVar('color/white/20');\n\nconst controlStates: SystemStyleObject = {\n background: 'sys/ui/header/control/bg',\n _hover: {\n background: 'sys/ui/header/control/bg-hover',\n _active: {\n background: 'sys/ui/header/control/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/header/control/bg-active',\n },\n _selected: {\n background: 'sys/ui/header/control/bg-selected',\n _hover: {\n background: 'sys/ui/header/control/bg-selected-hover',\n _active: {\n background: 'sys/ui/header/control/bg-selected',\n },\n },\n _active: {\n background: 'sys/ui/header/control/bg-selected',\n },\n },\n};\n\nconst controlBase: SystemStyleObject = {\n ...controlStates,\n alignItems: 'center',\n borderRadius: 0,\n color: 'icon/on-color',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n height: uiHeaderHeight,\n justifyContent: 'center',\n position: 'relative',\n textDecoration: 'none',\n _focusVisible: {\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n};\n\nconst uiHeaderSlotRecipe = defineSlotRecipe({\n className: 'ui-header',\n slots: [\n 'accountAvatar',\n 'accountIcon',\n 'actions',\n 'badge',\n 'banner',\n 'bar',\n 'control',\n 'indicator',\n 'leading',\n 'logoBlock',\n 'logoLink',\n 'modeControl',\n 'modeSwitch',\n 'navButton',\n 'navButtonBadge',\n 'navButtonIcon',\n 'root',\n 'search',\n 'searchButton',\n 'searchClear',\n 'searchField',\n 'searchIcon',\n 'searchInput',\n 'separator',\n 'spacer',\n ],\n base: {\n root: {\n background: 'sys/ui/header/bg',\n color: 'text/on-color',\n display: 'flex',\n flexDirection: 'column',\n width: 'full',\n },\n bar: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n height: uiHeaderHeight,\n position: 'relative',\n tablet: {\n paddingInlineStart: '20',\n },\n },\n leading: {\n display: 'flex',\n flexShrink: 0,\n tablet: {\n display: 'none',\n },\n },\n spacer: {\n flexShrink: 1,\n width: '48',\n tablet: {\n display: 'none',\n },\n },\n logoBlock: {\n alignItems: 'center',\n display: 'flex',\n flex: 1,\n justifyContent: 'center',\n minWidth: 0,\n tablet: {\n flex: 'none',\n },\n },\n logoLink: {\n borderRadius: '4',\n color: 'text/on-color',\n display: 'flex',\n marginBlockEnd: rem(3),\n },\n actions: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n marginInlineStart: 'auto',\n tablet: {\n paddingInlineEnd: '32',\n },\n },\n banner: {\n width: 'full',\n },\n control: {\n ...controlBase,\n width: '48',\n },\n accountAvatar: {\n borderRadius: 'full',\n display: 'none',\n overflow: 'hidden',\n tablet: {\n display: 'inline-flex',\n },\n },\n accountIcon: {\n display: 'block',\n tablet: {\n display: 'none',\n },\n },\n modeSwitch: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n },\n modeControl: {\n _open: {\n background: 'sys/ui/header/control/bg-active',\n },\n },\n separator: {\n background: 'sys/ui/header/separator',\n height: '20',\n marginInlineEnd: '8',\n marginInlineStart: '12',\n width: '1',\n },\n navButton: {\n ...controlBase,\n paddingBlock: '8',\n paddingInlineEnd: '8',\n paddingInlineStart: '12',\n },\n navButtonBadge: {\n alignItems: 'flex-start',\n background: 'sys/ui/header/bg',\n borderStartStartRadius: '2',\n color: 'icon/on-color',\n display: 'flex',\n height: '12',\n insetBlockEnd: '8',\n insetInlineEnd: '8',\n overflow: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n width: '16',\n },\n navButtonIcon: {\n flexShrink: 0,\n marginBlockStart: rem(-1),\n marginInlineStart: '1',\n },\n badge: {\n background: 'sys/ui/header/badge/red',\n borderRadius: 'full',\n height: '8',\n insetBlockStart: '12',\n insetInlineStart: rem(28),\n pointerEvents: 'none',\n position: 'absolute',\n width: '8',\n '&[data-pulse]': {\n _after: {\n animation: 'ping',\n background: 'sys/ui/header/badge/red',\n borderRadius: 'full',\n content: '\"\"',\n inset: 0,\n opacity: 0.5,\n position: 'absolute',\n _motionReduce: {\n animation: 'none',\n },\n },\n },\n },\n indicator: {\n background: 'sys/ui/header/control/indicator',\n height: '4',\n insetBlockEnd: 0,\n insetInline: 0,\n pointerEvents: 'none',\n position: 'absolute',\n },\n search: {\n display: 'flex',\n flexShrink: 0,\n position: 'relative',\n },\n searchField: {\n alignItems: 'center',\n backgroundColor: 'sys/ui/header/bg',\n backgroundImage: `linear-gradient(0deg, ${SEARCH_FIELD_TINT} 0%, ${SEARCH_FIELD_TINT} 100%)`,\n borderColor: 'border/strong',\n borderRadius: '4',\n borderStyle: 'solid',\n borderWidth: '1',\n display: 'none',\n gap: '8',\n height: '40',\n insetBlockStart: '4',\n insetInlineEnd: 0,\n opacity: 0,\n paddingInlineEnd: '12',\n paddingInlineStart: '8',\n position: 'absolute',\n transitionDuration: 'fast',\n // `visibility` is what takes the closed field out of hit-testing, the tab order and the\n // accessibility tree in one go. Transitioning it keeps the field visible for the whole fade\n // and flips it at the end, which `opacity` alone could not do.\n transitionProperty: 'opacity, visibility',\n transitionTimingFunction: 'ease-out',\n visibility: 'hidden',\n width: SEARCH_FIELD_WIDTH,\n '&:has(input:focus-visible)': {\n boxShadow: '0 0 0 var(--focus-ring-width) var(--focus-ring-color) inset',\n },\n _open: {\n opacity: 1,\n visibility: 'visible',\n },\n _motionReduce: {\n transitionProperty: 'none',\n },\n tablet: {\n display: 'flex',\n },\n },\n searchButton: {\n tablet: {\n _open: {\n visibility: 'hidden',\n },\n },\n },\n searchClear: {\n color: 'icon/on-color',\n flexShrink: 0,\n },\n searchIcon: {\n color: 'icon/on-color',\n flexShrink: 0,\n },\n searchInput: {\n background: 'transparent',\n borderWidth: 0,\n color: 'text/on-color',\n flex: 1,\n minWidth: 0,\n padding: 0,\n textStyle: 'body/lg/regular',\n '&::-webkit-search-cancel-button': { display: 'none' },\n _focusVisible: {\n outline: 'none',\n outlineWidth: 0,\n },\n _placeholder: {\n color: 'text/on-color',\n opacity: 0.6,\n },\n },\n },\n});\n\nexport default uiHeaderSlotRecipe;\n"],"mappings":"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"}
|
|
@@ -525,7 +525,8 @@ declare const slotRecipes: {
|
|
|
525
525
|
md: {
|
|
526
526
|
item: {
|
|
527
527
|
paddingBlock: "8";
|
|
528
|
-
|
|
528
|
+
paddingInlineStart: "16";
|
|
529
|
+
paddingInlineEnd: "24";
|
|
529
530
|
textStyle: "body/md/regular";
|
|
530
531
|
_selected: {
|
|
531
532
|
textStyle: "body/md/semibold";
|
|
@@ -546,7 +547,8 @@ declare const slotRecipes: {
|
|
|
546
547
|
};
|
|
547
548
|
lg: {
|
|
548
549
|
item: {
|
|
549
|
-
|
|
550
|
+
paddingInlineStart: "16";
|
|
551
|
+
paddingInlineEnd: "24";
|
|
550
552
|
paddingBlock: "12";
|
|
551
553
|
textStyle: "body/lg/regular";
|
|
552
554
|
_selected: {
|
|
@@ -666,7 +668,8 @@ declare const slotRecipes: {
|
|
|
666
668
|
gap: "12";
|
|
667
669
|
};
|
|
668
670
|
paddingBlock: "8";
|
|
669
|
-
|
|
671
|
+
paddingInlineStart: "16";
|
|
672
|
+
paddingInlineEnd: "24";
|
|
670
673
|
textStyle: "body/md/regular";
|
|
671
674
|
_selected: {
|
|
672
675
|
textStyle: "body/md/semibold";
|
|
@@ -756,7 +759,8 @@ declare const slotRecipes: {
|
|
|
756
759
|
paddingBlock: "12";
|
|
757
760
|
gap: "12";
|
|
758
761
|
};
|
|
759
|
-
|
|
762
|
+
paddingInlineStart: "16";
|
|
763
|
+
paddingInlineEnd: "24";
|
|
760
764
|
paddingBlock: "12";
|
|
761
765
|
textStyle: "body/lg/regular";
|
|
762
766
|
_selected: {
|
|
@@ -2484,7 +2488,8 @@ declare const slotRecipes: {
|
|
|
2484
2488
|
paddingBlock: "12";
|
|
2485
2489
|
gap: "12";
|
|
2486
2490
|
};
|
|
2487
|
-
|
|
2491
|
+
paddingInlineStart: "16";
|
|
2492
|
+
paddingInlineEnd: "24";
|
|
2488
2493
|
paddingBlock: "12";
|
|
2489
2494
|
textStyle: "body/lg/regular";
|
|
2490
2495
|
_selected: {
|
|
@@ -2550,7 +2555,8 @@ declare const slotRecipes: {
|
|
|
2550
2555
|
gap: "12";
|
|
2551
2556
|
};
|
|
2552
2557
|
paddingBlock: "8";
|
|
2553
|
-
|
|
2558
|
+
paddingInlineStart: "16";
|
|
2559
|
+
paddingInlineEnd: "24";
|
|
2554
2560
|
textStyle: "body/md/regular";
|
|
2555
2561
|
_selected: {
|
|
2556
2562
|
textStyle: "body/md/semibold";
|
|
@@ -3763,7 +3769,7 @@ declare const slotRecipes: {
|
|
|
3763
3769
|
};
|
|
3764
3770
|
};
|
|
3765
3771
|
}>;
|
|
3766
|
-
uiHeader: import('@chakra-ui/react').SlotRecipeDefinition<"search" | "badge" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "searchClear" | "actions" | "navButton" | "accountAvatar" | "accountIcon" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoBlock" | "logoLink", import('@chakra-ui/react').SlotRecipeVariantRecord<"search" | "badge" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "searchClear" | "actions" | "navButton" | "accountAvatar" | "accountIcon" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoBlock" | "logoLink">>;
|
|
3772
|
+
uiHeader: import('@chakra-ui/react').SlotRecipeDefinition<"search" | "badge" | "separator" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "searchClear" | "actions" | "navButton" | "accountAvatar" | "accountIcon" | "modeSwitch" | "modeControl" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoBlock" | "logoLink", import('@chakra-ui/react').SlotRecipeVariantRecord<"search" | "badge" | "separator" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "searchClear" | "actions" | "navButton" | "accountAvatar" | "accountIcon" | "modeSwitch" | "modeControl" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoBlock" | "logoLink">>;
|
|
3767
3773
|
uiSideNav: import('@chakra-ui/react').SlotRecipeDefinition<"link" | "content" | "body" | "footer" | "closeButton" | "root" | "item" | "itemIndicator" | "positioner" | "itemLabel" | "itemIcon" | "backdrop" | "footerSeparator" | "footerHeading" | "linkIconBlock" | "linkTextBlock" | "linkIcon" | "linkStatusDot" | "linkLabel" | "linkSecondaryText" | "workspaceRoot" | "workspaceControl" | "workspace" | "workspaceTextBlock" | "workspaceChevron" | "workspaceMenu" | "workspaceLabel" | "workspaceValue", {
|
|
3768
3774
|
layout: {
|
|
3769
3775
|
rail: {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bitrise/bitkit-v2",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.3.
|
|
4
|
+
"version": "0.3.485-beta.3131",
|
|
5
5
|
"description": "Bitrise Design System Components built with Chakra UI V3",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"react",
|
|
@@ -87,6 +87,7 @@
|
|
|
87
87
|
"react-dom": "^18.3.1",
|
|
88
88
|
"release-it": "^21.1.0",
|
|
89
89
|
"storybook": "10.6.1",
|
|
90
|
+
"svgo": "^3.3.5",
|
|
90
91
|
"tsx": "^4.23.15",
|
|
91
92
|
"typescript": "^6.0.3",
|
|
92
93
|
"vite": "^8.3.3",
|