Merge branch 'develop' into feature/data-table-columns-group

# Conflicts:
#	changelog.md

changelog.md

@@ -7,6 +7,8 @@
 * [TabButton][VerticalTabButton]: decreased paddings, added gaps `3px` between internal items for all sizes according to design
 * [Tag]: changed layout - added gaps between internal items, changed padding
 * [Data Sources]: cursor-based pagination support. More details [here](http://uui.epam.com/documents?id=dataSources-lazy-dataSource&mode=doc&category=dataSources&theme=loveship#using_cursor-based_pagination)
+* [TimelineScale]: added bottom/top month text customisation.
+* [TimelineScale]: customisation of today line height was added.
 * [DataTable]: groups of columns.
 
 **What's Fixed**

epam-assets/theme/theme_eduverse_dark.scss

@@ -9,6 +9,7 @@
 @mixin theme-eduverse_dark {
     --uui-font: 'Inter', sans-serif;
     --uui-font-mono: 'Roboto Mono', monospace;
+    --font-museo-sans: 'Museo Sans', 'Source Sans Pro', Arial, sans-serif;
 
     /* shadows */
     --uui-shadow-level-1: 0 0 4px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2);
@@ -175,6 +176,20 @@
         --uui-accordion-toggler-border: var(--uui-divider-light);
     }
 
