From a34907abee8d13dc3f81b124f17f7360cfc14d96 Mon Sep 17 00:00:00 2001 From: hextion <100ishundred@gmail.com> Date: Mon, 12 Jan 2026 14:15:25 +0300 Subject: [PATCH 01/22] refactor: removed css font vars --- packages/amount-input/src/Component.tsx | 7 +- .../src/__snapshots__/Component.test.tsx.snap | 30 +- packages/amount-input/src/index.module.css | 5 - packages/bank-card/src/Component.tsx | 26 +- .../src/__snapshots__/Component.test.tsx.snap | 24 +- packages/bank-card/src/index.module.css | 52 +- .../src/components/header/index.module.css | 12 +- packages/bottom-sheet/src/vars.css | 12 - .../components/base-button/index.module.css | 5 - packages/button/src/vars.css | 4 - .../components/days-table/index.module.css | 2 +- .../components/period-slider/index.module.css | 6 +- .../components/select-button/index.module.css | 2 +- packages/calendar/src/vars.css | 5 - packages/chart/src/index.module.css | 4 +- .../circular-progress-bar/src/Component.tsx | 2 +- .../src/index.module.css | 10 - .../src/components/input/index.module.css | 5 +- packages/code-input/src/vars.css | 3 - .../collapse/src/docs/Component.stories.tsx | 10 +- packages/collapse/src/docs/description.mdx | 12 +- packages/collapse/src/index.module.css | 4 - .../components/code-input/index.module.css | 5 +- packages/confirmation-v1/src/index.module.css | 1 - packages/confirmation-v1/src/vars.css | 23 +- .../src/__snapshots__/Component.test.tsx.snap | 18 +- .../src/components/header/component.tsx | 28 +- .../src/components/header/index.module.css | 16 - packages/confirmation/src/vars.css | 24 +- .../base-filter-tag/index.module.css | 1 - .../base-form-control/index.module.css | 2 - packages/form-control/src/vars.css | 4 - .../src/components/base-input/Component.tsx | 7 + .../components/base-input/index.module.css | 34 +- packages/input/src/vars.css | 1 + packages/link/src/index.module.css | 2 +- .../src/components/header/desktop.module.css | 11 +- .../src/components/header/mobile.module.css | 6 +- packages/modal/src/vars.css | 10 - .../src/components/amount-title/component.tsx | 4 +- .../components/amount-title/index.module.css | 4 - .../src/components/segment/index.module.css | 1 - .../src/components/header/desktop.module.css | 8 +- .../src/components/header/mobile.module.css | 6 +- packages/side-panel/src/vars.css | 8 - packages/slider-input/src/index.module.css | 7 +- .../src/components/title/desktop.module.css | 10 +- .../src/components/title/index.module.css | 6 - .../src/components/title/mobile.module.css | 10 +- .../primary-tablist/Component.collapsible.tsx | 2 + .../components/primary-tablist/Component.tsx | 1 + .../primary-tablist/index.module.css | 21 +- .../primary-tablist/mobile.module.css | 8 +- .../__snapshots__/Component.test.tsx.snap | 34 +- .../tabs/src/components/title/Component.tsx | 2 + packages/tabs/src/vars.css | 19 +- .../src/components/base-tag/index.module.css | 25 +- .../themes/src/mixins/bottom-sheet/click.css | 6 - packages/themes/src/mixins/calendar/click.css | 3 - .../mixins/circular-progress-bar/click.css | 5 - packages/themes/src/mixins/click.css | 10 - .../themes/src/mixins/confirmation/click.css | 12 - .../src/mixins/confirmation/intranet.css | 5 - .../themes/src/mixins/confirmation/mobile.css | 5 - packages/themes/src/mixins/modal/click.css | 31 - .../src/mixins/system-message/click.css | 13 - packages/themes/src/mixins/tabs/click.css | 22 +- packages/themes/src/mixins/tabs/corp.css | 3 - packages/themes/src/mixins/tabs/site.css | 2 - .../themes/src/mixins/toast-plate/click.css | 1 - .../src/desktop/desktop.module.css | 3 +- .../toast-plate/src/mobile/mobile.module.css | 1 - packages/toast-plate/src/vars.css | 1 - .../components/base-toast/index.module.css | 4 - .../header/desktop/Component.desktop.tsx | 2 - .../header/desktop/desktop.module.css | 14 +- .../header/mobile/mobile.module.css | 6 +- packages/universal-modal/src/desktop/vars.css | 6 - packages/universal-modal/src/mobile/vars.css | 8 - packages/with-suffix/src/Component.tsx | 1 + packages/with-suffix/src/index.module.css | 13 +- variants/alfasans.patch | 2408 +---------------- 82 files changed, 238 insertions(+), 2958 deletions(-) delete mode 100644 packages/themes/src/mixins/bottom-sheet/click.css delete mode 100644 packages/themes/src/mixins/circular-progress-bar/click.css delete mode 100644 packages/themes/src/mixins/confirmation/click.css delete mode 100644 packages/themes/src/mixins/modal/click.css delete mode 100644 packages/themes/src/mixins/system-message/click.css delete mode 100644 packages/universal-modal/src/desktop/vars.css delete mode 100644 packages/universal-modal/src/mobile/vars.css diff --git a/packages/amount-input/src/Component.tsx b/packages/amount-input/src/Component.tsx index 1b27dddef5..991d3b48a8 100644 --- a/packages/amount-input/src/Component.tsx +++ b/packages/amount-input/src/Component.tsx @@ -83,11 +83,6 @@ export type AmountInputProps = Omit & */ positiveOnly?: boolean; - /** - * Жир - */ - bold?: boolean; - /** * Обработчик события изменения значения */ @@ -427,7 +422,6 @@ export const AmountInput = forwardRef( return (
( ref={ref} breakpoint={breakpoint} client={client} + bold={bold} />
); diff --git a/packages/amount-input/src/__snapshots__/Component.test.tsx.snap b/packages/amount-input/src/__snapshots__/Component.test.tsx.snap index a80f7b223a..8c51cce6a3 100644 --- a/packages/amount-input/src/__snapshots__/Component.test.tsx.snap +++ b/packages/amount-input/src/__snapshots__/Component.test.tsx.snap @@ -6,7 +6,7 @@ exports[`AmountInput Snapshots tests should match snapshot 1`] = ` "baseElement":
, "container":
, "container":
*:first-child { display: none; diff --git a/packages/bank-card/src/Component.tsx b/packages/bank-card/src/Component.tsx index 4439726a41..7bc944f78b 100644 --- a/packages/bank-card/src/Component.tsx +++ b/packages/bank-card/src/Component.tsx @@ -4,7 +4,6 @@ import React, { type MouseEvent, type ReactNode, useCallback, - useEffect, useState, } from 'react'; import cn from 'classnames'; @@ -93,19 +92,22 @@ export const BankCard = forwardRef( { bankLogo = , backgroundColor = '#EF3124', - value, + value: valueFromProps, className, onUsePhoto, - onChange, dataTestId, maskType = MaskTypeEnum.Default, inputLabel = getDefaultInputLabel(maskType), + onChange, }, ref, ) => { - const uncontrolled = value === undefined; + const uncontrolled = valueFromProps === undefined; + const [value, setValue] = useState(valueFromProps); - const [brandIcon, setBrandIcon] = useState(getBrandIcon(value)); + if (!uncontrolled && valueFromProps !== value) { + setValue(valueFromProps); + } const getMask = useCallback( (newValue: string) => { @@ -124,12 +126,10 @@ export const BankCard = forwardRef( const handleInputChange = useCallback( (event: ChangeEvent, payload: { value: string }) => { - if (uncontrolled) { - setBrandIcon(getBrandIcon(event.target.value)); - } + onChange?.(event, payload); - if (onChange) { - onChange(event, payload); + if (uncontrolled) { + setValue(payload.value); } }, [onChange, uncontrolled], @@ -144,9 +144,7 @@ export const BankCard = forwardRef( [onUsePhoto], ); - useEffect(() => { - setBrandIcon(getBrandIcon(value)); - }, [value]); + const brandIcon = getBrandIcon(value); return (
@@ -171,6 +169,8 @@ export const BankCard = forwardRef( inputMode='numeric' pattern='[0-9]*' breakpoint={1} + className={styles.formControl} + fieldClassName={styles.field} /> {brandIcon &&
{brandIcon}
} diff --git a/packages/bank-card/src/__snapshots__/Component.test.tsx.snap b/packages/bank-card/src/__snapshots__/Component.test.tsx.snap index f4e4436f1e..503ace251a 100644 --- a/packages/bank-card/src/__snapshots__/Component.test.tsx.snap +++ b/packages/bank-card/src/__snapshots__/Component.test.tsx.snap @@ -31,10 +31,10 @@ exports[`BankCard Snapshots tests should match snapshots 1`] = `
= ({ const renderTitleString = () => SIZES[size] > 64 ? ( ) : ( - {'Банк, основанный в 1990 году, является универсальным банком, осуществляющим все основные ' + - 'виды банковских операций, представленных на рынке финансовых услуг, включая обслуживание ' + - 'частных и корпоративных клиентов, инвестиционный банковский бизнес, торговое финансирование ' + - 'и т.д.'} + + Банк, основанный в 1990 году, является универсальным банком, осуществляющим все + основные виды банковских операций, представленных на рынке финансовых услуг, + включая обслуживание частных и корпоративных клиентов, инвестиционный банковский + бизнес, торговое финансирование и т.д. + ); }, diff --git a/packages/collapse/src/docs/description.mdx b/packages/collapse/src/docs/description.mdx index eb954229e9..6df604d805 100644 --- a/packages/collapse/src/docs/description.mdx +++ b/packages/collapse/src/docs/description.mdx @@ -16,11 +16,13 @@ - Требования 115-ФЗ и связанных с ним документов Банка России часто меняются, предприниматели - не всегда успевают за ними следить. Последствия нарушений «антиотмывочного» законодательства - всегда неприятны: приходится остановить бизнес-процессы и доказать банку законность - операций. Специалисты «Альфа-банка» собрали понятные рекомендации, как сэкономить время на - объяснения и предотвратить блокировки. + + Требования 115-ФЗ и связанных с ним документов Банка России часто меняются, + предприниматели не всегда успевают за ними следить. Последствия нарушений + «антиотмывочного» законодательства всегда неприятны: приходится остановить + бизнес-процессы и доказать банку законность операций. Специалисты «Альфа-банка» собрали + понятные рекомендации, как сэкономить время на объяснения и предотвратить блокировки. +
``` diff --git a/packages/collapse/src/index.module.css b/packages/collapse/src/index.module.css index 94bd0b223e..aa3c6a8697 100644 --- a/packages/collapse/src/index.module.css +++ b/packages/collapse/src/index.module.css @@ -1,9 +1,5 @@ @import '@alfalab/core-components-vars/src/no-typography-index.css'; -.collapse { - font-family: var(--font-family); -} - .collapse *, .collapse:before, .collapse:after { diff --git a/packages/confirmation-v1/src/components/code-input/index.module.css b/packages/confirmation-v1/src/components/code-input/index.module.css index b0aa3f34a9..207d091211 100644 --- a/packages/confirmation-v1/src/components/code-input/index.module.css +++ b/packages/confirmation-v1/src/components/code-input/index.module.css @@ -6,6 +6,8 @@ } .input { + @mixin headline-system_medium; + flex-shrink: 0; width: 36px; height: 48px; @@ -18,9 +20,6 @@ outline: none; color: var(--confirmation-input-text-color); text-align: center; - font-size: var(--confirmation-input-font-size); - font-weight: var(--confirmation-input-font-weight); - font-family: var(--confirmation-input-font-family); &.hasError { color: var(--confirmation-error-color); diff --git a/packages/confirmation-v1/src/index.module.css b/packages/confirmation-v1/src/index.module.css index ad71c5070f..3f450ea097 100644 --- a/packages/confirmation-v1/src/index.module.css +++ b/packages/confirmation-v1/src/index.module.css @@ -5,7 +5,6 @@ display: flex; flex-direction: column; width: 100%; - font-family: var(--confirmation-text-font-family); } .error { diff --git a/packages/confirmation-v1/src/vars.css b/packages/confirmation-v1/src/vars.css index cd50896207..d8a16ea8f4 100644 --- a/packages/confirmation-v1/src/vars.css +++ b/packages/confirmation-v1/src/vars.css @@ -2,45 +2,26 @@ :root { /* title */ - --confirmation-title-font-size: 22px; - --confirmation-title-line-height: 26px; - --confirmation-title-font-weight: 700; - --confirmation-title-font-family: var(--font-family-system); --confirmation-title-color: var(--color-light-text-primary); - --confirmation-title-font-feature-settings: normal; /* text */ - --confirmation-text-font-size: 16px; - --confirmation-text-line-height: 24px; - --confirmation-text-font-weight: 400; - --confirmation-text-font-family: var(--font-family-system); --confirmation-text-color: var(--color-light-text-secondary); /* error */ --confirmation-error-color: var(--color-light-text-negative); /* input */ - --confirmation-input-font-size: 30px; - --confirmation-input-font-weight: 700; - --confirmation-input-font-family: var(--font-family-system); --confirmation-input-text-color: var(--color-light-text-primary); --confirmation-input-bg-color: var(--color-light-neutral-translucent-300); --confirmation-input-error-bg-color: var(--color-light-status-muted-negative); } @define-mixin _confirmation-title { - font-size: var(--confirmation-title-font-size); - line-height: var(--confirmation-title-line-height); - font-weight: var(--confirmation-title-font-weight); - font-family: var(--confirmation-title-font-family); + @mixin headline-system_small; color: var(--confirmation-title-color); - font-feature-settings: var(--confirmation-title-font-feature-settings); } @define-mixin _confirmation-text { - font-size: var(--confirmation-text-font-size); - line-height: var(--confirmation-text-line-height); - font-weight: var(--confirmation-text-font-weight); - font-family: var(--confirmation-text-font-family); + @mixin paragraph_primary_medium; color: var(--confirmation-text-color); } diff --git a/packages/confirmation/src/__snapshots__/Component.test.tsx.snap b/packages/confirmation/src/__snapshots__/Component.test.tsx.snap index 930ba8bea9..c42d6a3d2c 100644 --- a/packages/confirmation/src/__snapshots__/Component.test.tsx.snap +++ b/packages/confirmation/src/__snapshots__/Component.test.tsx.snap @@ -9,7 +9,7 @@ exports[`Confirmation Snapshot tests should match snapshot 1`] = ` class="component left" >

Введите код из уведомления

@@ -91,7 +91,7 @@ exports[`Confirmation Snapshot tests should match snapshot with CODE_CHECKING st class="component left" >

Введите код из уведомления

@@ -210,7 +210,7 @@ exports[`Confirmation Snapshot tests should match snapshot with CODE_ERROR state class="component left" >

Введите код из уведомления

@@ -298,7 +298,7 @@ exports[`Confirmation Snapshot tests should match snapshot with CODE_EXPIRED sta class="component left" >

Введите код из уведомления

@@ -386,7 +386,7 @@ exports[`Confirmation Snapshot tests should match snapshot with CODE_SENDING sta class="component left" >

Введите код из уведомления

@@ -505,7 +505,7 @@ exports[`Confirmation Snapshot tests should match snapshot with FATAL_ERROR scre class="component left" >

Ввести код больше нельзя

@@ -538,7 +538,7 @@ exports[`Confirmation Snapshot tests should match snapshot with HINT screen 1`] class="component left" >

Не приходит код?

@@ -618,7 +618,7 @@ exports[`Confirmation Snapshot tests should match snapshot with TEMP_BLOCK scree class="component left" >

Ввести код пока нельзя

@@ -666,7 +666,7 @@ exports[`Confirmation Snapshot tests should match snapshot with TEMP_BLOCK_OVER class="component left" >

Ввод разблокирован

diff --git a/packages/confirmation/src/components/header/component.tsx b/packages/confirmation/src/components/header/component.tsx index 06c8677c5c..48f2887c14 100644 --- a/packages/confirmation/src/components/header/component.tsx +++ b/packages/confirmation/src/components/header/component.tsx @@ -1,7 +1,6 @@ import React, { type FC, type ReactNode } from 'react'; -import cn from 'classnames'; -import { TitleDesktop } from '@alfalab/core-components-typography'; +import { TitleDesktop, TitleMobile } from '@alfalab/core-components-typography'; import styles from './index.module.css'; @@ -23,12 +22,19 @@ export type HeaderProps = { titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; }; -export const Header: FC = ({ mobile, children, titleTag = 'h3' }) => ( - - {children} - -); +export const Header: FC = ({ mobile, children, titleTag = 'h3' }) => { + const Tag = mobile ? TitleMobile : TitleDesktop; + + return ( + + {children} + + ); +}; diff --git a/packages/confirmation/src/components/header/index.module.css b/packages/confirmation/src/components/header/index.module.css index 65bd609f67..ee2e815fee 100644 --- a/packages/confirmation/src/components/header/index.module.css +++ b/packages/confirmation/src/components/header/index.module.css @@ -3,19 +3,3 @@ .header.header { margin-bottom: var(--gap-24); } - -.typography.typography.typography { - font-feature-settings: var(--confirmation-header-font-feature-settings); - font-size: var(--confirmation-header-desktop-font-size); - line-height: var(--confirmation-header-desktop-line-height); - font-weight: var(--confirmation-header-desktop-font-weight); - font-family: var(--confirmation-header-desktop-font-family); -} - -.typographyMobile.typographyMobile.typographyMobile { - font-feature-settings: var(--confirmation-header-font-feature-settings); - font-size: var(--confirmation-header-mobile-font-size); - line-height: var(--confirmation-header-mobile-line-height); - font-weight: var(--confirmation-header-mobile-font-weight); - font-family: var(--confirmation-header-mobile-font-family); -} diff --git a/packages/confirmation/src/vars.css b/packages/confirmation/src/vars.css index 9cb28f3d14..bed3e7fbdf 100644 --- a/packages/confirmation/src/vars.css +++ b/packages/confirmation/src/vars.css @@ -1,33 +1,11 @@ @import '@alfalab/core-components-vars/src/no-typography-index.css'; :root { - /* desktop */ - --confirmation-header-desktop-font-size: 22px; - --confirmation-header-desktop-line-height: 26px; - --confirmation-header-desktop-font-weight: bold; - --confirmation-header-desktop-font-family: var(--font-family-system); - - /* mobile */ - --confirmation-header-mobile-font-size: 20px; - --confirmation-header-mobile-line-height: 28px; - --confirmation-header-mobile-font-weight: 600; - --confirmation-header-mobile-font-family: var(--font-family-system); - /* text */ - --confirmation-text-font-size: 16px; - --confirmation-text-line-height: 24px; - --confirmation-text-font-weight: 400; - --confirmation-text-font-family: var(--font-family-system); --confirmation-text-color: var(--color-light-text-primary); - /* header */ - --confirmation-header-font-feature-settings: normal; - @define-mixin _confirmation-text { - font-size: var(--confirmation-text-font-size); - line-height: var(--confirmation-text-line-height); - font-weight: var(--confirmation-text-font-weight); - font-family: var(--confirmation-text-font-family); + @mixin paragraph_primary_medium; color: var(--confirmation-text-color); } } diff --git a/packages/filter-tag/src/components/base-filter-tag/index.module.css b/packages/filter-tag/src/components/base-filter-tag/index.module.css index ba4b514ee4..b5486e4b22 100644 --- a/packages/filter-tag/src/components/base-filter-tag/index.module.css +++ b/packages/filter-tag/src/components/base-filter-tag/index.module.css @@ -67,7 +67,6 @@ cursor: pointer; outline: none; white-space: nowrap; - font-family: var(--font-family); transition: border-color 0.2s ease, background-color 0.2s ease, diff --git a/packages/form-control/src/components/base-form-control/index.module.css b/packages/form-control/src/components/base-form-control/index.module.css index 227b76b5c7..491a879de2 100644 --- a/packages/form-control/src/components/base-form-control/index.module.css +++ b/packages/form-control/src/components/base-form-control/index.module.css @@ -1,7 +1,6 @@ @import '../../vars.css'; .component { - font-family: var(--form-control-font-family); width: max-content; max-width: 100%; } @@ -48,7 +47,6 @@ .input > * { padding: var(--form-control-paddings); - font-family: var(--form-control-font-family); } .input.size-40 > * { diff --git a/packages/form-control/src/vars.css b/packages/form-control/src/vars.css index 21240b8e1a..fa9bb66500 100644 --- a/packages/form-control/src/vars.css +++ b/packages/form-control/src/vars.css @@ -63,7 +63,6 @@ --form-control-m-min-height: var(--size-m-height); --form-control-l-min-height: var(--size-l-height); --form-control-xl-min-height: var(--size-xl-height); - --form-control-border-radius: var(--border-radius-4) var(--border-radius-4) 0 0; --form-control-bg-backdrop-filter: unset; /* paddings */ @@ -79,9 +78,6 @@ /* disabled */ --form-control-disabled-opacity: 1; - /* font */ - --form-control-font-family: var(--font-family); - /* border-radius */ --form-control-40-border-radius: var(--border-radius-8); --form-control-s-border-radius: var(--border-radius-8); diff --git a/packages/input/src/components/base-input/Component.tsx b/packages/input/src/components/base-input/Component.tsx index cfa5507342..b4651ddc3e 100644 --- a/packages/input/src/components/base-input/Component.tsx +++ b/packages/input/src/components/base-input/Component.tsx @@ -211,6 +211,11 @@ export type BaseInputProps = Omit< * Запрещает ввод с клавиатуры */ disableUserInput?: boolean; + + /** + * Жирный текст + */ + bold?: boolean; }; const inputTypesForSelectionRange = ['password', 'search', 'tel', 'text', 'url']; @@ -262,6 +267,7 @@ export const BaseInput = forwardRef< FormControlComponent, disableUserInput, platformStyles = {}, + bold = false, ...restProps }, ref, @@ -504,6 +510,7 @@ export const BaseInput = forwardRef< [styles[`size-${size}`]]: hasInnerLabel, [styles.hasInnerLabel]: hasInnerLabel, [colorCommonStyles[colors].hasInnerLabel]: hasInnerLabel, + [styles.bold]: bold, }, inputClassName, )} diff --git a/packages/input/src/components/base-input/index.module.css b/packages/input/src/components/base-input/index.module.css index ad81bfa160..7dcc6e89c1 100644 --- a/packages/input/src/components/base-input/index.module.css +++ b/packages/input/src/components/base-input/index.module.css @@ -1,8 +1,6 @@ -@import '../../../../form-control/src/vars.css'; @import '../../vars.css'; .input { - @mixin paragraph_component; position: relative; display: block; width: 100%; @@ -15,9 +13,32 @@ box-sizing: border-box; -webkit-appearance: none; + &, + &::placeholder { + @mixin paragraph_component_primary; + } + + &.bold { + @mixin accent_component_primary; + } + + &::placeholder { + transition: + opacity 0.2s ease, + color 0.2s ease; + } + &.size-40 { - @mixin paragraph_component_secondary; padding: var(--gap-0) var(--gap-8); + + &, + &::placeholder { + @mixin paragraph_component_secondary; + } + + &.bold { + @mixin accent_component_secondary; + } } /* Убирает синюю заливку при автокомплите */ @@ -28,7 +49,6 @@ &:-webkit-autofill:active { &:first-line { @mixin paragraph_component; - font-family: var(--form-control-font-family); } /* Hack from http://stackoverflow.com/a/29350537 */ @@ -57,12 +77,6 @@ } } -.input::placeholder { - transition: - opacity 0.2s ease, - color 0.2s ease; -} - .hasInnerLabel { &::placeholder { opacity: 0; diff --git a/packages/input/src/vars.css b/packages/input/src/vars.css index ef136220b4..b4a71a1705 100644 --- a/packages/input/src/vars.css +++ b/packages/input/src/vars.css @@ -1,4 +1,5 @@ @import '@alfalab/core-components-vars/src/no-typography-index.css'; +@import '../../form-control/src/vars.css'; :root { --input-color: var(--color-light-text-primary); diff --git a/packages/link/src/index.module.css b/packages/link/src/index.module.css index 077a6e13db..4d09ff209f 100644 --- a/packages/link/src/index.module.css +++ b/packages/link/src/index.module.css @@ -3,7 +3,7 @@ .component { box-sizing: border-box; text-decoration: none; - font-family: var(--font-family); + font-family: inherit; cursor: pointer; outline: none; diff --git a/packages/modal/src/components/header/desktop.module.css b/packages/modal/src/components/header/desktop.module.css index b336517721..de2fb0fbba 100644 --- a/packages/modal/src/components/header/desktop.module.css +++ b/packages/modal/src/components/header/desktop.module.css @@ -5,24 +5,17 @@ border-top-right-radius: var(--modal-border-radius); } -.content { - font-weight: var(--modal-header-desktop-font-weight); - font-family: var(--modal-header-desktop-font-family); -} - .size-500 .content, .size-600 .content { padding: var(--modal-s-header-desktop-content-paddings); - font-size: var(--modal-s-header-desktop-font-size); - line-height: var(--modal-s-header-desktop-line-height); + @mixin headline-system_small; } .size-800 .content, .size-1140 .content, .fullscreen .content { padding: var(--modal-l-header-desktop-content-paddings); - font-size: var(--modal-l-header-desktop-font-size); - line-height: var(--modal-l-header-desktop-line-height); + @mixin headline-system_medium; } .size-500, diff --git a/packages/modal/src/components/header/mobile.module.css b/packages/modal/src/components/header/mobile.module.css index ec07eb9cbc..3971af7e55 100644 --- a/packages/modal/src/components/header/mobile.module.css +++ b/packages/modal/src/components/header/mobile.module.css @@ -14,10 +14,6 @@ } .content { - font-size: var(--modal-header-mobile-font-size); - line-height: var(--modal-header-mobile-line-height); - font-family: var(--modal-header-mobile-font-family); - font-weight: var(--modal-header-mobile-font-weight); - padding: var(--modal-header-mobile-content-paddings); + @mixin headline-system-mobile_small; } diff --git a/packages/modal/src/vars.css b/packages/modal/src/vars.css index 9ad8d145ba..592622afe6 100644 --- a/packages/modal/src/vars.css +++ b/packages/modal/src/vars.css @@ -27,20 +27,10 @@ /* desktop */ --modal-s-header-desktop-content-paddings: var(--gap-12); - --modal-s-header-desktop-font-size: 22px; - --modal-s-header-desktop-line-height: 26px; --modal-l-header-desktop-content-paddings: var(--gap-6) var(--gap-12) var(--gap-16); - --modal-l-header-desktop-font-size: 30px; - --modal-l-header-desktop-line-height: 36px; - --modal-header-desktop-font-weight: bold; - --modal-header-desktop-font-family: var(--font-family-system); /* mobile */ --modal-header-mobile-content-paddings: var(--gap-10) var(--gap-8); - --modal-header-mobile-font-size: 20px; - --modal-header-mobile-line-height: 28px; - --modal-header-mobile-font-family: var(--font-family-system); - --modal-header-mobile-font-weight: 600; /* paddings */ --modal-header-mobile-top-padding: var(--gap-4); diff --git a/packages/pure-cell/src/components/amount-title/component.tsx b/packages/pure-cell/src/components/amount-title/component.tsx index 06f67fa8fa..05e17edf6f 100644 --- a/packages/pure-cell/src/components/amount-title/component.tsx +++ b/packages/pure-cell/src/components/amount-title/component.tsx @@ -34,7 +34,7 @@ export const AmountTitle: React.FC = ({ hidden, className, dataTestId, - titleProps: titlePropsFromProps = {}, + titleProps: titlePropsFromProps, ...restProps }) => { const pureCellContext = useContext(PureCellContext); @@ -61,7 +61,7 @@ export const AmountTitle: React.FC = ({ > } styles={styles} isOption={true} + className={styles.noTextStyle} /> ), }); @@ -111,6 +112,7 @@ export const CollapsiblePrimaryTabList = ({ styles={styles} showSkeleton={showSkeleton} skeletonProps={skeletonProps} + className={cn({ [styles.noTextStyle]: !textStyle })} /> )} diff --git a/packages/tabs/src/components/primary-tablist/Component.tsx b/packages/tabs/src/components/primary-tablist/Component.tsx index ac32b54137..343c124caa 100644 --- a/packages/tabs/src/components/primary-tablist/Component.tsx +++ b/packages/tabs/src/components/primary-tablist/Component.tsx @@ -82,6 +82,7 @@ export const PrimaryTabList = ({ showSkeleton={showSkeleton} skeletonProps={skeletonProps} onResize={handleTitleResize} + className={cn({ [styles.noTextStyle]: !textStyle })} /> )} diff --git a/packages/tabs/src/components/primary-tablist/index.module.css b/packages/tabs/src/components/primary-tablist/index.module.css index 660dbded6f..05dc5a693d 100644 --- a/packages/tabs/src/components/primary-tablist/index.module.css +++ b/packages/tabs/src/components/primary-tablist/index.module.css @@ -44,7 +44,6 @@ padding: var(--gap-0); cursor: pointer; color: var(--primary-tablist-color); - font-feature-settings: var(--primary-tablist-font-feature-settings); transition: color 0.2s ease; border: 0; background: none; @@ -101,10 +100,6 @@ .xxs { & .title { padding: var(--primary-tablist-s-padding); - font-size: var(--primary-tablist-s-font-size); - font-weight: var(--primary-tablist-s-font-weight); - font-family: var(--primary-tablist-s-font-family); - line-height: 24px; } & .title + .title { @@ -123,10 +118,6 @@ .m { & .title { padding: var(--primary-tablist-m-padding); - font-size: var(--primary-tablist-m-font-size); - font-weight: var(--primary-tablist-m-font-weight); - font-family: var(--primary-tablist-m-font-family); - line-height: 24px; } & .title + .title { @@ -145,10 +136,6 @@ .l { & .title { padding: var(--primary-tablist-l-padding); - font-size: var(--primary-tablist-l-font-size); - font-weight: var(--primary-tablist-l-font-weight); - font-family: var(--primary-tablist-l-font-family); - line-height: 24px; } & .title + .title { @@ -167,10 +154,6 @@ .xl { & .title { padding: var(--primary-tablist-xl-padding); - font-size: var(--primary-tablist-xl-font-size); - font-weight: var(--primary-tablist-xl-font-weight); - font-family: var(--primary-tablist-xl-font-family); - line-height: 32px; } & .title + .title { @@ -195,3 +178,7 @@ .rightAddonsMarginZero { margin-left: var(--gap-0); } + +.title.noTextStyle { + @mixin paragraph_primary_large; +} diff --git a/packages/tabs/src/components/primary-tablist/mobile.module.css b/packages/tabs/src/components/primary-tablist/mobile.module.css index 6cc891270b..9bf389f2b8 100644 --- a/packages/tabs/src/components/primary-tablist/mobile.module.css +++ b/packages/tabs/src/components/primary-tablist/mobile.module.css @@ -9,10 +9,6 @@ .mobile { & .title { padding: var(--primary-tablist-mobile-padding); - font-size: var(--primary-tablist-mobile-font-size); - font-weight: var(--primary-tablist-mobile-font-weight); - font-family: var(--primary-tablist-mobile-font-family); - line-height: var(--primary-tablist-mobile-line-height); & + .title { margin-left: var(--primary-tablist-mobile-gaps); @@ -22,3 +18,7 @@ @mixin text-style; @mixin text-style-mobile; } + +.title.noTextStyle { + @mixin paragraph_primary_medium; +} diff --git a/packages/tabs/src/components/tabs/__snapshots__/Component.test.tsx.snap b/packages/tabs/src/components/tabs/__snapshots__/Component.test.tsx.snap index 9376e368c7..5f328680bb 100644 --- a/packages/tabs/src/components/tabs/__snapshots__/Component.test.tsx.snap +++ b/packages/tabs/src/components/tabs/__snapshots__/Component.test.tsx.snap @@ -12,7 +12,7 @@ exports[`Tabs Snapshots tests should match snapshot 1`] = ` > diff --git a/packages/base-modal/src/docs/Component.stories.tsx b/packages/base-modal/src/docs/Component.stories.tsx index fb690a906f..5c2acaf155 100644 --- a/packages/base-modal/src/docs/Component.stories.tsx +++ b/packages/base-modal/src/docs/Component.stories.tsx @@ -18,7 +18,7 @@ export const base_modal: Story = { const handleModalOpen = () => setOpen(!open); return ( <> - diff --git a/packages/calendar-with-skeleton/package.json b/packages/calendar-with-skeleton/package.json index 648c8ca8f9..3e8f4bf83e 100644 --- a/packages/calendar-with-skeleton/package.json +++ b/packages/calendar-with-skeleton/package.json @@ -17,6 +17,9 @@ "react-transition-group": "^4.4.5", "tslib": "^2.4.0" }, + "devDependencies": { + "@alfalab/core-components-button": "^12.1.1" + }, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0", "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0" diff --git a/packages/calendar-with-skeleton/src/docs/Component.stories.tsx b/packages/calendar-with-skeleton/src/docs/Component.stories.tsx index d0fa9f79a5..487fe905ac 100644 --- a/packages/calendar-with-skeleton/src/docs/Component.stories.tsx +++ b/packages/calendar-with-skeleton/src/docs/Component.stories.tsx @@ -18,7 +18,7 @@ export const calendar_with_skeleton: Story = { return ( <> - diff --git a/packages/calendar-with-skeleton/tsconfig.build.json b/packages/calendar-with-skeleton/tsconfig.build.json index 0d1a5b5609..ee3d8fec63 100644 --- a/packages/calendar-with-skeleton/tsconfig.build.json +++ b/packages/calendar-with-skeleton/tsconfig.build.json @@ -7,6 +7,8 @@ "rootDir": "src", "outDir": "ts-dist", "paths": { + "@alfalab/core-components-button": ["../button/src"], + "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-calendar": ["../calendar/src"], "@alfalab/core-components-calendar/*": ["../calendar/src/*"], "@alfalab/core-components-calendar-with-skeleton": ["./src"], @@ -16,6 +18,7 @@ } }, "references": [ + { "path": "../button/tsconfig.build.json" }, { "path": "../calendar/tsconfig.build.json" }, { "path": "../skeleton/tsconfig.build.json" } ] diff --git a/packages/calendar-with-skeleton/tsconfig.json b/packages/calendar-with-skeleton/tsconfig.json index 57137f322a..07bd2f34ef 100644 --- a/packages/calendar-with-skeleton/tsconfig.json +++ b/packages/calendar-with-skeleton/tsconfig.json @@ -6,6 +6,8 @@ "rootDir": "src", "outDir": "no-dist", "paths": { + "@alfalab/core-components-button": ["../button/src"], + "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-calendar": ["../calendar/src"], "@alfalab/core-components-calendar/*": ["../calendar/src/*"], "@alfalab/core-components-calendar-with-skeleton": ["./src"], @@ -19,6 +21,7 @@ } }, "references": [ + { "path": "../button/tsconfig.build.json" }, { "path": "../calendar/tsconfig.build.json" }, { "path": "../screenshot-utils/tsconfig.build.json" }, { "path": "../skeleton/tsconfig.build.json" }, diff --git a/packages/date-input/src/docs/description.mdx b/packages/date-input/src/docs/description.mdx index 2131b0a86b..6627c89fe5 100644 --- a/packages/date-input/src/docs/description.mdx +++ b/packages/date-input/src/docs/description.mdx @@ -21,7 +21,7 @@ import { Link } from '@alfalab/core-components-link'; ```jsx live
- +
``` diff --git a/packages/date-range-input/src/docs/description.mdx b/packages/date-range-input/src/docs/description.mdx index edc066f10b..a83e72caab 100644 --- a/packages/date-range-input/src/docs/description.mdx +++ b/packages/date-range-input/src/docs/description.mdx @@ -26,7 +26,7 @@ render( label='Период действия патента' placeholder='ДД.ММ.ГГГГ - ДД.ММ.ГГГГ' block={true} - size='m' + size={56} />
, ); @@ -49,7 +49,7 @@ render(() => { placeholder='ДД.ММ.ГГГГ - ДД.ММ.ГГГГ' picker={true} block={true} - size='m' + size={56} disableUserInput={disableUserInput} />
diff --git a/packages/date-time-input/src/docs/description.mdx b/packages/date-time-input/src/docs/description.mdx index 6f0234253f..c4c6ea328f 100644 --- a/packages/date-time-input/src/docs/description.mdx +++ b/packages/date-time-input/src/docs/description.mdx @@ -22,7 +22,7 @@ import { Link } from '@alfalab/core-components-link'; ```jsx live render(
- +
, ); ``` @@ -36,7 +36,13 @@ render( ```jsx live mobileHeight={640} render(
- +
, ); ``` diff --git a/packages/drawer/package.json b/packages/drawer/package.json index da1aa4a806..9176634d24 100644 --- a/packages/drawer/package.json +++ b/packages/drawer/package.json @@ -15,6 +15,9 @@ "react-transition-group": "^4.4.5", "tslib": "^2.4.0" }, + "devDependencies": { + "@alfalab/core-components-button": "^12.1.1" + }, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0", "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0" diff --git a/packages/drawer/src/docs/Component.stories.tsx b/packages/drawer/src/docs/Component.stories.tsx index 210b32d07d..eb7d759739 100644 --- a/packages/drawer/src/docs/Component.stories.tsx +++ b/packages/drawer/src/docs/Component.stories.tsx @@ -19,7 +19,7 @@ export const drawer: Story = { const handleModalOpen = () => setOpen(!open); return ( <> -
- ); + return
; } function Footer() { @@ -80,9 +78,7 @@ function Footer() { boxSizing: 'border-box', margin: 'var(--modal-s-footer-paddings)', }; - return ( -
- ); + return
; } render(() => { @@ -94,7 +90,7 @@ render(() => { - +