@bitrise/bitkit-v2 0.3.254 → 0.3.255-beta.1719
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/BitkitCalendar/components/CalendarNextTrigger.js +1 -1
- package/dist/components/BitkitCalendar/components/CalendarNextTrigger.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarPrevTrigger.js +1 -1
- package/dist/components/BitkitCalendar/components/CalendarPrevTrigger.js.map +1 -1
- package/dist/components/BitkitLabel/BitkitLabel.js +1 -1
- package/dist/components/BitkitLabel/BitkitLabel.js.map +1 -1
- package/dist/components/BitkitSwitch/components/BitkitSwitchHelperText.js +1 -1
- package/dist/components/BitkitSwitch/components/BitkitSwitchHelperText.js.map +1 -1
- package/dist/components/BitkitSwitch/components/BitkitSwitchLabel.js +1 -1
- package/dist/components/BitkitSwitch/components/BitkitSwitchLabel.js.map +1 -1
- package/dist/components/BitkitTable/BitkitExpandableRow.js +1 -1
- package/dist/components/BitkitTable/BitkitExpandableRow.js.map +1 -1
- package/dist/theme/recipes/Badge.recipe.d.ts +1 -1
- package/dist/theme/recipes/Badge.recipe.js +2 -2
- package/dist/theme/recipes/Badge.recipe.js.map +1 -1
- package/dist/theme/recipes/Button.recipe.js +9 -8
- package/dist/theme/recipes/Button.recipe.js.map +1 -1
- package/dist/theme/recipes/ToggleButton.recipe.js +3 -3
- package/dist/theme/recipes/ToggleButton.recipe.js.map +1 -1
- package/dist/theme/recipes/index.d.ts +1 -1
- package/dist/theme/semantic-tokens/index.d.ts +263 -48
- package/dist/theme/semantic-tokens/semanticColors.d.ts +263 -48
- package/dist/theme/semantic-tokens/semanticColors.js +103 -60
- package/dist/theme/semantic-tokens/semanticColors.js.map +1 -1
- package/dist/theme/slot-recipes/Field.recipe.js +2 -2
- package/dist/theme/slot-recipes/Field.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/NoteCard.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/NoteCard.recipe.js +1 -1
- package/dist/theme/slot-recipes/NoteCard.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/NumberInput.recipe.js +4 -4
- package/dist/theme/slot-recipes/NumberInput.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/SplitButton.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/SplitButton.recipe.js +1 -1
- package/dist/theme/slot-recipes/SplitButton.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +2 -2
- package/dist/theme/tokens/colors.d.ts +3 -0
- package/dist/theme/tokens/colors.js +1 -0
- package/dist/theme/tokens/colors.js.map +1 -1
- package/dist/theme/tokens/index.d.ts +3 -0
- package/docs/design-tokens.md +94 -0
- package/package.json +2 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Field.recipe.ts"],"sourcesContent":["import { fieldAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst fieldSlotRecipe = defineSlotRecipe({\n className: 'field',\n slots: fieldAnatomy.keys(),\n base: {\n root: {\n width: '100%',\n _invalid: {\n width: '100%',\n },\n },\n label: {\n display: 'flex',\n gap: '4',\n alignItems: 'center',\n width: '100%',\n color: 'input/text/label',\n textStyle: 'comp/input/label',\n marginBlockEnd: '4',\n '& > span': {\n marginInlineStart: '2',\n color: '
|
|
1
|
+
{"version":3,"file":"Field.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Field.recipe.ts"],"sourcesContent":["import { fieldAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst fieldSlotRecipe = defineSlotRecipe({\n className: 'field',\n slots: fieldAnatomy.keys(),\n base: {\n root: {\n width: '100%',\n _invalid: {\n width: '100%',\n },\n },\n label: {\n display: 'flex',\n gap: '4',\n alignItems: 'center',\n width: '100%',\n color: 'input/text/label',\n textStyle: 'comp/input/label',\n marginBlockEnd: '4',\n '& > span': {\n marginInlineStart: '2',\n color: 'text/helper',\n fontWeight: 'normal',\n },\n '[data-disabled] &': {\n color: 'text/disabled',\n '& > span': {\n color: 'text/disabled',\n },\n },\n },\n errorText: {\n display: 'block',\n marginBlockStart: '4',\n textStyle: 'comp/input/helperText',\n color: 'input/text/error',\n },\n helperText: {\n display: 'block',\n marginBlockStart: '4',\n textStyle: 'comp/input/helperText',\n color: 'text/helper',\n '[data-disabled] &': {\n color: 'text/disabled',\n },\n },\n },\n});\n\nexport default fieldSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,kBAAkB,iBAAiB;CACvC,WAAW;CACX,OAAO,aAAa,KAAK;CACzB,MAAM;EACJ,MAAM;GACJ,OAAO;GACP,UAAU,EACR,OAAO,OACT;EACF;EACA,OAAO;GACL,SAAS;GACT,KAAK;GACL,YAAY;GACZ,OAAO;GACP,OAAO;GACP,WAAW;GACX,gBAAgB;GAChB,YAAY;IACV,mBAAmB;IACnB,OAAO;IACP,YAAY;GACd;GACA,qBAAqB;IACnB,OAAO;IACP,YAAY,EACV,OAAO,gBACT;GACF;EACF;EACA,WAAW;GACT,SAAS;GACT,kBAAkB;GAClB,WAAW;GACX,OAAO;EACT;EACA,YAAY;GACV,SAAS;GACT,kBAAkB;GAClB,WAAW;GACX,OAAO;GACP,qBAAqB,EACnB,OAAO,gBACT;EACF;CACF;AACF,CAAC"}
|
|
@@ -94,7 +94,7 @@ var noteCardSlotRecipe = defineSlotRecipe({
|
|
|
94
94
|
variants: { status: {
|
|
95
95
|
ai: {
|
|
96
96
|
iconBar: {
|
|
97
|
-
background: "ai/background/minimal-vertical",
|
|
97
|
+
background: "gradient/ai/background/minimal-vertical",
|
|
98
98
|
color: SIDEBAR_ICON_COLOR_MAP.ai
|
|
99
99
|
},
|
|
100
100
|
messageSolo: { color: TITLE_COLOR_MAP.ai },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NoteCard.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/NoteCard.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { type NotificationVariant } from '../common/AlertAndToast.common';\n\nconst SIDEBAR_ICON_COLOR_MAP: Record<NotificationVariant, string> = {\n ai: 'color/indigo/base',\n critical: 'color/red/base',\n info: 'color/blue/base',\n progress: 'color/purple/base',\n success: 'color/green/base',\n warning: 'color/yellow/base',\n};\n\nconst TITLE_COLOR_MAP: Record<NotificationVariant, string> = {\n ai: 'status/ai/text',\n critical: 'text/negative',\n info: 'text/primary',\n progress: 'text/secondary',\n success: 'text/positive',\n warning: 'text/primary',\n};\n\nconst getStatusVariant = (v: NotificationVariant) => ({\n iconBar: {\n backgroundColor: `status/${v}/bg`,\n color: SIDEBAR_ICON_COLOR_MAP[v],\n },\n messageSolo: { color: TITLE_COLOR_MAP[v] },\n root: { borderColor: `status/${v}/border` },\n title: { color: TITLE_COLOR_MAP[v] },\n});\n\nconst noteCardSlotRecipe = defineSlotRecipe({\n className: 'note-card',\n slots: ['root', 'iconBar', 'iconWrapper', 'content', 'messageBlock', 'title', 'message', 'messageSolo', 'actionArea'],\n base: {\n root: {\n alignItems: 'stretch',\n backgroundColor: 'background/primary',\n border: '1px solid',\n borderRadius: '8',\n display: 'flex',\n overflow: 'hidden',\n },\n iconBar: {\n alignItems: 'flex-start',\n display: 'flex',\n flexShrink: 0,\n justifyContent: 'center',\n paddingBlock: '12',\n paddingInline: '8',\n },\n iconWrapper: {\n alignItems: 'center',\n display: 'flex',\n height: '24',\n justifyContent: 'center',\n width: '24',\n },\n content: {\n alignItems: 'center',\n display: 'flex',\n flex: 1,\n gap: '24',\n minWidth: 0,\n paddingBlock: '12',\n paddingInlineEnd: '16',\n paddingInlineStart: '12',\n },\n messageBlock: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n gap: '4',\n minWidth: 0,\n width: '100%',\n },\n title: {\n textStyle: 'comp/notification/title',\n },\n message: {\n textStyle: 'comp/notification/message',\n color: 'text/body',\n },\n messageSolo: {\n paddingBlockStart: '2',\n textStyle: 'comp/notification/message',\n },\n actionArea: {\n flexShrink: 0,\n },\n },\n variants: {\n status: {\n ai: {\n iconBar: {\n background: 'ai/background/minimal-vertical',\n color: SIDEBAR_ICON_COLOR_MAP.ai,\n },\n messageSolo: { color: TITLE_COLOR_MAP.ai },\n root: {\n backgroundColor: 'transparent',\n border: '1px solid transparent',\n background:\n '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',\n },\n title: { color: TITLE_COLOR_MAP.ai },\n },\n critical: getStatusVariant('critical'),\n info: getStatusVariant('info'),\n progress: getStatusVariant('progress'),\n success: getStatusVariant('success'),\n warning: getStatusVariant('warning'),\n },\n },\n defaultVariants: {\n status: 'info',\n },\n});\n\nexport default noteCardSlotRecipe;\n"],"mappings":";;AAIA,IAAM,yBAA8D;CAClE,IAAI;CACJ,UAAU;CACV,MAAM;CACN,UAAU;CACV,SAAS;CACT,SAAS;AACX;AAEA,IAAM,kBAAuD;CAC3D,IAAI;CACJ,UAAU;CACV,MAAM;CACN,UAAU;CACV,SAAS;CACT,SAAS;AACX;AAEA,IAAM,oBAAoB,OAA4B;CACpD,SAAS;EACP,iBAAiB,UAAU,EAAE;EAC7B,OAAO,uBAAuB;CAChC;CACA,aAAa,EAAE,OAAO,gBAAgB,GAAG;CACzC,MAAM,EAAE,aAAa,UAAU,EAAE,SAAS;CAC1C,OAAO,EAAE,OAAO,gBAAgB,GAAG;AACrC;AAEA,IAAM,qBAAqB,iBAAiB;CAC1C,WAAW;CACX,OAAO;EAAC;EAAQ;EAAW;EAAe;EAAW;EAAgB;EAAS;EAAW;EAAe;CAAY;CACpH,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,iBAAiB;GACjB,QAAQ;GACR,cAAc;GACd,SAAS;GACT,UAAU;EACZ;EACA,SAAS;GACP,YAAY;GACZ,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,cAAc;GACd,eAAe;EACjB;EACA,aAAa;GACX,YAAY;GACZ,SAAS;GACT,QAAQ;GACR,gBAAgB;GAChB,OAAO;EACT;EACA,SAAS;GACP,YAAY;GACZ,SAAS;GACT,MAAM;GACN,KAAK;GACL,UAAU;GACV,cAAc;GACd,kBAAkB;GAClB,oBAAoB;EACtB;EACA,cAAc;GACZ,SAAS;GACT,MAAM;GACN,eAAe;GACf,KAAK;GACL,UAAU;GACV,OAAO;EACT;EACA,OAAO,EACL,WAAW,0BACb;EACA,SAAS;GACP,WAAW;GACX,OAAO;EACT;EACA,aAAa;GACX,mBAAmB;GACnB,WAAW;EACb;EACA,YAAY,EACV,YAAY,EACd;CACF;CACA,UAAU,EACR,QAAQ;EACN,IAAI;GACF,SAAS;IACP,YAAY;IACZ,OAAO,uBAAuB;GAChC;GACA,aAAa,EAAE,OAAO,gBAAgB,GAAG;GACzC,MAAM;IACJ,iBAAiB;IACjB,QAAQ;IACR,YACE;GACJ;GACA,OAAO,EAAE,OAAO,gBAAgB,GAAG;EACrC;EACA,UAAU,iBAAiB,UAAU;EACrC,MAAM,iBAAiB,MAAM;EAC7B,UAAU,iBAAiB,UAAU;EACrC,SAAS,iBAAiB,SAAS;EACnC,SAAS,iBAAiB,SAAS;CACrC,EACF;CACA,iBAAiB,EACf,QAAQ,OACV;AACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"NoteCard.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/NoteCard.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { type NotificationVariant } from '../common/AlertAndToast.common';\n\nconst SIDEBAR_ICON_COLOR_MAP: Record<NotificationVariant, string> = {\n ai: 'color/indigo/base',\n critical: 'color/red/base',\n info: 'color/blue/base',\n progress: 'color/purple/base',\n success: 'color/green/base',\n warning: 'color/yellow/base',\n};\n\nconst TITLE_COLOR_MAP: Record<NotificationVariant, string> = {\n ai: 'status/ai/text',\n critical: 'text/negative',\n info: 'text/primary',\n progress: 'text/secondary',\n success: 'text/positive',\n warning: 'text/primary',\n};\n\nconst getStatusVariant = (v: NotificationVariant) => ({\n iconBar: {\n backgroundColor: `status/${v}/bg`,\n color: SIDEBAR_ICON_COLOR_MAP[v],\n },\n messageSolo: { color: TITLE_COLOR_MAP[v] },\n root: { borderColor: `status/${v}/border` },\n title: { color: TITLE_COLOR_MAP[v] },\n});\n\nconst noteCardSlotRecipe = defineSlotRecipe({\n className: 'note-card',\n slots: ['root', 'iconBar', 'iconWrapper', 'content', 'messageBlock', 'title', 'message', 'messageSolo', 'actionArea'],\n base: {\n root: {\n alignItems: 'stretch',\n backgroundColor: 'background/primary',\n border: '1px solid',\n borderRadius: '8',\n display: 'flex',\n overflow: 'hidden',\n },\n iconBar: {\n alignItems: 'flex-start',\n display: 'flex',\n flexShrink: 0,\n justifyContent: 'center',\n paddingBlock: '12',\n paddingInline: '8',\n },\n iconWrapper: {\n alignItems: 'center',\n display: 'flex',\n height: '24',\n justifyContent: 'center',\n width: '24',\n },\n content: {\n alignItems: 'center',\n display: 'flex',\n flex: 1,\n gap: '24',\n minWidth: 0,\n paddingBlock: '12',\n paddingInlineEnd: '16',\n paddingInlineStart: '12',\n },\n messageBlock: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n gap: '4',\n minWidth: 0,\n width: '100%',\n },\n title: {\n textStyle: 'comp/notification/title',\n },\n message: {\n textStyle: 'comp/notification/message',\n color: 'text/body',\n },\n messageSolo: {\n paddingBlockStart: '2',\n textStyle: 'comp/notification/message',\n },\n actionArea: {\n flexShrink: 0,\n },\n },\n variants: {\n status: {\n ai: {\n iconBar: {\n background: 'gradient/ai/background/minimal-vertical',\n color: SIDEBAR_ICON_COLOR_MAP.ai,\n },\n messageSolo: { color: TITLE_COLOR_MAP.ai },\n root: {\n backgroundColor: 'transparent',\n border: '1px solid transparent',\n background:\n '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',\n },\n title: { color: TITLE_COLOR_MAP.ai },\n },\n critical: getStatusVariant('critical'),\n info: getStatusVariant('info'),\n progress: getStatusVariant('progress'),\n success: getStatusVariant('success'),\n warning: getStatusVariant('warning'),\n },\n },\n defaultVariants: {\n status: 'info',\n },\n});\n\nexport default noteCardSlotRecipe;\n"],"mappings":";;AAIA,IAAM,yBAA8D;CAClE,IAAI;CACJ,UAAU;CACV,MAAM;CACN,UAAU;CACV,SAAS;CACT,SAAS;AACX;AAEA,IAAM,kBAAuD;CAC3D,IAAI;CACJ,UAAU;CACV,MAAM;CACN,UAAU;CACV,SAAS;CACT,SAAS;AACX;AAEA,IAAM,oBAAoB,OAA4B;CACpD,SAAS;EACP,iBAAiB,UAAU,EAAE;EAC7B,OAAO,uBAAuB;CAChC;CACA,aAAa,EAAE,OAAO,gBAAgB,GAAG;CACzC,MAAM,EAAE,aAAa,UAAU,EAAE,SAAS;CAC1C,OAAO,EAAE,OAAO,gBAAgB,GAAG;AACrC;AAEA,IAAM,qBAAqB,iBAAiB;CAC1C,WAAW;CACX,OAAO;EAAC;EAAQ;EAAW;EAAe;EAAW;EAAgB;EAAS;EAAW;EAAe;CAAY;CACpH,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,iBAAiB;GACjB,QAAQ;GACR,cAAc;GACd,SAAS;GACT,UAAU;EACZ;EACA,SAAS;GACP,YAAY;GACZ,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,cAAc;GACd,eAAe;EACjB;EACA,aAAa;GACX,YAAY;GACZ,SAAS;GACT,QAAQ;GACR,gBAAgB;GAChB,OAAO;EACT;EACA,SAAS;GACP,YAAY;GACZ,SAAS;GACT,MAAM;GACN,KAAK;GACL,UAAU;GACV,cAAc;GACd,kBAAkB;GAClB,oBAAoB;EACtB;EACA,cAAc;GACZ,SAAS;GACT,MAAM;GACN,eAAe;GACf,KAAK;GACL,UAAU;GACV,OAAO;EACT;EACA,OAAO,EACL,WAAW,0BACb;EACA,SAAS;GACP,WAAW;GACX,OAAO;EACT;EACA,aAAa;GACX,mBAAmB;GACnB,WAAW;EACb;EACA,YAAY,EACV,YAAY,EACd;CACF;CACA,UAAU,EACR,QAAQ;EACN,IAAI;GACF,SAAS;IACP,YAAY;IACZ,OAAO,uBAAuB;GAChC;GACA,aAAa,EAAE,OAAO,gBAAgB,GAAG;GACzC,MAAM;IACJ,iBAAiB;IACjB,QAAQ;IACR,YACE;GACJ;GACA,OAAO,EAAE,OAAO,gBAAgB,GAAG;EACrC;EACA,UAAU,iBAAiB,UAAU;EACrC,MAAM,iBAAiB,MAAM;EAC7B,UAAU,iBAAiB,UAAU;EACrC,SAAS,iBAAiB,SAAS;EACnC,SAAS,iBAAiB,SAAS;CACrC,EACF;CACA,iBAAiB,EACf,QAAQ,OACV;AACF,CAAC"}
|
|
@@ -22,17 +22,17 @@ var triggerStyle = defineStyle({
|
|
|
22
22
|
userSelect: "none",
|
|
23
23
|
cursor: "pointer",
|
|
24
24
|
width: "var(--stepper-width)",
|
|
25
|
-
color: "button/secondary/
|
|
25
|
+
color: "button/secondary/text",
|
|
26
26
|
_disabled: {
|
|
27
|
-
color: "button/secondary/
|
|
27
|
+
color: "button/secondary/text-disabled",
|
|
28
28
|
cursor: "not-allowed"
|
|
29
29
|
},
|
|
30
30
|
_hover: {
|
|
31
|
-
color: "button/secondary/
|
|
31
|
+
color: "button/secondary/text-hover",
|
|
32
32
|
backgroundColor: "button/tertiary/bg-hover"
|
|
33
33
|
},
|
|
34
34
|
_active: {
|
|
35
|
-
color: "button/secondary/
|
|
35
|
+
color: "button/secondary/text-active",
|
|
36
36
|
backgroundColor: "button/tertiary/bg-active"
|
|
37
37
|
}
|
|
38
38
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/NumberInput.recipe.ts"],"sourcesContent":["import { numberInputAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe, defineStyle } from '@chakra-ui/react/styled-system';\n\nimport inputRecipe from '../recipes/Input.recipe';\nimport { rem } from '../themeUtils';\n\nexport const triggerSeparatorStyle = defineStyle({\n content: '\"\"',\n position: 'absolute',\n top: '50%',\n left: '-1px',\n transform: 'translateY(-50%)',\n width: '1',\n height: '24',\n backgroundColor: 'border/minimal',\n});\n\nconst triggerStyle = defineStyle({\n position: 'relative',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n flex: '1',\n userSelect: 'none',\n cursor: 'pointer',\n width: 'var(--stepper-width)',\n color: 'button/secondary/
|
|
1
|
+
{"version":3,"file":"NumberInput.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/NumberInput.recipe.ts"],"sourcesContent":["import { numberInputAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe, defineStyle } from '@chakra-ui/react/styled-system';\n\nimport inputRecipe from '../recipes/Input.recipe';\nimport { rem } from '../themeUtils';\n\nexport const triggerSeparatorStyle = defineStyle({\n content: '\"\"',\n position: 'absolute',\n top: '50%',\n left: '-1px',\n transform: 'translateY(-50%)',\n width: '1',\n height: '24',\n backgroundColor: 'border/minimal',\n});\n\nconst triggerStyle = defineStyle({\n position: 'relative',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n flex: '1',\n userSelect: 'none',\n cursor: 'pointer',\n width: 'var(--stepper-width)',\n color: 'button/secondary/text',\n _disabled: {\n color: 'button/secondary/text-disabled',\n cursor: 'not-allowed',\n },\n _hover: {\n color: 'button/secondary/text-hover',\n backgroundColor: 'button/tertiary/bg-hover',\n },\n _active: {\n color: 'button/secondary/text-active',\n backgroundColor: 'button/tertiary/bg-active',\n },\n});\n\nexport const numberInputSlotRecipe = defineSlotRecipe({\n className: 'number-input',\n slots: numberInputAnatomy.keys(),\n base: {\n root: {\n position: 'relative',\n zIndex: '0',\n isolation: 'isolate',\n '--control-width': rem(100),\n },\n input: {\n ...inputRecipe.base,\n verticalAlign: 'top',\n paddingInlineEnd: `var(--control-width) !important`,\n },\n control: {\n display: 'flex',\n gap: '1',\n position: 'absolute',\n top: 0,\n insetEnd: 0,\n margin: '1',\n height: 'calc(100% - 2px)',\n zIndex: '1',\n },\n incrementTrigger: {\n ...triggerStyle,\n borderTopEndRadius: '4',\n borderBottomEndRadius: '4',\n _before: triggerSeparatorStyle,\n },\n decrementTrigger: {\n ...triggerStyle,\n },\n valueText: {\n fontWeight: 'medium',\n fontFeatureSettings: 'pnum',\n fontVariantNumeric: 'proportional-nums',\n },\n },\n variants: {\n size: {\n md: {\n input: inputRecipe.variants?.size.md,\n control: {\n '--stepper-width': rem(40),\n },\n },\n lg: {\n input: inputRecipe.variants?.size.lg,\n control: {\n '--stepper-width': rem(48),\n },\n },\n },\n },\n\n defaultVariants: {\n size: 'lg',\n },\n});\n\nexport default numberInputSlotRecipe;\n"],"mappings":";;;;;AAMA,IAAa,wBAAwB,YAAY;CAC/C,SAAS;CACT,UAAU;CACV,KAAK;CACL,MAAM;CACN,WAAW;CACX,OAAO;CACP,QAAQ;CACR,iBAAiB;AACnB,CAAC;AAED,IAAM,eAAe,YAAY;CAC/B,UAAU;CACV,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,MAAM;CACN,YAAY;CACZ,QAAQ;CACR,OAAO;CACP,OAAO;CACP,WAAW;EACT,OAAO;EACP,QAAQ;CACV;CACA,QAAQ;EACN,OAAO;EACP,iBAAiB;CACnB;CACA,SAAS;EACP,OAAO;EACP,iBAAiB;CACnB;AACF,CAAC;AAED,IAAa,wBAAwB,iBAAiB;CACpD,WAAW;CACX,OAAO,mBAAmB,KAAK;CAC/B,MAAM;EACJ,MAAM;GACJ,UAAU;GACV,QAAQ;GACR,WAAW;GACX,mBAAmB,IAAI,GAAG;EAC5B;EACA,OAAO;GACL,GAAG,YAAY;GACf,eAAe;GACf,kBAAkB;EACpB;EACA,SAAS;GACP,SAAS;GACT,KAAK;GACL,UAAU;GACV,KAAK;GACL,UAAU;GACV,QAAQ;GACR,QAAQ;GACR,QAAQ;EACV;EACA,kBAAkB;GAChB,GAAG;GACH,oBAAoB;GACpB,uBAAuB;GACvB,SAAS;EACX;EACA,kBAAkB,EAChB,GAAG,aACL;EACA,WAAW;GACT,YAAY;GACZ,qBAAqB;GACrB,oBAAoB;EACtB;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,OAAO,YAAY,UAAU,KAAK;GAClC,SAAS,EACP,mBAAmB,IAAI,EAAE,EAC3B;EACF;EACA,IAAI;GACF,OAAO,YAAY,UAAU,KAAK;GAClC,SAAS,EACP,mBAAmB,IAAI,EAAE,EAC3B;EACF;CACF,EACF;CAEA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
|
|
@@ -27,7 +27,7 @@ declare const splitButtonSlotRecipe: import('@chakra-ui/react').SlotRecipeDefini
|
|
|
27
27
|
_open: {
|
|
28
28
|
backgroundColor: "button/secondary/bg-active";
|
|
29
29
|
borderColor: "button/secondary/border-active";
|
|
30
|
-
color: "button/secondary/
|
|
30
|
+
color: "button/secondary/text-active";
|
|
31
31
|
};
|
|
32
32
|
};
|
|
33
33
|
};
|
|
@@ -34,7 +34,7 @@ var splitButtonSlotRecipe = defineSlotRecipe({
|
|
|
34
34
|
secondary: { trigger: { _open: {
|
|
35
35
|
backgroundColor: "button/secondary/bg-active",
|
|
36
36
|
borderColor: "button/secondary/border-active",
|
|
37
|
-
color: "button/secondary/
|
|
37
|
+
color: "button/secondary/text-active"
|
|
38
38
|
} } }
|
|
39
39
|
} },
|
|
40
40
|
defaultVariants: { variant: "primary" }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SplitButton.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/SplitButton.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst splitButtonSlotRecipe = defineSlotRecipe({\n slots: ['root', 'action', 'trigger'],\n className: 'split-button',\n base: {\n action: {\n borderStartEndRadius: 0,\n borderEndEndRadius: 0,\n },\n trigger: {\n borderStartStartRadius: 0,\n borderEndStartRadius: 0,\n },\n },\n variants: {\n variant: {\n primary: {\n trigger: {\n borderWidth: '0',\n borderInlineStartWidth: rem(1),\n borderInlineStartColor: 'border/on-contrast',\n _hover: {\n borderInlineStartColor: 'border/on-contrast',\n _active: {\n borderInlineStartColor: 'border/on-contrast',\n },\n },\n _active: {\n borderInlineStartColor: 'border/on-contrast',\n },\n _disabled: {\n borderInlineStartColor: 'border/on-contrast',\n },\n _open: {\n backgroundColor: 'button/primary/bg-active',\n },\n },\n },\n secondary: {\n trigger: {\n _open: {\n backgroundColor: 'button/secondary/bg-active',\n borderColor: 'button/secondary/border-active',\n color: 'button/secondary/
|
|
1
|
+
{"version":3,"file":"SplitButton.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/SplitButton.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst splitButtonSlotRecipe = defineSlotRecipe({\n slots: ['root', 'action', 'trigger'],\n className: 'split-button',\n base: {\n action: {\n borderStartEndRadius: 0,\n borderEndEndRadius: 0,\n },\n trigger: {\n borderStartStartRadius: 0,\n borderEndStartRadius: 0,\n },\n },\n variants: {\n variant: {\n primary: {\n trigger: {\n borderWidth: '0',\n borderInlineStartWidth: rem(1),\n borderInlineStartColor: 'border/on-contrast',\n _hover: {\n borderInlineStartColor: 'border/on-contrast',\n _active: {\n borderInlineStartColor: 'border/on-contrast',\n },\n },\n _active: {\n borderInlineStartColor: 'border/on-contrast',\n },\n _disabled: {\n borderInlineStartColor: 'border/on-contrast',\n },\n _open: {\n backgroundColor: 'button/primary/bg-active',\n },\n },\n },\n secondary: {\n trigger: {\n _open: {\n backgroundColor: 'button/secondary/bg-active',\n borderColor: 'button/secondary/border-active',\n color: 'button/secondary/text-active',\n },\n },\n },\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n});\n\nexport default splitButtonSlotRecipe;\n"],"mappings":";;;AAIA,IAAM,wBAAwB,iBAAiB;CAC7C,OAAO;EAAC;EAAQ;EAAU;CAAS;CACnC,WAAW;CACX,MAAM;EACJ,QAAQ;GACN,sBAAsB;GACtB,oBAAoB;EACtB;EACA,SAAS;GACP,wBAAwB;GACxB,sBAAsB;EACxB;CACF;CACA,UAAU,EACR,SAAS;EACP,SAAS,EACP,SAAS;GACP,aAAa;GACb,wBAAwB,IAAI,CAAC;GAC7B,wBAAwB;GACxB,QAAQ;IACN,wBAAwB;IACxB,SAAS,EACP,wBAAwB,qBAC1B;GACF;GACA,SAAS,EACP,wBAAwB,qBAC1B;GACA,WAAW,EACT,wBAAwB,qBAC1B;GACA,OAAO,EACL,iBAAiB,2BACnB;EACF,EACF;EACA,WAAW,EACT,SAAS,EACP,OAAO;GACL,iBAAiB;GACjB,aAAa;GACb,OAAO;EACT,EACF,EACF;CACF,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC"}
|
|
@@ -1161,7 +1161,7 @@ declare const slotRecipes: {
|
|
|
1161
1161
|
status: {
|
|
1162
1162
|
ai: {
|
|
1163
1163
|
iconBar: {
|
|
1164
|
-
background: "ai/background/minimal-vertical";
|
|
1164
|
+
background: "gradient/ai/background/minimal-vertical";
|
|
1165
1165
|
color: string;
|
|
1166
1166
|
};
|
|
1167
1167
|
messageSolo: {
|
|
@@ -1797,7 +1797,7 @@ declare const slotRecipes: {
|
|
|
1797
1797
|
_open: {
|
|
1798
1798
|
backgroundColor: "button/secondary/bg-active";
|
|
1799
1799
|
borderColor: "button/secondary/border-active";
|
|
1800
|
-
color: "button/secondary/
|
|
1800
|
+
color: "button/secondary/text-active";
|
|
1801
1801
|
};
|
|
1802
1802
|
};
|
|
1803
1803
|
};
|
|
@@ -11,6 +11,7 @@ var colors = defineTokens.colors({
|
|
|
11
11
|
"60": { value: "rgba(255, 255, 255, 0.6)" },
|
|
12
12
|
"70": { value: "rgba(255, 255, 255, 0.7)" },
|
|
13
13
|
"80": { value: "rgba(255, 255, 255, 0.8)" },
|
|
14
|
+
"85": { value: "rgba(255, 255, 255, 0.85)" },
|
|
14
15
|
"90": { value: "rgba(255, 255, 255, 0.9)" },
|
|
15
16
|
"100": { value: "rgb(255, 255, 255)" }
|
|
16
17
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colors.js","names":[],"sources":["../../../lib/theme/tokens/colors.ts"],"sourcesContent":["import { defineTokens } from '@chakra-ui/react/styled-system';\n\nconst colors = defineTokens.colors({\n white: {\n '10': { value: 'rgba(255, 255, 255, 0.1)' },\n '15': { value: 'rgba(255, 255, 255, 0.15)' },\n '20': { value: 'rgba(255, 255, 255, 0.2)' },\n '30': { value: 'rgba(255, 255, 255, 0.3)' },\n '40': { value: 'rgba(255, 255, 255, 0.4)' },\n '50': { value: 'rgba(255, 255, 255, 0.5)' },\n '60': { value: 'rgba(255, 255, 255, 0.6)' },\n '70': { value: 'rgba(255, 255, 255, 0.7)' },\n '80': { value: 'rgba(255, 255, 255, 0.8)' },\n '90': { value: 'rgba(255, 255, 255, 0.9)' },\n '100': { value: 'rgb(255, 255, 255)' },\n },\n neutral: {\n '10': { value: '#201b22' },\n '20': { value: '#362d39' },\n '30': { value: '#49404f' },\n '40': { value: '#6b6071' },\n '50': { value: '#7d7184' },\n '60': { value: '#94879b' },\n '70': { value: '#afa4b4' },\n '80': { value: '#c9c1cd' },\n '90': { value: '#dfdae1' },\n '93': { value: '#efebef' },\n '95': { value: '#f6f4f6' },\n '100': { value: '#fff' },\n },\n purple: {\n '10': { value: '#2b0e3f' },\n '20': { value: '#421560' },\n '30': { value: '#5c2a7e' },\n '40': { value: '#7b3ba5' },\n '50': { value: '#9247c2' },\n '60': { value: '#ae63de' },\n '70': { value: '#c289e6' },\n '80': { value: '#d5adeb' },\n '90': { value: '#ead4f2' },\n '93': { value: '#f3e7f9' },\n '95': { value: '#f9f2fd' },\n },\n indigo: {\n '10': { value: '#1f1844' },\n '20': { value: '#2d2363' },\n '30': { value: '#423786' },\n '40': { value: '#5a50b2' },\n '50': { value: '#6d65d6' },\n '60': { value: '#8281ec' },\n '70': { value: '#9ca1f8' },\n '80': { value: '#b7bffc' },\n '90': { value: '#cdd5fe' },\n '93': { value: '#e5e9fa' },\n '95': { value: '#f1f4fd' },\n },\n red: {\n '10': { value: '#47060c' },\n '20': { value: '#630811' },\n '30': { value: '#78111c' },\n '40': { value: '#a91e2e' },\n '50': { value: '#d72d40' },\n '60': { value: '#f7596c' },\n '70': { value: '#ff8091' },\n '80': { value: '#ffa8b5' },\n '90': { value: '#ffccd5' },\n '93': { value: '#ffe5eb' },\n '95': { value: '#fff0f3' },\n },\n orange: {\n '10': { value: '#421000' },\n '20': { value: '#661900' },\n '30': { value: '#7a2200' },\n '40': { value: '#a33500' },\n '50': { value: '#d45202' },\n '60': { value: '#ed720c' },\n '70': { value: '#fd9730' },\n '80': { value: '#ffb766' },\n '90': { value: '#ffd5a3' },\n '93': { value: '#ffe9cf' },\n '95': { value: '#fff4e5' },\n },\n yellow: {\n '10': { value: '#2e1c00' },\n '20': { value: '#4d2f00' },\n '30': { value: '#613e00' },\n '40': { value: '#875b00' },\n '50': { value: '#b27e00' },\n '60': { value: '#d6a200' },\n '70': { value: '#ebba00' },\n '80': { value: '#f9cc15' },\n '90': { value: '#fbe074' },\n '93': { value: '#ffefad' },\n '95': { value: '#fff6d1' },\n },\n green: {\n '10': { value: '#042a0f' },\n '20': { value: '#064217' },\n '30': { value: '#0b5620' },\n '40': { value: '#167231' },\n '50': { value: '#2a9d4c' },\n '60': { value: '#4eb76c' },\n '70': { value: '#77cf8f' },\n '80': { value: '#a1deb2' },\n '90': { value: '#c3eace' },\n '93': { value: '#e1f4e7' },\n '95': { value: '#eef9f1' },\n },\n turquoise: {\n '10': { value: '#002924' },\n '20': { value: '#003d36' },\n '30': { value: '#005248' },\n '40': { value: '#007366' },\n '50': { value: '#009e8e' },\n '60': { value: '#11bba9' },\n '70': { value: '#55cec3' },\n '80': { value: '#8ae0d7' },\n '90': { value: '#aeefe8' },\n '93': { value: '#d8f8f4' },\n '95': { value: '#e9fbf9' },\n },\n blue: {\n '10': { value: '#002442' },\n '20': { value: '#00315c' },\n '30': { value: '#044781' },\n '40': { value: '#1066ac' },\n '50': { value: '#2582d0' },\n '60': { value: '#4f9bde' },\n '70': { value: '#71b8ef' },\n '80': { value: '#99d1f5' },\n '90': { value: '#c2e7fa' },\n '93': { value: '#def2fc' },\n '95': { value: '#ecf8fd' },\n },\n});\n\nexport default colors;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"colors.js","names":[],"sources":["../../../lib/theme/tokens/colors.ts"],"sourcesContent":["import { defineTokens } from '@chakra-ui/react/styled-system';\n\nconst colors = defineTokens.colors({\n white: {\n '10': { value: 'rgba(255, 255, 255, 0.1)' },\n '15': { value: 'rgba(255, 255, 255, 0.15)' },\n '20': { value: 'rgba(255, 255, 255, 0.2)' },\n '30': { value: 'rgba(255, 255, 255, 0.3)' },\n '40': { value: 'rgba(255, 255, 255, 0.4)' },\n '50': { value: 'rgba(255, 255, 255, 0.5)' },\n '60': { value: 'rgba(255, 255, 255, 0.6)' },\n '70': { value: 'rgba(255, 255, 255, 0.7)' },\n '80': { value: 'rgba(255, 255, 255, 0.8)' },\n '85': { value: 'rgba(255, 255, 255, 0.85)' },\n '90': { value: 'rgba(255, 255, 255, 0.9)' },\n '100': { value: 'rgb(255, 255, 255)' },\n },\n neutral: {\n '10': { value: '#201b22' },\n '20': { value: '#362d39' },\n '30': { value: '#49404f' },\n '40': { value: '#6b6071' },\n '50': { value: '#7d7184' },\n '60': { value: '#94879b' },\n '70': { value: '#afa4b4' },\n '80': { value: '#c9c1cd' },\n '90': { value: '#dfdae1' },\n '93': { value: '#efebef' },\n '95': { value: '#f6f4f6' },\n '100': { value: '#fff' },\n },\n purple: {\n '10': { value: '#2b0e3f' },\n '20': { value: '#421560' },\n '30': { value: '#5c2a7e' },\n '40': { value: '#7b3ba5' },\n '50': { value: '#9247c2' },\n '60': { value: '#ae63de' },\n '70': { value: '#c289e6' },\n '80': { value: '#d5adeb' },\n '90': { value: '#ead4f2' },\n '93': { value: '#f3e7f9' },\n '95': { value: '#f9f2fd' },\n },\n indigo: {\n '10': { value: '#1f1844' },\n '20': { value: '#2d2363' },\n '30': { value: '#423786' },\n '40': { value: '#5a50b2' },\n '50': { value: '#6d65d6' },\n '60': { value: '#8281ec' },\n '70': { value: '#9ca1f8' },\n '80': { value: '#b7bffc' },\n '90': { value: '#cdd5fe' },\n '93': { value: '#e5e9fa' },\n '95': { value: '#f1f4fd' },\n },\n red: {\n '10': { value: '#47060c' },\n '20': { value: '#630811' },\n '30': { value: '#78111c' },\n '40': { value: '#a91e2e' },\n '50': { value: '#d72d40' },\n '60': { value: '#f7596c' },\n '70': { value: '#ff8091' },\n '80': { value: '#ffa8b5' },\n '90': { value: '#ffccd5' },\n '93': { value: '#ffe5eb' },\n '95': { value: '#fff0f3' },\n },\n orange: {\n '10': { value: '#421000' },\n '20': { value: '#661900' },\n '30': { value: '#7a2200' },\n '40': { value: '#a33500' },\n '50': { value: '#d45202' },\n '60': { value: '#ed720c' },\n '70': { value: '#fd9730' },\n '80': { value: '#ffb766' },\n '90': { value: '#ffd5a3' },\n '93': { value: '#ffe9cf' },\n '95': { value: '#fff4e5' },\n },\n yellow: {\n '10': { value: '#2e1c00' },\n '20': { value: '#4d2f00' },\n '30': { value: '#613e00' },\n '40': { value: '#875b00' },\n '50': { value: '#b27e00' },\n '60': { value: '#d6a200' },\n '70': { value: '#ebba00' },\n '80': { value: '#f9cc15' },\n '90': { value: '#fbe074' },\n '93': { value: '#ffefad' },\n '95': { value: '#fff6d1' },\n },\n green: {\n '10': { value: '#042a0f' },\n '20': { value: '#064217' },\n '30': { value: '#0b5620' },\n '40': { value: '#167231' },\n '50': { value: '#2a9d4c' },\n '60': { value: '#4eb76c' },\n '70': { value: '#77cf8f' },\n '80': { value: '#a1deb2' },\n '90': { value: '#c3eace' },\n '93': { value: '#e1f4e7' },\n '95': { value: '#eef9f1' },\n },\n turquoise: {\n '10': { value: '#002924' },\n '20': { value: '#003d36' },\n '30': { value: '#005248' },\n '40': { value: '#007366' },\n '50': { value: '#009e8e' },\n '60': { value: '#11bba9' },\n '70': { value: '#55cec3' },\n '80': { value: '#8ae0d7' },\n '90': { value: '#aeefe8' },\n '93': { value: '#d8f8f4' },\n '95': { value: '#e9fbf9' },\n },\n blue: {\n '10': { value: '#002442' },\n '20': { value: '#00315c' },\n '30': { value: '#044781' },\n '40': { value: '#1066ac' },\n '50': { value: '#2582d0' },\n '60': { value: '#4f9bde' },\n '70': { value: '#71b8ef' },\n '80': { value: '#99d1f5' },\n '90': { value: '#c2e7fa' },\n '93': { value: '#def2fc' },\n '95': { value: '#ecf8fd' },\n },\n});\n\nexport default colors;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
# Design tokens — source of truth & sync
|
|
2
|
+
|
|
3
|
+
How bitkit-v2's color tokens relate to the design source, and how to keep them in sync.
|
|
4
|
+
|
|
5
|
+
## The pipeline
|
|
6
|
+
|
|
7
|
+
The **source of truth is the design team's Tokens Studio export** — a single
|
|
8
|
+
`tokens.json` (DTCG / Figma Tokens format) generated from Figma. It currently
|
|
9
|
+
lives in the `bitkit-tokens` repo at `data/tokens.json`.
|
|
10
|
+
|
|
11
|
+
bitkit-v2 holds **hand-maintained** token files that mirror that source:
|
|
12
|
+
|
|
13
|
+
| source (`tokens.json`) | bitkit-v2 file |
|
|
14
|
+
| -------------------------------------------------------- | ------------------------------------------- |
|
|
15
|
+
| `core/color-primitives.core` (`purple.50`, `red.40`, …) | `lib/theme/tokens/colors.ts` (primitives) |
|
|
16
|
+
| `semantic/theme-light.{color,sys,…}` | `lib/theme/semantic-tokens/semanticColors.ts` |
|
|
17
|
+
| `components/colors.{background,text,icon,button,status,gradient,…}` | `lib/theme/semantic-tokens/semanticColors.ts` |
|
|
18
|
+
|
|
19
|
+
When the source changes (it does, in small increments), re-sync bitkit's files
|
|
20
|
+
to match. **The JSON wins** on any conflict — including over the
|
|
21
|
+
`bitkit-color-tokens.xlsx` worksheet, which is a human-readable side view and
|
|
22
|
+
can lag behind.
|
|
23
|
+
|
|
24
|
+
## Checking for drift
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
# 1. fetch the current source (auth via gh)
|
|
28
|
+
gh api repos/<owner>/bitkit-tokens/contents/data/tokens.json --jq '.content' | base64 -d > /tmp/tokens.json
|
|
29
|
+
|
|
30
|
+
# 2. diff it against bitkit's token files
|
|
31
|
+
npm run theme:diff-tokens -- /tmp/tokens.json
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
The script (`scripts/diff-design-tokens.cjs`) reports, for the primitive and
|
|
35
|
+
semantic+component layers:
|
|
36
|
+
|
|
37
|
+
- tokens the **source has but bitkit is missing**,
|
|
38
|
+
- tokens **bitkit has but the source doesn't** (renamed / stale / intentional extra),
|
|
39
|
+
- **light value/reference mismatches** on the common tokens.
|
|
40
|
+
|
|
41
|
+
Values are compared canonically, so equivalent spellings (`#fff` ≡ `#ffffff`,
|
|
42
|
+
`core.purple.50` ≡ `colors.purple.50`) are **not** flagged.
|
|
43
|
+
|
|
44
|
+
After any change, run `npm run theme:generate-types` then `npm run type-check`.
|
|
45
|
+
|
|
46
|
+
## Naming & layering conventions
|
|
47
|
+
|
|
48
|
+
- **Primitives** are dot-separated (`purple.50`, `white.10`) and live in `colors.ts`.
|
|
49
|
+
- **Semantic / component** tokens are slash-separated (`color/purple/base`,
|
|
50
|
+
`sys/bg/surface`, `button/primary/bg`, `gradient/ai/background/base`).
|
|
51
|
+
- References use the `{colors.…}` prefix: `{colors.purple.50}` (primitive) or
|
|
52
|
+
`{colors.sys/bg/surface}` (semantic).
|
|
53
|
+
- **`sys/*` and primitives are pruned from consumer autocomplete** (see
|
|
54
|
+
`scripts/prune-color-tokens.cjs`). They still resolve at runtime; they're just
|
|
55
|
+
hidden so consumers reach for the component layer (`color/*`, `background/*`,
|
|
56
|
+
`text/*`, `gradient/*`, …). App-shell tokens (`sys/ui/header/*`,
|
|
57
|
+
`sys/ui/sidenav/*`) are therefore intentionally hidden — they're for bitkit's
|
|
58
|
+
own header/sidenav components.
|
|
59
|
+
|
|
60
|
+
## Runtime constraint: why some values can't match the source verbatim
|
|
61
|
+
|
|
62
|
+
bitkit resolves token references to **CSS custom properties** at runtime
|
|
63
|
+
(`var(--colors-purple-50)`). Two source spellings are therefore impossible to
|
|
64
|
+
reproduce and are deliberately expressed differently — **same rendered color**:
|
|
65
|
+
|
|
66
|
+
1. **A reference inside a composite value** (gradient, `color-mix`). Chakra
|
|
67
|
+
parses any `/` inside `{…}` as a `color-mix` opacity delimiter and **throws**.
|
|
68
|
+
So gradients **inline the dot-primitive** instead of referencing the semantic
|
|
69
|
+
token:
|
|
70
|
+
- source: `linear-gradient(90deg, rgba({color.purple.minimal}, 1) 0%, …)`
|
|
71
|
+
- bitkit: `linear-gradient(90deg, {colors.purple.95} 0%, …)`
|
|
72
|
+
2. **Alpha via `rgba({ref}, a)`**. `rgba(var(--x), 0.5)` is invalid CSS, so
|
|
73
|
+
bitkit uses `color-mix(in srgb, {colors.x} 50%, transparent)` (and a literal
|
|
74
|
+
`rgba(255, 255, 255, 0)` for fully-transparent tokens).
|
|
75
|
+
|
|
76
|
+
A drift report that only flags these representation differences means bitkit is
|
|
77
|
+
**fully in sync**.
|
|
78
|
+
|
|
79
|
+
## Out of scope (intentional)
|
|
80
|
+
|
|
81
|
+
- **Dark theme** — the source ships a full `semantic/theme-dark` layer and a
|
|
82
|
+
`dark` primitive scale. bitkit does **not** implement dark mode yet, so these
|
|
83
|
+
are intentionally absent. _(Later task — revisit when dark mode is on the roadmap.)_
|
|
84
|
+
- **brand** — the source's `brand/*` primitives (and `brand/primary`) are "not
|
|
85
|
+
in design" for bitkit and were intentionally dropped.
|
|
86
|
+
|
|
87
|
+
## Notes on specific tokens
|
|
88
|
+
|
|
89
|
+
- **`text/helper`** is the canonical helper-text color. bitkit previously also
|
|
90
|
+
had `input/text/helper` (a duplicate); it was removed in favour of
|
|
91
|
+
`text/helper`. Consumer repos may still reference `input/text/helper` — migrate
|
|
92
|
+
them on the next bump.
|
|
93
|
+
- **`sys/interactive/*`** was removed (the source dropped it); the component
|
|
94
|
+
layer `interactive/*` is the replacement.
|
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.255-beta.1719",
|
|
5
5
|
"description": "Bitrise Design System Components built with Chakra UI V3",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"react",
|
|
@@ -42,6 +42,7 @@
|
|
|
42
42
|
"storybook": "storybook dev -p 6006",
|
|
43
43
|
"build-storybook": "storybook build",
|
|
44
44
|
"theme:generate-types": "chakra typegen lib/theme/index.ts && node ./scripts/prune-color-tokens.cjs",
|
|
45
|
+
"theme:diff-tokens": "node ./scripts/diff-design-tokens.cjs",
|
|
45
46
|
"theme:watch": "chakra typegen lib/theme/index.ts --watch",
|
|
46
47
|
"lint": "eslint .",
|
|
47
48
|
"lint:fix": "eslint . --fix",
|