+    .uui-accordion-toggler {
+        --uui-accordion-toggler-font: var(--font-museo-sans);
+        --uui-accordion-toggler-font-weight: 500;
+    }
+
+    /* Modals */
+
+    .uui-modal-title {
+        --uui-modals-title-font: var(--font-museo-sans);
+        --uui-modals-title-font-weight: 500;
+        --uui-modals-title-font-size: 28px;
+        --uui-modals-title-line-height: 36px;
+    }
+
     /* FileCard */
 
     .uui-file_card {
@@ -805,25 +820,44 @@
     /* Typography */
 
     .uui-typography {
-        .uui-highlight {
-            background-color: var(--uui-warning-20);
+        h1, h2, h3, h4, h5, h6 {
+            font-family: var(--font-museo-sans);
+            letter-spacing: unset;
         }
 
         h1 {
-            font-weight: 600;
+            font-size: 64px;
+            line-height: 72px;
+            font-weight: 700;
         }
 
         h2 {
+            font-size: 36px;
+            line-height: 42px;
             font-weight: 700;
         }
 
         h3 {
-            font-weight: 600;
+            font-size: 32px;
+            line-height: 36px;
+            font-weight: 700;
         }
 
-        .hero-header {
-            font-size: 72px;
-            line-height: 72px;
+        h4 {
+            font-size: 28px;
+            line-height: 36px;
+            font-weight: 500;
+        }
+
+        h5 {
+            font-size: 24px;
+            line-height: 32px;
+            font-weight: 700;
+        }
+
+        h6 {
+            font-size: 14px;
+            line-height: 24px;
             font-weight: 700;
         }
     }

epam-assets/theme/theme_eduverse_light.scss

@@ -10,6 +10,7 @@
 @mixin theme-eduverse_light {
     --uui-font: 'Inter', sans-serif;
     --uui-font-mono: 'Roboto Mono', monospace;
+    --font-museo-sans: 'Museo Sans', 'Source Sans Pro', Arial, sans-serif;
 
     --gradient-1: linear-gradient(90deg, #00FFD3 0%, #00F6FF 44.22%, #B896FF 90%);
     --gradient-2: linear-gradient(152deg, #0078C2 8.13%, #0047FF 59.98%, #8453D2 91.87%);
@@ -175,6 +176,20 @@
         --uui-accordion-border-radius: 6px;
     }
 
+    .uui-accordion-toggler {
+        --uui-accordion-toggler-font: var(--font-museo-sans);
+        --uui-accordion-toggler-font-weight: 500;
+    }
+
+    /* Modals */
+
+    .uui-modal-title {
+        --uui-modals-title-font: var(--font-museo-sans);
+        --uui-modals-title-font-weight: 500;
+        --uui-modals-title-font-size: 28px;
+        --uui-modals-title-line-height: 36px;
+    }
+
     /* FileCard */
 
     .uui-file_card {
@@ -476,42 +491,45 @@
     /* Typography */
 
     .uui-typography {
-        h1 {
-            font-weight: 400;
+        h1, h2, h3, h4, h5, h6 {
+            font-family: var(--font-museo-sans);
+            letter-spacing: unset;
         }
 
-        h2, h3, h4, h5 {
-            font-weight: 600;
-        }
-
-        .promo-header:is(h1, h2, h3, h4, h5, h6) {
-            font-family: var(--uui-font);
-        }
-
-        h1.promo-header {
-            font-size: 72px;
-            font-weight: 400;
+        h1 {
+            font-size: 64px;
+            line-height: 72px;
+            font-weight: 700;
         }
 
-        h2.promo-header {
-            font-size: 44px;
-            font-weight: 600;
+        h2 {
+            font-size: 36px;
+            line-height: 42px;
+            font-weight: 700;
         }
 
-        h3.promo-header {
-            font-size: 36px;
+        h3 {
+            font-size: 32px;
+            line-height: 36px;
+            font-weight: 700;
         }
 
-        h4.promo-header {
-            font-size: 30px;
+        h4 {
+            font-size: 28px;
+            line-height: 36px;
+            font-weight: 500;
         }
 
-        h5.promo-header {
+        h5 {
             font-size: 24px;
+            line-height: 32px;
+            font-weight: 700;
         }
 
-        h6.promo-header {
-            font-size: 18px;
+        h6 {
+            font-size: 14px;
+            line-height: 24px;
+            font-weight: 700;
         }
     }
 }

next-demo/next-app/src/components/Modal.tsx

@@ -37,7 +37,7 @@ export const BasicModalExample = (modalProps: IModal<string | boolean>) => {
                     <ModalFooter>
                         <FlexSpacer />
                         <Button
-                            color='gray50'
+                            color='gray'
                             fill='white'
                             caption='Cancel'
                             onClick={() => modalProps.abort()}

next-demo/next-pages/src/components/Modal.tsx

@@ -37,7 +37,7 @@ export function BasicModalExample(modalProps: IModal<string | boolean>) {
                     <ModalFooter>
                         <FlexSpacer />
                         <Button
-                            color='gray50'
+                            color='gray'
                             fill='white'
                             caption='Cancel'
                             onClick={() => modalProps.abort()}

uui-timeline/src/TimelineGrid.tsx

@@ -66,6 +66,7 @@ export interface TimelineGridProps extends TimelineCanvasProps {
      * Overrides today line color.
      */
     todayLineColor?: string;
+
     /**
      * Overrides weekend cell background color.
      */

uui-timeline/src/TimelineScale.tsx

@@ -11,6 +11,8 @@ import { TimelineCanvas, TimelineCanvasProps } from './TimelineCanvas';
 import { useTimelineTransform } from './useTimelineTransform';
 import { CanvasDrawPeriodPartProps, CanvasDrawPeriodProps, CanvasDrawScaleBottomBorderProps, TimelineScaleFonts,
     timelineScale, CanvasDrawTopDaysProps, CanvasDrawDaysProps, CanvasDrawPeriodWithTodayProps, CanvasDrawHeaderTodayProps,
+    CanvasDrawTopMonthProps,
+    CanvasDrawBottomMonthProps,
 } from './draw';
 
 /**
@@ -45,6 +47,10 @@ export interface TimelineScaleProps extends TimelineCanvasProps, TimelineScaleFo
      * Overrides bottom border line for current period (today, this week, etc).
      */
     todayLineColor?: string;
+    /**
+     * Overrides bottom border line width for current period (today, this week, etc).
+     */
+    todayLineHeight?: number;
     /**
      * Overrides period cell border color.
      */
@@ -66,6 +72,14 @@ export interface TimelineScaleProps extends TimelineCanvasProps, TimelineScaleFo
      * Overrides weekend/holiday cell background color.
      */
     weekendCellBackgroundColor?: string;
+    /**
+     * Overrides month text on the scale's top line. 
+     */
+    getTopMonth?(month: number): string;
+    /**
+     * Overrides month text on the scale's bottom line.
+     */
+    getBottomMonth?(month: number): string;
     /**
      * Overrides movement arrows icons.
      * @param direction - arrow direction.
@@ -105,15 +119,15 @@ export interface TimelineScaleProps extends TimelineCanvasProps, TimelineScaleFo
     /**
      * Overrides drawing months on the top of the scale.
      */
-    drawTopMonths?: (props: CanvasDrawPeriodPartProps) => void;
+    drawTopMonths?: (props: CanvasDrawTopMonthProps) => void;
     /**
      * Overrides drawing weeks on the scale.
      */
     drawWeeks?: (props: CanvasDrawPeriodWithTodayProps) => void;
     /**
      * Overrides drawing months on the bottom of the scale.
      */
-    drawBottomMonths?: (props: CanvasDrawPeriodWithTodayProps) => void;
+    drawBottomMonths?: (props: CanvasDrawBottomMonthProps) => void;
     /**
      * Overrides drawing years on the scale.
      */
@@ -143,12 +157,14 @@ export function TimelineScale({
     topDayTextColor = timelineScale.defaultColors.topDayTextColor,
     weekendTextColor = timelineScale.defaultColors.weekendTextColor,
     todayLineColor = timelineScale.defaultColors.todayLineColor,
+    todayLineHeight = timelineScale.defaultWidth.todayLineHeight,
     cellBorderColor = timelineScale.defaultColors.cellBorderColor,
     cellBorderWidth = timelineScale.defaultWidth.cellBorderWidth,
     cellBackgroundColor = timelineScale.defaultColors.cellBackgroundColor,
     evenPeriodCellBackgroundColor = timelineScale.defaultColors.evenPeriodCellBackgroundColor,
     weekendCellBackgroundColor = timelineScale.defaultColors.weekendCellBackgroundColor,
-
+    getTopMonth = timelineScale.getTopMonth,
+    getBottomMonth = timelineScale.getBottomMonth,
     drawPeriod = timelineScale.drawPeriod,
     drawMinutes = timelineScale.drawMinutes,
     drawRemainingHours = timelineScale.drawRemainingHours,
@@ -217,35 +233,36 @@ export function TimelineScale({
         };
 
         const withGridLinesProps = { ...commonProps, cellBorderColor, cellBorderWidth };
+        const todayProps = { todayLineColor, todayLineHeight, drawToday };
         drawPeriod({ ...timelineScale.getMinutesScaleRange(), draw: drawMinutes, ...withGridLinesProps });
         drawPeriod({ ...timelineScale.getRemainingHoursScaleRange(), draw: drawRemainingHours, ...commonProps });
         drawPeriod({ ...timelineScale.getHoursScaleRange(), draw: (...props) => drawHours(...props), ...commonProps });
         drawPeriod({
-            draw: (props) => drawTopDays({ ...props, topDayTextColor, weekendTextColor, todayLineColor, weekendCellBackgroundColor, drawToday }),
+            draw: (props) => drawTopDays({ ...props, topDayTextColor, weekendTextColor, weekendCellBackgroundColor, getTopMonth, ...todayProps }),
             ...timelineScale.getTopDaysScaleRange(),
             ...withGridLinesProps,
         });
         drawPeriod({
-            draw: (props) => drawDays({ ...props, weekendTextColor, todayLineColor, weekendCellBackgroundColor, drawToday }),
+            draw: (props) => drawDays({ ...props, weekendTextColor, weekendCellBackgroundColor, ...todayProps }),
             ...timelineScale.getDaysScaleRange(),
             ...withGridLinesProps,
         });
         drawPeriod({
-            draw: (props) => drawTopMonths({ ...props, evenPeriodCellBackgroundColor }),
+            draw: (props) => drawTopMonths({ ...props, evenPeriodCellBackgroundColor, getTopMonth }),
             ...timelineScale.getTopMonthsScaleRange(),
             ...withGridLinesProps,
         });
         drawPeriod({
-            draw: (props) => drawWeeks({ ...props, todayLineColor, drawToday }),
+            draw: (props) => drawWeeks({ ...props, drawToday, ...todayProps }),
             ...timelineScale.getWeeksScaleRange(),
             ...withGridLinesProps,
         });
         drawPeriod({
-            draw: (props) => drawBottomMonths({ ...props, todayLineColor, drawToday }),
+            draw: (props) => drawBottomMonths({ ...props, getBottomMonth, drawToday, ...todayProps }),
             ...timelineScale.getBottomMonthsScaleRange(),
             ...withGridLinesProps });
         drawPeriod({
-            draw: (props) => drawYears({ ...props, todayLineColor, drawToday, evenPeriodCellBackgroundColor }),
+            draw: (props) => drawYears({ ...props, drawToday, evenPeriodCellBackgroundColor, ...todayProps }),
             ...timelineScale.getYearsScaleRange(),
             ...withGridLinesProps,
         });