@bitrise/bitkit 12.111.0 → 12.112.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.111.0",
+  "version": "12.112.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Foundations/docComponents/TokenTable.tsx

@@ -28,7 +28,7 @@ const Row = ({ groupName, token, tokenPrefix, type, value }: RowType) => {
 
   const dotRef = useRef<HTMLDivElement>(null);
 
-  const tokenKey = type === 'color' ? [tokenPrefix, groupName, token].filter(Boolean).join('.') : token;
+  const tokenKey = type === 'color' ? [tokenPrefix, groupName, token].filter(Boolean).join('/') : token;
 
   useEffect(() => {
     if (dotRef.current && hexa.includes('var(')) {

package/src/tokens/tokensToTheme.json

@@ -584,7 +584,255 @@
         "overlay-light": "rgba(sys.bg.contrast, 0.16)",
         "skeleton": "sys.bg.subtle",
         "skeleton-strong": "sys.fg.minimal"
-      }
+      },
+      "brand/primary": "pal.purple.30",
+      "separator/primary": "pal.neutral.90",
+      "sys/fg/base": "pal.neutral.10",
+      "sys/fg/primary": "pal.purple.10",
+      "sys/fg/secondary": "pal.neutral.40",
+      "sys/fg/tertiary": "pal.neutral.60",
+      "sys/fg/subtle": "pal.neutral.70",
+      "sys/fg/minimal": "pal.neutral.80",
+      "sys/fg/positive": "pal.green.50",
+      "sys/fg/negative": "pal.red.50",
+      "sys/fg/on-color": "pal.neutral.100",
+      "sys/fg/on-contrast": "pal.neutral.95",
+      "sys/fg/on-disabled": "pal.neutral.70",
+      "sys/fg/disabled": "pal.neutral.80",
+      "sys/bg/surface": "pal.neutral.100",
+      "sys/bg/contrast": "pal.neutral.10",
+      "sys/bg/moderate": "pal.neutral.90",
+      "sys/bg/subtle": "pal.neutral.93",
+      "sys/bg/minimal": "pal.neutral.95",
+      "sys/bg/disabled": "pal.neutral.95",
+      "sys/bg/transparent": "pal.neutral.100 0%",
+      "sys/border/minimal": "pal.neutral.93",
+      "sys/border/subtle": "pal.neutral.90",
+      "sys/border/strong": "pal.neutral.80",
+      "sys/border/emphasized": "pal.neutral.70",
+      "sys/border/critical": "pal.red.50",
+      "sys/border/inverse": "pal.neutral.100",
+      "sys/border/on-contrast": "pal.neutral.95",
+      "sys/border/disabled": "pal.neutral.90",
+      "sys/primary/base": "pal.purple.40",
+      "sys/primary/emphasized": "pal.purple.30",
+      "sys/primary/contrast": "pal.purple.10",
+      "sys/primary/muted": "pal.purple.80",
+      "sys/primary/subtle": "pal.purple.93",
+      "sys/primary/disabled": "pal.neutral.90",
+      "sys/interactive/base": "pal.purple.50",
+      "sys/interactive/strong": "pal.purple.40",
+      "sys/interactive/bold": "pal.purple.60",
+      "sys/interactive/highlight": "pal.purple.70",
+      "sys/interactive/muted": "pal.purple.80",
+      "sys/interactive/moderate": "pal.purple.90",
+      "sys/interactive/subtle": "pal.purple.93",
+      "sys/interactive/minimal": "pal.purple.95",
+      "sys/interactive/disabled": "pal.neutral.90",
+      "sys/info/base": "pal.blue.50",
+      "sys/info/strong": "pal.blue.40",
+      "sys/info/bold": "pal.blue.60",
+      "sys/info/muted": "pal.blue.80",
+      "sys/info/moderate": "pal.blue.90",
+      "sys/info/subtle": "pal.blue.93",
+      "sys/info/minimal": "pal.blue.95",
+      "sys/success/base": "pal.green.50",
+      "sys/success/strong": "pal.green.40",
+      "sys/success/bold": "pal.green.60",
+      "sys/success/muted": "pal.green.80",
+      "sys/success/moderate": "pal.green.90",
+      "sys/success/subtle": "pal.green.93",
+      "sys/success/minimal": "pal.green.95",
+      "sys/warning/base": "pal.yellow.50",
+      "sys/warning/strong": "pal.yellow.40",
+      "sys/warning/bold": "pal.yellow.60",
+      "sys/warning/muted": "pal.yellow.80",
+      "sys/warning/moderate": "pal.yellow.90",
+      "sys/warning/subtle": "pal.yellow.93",
+      "sys/warning/minimal": "pal.yellow.95",
+      "sys/critical/base": "pal.red.50",
+      "sys/critical/dark": "pal.red.20",
+      "sys/critical/strong": "pal.red.40",
+      "sys/critical/bold": "pal.red.60",
+      "sys/critical/muted": "pal.red.80",
+      "sys/critical/moderate": "pal.red.90",
+      "sys/critical/subtle": "pal.red.93",
+      "sys/critical/minimal": "pal.red.95",
+      "sys/neutral/base": "pal.neutral.50",
+      "sys/neutral/strong": "pal.neutral.40",
+      "sys/neutral/bold": "pal.neutral.60",
+      "sys/neutral/muted": "pal.neutral.80",
+      "sys/neutral/moderate": "pal.neutral.90",
+      "sys/neutral/subtle": "pal.neutral.93",
+      "sys/neutral/minimal": "pal.neutral.95",
+      "sys/orange/base": "pal.orange.50",
+      "sys/orange/strong": "pal.orange.40",
+      "sys/orange/bold": "pal.orange.60",
+      "sys/orange/muted": "pal.orange.80",
+      "sys/orange/moderate": "pal.orange.90",
+      "sys/orange/subtle": "pal.orange.93",
+      "sys/orange/minimal": "pal.orange.95",
+      "sys/turquoise/base": "pal.turquoise.50",
+      "sys/turquoise/strong": "pal.turquoise.40",
+      "sys/turquoise/bold": "pal.turquoise.60",
+      "sys/turquoise/muted": "pal.turquoise.80",
+      "sys/turquoise/moderate": "pal.turquoise.90",
+      "sys/turquoise/subtle": "pal.turquoise.93",
+      "sys/turquoise/minimal": "pal.turquoise.95",
+      "background/primary": "sys.bg.surface",
+      "background/secondary": "sys.bg.minimal",
+      "background/tertiary": "sys.bg.subtle",
+      "background/hover": "sys.bg.subtle",
+      "background/active": "sys.bg.moderate",
+      "background/selected": "sys.interactive.minimal",
+      "background/selected-hover": "sys.interactive.subtle",
+      "background/contrast": "sys.bg.contrast",
+      "background/disabled": "sys.bg.disabled",
+      "border/regular": "sys.border.subtle",
+      "border/minimal": "sys.border.minimal",
+      "border/strong": "sys.border.strong",
+      "border/hover": "sys.border.emphasized",
+      "border/focus": "sys.interactive.highlight",
+      "border/selected": "sys.interactive.base",
+      "border/error": "sys.border.critical",
+      "border/inverse": "sys.border.inverse",
+      "border/on-contrast": "sys.border.on-contrast",
+      "border/disabled": "sys.border.disabled",
+      "text/primary": "sys.fg.primary",
+      "text/secondary": "sys.fg.secondary",
+      "text/tertiary": "sys.fg.tertiary",
+      "text/body": "sys.fg.base",
+      "text/link": "sys.interactive.base",
+      "text/link-hover": "sys.interactive.strong",
+      "text/selected": "sys.interactive.base",
+      "text/positive": "sys.fg.positive",
+      "text/negative": "sys.fg.negative",
+      "text/on-color": "sys.fg.on-color",
+      "text/on-contrast": "sys.fg.on-contrast",
+      "text/on-disabled": "sys.fg.on-disabled",
+      "text/disabled": "sys.fg.disabled",
+      "icon/primary": "sys.fg.primary",
+      "icon/secondary": "sys.fg.secondary",
+      "icon/tertiary": "sys.fg.tertiary",
+      "icon/interactive": "sys.interactive.base",
+      "icon/interactive-hover": "sys.interactive.strong",
+      "icon/positive": "sys.fg.positive",
+      "icon/negative": "sys.fg.negative",
+      "icon/on-color": "sys.fg.on-color",
+      "icon/on-contrast": "sys.fg.on-contrast",
+      "icon/on-disabled": "sys.fg.on-disabled",
+      "icon/disabled": "sys.fg.disabled",
+      "button/primary/bg": "sys.primary.base",
+      "button/primary/bg-hover": "sys.primary.emphasized",
+      "button/primary/bg-active": "sys.fg.primary",
+      "button/primary/bg-disabled": "sys.primary.disabled",
+      "button/primary/fg": "sys.fg.on-color",
+      "button/primary/fg-hover": "sys.fg.on-color",
+      "button/primary/fg-active": "sys.fg.on-color",
+      "button/primary/fg-disabled": "sys.fg.on-disabled",
+      "button/secondary/bg": "sys.bg.surface",
+      "button/secondary/bg-hover": "sys.bg.subtle",
+      "button/secondary/bg-active": "sys.bg.moderate",
+      "button/secondary/bg-disabled": "sys.bg.minimal",
+      "button/secondary/fg": "sys.fg.primary",
+      "button/secondary/fg-hover": "sys.fg.primary",
+      "button/secondary/fg-active": "sys.fg.primary",
+      "button/secondary/fg-disabled": "sys.fg.disabled",
+      "button/secondary/border": "sys.border.strong",
+      "button/secondary/border-hover": "sys.border.emphasized",
+      "button/secondary/border-active": "sys.border.emphasized",
+      "button/secondary/border-disabled": "sys.border.disabled",
+      "button/tertiary/bg": "sys.bg.transparent",
+      "button/tertiary/bg-hover": "sys.bg.subtle",
+      "button/tertiary/bg-active": "sys.bg.moderate",
+      "button/tertiary/bg-disabled": "sys.bg.transparent",
+      "button/tertiary/fg": "sys.interactive.base",
+      "button/tertiary/fg-hover": "sys.interactive.strong",
+      "button/tertiary/fg-active": "sys.fg.primary",
+      "button/tertiary/fg-disabled": "sys.fg.disabled",
+      "button/danger-primary/bg": "sys.critical.base",
+      "button/danger-primary/bg-hover": "sys.critical.strong",
+      "button/danger-primary/bg-active": "sys.critical.dark",
+      "button/danger-primary/bg-disabled": "sys.primary.disabled",
+      "button/danger-primary/fg": "sys.fg.on-color",
+      "button/danger-primary/fg-hover": "sys.fg.on-color",
+      "button/danger-primary/fg-active": "sys.fg.on-color",
+      "button/danger-primary/fg-disabled": "sys.fg.on-disabled",
+      "button/danger-secondary/bg": "sys.bg.surface",
+      "button/danger-secondary/bg-hover": "sys.critical.minimal",
+      "button/danger-secondary/bg-active": "sys.critical.moderate",
+      "button/danger-secondary/bg-disabled": "sys.bg.minimal",
+      "button/danger-secondary/fg": "sys.critical.base",
+      "button/danger-secondary/fg-hover": "sys.critical.base",
+      "button/danger-secondary/fg-active": "sys.critical.strong",
+      "button/danger-secondary/fg-disabled": "sys.fg.disabled",
+      "button/danger-secondary/border": "sys.critical.muted",
+      "button/danger-secondary/border-hover": "sys.critical.muted",
+      "button/danger-secondary/border-active": "sys.critical.base",
+      "button/danger-secondary/border-disabled": "sys.border.disabled",
+      "button/danger-tertiary/bg": "sys.bg.transparent",
+      "button/danger-tertiary/bg-hover": "sys.critical.minimal",
+      "button/danger-tertiary/bg-active": "sys.critical.moderate",
+      "button/danger-tertiary/bg-disabled": "sys.bg.transparent",
+      "button/danger-tertiary/fg": "sys.critical.base",
+      "button/danger-tertiary/fg-hover": "sys.critical.base",
+      "button/danger-tertiary/fg-active": "sys.critical.strong",
+      "button/danger-tertiary/fg-disabled": "sys.fg.disabled",
+      "input/text/label": "sys.fg.primary",
+      "input/text/inputValue": "sys.fg.base",
+      "input/text/placeholder": "sys.fg.subtle",
+      "input/text/helper": "sys.fg.secondary",
+      "input/text/error": "sys.fg.negative",
+      "input/checkbox/selection": "sys.interactive.base",
+      "input/checkbox/selection-disabled": "sys.interactive.disabled",
+      "input/toggle/frameOn": "sys.success.bold",
+      "input/toggle/frameOn-disabled": "rgba(sys.success.bold,0.5)",
+      "input/toggle/frameOff": "sys.neutral.bold",
+      "input/toggle/frameOff-disabled": "rgba(sys.neutral.bold,0.5)",
+      "input/toggle/slideOn": "sys.bg.surface",
+      "input/toggle/slideOn-disabled": "sys.bg.surface",
+      "input/toggle/slideOff": "sys.bg.surface",
+      "input/toggle/slideOff-disabled": "sys.bg.surface",
+      "status/info/bg": "sys.info.minimal",
+      "status/info/bg-hover": "sys.info.subtle",
+      "status/info/bg-active": "sys.info.moderate",
+      "status/info/border": "sys.info.muted",
+      "status/info/icon": "sys.info.strong",
+      "status/info/text": "sys.info.strong",
+      "status/success/bg": "sys.success.minimal",
+      "status/success/bg-hover": "sys.success.subtle",
+      "status/success/bg-active": "sys.success.moderate",
+      "status/success/border": "sys.success.muted",
+      "status/success/icon": "sys.success.strong",
+      "status/success/text": "sys.success.strong",
+      "status/warning/bg": "sys.warning.minimal",
+      "status/warning/bg-hover": "sys.warning.subtle",
+      "status/warning/bg-active": "sys.warning.moderate",
+      "status/warning/border": "sys.warning.muted",
+      "status/warning/icon": "sys.warning.strong",
+      "status/warning/text": "sys.warning.strong",
+      "status/critical/bg": "sys.critical.minimal",
+      "status/critical/bg-hover": "sys.critical.subtle",
+      "status/critical/bg-active": "sys.critical.moderate",
+      "status/critical/border": "sys.critical.muted",
+      "status/critical/icon": "sys.critical.strong",
+      "status/critical/text": "sys.critical.strong",
+      "status/progress/bg": "sys.interactive.minimal",
+      "status/progress/bg-hover": "sys.interactive.subtle",
+      "status/progress/bg-active": "sys.interactive.moderate",
+      "status/progress/border": "sys.interactive.muted",
+      "status/progress/icon": "sys.interactive.strong",
+      "status/progress/text": "sys.interactive.strong",
+      "status/neutral/bg": "sys.neutral.minimal",
+      "status/neutral/bg-hover": "sys.neutral.subtle",
+      "status/neutral/bg-active": "sys.neutral.moderate",
+      "status/neutral/border": "sys.neutral.muted",
+      "status/neutral/icon": "sys.neutral.strong",
+      "status/neutral/text": "sys.neutral.strong",
+      "utilities/overlay": "rgba(sys.bg.contrast, 0.8)",
+      "utilities/overlay-light": "rgba(sys.bg.contrast, 0.16)",
+      "utilities/skeleton": "sys.bg.subtle",
+      "utilities/skeleton-strong": "sys.fg.minimal"
     }
   },
   "sizes": {