diff --git a/core/core-components/platforms/mobile/package-lock.json b/core/core-components/platforms/mobile/package-lock.json index 57ce6277..93c46fdc 100644 --- a/core/core-components/platforms/mobile/package-lock.json +++ b/core/core-components/platforms/mobile/package-lock.json @@ -1,12 +1,12 @@ { "name": "@salutejs/core-components", - "version": "0.9.0", + "version": "0.10.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@salutejs/core-components", - "version": "0.9.0", + "version": "0.10.0", "license": "MIT", "dependencies": { "@types/react": "~18.2.45", diff --git a/core/core-components/platforms/mobile/package.json b/core/core-components/platforms/mobile/package.json index 5adecc01..ed3d9475 100644 --- a/core/core-components/platforms/mobile/package.json +++ b/core/core-components/platforms/mobile/package.json @@ -1,5 +1,5 @@ { - "version": "0.9.0", + "version": "0.10.0", "name": "@salutejs/core-components", "description": "Core-components package for native platform on mobile.", "author": "Salute Frontend Team ", diff --git a/core/core-components/platforms/tv/package-lock.json b/core/core-components/platforms/tv/package-lock.json index cf640858..71ead0db 100644 --- a/core/core-components/platforms/tv/package-lock.json +++ b/core/core-components/platforms/tv/package-lock.json @@ -1,12 +1,12 @@ { "name": "@salutejs/core-components", - "version": "0.9.0", + "version": "0.10.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@salutejs/core-components", - "version": "0.9.0", + "version": "0.10.0", "license": "MIT", "dependencies": { "@types/react": "18.2.45", diff --git a/core/core-components/platforms/tv/package.json b/core/core-components/platforms/tv/package.json index bf5029a8..84d60b48 100644 --- a/core/core-components/platforms/tv/package.json +++ b/core/core-components/platforms/tv/package.json @@ -1,5 +1,5 @@ { - "version": "0.9.0", + "version": "0.10.0", "name": "@salutejs/core-components", "description": "Core-components package native platform on tv.", "author": "Salute Frontend Team ", diff --git a/core/core-themes/package-lock.json b/core/core-themes/package-lock.json index ea6a84d0..9e5a44b2 100644 --- a/core/core-themes/package-lock.json +++ b/core/core-themes/package-lock.json @@ -1,12 +1,12 @@ { "name": "@salutejs/core-themes-native", - "version": "0.9.0", + "version": "0.10.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@salutejs/core-themes-native", - "version": "0.9.0", + "version": "0.10.0", "license": "MIT", "dependencies": { "@salutejs/plasma-tokens-utils": "0.43.0", diff --git a/core/core-themes/package.json b/core/core-themes/package.json index 327e0233..932d306b 100644 --- a/core/core-themes/package.json +++ b/core/core-themes/package.json @@ -1,5 +1,5 @@ { - "version": "0.9.0", + "version": "0.10.0", "name": "@salutejs/core-themes-native", "description": "Core-themes package for native platform.", "author": "Salute Frontend Team ", 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; diff --git a/libraries/plasma-b2c/platforms/mobile/package-lock.json b/libraries/plasma-b2c/platforms/mobile/package-lock.json index b5c1d40c..9098dd30 100644 --- a/libraries/plasma-b2c/platforms/mobile/package-lock.json +++ b/libraries/plasma-b2c/platforms/mobile/package-lock.json @@ -1,12 +1,12 @@ { "name": "@salutejs/plasma-b2c", - "version": "0.9.0", + "version": "0.10.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@salutejs/plasma-b2c", - "version": "0.9.0", + "version": "0.10.0", "license": "MIT", "dependencies": { "@types/react": "~18.2.45", diff --git a/libraries/plasma-b2c/platforms/mobile/package.json b/libraries/plasma-b2c/platforms/mobile/package.json index 153b70df..39c33a5f 100644 --- a/libraries/plasma-b2c/platforms/mobile/package.json +++ b/libraries/plasma-b2c/platforms/mobile/package.json @@ -1,5 +1,5 @@ { - "version": "0.9.0", + "version": "0.10.0", "name": "@salutejs/plasma-b2c", "description": "Plasma-b2c components library for native platform on mobile.", "author": "Salute Frontend Team ", @@ -32,8 +32,8 @@ "dependencies": { "@expo/metro-runtime": "^3.2.1", "@expo/vector-icons": "^14.0.0", - "@salutejs/core-components": "0.9.0", - "@salutejs/plasma-themes-native": "0.9.0", + "@salutejs/core-components": "0.10.0", + "@salutejs/plasma-themes-native": "0.10.0", "@types/react": "~18.2.45", "install": "^0.13.0", "react": "^18.2.0", @@ -50,7 +50,7 @@ "@react-native-community/datetimepicker": "8.0.1", "@react-native-community/slider": "4.5.2", "@react-native-tvos/config-tv": "^0.0.10", - "@salutejs/plasma-icons-native": "0.1.0", + "@salutejs/plasma-icons-native": "0.2.0", "@storybook/addon-ondevice-actions": "^7.6.16", "@storybook/addon-ondevice-controls": "^7.6.16", "@storybook/addon-ondevice-notes": "^7.6.19", diff --git a/libraries/plasma-b2c/platforms/tv/package-lock.json b/libraries/plasma-b2c/platforms/tv/package-lock.json index 618cb76c..c85a09f0 100644 --- a/libraries/plasma-b2c/platforms/tv/package-lock.json +++ b/libraries/plasma-b2c/platforms/tv/package-lock.json @@ -1,12 +1,12 @@ { "name": "@salutejs/plasma-b2c", - "version": "0.9.0", + "version": "0.10.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@salutejs/plasma-b2c", - "version": "0.9.0", + "version": "0.10.0", "license": "MIT", "dependencies": { "@types/react": "18.2.45", diff --git a/libraries/plasma-b2c/platforms/tv/package.json b/libraries/plasma-b2c/platforms/tv/package.json index 70c958f7..dadc4629 100644 --- a/libraries/plasma-b2c/platforms/tv/package.json +++ b/libraries/plasma-b2c/platforms/tv/package.json @@ -1,5 +1,5 @@ { - "version": "0.9.0", + "version": "0.10.0", "name": "@salutejs/plasma-b2c", "description": "Plasma-b2c components library for native platform on tv.", "author": "Salute Frontend Team ", @@ -38,8 +38,8 @@ } }, "dependencies": { - "@salutejs/core-components": "0.9.0", - "@salutejs/plasma-themes-native": "0.9.0", + "@salutejs/core-components": "0.10.0", + "@salutejs/plasma-themes-native": "0.10.0", "@types/react": "18.2.45", "install": "^0.13.0", "react": "^18.2.0", @@ -56,7 +56,7 @@ "@react-native-community/datetimepicker": "8.0.1", "@react-native-community/slider": "4.5.2", "@react-native-tvos/config-tv": "^0.0.10", - "@salutejs/plasma-icons-native": "0.1.0", + "@salutejs/plasma-icons-native": "0.2.0", "@storybook/addon-ondevice-actions": "^7.6.16", "@storybook/addon-ondevice-controls": "^7.6.16", "@storybook/addon-ondevice-notes": "^7.6.19", diff --git a/libraries/star-ds/platforms/mobile/package-lock.json b/libraries/star-ds/platforms/mobile/package-lock.json index f6808fa1..187301fc 100644 --- a/libraries/star-ds/platforms/mobile/package-lock.json +++ b/libraries/star-ds/platforms/mobile/package-lock.json @@ -1,12 +1,12 @@ { "name": "@salutejs/star-ds", - "version": "0.7.0", + "version": "0.8.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@salutejs/star-ds", - "version": "0.7.0", + "version": "0.8.0", "license": "MIT", "dependencies": { "@types/react": "~18.2.45", diff --git a/libraries/star-ds/platforms/mobile/package.json b/libraries/star-ds/platforms/mobile/package.json index 6404f4ca..381d0087 100644 --- a/libraries/star-ds/platforms/mobile/package.json +++ b/libraries/star-ds/platforms/mobile/package.json @@ -1,5 +1,5 @@ { - "version": "0.7.0", + "version": "0.8.0", "name": "@salutejs/star-ds", "description": "Star-ds components library for native platform on mobile.", "author": "Salute Frontend Team ", @@ -32,8 +32,8 @@ "dependencies": { "@expo/metro-runtime": "^3.2.1", "@expo/vector-icons": "^14.0.0", - "@salutejs/core-components": "0.9.0", - "@salutejs/plasma-themes-native": "0.9.0", + "@salutejs/core-components": "0.10.0", + "@salutejs/plasma-themes-native": "0.10.0", "@types/react": "~18.2.45", "install": "^0.13.0", "react": "^18.2.0", @@ -50,7 +50,7 @@ "@react-native-community/datetimepicker": "8.0.1", "@react-native-community/slider": "4.5.2", "@react-native-tvos/config-tv": "^0.0.10", - "@salutejs/plasma-icons-native": "0.1.0", + "@salutejs/plasma-icons-native": "0.2.0", "@storybook/addon-ondevice-actions": "^7.6.16", "@storybook/addon-ondevice-controls": "^7.6.16", "@storybook/addon-ondevice-notes": "^7.6.19", diff --git a/libraries/star-ds/platforms/tv/package-lock.json b/libraries/star-ds/platforms/tv/package-lock.json index 7df800a2..8f2d72c8 100644 --- a/libraries/star-ds/platforms/tv/package-lock.json +++ b/libraries/star-ds/platforms/tv/package-lock.json @@ -1,12 +1,12 @@ { "name": "@salutejs/star-ds", - "version": "0.7.0", + "version": "0.8.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@salutejs/star-ds", - "version": "0.7.0", + "version": "0.8.0", "license": "MIT", "dependencies": { "@types/react": "18.2.45", diff --git a/libraries/star-ds/platforms/tv/package.json b/libraries/star-ds/platforms/tv/package.json index 8e5f8364..65479bff 100644 --- a/libraries/star-ds/platforms/tv/package.json +++ b/libraries/star-ds/platforms/tv/package.json @@ -1,5 +1,5 @@ { - "version": "0.7.0", + "version": "0.8.0", "name": "@salutejs/star-ds", "description": "Star-ds components library for native platform on tv.", "author": "Salute Frontend Team ", @@ -38,8 +38,8 @@ } }, "dependencies": { - "@salutejs/core-components": "0.9.0", - "@salutejs/plasma-themes-native": "0.9.0", + "@salutejs/core-components": "0.10.0", + "@salutejs/plasma-themes-native": "0.10.0", "@types/react": "18.2.45", "install": "^0.13.0", "react": "^18.2.0", @@ -56,7 +56,7 @@ "@react-native-community/datetimepicker": "8.0.1", "@react-native-community/slider": "4.5.2", "@react-native-tvos/config-tv": "^0.0.10", - "@salutejs/plasma-icons-native": "0.1.0", + "@salutejs/plasma-icons-native": "0.2.0", "@storybook/addon-ondevice-actions": "^7.6.16", "@storybook/addon-ondevice-controls": "^7.6.16", "@storybook/addon-ondevice-notes": "^7.6.19", diff --git a/packages/plasma-icons/package-lock.json b/packages/plasma-icons/package-lock.json index 3d9fbece..afec1d7d 100644 --- a/packages/plasma-icons/package-lock.json +++ b/packages/plasma-icons/package-lock.json @@ -1,12 +1,12 @@ { "name": "@salutejs/plasma-icons-native", - "version": "0.1.0", + "version": "0.2.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@salutejs/plasma-icons-native", - "version": "0.1.0", + "version": "0.2.0", "license": "MIT", "dependencies": { "react-native-svg": "15.2.0" diff --git a/packages/plasma-icons/package.json b/packages/plasma-icons/package.json index 6a728be4..d62ebab7 100644 --- a/packages/plasma-icons/package.json +++ b/packages/plasma-icons/package.json @@ -1,5 +1,5 @@ { - "version": "0.1.0", + "version": "0.2.0", "name": "@salutejs/plasma-icons-native", "description": "Plasma-icons package for native platform.", "author": "Salute Frontend Team ", @@ -23,11 +23,11 @@ "devDependencies": { "@types/node": "16.7.13", "@types/react": "18.2.45", - "ts-node": "10.2.1", - "typescript": "4.2.4", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-native": "0.74.5" + "react-native": "0.74.5", + "ts-node": "10.2.1", + "typescript": "4.2.4" }, "dependencies": { "react-native-svg": "15.2.0" diff --git a/themes/plasma-themes/package-lock.json b/themes/plasma-themes/package-lock.json index 4eb8aa44..cfce9290 100644 --- a/themes/plasma-themes/package-lock.json +++ b/themes/plasma-themes/package-lock.json @@ -1,12 +1,12 @@ { "name": "@salutejs/plasma-themes-native", - "version": "0.9.0", + "version": "0.10.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@salutejs/plasma-themes-native", - "version": "0.9.0", + "version": "0.10.0", "license": "MIT", "devDependencies": { "@types/node": "16.7.13", diff --git a/themes/plasma-themes/package.json b/themes/plasma-themes/package.json index bd62ef9e..06125f8c 100644 --- a/themes/plasma-themes/package.json +++ b/themes/plasma-themes/package.json @@ -1,5 +1,5 @@ { - "version": "0.9.0", + "version": "0.10.0", "name": "@salutejs/plasma-themes-native", "description": "Plasma-themes package for native platform.", "author": "Salute Frontend Team ", @@ -22,7 +22,7 @@ "build" ], "dependencies": { - "@salutejs/core-themes-native": "0.9.0" + "@salutejs/core-themes-native": "0.10.0" }, "devDependencies": { "@types/node": "16.7.13", 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; diff --git a/todo b/todo index 4bd03548..525dc05e 100644 --- a/todo +++ b/todo @@ -3,7 +3,7 @@ [x] - обновить генерацию токенов с hover / active [x] - обновить генерацию токенов с типографикой -[ ] - ? зафиксировать версию react-tv-os на 0.72.5-0 +[ ] - ? зафиксировать версию react-tv-os на 0.72.5-0 (или 0.74.5-0) [x] - Реализовать "простой" выпуск версий при влитии в мастер без создания релизных тегов [x] - Подумать про этап проверки проекта перед тем как отправить на публикацию (что выполняются команды npm run bootstrap:mobile и npm run bootstrap:tv)