Skip to content

Commit

Permalink
Merge pull request #1002 from VKCOM/4.50.0
Browse files Browse the repository at this point in the history
4.50.0
  • Loading branch information
8coon authored Jul 29, 2024
2 parents 88727b8 + c56816a commit ecdad88
Show file tree
Hide file tree
Showing 14 changed files with 15,903 additions and 1,039 deletions.
1 change: 1 addition & 0 deletions .yarnrc.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
nodeLinker: node-modules
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@vkontakte/vkui-tokens",
"version": "4.49.0",
"version": "4.50.0",
"description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
"license": "MIT",
"homepage": "https://vkcom.github.io/vkui-tokens",
Expand Down Expand Up @@ -58,7 +58,7 @@
"@vkontakte/prettier-config": "0.1.0",
"@vkontakte/vk-bridge": "2.14.2",
"@vkontakte/vkjs": "1.2.0",
"@vkontakte/vkui": "6.2.0",
"@vkontakte/vkui": "6.3.0",
"babel-jest": "29.7.0",
"babel-loader": "9.1.3",
"clean-webpack-plugin": "4.0.0",
Expand All @@ -82,7 +82,7 @@
"eslint-plugin-unicorn": "51.0.1",
"fs-extra": "11.2.0",
"html-webpack-plugin": "5.6.0",
"husky": "9.0.11",
"husky": "9.1.3",
"jest": "29.7.0",
"jest-junit": "16.0.0",
"lint-staged": "15.2.7",
Expand All @@ -99,7 +99,7 @@
"ts-node": "10.9.2",
"tsconfig-paths": "4.2.0",
"tscpaths": "0.0.9",
"type-fest": "4.20.1",
"type-fest": "4.23.0",
"typescript": "5.2.2",
"typescript-eslint": "7.0.1",
"webpack": "5.92.1",
Expand Down
16,595 changes: 15,623 additions & 972 deletions src/build/__snapshots__/snapthots.test.ts.snap

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions src/build/helpers/getGradientPointsFromColor.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ describe('getGradientPointsFromColor', () => {
it('should generate gradient from color', () => {
expect(getGradientPointsFromColor('rgb(0, 100, 200)')).toEqual(
'rgba(0, 100, 200, 0) 0%, ' +
'rgba(0, 100, 200, 0.036) 13%, ' +
'rgba(0, 100, 200, 0.15) 27%, ' +
'rgba(0, 100, 200, 0.79) 68%, ' +
'rgba(0, 100, 200, 0.95) 84%, ' +
'rgba(0, 100, 200, 0.05) 15%, ' +
'rgba(0, 100, 200, 0.2) 30%, ' +
'rgba(0, 100, 200, 0.8) 70%, ' +
'rgba(0, 100, 200, 0.95) 85%, ' +
'rgba(0, 100, 200, 1) 100%',
);
});
Expand Down
8 changes: 4 additions & 4 deletions src/build/helpers/getGradientPointsFromColor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@ export function getGradientPointsFromColor(
): GradientPoints {
const opacityMap: OpacityMap = [
[0, 0],
[0.036, 13],
[0.15, 27],
[0.79, 68],
[0.95, 84],
[0.05, 15],
[0.2, 30],
[0.8, 70],
[0.95, 85],
[1, 100],
];

Expand Down
34 changes: 29 additions & 5 deletions src/interfaces/general/colors/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -476,10 +476,10 @@ export interface ColorsDescriptionStruct {
colorAccentRed: ColorDescription;

/**
* @desc Палитра цветов. Зелёный цвет
* @desc Палитра цветов. Огненно оранжевый цвет
* @tags color, palette
*/
colorAccentGreen: ColorDescription;
colorAccentOrangeFire: ColorDescription;

/**
* @desc Палитра цветов. Оранжевый цвет
Expand All @@ -494,10 +494,28 @@ export interface ColorsDescriptionStruct {
colorAccentOrangePeach: ColorDescription;

/**
* @desc Палитра цветов. Огненно оранжевый цвет
* @desc Палитра цветов. Лаймовый цвет
* @tags color, palette
*/
colorAccentOrangeFire: ColorDescription;
colorAccentLime: ColorDescription;

/**
* @desc Палитра цветов. Зелёный цвет
* @tags color, palette
*/
colorAccentGreen: ColorDescription;

/**
* @desc Палитра цветов. Циановый цвет
* @tags color, palette
*/
colorAccentCyan: ColorDescription;

/**
* @desc Палитра цветов. Лазурный цвет
* @tags color, palette
*/
colorAccentAzure: ColorDescription;

/**
* @desc Палитра цветов. Фиолетовый цвет
Expand All @@ -512,11 +530,17 @@ export interface ColorsDescriptionStruct {
colorAccentViolet: ColorDescription;

/**
* @desc Палитра цветов. Розовый цвет
* @desc Палитра цветов. Розово-малиновый цвет
* @tags color, palette
*/
colorAccentRaspberryPink: ColorDescription;

/**
* @desc Палитра цветов. Розовый цвет
* @tags color, palette
*/
colorAccentPink: ColorDescription;

/**
* @desc Второстепенный акцентный цвет для отдельных проектов
* @tags color, palette
Expand Down
37 changes: 34 additions & 3 deletions src/interfaces/themes/workspaceAdmin/index.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,40 @@
import { ThemeCssVars } from '@/interfaces/general';
import { ParadigmTheme, ParadigmThemeDescription } from '@/interfaces/namespaces/paradigm';
import {
ColorDescription,
ColorsDescriptionStruct,
ColorWithStates,
} from '@/interfaces/general/colors';
import { Font } from '@/interfaces/general/typography';
import {
LocalParadigmColorsDescriptionStruct,
ParadigmTheme,
ParadigmThemeDescription,
} from '@/interfaces/namespaces/paradigm';

export interface ThemeWorkspaceAdmin extends ParadigmTheme {}
export interface ThemeWorkspaceOverValues {
fontHeadline3: Font;
}

export interface ThemeWorkspaceAdminDescription extends ParadigmThemeDescription {}
export interface LocalWorkspaceAdminColorsDescriptionStruct {
colorIconNegativeSnackbar: ColorDescription;
}

export type WorkspaceAdminLocalColors = {
[key in keyof LocalWorkspaceAdminColorsDescriptionStruct]: ColorWithStates;
};

export interface ThemeWorkspaceAdmin
extends ParadigmTheme,
ThemeWorkspaceOverValues,
WorkspaceAdminLocalColors {}

export interface ThemeWorkspaceAdminDescription
extends ParadigmThemeDescription,
ThemeWorkspaceOverValues {
colors: LocalWorkspaceAdminColorsDescriptionStruct &
LocalParadigmColorsDescriptionStruct &
ColorsDescriptionStruct;
}

export interface ThemeWorkspaceAdminCssVars
extends ThemeCssVars<ThemeWorkspaceAdmin, 'breakpoints'> {}
9 changes: 9 additions & 0 deletions src/interfaces/themes/workspaceAdminDark/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import {
ThemeWorkspaceAdmin,
ThemeWorkspaceAdminCssVars,
ThemeWorkspaceAdminDescription,
} from '@/interfaces/themes/workspaceAdmin';

export type ThemeWorkspaceAdminDark = ThemeWorkspaceAdmin;
export type ThemeWorkspaceAdminDarkDescription = ThemeWorkspaceAdminDescription;
export type ThemeWorkspaceAdminDarkCssVars = ThemeWorkspaceAdminCssVars;
16 changes: 12 additions & 4 deletions src/themeDescriptions/base/paradigm.ts
Original file line number Diff line number Diff line change
Expand Up @@ -118,13 +118,17 @@ export const lightColors: ColorsDescription = {
colorAccentBlue: '#005FF9',
colorAccentGray: '#A5A7AD',
colorAccentRed: '#ED0A34',
colorAccentGreen: '#0DC268',
colorAccentOrangeFire: '#F05C44',
colorAccentOrange: '#FF9E00',
colorAccentOrangePeach: '#F9B54F',
colorAccentOrangeFire: '#F05C44',
colorAccentLime: '#B8FC75',
colorAccentGreen: '#0DC268',
colorAccentCyan: '#07E5F9',
colorAccentAzure: '#0077FF',
colorAccentPurple: '#4F6DDC',
colorAccentViolet: '#C15DF3',
colorAccentRaspberryPink: '#E03FAB',
colorAccentPink: '#FF3985',
colorAccentSecondary: '#FF9E00',

// Other
Expand Down Expand Up @@ -251,13 +255,17 @@ export const darkColors: ColorsDescription = {
colorAccentBlue: '#2775FC',
colorAccentGray: '#9C9DA2',
colorAccentRed: '#ED0A34',
colorAccentGreen: '#0DC268',
colorAccentOrangeFire: '#F05C44',
colorAccentOrange: '#FF9E00',
colorAccentOrangePeach: '#FFC062',
colorAccentOrangeFire: '#F05C44',
colorAccentLime: '#B8FC75',
colorAccentGreen: '#0DC268',
colorAccentCyan: '#07E5F9',
colorAccentAzure: '#0077FF',
colorAccentPurple: '#4F6DDC',
colorAccentViolet: '#C15DF3',
colorAccentRaspberryPink: '#F060C0',
colorAccentPink: '#FF3985',
colorAccentSecondary: '#FF9E00',

// Other
Expand Down
40 changes: 28 additions & 12 deletions src/themeDescriptions/base/vk.ts
Original file line number Diff line number Diff line change
Expand Up @@ -184,16 +184,32 @@ export const colorFromFigma = (colorsScheme: 'light' | 'dark'): ColorsDescriptio
colorAccentBlue: palette.accent_blue,
colorAccentGray: palette.accent_gray,
colorAccentRed: palette.accent_red,
colorAccentGreen: palette.accent_green,
colorAccentOrangeFire: palette.accent_orange_fire,
colorAccentOrange: palette.accent_orange,
colorAccentOrangePeach: {
light: '#F9B54F',
dark: '#FFC062',
}[colorsScheme],
colorAccentOrangeFire: palette.accent_orange_fire,
colorAccentLime: {
light: '#AFF70D',
dark: '#AFF70D',
}[colorsScheme],
colorAccentGreen: palette.accent_green,
colorAccentCyan: {
light: '#13FFD0',
dark: '#13FFD0',
}[colorsScheme],
colorAccentAzure: {
light: '#0077FF',
dark: '#0077FF',
}[colorsScheme],
colorAccentPurple: palette.accent_purple,
colorAccentViolet: palette.accent_violet,
colorAccentRaspberryPink: palette.accent_raspberry_pink,
colorAccentPink: {
light: '#F45FFF',
dark: '#F45FFF',
}[colorsScheme],
colorAccentSecondary: palette.accent_secondary,

// Other
Expand Down Expand Up @@ -339,32 +355,32 @@ export const fonts: BaseFonts = {
regular: {
fontSize: 24,
lineHeight: 28,
fontFamily: fontFamilyAccent,
fontWeight: fontWeightAccent1,
fontFamily: fontFamilyBase,
fontWeight: fontWeightBase1,
},
},
fontTitle2: {
regular: {
fontSize: 20,
lineHeight: 24,
fontFamily: fontFamilyAccent,
fontWeight: fontWeightAccent1,
fontFamily: fontFamilyBase,
fontWeight: fontWeightBase1,
},
},
fontTitle3: {
regular: {
fontSize: 17,
lineHeight: 22,
fontFamily: fontFamilyAccent,
fontWeight: fontWeightAccent1,
fontFamily: fontFamilyBase,
fontWeight: fontWeightBase1,
},
},
fontHeadline1: {
regular: {
fontSize: 16,
lineHeight: 20,
fontFamily: fontFamilyAccent,
fontWeight: fontWeightAccent2,
fontFamily: fontFamilyBase,
fontWeight: fontWeightBase2,
},
compact: {
fontSize: 15,
Expand All @@ -375,8 +391,8 @@ export const fonts: BaseFonts = {
regular: {
fontSize: 15,
lineHeight: 20,
fontFamily: fontFamilyAccent,
fontWeight: fontWeightAccent2,
fontFamily: fontFamilyBase,
fontWeight: fontWeightBase2,
},
compact: {
fontSize: 14,
Expand Down
6 changes: 5 additions & 1 deletion src/themeDescriptions/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,10 @@ import {
} from '@/themeDescriptions/themes/vkontakteAndroid';
import { vkontakteComTheme, vkontakteComThemeDark } from '@/themeDescriptions/themes/vkontakteCom';
import { vkontakteIOSTheme, vkontakteIOSThemeDark } from '@/themeDescriptions/themes/vkontakteIOS';
import { workspaceAdminTheme } from '@/themeDescriptions/themes/workspaceAdmin';
import {
workspaceAdminDarkTheme,
workspaceAdminTheme,
} from '@/themeDescriptions/themes/workspaceAdmin';
import { workspaceLandingsTheme } from '@/themeDescriptions/themes/workspaceLandings';

import { darkThemeExport as paradigmBaseDark, lightTheme as paradigmBase } from './base/paradigm';
Expand Down Expand Up @@ -119,6 +122,7 @@ export const themes = [

// Темы, наследуемые от WorkspaceAdmin
workspaceAdminTheme,
workspaceAdminDarkTheme,

// Темы, наследуемые от WorkspaceLandings
workspaceLandingsTheme,
Expand Down
10 changes: 9 additions & 1 deletion src/themeDescriptions/themes/vkCom/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -107,11 +107,15 @@ const vkComColors = (theme: typeof vkcom_light) => ({
colorAccentBlue: resolveColor(theme.colors.dynamic_blue),
colorAccentGray: resolveColor(theme.colors.dynamic_gray),
colorAccentRed: resolveColor(theme.colors.dynamic_red),
colorAccentGreen: resolveColor(theme.colors.dynamic_green),
colorAccentOrange: resolveColor(theme.colors.dynamic_orange),
colorAccentOrangePeach: resolveColor(theme.colors.dynamic_orange_peach),
colorAccentLime: '#BFF74F',
colorAccentGreen: resolveColor(theme.colors.dynamic_green),
colorAccentCyan: '#7CF4DC',
colorAccentAzure: '#3F8AE0',
colorAccentPurple: resolveColor(theme.colors.dynamic_purple),
colorAccentViolet: '#792EC0',
colorAccentPink: '#F685FF',
// colorAccentSecondary: '#3F8AE0',

// Other
Expand Down Expand Up @@ -376,7 +380,11 @@ const vkComDarkColor: ColorsDescription = {
colorSeparatorPrimary3x: '#505253',
colorBackgroundNegativeTint: '#522E2E',
colorBackgroundPositiveTint: '#2F422F',
colorAccentLime: '#CAF96C',
colorAccentCyan: '#55F1D2',
colorAccentAzure: '#5D9EE9',
colorAccentViolet: '#A94FFF',
colorAccentPink: '#F899FF',
},
};

Expand Down
Loading

0 comments on commit ecdad88

Please sign in to comment.