From b54e96810310c017e926cd8c4ee633efd9ee8d6a Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Thu, 19 Dec 2024 22:15:09 +0700 Subject: [PATCH 1/5] feat(core-themes): Add `spacing` tokens generation --- .../src/creators/createSpacingTokens.ts | 33 +++++++++++++++++++ core/core-themes/src/creators/index.ts | 1 + .../src/generators/generateTheme.ts | 4 ++- core/core-themes/src/types/index.ts | 12 ++++--- 4 files changed, 44 insertions(+), 6 deletions(-) create mode 100644 core/core-themes/src/creators/createSpacingTokens.ts diff --git a/core/core-themes/src/creators/createSpacingTokens.ts b/core/core-themes/src/creators/createSpacingTokens.ts new file mode 100644 index 00000000..0a3fe7f0 --- /dev/null +++ b/core/core-themes/src/creators/createSpacingTokens.ts @@ -0,0 +1,33 @@ +import { TokenType } from '../types'; +import { kebabToCamel, writeTokens } from '../utils'; + +const getSpacing = (spacing: any, tokens: TokenType[], kind: 'spacing') => + tokens + .filter((token) => token.tags[0] === kind) + .map((token) => { + const [, ...rest] = token.name.split('.'); + const value = spacing[token.name]; + const tokenName = kebabToCamel(rest.join('-')).replace(/(.*)x/gi, 'x$1'); + + return `/** ${token.description} */\n ${tokenName}: ${JSON.stringify(value.value)},`; + }) + .join('\n '); + +const getContent = (sizeSpacing: string) => `export const spacing = { + size: { + ${sizeSpacing} + }, +}; +`; + +export const createSpacingTokens = (themeDir: string, spacing: any, tokens?: Array) => { + if (!tokens?.length) { + return; + } + + const sizeSpacing = getSpacing(spacing, tokens, 'spacing'); + + const content = getContent(sizeSpacing); + + writeTokens(content, themeDir, 'spacing.ts'); +}; diff --git a/core/core-themes/src/creators/index.ts b/core/core-themes/src/creators/index.ts index dfb085d2..2107b026 100644 --- a/core/core-themes/src/creators/index.ts +++ b/core/core-themes/src/creators/index.ts @@ -2,5 +2,6 @@ export { createColorTokens } from './createColorTokens'; export { createGradientTokens } from './createGradientTokens'; export { createShadowTokens } from './createShadowTokens'; export { createShapeTokens } from './createShapeTokens'; +export { createSpacingTokens } from './createSpacingTokens'; export { createFontFamilyTokens } from './createFontFamilyTokens'; export { createTypographyTokens } from './createTypographyTokens'; diff --git a/core/core-themes/src/generators/generateTheme.ts b/core/core-themes/src/generators/generateTheme.ts index b1b3aa27..4fcf61a8 100644 --- a/core/core-themes/src/generators/generateTheme.ts +++ b/core/core-themes/src/generators/generateTheme.ts @@ -3,15 +3,16 @@ import fs from 'fs'; import { getMetaGrouped } from '../utils'; import { ThemeSource } from '../types'; - import { createColorTokens, createFontFamilyTokens, createGradientTokens, createShadowTokens, createShapeTokens, + createSpacingTokens, createTypographyTokens, } from '../creators'; + import { generateIndex } from '.'; export const generateTheme = (outDir: string, themeSource: ThemeSource) => { @@ -25,6 +26,7 @@ export const generateTheme = (outDir: string, themeSource: ThemeSource) => { createGradientTokens(themeDir, variations.gradient, metaGrouped.gradient); createShadowTokens(themeDir, variations.shadow, metaGrouped.shadow); createShapeTokens(themeDir, variations.shape, metaGrouped.shape); + createSpacingTokens(themeDir, variations.spacing, metaGrouped.spacing); createFontFamilyTokens(themeDir, variations.fontFamily, metaGrouped.fontFamily); createTypographyTokens(themeDir, variations.typography, metaGrouped.typography); diff --git a/core/core-themes/src/types/index.ts b/core/core-themes/src/types/index.ts index acb35b9d..1c798687 100644 --- a/core/core-themes/src/types/index.ts +++ b/core/core-themes/src/types/index.ts @@ -18,14 +18,16 @@ export interface Variations< T3 extends any = any, T4 extends any = any, T5 extends any = any, - T6 extends any = any + T6 extends any = any, + T7 extends any = any > { color: T1; gradient: T2; - shape: T4; - shadow: T3; - typography: T5; - fontFamily: T6; + shape: T3; + spacing: T4; + shadow: T5; + typography: T6; + fontFamily: T7; } export type Variation = keyof Variations; From ef2ac5208d3a9e9c3c4c3b2f7e4c2898fbba558c Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Thu, 19 Dec 2024 22:15:52 +0700 Subject: [PATCH 2/5] feat(plasma-themes): Add `spacing` tokens to themes --- .../src/themes/plasma_b2c/color.ts | 256 +++++++++++++----- .../src/themes/plasma_b2c/index.ts | 1 + .../src/themes/plasma_b2c/spacing.ts | 34 +++ .../src/themes/plasma_web/color.ts | 64 +++-- .../src/themes/plasma_web/index.ts | 1 + .../src/themes/plasma_web/spacing.ts | 34 +++ .../src/themes/stylesSalute/index.ts | 1 + .../src/themes/stylesSalute/spacing.ts | 34 +++ 8 files changed, 345 insertions(+), 80 deletions(-) create mode 100644 themes/plasma-themes/src/themes/plasma_b2c/spacing.ts create mode 100644 themes/plasma-themes/src/themes/plasma_web/spacing.ts create mode 100644 themes/plasma-themes/src/themes/stylesSalute/spacing.ts diff --git a/themes/plasma-themes/src/themes/plasma_b2c/color.ts b/themes/plasma-themes/src/themes/plasma_b2c/color.ts index da3c64a7..88c66e68 100644 --- a/themes/plasma-themes/src/themes/plasma_b2c/color.ts +++ b/themes/plasma-themes/src/themes/plasma_b2c/color.ts @@ -1016,26 +1016,18 @@ export const color = { inverseOverlayHard: '#F9F9F9F5', /** dark overlay inverse overlayBlur */ inverseOverlayBlur: '#F9F9F947', - /** dark outline default outlinePrimary */ - outlinePrimary: '#262626', /** dark outline default outlinePrimaryHover */ outlinePrimaryHover: '#303030FF', /** dark outline default outlinePrimaryActive */ outlinePrimaryActive: '#212121FF', - /** dark outline default outlineSecondary */ - outlineSecondary: '#4E4E4E', /** dark outline default outlineSecondaryHover */ outlineSecondaryHover: '#595959FF', /** dark outline default outlineSecondaryActive */ outlineSecondaryActive: '#4A4A4AFF', - /** dark outline default outlineTertiary */ - outlineTertiary: '#707070', /** dark outline default outlineTertiaryHover */ outlineTertiaryHover: '#7A7A7AFF', /** dark outline default outlineTertiaryActive */ outlineTertiaryActive: '#6B6B6BFF', - /** dark outline default outlineDefault */ - outlineDefault: '#F9F9F9', /** dark outline default outlineDefaultHover */ outlineDefaultHover: '#FFFFFFFF', /** dark outline default outlineDefaultActive */ @@ -1158,6 +1150,30 @@ export const color = { outlineTransparentInfo: '#3F81FD47', /** dark outline default outlineInfo */ outlineInfo: '#528EFF', + /** dark outline default outlineSolidPrimary */ + outlineSolidPrimary: '#262626', + /** dark outline default outlineSolidPrimaryHover */ + outlineSolidPrimaryHover: '#FFFFFFFF', + /** dark outline default outlineSolidPrimaryActive */ + outlineSolidPrimaryActive: '#ADADADFF', + /** dark outline default outlineSolidSecondary */ + outlineSolidSecondary: '#4E4E4E', + /** dark outline default outlineSolidSecondaryHover */ + outlineSolidSecondaryHover: '#FFFFFFFF', + /** dark outline default outlineSolidSecondaryActive */ + outlineSolidSecondaryActive: '#8C8C8CFF', + /** dark outline default outlineSolidTertiary */ + outlineSolidTertiary: '#707070', + /** dark outline default outlineSolidTertiaryHover */ + outlineSolidTertiaryHover: '#FFFFFFFF', + /** dark outline default outlineSolidTertiaryActive */ + outlineSolidTertiaryActive: '#737373FF', + /** dark outline default outlineSolidDefault */ + outlineSolidDefault: '#F9F9F9', + /** dark outline default outlineSolidDefaultHover */ + outlineSolidDefaultHover: '#C7C7C7FF', + /** dark outline default outlineSolidDefaultActive */ + outlineSolidDefaultActive: '#E0E0E0FF', /** dark outline onDark outlinePrimaryHover */ onDarkOutlinePrimaryHover: '#303030FF', /** dark outline onDark outlinePrimaryActive */ @@ -1246,14 +1262,6 @@ export const color = { onDarkOutlineTransparentInfoHover: '#3F82FD66', /** dark outline onDark outlineTransparentInfoActive */ onDarkOutlineTransparentInfoActive: '#3F82FD38', - /** dark outline onDark outlinePrimary */ - onDarkOutlinePrimary: '#262626', - /** dark outline onDark outlineSecondary */ - onDarkOutlineSecondary: '#4E4E4E', - /** dark outline onDark outlineTertiary */ - onDarkOutlineTertiary: '#707070', - /** dark outline onDark outlineDefault */ - onDarkOutlineDefault: '#F9F9F9', /** dark outline onDark outlineTransparentPrimary */ onDarkOutlineTransparentPrimary: '#FFFFFF1F', /** dark outline onDark outlineTransparentSecondary */ @@ -1290,6 +1298,30 @@ export const color = { onDarkOutlineInfo: '#528EFF', /** dark outline onDark outlineTransparentInfo */ onDarkOutlineTransparentInfo: '#3F81FD47', + /** dark outline onDark outlineSolidPrimary */ + onDarkOutlineSolidPrimary: '#262626', + /** dark outline onDark outlineSolidPrimaryHover */ + onDarkOutlineSolidPrimaryHover: '#FFFFFFFF', + /** dark outline onDark outlineSolidPrimaryActive */ + onDarkOutlineSolidPrimaryActive: '#ADADADFF', + /** dark outline onDark outlineSolidSecondary */ + onDarkOutlineSolidSecondary: '#4E4E4E', + /** dark outline onDark outlineSolidSecondaryHover */ + onDarkOutlineSolidSecondaryHover: '#FFFFFFFF', + /** dark outline onDark outlineSolidSecondaryActive */ + onDarkOutlineSolidSecondaryActive: '#8C8C8CFF', + /** dark outline onDark outlineSolidTertiary */ + onDarkOutlineSolidTertiary: '#707070', + /** dark outline onDark outlineSolidTertiaryHover */ + onDarkOutlineSolidTertiaryHover: '#FFFFFFFF', + /** dark outline onDark outlineSolidTertiaryActive */ + onDarkOutlineSolidTertiaryActive: '#737373FF', + /** dark outline onDark outlineSolidDefault */ + onDarkOutlineSolidDefault: '#F9F9F9', + /** dark outline onDark outlineSolidDefaultHover */ + onDarkOutlineSolidDefaultHover: '#C7C7C7FF', + /** dark outline onDark outlineSolidDefaultActive */ + onDarkOutlineSolidDefaultActive: '#E0E0E0FF', /** dark outline onLight outlinePrimaryHover */ onLightOutlinePrimaryHover: '#E8E8E8FF', /** dark outline onLight outlinePrimaryActive */ @@ -1298,14 +1330,10 @@ export const color = { onLightOutlineSecondaryHover: '#9E9E9EFF', /** dark outline onLight outlineSecondaryActive */ onLightOutlineSecondaryActive: '#8F8F8FFF', - /** dark outline onLight outlineTertiary */ - onLightOutlineTertiary: '#707070', /** dark outline onLight outlineTertiaryHover */ onLightOutlineTertiaryHover: '#7A7A7AFF', /** dark outline onLight outlineTertiaryActive */ onLightOutlineTertiaryActive: '#6B6B6BFF', - /** dark outline onLight outlineDefault */ - onLightOutlineDefault: '#080808', /** dark outline onLight outlineDefaultHover */ onLightOutlineDefaultHover: '#0D0D0DFF', /** dark outline onLight outlineDefaultActive */ @@ -1412,36 +1440,48 @@ export const color = { onLightOutlineTransparentInfoHover: '#2A72F852', /** dark outline onLight outlineTransparentInfoActive */ onLightOutlineTransparentInfoActive: '#2A72F824', - /** dark outline onLight outlinePrimary */ - onLightOutlinePrimary: '#DDDDDD', - /** dark outline onLight outlineSecondary */ - onLightOutlineSecondary: '#949494', /** dark outline onLight outlineInfo */ onLightOutlineInfo: '#3F81FD', /** dark outline onLight outlineInfoMinor */ onLightOutlineInfoMinor: '#8BB2FC', /** dark outline onLight outlineTransparentInfo */ onLightOutlineTransparentInfo: '#2A72F833', + /** dark outline onLight outlineSolidTertiary */ + onLightOutlineSolidTertiary: '#707070', + /** dark outline onLight outlineSolidTertiaryHover */ + onLightOutlineSolidTertiaryHover: '#FFFFFFFF', + /** dark outline onLight outlineSolidTertiaryActive */ + onLightOutlineSolidTertiaryActive: '#737373FF', + /** dark outline onLight outlineSolidDefault */ + onLightOutlineSolidDefault: '#080808', + /** dark outline onLight outlineSolidDefaultHover */ + onLightOutlineSolidDefaultHover: '#FFFFFFFF', + /** dark outline onLight outlineSolidDefaultActive */ + onLightOutlineSolidDefaultActive: '#C7C7C7FF', + /** dark outline onLight outlineSolidPrimary */ + onLightOutlineSolidPrimary: '#DDDDDD', + /** dark outline onLight outlineSolidPrimaryHover */ + onLightOutlineSolidPrimaryHover: '#ABABABFF', + /** dark outline onLight outlineSolidPrimaryActive */ + onLightOutlineSolidPrimaryActive: '#C4C4C4FF', + /** dark outline onLight outlineSolidSecondary */ + onLightOutlineSolidSecondary: '#949494', + /** dark outline onLight outlineSolidSecondaryHover */ + onLightOutlineSolidSecondaryHover: '#FFFFFFFF', + /** dark outline onLight outlineSolidSecondaryActive */ + onLightOutlineSolidSecondaryActive: '#575757FF', /** dark outline inverse outlinePrimaryHover */ inverseOutlinePrimaryHover: '#ABABABFF', /** dark outline inverse outlinePrimaryActive */ inverseOutlinePrimaryActive: '#C4C4C4FF', - /** dark outline inverse outlinePrimary */ - inverseOutlinePrimary: '#DDDDDD', - /** dark outline inverse outlineSecondary */ - inverseOutlineSecondary: '#949494', /** dark outline inverse outlineSecondaryHover */ inverseOutlineSecondaryHover: '#FFFFFFFF', /** dark outline inverse outlineSecondaryActive */ inverseOutlineSecondaryActive: '#575757FF', - /** dark outline inverse outlineTertiary */ - inverseOutlineTertiary: '#707070', /** dark outline inverse outlineTertiaryHover */ inverseOutlineTertiaryHover: '#FFFFFFFF', /** dark outline inverse outlineTertiaryActive */ inverseOutlineTertiaryActive: '#737373FF', - /** dark outline inverse outlineDefault */ - inverseOutlineDefault: '#080808', /** dark outline inverse outlineDefaultHover */ inverseOutlineDefaultHover: '#FFFFFFFF', /** dark outline inverse outlineDefaultActive */ @@ -1560,6 +1600,30 @@ export const color = { inverseOutlineTransparentInfoHover: '#2A72F8FF', /** dark outline inverse outlineTransparentInfoActive */ inverseOutlineTransparentInfoActive: '#2A72F83D', + /** dark outline inverse outlineSolidPrimary */ + inverseOutlineSolidPrimary: '#DDDDDD', + /** dark outline inverse outlineSolidPrimaryHover */ + inverseOutlineSolidPrimaryHover: '#ABABABFF', + /** dark outline inverse outlineSolidPrimaryActive */ + inverseOutlineSolidPrimaryActive: '#C4C4C4FF', + /** dark outline inverse outlineSolidSecondary */ + inverseOutlineSolidSecondary: '#949494', + /** dark outline inverse outlineSolidSecondaryHover */ + inverseOutlineSolidSecondaryHover: '#FFFFFFFF', + /** dark outline inverse outlineSolidSecondaryActive */ + inverseOutlineSolidSecondaryActive: '#575757FF', + /** dark outline inverse outlineSolidTertiary */ + inverseOutlineSolidTertiary: '#707070', + /** dark outline inverse outlineSolidTertiaryHover */ + inverseOutlineSolidTertiaryHover: '#FFFFFFFF', + /** dark outline inverse outlineSolidTertiaryActive */ + inverseOutlineSolidTertiaryActive: '#737373FF', + /** dark outline inverse outlineSolidDefault */ + inverseOutlineSolidDefault: '#080808', + /** dark outline inverse outlineSolidDefaultHover */ + inverseOutlineSolidDefaultHover: '#FFFFFFFF', + /** dark outline inverse outlineSolidDefaultActive */ + inverseOutlineSolidDefaultActive: '#C7C7C7FF', }, light: { /** Основной цвет текста */ @@ -2654,18 +2718,10 @@ export const color = { outlineTransparentInfoHover: '#2A72F81F', /** light outline default outlineTransparentInfoActive */ outlineTransparentInfoActive: '#2A72F83D', - /** light outline default outlinePrimary */ - outlinePrimary: '#DDDDDD', /** light outline default outlinePrimaryHover */ outlinePrimaryHover: '#EDEDEDFF', /** light outline default outlinePrimaryActive */ outlinePrimaryActive: '#D4D4D4FF', - /** light outline default outlineSecondary */ - outlineSecondary: '#949494', - /** light outline default outlineTertiary */ - outlineTertiary: '#707070', - /** light outline default outlineDefault */ - outlineDefault: '#080808', /** light outline default outlineTransparentPrimary */ outlineTransparentPrimary: '#08080833', /** light outline default outlineTransparentSecondary */ @@ -2708,6 +2764,30 @@ export const color = { outlineInfoMinor: '#8BB2FC', /** light outline default outlineTransparentInfo */ outlineTransparentInfo: '#2A72F833', + /** light outline default outlineSolidPrimary */ + outlineSolidPrimary: '#262626', + /** light outline default outlineSolidPrimaryHover */ + outlineSolidPrimaryHover: '#787878FF', + /** light outline default outlineSolidPrimaryActive */ + outlineSolidPrimaryActive: '#4F4F4FFF', + /** light outline default outlineSolidSecondary */ + outlineSolidSecondary: '#4E4E4E', + /** light outline default outlineSolidSecondaryHover */ + outlineSolidSecondaryHover: '#FFFFFFFF', + /** light outline default outlineSolidSecondaryActive */ + outlineSolidSecondaryActive: '#404040FF', + /** light outline default outlineSolidTertiary */ + outlineSolidTertiary: '#707070', + /** light outline default outlineSolidTertiaryHover */ + outlineSolidTertiaryHover: '#FFFFFFFF', + /** light outline default outlineSolidTertiaryActive */ + outlineSolidTertiaryActive: '#595959FF', + /** light outline default outlineSolidDefault */ + outlineSolidDefault: '#F9F9F9', + /** light outline default outlineSolidDefaultHover */ + outlineSolidDefaultHover: '#FFFFFFFF', + /** light outline default outlineSolidDefaultActive */ + outlineSolidDefaultActive: '#C7C7C7FF', /** light outline onDark outlineSecondaryHover */ onDarkOutlineSecondaryHover: '#636363FF', /** light outline onDark outlineSecondaryActive */ @@ -2822,24 +2902,40 @@ export const color = { onDarkOutlineTransparentInfoHover: '#3F82FD33', /** light outline onDark outlineTransparentInfoActive */ onDarkOutlineTransparentInfoActive: '#3F82FD52', - /** light outline onDark outlinePrimary */ - onDarkOutlinePrimary: '#262626', /** light outline onDark outlinePrimaryHover */ onDarkOutlinePrimaryHover: '#3B3B3BFF', /** light outline onDark outlinePrimaryActive */ onDarkOutlinePrimaryActive: '#1C1C1CFF', - /** light outline onDark outlineSecondary */ - onDarkOutlineSecondary: '#4E4E4E', - /** light outline onDark outlineTertiary */ - onDarkOutlineTertiary: '#707070', - /** light outline onDark outlineDefault */ - onDarkOutlineDefault: '#F9F9F9', /** light outline onDark outlineInfo */ onDarkOutlineInfo: '#528EFF', /** light outline onDark outlineInfoMinor */ onDarkOutlineInfoMinor: '#1549AB', /** light outline onDark outlineTransparentInfo */ onDarkOutlineTransparentInfo: '#3F81FD47', + /** light outline onDark outlineSolidPrimary */ + onDarkOutlineSolidPrimary: '#262626', + /** light outline onDark outlineSolidPrimaryHover */ + onDarkOutlineSolidPrimaryHover: '#787878FF', + /** light outline onDark outlineSolidPrimaryActive */ + onDarkOutlineSolidPrimaryActive: '#4F4F4FFF', + /** light outline onDark outlineSolidSecondary */ + onDarkOutlineSolidSecondary: '#4E4E4E', + /** light outline onDark outlineSolidSecondaryHover */ + onDarkOutlineSolidSecondaryHover: '#FFFFFFFF', + /** light outline onDark outlineSolidSecondaryActive */ + onDarkOutlineSolidSecondaryActive: '#404040FF', + /** light outline onDark outlineSolidTertiary */ + onDarkOutlineSolidTertiary: '#707070', + /** light outline onDark outlineSolidTertiaryHover */ + onDarkOutlineSolidTertiaryHover: '#FFFFFFFF', + /** light outline onDark outlineSolidTertiaryActive */ + onDarkOutlineSolidTertiaryActive: '#595959FF', + /** light outline onDark outlineSolidDefault */ + onDarkOutlineSolidDefault: '#F9F9F9', + /** light outline onDark outlineSolidDefaultHover */ + onDarkOutlineSolidDefaultHover: '#FFFFFFFF', + /** light outline onDark outlineSolidDefaultActive */ + onDarkOutlineSolidDefaultActive: '#C7C7C7FF', /** light outline onLight outlineSecondaryHover */ onLightOutlineSecondaryHover: '#A3A3A3FF', /** light outline onLight outlineSecondaryActive */ @@ -2848,8 +2944,6 @@ export const color = { onLightOutlineTertiaryHover: '#858585FF', /** light outline onLight outlineTertiaryActive */ onLightOutlineTertiaryActive: '#666666FF', - /** light outline onLight outlineDefault */ - onLightOutlineDefault: '#080808', /** light outline onLight outlineDefaultHover */ onLightOutlineDefaultHover: '#262626FF', /** light outline onLight outlineDefaultActive */ @@ -2956,22 +3050,40 @@ export const color = { onLightOutlineTransparentInfoHover: '#2A72F81F', /** light outline onLight outlineTransparentInfoActive */ onLightOutlineTransparentInfoActive: '#2A72F83D', - /** light outline onLight outlinePrimary */ - onLightOutlinePrimary: '#DDDDDD', /** light outline onLight outlinePrimaryHover */ onLightOutlinePrimaryHover: '#EDEDEDFF', /** light outline onLight outlinePrimaryActive */ onLightOutlinePrimaryActive: '#D4D4D4FF', - /** light outline onLight outlineSecondary */ - onLightOutlineSecondary: '#949494', - /** light outline onLight outlineTertiary */ - onLightOutlineTertiary: '#707070', /** light outline onLight outlineInfo */ onLightOutlineInfo: '#3F81FD', /** light outline onLight outlineInfoMinor */ onLightOutlineInfoMinor: '#8BB2FC', /** light outline onLight outlineTransparentInfo */ onLightOutlineTransparentInfo: '#2A72F833', + /** light outline onLight outlineSolidTertiary */ + onLightOutlineSolidTertiary: '#707070', + /** light outline onLight outlineSolidTertiaryHover */ + onLightOutlineSolidTertiaryHover: '#FFFFFFFF', + /** light outline onLight outlineSolidTertiaryActive */ + onLightOutlineSolidTertiaryActive: '#595959FF', + /** light outline onLight outlineSolidDefault */ + onLightOutlineSolidDefault: '#080808', + /** light outline onLight outlineSolidDefaultHover */ + onLightOutlineSolidDefaultHover: '#595959FF', + /** light outline onLight outlineSolidDefaultActive */ + onLightOutlineSolidDefaultActive: '#303030FF', + /** light outline onLight outlineSolidPrimary */ + onLightOutlineSolidPrimary: '#DDDDDD', + /** light outline onLight outlineSolidPrimaryHover */ + onLightOutlineSolidPrimaryHover: '#FFFFFFFF', + /** light outline onLight outlineSolidPrimaryActive */ + onLightOutlineSolidPrimaryActive: '#B3B3B3FF', + /** light outline onLight outlineSolidSecondary */ + onLightOutlineSolidSecondary: '#949494', + /** light outline onLight outlineSolidSecondaryHover */ + onLightOutlineSolidSecondaryHover: '#FFFFFFFF', + /** light outline onLight outlineSolidSecondaryActive */ + onLightOutlineSolidSecondaryActive: '#757575FF', /** light outline inverse outlinePrimaryHover */ inverseOutlinePrimaryHover: '#787878FF', /** light outline inverse outlinePrimaryActive */ @@ -3064,14 +3176,6 @@ export const color = { inverseOutlineTransparentInfoHover: '#3F82FDFF', /** light outline inverse outlineTransparentInfoActive */ inverseOutlineTransparentInfoActive: '#3F82FD56', - /** light outline inverse outlinePrimary */ - inverseOutlinePrimary: '#262626', - /** light outline inverse outlineSecondary */ - inverseOutlineSecondary: '#4E4E4E', - /** light outline inverse outlineTertiary */ - inverseOutlineTertiary: '#707070', - /** light outline inverse outlineDefault */ - inverseOutlineDefault: '#F9F9F9', /** light outline inverse outlineTransparentPrimary */ inverseOutlineTransparentPrimary: '#FFFFFF1F', /** light outline inverse outlineTransparentSecondary */ @@ -3110,5 +3214,29 @@ export const color = { inverseOutlineTransparentNegative: '#FF293E47', /** light outline inverse outlineTransparentInfo */ inverseOutlineTransparentInfo: '#3F81FD47', + /** light outline inverse outlineSolidPrimary */ + inverseOutlineSolidPrimary: '#DDDDDD', + /** light outline inverse outlineSolidPrimaryHover */ + inverseOutlineSolidPrimaryHover: '#FFFFFFFF', + /** light outline inverse outlineSolidPrimaryActive */ + inverseOutlineSolidPrimaryActive: '#B3B3B3FF', + /** light outline inverse outlineSolidSecondary */ + inverseOutlineSolidSecondary: '#949494', + /** light outline inverse outlineSolidSecondaryHover */ + inverseOutlineSolidSecondaryHover: '#FFFFFFFF', + /** light outline inverse outlineSolidSecondaryActive */ + inverseOutlineSolidSecondaryActive: '#757575FF', + /** light outline inverse outlineSolidTertiary */ + inverseOutlineSolidTertiary: '#707070', + /** light outline inverse outlineSolidTertiaryHover */ + inverseOutlineSolidTertiaryHover: '#FFFFFFFF', + /** light outline inverse outlineSolidTertiaryActive */ + inverseOutlineSolidTertiaryActive: '#595959FF', + /** light outline inverse outlineSolidDefault */ + inverseOutlineSolidDefault: '#080808', + /** light outline inverse outlineSolidDefaultHover */ + inverseOutlineSolidDefaultHover: '#595959FF', + /** light outline inverse outlineSolidDefaultActive */ + inverseOutlineSolidDefaultActive: '#303030FF', }, } as const; diff --git a/themes/plasma-themes/src/themes/plasma_b2c/index.ts b/themes/plasma-themes/src/themes/plasma_b2c/index.ts index 1a0bfd7f..a04bc2b3 100644 --- a/themes/plasma-themes/src/themes/plasma_b2c/index.ts +++ b/themes/plasma-themes/src/themes/plasma_b2c/index.ts @@ -4,3 +4,4 @@ export * from './shadow'; export * from './fontFamily'; export * from './shape'; export * from './typography'; +export * from './spacing'; diff --git a/themes/plasma-themes/src/themes/plasma_b2c/spacing.ts b/themes/plasma-themes/src/themes/plasma_b2c/spacing.ts new file mode 100644 index 00000000..e70e1059 --- /dev/null +++ b/themes/plasma-themes/src/themes/plasma_b2c/spacing.ts @@ -0,0 +1,34 @@ +export const spacing = { + size: { + /** spacing 0x */ + x0: 0, + /** spacing 1x */ + x1: 2, + /** spacing 2x */ + x2: 4, + /** spacing 3x */ + x3: 6, + /** spacing 4x */ + x4: 8, + /** spacing 6x */ + x6: 12, + /** spacing 8x */ + x8: 16, + /** spacing 10x */ + x10: 20, + /** spacing 12x */ + x12: 24, + /** spacing 16x */ + x16: 32, + /** spacing 20x */ + x20: 40, + /** spacing 24x */ + x24: 48, + /** spacing 32x */ + x32: 64, + /** spacing 40x */ + x40: 80, + /** spacing 60x */ + x60: 120, + }, +} as const; diff --git a/themes/plasma-themes/src/themes/plasma_web/color.ts b/themes/plasma-themes/src/themes/plasma_web/color.ts index 61292db4..e855ab86 100644 --- a/themes/plasma-themes/src/themes/plasma_web/color.ts +++ b/themes/plasma-themes/src/themes/plasma_web/color.ts @@ -1110,8 +1110,6 @@ export const color = { outlineSolidSecondary: '#4E4E4E', /** Третичный непрозрачный цвет обводки */ outlineSolidTertiary: '#707070', - /** dark outline default outlineDefault */ - outlineDefault: '#F9F9F9', /** dark outline default outlineDefaultHover */ outlineDefaultHover: '#FFFFFFFF', /** dark outline default outlineDefaultActive */ @@ -1154,6 +1152,12 @@ export const color = { outlineInfoMinor: '#1549AB', /** Прозрачный цвет обводки информация */ outlineTransparentInfo: '#528EFF47', + /** dark outline default outlineSolidDefault */ + outlineSolidDefault: '#F9F9F9', + /** dark outline default outlineSolidDefaultHover */ + outlineSolidDefaultHover: '#C7C7C7FF', + /** dark outline default outlineSolidDefaultActive */ + outlineSolidDefaultActive: '#E0E0E0FF', /** Основной непрозрачный цвет обводки на темном фоне */ onDarkOutlineSolidPrimaryHover: '#303030FF', /** Основной непрозрачный цвет обводки на темном фоне */ @@ -1248,8 +1252,6 @@ export const color = { onDarkOutlineSolidSecondary: '#4E4E4E', /** Третичный непрозрачный цвет обводки на темном фоне */ onDarkOutlineSolidTertiary: '#707070', - /** dark outline onDark outlineDefault */ - onDarkOutlineDefault: '#F9F9F9', /** Основной прозрачный цвет обводки на темном фоне */ onDarkOutlineTransparentPrimary: '#FFFFFF1F', /** Вторичный прозрачный цвет обводки на темном фоне */ @@ -1286,6 +1288,12 @@ export const color = { onDarkOutlineInfoMinor: '#1549AB', /** Прозрачный цвет обводки информация на темном фоне */ onDarkOutlineTransparentInfo: '#528EFF47', + /** dark outline onDark outlineSolidDefault */ + onDarkOutlineSolidDefault: '#F9F9F9', + /** dark outline onDark outlineSolidDefaultHover */ + onDarkOutlineSolidDefaultHover: '#C7C7C7FF', + /** dark outline onDark outlineSolidDefaultActive */ + onDarkOutlineSolidDefaultActive: '#E0E0E0FF', /** Основной непрозрачный цвет обводки на светлом фоне */ onLightOutlineSolidPrimaryHover: '#E8E8E8FF', /** Основной непрозрачный цвет обводки на светлом фоне */ @@ -1380,8 +1388,6 @@ export const color = { onLightOutlineSolidSecondary: '#949494', /** Третичный непрозрачный цвет обводки на светлом фоне */ onLightOutlineSolidTertiary: '#707070', - /** dark outline onLight outlineDefault */ - onLightOutlineDefault: '#080808', /** Основной прозрачный цвет обводки на светлом фоне */ onLightOutlineTransparentPrimary: '#08080833', /** Вторичный прозрачный цвет обводки на светлом фоне */ @@ -1418,6 +1424,12 @@ export const color = { onLightOutlineInfoMinor: '#8BB2FC', /** Прозрачный цвет обводки информация на светлом фоне */ onLightOutlineTransparentInfo: '#2A72F833', + /** dark outline onLight outlineSolidDefault */ + onLightOutlineSolidDefault: '#080808', + /** dark outline onLight outlineSolidDefaultHover */ + onLightOutlineSolidDefaultHover: '#FFFFFFFF', + /** dark outline onLight outlineSolidDefaultActive */ + onLightOutlineSolidDefaultActive: '#C7C7C7FF', /** Инвертированный основной непрозрачный цвет обводки */ inverseOutlineSolidPrimaryHover: '#ABABABFF', /** Инвертированный основной непрозрачный цвет обводки */ @@ -1520,8 +1532,6 @@ export const color = { inverseOutlineTransparentTertiary: '#0808088F', /** Инвертированная бесцветная обводка */ inverseOutlineClear: '#FFFFFF00', - /** dark outline inverse outlineDefault */ - inverseOutlineDefault: '#080808', /** dark outline inverse outlineDefaultHover */ inverseOutlineDefaultHover: '#FFFFFFFF', /** dark outline inverse outlineDefaultActive */ @@ -1556,6 +1566,12 @@ export const color = { inverseOutlineTransparentNegative: '#F31B3133', /** Прозрачный инвертированный цвет обводки информация */ inverseOutlineTransparentInfo: '#2A72F833', + /** dark outline inverse outlineSolidDefault */ + inverseOutlineSolidDefault: '#080808', + /** dark outline inverse outlineSolidDefaultHover */ + inverseOutlineSolidDefaultHover: '#FFFFFFFF', + /** dark outline inverse outlineSolidDefaultActive */ + inverseOutlineSolidDefaultActive: '#C7C7C7FF', }, light: { /** Основной цвет текста */ @@ -2680,8 +2696,6 @@ export const color = { outlineTransparentTertiary: '#0808088F', /** Бесцветная обводка */ outlineClear: '#FFFFFF00', - /** light outline default outlineDefault */ - outlineDefault: '#080808', /** Акцентный цвет обводки */ outlineAccent: '#2A72F8', /** Акцентный минорный непрозрачный цвет обводки */ @@ -2712,6 +2726,12 @@ export const color = { outlineInfoMinor: '#8BB2FC', /** Прозрачный цвет обводки информация */ outlineTransparentInfo: '#2A72F833', + /** light outline default outlineSolidDefault */ + outlineSolidDefault: '#F9F9F9', + /** light outline default outlineSolidDefaultHover */ + outlineSolidDefaultHover: '#FFFFFFFF', + /** light outline default outlineSolidDefaultActive */ + outlineSolidDefaultActive: '#C7C7C7FF', /** Основной непрозрачный цвет обводки на темном фоне */ onDarkOutlineSolidPrimaryHover: '#3B3B3BFF', /** Основной непрозрачный цвет обводки на темном фоне */ @@ -2802,8 +2822,6 @@ export const color = { onDarkOutlineSolidSecondary: '#4E4E4E', /** Третичный непрозрачный цвет обводки на темном фоне */ onDarkOutlineSolidTertiary: '#707070', - /** light outline onDark outlineDefault */ - onDarkOutlineDefault: '#F9F9F9', /** light outline onDark outlineDefaultHover */ onDarkOutlineDefaultHover: '#FFFFFFFF', /** light outline onDark outlineDefaultActive */ @@ -2844,6 +2862,12 @@ export const color = { onDarkOutlineInfoMinor: '#1549AB', /** Прозрачный цвет обводки информация на темном фоне */ onDarkOutlineTransparentInfo: '#528EFF47', + /** light outline onDark outlineSolidDefault */ + onDarkOutlineSolidDefault: '#F9F9F9', + /** light outline onDark outlineSolidDefaultHover */ + onDarkOutlineSolidDefaultHover: '#FFFFFFFF', + /** light outline onDark outlineSolidDefaultActive */ + onDarkOutlineSolidDefaultActive: '#C7C7C7FF', /** Основной непрозрачный цвет обводки на светлом фоне */ onLightOutlineSolidPrimaryHover: '#EDEDEDFF', /** Основной непрозрачный цвет обводки на светлом фоне */ @@ -2934,8 +2958,6 @@ export const color = { onLightOutlineSolidSecondary: '#949494', /** Третичный непрозрачный цвет обводки на светлом фоне */ onLightOutlineSolidTertiary: '#707070', - /** light outline onLight outlineDefault */ - onLightOutlineDefault: '#080808', /** light outline onLight outlineDefaultHover */ onLightOutlineDefaultHover: '#262626FF', /** light outline onLight outlineDefaultActive */ @@ -2976,6 +2998,12 @@ export const color = { onLightOutlineInfoMinor: '#8BB2FC', /** Прозрачный цвет обводки информация на светлом фоне */ onLightOutlineTransparentInfo: '#2A72F833', + /** light outline onLight outlineSolidDefault */ + onLightOutlineSolidDefault: '#080808', + /** light outline onLight outlineSolidDefaultHover */ + onLightOutlineSolidDefaultHover: '#595959FF', + /** light outline onLight outlineSolidDefaultActive */ + onLightOutlineSolidDefaultActive: '#303030FF', /** Инвертированный основной непрозрачный цвет обводки */ inverseOutlineSolidPrimaryHover: '#787878FF', /** Инвертированный основной непрозрачный цвет обводки */ @@ -3080,8 +3108,6 @@ export const color = { inverseOutlineTransparentTertiary: '#FFFFFF66', /** Инвертированная бесцветная обводка */ inverseOutlineClear: '#FFFFFF00', - /** light outline inverse outlineDefault */ - inverseOutlineDefault: '#F9F9F9', /** Инвертированный акцентный цвет обводки */ inverseOutlineAccent: '#3F81FD', /** Инвертированный акцентный минорный непрозрачный цвет обводки */ @@ -3114,5 +3140,11 @@ export const color = { inverseOutlineTransparentInfo: '#528EFF47', /** Инвертированный вторичный прозрачный цвет обводки */ inverseOutlineTransparentSecondary: '#FFFFFF1F', + /** light outline inverse outlineSolidDefault */ + inverseOutlineSolidDefault: '#080808', + /** light outline inverse outlineSolidDefaultHover */ + inverseOutlineSolidDefaultHover: '#595959FF', + /** light outline inverse outlineSolidDefaultActive */ + inverseOutlineSolidDefaultActive: '#303030FF', }, } as const; diff --git a/themes/plasma-themes/src/themes/plasma_web/index.ts b/themes/plasma-themes/src/themes/plasma_web/index.ts index 1a0bfd7f..a04bc2b3 100644 --- a/themes/plasma-themes/src/themes/plasma_web/index.ts +++ b/themes/plasma-themes/src/themes/plasma_web/index.ts @@ -4,3 +4,4 @@ export * from './shadow'; export * from './fontFamily'; export * from './shape'; export * from './typography'; +export * from './spacing'; diff --git a/themes/plasma-themes/src/themes/plasma_web/spacing.ts b/themes/plasma-themes/src/themes/plasma_web/spacing.ts new file mode 100644 index 00000000..e70e1059 --- /dev/null +++ b/themes/plasma-themes/src/themes/plasma_web/spacing.ts @@ -0,0 +1,34 @@ +export const spacing = { + size: { + /** spacing 0x */ + x0: 0, + /** spacing 1x */ + x1: 2, + /** spacing 2x */ + x2: 4, + /** spacing 3x */ + x3: 6, + /** spacing 4x */ + x4: 8, + /** spacing 6x */ + x6: 12, + /** spacing 8x */ + x8: 16, + /** spacing 10x */ + x10: 20, + /** spacing 12x */ + x12: 24, + /** spacing 16x */ + x16: 32, + /** spacing 20x */ + x20: 40, + /** spacing 24x */ + x24: 48, + /** spacing 32x */ + x32: 64, + /** spacing 40x */ + x40: 80, + /** spacing 60x */ + x60: 120, + }, +} as const; diff --git a/themes/plasma-themes/src/themes/stylesSalute/index.ts b/themes/plasma-themes/src/themes/stylesSalute/index.ts index 88dbfd01..bb35962c 100644 --- a/themes/plasma-themes/src/themes/stylesSalute/index.ts +++ b/themes/plasma-themes/src/themes/stylesSalute/index.ts @@ -4,3 +4,4 @@ export * from './fontFamily'; export * from './shadow'; export * from './shape'; export * from './typography'; +export * from './spacing'; diff --git a/themes/plasma-themes/src/themes/stylesSalute/spacing.ts b/themes/plasma-themes/src/themes/stylesSalute/spacing.ts new file mode 100644 index 00000000..e70e1059 --- /dev/null +++ b/themes/plasma-themes/src/themes/stylesSalute/spacing.ts @@ -0,0 +1,34 @@ +export const spacing = { + size: { + /** spacing 0x */ + x0: 0, + /** spacing 1x */ + x1: 2, + /** spacing 2x */ + x2: 4, + /** spacing 3x */ + x3: 6, + /** spacing 4x */ + x4: 8, + /** spacing 6x */ + x6: 12, + /** spacing 8x */ + x8: 16, + /** spacing 10x */ + x10: 20, + /** spacing 12x */ + x12: 24, + /** spacing 16x */ + x16: 32, + /** spacing 20x */ + x20: 40, + /** spacing 24x */ + x24: 48, + /** spacing 32x */ + x32: 64, + /** spacing 40x */ + x40: 80, + /** spacing 60x */ + x60: 120, + }, +} as const; From ce6bd26878d218214ac9e9393d94246679d7b46f Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Tue, 24 Dec 2024 12:08:16 +0700 Subject: [PATCH 3/5] fix(core-components): Fix types for some components --- .../src/components/Cell/Cell.styles.ts | 1 + .../src/components/Cell/Cell.types.ts | 4 +- .../FocusContainer/FocusContainer.types.ts | 44 +++++++++++++++---- .../ThemeProvider/ThemeProvider.types.ts | 20 ++++++++- .../components/Skeleton/Skeleton.stories.tsx | 2 +- .../components/Skeleton/Skeleton.stories.tsx | 2 +- 6 files changed, 58 insertions(+), 15 deletions(-) diff --git a/core/core-components/src/components/Cell/Cell.styles.ts b/core/core-components/src/components/Cell/Cell.styles.ts index 6b6374b6..c2bee841 100644 --- a/core/core-components/src/components/Cell/Cell.styles.ts +++ b/core/core-components/src/components/Cell/Cell.styles.ts @@ -103,6 +103,7 @@ export const getStyle = ( gap: sizeStyle.gap, ...externalStyle?.container, }, + // TODO: Удалить и проверить, что всё работает content: { height: 'auto', display: 'flex', diff --git a/core/core-components/src/components/Cell/Cell.types.ts b/core/core-components/src/components/Cell/Cell.types.ts index fb9fc0d4..a4e57cb9 100644 --- a/core/core-components/src/components/Cell/Cell.types.ts +++ b/core/core-components/src/components/Cell/Cell.types.ts @@ -13,7 +13,7 @@ export type CellWithContentRight = { */ alignContentRight?: AlignProp; /** - * Слот для контента спарва, например `Icon` + * Слот для контента справа, например `Icon` */ contentRight?: ReactNode; /** @@ -32,7 +32,7 @@ export type CellWithDisclosure = { */ alignContentRight?: never; /** - * Слот для контента спарва, например `Icon` + * Слот для контента справа, например `Icon` */ contentRight?: never; /** diff --git a/core/core-components/src/components/FocusContainer/FocusContainer.types.ts b/core/core-components/src/components/FocusContainer/FocusContainer.types.ts index 42677ae8..a6535d8c 100644 --- a/core/core-components/src/components/FocusContainer/FocusContainer.types.ts +++ b/core/core-components/src/components/FocusContainer/FocusContainer.types.ts @@ -1,15 +1,41 @@ import { PressableProps } from 'react-native'; +interface FocusProps { + /** + * Цвет текста компонента в фокусе + */ + focusedTextColor?: string; + /** + * Бэкграунд компонента в фокусе + */ + focusedBackgroundColor?: string; + /** + * Размер зума компонента в фокусе + */ + focusedScale: number; + /** + * Находится ли компонент в фокусе + */ + focused?: boolean; + /** + * Нажат ли компонент + */ + pressed?: boolean; +} + export interface CustomFocusContainerProps extends Omit { - children: (state: { - focusedTextColor: string; - focusedBackgroundColor: string; - focusedScale: number; - focused?: boolean; - pressed?: boolean; - }) => React.ReactNode; - unfocusedBackgroundColor: string; - unfocusedTextColor: string; + /** + * Функция, которая возвращает компонент, на который нужно сфокусироваться + */ + children: (state: FocusProps) => React.ReactNode; + /** + * Бэкграунд компонента вне фокуса + */ + unfocusedBackgroundColor?: string; + /** + * Цвет текста компонента вне фокуса + */ + unfocusedTextColor?: string; } export interface FocusContainerProps extends CustomFocusContainerProps {} diff --git a/core/core-components/src/components/ThemeProvider/ThemeProvider.types.ts b/core/core-components/src/components/ThemeProvider/ThemeProvider.types.ts index bf6c3f3b..3d6b13ca 100644 --- a/core/core-components/src/components/ThemeProvider/ThemeProvider.types.ts +++ b/core/core-components/src/components/ThemeProvider/ThemeProvider.types.ts @@ -1,10 +1,10 @@ import { ReactElement } from 'react'; -export type Color = { +export interface Color { [k: string]: { [k: string]: string; }; -}; +} export interface LinearGradientType { kind: 'linear'; @@ -39,6 +39,12 @@ export interface Shape { }; } +export interface Spacing { + [k: string]: { + [k: string]: number; + }; +} + export interface Shadow { [k: string]: { [k: string]: { @@ -86,13 +92,23 @@ export interface Data { gradient: Gradient; shadow: Shadow; shape: Shape; + spacing: Spacing; fontFamily: FontFamily; typography: Typography; } export interface Theme { + /* + * Режим темы + */ mode: 'light' | 'dark'; + /* + * Размер экрана, на котором + */ screenSize: 'screenS' | 'screenM' | 'screenL'; + /* + * Объект с токенами темы + */ data: T; } diff --git a/libraries/plasma-b2c/src/components/Skeleton/Skeleton.stories.tsx b/libraries/plasma-b2c/src/components/Skeleton/Skeleton.stories.tsx index 0585103c..9fddb943 100644 --- a/libraries/plasma-b2c/src/components/Skeleton/Skeleton.stories.tsx +++ b/libraries/plasma-b2c/src/components/Skeleton/Skeleton.stories.tsx @@ -44,7 +44,7 @@ export const Default: StoryObj = { }; const StoryRectSkeleton = (props: StoryRectSkeletonProps) => { - return ; + return ; }; const rectNotes = ` diff --git a/libraries/star-ds/src/components/Skeleton/Skeleton.stories.tsx b/libraries/star-ds/src/components/Skeleton/Skeleton.stories.tsx index 0585103c..9fddb943 100644 --- a/libraries/star-ds/src/components/Skeleton/Skeleton.stories.tsx +++ b/libraries/star-ds/src/components/Skeleton/Skeleton.stories.tsx @@ -44,7 +44,7 @@ export const Default: StoryObj = { }; const StoryRectSkeleton = (props: StoryRectSkeletonProps) => { - return ; + return ; }; const rectNotes = ` From 99ca812487b40b489de6cd56dee78bf3c34ed904 Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Tue, 24 Dec 2024 13:47:58 +0700 Subject: [PATCH 4/5] feat: Add docs for all components --- README.md | 19 +++- docs/Button.md | 148 ++++++++++++++++++++++++++ docs/Carousel.md | 135 +++++++++++++++++++++++ docs/Cell.md | 233 ++++++++++++++++++++++++++++++++++++++++ docs/Checkbox.md | 204 +++++++++++++++++++++++++++++++++++ docs/FocusContainer.md | 105 ++++++++++++++++++ docs/IconButton.md | 97 +++++++++++++++++ docs/List.md | 218 +++++++++++++++++++++++++++++++++++++ docs/Progress.md | 69 ++++++++++++ docs/Radiobox.md | 146 +++++++++++++++++++++++++ docs/Skeleton.md | 151 ++++++++++++++++++++++++++ docs/Spinner.md | 39 +++++++ docs/Switch.md | 98 +++++++++++++++++ docs/TextField.md | 125 ++++++++++++++++++++++ docs/ThemeProvider.md | 236 +++++++++++++++++++++++++++++++++++++++++ docs/Typography.md | 188 ++++++++++++++++++++++++++++++++ 16 files changed, 2207 insertions(+), 4 deletions(-) create mode 100644 docs/Button.md create mode 100644 docs/Carousel.md create mode 100644 docs/Cell.md create mode 100644 docs/Checkbox.md create mode 100644 docs/FocusContainer.md create mode 100644 docs/IconButton.md create mode 100644 docs/List.md create mode 100644 docs/Progress.md create mode 100644 docs/Radiobox.md create mode 100644 docs/Skeleton.md create mode 100644 docs/Spinner.md create mode 100644 docs/Switch.md create mode 100644 docs/TextField.md create mode 100644 docs/ThemeProvider.md create mode 100644 docs/Typography.md diff --git a/README.md b/README.md index fcd791ae..e4ee437f 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,7 @@ ## Файловая структура - `core` - содержит библиотеки, которые являются обязательными зависимостями для работы дизайн системы. +- `docs` - содержит документацию по всем компонентам библиотеки. - `libraries` - содержит пользовательские библиотеки компонентов. - `packages` - содержит утилитарные пакеты, необходимые для корректной работы дизайн системы. - `themes` - содержит пользовательские темы, разбитые на вертикали, сгенерированные на основе файлов из [репозитория](https://github.com/salute-developers/theme-converter). @@ -14,13 +15,17 @@ Содержит библиотеки, которые являются обязательными зависимостями для работы дизайн системы. +### Директория `docs` + +Содержит документацию по всем компонент библиотеки `core-components`. + ### Директория `libraries` Содержит пользовательские библиотеки компонентов. ### Директория `packages` -Содержит утилитарные пакеты, необходимые для корректной работы дизайн системы, а также набор иконок всех размеров. +Содержит утилитарные пакеты, необходимые для корректной работы дизайн системы, а также набор иконок всех размеров. ### Директория `themes` @@ -48,6 +53,12 @@ При дальнейшей разработке можно использовать команду `npx lerna bootstrap` как обычно. +Также перед выполнением всех дальнейших команд необходимо выполнить в корне проекта. + +```bash +$ npm install +``` + ### Поддержка актуального состояния Если нужно обновить файл `platforms/mobile/package.json` (`platforms/tv/package.json`), то необходимо внести все изменения в `package.json` как при обычной разработке и вызвать команду в директории с библиотекой компонент (например plasma-b2c) @@ -72,13 +83,13 @@ $ npm run platform:tv $ cd ./libraries/plasma-b2c ``` -Для сборки storybook на iPhone необходимо запустить iOS симулятор (через `Xcode`) и выполнить команду запуска +Для сборки storybook на iPhone / AppleTV необходимо запустить iOS симулятор (через `Xcode`) и выполнить команду ```bash $ npm run storybook:ios ``` -Для сборки storybook на Android необходимо запустить Android симулятор (через `Android Studio`) и выполнить команду запуска +Для сборки storybook на Android / AndroidTV необходимо запустить Android симулятор (через `Android Studio`) и выполнить команду ```bash $ npm run storybook:android @@ -138,7 +149,7 @@ sectionList: { #### Пересборка проекта -Есть возникают какие-то не описанные здесь ошибки, можно выполнить команду, которая полностью пересоберёт проекты для android и ios. +Есть возникают какие-то не описанные здесь ошибки, можно выполнить команду в директории библиотеки компонент, которая полностью пересоберёт проекты для android и ios. ```bash $ npm run storybook:tv-prebuild diff --git a/docs/Button.md b/docs/Button.md new file mode 100644 index 00000000..6c60f53b --- /dev/null +++ b/docs/Button.md @@ -0,0 +1,148 @@ +## Button + +Компонент, с помощью которого можно вызвать какое-либо действие и который может отображать текст с иконками. + +### Свойства и типы + +| Название свойства | Тип | Значение по умолчанию | Описание | +| ----------------- | ---------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| style | Style | - | Объект для стилизации компонента | +| spacing | Spacing | 'packed' | Расположение контента внутри кнопки | +| value | string | - | Значение кнопки | +| children | ReactNode | - | Контент кнопки | +| text | string | - | Текстовая надпись | +| contentLeft | ReactNode | - | Слот для контента слева, например `Icon` | +| contentRight | ReactNode | - | Слот для контента справа, например `Icon` | +| isLoading | boolean | - | Состояние загрузки | +| loader | ReactNode | - | Слот для контента загрузки | +| stretching | Stretching | 'auto' | Поведение ширины кнопки. Может принимать три значения: fixed - кнопка фиксированной ширины; filled - кнопка занимает всю доступную ширину auto - кнопка растягивается в зависимости от контента | +| disabled | boolean | - | Кнопка неактивна | +| pin | Pin | 'square-square' | Скругление border-radius | +| view | string | - | Вид кнопки | +| size | string | - | Размер кнопки | + +#### Расширенные типы + +Дополнительное описание типов + +```ts +type Spacing = 'packed' | 'space-between'; + +type Stretching = 'fixed' | 'filled' | 'auto'; + +type Pin = | + | 'square-square' + | 'square-clear' + | 'clear-square' + | 'clear-clear' + | 'clear-circle' + | 'circle-clear' + | 'circle-circle' +``` + +#### Взаимоисключающие свойства + +Свойство `value` - это значение кнопки. Оно отображается справа от основного текста. + +`value` и `contentRight` взаимоисключающие: если передано одно, второе передать нельзя. + +### Стилизация + +Для того, чтобы изменить внешний вид компонента, необходимо использовать свойство `style`, в который можно передать объекты, содержащие наборы стилей типа `ViewStyle` или `TextStyle`. + +Пример стилизации компонента находится в разделе ниже. + +### Примеры использования + +#### Стандартный пример + +```ts +import { Button } from '@salutejs/plasma-star-ds-tv'; +import { IconPlasma } from '@salutejs/plasma-icons-native'; + +const App = () => { + const onPress = () => { + alert('Произошёл onPress'); + }; + + return ( + + ); +}; + +export default App; +``` + +#### Пример с переопределением стилей + +```ts +import { Button } from '@salutejs/plasma-star-ds-tv'; +import { IconPlasma } from '@salutejs/plasma-icons-native'; + +const App = () => { + const onPress = () => { + alert('Произошёл onPress'); + }; + + return ( +