@vkontakte/vkui-tokens 4.24.0 → 4.25.0
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/build/compilers/cssVars/declarations/compileBreakpointsCssVarsDeclaration.d.ts +1 -1
- package/build/compilers/cssVars/helpers/accumulateValues.d.ts +2 -2
- package/build/compilers/cssVars/helpers/findViewportByAdaptivityState.d.ts +1 -1
- package/build/compilers/cssVars/jsUtils/compileGetDeclarationString.d.ts +1 -1
- package/build/compilers/docs/compileDocsJSON.d.ts +1 -1
- package/build/compilers/index.d.ts +1 -1
- package/build/compilers/structJSON/compileStructJSON.d.ts +1 -1
- package/build/compilers/styles/compileStyles.d.ts +1 -1
- package/build/compilers/styles/helpers/tokenProcessors.d.ts +1 -1
- package/build/helpers/getStateFunctions.d.ts +1 -1
- package/build/helpers/replacePropDeep.d.ts +1 -1
- package/interfaces/general/colors/index.d.ts +4 -4
- package/interfaces/general/gradients/index.d.ts +1 -1
- package/interfaces/general/index.d.ts +4 -4
- package/interfaces/general/tools/cssVars.d.ts +2 -2
- package/interfaces/general/tools/customMedia.d.ts +2 -2
- package/interfaces/general/tools/index.d.ts +2 -2
- package/interfaces/general/tools/tokenValue.d.ts +4 -4
- package/interfaces/general/tools/utils.d.ts +5 -5
- package/interfaces/general/tools/viewports.d.ts +5 -5
- package/interfaces/general/typography/index.d.ts +2 -2
- package/interfaces/namespaces/paradigm/index.d.ts +5 -5
- package/interfaces/themes/calendar/index.d.ts +1 -1
- package/interfaces/themes/cloudDark/index.d.ts +3 -3
- package/interfaces/themes/home/index.d.ts +2 -2
- package/interfaces/themes/homeDark/index.d.ts +3 -3
- package/interfaces/themes/media/index.d.ts +3 -3
- package/interfaces/themes/mediaDark/index.d.ts +3 -3
- package/interfaces/themes/octavius/index.d.ts +2 -2
- package/interfaces/themes/octaviusDark/index.d.ts +3 -3
- package/interfaces/themes/octaviusVK/index.d.ts +3 -3
- package/interfaces/themes/octaviusVKDark/index.d.ts +3 -3
- package/interfaces/themes/octaviusWhite/index.d.ts +3 -3
- package/interfaces/themes/otvet/index.d.ts +1 -1
- package/interfaces/themes/otvetDark/index.d.ts +3 -3
- package/interfaces/themes/promo/index.d.ts +2 -2
- package/interfaces/themes/pulse/index.d.ts +69 -0
- package/interfaces/themes/pulse/index.js +2 -0
- package/interfaces/themes/pulseDark/index.d.ts +7 -0
- package/interfaces/themes/pulseDark/index.js +2 -0
- package/interfaces/themes/search/index.d.ts +5 -5
- package/package.json +11 -11
- package/themes/pulse/cssVars/declarations/index.css +902 -0
- package/themes/pulse/cssVars/declarations/noColors.css +493 -0
- package/themes/pulse/cssVars/declarations/noSizes.css +285 -0
- package/themes/pulse/cssVars/declarations/onlyAdaptiveGroups.css +143 -0
- package/themes/pulse/cssVars/declarations/onlyColors.css +266 -0
- package/themes/pulse/cssVars/declarations/onlyColors.d.ts +3 -0
- package/themes/pulse/cssVars/declarations/onlyColors.js +11 -0
- package/themes/pulse/cssVars/declarations/onlyVariables.css +439 -0
- package/themes/pulse/cssVars/declarations/onlyVariables.d.ts +3 -0
- package/themes/pulse/cssVars/declarations/onlyVariables.js +11 -0
- package/themes/pulse/cssVars/declarations/onlyVariablesLocal.css +439 -0
- package/themes/pulse/cssVars/declarations/onlyVariablesLocalIncremental.css +439 -0
- package/themes/pulse/cssVars/theme/fallbacks/index.css +758 -0
- package/themes/pulse/cssVars/theme/fallbacks/index.less +509 -0
- package/themes/pulse/cssVars/theme/fallbacks/index.pcss +510 -0
- package/themes/pulse/cssVars/theme/fallbacks/index.scss +742 -0
- package/themes/pulse/cssVars/theme/fallbacks/index.styl +509 -0
- package/themes/pulse/cssVars/theme/index.d.ts +4 -0
- package/themes/pulse/cssVars/theme/index.js +2650 -0
- package/themes/pulse/cssVars/theme/index.json +2647 -0
- package/themes/pulse/docs.json +1008 -0
- package/themes/pulse/index.css +758 -0
- package/themes/pulse/index.d.ts +4 -0
- package/themes/pulse/index.js +780 -0
- package/themes/pulse/index.json +777 -0
- package/themes/pulse/index.less +509 -0
- package/themes/pulse/index.pcss +510 -0
- package/themes/pulse/index.scss +742 -0
- package/themes/pulse/index.styl +509 -0
- package/themes/pulse/struct.json +801 -0
- package/themes/pulseDark/cssVars/declarations/index.css +902 -0
- package/themes/pulseDark/cssVars/declarations/noColors.css +493 -0
- package/themes/pulseDark/cssVars/declarations/noSizes.css +285 -0
- package/themes/pulseDark/cssVars/declarations/onlyAdaptiveGroups.css +143 -0
- package/themes/pulseDark/cssVars/declarations/onlyColors.css +266 -0
- package/themes/pulseDark/cssVars/declarations/onlyColors.d.ts +3 -0
- package/themes/pulseDark/cssVars/declarations/onlyColors.js +11 -0
- package/themes/pulseDark/cssVars/declarations/onlyVariables.css +439 -0
- package/themes/pulseDark/cssVars/declarations/onlyVariables.d.ts +3 -0
- package/themes/pulseDark/cssVars/declarations/onlyVariables.js +11 -0
- package/themes/pulseDark/cssVars/declarations/onlyVariablesLocal.css +439 -0
- package/themes/pulseDark/cssVars/declarations/onlyVariablesLocalIncremental.css +439 -0
- package/themes/pulseDark/cssVars/theme/fallbacks/index.css +758 -0
- package/themes/pulseDark/cssVars/theme/fallbacks/index.less +509 -0
- package/themes/pulseDark/cssVars/theme/fallbacks/index.pcss +510 -0
- package/themes/pulseDark/cssVars/theme/fallbacks/index.scss +742 -0
- package/themes/pulseDark/cssVars/theme/fallbacks/index.styl +509 -0
- package/themes/pulseDark/cssVars/theme/index.d.ts +4 -0
- package/themes/pulseDark/cssVars/theme/index.js +2650 -0
- package/themes/pulseDark/cssVars/theme/index.json +2647 -0
- package/themes/pulseDark/docs.json +1008 -0
- package/themes/pulseDark/index.css +758 -0
- package/themes/pulseDark/index.d.ts +4 -0
- package/themes/pulseDark/index.js +780 -0
- package/themes/pulseDark/index.json +777 -0
- package/themes/pulseDark/index.less +509 -0
- package/themes/pulseDark/index.pcss +510 -0
- package/themes/pulseDark/index.scss +742 -0
- package/themes/pulseDark/index.styl +509 -0
- package/themes/pulseDark/struct.json +801 -0
- package/themes/vkComDark/cssVars/declarations/index.css +5 -5
- package/themes/vkComDark/cssVars/declarations/noSizes.css +5 -5
- package/themes/vkComDark/cssVars/declarations/onlyColors.css +5 -5
- package/themes/vkComDark/cssVars/declarations/onlyColors.js +2 -2
- package/themes/vkComDark/cssVars/declarations/onlyVariables.css +5 -5
- package/themes/vkComDark/cssVars/declarations/onlyVariables.js +2 -2
- package/themes/vkComDark/cssVars/declarations/onlyVariablesLocal.css +5 -5
- package/themes/vkComDark/cssVars/declarations/onlyVariablesLocalIncremental.css +5 -5
- package/themes/vkComDark/cssVars/theme/fallbacks/index.css +5 -5
- package/themes/vkComDark/cssVars/theme/fallbacks/index.less +5 -5
- package/themes/vkComDark/cssVars/theme/fallbacks/index.pcss +5 -5
- package/themes/vkComDark/cssVars/theme/fallbacks/index.scss +5 -5
- package/themes/vkComDark/cssVars/theme/fallbacks/index.styl +5 -5
- package/themes/vkComDark/cssVars/theme/index.js +5 -5
- package/themes/vkComDark/cssVars/theme/index.json +5 -5
- package/themes/vkComDark/index.css +5 -5
- package/themes/vkComDark/index.js +5 -5
- package/themes/vkComDark/index.json +5 -5
- package/themes/vkComDark/index.less +5 -5
- package/themes/vkComDark/index.pcss +5 -5
- package/themes/vkComDark/index.scss +5 -5
- package/themes/vkComDark/index.styl +5 -5
- package/themes/vkComDark/struct.json +5 -5
- package/utils/common/colors/projectColors.d.ts +1 -1
- package/utils/common/colors/socialColors.d.ts +1 -1
- package/utils/descriptions.d.ts +2 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Theme, ThemeCssVarsWide } from '../../../../interfaces/general';
|
|
2
|
-
export
|
|
2
|
+
export type DeclarationType = 'default' | 'onlyRoot' | 'modern' | 'onlyColors';
|
|
3
3
|
/**
|
|
4
4
|
* Компилирует медиаквери переходы между переменными
|
|
5
5
|
* @param sourceTheme
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { Theme } from '../../../../interfaces/general';
|
|
2
2
|
import { Adaptive } from '../../../../interfaces/general/tools';
|
|
3
|
-
export
|
|
3
|
+
export type FlatValuesObject = {
|
|
4
4
|
[key: string]: string | number;
|
|
5
5
|
};
|
|
6
|
-
export
|
|
6
|
+
export type AdaptiveValuesObject = {
|
|
7
7
|
auto: FlatValuesObject;
|
|
8
8
|
regular: FlatValuesObject;
|
|
9
9
|
} & {
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { Adaptive, Breakpoints } from '../../../../interfaces/general/tools';
|
|
2
2
|
import { DefaultViewports, Viewports, ViewportsTuple } from '../../../../interfaces/general/tools/viewports';
|
|
3
|
-
export declare function findViewportByAdaptivityState<Vt extends ViewportsTuple = DefaultViewports>(breakpoints: Breakpoints<Vt>['breakpoints']
|
|
3
|
+
export declare function findViewportByAdaptivityState<Vt extends ViewportsTuple = DefaultViewports>(breakpoints: Partial<Breakpoints<Vt>['breakpoints']>, adaptivityState: keyof Adaptive<any>): Viewports;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { Theme, ThemeCssVarsWide } from '../../../../interfaces/general';
|
|
2
|
-
export
|
|
2
|
+
export type DeclarationType = 'default' | 'onlyColors';
|
|
3
3
|
export declare function compileGetDeclarationString<T = Theme>(sourceTheme: ThemeCssVarsWide<T>, type?: DeclarationType): string;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { PixelifyTheme, SpecialTokens, Theme, ThemeCssVarsWide } from '../../interfaces/general';
|
|
2
|
-
|
|
2
|
+
type ThemeBuildType = 'root' | 'subtheme' | 'flat' | 'cssVars' | 'cssVarsPseudoRoot';
|
|
3
3
|
declare function writeStructJsonFile<T = Theme>(themePath: string, theme: T, _?: ThemeBuildType): void;
|
|
4
4
|
declare function writeJsonFile<T = Theme>(themePath: string, theme: T, _?: ThemeBuildType): void;
|
|
5
5
|
declare function writeTsFile<T extends SpecialTokens = Theme>(themePath: string, theme: T, type: ThemeBuildType, themeName?: string): void;
|
|
@@ -2,7 +2,7 @@ import 'css.escape';
|
|
|
2
2
|
import { PixelifyTheme } from '../../../interfaces/general';
|
|
3
3
|
import { Formats } from './helpers/tokenProcessors';
|
|
4
4
|
export declare const serviceKeys: string[];
|
|
5
|
-
export
|
|
5
|
+
export type CompileStylesMode = 'default' | 'onlyVariables' | 'onlyVariablesLocal' | 'onlyVariablesLocalIncremental' | 'onlyColors' | 'withAdaptiveGroups' | 'onlyAdaptiveGroups' | 'noSizes' | 'noColors';
|
|
6
6
|
export declare function getPrefix<PT extends PixelifyTheme>(format: Formats, theme: PT): string;
|
|
7
7
|
export declare function getRootSelector<PT extends PixelifyTheme>(theme: PT, mode: CompileStylesMode): string;
|
|
8
8
|
/**
|
|
@@ -6,7 +6,7 @@ export declare const EStyleTypes: {
|
|
|
6
6
|
readonly LESS: "less";
|
|
7
7
|
readonly STYL: "styl";
|
|
8
8
|
};
|
|
9
|
-
export
|
|
9
|
+
export type Formats = typeof EStyleTypes[keyof typeof EStyleTypes];
|
|
10
10
|
export declare const varDeclarations: {
|
|
11
11
|
readonly css: (prop: any, prefix?: string) => string;
|
|
12
12
|
readonly pcss: (prop: any, prefix?: string) => string;
|
|
@@ -8,11 +8,11 @@ export interface ColorWithStates {
|
|
|
8
8
|
hover: Property.Color;
|
|
9
9
|
active: Property.Color;
|
|
10
10
|
}
|
|
11
|
-
export
|
|
12
|
-
export
|
|
11
|
+
export type ColorDescriptionStatic = Property.Color | ColorWithStates;
|
|
12
|
+
export type ColorDescriptionCallable<T extends {
|
|
13
13
|
[key in keyof T]: ColorDescription;
|
|
14
14
|
} = ColorsDescriptionStruct> = (theme: Partial<ColorsScheme & ColorsDescription<T>>) => ColorDescription;
|
|
15
|
-
export
|
|
15
|
+
export type ColorDescription<T extends {
|
|
16
16
|
[key in keyof T]: ColorDescription;
|
|
17
17
|
} = ColorsDescriptionStruct> = ColorDescriptionStatic | ColorDescriptionCallable<T>;
|
|
18
18
|
/**
|
|
@@ -472,6 +472,6 @@ export interface ColorsDescriptionStruct {
|
|
|
472
472
|
*/
|
|
473
473
|
colorSegmentedControl: ColorDescription;
|
|
474
474
|
}
|
|
475
|
-
export
|
|
475
|
+
export type Colors = {
|
|
476
476
|
[key in keyof ColorsDescriptionStruct]: ColorWithStates;
|
|
477
477
|
};
|
|
@@ -13,7 +13,7 @@ import ColorScheme = Property.ColorScheme;
|
|
|
13
13
|
import { StaticTokens, Tokens } from './tools/tokenValue';
|
|
14
14
|
interface AdaptiveInterfaceValues extends Sizes, Fonts {
|
|
15
15
|
}
|
|
16
|
-
|
|
16
|
+
type AdaptiveTokens = {
|
|
17
17
|
[key in keyof AdaptiveInterfaceValues]: Adaptive<AdaptiveInterfaceValues[key]>;
|
|
18
18
|
};
|
|
19
19
|
export interface ColorsScheme {
|
|
@@ -68,7 +68,7 @@ export interface Theme extends ThemeGeneral, ColorsFinal {
|
|
|
68
68
|
/**
|
|
69
69
|
* Тема, в коротой все значения пикселизированы. Т.е. 16 -> '16px'
|
|
70
70
|
*/
|
|
71
|
-
export
|
|
71
|
+
export type PixelifyTheme<T extends Partial<Record<keyof T, any>> = StaticTokens<Theme>> = StringifyObject<Omit<T, 'breakpoints' | 'themeType'>> & Pick<T, Extract<'breakpoints', keyof T>> & {
|
|
72
72
|
themeType: 'pixelify';
|
|
73
73
|
themeName: string;
|
|
74
74
|
colorScheme: ColorScheme;
|
|
@@ -77,7 +77,7 @@ export declare type PixelifyTheme<T extends Partial<Record<keyof T, any>> = Stat
|
|
|
77
77
|
* Тема, которая каждой переменной даёт name и value в виде названия
|
|
78
78
|
* соответствующей css-переменной и ссылки на неё
|
|
79
79
|
*/
|
|
80
|
-
export
|
|
80
|
+
export type ThemeCssVars<T = Theme, Ex extends keyof T = never> = {
|
|
81
81
|
[K in keyof Omit<T, Ex | 'themeType'>]: NamifyObject<StringifyObject<T>[K], true>;
|
|
82
82
|
} & Pick<T, Ex> & {
|
|
83
83
|
themeType: 'cssVars';
|
|
@@ -86,7 +86,7 @@ export declare type ThemeCssVars<T = Theme, Ex extends keyof T = never> = {
|
|
|
86
86
|
* Тоже самое, что и ThemeCssVars, только у переменных есть ещё originValue
|
|
87
87
|
* используется для генерации источников CSS-переменных
|
|
88
88
|
*/
|
|
89
|
-
export
|
|
89
|
+
export type ThemeCssVarsWide<T = Theme, Ex extends keyof T = never> = {
|
|
90
90
|
[K in keyof Omit<T, Ex | 'themeType'>]: NamifyObject<StringifyObject<T>[K]>;
|
|
91
91
|
} & Pick<T, Ex> & {
|
|
92
92
|
themeType: 'cssVarsWide';
|
|
@@ -16,8 +16,8 @@ export interface CssVarValue {
|
|
|
16
16
|
export interface WideCssVarValue<T> extends CssVarValue {
|
|
17
17
|
originalValue: T;
|
|
18
18
|
}
|
|
19
|
-
|
|
20
|
-
export
|
|
19
|
+
type Valuefy<T, WithoutValue extends boolean = false> = WithoutValue extends true ? CssVarValue : WideCssVarValue<T>;
|
|
20
|
+
export type NamifyObject<T, W extends boolean = false> = T extends Adaptive<T[keyof T]> ? {
|
|
21
21
|
auto: NamifyObject<T['regular'], true>;
|
|
22
22
|
regular: NamifyObject<T['regular'], W>;
|
|
23
23
|
} & {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { GetLast, GetLength } from './utils';
|
|
2
2
|
import { ViewportsTuple } from './viewports';
|
|
3
|
-
export
|
|
4
|
-
export
|
|
3
|
+
export type CustomMediaByViewportUnion<Vt extends ViewportsTuple> = `width${Capitalize<GetLength<Vt> extends 1 ? never : Vt[number]>}` | `widthFrom${Capitalize<Exclude<Vt[number], Vt[0]>>}` | `widthTo${Capitalize<Exclude<Vt[number], GetLast<Vt>>>}`;
|
|
4
|
+
export type CustomMediaByViewport<Vt extends ViewportsTuple> = {
|
|
5
5
|
[key in CustomMediaByViewportUnion<Vt>]: string;
|
|
6
6
|
};
|
|
@@ -5,7 +5,7 @@ import { DefaultViewports, ViewportsTuple } from './viewports';
|
|
|
5
5
|
* остальные состояния могут переопределять переменную полностью или
|
|
6
6
|
* частично, если это объект
|
|
7
7
|
*/
|
|
8
|
-
export
|
|
8
|
+
export type Adaptive<T> = {
|
|
9
9
|
/**
|
|
10
10
|
* основной параметр
|
|
11
11
|
*/
|
|
@@ -24,7 +24,7 @@ export declare const adaptiveKeys: (keyof Adaptive<any>)[];
|
|
|
24
24
|
/**
|
|
25
25
|
* Брейкпоинты используемые в теме (можно не указывать), тогда тема будет как-бы flat
|
|
26
26
|
*/
|
|
27
|
-
export
|
|
27
|
+
export type Breakpoints<Vt extends ViewportsTuple = DefaultViewports> = {
|
|
28
28
|
breakpoints?: {
|
|
29
29
|
[key in Vt[number]]: {
|
|
30
30
|
breakpoint: key extends Vt[0] ? 0 : number;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
1
|
+
export type Token<T, Theme> = T | ((theme: Theme) => T);
|
|
2
|
+
export type MakeStaticToken<T> = T extends (...args: any[]) => any ? MakeStaticToken<ReturnType<T>> : T;
|
|
3
|
+
export type Tokens<T> = {
|
|
4
4
|
[K in keyof T]: Token<T[K], T>;
|
|
5
5
|
};
|
|
6
|
-
export
|
|
6
|
+
export type StaticTokens<T> = {
|
|
7
7
|
[K in keyof T]: MakeStaticToken<T[K]>;
|
|
8
8
|
};
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Тип, который возвращает дифф между двумя объектами
|
|
3
3
|
*/
|
|
4
|
-
export
|
|
4
|
+
export type Diff<T, U> = T extends U ? never : T;
|
|
5
5
|
/**
|
|
6
6
|
* Получить размер кортежа
|
|
7
7
|
*/
|
|
8
|
-
export
|
|
8
|
+
export type GetLength<T extends readonly any[]> = T['length'];
|
|
9
9
|
/**
|
|
10
10
|
* Получить кортеж БЕЗ первого элемента
|
|
11
11
|
*/
|
|
12
|
-
export
|
|
12
|
+
export type DropFirstInTuple<T extends readonly any[]> = ((...args: T) => any) extends (arg: any, ...rest: infer U) => any ? U : T;
|
|
13
13
|
/**
|
|
14
14
|
* Тип, позволяющий получить последний кортежа
|
|
15
15
|
*/
|
|
16
|
-
export
|
|
16
|
+
export type GetLast<T extends readonly any[]> = T[GetLength<DropFirstInTuple<T>>];
|
|
17
17
|
/**
|
|
18
18
|
* Тип который может deep изменять свойства number -> number | string
|
|
19
19
|
*/
|
|
20
|
-
export
|
|
20
|
+
export type StringifyObject<Base> = {
|
|
21
21
|
[Key in keyof Base]: Base[Key] extends number ? number | string : Base[Key] extends Record<string, any> ? StringifyObject<Base[Key]> : Base[Key];
|
|
22
22
|
};
|
|
@@ -4,16 +4,16 @@
|
|
|
4
4
|
* Порядок важен
|
|
5
5
|
*/
|
|
6
6
|
export declare const viewports: readonly ["touch", "tablet", "desktopS", "desktopM", "desktopL", "desktopXL"];
|
|
7
|
-
export
|
|
7
|
+
export type Mutable<T> = {
|
|
8
8
|
-readonly [P in keyof T]: T[P] extends ReadonlyArray<infer U> ? U[] : T[P];
|
|
9
9
|
};
|
|
10
|
-
export
|
|
11
|
-
export
|
|
10
|
+
export type ViewportsOrdered = Mutable<typeof viewports>;
|
|
11
|
+
export type ViewportsTuple = ViewportsOrdered[number][];
|
|
12
12
|
/**
|
|
13
13
|
* Основной тип union всех возможных Viewports
|
|
14
14
|
*/
|
|
15
|
-
export
|
|
15
|
+
export type Viewports = ViewportsTuple[number];
|
|
16
16
|
/**
|
|
17
17
|
* вьюпорты по-умолчанию
|
|
18
18
|
*/
|
|
19
|
-
export
|
|
19
|
+
export type DefaultViewports = ['touch', 'desktopS'];
|
|
@@ -97,7 +97,7 @@ export interface LocalParadigmColorsDescriptionStruct {
|
|
|
97
97
|
*/
|
|
98
98
|
colorBackgroundPositiveTintThemed: ColorDescription;
|
|
99
99
|
}
|
|
100
|
-
export
|
|
100
|
+
export type ParadigmLocalColors = {
|
|
101
101
|
[key in keyof LocalParadigmColorsDescriptionStruct]: ColorWithStates;
|
|
102
102
|
};
|
|
103
103
|
export interface ParadigmLocalSizes {
|
|
@@ -226,7 +226,7 @@ export interface ParadigmHelpers {
|
|
|
226
226
|
}
|
|
227
227
|
interface AdaptiveValues extends ParadigmLocalFonts, ParadigmLocalSizes {
|
|
228
228
|
}
|
|
229
|
-
|
|
229
|
+
type ParadigmAdaptiveTokens = {
|
|
230
230
|
[key in keyof AdaptiveValues]: Adaptive<AdaptiveValues[key]>;
|
|
231
231
|
};
|
|
232
232
|
export interface ParadigmThemeDescription<Vt extends ViewportsTuple = DefaultViewports> extends ThemeDescription, ParadigmAdaptiveTokens, ParadigmToneValues, ParadigmBorders, ParadigmHelpers, Breakpoints<Vt> {
|
|
@@ -234,7 +234,7 @@ export interface ParadigmThemeDescription<Vt extends ViewportsTuple = DefaultVie
|
|
|
234
234
|
}
|
|
235
235
|
interface ParadigmThemeStatic<Vt extends ViewportsTuple = DefaultViewports> extends Theme, Breakpoints<Vt>, ParadigmAdaptiveTokens, ParadigmToneValues, ParadigmBorders, ParadigmHelpers, ParadigmLocalColors {
|
|
236
236
|
}
|
|
237
|
-
export
|
|
238
|
-
export
|
|
239
|
-
export
|
|
237
|
+
export type ParadigmTheme<Vt extends ViewportsTuple = DefaultViewports> = ParadigmThemeStatic<Vt> & CustomMediaByViewport<Vt>;
|
|
238
|
+
export type ParadigmThemeCssVarsWide<Vt extends ViewportsTuple = DefaultViewports> = ThemeCssVarsWide<ParadigmTheme<Vt>, 'breakpoints'>;
|
|
239
|
+
export type ParadigmThemeCssVars<Vt extends ViewportsTuple = DefaultViewports, T extends Breakpoints<Vt> = ParadigmTheme<Vt>> = ThemeCssVars<T, 'breakpoints'>;
|
|
240
240
|
export {};
|
|
@@ -22,7 +22,7 @@ export interface LocalCalendarColorDescriptionStruct {
|
|
|
22
22
|
calendarColorButtonGroupTextPositive: ColorDescription;
|
|
23
23
|
calendarColorButtonGroupTextNegative: ColorDescription;
|
|
24
24
|
}
|
|
25
|
-
export
|
|
25
|
+
export type CalendarLocalColors = {
|
|
26
26
|
[key in keyof LocalCalendarColorDescriptionStruct]: ColorWithStates;
|
|
27
27
|
};
|
|
28
28
|
export interface ThemeCalendar extends ThemeParadigmBase, ThemeCalendarOverValues, CalendarLocalColors {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ThemeCloud, ThemeCloudCssVars, ThemeCloudDescription } from '../cloud';
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
2
|
+
export type ThemeCloudDark = ThemeCloud;
|
|
3
|
+
export type ThemeCloudDarkDescription = ThemeCloudDescription;
|
|
4
|
+
export type ThemeCloudDarkCssVars = ThemeCloudCssVars;
|
|
@@ -7,7 +7,7 @@ export interface LocalHomeColorsDescriptionStruct {
|
|
|
7
7
|
homeColorFilinFailPrimary: ColorDescription;
|
|
8
8
|
homeColorFilinFailSecondary: ColorDescription;
|
|
9
9
|
}
|
|
10
|
-
export
|
|
10
|
+
export type LocalHomeColors = {
|
|
11
11
|
[key in keyof LocalHomeColorsDescriptionStruct]: ColorWithStates;
|
|
12
12
|
};
|
|
13
13
|
export interface ThemeHomeOverValues {
|
|
@@ -15,7 +15,7 @@ export interface ThemeHomeOverValues {
|
|
|
15
15
|
homeFontWeightNormal: string;
|
|
16
16
|
homeFontWeightBold: string;
|
|
17
17
|
}
|
|
18
|
-
|
|
18
|
+
type HomeViewports = ['touch', 'desktopS'];
|
|
19
19
|
export interface ThemeHome extends ParadigmTheme<HomeViewports>, ThemeHomeOverValues, LocalHomeColors {
|
|
20
20
|
}
|
|
21
21
|
export interface ThemeHomeDescription extends ParadigmThemeDescription<HomeViewports>, ThemeHomeOverValues {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ThemeHome, ThemeHomeCssVars, ThemeHomeDescription } from '../home';
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
2
|
+
export type ThemeHomeDark = ThemeHome;
|
|
3
|
+
export type ThemeHomeDarkDescription = ThemeHomeDescription;
|
|
4
|
+
export type ThemeHomeDarkCssVars = ThemeHomeCssVars;
|
|
@@ -3,7 +3,7 @@ import { ColorDescription, ColorWithStates } from '../../general/colors';
|
|
|
3
3
|
import { Adaptive } from '../../general/tools';
|
|
4
4
|
import { Font } from '../../general/typography';
|
|
5
5
|
import { ParadigmTheme, ParadigmThemeCssVars, ParadigmThemeDescription } from '../../namespaces/paradigm';
|
|
6
|
-
export
|
|
6
|
+
export type MediaViewportsTuple = ['touch', 'tablet', 'desktopS', 'desktopM'];
|
|
7
7
|
interface ProjectColors {
|
|
8
8
|
colorPrimaryAuto: ColorWithStates;
|
|
9
9
|
colorPrimaryBase: ColorWithStates;
|
|
@@ -22,7 +22,7 @@ interface ProjectColors {
|
|
|
22
22
|
colorSecondaryHealth: ColorWithStates;
|
|
23
23
|
colorSecondaryMycom: ColorWithStates;
|
|
24
24
|
}
|
|
25
|
-
|
|
25
|
+
type ProjectColorsDescriptions = {
|
|
26
26
|
[key in keyof ProjectColors]: ColorDescription;
|
|
27
27
|
};
|
|
28
28
|
interface SocialColors {
|
|
@@ -34,7 +34,7 @@ interface SocialColors {
|
|
|
34
34
|
colorSocialDribbble: ColorWithStates;
|
|
35
35
|
colorSocialBehance: ColorWithStates;
|
|
36
36
|
}
|
|
37
|
-
|
|
37
|
+
type SocialColorsDescriptions = {
|
|
38
38
|
[key in keyof SocialColors]: ColorDescription;
|
|
39
39
|
};
|
|
40
40
|
interface MediaUniqTokens {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ThemeMedia, ThemeMediaCssVars, ThemeMediaDescription } from '../media';
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
2
|
+
export type ThemeMediaDark = ThemeMedia;
|
|
3
|
+
export type ThemeMediaDarkDescription = ThemeMediaDescription;
|
|
4
|
+
export type ThemeMediaDarkCssVars = ThemeMediaCssVars;
|
|
@@ -40,7 +40,7 @@ export interface ThemeOctaviusLocalSizes {
|
|
|
40
40
|
octaviusSizeSidebarWidgetsHeightMin: number;
|
|
41
41
|
octaviusSizeSidebarWidgetsHeightCompactMin: number;
|
|
42
42
|
}
|
|
43
|
-
|
|
43
|
+
type ThemeOctaviusAdaptiveTokens = {
|
|
44
44
|
[key in keyof ThemeOctaviusLocalSizes]: Adaptive<ThemeOctaviusLocalSizes[key]>;
|
|
45
45
|
};
|
|
46
46
|
export interface LocalOctaviusColorsDescriptionStruct {
|
|
@@ -198,7 +198,7 @@ export interface LocalOctaviusColorsDescriptionStruct {
|
|
|
198
198
|
octaviusColorBackgroundPositiveTintAlpha: ColorDescription;
|
|
199
199
|
octaviusColorButtonBackgroundContrastAlpha: ColorDescription;
|
|
200
200
|
}
|
|
201
|
-
export
|
|
201
|
+
export type OctaviusLocalColors = {
|
|
202
202
|
[key in keyof LocalOctaviusColorsDescriptionStruct]: ColorWithStates;
|
|
203
203
|
};
|
|
204
204
|
export interface ThemeOctaviusDescription extends ParadigmThemeDescription, ThemeOctaviusOverValues, ThemeOctaviusAdaptiveTokens {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ThemeOctavius, ThemeOctaviusCssVars, ThemeOctaviusDescription } from '../octavius';
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
2
|
+
export type ThemeOctaviusDark = ThemeOctavius;
|
|
3
|
+
export type ThemeOctaviusDarkDescription = ThemeOctaviusDescription;
|
|
4
|
+
export type ThemeOctaviusDarkCssVars = ThemeOctaviusCssVars;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ThemeOctavius, ThemeOctaviusCssVars, ThemeOctaviusDescription } from '../octavius';
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
2
|
+
export type ThemeOctaviusVK = ThemeOctavius;
|
|
3
|
+
export type ThemeOctaviusVKDescription = ThemeOctaviusDescription;
|
|
4
|
+
export type ThemeOctaviusVKCssVars = ThemeOctaviusCssVars;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ThemeOctavius, ThemeOctaviusCssVars, ThemeOctaviusDescription } from '../octavius';
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
2
|
+
export type ThemeOctaviusVKDark = ThemeOctavius;
|
|
3
|
+
export type ThemeOctaviusVKDarkDescription = ThemeOctaviusDescription;
|
|
4
|
+
export type ThemeOctaviusVKDarkCssVars = ThemeOctaviusCssVars;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ThemeOctavius, ThemeOctaviusCssVars, ThemeOctaviusDescription } from '../octavius';
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
2
|
+
export type ThemeOctaviusWhite = ThemeOctavius;
|
|
3
|
+
export type ThemeOctaviusWhiteDescription = ThemeOctaviusDescription;
|
|
4
|
+
export type ThemeOctaviusWhiteCssVars = ThemeOctaviusCssVars;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ParadigmTheme, ParadigmThemeCssVars, ParadigmThemeDescription } from '../../namespaces/paradigm';
|
|
2
|
-
|
|
2
|
+
type OtvetViewports = ['desktopS'];
|
|
3
3
|
export interface ThemeOtvet extends ParadigmTheme<OtvetViewports> {
|
|
4
4
|
}
|
|
5
5
|
export interface ThemeOtvetDescription extends ParadigmThemeDescription<OtvetViewports> {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ThemeOtvet, ThemeOtvetCssVars, ThemeOtvetDescription } from '../otvet';
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
2
|
+
export type ThemeOtvetDark = ThemeOtvet;
|
|
3
|
+
export type ThemeOtvetDarkDescription = ThemeOtvetDescription;
|
|
4
|
+
export type ThemeOtvetDarkCssVars = ThemeOtvetCssVars;
|
|
@@ -2,8 +2,8 @@ import { Property } from 'csstype';
|
|
|
2
2
|
import { Adaptive } from '../../general/tools';
|
|
3
3
|
import { ViewportsOrdered } from '../../general/tools/viewports';
|
|
4
4
|
import { ParadigmTheme, ParadigmThemeCssVars, ParadigmThemeDescription } from '../../namespaces/paradigm';
|
|
5
|
-
export
|
|
6
|
-
|
|
5
|
+
export type PromoViewports = ViewportsOrdered;
|
|
6
|
+
type PromoSpecificTokens = {
|
|
7
7
|
sizeControlButtonSmallWidthMin: Adaptive<number>;
|
|
8
8
|
fontWeightBold: Property.FontWeight;
|
|
9
9
|
fontWeightMedium: Property.FontWeight;
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { Property } from 'csstype';
|
|
2
|
+
import { ColorsDescription, ThemeCssVars, ThemeDescription } from '../../general';
|
|
3
|
+
import { ColorDescription, ColorWithStates } from '../../general/colors';
|
|
4
|
+
import { GradientPoints } from '../../general/gradients';
|
|
5
|
+
import { Adaptive } from '../../general/tools';
|
|
6
|
+
import { Font } from '../../general/typography';
|
|
7
|
+
import { ParadigmTheme, ParadigmThemeDescription } from '../../namespaces/paradigm';
|
|
8
|
+
type AllowedParadigmTokens = 'themeName' | 'themeNameBase' | 'themeInheritsFrom' | 'prefix' | 'fontFamilyAccent' | 'fontFamilyBase' | 'fontWeightAccent1' | 'fontWeightAccent2' | 'fontWeightBase1' | 'fontWeightBase2' | 'fontTitle1' | 'fontTitle2' | 'fontTitle3' | 'fontHeadline1' | 'fontHeadline2' | 'fontText' | 'fontParagraph' | 'fontSubhead' | 'fontFootnote' | 'fontFootnoteCaps' | 'fontCaption1' | 'fontCaption1Caps' | 'fontCaption2' | 'fontCaption2Caps' | 'fontCaption3' | 'fontCaption3Caps' | 'animationEasingDefault' | 'animationDurationS' | 'animationDurationM' | 'animationDurationL' | 'sizeAvatarXS' | 'sizeAvatarS' | 'sizeAvatarM' | 'sizeAvatarL' | 'sizeBorderRadius' | 'sizeButtonSmallHeight' | 'sizeButtonMediumHeight' | 'sizeButtonLargeHeight' | 'sizePopupMedium' | 'sizePopupLarge' | 'sizeButtonPaddingHorizontal' | 'sizeFieldHorizontalPadding' | 'elevation1' | 'elevation2' | 'elevation3' | 'opacityDisable';
|
|
9
|
+
export type AllowedParadigmColorTokens = 'colorTextPrimary' | 'colorTextPrimaryInvariably' | 'colorTextSecondary' | 'colorTextTertiary' | 'colorTextSubhead' | 'colorTextAccent' | 'colorTextAccentThemed' | 'colorTextLink' | 'colorTextLinkThemed' | 'colorTextLinkVisited' | 'colorTextNegative' | 'colorTextPositive' | 'colorTextMuted' | 'colorTextContrast' | 'colorTextContrastThemed' | 'colorLinkContrast' | 'colorIconPrimary' | 'colorIconPrimaryInvariably' | 'colorIconSecondary' | 'colorIconSecondaryAlpha' | 'colorIconMedium' | 'colorIconMediumAlpha' | 'colorIconTertiary' | 'colorIconTertiaryAlpha' | 'colorIconAccent' | 'colorIconAccentThemed' | 'colorIconNegative' | 'colorIconPositive' | 'colorIconContrast' | 'colorIconContrastThemed' | 'colorBackground' | 'colorBackgroundContent' | 'colorBackgroundAccentAlternative' | 'colorBackgroundModal' | 'colorBackgroundSecondary' | 'colorBackgroundSecondaryAlpha' | 'colorBackgroundTertiary' | 'colorBackgroundAccent' | 'colorBackgroundAccentTintAlpha' | 'colorBackgroundNegativeTintAlpha' | 'colorBackgroundPositiveTintAlpha' | 'colorBackgroundWarningTintAlpha' | 'colorBackgroundAccentThemed' | 'colorBackgroundNegative' | 'colorBackgroundNegativeTint' | 'colorBackgroundPositive' | 'colorBackgroundContrast' | 'colorBackgroundContrastSecondaryAlpha' | 'colorBackgroundWarning' | 'colorSeparatorPrimary' | 'colorSeparatorPrimaryAlpha' | 'colorSeparatorSecondary' | 'colorImageBorderAlpha' | 'colorFieldBorderAlpha' | 'colorStrokeAccent' | 'colorStrokeAccentThemed' | 'colorStrokeContrast' | 'colorStrokeNegative' | 'colorStrokePositive' | 'colorAccentBlue' | 'colorAccentGray' | 'colorAccentRed' | 'colorAccentGreen' | 'colorAccentOrange' | 'colorAccentPurple' | 'colorAccentViolet' | 'colorAccentSecondary' | 'colorTransparent' | 'colorActionSheetText' | 'colorHeaderBackground' | 'colorPanelHeaderIcon' | 'colorWriteBarIcon' | 'colorWriteBarInputBackground' | 'colorWriteBarInputBorderAlpha' | 'colorTrackBackground' | 'colorOverlayPrimary' | 'colorTrackBuffer' | 'colorImagePlaceholder' | 'colorImagePlaceholderAlpha' | 'colorSearchFieldBackground' | 'colorSkeletonTo' | 'colorSkeletonFrom' | 'colorAvatarOverlay';
|
|
10
|
+
export interface ThemePulseMediaTypography {
|
|
11
|
+
fontFamilyMedia: Property.FontFamily;
|
|
12
|
+
fontMediaHeader: Adaptive<Font>;
|
|
13
|
+
fontMediaTitle1: Adaptive<Font>;
|
|
14
|
+
fontMediaTitle2: Adaptive<Font>;
|
|
15
|
+
fontMediaTitle3: Adaptive<Font>;
|
|
16
|
+
fontMediaLead: Adaptive<Font>;
|
|
17
|
+
fontMediaParagraph: Adaptive<Font>;
|
|
18
|
+
}
|
|
19
|
+
export interface ThemePulseGeometry {
|
|
20
|
+
sizePageHorizontalPadding: Adaptive<number>;
|
|
21
|
+
sizeBorderRadiusSmall: Adaptive<number>;
|
|
22
|
+
sizeBorderRadiusLarge: Adaptive<number>;
|
|
23
|
+
sizeBorderRadiusCard: Adaptive<number>;
|
|
24
|
+
sizeBorderRadiusPill: Adaptive<number>;
|
|
25
|
+
sizeButtonCircleSmall: Adaptive<number>;
|
|
26
|
+
sizeButtonCircleMedium: Adaptive<number>;
|
|
27
|
+
sizeButtonCircleLarge: Adaptive<number>;
|
|
28
|
+
sizeButtonPaddingHorizontalLarge: Adaptive<number>;
|
|
29
|
+
sizeIconUIMedium: Adaptive<number>;
|
|
30
|
+
sizeIconUILarge: Adaptive<number>;
|
|
31
|
+
sizeBadge: Adaptive<number>;
|
|
32
|
+
sizeTag: Adaptive<number>;
|
|
33
|
+
sizeCardgridGapSpaceMedium: Adaptive<number>;
|
|
34
|
+
sizeCardgridGapSpaceLarge: Adaptive<number>;
|
|
35
|
+
sizeListItemHeight: Adaptive<number>;
|
|
36
|
+
sizeFieldHeight: Adaptive<number>;
|
|
37
|
+
}
|
|
38
|
+
export interface ThemePulseZIndex {
|
|
39
|
+
pulseZIndexDropdown: number;
|
|
40
|
+
pulseZIndexFixed: number;
|
|
41
|
+
pulseZIndexModal: number;
|
|
42
|
+
pulseZIndexModalBackdrop: number;
|
|
43
|
+
pulseZIndexSticky: number;
|
|
44
|
+
pulseZIndexTooltip: number;
|
|
45
|
+
}
|
|
46
|
+
export interface ThemePulseColors {
|
|
47
|
+
pulseColorAccentYellow: ColorDescription;
|
|
48
|
+
pulseColorBackgroundPurple: ColorDescription;
|
|
49
|
+
pulseColorOverlayViewer: ColorDescription;
|
|
50
|
+
pulseColorPurpleAlpha: ColorDescription;
|
|
51
|
+
pulseColorWhiteBlueAlpha: ColorDescription;
|
|
52
|
+
}
|
|
53
|
+
export interface ThemePulseGradients {
|
|
54
|
+
gradientSkeleton: GradientPoints;
|
|
55
|
+
}
|
|
56
|
+
export type AllowedParadigmColorDescriptions = Pick<ParadigmThemeDescription['colors'], AllowedParadigmColorTokens>;
|
|
57
|
+
type ThemePulseColorsDescription = ColorsDescription<ThemePulseColors & AllowedParadigmColorDescriptions>;
|
|
58
|
+
type ThemePulseColorsWithState = {
|
|
59
|
+
[key in keyof ThemePulseColors]: ColorWithStates;
|
|
60
|
+
};
|
|
61
|
+
type AllowedParadigmThemeTokens = Pick<ParadigmTheme, 'themeType' | 'colorsScheme' | AllowedParadigmTokens | AllowedParadigmColorTokens>;
|
|
62
|
+
type AllowedParadigmTokensDescription = Pick<ThemeDescription, AllowedParadigmTokens>;
|
|
63
|
+
export interface ThemePulse extends AllowedParadigmThemeTokens, ThemePulseMediaTypography, ThemePulseGeometry, ThemePulseZIndex, ThemePulseGradients, ThemePulseColorsWithState {
|
|
64
|
+
}
|
|
65
|
+
export interface ThemePulseDescription extends AllowedParadigmTokensDescription, ThemePulseMediaTypography, ThemePulseGeometry, ThemePulseZIndex, ThemePulseGradients, ThemePulseColorsDescription {
|
|
66
|
+
}
|
|
67
|
+
export interface ThemePulseCssVars extends ThemeCssVars<ThemePulse> {
|
|
68
|
+
}
|
|
69
|
+
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ThemePulse, ThemePulseCssVars, ThemePulseDescription } from '../pulse';
|
|
2
|
+
export interface ThemePulseDark extends ThemePulse {
|
|
3
|
+
}
|
|
4
|
+
export interface ThemePulseDarkDescription extends ThemePulseDescription {
|
|
5
|
+
}
|
|
6
|
+
export interface ThemePulseDarkCssVars extends ThemePulseCssVars {
|
|
7
|
+
}
|
|
@@ -3,17 +3,17 @@ import { ColorDescription, ColorsDescriptionStruct, ColorWithStates } from '../.
|
|
|
3
3
|
import { Adaptive } from '../../general/tools';
|
|
4
4
|
import { Font } from '../../general/typography';
|
|
5
5
|
import { LocalParadigmColorsDescriptionStruct, ParadigmTheme, ParadigmThemeCssVars, ParadigmThemeDescription } from '../../namespaces/paradigm';
|
|
6
|
-
|
|
7
|
-
export
|
|
6
|
+
type SearchViewports = ['touch', 'desktopS'];
|
|
7
|
+
export type SearchLocalGradients = {
|
|
8
8
|
searchCardBackground: string;
|
|
9
9
|
searchCardWithTextBackground: any;
|
|
10
10
|
};
|
|
11
|
-
export
|
|
11
|
+
export type SearchLocalElevations = {
|
|
12
12
|
elevation1Hover: Property.BoxShadow;
|
|
13
13
|
elevation2Hover: Property.BoxShadow;
|
|
14
14
|
elevationButtons: Property.BoxShadow;
|
|
15
15
|
};
|
|
16
|
-
export
|
|
16
|
+
export type SearchLocalFonts = {
|
|
17
17
|
searchFontSearchExtraHeadline: Adaptive<Font>;
|
|
18
18
|
searchFontSearchTitle4: Adaptive<Font>;
|
|
19
19
|
searchFontSearchTitle4Bold: Adaptive<Font>;
|
|
@@ -40,7 +40,7 @@ export interface LocalSearchColorsDescriptionStruct {
|
|
|
40
40
|
searchColorBackgroundOrangeAccentActive: ColorDescription;
|
|
41
41
|
searchColorTextLinkAlternativeHover: ColorDescription;
|
|
42
42
|
}
|
|
43
|
-
export
|
|
43
|
+
export type SearchLocalColors = {
|
|
44
44
|
[key in keyof LocalSearchColorsDescriptionStruct]: ColorWithStates;
|
|
45
45
|
};
|
|
46
46
|
export interface ThemeSearch extends ParadigmTheme<SearchViewports>, SearchLocalGradients, SearchLocalElevations, SearchLocalFonts, SearchLocalColors {
|