@vkontakte/vkui-tokens 4.0.0 → 4.2.0

package/themes/vkComDark/index.js

@@ -0,0 +1,670 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var theme = {
+    "themeName": "vkComDark",
+    "themeNameBase": "vkCom",
+    "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": 4
+    },
+    "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": 8
+    },
+    "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"
+};
+exports.default = theme;