Merge pull request #1759 from epam/themes/typography-update

Update typography
epam · Nov 17, 2023 · d923035 · d923035
2 parents 3ac3f22 + cf4f446
commit d923035
Show file tree

Hide file tree

Showing 100 changed files with 413 additions and 754 deletions.
diff --git a/app/src/common/docs/ComponentEditor.tsx b/app/src/common/docs/ComponentEditor.tsx
@@ -360,7 +360,7 @@ export class ComponentEditor extends React.Component<ComponentEditorProps, Compo
         svc.uuiNotifications.show(
             (props: INotification) => (
                 <NotificationCard { ...props } icon={ NotificationIcon } color="info" onClose={ null }>
-                    <Text size="36" font="regular">
+                    <Text size="36">
                         Code was copied to the clipboard
                     </Text>
                 </NotificationCard>
@@ -398,7 +398,7 @@ export class ComponentEditor extends React.Component<ComponentEditorProps, Compo
                     <div className={ cx(css.root, this.props.cx) }>
                         <div className={ cx(css.container, css.uuiThemePromo) }>
                             <FlexRow key="head" size="36" padding="12" borderBottom spacing="6" cx={ css.boxSizing }>
-                                <Text fontSize="16" lineHeight="24" cx={ css.vPadding } font="semibold">
+                                <Text fontSize="16" lineHeight="24" cx={ css.vPadding } fontWeight="600">
                                     {title}
                                 </Text>
                                 <FlexSpacer />
@@ -418,17 +418,17 @@ export class ComponentEditor extends React.Component<ComponentEditorProps, Compo
                             </FlexRow>
                             <FlexRow key="table-head" size="36" background="surface" padding="12" spacing="6" borderBottom cx={ css.boxSizing }>
                                 <FlexCell key="name" width={ 130 }>
-                                    <Text size="24" font="semibold">
+                                    <Text size="24" fontWeight="600">
                                         NAME
                                     </Text>
                                 </FlexCell>
                                 <FlexCell key="default" width={ 100 }>
-                                    <Text size="24" font="semibold">
+                                    <Text size="24" fontWeight="600">
                                         DEFAULT
                                     </Text>
                                 </FlexCell>
                                 <FlexCell key="examples" grow={ 1 }>
-                                    <Text size="24" font="semibold">
+                                    <Text size="24" fontWeight="600">
                                         PRESET
                                     </Text>
                                 </FlexCell>

diff --git a/app/src/demo/DemoPage.module.scss b/app/src/demo/DemoPage.module.scss
@@ -12,7 +12,7 @@
         max-width: 1200px;
 
         .nav-title {
-            font-family: var(--font-primary);
+            font-family: var(--uui-font);
             color: var(--uui-text-primary);
             margin: 30px 0 5px;
             font-size: 36px;

diff --git a/app/src/demo/demoItemCard/DemoItemCard.tsx b/app/src/demo/demoItemCard/DemoItemCard.tsx
@@ -19,7 +19,7 @@ export function DemoItemCard(props: IDemoItemCard) {
         <Anchor cx={ css.container } key={ id } link={ { pathname: '/demo', query: { id, ...props.demoItem.queryObject } } } onClick={ () => onOpenItem(name) }>
             <div className={ css.navCard } style={ { backgroundImage: `url(${previewImage})` } } />
             <div className={ css.navDescription }>
-                <Text cx={ css.title } font="semibold" lineHeight="30" fontSize="24">
+                <Text cx={ css.title } fontWeight="600" lineHeight="30" fontSize="24">
                     {name}
                 </Text>
                 <div className={ css.description }>

diff --git a/app/src/demo/dnd/DemoDnd.tsx b/app/src/demo/dnd/DemoDnd.tsx
@@ -65,7 +65,7 @@ export class DemoDnd extends React.Component<{}, DemoDndState> {
                         <Panel background="surface" shadow>
                             <FlexCell minWidth={ 282 }>
                                 <FlexRow padding="18" borderBottom>
-                                    <Text size="48" font="semibold">
+                                    <Text size="48" fontWeight="600">
                                         Modules
                                     </Text>
                                     <FlexSpacer />
@@ -88,7 +88,7 @@ export class DemoDnd extends React.Component<{}, DemoDndState> {
                     </>
                 )}
                 <FlexCell cx={ css.moduleContent } minWidth={ isDesktop && 894 } width={ !isDesktop ? '100%' : undefined }>
-                    <Text font="primary" cx={ css.moduleHeader }>
+                    <Text cx={ css.moduleHeader }>
                         Module 3: Module Name
                     </Text>
                     {sortedSections.map((section, index) => (

diff --git a/app/src/demo/dnd/DndMaterial.tsx b/app/src/demo/dnd/DndMaterial.tsx
@@ -63,7 +63,7 @@ export class DndMaterial extends React.Component<DndMaterialProps> {
                                     <IconContainer size={ 48 } icon={ FileIcon } cx={ css.icon } />
                                 </FlexCell>
                                 <FlexCell width="100%" cx={ css.textWrapper }>
-                                    <Text size="24" lineHeight="24" fontSize="16" font="semibold">
+                                    <Text size="24" lineHeight="24" fontSize="16" fontWeight="600">
                                         {item.name}
                                     </Text>
                                     <Text size="24" lineHeight="24" fontSize="14" color="secondary">

diff --git a/app/src/demo/dnd/DndSection.tsx b/app/src/demo/dnd/DndSection.tsx
@@ -97,7 +97,7 @@ export class DndSection extends React.Component<DndSectionProps> {
                                         </RichTextView>
                                         <FlexSpacer />
                                         <FlexRow>
-                                            <Text font="semibold">Deadline:</Text>
+                                            <Text fontWeight="600">Deadline:</Text>
                                             <Text color="secondary">{ item.deadline }</Text>
                                         </FlexRow>
                                         <Badge fill="outline" size="24" color={ item.status === 'Green' ? 'success' : 'warning' } caption={ `${item.status} Status` } />
@@ -108,15 +108,15 @@ export class DndSection extends React.Component<DndSectionProps> {
                             { item.isFolded && (
                                 <>
                                     <div className={ css.descriptionSection }>
-                                        <Text size="24" lineHeight="24" fontSize="18" font="semibold">
+                                        <Text size="24" lineHeight="24" fontSize="18" fontWeight="600">
                                             Description
                                         </Text>
                                         <RichTextView>
                                             <p>{ demoText }</p>
                                         </RichTextView>
                                     </div>
                                     <div className={ css.criteriaSection }>
-                                        <Text size="24" lineHeight="24" fontSize="18" font="semibold" cx={ css.title }>
+                                        <Text size="24" lineHeight="24" fontSize="18" fontWeight="600" cx={ css.title }>
                                             Success Criteria
                                         </Text>
                                         { sortedCriteria.map((criterion, index) => (
@@ -131,7 +131,7 @@ export class DndSection extends React.Component<DndSectionProps> {
                                         )) }
                                     </div>
                                     <div className={ css.materialsSection }>
-                                        <Text size="24" lineHeight="24" fontSize="18" font="semibold" cx={ css.title }>
+                                        <Text size="24" lineHeight="24" fontSize="18" fontWeight="600" cx={ css.title }>
                                             Materials
                                         </Text>
                                         { sortedMaterials.map((material, index) => (

diff --git a/app/src/demo/form/DemoForm.tsx b/app/src/demo/form/DemoForm.tsx
@@ -388,7 +388,7 @@ function Visas({ lens, countriesDS }: { lens: ILens<PersonDetails['travelVisas']
                 .show(
                     (props) => (
                         <ErrorNotification { ...props }>
-                            <Text size="36" font="regular" fontSize="14">
+                            <Text size="36" fontSize="14">
                                 File size shouldn't exceed 5 MB and cannot upload more than 20 files!
                             </Text>
                         </ErrorNotification>
@@ -483,7 +483,7 @@ export function DemoForm() {
                 .show(
                     (props) => (
                         <SuccessNotification { ...props }>
-                            <Text size="36" font="regular" fontSize="14">
+                            <Text size="36" fontSize="14">
                                 Data has been saved!
                             </Text>
                         </SuccessNotification>

diff --git a/app/src/demo/tables/filteredTable/FilteredTable.tsx b/app/src/demo/tables/filteredTable/FilteredTable.tsx
@@ -90,7 +90,7 @@ export function FilteredTable() {
     return (
         <div className={ css.container }>
             <div className={ css.presetsPanel }>
-                <Text fontSize="24" lineHeight="30" font="primary" cx={ css.presetsTitle }>
+                <Text fontSize="24" lineHeight="30" cx={ css.presetsTitle }>
                     Users Dashboard
                 </Text>
                 <PresetsPanel { ...presetsApi } />

diff --git a/app/src/demo/tables/masterDetailedTable/FilterPanel/FilterPanel.tsx b/app/src/demo/tables/masterDetailedTable/FilterPanel/FilterPanel.tsx
@@ -20,7 +20,7 @@ function FilterPanel<TFilter = any>(props: IFilterPanelProps<TFilter>) {
     return (
         <>
             <FlexRow borderBottom size="48" padding="18">
-                <Text fontSize="18" font="semibold">
+                <Text fontSize="18" fontWeight="600">
                     Views
                 </Text>
                 <FlexSpacer />

diff --git a/app/src/demo/tables/masterDetailedTable/InfoSidebarPanel/InfoSidebarPanel.tsx b/app/src/demo/tables/masterDetailedTable/InfoSidebarPanel/InfoSidebarPanel.tsx
@@ -23,7 +23,7 @@ export function InfoSidebarPanel({ data, isVisible, onClose }: SidebarPanelProps
         <div className={ cx(css.infoSidebarPanelWrapper, isVisible ? 'show' : 'hide') }>
             <Panel cx={ css.wrapper }>
                 <FlexRow borderBottom padding="24">
-                    <Text size="48" font="semibold">
+                    <Text size="48" fontWeight="600">
                         Detailed Information
                     </Text>
                     <FlexSpacer />

diff --git a/app/src/docs/_examples/accordion/Basic.example.tsx b/app/src/docs/_examples/accordion/Basic.example.tsx
@@ -5,7 +5,7 @@ import { demoData } from '@epam/uui-docs';
 
 const componentAsDemoContent = (
     <>
-        <Text fontSize="16" font="regular">
+        <Text fontSize="16">
             {demoData.loremIpsum}
             {' '}
             {demoData.loremIpsum}
@@ -22,17 +22,17 @@ export default function BasicAccordionExample() {
     return (
         <FlexCell width="100%" cx={ css.container }>
             <Accordion title="Accordion block mode" mode="block">
-                <Text fontSize="16" font="regular">
+                <Text fontSize="16">
                     {demoData.loremIpsum}
                 </Text>
             </Accordion>
             <Accordion title="Accordion inline mode" mode="inline">
-                <Text fontSize="16" font="regular">
+                <Text fontSize="16">
                     {demoData.loremIpsum}
                 </Text>
             </Accordion>
             <Accordion title="Disabled Accordion" mode="block" isDisabled>
-                <Text fontSize="16" font="regular">
+                <Text fontSize="16">
                     {demoData.loremIpsum}
                 </Text>
             </Accordion>

diff --git a/app/src/docs/_examples/accordion/Custom.example.tsx b/app/src/docs/_examples/accordion/Custom.example.tsx
@@ -6,7 +6,7 @@ const renderTitle = () => (
     <FlexCell grow={ 1 }>
         <FlexRow spacing="12" padding="6">
             <Avatar alt="avatar" img="https://api.dicebear.com/7.x/pixel-art/svg?seed=Coco&radius=50&backgroundColor=b6e3f4" size="30" />
-            <Text fontSize="16" font="semibold">
+            <Text fontSize="16" fontWeight="600">
                 John Doe
             </Text>
             <FlexSpacer />
@@ -19,7 +19,7 @@ export default function CustomAccordionExample() {
     return (
         <FlexCell grow={ 1 }>
             <Accordion renderTitle={ renderTitle } mode="block">
-                <Text fontSize="16" font="regular">
+                <Text fontSize="16">
                     {demoData.loremIpsum}
                 </Text>
             </Accordion>

diff --git a/app/src/docs/_examples/accordion/HandleStateByYourself.example.tsx b/app/src/docs/_examples/accordion/HandleStateByYourself.example.tsx
@@ -8,7 +8,7 @@ export default function HandleStateByYourselfExample() {
     return (
         <FlexCell width="100%">
             <Accordion title="Accordion title" mode="block" value={ value } onValueChange={ onValueChange }>
-                <Text fontSize="16" font="regular">
+                <Text fontSize="16">
                     {demoData.loremIpsum}
                 </Text>
             </Accordion>

diff --git a/app/src/docs/_examples/badge/Attributes.example.tsx b/app/src/docs/_examples/badge/Attributes.example.tsx
@@ -11,7 +11,7 @@ export default function AttributesExample() {
                 <Avatar size="60" alt="avatar" img="https://api.dicebear.com/7.x/pixel-art/svg?seed=Coco&radius=50&backgroundColor=b6e3f4" />
                 <FlexRow padding="12">
                     <FlexCell width="auto">
-                        <Text cx={ css.text } lineHeight="24" fontSize="18" color="primary" font="semibold">
+                        <Text cx={ css.text } lineHeight="24" fontSize="18" color="primary" fontWeight="600">
                             John Doe
                         </Text>
                         <Text cx={ css.text } lineHeight="18" fontSize="12" color="secondary">

diff --git a/app/src/docs/_examples/common/Card.example.tsx b/app/src/docs/_examples/common/Card.example.tsx
@@ -12,7 +12,7 @@ export default function AttributesExample() {
                     <Avatar size="60" alt="avatar" img="https://api.dicebear.com/7.x/pixel-art/svg?seed=Coco&radius=50&backgroundColor=b6e3f4" />
                     <FlexRow padding="12">
                         <FlexCell width="auto">
-                            <Text cx={ css.text } lineHeight="24" fontSize="18" color="primary" font="semibold">
+                            <Text cx={ css.text } lineHeight="24" fontSize="18" color="primary" fontWeight="600">
                                 John Doe
                             </Text>
                             <Text cx={ css.text } lineHeight="18" fontSize="12" color="secondary">

diff --git a/app/src/docs/_examples/countIndicator/Basic.example.tsx b/app/src/docs/_examples/countIndicator/Basic.example.tsx
@@ -38,7 +38,7 @@ export default function BasicCountIndicatorExample() {
 
     return (
         <div style={ { display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gridTemplateRows: '1fr 2fr 2fr 2fr', gap: '6px 12px', textAlign: 'center' } }>
-            { exampleNames.map((name) => <Text font="semibold">{ name }</Text>)}
+            { exampleNames.map((name) => <Text fontWeight="600">{ name }</Text>)}
             { solidExamples.map((example) => (
                 <>
                     { getCountIndicator(example) }

diff --git a/app/src/docs/_examples/dnd/Basic.example.tsx b/app/src/docs/_examples/dnd/Basic.example.tsx
@@ -80,7 +80,7 @@ export default function DndMaterial() {
                                 <IconContainer size={ 48 } icon={ FileIcon } />
                             </FlexCell>
                             <FlexCell width="100%" cx={ css.textWrapper }>
-                                <Text cx={ css.text } size="24" lineHeight="24" fontSize="16" font="semibold">
+                                <Text cx={ css.text } size="24" lineHeight="24" fontSize="16" fontWeight="600">
                                     {item.name}
                                 </Text>
                                 <Text cx={ css.text } size="24" lineHeight="24" fontSize="14" color="secondary">

diff --git a/app/src/docs/_examples/dropdown/Basic.example.tsx b/app/src/docs/_examples/dropdown/Basic.example.tsx
@@ -29,7 +29,7 @@ export default function BasicDropdownExample() {
 
                             <FlexRow padding="12">
                                 <FlexCell width="auto">
-                                    <Text cx={ css.text } lineHeight="24" fontSize="16" color="primary" font="semibold">
+                                    <Text cx={ css.text } lineHeight="24" fontSize="16" color="primary" fontWeight="600">
                                         John Doe
                                     </Text>
                                     <Text cx={ css.text } lineHeight="18" fontSize="12" color="secondary">
@@ -139,7 +139,7 @@ export default function BasicDropdownExample() {
                             <Avatar size="42" alt="avatar" img="https://api.dicebear.com/7.x/pixel-art/svg?seed=Coco&radius=50&backgroundColor=b6e3f4" />
 
                             <div>
-                                <Text cx={ css.text } lineHeight="24" fontSize="14" color="primary" font="semibold">
+                                <Text cx={ css.text } lineHeight="24" fontSize="14" color="primary" fontWeight="600">
                                     John Wick
                                 </Text>
                                 <Text cx={ css.text } lineHeight="18" fontSize="12" color="secondary">

diff --git a/app/src/docs/_examples/dropdown/CloseOpenModifiers.example.tsx b/app/src/docs/_examples/dropdown/CloseOpenModifiers.example.tsx
@@ -12,7 +12,7 @@ export default function CloseOpenModifiersExample() {
                     <Avatar size="48" alt="avatar" img="https://api.dicebear.com/7.x/pixel-art/svg?seed=Coco&radius=50&backgroundColor=b6e3f4" />
 
                     <FlexCell width="100%">
-                        <Text cx={ css.text } lineHeight="24" fontSize="16" color="primary" font="semibold">
+                        <Text cx={ css.text } lineHeight="24" fontSize="16" color="primary" fontWeight="600">
                             John Doe
                         </Text>
                         <Text cx={ css.text } lineHeight="18" fontSize="12" color="secondary">

diff --git a/app/src/docs/_examples/dropdown/DelayForOpenAndClose.example.tsx b/app/src/docs/_examples/dropdown/DelayForOpenAndClose.example.tsx
@@ -12,7 +12,7 @@ export default function DelayForOpenAndCloseExample() {
                     <Avatar size="48" alt="avatar" img={ `https://api.dicebear.com/7.x/pixel-art/svg?seed=${name}&radius=50&backgroundColor=b6e3f4` } />
 
                     <FlexCell width="100%">
-                        <Text cx={ css.text } lineHeight="24" fontSize="16" color="primary" font="semibold">
+                        <Text cx={ css.text } lineHeight="24" fontSize="16" color="primary" fontWeight="600">
                             {name}
                         </Text>
                         <Text cx={ css.text } lineHeight="18" fontSize="12" color="secondary">

diff --git a/app/src/docs/_examples/dropdown/HandleStateByYourself.example.tsx b/app/src/docs/_examples/dropdown/HandleStateByYourself.example.tsx
@@ -14,7 +14,7 @@ export default function BasicDropdownExample() {
                     <Avatar size="48" alt="avatar" img="https://api.dicebear.com/7.x/pixel-art/svg?seed=Coco&radius=50&backgroundColor=b6e3f4" />
 
                     <FlexCell width="100%">
-                        <Text cx={ css.text } lineHeight="24" fontSize="16" color="primary" font="semibold">
+                        <Text cx={ css.text } lineHeight="24" fontSize="16" color="primary" fontWeight="600">
                             John Doe
                         </Text>
                         <Text cx={ css.text } lineHeight="18" fontSize="12" color="secondary">

diff --git a/app/src/docs/_examples/dropdownContainer/Basic.example.tsx b/app/src/docs/_examples/dropdownContainer/Basic.example.tsx
@@ -11,7 +11,7 @@ export default function BasicExample() {
         return (
             <DropdownContainer maxWidth={ 360 } vPadding="12" padding="18" { ...props }>
                 <FlexCell alignSelf="flex-start">
-                    <Text fontSize="18" lineHeight="24" color="brand" font="semibold">
+                    <Text fontSize="18" lineHeight="24" color="brand" fontWeight="600">
                         Some Title
                     </Text>
                     <Text fontSize="14">

diff --git a/app/src/docs/_examples/flexItems/FlexCell.example.tsx b/app/src/docs/_examples/flexItems/FlexCell.example.tsx
@@ -8,7 +8,7 @@ export default function FlexCellExample() {
     return (
         <Panel background="surface" shadow cx={ css.root }>
             <FlexRow padding="12">
-                <Text font="semibold" size="48">
+                <Text fontWeight="600" size="48">
                     Identity Document
                 </Text>
             </FlexRow>

diff --git a/app/src/docs/_examples/flexItems/FlexSpacer.example.tsx b/app/src/docs/_examples/flexItems/FlexSpacer.example.tsx
@@ -10,7 +10,7 @@ export default function FlexSpacerExample() {
     return (
         <Panel background="surface" shadow cx={ css.root }>
             <FlexRow padding="12" vPadding="18">
-                <Text font="semibold" size="48">
+                <Text fontWeight="600" size="48">
                     User settings
                 </Text>
                 <FlexSpacer />

diff --git a/app/src/docs/_examples/flexItems/Panel.example.tsx b/app/src/docs/_examples/flexItems/Panel.example.tsx
@@ -7,7 +7,7 @@ export default function BasicExample() {
         <Panel background="surface" margin="24" style={ { width: '400px' } } shadow>
             <FlexRow padding="12" vPadding="12" borderBottom>
                 <FlexCell width="100%">
-                    <Text size="36" font="regular" color="secondary">
+                    <Text size="36" color="secondary">
                         {demoData.loremIpsum}
                     </Text>
                 </FlexCell>