diff --git a/core/core-components/src/components/Divider/Divider.styles.ts b/core/core-components/src/components/Divider/Divider.styles.ts new file mode 100644 index 0000000..6a30451 --- /dev/null +++ b/core/core-components/src/components/Divider/Divider.styles.ts @@ -0,0 +1,34 @@ +import { StyleSheet, ViewStyle } from 'react-native'; + +import { DividerConfig, OrientationProp } from './Divider.types'; + +export interface Style { + root?: ViewStyle; +} + +export const getStyle = ( + viewStyle?: DividerConfig['variations']['view'][string], + sizeStyle?: DividerConfig['variations']['size'][string], + orientationStyle?: DividerConfig['variations']['orientation'][string], + length?: number, + orientation?: OrientationProp, + externalStyle?: Style, +): Style => { + if (!viewStyle || !sizeStyle || !orientationStyle) { + return { + root: {}, + }; + } + + console.log('orientation', orientation); + + return StyleSheet.create({ + root: { + width: orientation === 'vertical' ? orientationStyle.baseSideSize : `${length ?? 100}%`, + height: orientation === 'vertical' ? `${length ?? 100}%` : orientationStyle.baseSideSize, + borderRadius: sizeStyle.borderRadius, + backgroundColor: viewStyle.background, + ...externalStyle?.root, + }, + }); +}; diff --git a/core/core-components/src/components/Divider/Divider.tsx b/core/core-components/src/components/Divider/Divider.tsx new file mode 100644 index 0000000..9c04862 --- /dev/null +++ b/core/core-components/src/components/Divider/Divider.tsx @@ -0,0 +1,32 @@ +import { useMemo } from 'react'; +import { View } from 'react-native'; + +import { PropsType } from '../../types'; +import { withTheme } from '../ThemeProvider'; + +import { DividerConfig, DividerProps } from './Divider.types'; +import { getStyle } from './Divider.styles'; + +export const dividerCore = (config?: T) => ( + props: DividerProps & PropsType, + externalRef: React.ForwardedRef, +) => { + const { view = '', size = '', orientation = 'horizontal', length = 100, ...rest } = props; + + const viewStyle = config?.variations.view[view]; + const sizeStyle = config?.variations.size[size]; + const orientationStyle = config?.variations.orientation[orientation]; + + const normalizedLength = length ? Math.max(Math.min(length, 100), 0) : 100; + + const style = useMemo(() => getStyle(viewStyle, sizeStyle, orientationStyle, normalizedLength, orientation), [ + view, + size, + orientation, + length, + ]); + + return ; +}; + +export const dividerComponent = withTheme(dividerCore); diff --git a/core/core-components/src/components/Divider/Divider.types.ts b/core/core-components/src/components/Divider/Divider.types.ts new file mode 100644 index 0000000..c3bd913 --- /dev/null +++ b/core/core-components/src/components/Divider/Divider.types.ts @@ -0,0 +1,44 @@ +export type OrientationProp = 'horizontal' | 'vertical'; + +export interface DividerProps { + /** + * Направление разделителя + */ + orientation?: OrientationProp; + /** + * Размер разделителя в процентах + */ + length?: number; + /** + * Вид разделителя + */ + view?: string; + /** + * Размер разделителя + */ + size?: string; +} + +export interface DividerConfig { + defaults: { + view: string; + size: string; + }; + variations: { + view: { + [x: string]: { + background: string; + }; + }; + size: { + [x: string]: { + borderRadius: number; + }; + }; + orientation: { + [x: string]: { + baseSideSize: number; + }; + }; + }; +} diff --git a/core/core-components/src/components/Divider/index.ts b/core/core-components/src/components/Divider/index.ts new file mode 100644 index 0000000..2f4f7a8 --- /dev/null +++ b/core/core-components/src/components/Divider/index.ts @@ -0,0 +1 @@ +export { dividerCore, dividerComponent } from './Divider'; diff --git a/core/core-components/src/components/Indicator/Indicator.styles.ts b/core/core-components/src/components/Indicator/Indicator.styles.ts new file mode 100644 index 0000000..46a3ca3 --- /dev/null +++ b/core/core-components/src/components/Indicator/Indicator.styles.ts @@ -0,0 +1,29 @@ +import { StyleSheet, ViewStyle } from 'react-native'; + +import { IndicatorConfig } from './Indicator.types'; + +export interface Style { + root?: ViewStyle; +} + +export const getStyle = ( + viewStyle?: IndicatorConfig['variations']['view'][string], + sizeStyle?: IndicatorConfig['variations']['size'][string], + externalStyle?: Style, +): Style => { + if (!viewStyle || !sizeStyle) { + return { + root: {}, + }; + } + + return StyleSheet.create({ + root: { + width: sizeStyle.size, + height: sizeStyle.size, + borderRadius: sizeStyle.size / 2, + backgroundColor: viewStyle.color, + ...externalStyle?.root, + }, + }); +}; diff --git a/core/core-components/src/components/Indicator/Indicator.tsx b/core/core-components/src/components/Indicator/Indicator.tsx new file mode 100644 index 0000000..91df207 --- /dev/null +++ b/core/core-components/src/components/Indicator/Indicator.tsx @@ -0,0 +1,24 @@ +import { useMemo } from 'react'; +import { View } from 'react-native'; + +import { PropsType } from '../../types'; +import { withTheme } from '../ThemeProvider'; + +import { IndicatorConfig, IndicatorProps } from './Indicator.types'; +import { getStyle } from './Indicator.styles'; + +export const indicatorCore = (config?: T) => ( + props: IndicatorProps & PropsType, + externalRef: React.ForwardedRef, +) => { + const { view = '', size = '', ...rest } = props; + + const viewStyle = config?.variations.view[view]; + const sizeStyle = config?.variations.size[size]; + + const style = useMemo(() => getStyle(viewStyle, sizeStyle), [view, size]); + + return ; +}; + +export const indicatorComponent = withTheme(indicatorCore); diff --git a/core/core-components/src/components/Indicator/Indicator.types.ts b/core/core-components/src/components/Indicator/Indicator.types.ts new file mode 100644 index 0000000..6f346a0 --- /dev/null +++ b/core/core-components/src/components/Indicator/Indicator.types.ts @@ -0,0 +1,29 @@ +export interface IndicatorProps { + /** + * Вид индикатора + */ + view?: string; + /** + * Размер индикатора + */ + size?: string; +} + +export interface IndicatorConfig { + defaults: { + view: string; + size: string; + }; + variations: { + view: { + [x: string]: { + color: string; + }; + }; + size: { + [x: string]: { + size: number; + }; + }; + }; +} diff --git a/core/core-components/src/components/Indicator/index.ts b/core/core-components/src/components/Indicator/index.ts new file mode 100644 index 0000000..c6368f1 --- /dev/null +++ b/core/core-components/src/components/Indicator/index.ts @@ -0,0 +1 @@ +export { indicatorCore, indicatorComponent } from './Indicator'; diff --git a/core/core-components/src/index.ts b/core/core-components/src/index.ts index 0e7408f..f7c026d 100644 --- a/core/core-components/src/index.ts +++ b/core/core-components/src/index.ts @@ -5,9 +5,11 @@ export * from './components/Carousel'; export * from './components/Card'; export * from './components/Cell'; export * from './components/Checkbox'; +export * from './components/Divider'; export * from './components/FocusContainer'; export * from './components/List'; export * from './components/IconButton'; +export * from './components/Indicator'; export * from './components/Skeleton'; export * from './components/Spinner'; export * from './components/Switch'; diff --git a/docs/Divider.md b/docs/Divider.md new file mode 100644 index 0000000..a79f43c --- /dev/null +++ b/docs/Divider.md @@ -0,0 +1,34 @@ +## Divider + +Компонент используется для визуального разделения других компонент. + +### Свойства и типы + +| Название свойства | Тип | Значение по умолчанию | Описание | +| ----------------- | --------------- | --------------------- | ----------------------------- | +| view | string | - | Вид разделителя | +| size | string | - | Размер разделителя | +| orientation | OrientationProp | 'horizontal' | Направление разделителя | +| length | number | 100 | Длина разделителя в процентах | + +#### Расширенные типы + +Дополнительное описание типов + +```ts +type OrientationProp = 'horizontal' | 'vertical'; +``` + +### Примеры использования + +#### Стандартный пример + +```ts +import { Divider } from '@salutejs/plasma-star-ds-tv'; + +const App = () => { + return ; +}; + +export default App; +``` diff --git a/docs/Indicator.md b/docs/Indicator.md new file mode 100644 index 0000000..9ef1d28 --- /dev/null +++ b/docs/Indicator.md @@ -0,0 +1,24 @@ +## Indicator + +Компонент отображающий состояние рядом лежащего компонента. + +### Свойства и типы + +| Название свойства | Тип | Значение по умолчанию | Описание | +| ----------------- | ------ | --------------------- | ----------------- | +| view | string | - | Вид индикатора | +| size | string | - | Размер индикатора | + +### Примеры использования + +#### Стандартный пример + +```ts +import { Indicator } from '@salutejs/plasma-star-ds-tv'; + +const App = () => { + return ; +}; + +export default App; +``` diff --git a/libraries/plasma-b2c/src/components/Divider/Divider.config.ts b/libraries/plasma-b2c/src/components/Divider/Divider.config.ts new file mode 100644 index 0000000..99b0eac --- /dev/null +++ b/libraries/plasma-b2c/src/components/Divider/Divider.config.ts @@ -0,0 +1,31 @@ +import { Theme } from '@salutejs/core-components'; + +import { PlasmaB2CTheme } from '../ThemeProvider'; + +export const getConfig = ({ data, mode }: Theme) => ({ + defaults: { + view: 'default', + size: 'm', + orientation: 'horizontal', + }, + variations: { + view: { + default: { + background: data.color[mode].surfaceTransparentTertiary, + }, + }, + size: { + m: { + borderRadius: 1, + }, + }, + orientation: { + horizontal: { + baseSideSize: 1, + }, + vertical: { + baseSideSize: 1, + }, + }, + }, +}); diff --git a/libraries/plasma-b2c/src/components/Divider/Divider.stories.tsx b/libraries/plasma-b2c/src/components/Divider/Divider.stories.tsx new file mode 100644 index 0000000..5a6e44f --- /dev/null +++ b/libraries/plasma-b2c/src/components/Divider/Divider.stories.tsx @@ -0,0 +1,69 @@ +import { View, Text, StyleProp, ViewStyle } from 'react-native'; +import type { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; + +import { Divider } from './Divider'; + +type StoryDividerProps = ComponentProps; + +const notes = ` +| **Control** | **Description** | **Default** | +|-------------|-------------------------|--------------| +| view | Вид разделителя | 'default' | +| size | Размер разделителя | 'm' | +| orientation | Направление разделителя | 'horizontal' | +| length | Длина разделителя | 100 | +`; + +const meta: Meta = { + title: 'Components/Divider', + component: Divider, + parameters: { + notes, + }, + args: { + view: 'default', + size: 'm', + orientation: 'horizontal', + length: 100, + }, + argTypes: { + size: { + options: ['m'], + control: { + type: 'select', + }, + }, + view: { + options: ['default'], + control: { + type: 'select', + }, + }, + orientation: { + options: ['horizontal', 'vertical'], + control: { + type: 'select', + }, + }, + }, +}; + +export default meta; + +const StoryDefault = (props: StoryDividerProps) => { + const wrapperStyle: StyleProp = + props.orientation === 'vertical' ? { flexDirection: 'row', height: 360 } : {}; + + return ( + + Before + + After + + ); +}; + +export const Default: StoryObj = { + render: (args) => , +}; diff --git a/libraries/plasma-b2c/src/components/Divider/Divider.ts b/libraries/plasma-b2c/src/components/Divider/Divider.ts new file mode 100644 index 0000000..8d92b73 --- /dev/null +++ b/libraries/plasma-b2c/src/components/Divider/Divider.ts @@ -0,0 +1,5 @@ +import { dividerComponent } from '@salutejs/core-components'; + +import { getConfig } from './Divider.config'; + +export const Divider = dividerComponent(getConfig); diff --git a/libraries/plasma-b2c/src/components/Divider/index.ts b/libraries/plasma-b2c/src/components/Divider/index.ts new file mode 100644 index 0000000..8ba836a --- /dev/null +++ b/libraries/plasma-b2c/src/components/Divider/index.ts @@ -0,0 +1 @@ +export { Divider } from './Divider'; diff --git a/libraries/plasma-b2c/src/components/Indicator/Indicator.config.ts b/libraries/plasma-b2c/src/components/Indicator/Indicator.config.ts new file mode 100644 index 0000000..e7d6c61 --- /dev/null +++ b/libraries/plasma-b2c/src/components/Indicator/Indicator.config.ts @@ -0,0 +1,43 @@ +import { Theme } from '@salutejs/core-components'; + +import { PlasmaB2CTheme } from '../ThemeProvider'; + +export const getConfig = ({ data, mode }: Theme) => ({ + defaults: { + view: 'accent', + size: 'm', + }, + variations: { + view: { + default: { + color: data.color[mode].textPrimary, + }, + accent: { + color: data.color[mode].textAccent, + }, + inactive: { + color: data.color[mode].surfaceSolidTertiary, + }, + positive: { + color: data.color[mode].textPositive, + }, + warning: { + color: data.color[mode].textWarning, + }, + negative: { + color: data.color[mode].textNegative, + }, + }, + size: { + l: { + size: 12, + }, + m: { + size: 8, + }, + s: { + size: 6, + }, + }, + }, +}); diff --git a/libraries/plasma-b2c/src/components/Indicator/Indicator.stories.tsx b/libraries/plasma-b2c/src/components/Indicator/Indicator.stories.tsx new file mode 100644 index 0000000..7096f5b --- /dev/null +++ b/libraries/plasma-b2c/src/components/Indicator/Indicator.stories.tsx @@ -0,0 +1,49 @@ +import type { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; + +import { Indicator } from './Indicator'; + +type StoryIndicatorProps = ComponentProps; + +const notes = ` +| **Control** | **Description** | **Default** | +| ----------- | ------------------------------ | --------------- | +| view | Вид индикатора | 'accent' | +| size | Размер индикатора | 'm' | +`; + +const meta: Meta = { + title: 'Components/Indicator', + component: Indicator, + parameters: { + notes, + }, + args: { + view: 'accent', + size: 'm', + }, + argTypes: { + size: { + options: ['s', 'm', 'l'], + control: { + type: 'select', + }, + }, + view: { + options: ['default', 'accent', 'inactive', 'positive', 'warning', 'negative'], + control: { + type: 'select', + }, + }, + }, +}; + +export default meta; + +const StoryDefault = (props: StoryIndicatorProps) => { + return ; +}; + +export const Default: StoryObj = { + render: (args) => , +}; diff --git a/libraries/plasma-b2c/src/components/Indicator/Indicator.ts b/libraries/plasma-b2c/src/components/Indicator/Indicator.ts new file mode 100644 index 0000000..1905509 --- /dev/null +++ b/libraries/plasma-b2c/src/components/Indicator/Indicator.ts @@ -0,0 +1,5 @@ +import { indicatorComponent } from '@salutejs/core-components'; + +import { getConfig } from './Indicator.config'; + +export const Indicator = indicatorComponent(getConfig); diff --git a/libraries/plasma-b2c/src/components/Indicator/index.ts b/libraries/plasma-b2c/src/components/Indicator/index.ts new file mode 100644 index 0000000..1b592eb --- /dev/null +++ b/libraries/plasma-b2c/src/components/Indicator/index.ts @@ -0,0 +1 @@ +export { Indicator } from './Indicator'; diff --git a/libraries/plasma-b2c/src/index.prod.ts b/libraries/plasma-b2c/src/index.prod.ts index e2b0ed1..2474df2 100644 --- a/libraries/plasma-b2c/src/index.prod.ts +++ b/libraries/plasma-b2c/src/index.prod.ts @@ -3,9 +3,11 @@ export * from './components/Carousel'; export * from './components/Card'; export * from './components/Cell'; export * from './components/Checkbox'; +export * from './components/Divider'; export * from './components/FocusContainer'; export * from './components/List'; export * from './components/IconButton'; +export * from './components/Indicator'; export * from './components/Skeleton'; export * from './components/Spinner'; export * from './components/Switch'; diff --git a/libraries/star-ds/android/app/build.gradle b/libraries/star-ds/android/app/build.gradle index 2d8e957..b03b1b2 100644 --- a/libraries/star-ds/android/app/build.gradle +++ b/libraries/star-ds/android/app/build.gradle @@ -115,7 +115,7 @@ android { minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 - versionName "0.8.0" + versionName "0.9.0" } signingConfigs { debug { diff --git a/libraries/star-ds/ios/StarDS.xcodeproj/project.pbxproj b/libraries/star-ds/ios/StarDS.xcodeproj/project.pbxproj index 6709911..0be28b0 100644 --- a/libraries/star-ds/ios/StarDS.xcodeproj/project.pbxproj +++ b/libraries/star-ds/ios/StarDS.xcodeproj/project.pbxproj @@ -10,12 +10,12 @@ 13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; }; 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; }; 13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; }; - 280A11C0CCB14FA7AF7C837D /* noop-file.swift in Sources */ = {isa = PBXBuildFile; fileRef = 790F1FDFB5204B278673EDDC /* noop-file.swift */; }; 3E461D99554A48A4959DE609 /* SplashScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */; }; 96905EF65AED1B983A6B3ABC /* libPods-StarDS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 58EEBF8E8E6FB1BC6CAF49B5 /* libPods-StarDS.a */; }; B18059E884C0ABDD17F3DC3D /* ExpoModulesProvider.swift in Sources */ = {isa = PBXBuildFile; fileRef = FAC715A2D49A985799AEE119 /* ExpoModulesProvider.swift */; }; BB2F792D24A3F905000567C9 /* Expo.plist in Resources */ = {isa = PBXBuildFile; fileRef = BB2F792C24A3F905000567C9 /* Expo.plist */; }; - CEE250B63E3F84B70CFB4881 /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = 38056C8271F0FA3363A251DB /* PrivacyInfo.xcprivacy */; }; + C7F881B7416AFA310A7EC47E /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = BC8FBC231EBF93076C77119C /* PrivacyInfo.xcprivacy */; }; + CCCB36E09E0F4E97BCCD04A5 /* noop-file.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5F91510C2BEA43748CB2902D /* noop-file.swift */; }; /* End PBXBuildFile section */ /* Begin PBXFileReference section */ @@ -25,14 +25,14 @@ 13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = StarDS/Images.xcassets; sourceTree = ""; }; 13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = StarDS/Info.plist; sourceTree = ""; }; 13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = StarDS/main.m; sourceTree = ""; }; - 38056C8271F0FA3363A251DB /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; includeInIndex = 1; name = PrivacyInfo.xcprivacy; path = StarDS/PrivacyInfo.xcprivacy; sourceTree = ""; }; + 3FCDD74562084BC0A17BA432 /* StarDS-Bridging-Header.h */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.c.h; name = "StarDS-Bridging-Header.h"; path = "StarDS/StarDS-Bridging-Header.h"; sourceTree = ""; }; 58EEBF8E8E6FB1BC6CAF49B5 /* libPods-StarDS.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-StarDS.a"; sourceTree = BUILT_PRODUCTS_DIR; }; + 5F91510C2BEA43748CB2902D /* noop-file.swift */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.swift; name = "noop-file.swift"; path = "StarDS/noop-file.swift"; sourceTree = ""; }; 6C2E3173556A471DD304B334 /* Pods-StarDS.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-StarDS.debug.xcconfig"; path = "Target Support Files/Pods-StarDS/Pods-StarDS.debug.xcconfig"; sourceTree = ""; }; - 790F1FDFB5204B278673EDDC /* noop-file.swift */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.swift; name = "noop-file.swift"; path = "StarDS/noop-file.swift"; sourceTree = ""; }; 7A4D352CD337FB3A3BF06240 /* Pods-StarDS.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-StarDS.release.xcconfig"; path = "Target Support Files/Pods-StarDS/Pods-StarDS.release.xcconfig"; sourceTree = ""; }; - 8EFD34505D23484DA126802E /* StarDS-Bridging-Header.h */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.c.h; name = "StarDS-Bridging-Header.h"; path = "StarDS/StarDS-Bridging-Header.h"; sourceTree = ""; }; AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = SplashScreen.storyboard; path = StarDS/SplashScreen.storyboard; sourceTree = ""; }; BB2F792C24A3F905000567C9 /* Expo.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Expo.plist; sourceTree = ""; }; + BC8FBC231EBF93076C77119C /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; includeInIndex = 1; name = PrivacyInfo.xcprivacy; path = StarDS/PrivacyInfo.xcprivacy; sourceTree = ""; }; ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; }; FAC715A2D49A985799AEE119 /* ExpoModulesProvider.swift */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = sourcecode.swift; name = ExpoModulesProvider.swift; path = "Pods/Target Support Files/Pods-StarDS/ExpoModulesProvider.swift"; sourceTree = ""; }; /* End PBXFileReference section */ @@ -59,9 +59,9 @@ 13B07FB61A68108700A75B9A /* Info.plist */, 13B07FB71A68108700A75B9A /* main.m */, AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */, - 790F1FDFB5204B278673EDDC /* noop-file.swift */, - 8EFD34505D23484DA126802E /* StarDS-Bridging-Header.h */, - 38056C8271F0FA3363A251DB /* PrivacyInfo.xcprivacy */, + 5F91510C2BEA43748CB2902D /* noop-file.swift */, + 3FCDD74562084BC0A17BA432 /* StarDS-Bridging-Header.h */, + BC8FBC231EBF93076C77119C /* PrivacyInfo.xcprivacy */, ); name = StarDS; sourceTree = ""; @@ -147,13 +147,13 @@ buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "StarDS" */; buildPhases = ( 08A4A3CD28434E44B6B9DE2E /* [CP] Check Pods Manifest.lock */, - 36B67A32176FAA43F88C57E9 /* [Expo] Configure project */, + F5F5C5D285111EFDBFA7C00C /* [Expo] Configure project */, 13B07F871A680F5B00A75B9A /* Sources */, 13B07F8C1A680F5B00A75B9A /* Frameworks */, 13B07F8E1A680F5B00A75B9A /* Resources */, 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */, 800E24972A6A228C8D4807E9 /* [CP] Copy Pods Resources */, - 30869214CA85EF7C0470687F /* [CP] Embed Pods Frameworks */, + FD5D1EE754296CF66D8A39C6 /* [CP] Embed Pods Frameworks */, ); buildRules = ( ); @@ -203,7 +203,7 @@ BB2F792D24A3F905000567C9 /* Expo.plist in Resources */, 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, 3E461D99554A48A4959DE609 /* SplashScreen.storyboard in Resources */, - CEE250B63E3F84B70CFB4881 /* PrivacyInfo.xcprivacy in Resources */, + C7F881B7416AFA310A7EC47E /* PrivacyInfo.xcprivacy in Resources */, ); runOnlyForDeploymentPostprocessing = 0; }; @@ -247,25 +247,33 @@ shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n"; showEnvVarsInLog = 0; }; - 30869214CA85EF7C0470687F /* [CP] Embed Pods Frameworks */ = { + 800E24972A6A228C8D4807E9 /* [CP] Copy Pods Resources */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputPaths = ( - "${PODS_ROOT}/Target Support Files/Pods-StarDS/Pods-StarDS-frameworks.sh", - "${PODS_XCFRAMEWORKS_BUILD_DIR}/hermes-engine/Pre-built/hermes.framework/hermes", + "${PODS_ROOT}/Target Support Files/Pods-StarDS/Pods-StarDS-resources.sh", + "${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/EXConstants.bundle", + "${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/ExpoConstants_privacy.bundle", + "${PODS_CONFIGURATION_BUILD_DIR}/ExpoFileSystem/ExpoFileSystem_privacy.bundle", + "${PODS_CONFIGURATION_BUILD_DIR}/RNCAsyncStorage/RNCAsyncStorage_resources.bundle", + "${PODS_CONFIGURATION_BUILD_DIR}/React-Core/RCTI18nStrings.bundle", ); - name = "[CP] Embed Pods Frameworks"; + name = "[CP] Copy Pods Resources"; outputPaths = ( - "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/hermes.framework", + "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXConstants.bundle", + "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoConstants_privacy.bundle", + "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoFileSystem_privacy.bundle", + "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNCAsyncStorage_resources.bundle", + "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCTI18nStrings.bundle", ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; - shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-StarDS/Pods-StarDS-frameworks.sh\"\n"; + shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-StarDS/Pods-StarDS-resources.sh\"\n"; showEnvVarsInLog = 0; }; - 36B67A32176FAA43F88C57E9 /* [Expo] Configure project */ = { + F5F5C5D285111EFDBFA7C00C /* [Expo] Configure project */ = { isa = PBXShellScriptBuildPhase; alwaysOutOfDate = 1; buildActionMask = 2147483647; @@ -284,30 +292,22 @@ shellPath = /bin/sh; shellScript = "# This script configures Expo modules and generates the modules provider file.\nbash -l -c \"./Pods/Target\\ Support\\ Files/Pods-StarDS/expo-configure-project.sh\"\n"; }; - 800E24972A6A228C8D4807E9 /* [CP] Copy Pods Resources */ = { + FD5D1EE754296CF66D8A39C6 /* [CP] Embed Pods Frameworks */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputPaths = ( - "${PODS_ROOT}/Target Support Files/Pods-StarDS/Pods-StarDS-resources.sh", - "${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/EXConstants.bundle", - "${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/ExpoConstants_privacy.bundle", - "${PODS_CONFIGURATION_BUILD_DIR}/ExpoFileSystem/ExpoFileSystem_privacy.bundle", - "${PODS_CONFIGURATION_BUILD_DIR}/RNCAsyncStorage/RNCAsyncStorage_resources.bundle", - "${PODS_CONFIGURATION_BUILD_DIR}/React-Core/RCTI18nStrings.bundle", + "${PODS_ROOT}/Target Support Files/Pods-StarDS/Pods-StarDS-frameworks.sh", + "${PODS_XCFRAMEWORKS_BUILD_DIR}/hermes-engine/Pre-built/hermes.framework/hermes", ); - name = "[CP] Copy Pods Resources"; + name = "[CP] Embed Pods Frameworks"; outputPaths = ( - "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXConstants.bundle", - "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoConstants_privacy.bundle", - "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoFileSystem_privacy.bundle", - "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNCAsyncStorage_resources.bundle", - "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCTI18nStrings.bundle", + "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/hermes.framework", ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; - shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-StarDS/Pods-StarDS-resources.sh\"\n"; + shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-StarDS/Pods-StarDS-frameworks.sh\"\n"; showEnvVarsInLog = 0; }; /* End PBXShellScriptBuildPhase section */ @@ -320,7 +320,7 @@ 13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */, 13B07FC11A68108700A75B9A /* main.m in Sources */, B18059E884C0ABDD17F3DC3D /* ExpoModulesProvider.swift in Sources */, - 280A11C0CCB14FA7AF7C837D /* noop-file.swift in Sources */, + CCCB36E09E0F4E97BCCD04A5 /* noop-file.swift in Sources */, ); runOnlyForDeploymentPostprocessing = 0; }; diff --git a/libraries/star-ds/ios/StarDS/Info.plist b/libraries/star-ds/ios/StarDS/Info.plist index 8f92c15..6c1d5fc 100644 --- a/libraries/star-ds/ios/StarDS/Info.plist +++ b/libraries/star-ds/ios/StarDS/Info.plist @@ -19,7 +19,7 @@ CFBundlePackageType $(PRODUCT_BUNDLE_PACKAGE_TYPE) CFBundleShortVersionString - 0.8.0 + 0.9.0 CFBundleSignature ???? CFBundleURLTypes diff --git a/libraries/star-ds/src/components/Divider/Divider.config.ts b/libraries/star-ds/src/components/Divider/Divider.config.ts new file mode 100644 index 0000000..e3ef746 --- /dev/null +++ b/libraries/star-ds/src/components/Divider/Divider.config.ts @@ -0,0 +1,31 @@ +import { Theme } from '@salutejs/core-components'; + +import { StylesSaluteTheme } from '../ThemeProvider'; + +export const getConfig = ({ data, mode }: Theme) => ({ + defaults: { + view: 'default', + size: 'm', + orientation: 'horizontal', + }, + variations: { + view: { + default: { + background: data.color[mode].surfaceTransparentTertiary, + }, + }, + size: { + m: { + borderRadius: 1, + }, + }, + orientation: { + horizontal: { + baseSideSize: 1, + }, + vertical: { + baseSideSize: 1, + }, + }, + }, +}); diff --git a/libraries/star-ds/src/components/Divider/Divider.stories.tsx b/libraries/star-ds/src/components/Divider/Divider.stories.tsx new file mode 100644 index 0000000..5a6e44f --- /dev/null +++ b/libraries/star-ds/src/components/Divider/Divider.stories.tsx @@ -0,0 +1,69 @@ +import { View, Text, StyleProp, ViewStyle } from 'react-native'; +import type { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; + +import { Divider } from './Divider'; + +type StoryDividerProps = ComponentProps; + +const notes = ` +| **Control** | **Description** | **Default** | +|-------------|-------------------------|--------------| +| view | Вид разделителя | 'default' | +| size | Размер разделителя | 'm' | +| orientation | Направление разделителя | 'horizontal' | +| length | Длина разделителя | 100 | +`; + +const meta: Meta = { + title: 'Components/Divider', + component: Divider, + parameters: { + notes, + }, + args: { + view: 'default', + size: 'm', + orientation: 'horizontal', + length: 100, + }, + argTypes: { + size: { + options: ['m'], + control: { + type: 'select', + }, + }, + view: { + options: ['default'], + control: { + type: 'select', + }, + }, + orientation: { + options: ['horizontal', 'vertical'], + control: { + type: 'select', + }, + }, + }, +}; + +export default meta; + +const StoryDefault = (props: StoryDividerProps) => { + const wrapperStyle: StyleProp = + props.orientation === 'vertical' ? { flexDirection: 'row', height: 360 } : {}; + + return ( + + Before + + After + + ); +}; + +export const Default: StoryObj = { + render: (args) => , +}; diff --git a/libraries/star-ds/src/components/Divider/Divider.ts b/libraries/star-ds/src/components/Divider/Divider.ts new file mode 100644 index 0000000..8d92b73 --- /dev/null +++ b/libraries/star-ds/src/components/Divider/Divider.ts @@ -0,0 +1,5 @@ +import { dividerComponent } from '@salutejs/core-components'; + +import { getConfig } from './Divider.config'; + +export const Divider = dividerComponent(getConfig); diff --git a/libraries/star-ds/src/components/Divider/index.ts b/libraries/star-ds/src/components/Divider/index.ts new file mode 100644 index 0000000..8ba836a --- /dev/null +++ b/libraries/star-ds/src/components/Divider/index.ts @@ -0,0 +1 @@ +export { Divider } from './Divider'; diff --git a/libraries/star-ds/src/components/Indicator/Indicator.config.ts b/libraries/star-ds/src/components/Indicator/Indicator.config.ts new file mode 100644 index 0000000..1171c00 --- /dev/null +++ b/libraries/star-ds/src/components/Indicator/Indicator.config.ts @@ -0,0 +1,43 @@ +import { Theme } from '@salutejs/core-components'; + +import { StylesSaluteTheme } from '../ThemeProvider'; + +export const getConfig = ({ data, mode }: Theme) => ({ + defaults: { + view: 'accent', + size: 'm', + }, + variations: { + view: { + default: { + color: data.color[mode].textPrimary, + }, + accent: { + color: data.color[mode].textAccentMain, + }, + inactive: { + color: data.color[mode].surfaceSolidTertiary, + }, + positive: { + color: data.color[mode].textPositive, + }, + warning: { + color: data.color[mode].textWarning, + }, + negative: { + color: data.color[mode].textNegative, + }, + }, + size: { + l: { + size: 12, + }, + m: { + size: 8, + }, + s: { + size: 6, + }, + }, + }, +}); diff --git a/libraries/star-ds/src/components/Indicator/Indicator.stories.tsx b/libraries/star-ds/src/components/Indicator/Indicator.stories.tsx new file mode 100644 index 0000000..7096f5b --- /dev/null +++ b/libraries/star-ds/src/components/Indicator/Indicator.stories.tsx @@ -0,0 +1,49 @@ +import type { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; + +import { Indicator } from './Indicator'; + +type StoryIndicatorProps = ComponentProps; + +const notes = ` +| **Control** | **Description** | **Default** | +| ----------- | ------------------------------ | --------------- | +| view | Вид индикатора | 'accent' | +| size | Размер индикатора | 'm' | +`; + +const meta: Meta = { + title: 'Components/Indicator', + component: Indicator, + parameters: { + notes, + }, + args: { + view: 'accent', + size: 'm', + }, + argTypes: { + size: { + options: ['s', 'm', 'l'], + control: { + type: 'select', + }, + }, + view: { + options: ['default', 'accent', 'inactive', 'positive', 'warning', 'negative'], + control: { + type: 'select', + }, + }, + }, +}; + +export default meta; + +const StoryDefault = (props: StoryIndicatorProps) => { + return ; +}; + +export const Default: StoryObj = { + render: (args) => , +}; diff --git a/libraries/star-ds/src/components/Indicator/Indicator.ts b/libraries/star-ds/src/components/Indicator/Indicator.ts new file mode 100644 index 0000000..1905509 --- /dev/null +++ b/libraries/star-ds/src/components/Indicator/Indicator.ts @@ -0,0 +1,5 @@ +import { indicatorComponent } from '@salutejs/core-components'; + +import { getConfig } from './Indicator.config'; + +export const Indicator = indicatorComponent(getConfig); diff --git a/libraries/star-ds/src/components/Indicator/index.ts b/libraries/star-ds/src/components/Indicator/index.ts new file mode 100644 index 0000000..1b592eb --- /dev/null +++ b/libraries/star-ds/src/components/Indicator/index.ts @@ -0,0 +1 @@ +export { Indicator } from './Indicator'; diff --git a/libraries/star-ds/src/index.prod.ts b/libraries/star-ds/src/index.prod.ts index e2b0ed1..2474df2 100644 --- a/libraries/star-ds/src/index.prod.ts +++ b/libraries/star-ds/src/index.prod.ts @@ -3,9 +3,11 @@ export * from './components/Carousel'; export * from './components/Card'; export * from './components/Cell'; export * from './components/Checkbox'; +export * from './components/Divider'; export * from './components/FocusContainer'; export * from './components/List'; export * from './components/IconButton'; +export * from './components/Indicator'; export * from './components/Skeleton'; export * from './components/Spinner'; export * from './components/Switch'; diff --git a/themes/plasma-themes/src/themes/plasma_b2c/color.ts b/themes/plasma-themes/src/themes/plasma_b2c/color.ts index 88c66e6..ce6da1d 100644 --- a/themes/plasma-themes/src/themes/plasma_b2c/color.ts +++ b/themes/plasma-themes/src/themes/plasma_b2c/color.ts @@ -1624,6 +1624,78 @@ export const color = { inverseOutlineSolidDefaultHover: '#FFFFFFFF', /** dark outline inverse outlineSolidDefaultActive */ inverseOutlineSolidDefaultActive: '#C7C7C7FF', + /** Желтый цвет для данных */ + dataYellow: '#F3A912', + /** Желтый цвет для данных */ + dataYellowHover: '#F4B22FFF', + /** Желтый цвет для данных */ + dataYellowActive: '#EDA20CFF', + /** Минорный желтый цвет для данных */ + dataYellowMinor: '#A16B00', + /** Минорный желтый цвет для данных */ + dataYellowMinorHover: '#B87A00FF', + /** Минорный желтый цвет для данных */ + dataYellowMinorActive: '#996600FF', + /** Прозрачный желтый цвет для данных */ + dataYellowTransparent: '#F3A9128F', + /** Прозрачный желтый цвет для данных */ + dataYellowTransparentHover: '#F3A812AD', + /** Прозрачный желтый цвет для данных */ + dataYellowTransparentActive: '#F3A81280', + /** Желтый цвет для данных на темном фоне */ + onDarkDataYellow: '#F3A912', + /** Желтый цвет для данных на темном фоне */ + onDarkDataYellowHover: '#F4B22FFF', + /** Желтый цвет для данных на темном фоне */ + onDarkDataYellowActive: '#EDA20CFF', + /** Минорный желтый цвет для данных на темном фоне */ + onDarkDataYellowMinor: '#A16B00', + /** Минорный желтый цвет для данных на темном фоне */ + onDarkDataYellowMinorHover: '#B87A00FF', + /** Минорный желтый цвет для данных на темном фоне */ + onDarkDataYellowMinorActive: '#996600FF', + /** Прозрачный желтый цвет для данных на темном фоне */ + onDarkDataYellowTransparent: '#F3A9128F', + /** Прозрачный желтый цвет для данных на темном фоне */ + onDarkDataYellowTransparentHover: '#F3A812AD', + /** Прозрачный желтый цвет для данных на темном фоне */ + onDarkDataYellowTransparentActive: '#F3A81280', + /** Желтый цвет для данных на светлом фоне */ + onLightDataYellow: '#F3A912', + /** Желтый цвет для данных на светлом фоне */ + onLightDataYellowHover: '#F4B22FFF', + /** Желтый цвет для данных на светлом фоне */ + onLightDataYellowActive: '#EDA20CFF', + /** Минорный желтый цвет для данных на светлом фоне */ + onLightDataYellowMinor: '#FFD37A', + /** Минорный желтый цвет для данных на светлом фоне */ + onLightDataYellowMinorHover: '#FFDA8FFF', + /** Минорный желтый цвет для данных на светлом фоне */ + onLightDataYellowMinorActive: '#FFCF70FF', + /** Прозрачный желтый цвет для данных на светлом фоне */ + onLightDataYellowTransparent: '#F3A9128F', + /** Прозрачный желтый цвет для данных на светлом фоне */ + onLightDataYellowTransparentHover: '#F3A812AD', + /** Прозрачный желтый цвет для данных на светлом фоне */ + onLightDataYellowTransparentActive: '#F3A81280', + /** Инвертированный желтый цвет для данных */ + inverseDataYellow: '#F3A912', + /** Инвертированный желтый цвет для данных */ + inverseDataYellowHover: '#F4B22FFF', + /** Инвертированный желтый цвет для данных */ + inverseDataYellowActive: '#EDA20CFF', + /** Инвертированный минорный желтый цвет для данных */ + inverseDataYellowMinor: '#FFD37A', + /** Инвертированный минорный желтый цвет для данных */ + inverseDataYellowMinorHover: '#FFDA8FFF', + /** Инвертированный минорный желтый цвет для данных */ + inverseDataYellowMinorActive: '#FFCF70FF', + /** Инвертированный прозрачный желтый цвет для данных */ + inverseDataYellowTransparent: '#F3A9128F', + /** Инвертированный прозрачный желтый цвет для данных */ + inverseDataYellowTransparentHover: '#F3A812AD', + /** Инвертированный прозрачный желтый цвет для данных */ + inverseDataYellowTransparentActive: '#F3A81280', }, light: { /** Основной цвет текста */ @@ -2764,30 +2836,30 @@ export const color = { outlineInfoMinor: '#8BB2FC', /** light outline default outlineTransparentInfo */ outlineTransparentInfo: '#2A72F833', - /** light outline default outlineSolidPrimary */ - outlineSolidPrimary: '#262626', /** light outline default outlineSolidPrimaryHover */ - outlineSolidPrimaryHover: '#787878FF', + outlineSolidPrimaryHover: '#FFFFFFFF', /** light outline default outlineSolidPrimaryActive */ - outlineSolidPrimaryActive: '#4F4F4FFF', - /** light outline default outlineSolidSecondary */ - outlineSolidSecondary: '#4E4E4E', + outlineSolidPrimaryActive: '#B3B3B3FF', /** light outline default outlineSolidSecondaryHover */ outlineSolidSecondaryHover: '#FFFFFFFF', /** light outline default outlineSolidSecondaryActive */ - outlineSolidSecondaryActive: '#404040FF', - /** light outline default outlineSolidTertiary */ - outlineSolidTertiary: '#707070', + outlineSolidSecondaryActive: '#757575FF', /** light outline default outlineSolidTertiaryHover */ outlineSolidTertiaryHover: '#FFFFFFFF', /** light outline default outlineSolidTertiaryActive */ outlineSolidTertiaryActive: '#595959FF', - /** light outline default outlineSolidDefault */ - outlineSolidDefault: '#F9F9F9', /** light outline default outlineSolidDefaultHover */ - outlineSolidDefaultHover: '#FFFFFFFF', + outlineSolidDefaultHover: '#595959FF', /** light outline default outlineSolidDefaultActive */ - outlineSolidDefaultActive: '#C7C7C7FF', + outlineSolidDefaultActive: '#303030FF', + /** light outline default outlineSolidPrimary */ + outlineSolidPrimary: '#DDDDDD', + /** light outline default outlineSolidSecondary */ + outlineSolidSecondary: '#949494', + /** light outline default outlineSolidTertiary */ + outlineSolidTertiary: '#707070', + /** light outline default outlineSolidDefault */ + outlineSolidDefault: '#080808', /** light outline onDark outlineSecondaryHover */ onDarkOutlineSecondaryHover: '#636363FF', /** light outline onDark outlineSecondaryActive */ @@ -3060,30 +3132,30 @@ export const color = { 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 onLight outlineSolidPrimary */ + onLightOutlineSolidPrimary: '#DDDDDD', + /** light outline onLight outlineSolidSecondary */ + onLightOutlineSolidSecondary: '#949494', + /** light outline onLight outlineSolidTertiary */ + onLightOutlineSolidTertiary: '#707070', + /** light outline onLight outlineSolidDefault */ + onLightOutlineSolidDefault: '#080808', /** light outline inverse outlinePrimaryHover */ inverseOutlinePrimaryHover: '#787878FF', /** light outline inverse outlinePrimaryActive */ @@ -3214,29 +3286,101 @@ export const color = { inverseOutlineTransparentNegative: '#FF293E47', /** light outline inverse outlineTransparentInfo */ inverseOutlineTransparentInfo: '#3F81FD47', - /** light outline inverse outlineSolidPrimary */ - inverseOutlineSolidPrimary: '#DDDDDD', /** light outline inverse outlineSolidPrimaryHover */ - inverseOutlineSolidPrimaryHover: '#FFFFFFFF', + inverseOutlineSolidPrimaryHover: '#787878FF', /** light outline inverse outlineSolidPrimaryActive */ - inverseOutlineSolidPrimaryActive: '#B3B3B3FF', - /** light outline inverse outlineSolidSecondary */ - inverseOutlineSolidSecondary: '#949494', + inverseOutlineSolidPrimaryActive: '#4F4F4FFF', /** light outline inverse outlineSolidSecondaryHover */ inverseOutlineSolidSecondaryHover: '#FFFFFFFF', /** light outline inverse outlineSolidSecondaryActive */ - inverseOutlineSolidSecondaryActive: '#757575FF', - /** light outline inverse outlineSolidTertiary */ - inverseOutlineSolidTertiary: '#707070', + inverseOutlineSolidSecondaryActive: '#404040FF', /** 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', + /** light outline inverse outlineSolidPrimary */ + inverseOutlineSolidPrimary: '#262626', + /** light outline inverse outlineSolidSecondary */ + inverseOutlineSolidSecondary: '#4E4E4E', + /** light outline inverse outlineSolidTertiary */ + inverseOutlineSolidTertiary: '#707070', + /** light outline inverse outlineSolidDefault */ + inverseOutlineSolidDefault: '#080808', + /** Желтый цвет для данных */ + dataYellow: '#F3A912', + /** Желтый цвет для данных */ + dataYellowHover: '#F5B638FF', + /** Желтый цвет для данных */ + dataYellowActive: '#E49C0CFF', + /** Минорный желтый цвет для данных */ + dataYellowMinor: '#FFD37A', + /** Минорный желтый цвет для данных */ + dataYellowMinorHover: '#FFDA8FFF', + /** Минорный желтый цвет для данных */ + dataYellowMinorActive: '#FFCC66FF', + /** Прозрачный желтый цвет для данных */ + dataYellowTransparent: '#F3A9128F', + /** Прозрачный желтый цвет для данных */ + dataYellowTransparentHover: '#F3A8127A', + /** Прозрачный желтый цвет для данных */ + dataYellowTransparentActive: '#F3A81299', + /** Желтый цвет для данных на темном фоне */ + onDarkDataYellow: '#F3A912', + /** Желтый цвет для данных на темном фоне */ + onDarkDataYellowHover: '#F5B638FF', + /** Желтый цвет для данных на темном фоне */ + onDarkDataYellowActive: '#E49C0CFF', + /** Минорный желтый цвет для данных на темном фоне */ + onDarkDataYellowMinor: '#A16B00', + /** Минорный желтый цвет для данных на темном фоне */ + onDarkDataYellowMinorHover: '#B87A00FF', + /** Минорный желтый цвет для данных на темном фоне */ + onDarkDataYellowMinorActive: '#8F5F00FF', + /** Прозрачный желтый цвет для данных на темном фоне */ + onDarkDataYellowTransparent: '#F3A9128F', + /** Прозрачный желтый цвет для данных на темном фоне */ + onDarkDataYellowTransparentHover: '#F3A8127A', + /** Прозрачный желтый цвет для данных на темном фоне */ + onDarkDataYellowTransparentActive: '#F3A81299', + /** Желтый цвет для данных на светлом фоне */ + onLightDataYellow: '#F3A912', + /** Желтый цвет для данных на светлом фоне */ + onLightDataYellowHover: '#F5B638FF', + /** Желтый цвет для данных на светлом фоне */ + onLightDataYellowActive: '#E49C0CFF', + /** Минорный желтый цвет для данных на светлом фоне */ + onLightDataYellowMinor: '#FFD37A', + /** Минорный желтый цвет для данных на светлом фоне */ + onLightDataYellowMinorHover: '#FFDA8FFF', + /** Минорный желтый цвет для данных на светлом фоне */ + onLightDataYellowMinorActive: '#FFCC66FF', + /** Прозрачный желтый цвет для данных на светлом фоне */ + onLightDataYellowTransparent: '#F3A9128F', + /** Прозрачный желтый цвет для данных на светлом фоне */ + onLightDataYellowTransparentHover: '#F3A8127A', + /** Прозрачный желтый цвет для данных на светлом фоне */ + onLightDataYellowTransparentActive: '#F3A81299', + /** Инвертированный желтый цвет для данных */ + inverseDataYellow: '#F3A912', + /** Инвертированный желтый цвет для данных */ + inverseDataYellowHover: '#F5B638FF', + /** Инвертированный желтый цвет для данных */ + inverseDataYellowActive: '#E49C0CFF', + /** Инвертированный минорный желтый цвет для данных */ + inverseDataYellowMinor: '#A16B00', + /** Инвертированный минорный желтый цвет для данных */ + inverseDataYellowMinorHover: '#B87A00FF', + /** Инвертированный минорный желтый цвет для данных */ + inverseDataYellowMinorActive: '#8F5F00FF', + /** Инвертированный прозрачный желтый цвет для данных */ + inverseDataYellowTransparent: '#F3A9128F', + /** Инвертированный прозрачный желтый цвет для данных */ + inverseDataYellowTransparentHover: '#F3A8127A', + /** Инвертированный прозрачный желтый цвет для данных */ + inverseDataYellowTransparentActive: '#F3A81299', }, } as const; diff --git a/themes/plasma-themes/src/themes/plasma_b2c/typography.ts b/themes/plasma-themes/src/themes/plasma_b2c/typography.ts index 3b3a994..f265c09 100644 --- a/themes/plasma-themes/src/themes/plasma_b2c/typography.ts +++ b/themes/plasma-themes/src/themes/plasma_b2c/typography.ts @@ -306,6 +306,159 @@ export const typography = { lineHeight: 16, letterSpacing: -0.02, }, + /** typography s display-l-medium */ + displayLMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 88, + lineHeight: 92, + letterSpacing: 0, + }, + /** typography s display-m-medium */ + displayMMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 56, + lineHeight: 62, + letterSpacing: 0, + }, + /** typography s display-s-medium */ + displaySMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 40, + lineHeight: 46, + letterSpacing: 0, + }, + /** typography s header-h1-medium */ + headerH1Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 28, + lineHeight: 34, + letterSpacing: 0, + }, + /** typography s header-h2-medium */ + headerH2Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 24, + lineHeight: 30, + letterSpacing: 0, + }, + /** typography s header-h3-medium */ + headerH3Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 20, + lineHeight: 26, + letterSpacing: 0, + }, + /** typography s header-h4-medium */ + headerH4Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 18, + lineHeight: 24, + letterSpacing: 0, + }, + /** typography s header-h5-medium */ + headerH5Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 16, + lineHeight: 22, + letterSpacing: 0, + }, + /** typography s body-l-medium */ + bodyLMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 18, + lineHeight: 22, + letterSpacing: -0.02, + }, + /** typography s body-m-medium */ + bodyMMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 16, + lineHeight: 20, + letterSpacing: -0.02, + }, + /** typography s body-s-medium */ + bodySMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 14, + lineHeight: 18, + letterSpacing: -0.02, + }, + /** typography s body-xs-medium */ + bodyXsMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 12, + lineHeight: 14, + letterSpacing: -0.02, + }, + /** typography s body-xxs-medium */ + bodyXxsMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 10, + lineHeight: 12, + letterSpacing: -0.02, + }, + /** typography s text-l-medium */ + textLMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 18, + lineHeight: 26, + letterSpacing: -0.02, + }, + /** typography s text-m-medium */ + textMMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 16, + lineHeight: 24, + letterSpacing: -0.02, + }, + /** typography s text-s-medium */ + textSMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 14, + lineHeight: 20, + letterSpacing: -0.02, + }, + /** typography s text-xs-medium */ + textXsMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 12, + lineHeight: 16, + letterSpacing: -0.02, + }, }, screenM: { /** typography m display-l */ @@ -614,6 +767,159 @@ export const typography = { lineHeight: 16, letterSpacing: -0.02, }, + /** typography m display-l-medium */ + displayLMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 112, + lineHeight: 112, + letterSpacing: 0, + }, + /** typography m display-m-medium */ + displayMMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 72, + lineHeight: 76, + letterSpacing: 0, + }, + /** typography m display-s-medium */ + displaySMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 48, + lineHeight: 54, + letterSpacing: 0, + }, + /** typography m header-h1-medium */ + headerH1Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 40, + lineHeight: 46, + letterSpacing: 0, + }, + /** typography m header-h2-medium */ + headerH2Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 28, + lineHeight: 34, + letterSpacing: 0, + }, + /** typography m header-h3-medium */ + headerH3Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 20, + lineHeight: 26, + letterSpacing: 0, + }, + /** typography m header-h4-medium */ + headerH4Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 18, + lineHeight: 24, + letterSpacing: 0, + }, + /** typography m header-h5-medium */ + headerH5Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 16, + lineHeight: 22, + letterSpacing: 0, + }, + /** typography m body-l-medium */ + bodyLMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 18, + lineHeight: 22, + letterSpacing: -0.02, + }, + /** typography m body-m-medium */ + bodyMMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 16, + lineHeight: 20, + letterSpacing: -0.02, + }, + /** typography m body-s-medium */ + bodySMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 14, + lineHeight: 18, + letterSpacing: -0.02, + }, + /** typography m body-xs-medium */ + bodyXsMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 12, + lineHeight: 14, + letterSpacing: -0.02, + }, + /** typography m body-xxs-medium */ + bodyXxsMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 10, + lineHeight: 12, + letterSpacing: -0.02, + }, + /** typography m text-l-medium */ + textLMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 20, + lineHeight: 28, + letterSpacing: -0.02, + }, + /** typography m text-m-medium */ + textMMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 16, + lineHeight: 24, + letterSpacing: -0.02, + }, + /** typography m text-s-medium */ + textSMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 14, + lineHeight: 20, + letterSpacing: -0.02, + }, + /** typography m text-xs-medium */ + textXsMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 12, + lineHeight: 16, + letterSpacing: -0.02, + }, }, screenL: { /** typography l display-l */ @@ -922,5 +1228,158 @@ export const typography = { lineHeight: 16, letterSpacing: -0.02, }, + /** typography l display-l-medium */ + displayLMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 128, + lineHeight: 128, + letterSpacing: 0, + }, + /** typography l display-m-medium */ + displayMMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 88, + lineHeight: 92, + letterSpacing: 0, + }, + /** typography l display-s-medium */ + displaySMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 64, + lineHeight: 68, + letterSpacing: 0, + }, + /** typography l header-h1-medium */ + headerH1Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 48, + lineHeight: 54, + letterSpacing: 0, + }, + /** typography l header-h2-medium */ + headerH2Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 32, + lineHeight: 38, + letterSpacing: 0, + }, + /** typography l header-h3-medium */ + headerH3Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 24, + lineHeight: 30, + letterSpacing: 0, + }, + /** typography l header-h4-medium */ + headerH4Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 20, + lineHeight: 26, + letterSpacing: 0, + }, + /** typography l header-h5-medium */ + headerH5Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 18, + lineHeight: 24, + letterSpacing: 0, + }, + /** typography l body-l-medium */ + bodyLMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 18, + lineHeight: 22, + letterSpacing: -0.02, + }, + /** typography l body-m-medium */ + bodyMMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 16, + lineHeight: 20, + letterSpacing: -0.02, + }, + /** typography l body-s-medium */ + bodySMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 14, + lineHeight: 18, + letterSpacing: -0.02, + }, + /** typography l body-xs-medium */ + bodyXsMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 12, + lineHeight: 14, + letterSpacing: -0.02, + }, + /** typography l body-xxs-medium */ + bodyXxsMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 10, + lineHeight: 12, + letterSpacing: -0.02, + }, + /** typography l text-l-medium */ + textLMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 24, + lineHeight: 32, + letterSpacing: -0.02, + }, + /** typography l text-m-medium */ + textMMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 18, + lineHeight: 26, + letterSpacing: -0.02, + }, + /** typography l text-s-medium */ + textSMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 14, + lineHeight: 20, + letterSpacing: -0.02, + }, + /** typography l text-xs-medium */ + textXsMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 12, + lineHeight: 16, + letterSpacing: -0.02, + }, }, } 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 e855ab8..4510964 100644 --- a/themes/plasma-themes/src/themes/plasma_web/color.ts +++ b/themes/plasma-themes/src/themes/plasma_web/color.ts @@ -1572,6 +1572,78 @@ export const color = { inverseOutlineSolidDefaultHover: '#FFFFFFFF', /** dark outline inverse outlineSolidDefaultActive */ inverseOutlineSolidDefaultActive: '#C7C7C7FF', + /** Желтый цвет для данных */ + dataYellow: '#F3A912', + /** Желтый цвет для данных */ + dataYellowHover: '#F4B22FFF', + /** Желтый цвет для данных */ + dataYellowActive: '#EDA20CFF', + /** Минорный желтый цвет для данных */ + dataYellowMinor: '#A16B00', + /** Минорный желтый цвет для данных */ + dataYellowMinorHover: '#B87A00FF', + /** Минорный желтый цвет для данных */ + dataYellowMinorActive: '#996600FF', + /** Прозрачный желтый цвет для данных */ + dataYellowTransparent: '#F3A9128F', + /** Прозрачный желтый цвет для данных */ + dataYellowTransparentHover: '#F3A812AD', + /** Прозрачный желтый цвет для данных */ + dataYellowTransparentActive: '#F3A81280', + /** Желтый цвет для данных на темном фоне */ + onDarkDataYellow: '#F3A912', + /** Желтый цвет для данных на темном фоне */ + onDarkDataYellowHover: '#F4B22FFF', + /** Желтый цвет для данных на темном фоне */ + onDarkDataYellowActive: '#EDA20CFF', + /** Минорный желтый цвет для данных на темном фоне */ + onDarkDataYellowMinor: '#A16B00', + /** Минорный желтый цвет для данных на темном фоне */ + onDarkDataYellowMinorHover: '#B87A00FF', + /** Минорный желтый цвет для данных на темном фоне */ + onDarkDataYellowMinorActive: '#996600FF', + /** Прозрачный желтый цвет для данных на темном фоне */ + onDarkDataYellowTransparent: '#F3A9128F', + /** Прозрачный желтый цвет для данных на темном фоне */ + onDarkDataYellowTransparentHover: '#F3A812AD', + /** Прозрачный желтый цвет для данных на темном фоне */ + onDarkDataYellowTransparentActive: '#F3A81280', + /** Желтый цвет для данных на светлом фоне */ + onLightDataYellow: '#F3A912', + /** Желтый цвет для данных на светлом фоне */ + onLightDataYellowHover: '#F4B22FFF', + /** Желтый цвет для данных на светлом фоне */ + onLightDataYellowActive: '#EDA20CFF', + /** Минорный желтый цвет для данных на светлом фоне */ + onLightDataYellowMinor: '#FFD37A', + /** Минорный желтый цвет для данных на светлом фоне */ + onLightDataYellowMinorHover: '#FFDA8FFF', + /** Минорный желтый цвет для данных на светлом фоне */ + onLightDataYellowMinorActive: '#FFCF70FF', + /** Прозрачный желтый цвет для данных на светлом фоне */ + onLightDataYellowTransparent: '#F3A9128F', + /** Прозрачный желтый цвет для данных на светлом фоне */ + onLightDataYellowTransparentHover: '#F3A812AD', + /** Прозрачный желтый цвет для данных на светлом фоне */ + onLightDataYellowTransparentActive: '#F3A81280', + /** Инвертированный желтый цвет для данных */ + inverseDataYellow: '#F3A912', + /** Инвертированный желтый цвет для данных */ + inverseDataYellowHover: '#F4B22FFF', + /** Инвертированный желтый цвет для данных */ + inverseDataYellowActive: '#EDA20CFF', + /** Инвертированный минорный желтый цвет для данных */ + inverseDataYellowMinor: '#FFD37A', + /** Инвертированный минорный желтый цвет для данных */ + inverseDataYellowMinorHover: '#FFDA8FFF', + /** Инвертированный минорный желтый цвет для данных */ + inverseDataYellowMinorActive: '#FFCF70FF', + /** Инвертированный прозрачный желтый цвет для данных */ + inverseDataYellowTransparent: '#F3A9128F', + /** Инвертированный прозрачный желтый цвет для данных */ + inverseDataYellowTransparentHover: '#F3A812AD', + /** Инвертированный прозрачный желтый цвет для данных */ + inverseDataYellowTransparentActive: '#F3A81280', }, light: { /** Основной цвет текста */ @@ -3146,5 +3218,77 @@ export const color = { inverseOutlineSolidDefaultHover: '#595959FF', /** light outline inverse outlineSolidDefaultActive */ inverseOutlineSolidDefaultActive: '#303030FF', + /** Желтый цвет для данных */ + dataYellow: '#F3A912', + /** Желтый цвет для данных */ + dataYellowHover: '#F5B638FF', + /** Желтый цвет для данных */ + dataYellowActive: '#E49C0CFF', + /** Минорный желтый цвет для данных */ + dataYellowMinor: '#FFD37A', + /** Минорный желтый цвет для данных */ + dataYellowMinorHover: '#FFDA8FFF', + /** Минорный желтый цвет для данных */ + dataYellowMinorActive: '#FFCC66FF', + /** Прозрачный желтый цвет для данных */ + dataYellowTransparent: '#F3A9128F', + /** Прозрачный желтый цвет для данных */ + dataYellowTransparentHover: '#F3A8127A', + /** Прозрачный желтый цвет для данных */ + dataYellowTransparentActive: '#F3A81299', + /** Желтый цвет для данных на темном фоне */ + onDarkDataYellow: '#F3A912', + /** Желтый цвет для данных на темном фоне */ + onDarkDataYellowHover: '#F5B638FF', + /** Желтый цвет для данных на темном фоне */ + onDarkDataYellowActive: '#E49C0CFF', + /** Минорный желтый цвет для данных на темном фоне */ + onDarkDataYellowMinor: '#A16B00', + /** Минорный желтый цвет для данных на темном фоне */ + onDarkDataYellowMinorHover: '#B87A00FF', + /** Минорный желтый цвет для данных на темном фоне */ + onDarkDataYellowMinorActive: '#8F5F00FF', + /** Прозрачный желтый цвет для данных на темном фоне */ + onDarkDataYellowTransparent: '#F3A9128F', + /** Прозрачный желтый цвет для данных на темном фоне */ + onDarkDataYellowTransparentHover: '#F3A8127A', + /** Прозрачный желтый цвет для данных на темном фоне */ + onDarkDataYellowTransparentActive: '#F3A81299', + /** Желтый цвет для данных на светлом фоне */ + onLightDataYellow: '#F3A912', + /** Желтый цвет для данных на светлом фоне */ + onLightDataYellowHover: '#F5B638FF', + /** Желтый цвет для данных на светлом фоне */ + onLightDataYellowActive: '#E49C0CFF', + /** Минорный желтый цвет для данных на светлом фоне */ + onLightDataYellowMinor: '#FFD37A', + /** Минорный желтый цвет для данных на светлом фоне */ + onLightDataYellowMinorHover: '#FFDA8FFF', + /** Минорный желтый цвет для данных на светлом фоне */ + onLightDataYellowMinorActive: '#FFCC66FF', + /** Прозрачный желтый цвет для данных на светлом фоне */ + onLightDataYellowTransparent: '#F3A9128F', + /** Прозрачный желтый цвет для данных на светлом фоне */ + onLightDataYellowTransparentHover: '#F3A8127A', + /** Прозрачный желтый цвет для данных на светлом фоне */ + onLightDataYellowTransparentActive: '#F3A81299', + /** Инвертированный желтый цвет для данных */ + inverseDataYellow: '#F3A912', + /** Инвертированный желтый цвет для данных */ + inverseDataYellowHover: '#F5B638FF', + /** Инвертированный желтый цвет для данных */ + inverseDataYellowActive: '#E49C0CFF', + /** Инвертированный минорный желтый цвет для данных */ + inverseDataYellowMinor: '#A16B00', + /** Инвертированный минорный желтый цвет для данных */ + inverseDataYellowMinorHover: '#B87A00FF', + /** Инвертированный минорный желтый цвет для данных */ + inverseDataYellowMinorActive: '#8F5F00FF', + /** Инвертированный прозрачный желтый цвет для данных */ + inverseDataYellowTransparent: '#F3A9128F', + /** Инвертированный прозрачный желтый цвет для данных */ + inverseDataYellowTransparentHover: '#F3A8127A', + /** Инвертированный прозрачный желтый цвет для данных */ + inverseDataYellowTransparentActive: '#F3A81299', }, } as const; diff --git a/themes/plasma-themes/src/themes/plasma_web/typography.ts b/themes/plasma-themes/src/themes/plasma_web/typography.ts index 3b3a994..f265c09 100644 --- a/themes/plasma-themes/src/themes/plasma_web/typography.ts +++ b/themes/plasma-themes/src/themes/plasma_web/typography.ts @@ -306,6 +306,159 @@ export const typography = { lineHeight: 16, letterSpacing: -0.02, }, + /** typography s display-l-medium */ + displayLMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 88, + lineHeight: 92, + letterSpacing: 0, + }, + /** typography s display-m-medium */ + displayMMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 56, + lineHeight: 62, + letterSpacing: 0, + }, + /** typography s display-s-medium */ + displaySMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 40, + lineHeight: 46, + letterSpacing: 0, + }, + /** typography s header-h1-medium */ + headerH1Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 28, + lineHeight: 34, + letterSpacing: 0, + }, + /** typography s header-h2-medium */ + headerH2Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 24, + lineHeight: 30, + letterSpacing: 0, + }, + /** typography s header-h3-medium */ + headerH3Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 20, + lineHeight: 26, + letterSpacing: 0, + }, + /** typography s header-h4-medium */ + headerH4Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 18, + lineHeight: 24, + letterSpacing: 0, + }, + /** typography s header-h5-medium */ + headerH5Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 16, + lineHeight: 22, + letterSpacing: 0, + }, + /** typography s body-l-medium */ + bodyLMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 18, + lineHeight: 22, + letterSpacing: -0.02, + }, + /** typography s body-m-medium */ + bodyMMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 16, + lineHeight: 20, + letterSpacing: -0.02, + }, + /** typography s body-s-medium */ + bodySMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 14, + lineHeight: 18, + letterSpacing: -0.02, + }, + /** typography s body-xs-medium */ + bodyXsMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 12, + lineHeight: 14, + letterSpacing: -0.02, + }, + /** typography s body-xxs-medium */ + bodyXxsMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 10, + lineHeight: 12, + letterSpacing: -0.02, + }, + /** typography s text-l-medium */ + textLMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 18, + lineHeight: 26, + letterSpacing: -0.02, + }, + /** typography s text-m-medium */ + textMMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 16, + lineHeight: 24, + letterSpacing: -0.02, + }, + /** typography s text-s-medium */ + textSMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 14, + lineHeight: 20, + letterSpacing: -0.02, + }, + /** typography s text-xs-medium */ + textXsMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 12, + lineHeight: 16, + letterSpacing: -0.02, + }, }, screenM: { /** typography m display-l */ @@ -614,6 +767,159 @@ export const typography = { lineHeight: 16, letterSpacing: -0.02, }, + /** typography m display-l-medium */ + displayLMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 112, + lineHeight: 112, + letterSpacing: 0, + }, + /** typography m display-m-medium */ + displayMMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 72, + lineHeight: 76, + letterSpacing: 0, + }, + /** typography m display-s-medium */ + displaySMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 48, + lineHeight: 54, + letterSpacing: 0, + }, + /** typography m header-h1-medium */ + headerH1Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 40, + lineHeight: 46, + letterSpacing: 0, + }, + /** typography m header-h2-medium */ + headerH2Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 28, + lineHeight: 34, + letterSpacing: 0, + }, + /** typography m header-h3-medium */ + headerH3Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 20, + lineHeight: 26, + letterSpacing: 0, + }, + /** typography m header-h4-medium */ + headerH4Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 18, + lineHeight: 24, + letterSpacing: 0, + }, + /** typography m header-h5-medium */ + headerH5Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 16, + lineHeight: 22, + letterSpacing: 0, + }, + /** typography m body-l-medium */ + bodyLMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 18, + lineHeight: 22, + letterSpacing: -0.02, + }, + /** typography m body-m-medium */ + bodyMMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 16, + lineHeight: 20, + letterSpacing: -0.02, + }, + /** typography m body-s-medium */ + bodySMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 14, + lineHeight: 18, + letterSpacing: -0.02, + }, + /** typography m body-xs-medium */ + bodyXsMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 12, + lineHeight: 14, + letterSpacing: -0.02, + }, + /** typography m body-xxs-medium */ + bodyXxsMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 10, + lineHeight: 12, + letterSpacing: -0.02, + }, + /** typography m text-l-medium */ + textLMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 20, + lineHeight: 28, + letterSpacing: -0.02, + }, + /** typography m text-m-medium */ + textMMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 16, + lineHeight: 24, + letterSpacing: -0.02, + }, + /** typography m text-s-medium */ + textSMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 14, + lineHeight: 20, + letterSpacing: -0.02, + }, + /** typography m text-xs-medium */ + textXsMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 12, + lineHeight: 16, + letterSpacing: -0.02, + }, }, screenL: { /** typography l display-l */ @@ -922,5 +1228,158 @@ export const typography = { lineHeight: 16, letterSpacing: -0.02, }, + /** typography l display-l-medium */ + displayLMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 128, + lineHeight: 128, + letterSpacing: 0, + }, + /** typography l display-m-medium */ + displayMMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 88, + lineHeight: 92, + letterSpacing: 0, + }, + /** typography l display-s-medium */ + displaySMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 64, + lineHeight: 68, + letterSpacing: 0, + }, + /** typography l header-h1-medium */ + headerH1Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 48, + lineHeight: 54, + letterSpacing: 0, + }, + /** typography l header-h2-medium */ + headerH2Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 32, + lineHeight: 38, + letterSpacing: 0, + }, + /** typography l header-h3-medium */ + headerH3Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 24, + lineHeight: 30, + letterSpacing: 0, + }, + /** typography l header-h4-medium */ + headerH4Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 20, + lineHeight: 26, + letterSpacing: 0, + }, + /** typography l header-h5-medium */ + headerH5Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 18, + lineHeight: 24, + letterSpacing: 0, + }, + /** typography l body-l-medium */ + bodyLMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 18, + lineHeight: 22, + letterSpacing: -0.02, + }, + /** typography l body-m-medium */ + bodyMMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 16, + lineHeight: 20, + letterSpacing: -0.02, + }, + /** typography l body-s-medium */ + bodySMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 14, + lineHeight: 18, + letterSpacing: -0.02, + }, + /** typography l body-xs-medium */ + bodyXsMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 12, + lineHeight: 14, + letterSpacing: -0.02, + }, + /** typography l body-xxs-medium */ + bodyXxsMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 10, + lineHeight: 12, + letterSpacing: -0.02, + }, + /** typography l text-l-medium */ + textLMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 24, + lineHeight: 32, + letterSpacing: -0.02, + }, + /** typography l text-m-medium */ + textMMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 18, + lineHeight: 26, + letterSpacing: -0.02, + }, + /** typography l text-s-medium */ + textSMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 14, + lineHeight: 20, + letterSpacing: -0.02, + }, + /** typography l text-xs-medium */ + textXsMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 12, + lineHeight: 16, + letterSpacing: -0.02, + }, }, } as const; diff --git a/themes/plasma-themes/src/themes/stylesSalute/color.ts b/themes/plasma-themes/src/themes/stylesSalute/color.ts index 88a0acb..9c76dc2 100644 --- a/themes/plasma-themes/src/themes/stylesSalute/color.ts +++ b/themes/plasma-themes/src/themes/stylesSalute/color.ts @@ -2286,6 +2286,78 @@ export const color = { inverseOutlineTransparentAccentBrandHover: '#3F82FDFF', /** dark outline inverse outlineTransparentAccentBrandActive */ inverseOutlineTransparentAccentBrandActive: '#3F82FD3D', + /** Желтый цвет для данных */ + dataYellow: '#F3A912', + /** Желтый цвет для данных */ + dataYellowHover: '#F4B22FFF', + /** Желтый цвет для данных */ + dataYellowActive: '#EDA20CFF', + /** Минорный желтый цвет для данных */ + dataYellowMinor: '#A16B00', + /** Минорный желтый цвет для данных */ + dataYellowMinorHover: '#B87A00FF', + /** Минорный желтый цвет для данных */ + dataYellowMinorActive: '#996600FF', + /** Прозрачный желтый цвет для данных */ + dataYellowTransparent: '#F3A9128F', + /** Прозрачный желтый цвет для данных */ + dataYellowTransparentHover: '#F3A812AD', + /** Прозрачный желтый цвет для данных */ + dataYellowTransparentActive: '#F3A81280', + /** Желтый цвет для данных на темном фоне */ + onDarkDataYellow: '#F3A912', + /** Желтый цвет для данных на темном фоне */ + onDarkDataYellowHover: '#F4B22FFF', + /** Желтый цвет для данных на темном фоне */ + onDarkDataYellowActive: '#EDA20CFF', + /** Минорный желтый цвет для данных на темном фоне */ + onDarkDataYellowMinor: '#A16B00', + /** Минорный желтый цвет для данных на темном фоне */ + onDarkDataYellowMinorHover: '#B87A00FF', + /** Минорный желтый цвет для данных на темном фоне */ + onDarkDataYellowMinorActive: '#996600FF', + /** Прозрачный желтый цвет для данных на темном фоне */ + onDarkDataYellowTransparent: '#F3A9128F', + /** Прозрачный желтый цвет для данных на темном фоне */ + onDarkDataYellowTransparentHover: '#F3A812AD', + /** Прозрачный желтый цвет для данных на темном фоне */ + onDarkDataYellowTransparentActive: '#F3A81280', + /** Желтый цвет для данных на светлом фоне */ + onLightDataYellow: '#F3A912', + /** Желтый цвет для данных на светлом фоне */ + onLightDataYellowHover: '#F4B22FFF', + /** Желтый цвет для данных на светлом фоне */ + onLightDataYellowActive: '#EDA20CFF', + /** Минорный желтый цвет для данных на светлом фоне */ + onLightDataYellowMinor: '#FFD37A', + /** Минорный желтый цвет для данных на светлом фоне */ + onLightDataYellowMinorHover: '#FFDA8FFF', + /** Минорный желтый цвет для данных на светлом фоне */ + onLightDataYellowMinorActive: '#FFCF70FF', + /** Прозрачный желтый цвет для данных на светлом фоне */ + onLightDataYellowTransparent: '#F3A9128F', + /** Прозрачный желтый цвет для данных на светлом фоне */ + onLightDataYellowTransparentHover: '#F3A812AD', + /** Прозрачный желтый цвет для данных на светлом фоне */ + onLightDataYellowTransparentActive: '#F3A81280', + /** Инвертированный желтый цвет для данных */ + inverseDataYellow: '#F3A912', + /** Инвертированный желтый цвет для данных */ + inverseDataYellowHover: '#F4B22FFF', + /** Инвертированный желтый цвет для данных */ + inverseDataYellowActive: '#EDA20CFF', + /** Инвертированный минорный желтый цвет для данных */ + inverseDataYellowMinor: '#FFD37A', + /** Инвертированный минорный желтый цвет для данных */ + inverseDataYellowMinorHover: '#FFDA8FFF', + /** Инвертированный минорный желтый цвет для данных */ + inverseDataYellowMinorActive: '#FFCF70FF', + /** Инвертированный прозрачный желтый цвет для данных */ + inverseDataYellowTransparent: '#F3A9128F', + /** Инвертированный прозрачный желтый цвет для данных */ + inverseDataYellowTransparentHover: '#F3A812AD', + /** Инвертированный прозрачный желтый цвет для данных */ + inverseDataYellowTransparentActive: '#F3A81280', }, light: { /** Основной цвет текста */ @@ -4578,5 +4650,77 @@ export const color = { inverseOutlineTransparentAccentB2E: '#24B23E47', /** light outline inverse outlineTransparentAccentBrand */ inverseOutlineTransparentAccentBrand: '#528EFF47', + /** Желтый цвет для данных */ + dataYellow: '#F3A912', + /** Желтый цвет для данных */ + dataYellowHover: '#F5B638FF', + /** Желтый цвет для данных */ + dataYellowActive: '#E49C0CFF', + /** Минорный желтый цвет для данных */ + dataYellowMinor: '#FFD37A', + /** Минорный желтый цвет для данных */ + dataYellowMinorHover: '#FFDA8FFF', + /** Минорный желтый цвет для данных */ + dataYellowMinorActive: '#FFCC66FF', + /** Прозрачный желтый цвет для данных */ + dataYellowTransparent: '#F3A9128F', + /** Прозрачный желтый цвет для данных */ + dataYellowTransparentHover: '#F3A8127A', + /** Прозрачный желтый цвет для данных */ + dataYellowTransparentActive: '#F3A81299', + /** Желтый цвет для данных на темном фоне */ + onDarkDataYellow: '#F3A912', + /** Желтый цвет для данных на темном фоне */ + onDarkDataYellowHover: '#F5B638FF', + /** Желтый цвет для данных на темном фоне */ + onDarkDataYellowActive: '#E49C0CFF', + /** Минорный желтый цвет для данных на темном фоне */ + onDarkDataYellowMinor: '#A16B00', + /** Минорный желтый цвет для данных на темном фоне */ + onDarkDataYellowMinorHover: '#B87A00FF', + /** Минорный желтый цвет для данных на темном фоне */ + onDarkDataYellowMinorActive: '#8F5F00FF', + /** Прозрачный желтый цвет для данных на темном фоне */ + onDarkDataYellowTransparent: '#F3A9128F', + /** Прозрачный желтый цвет для данных на темном фоне */ + onDarkDataYellowTransparentHover: '#F3A8127A', + /** Прозрачный желтый цвет для данных на темном фоне */ + onDarkDataYellowTransparentActive: '#F3A81299', + /** Желтый цвет для данных на светлом фоне */ + onLightDataYellow: '#F3A912', + /** Желтый цвет для данных на светлом фоне */ + onLightDataYellowHover: '#F5B638FF', + /** Желтый цвет для данных на светлом фоне */ + onLightDataYellowActive: '#E49C0CFF', + /** Минорный желтый цвет для данных на светлом фоне */ + onLightDataYellowMinor: '#FFD37A', + /** Минорный желтый цвет для данных на светлом фоне */ + onLightDataYellowMinorHover: '#FFDA8FFF', + /** Минорный желтый цвет для данных на светлом фоне */ + onLightDataYellowMinorActive: '#FFCC66FF', + /** Прозрачный желтый цвет для данных на светлом фоне */ + onLightDataYellowTransparent: '#F3A9128F', + /** Прозрачный желтый цвет для данных на светлом фоне */ + onLightDataYellowTransparentHover: '#F3A8127A', + /** Прозрачный желтый цвет для данных на светлом фоне */ + onLightDataYellowTransparentActive: '#F3A81299', + /** Инвертированный желтый цвет для данных */ + inverseDataYellow: '#F3A912', + /** Инвертированный желтый цвет для данных */ + inverseDataYellowHover: '#F5B638FF', + /** Инвертированный желтый цвет для данных */ + inverseDataYellowActive: '#E49C0CFF', + /** Инвертированный минорный желтый цвет для данных */ + inverseDataYellowMinor: '#A16B00', + /** Инвертированный минорный желтый цвет для данных */ + inverseDataYellowMinorHover: '#B87A00FF', + /** Инвертированный минорный желтый цвет для данных */ + inverseDataYellowMinorActive: '#8F5F00FF', + /** Инвертированный прозрачный желтый цвет для данных */ + inverseDataYellowTransparent: '#F3A9128F', + /** Инвертированный прозрачный желтый цвет для данных */ + inverseDataYellowTransparentHover: '#F3A8127A', + /** Инвертированный прозрачный желтый цвет для данных */ + inverseDataYellowTransparentActive: '#F3A81299', }, } as const; diff --git a/themes/plasma-themes/src/themes/stylesSalute/typography.ts b/themes/plasma-themes/src/themes/stylesSalute/typography.ts index 3b3a994..f265c09 100644 --- a/themes/plasma-themes/src/themes/stylesSalute/typography.ts +++ b/themes/plasma-themes/src/themes/stylesSalute/typography.ts @@ -306,6 +306,159 @@ export const typography = { lineHeight: 16, letterSpacing: -0.02, }, + /** typography s display-l-medium */ + displayLMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 88, + lineHeight: 92, + letterSpacing: 0, + }, + /** typography s display-m-medium */ + displayMMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 56, + lineHeight: 62, + letterSpacing: 0, + }, + /** typography s display-s-medium */ + displaySMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 40, + lineHeight: 46, + letterSpacing: 0, + }, + /** typography s header-h1-medium */ + headerH1Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 28, + lineHeight: 34, + letterSpacing: 0, + }, + /** typography s header-h2-medium */ + headerH2Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 24, + lineHeight: 30, + letterSpacing: 0, + }, + /** typography s header-h3-medium */ + headerH3Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 20, + lineHeight: 26, + letterSpacing: 0, + }, + /** typography s header-h4-medium */ + headerH4Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 18, + lineHeight: 24, + letterSpacing: 0, + }, + /** typography s header-h5-medium */ + headerH5Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 16, + lineHeight: 22, + letterSpacing: 0, + }, + /** typography s body-l-medium */ + bodyLMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 18, + lineHeight: 22, + letterSpacing: -0.02, + }, + /** typography s body-m-medium */ + bodyMMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 16, + lineHeight: 20, + letterSpacing: -0.02, + }, + /** typography s body-s-medium */ + bodySMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 14, + lineHeight: 18, + letterSpacing: -0.02, + }, + /** typography s body-xs-medium */ + bodyXsMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 12, + lineHeight: 14, + letterSpacing: -0.02, + }, + /** typography s body-xxs-medium */ + bodyXxsMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 10, + lineHeight: 12, + letterSpacing: -0.02, + }, + /** typography s text-l-medium */ + textLMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 18, + lineHeight: 26, + letterSpacing: -0.02, + }, + /** typography s text-m-medium */ + textMMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 16, + lineHeight: 24, + letterSpacing: -0.02, + }, + /** typography s text-s-medium */ + textSMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 14, + lineHeight: 20, + letterSpacing: -0.02, + }, + /** typography s text-xs-medium */ + textXsMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 12, + lineHeight: 16, + letterSpacing: -0.02, + }, }, screenM: { /** typography m display-l */ @@ -614,6 +767,159 @@ export const typography = { lineHeight: 16, letterSpacing: -0.02, }, + /** typography m display-l-medium */ + displayLMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 112, + lineHeight: 112, + letterSpacing: 0, + }, + /** typography m display-m-medium */ + displayMMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 72, + lineHeight: 76, + letterSpacing: 0, + }, + /** typography m display-s-medium */ + displaySMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 48, + lineHeight: 54, + letterSpacing: 0, + }, + /** typography m header-h1-medium */ + headerH1Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 40, + lineHeight: 46, + letterSpacing: 0, + }, + /** typography m header-h2-medium */ + headerH2Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 28, + lineHeight: 34, + letterSpacing: 0, + }, + /** typography m header-h3-medium */ + headerH3Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 20, + lineHeight: 26, + letterSpacing: 0, + }, + /** typography m header-h4-medium */ + headerH4Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 18, + lineHeight: 24, + letterSpacing: 0, + }, + /** typography m header-h5-medium */ + headerH5Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 16, + lineHeight: 22, + letterSpacing: 0, + }, + /** typography m body-l-medium */ + bodyLMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 18, + lineHeight: 22, + letterSpacing: -0.02, + }, + /** typography m body-m-medium */ + bodyMMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 16, + lineHeight: 20, + letterSpacing: -0.02, + }, + /** typography m body-s-medium */ + bodySMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 14, + lineHeight: 18, + letterSpacing: -0.02, + }, + /** typography m body-xs-medium */ + bodyXsMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 12, + lineHeight: 14, + letterSpacing: -0.02, + }, + /** typography m body-xxs-medium */ + bodyXxsMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 10, + lineHeight: 12, + letterSpacing: -0.02, + }, + /** typography m text-l-medium */ + textLMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 20, + lineHeight: 28, + letterSpacing: -0.02, + }, + /** typography m text-m-medium */ + textMMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 16, + lineHeight: 24, + letterSpacing: -0.02, + }, + /** typography m text-s-medium */ + textSMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 14, + lineHeight: 20, + letterSpacing: -0.02, + }, + /** typography m text-xs-medium */ + textXsMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 12, + lineHeight: 16, + letterSpacing: -0.02, + }, }, screenL: { /** typography l display-l */ @@ -922,5 +1228,158 @@ export const typography = { lineHeight: 16, letterSpacing: -0.02, }, + /** typography l display-l-medium */ + displayLMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 128, + lineHeight: 128, + letterSpacing: 0, + }, + /** typography l display-m-medium */ + displayMMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 88, + lineHeight: 92, + letterSpacing: 0, + }, + /** typography l display-s-medium */ + displaySMedium: { + fontFamilyRef: 'fontFamily.display', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 64, + lineHeight: 68, + letterSpacing: 0, + }, + /** typography l header-h1-medium */ + headerH1Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 48, + lineHeight: 54, + letterSpacing: 0, + }, + /** typography l header-h2-medium */ + headerH2Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 32, + lineHeight: 38, + letterSpacing: 0, + }, + /** typography l header-h3-medium */ + headerH3Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 24, + lineHeight: 30, + letterSpacing: 0, + }, + /** typography l header-h4-medium */ + headerH4Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 20, + lineHeight: 26, + letterSpacing: 0, + }, + /** typography l header-h5-medium */ + headerH5Medium: { + fontFamilyRef: 'fontFamily.header', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 18, + lineHeight: 24, + letterSpacing: 0, + }, + /** typography l body-l-medium */ + bodyLMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 18, + lineHeight: 22, + letterSpacing: -0.02, + }, + /** typography l body-m-medium */ + bodyMMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 16, + lineHeight: 20, + letterSpacing: -0.02, + }, + /** typography l body-s-medium */ + bodySMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 14, + lineHeight: 18, + letterSpacing: -0.02, + }, + /** typography l body-xs-medium */ + bodyXsMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 12, + lineHeight: 14, + letterSpacing: -0.02, + }, + /** typography l body-xxs-medium */ + bodyXxsMedium: { + fontFamilyRef: 'fontFamily.body', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 10, + lineHeight: 12, + letterSpacing: -0.02, + }, + /** typography l text-l-medium */ + textLMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 24, + lineHeight: 32, + letterSpacing: -0.02, + }, + /** typography l text-m-medium */ + textMMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 18, + lineHeight: 26, + letterSpacing: -0.02, + }, + /** typography l text-s-medium */ + textSMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 14, + lineHeight: 20, + letterSpacing: -0.02, + }, + /** typography l text-xs-medium */ + textXsMedium: { + fontFamilyRef: 'fontFamily.text', + fontWeight: '500', + fontStyle: 'normal', + fontSize: 12, + lineHeight: 16, + letterSpacing: -0.02, + }, }, } as const;