@vkontakte/vkui-tokens 4.0.0 → 4.2.0

package/themes/vkIOSDark/index.json

@@ -0,0 +1,667 @@
+{
+	"themeName": "vkIOSDark",
+	"themeNameBase": "vkIOS",
+	"fontFamilyAccent": "\"TT Commons\", -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif",
+	"fontFamilyBase": "-apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif",
+	"fontWeightAccent1": 400,
+	"fontWeightAccent2": 500,
+	"fontWeightAccent3": 600,
+	"fontWeightBase1": 400,
+	"fontWeightBase2": 500,
+	"fontWeightBase3": 600,
+	"fontTitle1": {
+		"regular": {
+			"fontSize": 24,
+			"lineHeight": 28,
+			"letterSpacing": "-0.48px",
+			"fontFamily": "\"TT Commons\", -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif",
+			"fontWeight": 600
+		}
+	},
+	"fontTitle2": {
+		"regular": {
+			"fontSize": 20,
+			"lineHeight": 24,
+			"letterSpacing": "-0.4px",
+			"fontFamily": "\"TT Commons\", -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif",
+			"fontWeight": 600
+		}
+	},
+	"fontTitle3": {
+		"regular": {
+			"fontSize": 17,
+			"lineHeight": 22,
+			"letterSpacing": "-0.22px",
+			"fontFamily": "\"TT Commons\", -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif",
+			"fontWeight": 600
+		}
+	},
+	"fontHeadline": {
+		"regular": {
+			"fontSize": 16,
+			"lineHeight": 20,
+			"letterSpacing": "-0.16px",
+			"fontFamily": "\"TT Commons\", -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif",
+			"fontWeight": 500
+		}
+	},
+	"fontText": {
+		"regular": {
+			"fontSize": 15,
+			"lineHeight": 20,
+			"letterSpacing": "-0.1px",
+			"fontFamily": "-apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif",
+			"fontWeight": 400
+		},
+		"compact": {
+			"fontSize": 16,
+			"lineHeight": 20,
+			"letterSpacing": "-0.16px"
+		}
+	},
+	"fontSubhead": {
+		"regular": {
+			"fontSize": 14,
+			"lineHeight": 18,
+			"letterSpacing": "-0.06px",
+			"fontFamily": "-apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif",
+			"fontWeight": 400
+		}
+	},
+	"fontFootnote": {
+		"regular": {
+			"fontSize": 13,
+			"lineHeight": 16,
+			"letterSpacing": "0px",
+			"fontFamily": "-apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif",
+			"fontWeight": 400
+		}
+	},
+	"fontFootnoteCaps": {
+		"regular": {
+			"fontSize": 13,
+			"lineHeight": 16,
+			"letterSpacing": "0.3px",
+			"fontFamily": "-apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif",
+			"fontWeight": 400,
+			"textTransform": "uppercase"
+		}
+	},
+	"fontCaption1": {
+		"regular": {
+			"fontSize": 12,
+			"lineHeight": 14,
+			"letterSpacing": "0.06px",
+			"fontFamily": "-apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif",
+			"fontWeight": 400
+		}
+	},
+	"fontCaption1Caps": {
+		"regular": {
+			"fontSize": 12,
+			"lineHeight": 14,
+			"letterSpacing": "0.2px",
+			"fontFamily": "-apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif",
+			"fontWeight": 600,
+			"textTransform": "uppercase"
+		}
+	},
+	"fontCaption2": {
+		"regular": {
+			"fontSize": 11,
+			"lineHeight": 14,
+			"letterSpacing": "0.11px",
+			"fontFamily": "-apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif",
+			"fontWeight": 400
+		}
+	},
+	"fontCaption2Caps": {
+		"regular": {
+			"fontSize": 11,
+			"lineHeight": 14,
+			"letterSpacing": "0.3px",
+			"fontFamily": "-apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif",
+			"fontWeight": 600,
+			"textTransform": "uppercase"
+		}
+	},
+	"fontCaption3": {
+		"regular": {
+			"fontSize": 9,
+			"lineHeight": 12,
+			"letterSpacing": "0.18px",
+			"fontFamily": "-apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif",
+			"fontWeight": 400
+		}
+	},
+	"fontCaption3Caps": {
+		"regular": {
+			"fontSize": 9,
+			"lineHeight": 12,
+			"letterSpacing": "0.3px",
+			"fontFamily": "-apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif",
+			"fontWeight": 600,
+			"textTransform": "uppercase"
+		}
+	},
+	"sizeSelectIconPadding": {
+		"regular": 6,
+		"compact": 7
+	},
+	"sizePopupBasePadding": {
+		"regular": 32,
+		"compact": 20
+	},
+	"sizePopupHeaderPadding": {
+		"regular": 24,
+		"compact": 16
+	},
+	"sizeLabelHorizontalMargin": {
+		"regular": 16
+	},
+	"sizeBorderRadius": {
+		"regular": 10
+	},
+	"sizeCheckBorderRadius": {
+		"regular": 4
+	},
+	"sizeBorderRadiusPaper": {
+		"regular": 12
+	},
+	"sizeBorderRadiusPromo": {
+		"regular": 20
+	},
+	"sizeFieldHeight": {
+		"regular": 44,
+		"compact": 36
+	},
+	"sizeButtonLargeHeight": {
+		"regular": 44,
+		"compact": 36
+	},
+	"sizeButtonMediumHeight": {
+		"regular": 36,
+		"compact": 32
+	},
+	"sizeButtonSmallHeight": {
+		"regular": 30,
+		"compact": 28
+	},
+	"sizeCheckbox": {
+		"regular": 16
+	},
+	"sizeArrow": {
+		"regular": 8
+	},
+	"sizeArrowPromo": {
+		"regular": 40
+	},
+	"sizePopupSmall": {
+		"regular": 420
+	},
+	"sizePopupMedium": {
+		"regular": 680
+	},
+	"sizePopupLarge": {
+		"regular": 880
+	},
+	"sizeFieldHorizontalPadding": {
+		"regular": 12
+	},
+	"sizeButtonPaddingHorizontal": {
+		"regular": 12
+	},
+	"sizeArrowPadding": {
+		"regular": 12
+	},
+	"sizeTooltipMargin": {
+		"regular": 8
+	},
+	"sizeIconUI": {
+		"regular": 16
+	},
+	"sizeAvatarXS": {
+		"regular": 24
+	},
+	"sizeAvatarS": {
+		"regular": 32
+	},
+	"sizeAvatarM": {
+		"regular": 48
+	},
+	"sizeAvatarL": {
+		"regular": 96
+	},
+	"sizeAvatarXL": {
+		"regular": 128
+	},
+	"sizeBadgeXS": {
+		"regular": 12
+	},
+	"sizeBadgeS": {
+		"regular": 16
+	},
+	"sizeBadgeM": {
+		"regular": 24
+	},
+	"sizeBadgeL": {
+		"regular": 44
+	},
+	"sizeBadgeXL": {
+		"regular": 56
+	},
+	"sizeCardgridPadding": {
+		"regular": 8
+	},
+	"sizeCardBorderRadius": {
+		"regular": 10
+	},
+	"sizeCardgridPaddingVertical": {
+		"regular": 8
+	},
+	"sizeBasePaddingHorizontal": {
+		"regular": 16
+	},
+	"elevation1": "0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06)",
+	"elevation2": "0px 0px 2px rgba(0, 0, 0, 0.04), 0px 4px 4px rgba(0, 0, 0, 0.08)",
+	"elevation3": "0px 0px 4px rgba(0, 0, 0, 0.08), 0px 8px 8px rgba(0, 0, 0, 0.16)",
+	"elevation4": "0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16)",
+	"animationDurationL": "0.4s",
+	"animationDurationM": "0.2s",
+	"animationDurationS": "0.1s",
+	"animationEasingDefault": "cubic-bezier(0.3, 0.3, 0.5, 1)",
+	"opacityDisable": 0.4,
+	"opacityDisableAccessibility": 0.64,
+	"colorsScheme": "dark",
+	"colorBackgroundAccent": {
+		"normal": "#529EF4",
+		"hover": "#59A2F4",
+		"active": "#60A6F5"
+	},
+	"colorBackgroundAccentThemed": {
+		"normal": "#FFFFFF",
+		"hover": "#FFFFFF",
+		"active": "#FFFFFF"
+	},
+	"colorBackgroundAccentAlternative": {
+		"normal": "#529EF4",
+		"hover": "#59A2F4",
+		"active": "#60A6F5"
+	},
+	"colorIconAccent": {
+		"normal": "#529EF4",
+		"hover": "#59A2F4",
+		"active": "#60A6F5"
+	},
+	"colorTextAccent": {
+		"normal": "#529EF4",
+		"hover": "#59A2F4",
+		"active": "#60A6F5"
+	},
+	"colorTextAccentThemed": {
+		"normal": "#FFFFFF",
+		"hover": "#FFFFFF",
+		"active": "#FFFFFF"
+	},
+	"colorStrokeAccent": {
+		"normal": "#529EF4",
+		"hover": "#59A2F4",
+		"active": "#60A6F5"
+	},
+	"colorStrokeAccentThemed": {
+		"normal": "#FFFFFF",
+		"hover": "#FFFFFF",
+		"active": "#FFFFFF"
+	},
+	"colorStrokeContrast": {
+		"normal": "#FFFFFF",
+		"hover": "#FFFFFF",
+		"active": "#FFFFFF"
+	},
+	"colorActionSheetText": {
+		"normal": "#529EF4",
+		"hover": "#59A2F4",
+		"active": "#60A6F5"
+	},
+	"colorBackgroundContent": {
+		"normal": "#19191A",
+		"hover": "#222223",
+		"active": "#2B2B2C"
+	},
+	"colorBackgroundSecondary": {
+		"normal": "#232324",
+		"hover": "#2C2C2D",
+		"active": "#353536"
+	},
+	"colorBackgroundSecondaryAlpha": {
+		"normal": "rgba(255, 255, 255, 0.04)",
+		"hover": "rgba(255, 255, 255, 0.08)",
+		"active": "rgba(255, 255, 255, 0.12)"
+	},
+	"colorBackgroundTertiary": {
+		"normal": "#202021",
+		"hover": "#29292A",
+		"active": "#323233"
+	},
+	"colorBackground": {
+		"normal": "#0A0A0A",
+		"hover": "#141414",
+		"active": "#1E1E1E"
+	},
+	"colorBackgroundContrast": {
+		"normal": "#FFFFFF",
+		"hover": "#FFFFFF",
+		"active": "#FFFFFF"
+	},
+	"colorBackgroundContrastSecondaryAlpha": {
+		"normal": "rgba(255, 255, 255, 0.20)",
+		"hover": "rgba(255, 255, 255, 0.24)",
+		"active": "rgba(255, 255, 255, 0.28)"
+	},
+	"colorBackgroundWarning": {
+		"normal": "#6C4A00",
+		"hover": "#72510A",
+		"active": "#785814"
+	},
+	"colorBackgroundNegative": {
+		"normal": "#E64646",
+		"hover": "#E74D4D",
+		"active": "#E85555"
+	},
+	"colorBackgroundNegativeTint": {
+		"normal": "#522E2E",
+		"hover": "#593636",
+		"active": "#603F3F"
+	},
+	"colorTextNegative": {
+		"normal": "#E64646",
+		"hover": "#E74D4D",
+		"active": "#E85555"
+	},
+	"colorIconNegative": {
+		"normal": "#E64646",
+		"hover": "#E74D4D",
+		"active": "#E85555"
+	},
+	"colorStrokeNegative": {
+		"normal": "#E64646",
+		"hover": "#E74D4D",
+		"active": "#E85555"
+	},
+	"colorHeaderBackground": {
+		"normal": "#19191A",
+		"hover": "#222223",
+		"active": "#2B2B2C"
+	},
+	"colorPanelHeaderIcon": {
+		"normal": "#71AAEB",
+		"hover": "#77ADEC",
+		"active": "#7CB1ED"
+	},
+	"colorIconPrimary": {
+		"normal": "#E1E3E6",
+		"hover": "#E2E4E7",
+		"active": "#E3E5E8"
+	},
+	"colorIconPrimaryInvariably": {
+		"normal": "#2C2D2E",
+		"hover": "#343536",
+		"active": "#3D3E3F"
+	},
+	"colorIconMedium": {
+		"normal": "#B0B1B6",
+		"hover": "#B3B4B9",
+		"active": "#B6B7BC"
+	},
+	"colorIconMediumAlpha": {
+		"normal": "rgba(241, 247, 255, 0.66)",
+		"hover": "rgba(241, 247, 255, 0.7000000000000001)",
+		"active": "rgba(241, 247, 255, 0.74)"
+	},
+	"colorIconSecondary": {
+		"normal": "#76787A",
+		"hover": "#7B7D7F",
+		"active": "#818385"
+	},
+	"colorIconSecondaryAlpha": {
+		"normal": "rgba(0, 0, 0, 0.43)",
+		"hover": "rgba(0, 0, 0, 0.47000000000000003)",
+		"active": "rgba(0, 0, 0, 0.51)"
+	},
+	"colorIconTertiary": {
+		"normal": "#5D5F61",
+		"hover": "#636567",
+		"active": "#6A6C6E"
+	},
+	"colorIconTertiaryAlpha": {
+		"normal": "rgba(255, 255, 255, 0.3)",
+		"hover": "rgba(255, 255, 255, 0.34)",
+		"active": "rgba(255, 255, 255, 0.38)"
+	},
+	"colorImageBorderAlpha": {
+		"normal": "rgba(255, 255, 255, 0.08)",
+		"hover": "rgba(255, 255, 255, 0.12)",
+		"active": "rgba(255, 255, 255, 0.16)"
+	},
+	"colorWriteBarInputBackground": {
+		"normal": "#232324",
+		"hover": "#2C2C2D",
+		"active": "#353536"
+	},
+	"colorWriteBarInputBorderAlpha": {
+		"normal": "rgba(255, 255, 255, 0.8)",
+		"hover": "rgba(255, 255, 255, 0.84)",
+		"active": "rgba(255, 255, 255, 0.88)"
+	},
+	"colorTrackBackground": {
+		"normal": "#202021",
+		"hover": "#29292A",
+		"active": "#323233"
+	},
+	"colorTrackBuffer": {
+		"normal": "#405772",
+		"hover": "#485E78",
+		"active": "#4F647D"
+	},
+	"colorBackgroundModal": {
+		"normal": "#2D2D2E",
+		"hover": "#353536",
+		"active": "#3E3E3F"
+	},
+	"colorImagePlaceholderAlpha": {
+		"normal": "rgba(241, 247, 255, 0.08)",
+		"hover": "rgba(241, 247, 255, 0.12)",
+		"active": "rgba(241, 247, 255, 0.16)"
+	},
+	"colorImagePlaceholder": {
+		"normal": "#2A2B2C",
+		"hover": "#333334",
+		"active": "#3B3C3D"
+	},
+	"colorSearchFieldBackground": {
+		"normal": "#232324",
+		"hover": "#2C2C2D",
+		"active": "#353536"
+	},
+	"colorFieldBorderAlpha": {
+		"normal": "rgba(255, 255, 255, 0.12)",
+		"hover": "rgba(255, 255, 255, 0.16)",
+		"active": "rgba(255, 255, 255, 0.2)"
+	},
+	"colorSeparatorPrimaryAlpha": {
+		"normal": "rgba(0, 0, 0, 0.4)",
+		"hover": "rgba(0, 0, 0, 0.44)",
+		"active": "rgba(0, 0, 0, 0.48)"
+	},
+	"colorSeparatorSecondary": {
+		"normal": "#141415",
+		"hover": "#1D1D1E",
+		"active": "#272728"
+	},
+	"colorSeparatorPrimary": {
+		"normal": "#0F0F10",
+		"hover": "#19191A",
+		"active": "#222223"
+	},
+	"colorTextLink": {
+		"normal": "#529EF4",
+		"hover": "#59A2F4",
+		"active": "#60A6F5"
+	},
+	"colorTextLinkThemed": {
+		"normal": "#FFFFFF",
+		"hover": "#FFFFFF",
+		"active": "#FFFFFF"
+	},
+	"colorTextMuted": {
+		"normal": "#E1E3E6",
+		"hover": "#E2E4E7",
+		"active": "#E3E5E8"
+	},
+	"colorTextPrimary": {
+		"normal": "#E1E3E6",
+		"hover": "#E2E4E7",
+		"active": "#E3E5E8"
+	},
+	"colorTextPrimaryInvariably": {
+		"normal": "#000000",
+		"hover": "#0A0A0A",
+		"active": "#141414"
+	},
+	"colorTextSecondary": {
+		"normal": "#76787A",
+		"hover": "#7B7D7F",
+		"active": "#818385"
+	},
+	"colorTextSubhead": {
+		"normal": "#C1C3C6",
+		"hover": "#C3C5C8",
+		"active": "#C6C8CB"
+	},
+	"colorTextTertiary": {
+		"normal": "#636567",
+		"hover": "#696B6D",
+		"active": "#6F7173"
+	},
+	"colorWriteBarIcon": {
+		"normal": "#529EF4",
+		"hover": "#59A2F4",
+		"active": "#60A6F5"
+	},
+	"colorAccentBlue": {
+		"normal": "#529EF4",
+		"hover": "#59A2F4",
+		"active": "#60A6F5"
+	},
+	"colorAccentGray": {
+		"normal": "#A3ADB8",
+		"hover": "#A7B0BB",
+		"active": "#AAB4BE"
+	},
+	"colorAccentRed": {
+		"normal": "#FF3347",
+		"hover": "#FF3B4E",
+		"active": "#FF4356"
+	},
+	"colorAccentGreen": {
+		"normal": "#4BB34B",
+		"hover": "#52B652",
+		"active": "#59B959"
+	},
+	"colorAccentOrange": {
+		"normal": "#FFA000",
+		"hover": "#FFA40A",
+		"active": "#FFA814"
+	},
+	"colorAccentPurple": {
+		"normal": "#735CE6",
+		"hover": "#7963E7",
+		"active": "#7E69E8"
+	},
+	"colorAccentViolet": {
+		"normal": "#792EC0",
+		"hover": "#7E36C3",
+		"active": "#843FC5"
+	},
+	"colorSkeletonFrom": {
+		"normal": "#F5F5F5",
+		"hover": "#F5F5F5",
+		"active": "#F6F6F6"
+	},
+	"colorSkeletonTo": {
+		"normal": "#E1E3E6",
+		"hover": "#E2E4E7",
+		"active": "#E3E5E8"
+	},
+	"colorAccentSecondary": {
+		"normal": "#3F8AE0",
+		"hover": "#478FE1",
+		"active": "#4E93E2"
+	},
+	"colorTextLinkVisited": {
+		"normal": "#4986CC",
+		"hover": "#508BCE",
+		"active": "#5890D0"
+	},
+	"colorTextContrast": {
+		"normal": "#FFFFFF",
+		"hover": "#FFFFFF",
+		"active": "#FFFFFF"
+	},
+	"colorTextContrastThemed": {
+		"normal": "#000000",
+		"hover": "#0A0A0A",
+		"active": "#141414"
+	},
+	"colorIconContrast": {
+		"normal": "#FFFFFF",
+		"hover": "#FFFFFF",
+		"active": "#FFFFFF"
+	},
+	"colorIconContrastThemed": {
+		"normal": "#000000",
+		"hover": "#0A0A0A",
+		"active": "#141414"
+	},
+	"colorLinkContrast": {
+		"normal": "#FFFFFF",
+		"hover": "#FFFFFF",
+		"active": "#FFFFFF"
+	},
+	"colorTextPositive": {
+		"normal": "#4BB34B",
+		"hover": "#52B652",
+		"active": "#59B959"
+	},
+	"colorBackgroundPositive": {
+		"normal": "#4BB34B",
+		"hover": "#52B652",
+		"active": "#59B959"
+	},
+	"colorIconPositive": {
+		"normal": "#4BB34B",
+		"hover": "#52B652",
+		"active": "#59B959"
+	},
+	"colorStrokePositive": {
+		"normal": "#4BB34B",
+		"hover": "#52B652",
+		"active": "#59B959"
+	},
+	"colorAvatarOverlay": {
+		"normal": "rgba(129, 140, 153, 0.48)",
+		"hover": "rgba(129, 140, 153, 0.52)",
+		"active": "rgba(129, 140, 153, 0.56)"
+	},
+	"colorOverlayPrimary": {
+		"normal": "rgba(0, 0, 0, 0.4)",
+		"hover": "rgba(0, 0, 0, 0.44)",
+		"active": "rgba(0, 0, 0, 0.48)"
+	},
+	"colorTransparent": {
+		"normal": "transparent",
+		"hover": "rgba(255, 255, 255, 0.04)",
+		"active": "rgba(255, 255, 255, 0.08)"
+	},
+	"themeType": "root"
+}