@uzum-tech/ui 0.1.2 → 1.0.0

package/lib/notification/src/NotificationProvider.js

@@ -62,7 +62,7 @@ exports.default = (0, vue_1.defineComponent)({
             notificationListRef.value.push(notificationReactive);
             return notificationReactive;
         }
-        const apis = ['info', 'success', 'warning', 'error'].map((type) => {
+        const apis = ['info', 'success', 'warning', 'error', 'primary'].map((type) => {
             return (options) => create(Object.assign(Object.assign({}, options), { type }));
         });
         function handleAfterLeave(key) {
@@ -76,6 +76,7 @@ exports.default = (0, vue_1.defineComponent)({
             success: apis[1],
             warning: apis[2],
             error: apis[3],
+            primary: apis[4],
             open,
             destroyAll
         };

package/lib/notification/src/styles/index.cssr.js

@@ -18,7 +18,6 @@ const cssr_1 = require("../../../_utils/cssr");
 // --u-bezier-ease-out
 // --u-bezier-ease-in
 // --u-border-radius
-// --u-box-shadow
 // --u-close-margin
 // --u-close-size
 // --u-close-icon-size
@@ -78,12 +77,6 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  transform-origin: top center;
  `)]), (0, cssr_1.cM)('bottom', [(0, cssr_1.cB)('notification-wrapper', `
  transform-origin: bottom center;
- `)]), (0, cssr_1.cM)('top-right, bottom-right', [(0, cssr_1.cB)('notification', `
- margin-left: 28px;
- margin-right: 16px;
- `)]), (0, cssr_1.cM)('top-left, bottom-left', [(0, cssr_1.cB)('notification', `
- margin-left: 16px;
- margin-right: 28px;
  `)]), (0, cssr_1.cM)('top-right', `
  right: 0;
  `, [placementTransformStyle('top-right')]), (0, cssr_1.cM)('top-left', `
@@ -116,8 +109,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  transform .3s var(--u-bezier-ease-in),
  max-height .3s var(--u-bezier),
  margin-top .3s linear,
- margin-bottom .3s linear,
- box-shadow .3s var(--u-bezier);
+ margin-bottom .3s linear;
  `), (0, cssr_1.c)('&.notification-transition-enter-active', `
  transition:
  background-color .3s var(--u-bezier),
@@ -126,19 +118,18 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  transform .3s var(--u-bezier-ease-out),
  max-height .3s var(--u-bezier),
  margin-top .3s linear,
- margin-bottom .3s linear,
- box-shadow .3s var(--u-bezier);
+ margin-bottom .3s linear;
  `)]), (0, cssr_1.cB)('notification', `
  background-color: var(--u-color);
  color: var(--u-text-color);
  transition:
  background-color .3s var(--u-bezier),
  color .3s var(--u-bezier),
- opacity .3s var(--u-bezier),
- box-shadow .3s var(--u-bezier);
+ opacity .3s var(--u-bezier);
  font-family: inherit;
  font-size: var(--u-font-size);
- font-weight: 400;
+ font-weight: var(--u-font-weight);
+ line-height: var(--u-line-height);
  position: relative;
  display: flex;
  overflow: hidden;
@@ -146,8 +137,10 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  padding-left: var(--u-padding-left);
  padding-right: var(--u-padding-right);
  width: var(--u-width);
+ max-width: calc(100vw - 32px);
+ margin-left: 16px;
+ margin-right: 16px;
  border-radius: var(--u-border-radius);
- box-shadow: var(--u-box-shadow);
  box-sizing: border-box;
  opacity: 1;
  `, [(0, cssr_1.cE)('avatar', [(0, cssr_1.cB)('icon', {
@@ -155,11 +148,11 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
 }), (0, cssr_1.cB)('base-icon', {
   color: 'var(--u-icon-color)'
 })]), (0, cssr_1.cM)('show-avatar', [(0, cssr_1.cB)('notification-main', `
- margin-left: 40px;
- width: calc(100% - 40px); 
- `)]), (0, cssr_1.cM)('closable', [(0, cssr_1.cB)('notification-main', [(0, cssr_1.c)('> *:first-child', {
-  paddingRight: '20px'
-})]), (0, cssr_1.cE)('close', `
+ margin-left: calc(var(--u-avatar-size) + 16px);
+ width: calc(100% - var(--u-avatar-size) + 16px); 
+ `)]), (0, cssr_1.cM)('closable', [(0, cssr_1.cB)('notification-main', [(0, cssr_1.c)('> *:first-child', `
+ padding-right: var(--u-close-size);
+ `)]), (0, cssr_1.cE)('close', `
  position: absolute;
  top: 0;
  right: 0;
@@ -171,9 +164,9 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  position: absolute;
  top: var(--u-padding-top);
  left: var(--u-padding-left);
- width: 28px;
- height: 28px;
- font-size: 28px;
+ width: var(--u-avatar-size);
+ height: var(--u-avatar-size);
+ font-size: var(--u-avatar-size);
  display: flex;
  align-items: center;
  justify-content: center;
@@ -201,18 +194,20 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  `)]), (0, cssr_1.cE)('header', `
  font-weight: var(--u-title-font-weight);
  font-size: var(--u-title-font-size);
+ line-height: var(--u-title-line-height);
  transition: color .3s var(--u-bezier-ease-out);
  color: var(--u-title-text-color);
  `), (0, cssr_1.cE)('description', `
  margin-top: 8px;
  font-size: var(--u-description-font-size);
+ font-weight: var(--u-description-font-weight);
+ line-height: var(--u-description-line-height);
  white-space: pre-wrap;
  word-wrap: break-word;
  transition: color .3s var(--u-bezier-ease-out);
  color: var(--u-description-text-color);
  `), (0, cssr_1.cE)('content', `
- line-height: var(--u-line-height);
- margin: 12px 0 0 0;
+ margin: 8px 0 0 0;
  font-family: inherit;
  white-space: pre-wrap;
  word-wrap: break-word;

package/lib/notification/styles/_common.d.ts

@@ -1,11 +1,6 @@
 declare const _default: {
-    closeMargin: string;
-    closeSize: string;
-    closeIconSize: string;
     width: string;
     padding: string;
-    titleFontSize: string;
-    metaFontSize: string;
-    descriptionFontSize: string;
+    closeBorderRadius: string;
 };
 export default _default;

package/lib/notification/styles/_common.js

@@ -1,12 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    closeMargin: '16px 12px',
-    closeSize: '20px',
-    closeIconSize: '16px',
-    width: '365px',
+    width: '480px',
     padding: '16px',
-    titleFontSize: '16px',
-    metaFontSize: '12px',
-    descriptionFontSize: '12px'
+    closeBorderRadius: '50px'
 };

package/lib/notification/styles/light.d.ts

@@ -1,66 +1,176 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 export declare const self: (vars: ThemeCommonVars) => {
-    borderRadius: string;
     lineHeight: string;
     fontSize: string;
-    headerFontWeight: string;
-    iconColor: string;
-    iconColorSuccess: string;
-    iconColorInfo: string;
-    iconColorWarning: string;
-    iconColorError: string;
+    fontWeight: string;
+    descriptionFontWeight: string;
+    descriptionLineHeight: string;
+    descriptionFontSize: string;
+    titleFontSize: string;
+    titleLineHeight: string;
+    titleFontWeight: string;
+    metaFontSize: string;
+    borderRadius: string;
+    closeSize: string;
+    closeIconSize: string;
+    avatarSize: string;
+    closeMargin: string;
     color: string;
+    iconColor: string;
     textColor: string;
     closeIconColor: string;
     closeIconColorHover: string;
     closeIconColorPressed: string;
-    closeBorderRadius: string;
     closeColorHover: string;
     closeColorPressed: string;
-    headerTextColor: string;
+    titleTextColor: string;
     descriptionTextColor: string;
     actionTextColor: string;
-    boxShadow: string;
-    closeMargin: string;
-    closeSize: string;
-    closeIconSize: string;
+    colorSuccess: string;
+    iconColorSuccess: string;
+    textColorSuccess: string;
+    closeIconColorSuccess: string;
+    closeIconColorHoverSuccess: string;
+    closeIconColorPressedSuccess: string;
+    closeColorHoverSuccess: string;
+    closeColorPressedSuccess: string;
+    titleTextColorSuccess: string;
+    descriptionTextColorSuccess: string;
+    actionTextColorSuccess: string;
+    colorInfo: string;
+    iconColorInfo: string;
+    textColorInfo: string;
+    closeIconColorInfo: string;
+    closeIconColorHoverInfo: string;
+    closeIconColorPressedInfo: string;
+    closeColorHoverInfo: string;
+    closeColorPressedInfo: string;
+    titleTextColorInfo: string;
+    descriptionTextColorInfo: string;
+    actionTextColorInfo: string;
+    colorWarning: string;
+    iconColorWarning: string;
+    textColorWarning: string;
+    closeIconColorWarning: string;
+    closeIconColorHoverWarning: string;
+    closeIconColorPressedWarning: string;
+    closeColorHoverWarning: string;
+    closeColorPressedWarning: string;
+    titleTextColorWarning: string;
+    descriptionTextColorWarning: string;
+    actionTextColorWarning: string;
+    colorError: string;
+    iconColorError: string;
+    textColorError: string;
+    closeIconColorError: string;
+    closeIconColorHoverError: string;
+    closeIconColorPressedError: string;
+    closeColorHoverError: string;
+    closeColorPressedError: string;
+    titleTextColorError: string;
+    descriptionTextColorError: string;
+    actionTextColorError: string;
+    colorPrimary: string;
+    iconColorPrimary: string;
+    textColorPrimary: string;
+    closeIconColorPrimary: string;
+    closeIconColorHoverPrimary: string;
+    closeIconColorPressedPrimary: string;
+    closeColorHoverPrimary: string;
+    closeColorPressedPrimary: string;
+    titleTextColorPrimary: string;
+    descriptionTextColorPrimary: string;
+    actionTextColorPrimary: string;
     width: string;
     padding: string;
-    titleFontSize: string;
-    metaFontSize: string;
-    descriptionFontSize: string;
+    closeBorderRadius: string;
 };
 export type NotificationThemeVars = ReturnType<typeof self>;
 declare const notificationLight: import("../../_mixins").Theme<"Notification", {
-    borderRadius: string;
     lineHeight: string;
     fontSize: string;
-    headerFontWeight: string;
-    iconColor: string;
-    iconColorSuccess: string;
-    iconColorInfo: string;
-    iconColorWarning: string;
-    iconColorError: string;
+    fontWeight: string;
+    descriptionFontWeight: string;
+    descriptionLineHeight: string;
+    descriptionFontSize: string;
+    titleFontSize: string;
+    titleLineHeight: string;
+    titleFontWeight: string;
+    metaFontSize: string;
+    borderRadius: string;
+    closeSize: string;
+    closeIconSize: string;
+    avatarSize: string;
+    closeMargin: string;
     color: string;
+    iconColor: string;
     textColor: string;
     closeIconColor: string;
     closeIconColorHover: string;
     closeIconColorPressed: string;
-    closeBorderRadius: string;
     closeColorHover: string;
     closeColorPressed: string;
-    headerTextColor: string;
+    titleTextColor: string;
     descriptionTextColor: string;
     actionTextColor: string;
-    boxShadow: string;
-    closeMargin: string;
-    closeSize: string;
-    closeIconSize: string;
+    colorSuccess: string;
+    iconColorSuccess: string;
+    textColorSuccess: string;
+    closeIconColorSuccess: string;
+    closeIconColorHoverSuccess: string;
+    closeIconColorPressedSuccess: string;
+    closeColorHoverSuccess: string;
+    closeColorPressedSuccess: string;
+    titleTextColorSuccess: string;
+    descriptionTextColorSuccess: string;
+    actionTextColorSuccess: string;
+    colorInfo: string;
+    iconColorInfo: string;
+    textColorInfo: string;
+    closeIconColorInfo: string;
+    closeIconColorHoverInfo: string;
+    closeIconColorPressedInfo: string;
+    closeColorHoverInfo: string;
+    closeColorPressedInfo: string;
+    titleTextColorInfo: string;
+    descriptionTextColorInfo: string;
+    actionTextColorInfo: string;
+    colorWarning: string;
+    iconColorWarning: string;
+    textColorWarning: string;
+    closeIconColorWarning: string;
+    closeIconColorHoverWarning: string;
+    closeIconColorPressedWarning: string;
+    closeColorHoverWarning: string;
+    closeColorPressedWarning: string;
+    titleTextColorWarning: string;
+    descriptionTextColorWarning: string;
+    actionTextColorWarning: string;
+    colorError: string;
+    iconColorError: string;
+    textColorError: string;
+    closeIconColorError: string;
+    closeIconColorHoverError: string;
+    closeIconColorPressedError: string;
+    closeColorHoverError: string;
+    closeColorPressedError: string;
+    titleTextColorError: string;
+    descriptionTextColorError: string;
+    actionTextColorError: string;
+    colorPrimary: string;
+    iconColorPrimary: string;
+    textColorPrimary: string;
+    closeIconColorPrimary: string;
+    closeIconColorHoverPrimary: string;
+    closeIconColorPressedPrimary: string;
+    closeColorHoverPrimary: string;
+    closeColorPressedPrimary: string;
+    titleTextColorPrimary: string;
+    descriptionTextColorPrimary: string;
+    actionTextColorPrimary: string;
     width: string;
     padding: string;
-    titleFontSize: string;
-    metaFontSize: string;
-    descriptionFontSize: string;
+    closeBorderRadius: string;
 }, {
     Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
         color: string;

package/lib/notification/styles/light.js

@@ -9,13 +9,20 @@ const common_1 = require("../../_styles/common");
 const _mixins_1 = require("../../_mixins");
 const _common_1 = __importDefault(require("./_common"));
 const self = (vars) => {
-    const { textColor2, successColor, infoColor, warningColor, errorColor, popoverColor, closeIconColor, closeIconColorHover, closeIconColorPressed, closeColorHover, closeColorPressed, textColor1, textColor3, borderRadius, fontWeightStrong, boxShadow2, lineHeight, fontSize } = vars;
-    return Object.assign(Object.assign({}, _common_1.default), { borderRadius,
-        lineHeight,
-        fontSize, headerFontWeight: fontWeightStrong, iconColor: textColor2, iconColorSuccess: successColor, iconColorInfo: infoColor, iconColorWarning: warningColor, iconColorError: errorColor, color: popoverColor, textColor: textColor2, closeIconColor,
-        closeIconColorHover,
-        closeIconColorPressed, closeBorderRadius: borderRadius, closeColorHover,
-        closeColorPressed, headerTextColor: textColor1, descriptionTextColor: textColor3, actionTextColor: textColor2, boxShadow: boxShadow2 });
+    const { fontWeightStrong, lineHeightBodyMedium, fontBodyLarge, fontBodyMedium, borderRadiusLarge, closeMedium, iconMedium, fontWeight, staticBlack, staticWhite, transparencyTertiary, transparencyQuinary, staticGreen, brandPrimary500, brandSecondary600, staticRed, elementsTertiary, textPrimary, transparencySecondary, transparencyPrimary } = vars;
+    return Object.assign(Object.assign({}, _common_1.default), { lineHeight: lineHeightBodyMedium, fontSize: fontBodyMedium, fontWeight, descriptionFontWeight: fontWeight, descriptionLineHeight: lineHeightBodyMedium, descriptionFontSize: fontBodyMedium, titleFontSize: fontBodyLarge, titleLineHeight: lineHeightBodyMedium, titleFontWeight: fontWeightStrong, metaFontSize: fontBodyMedium, borderRadius: borderRadiusLarge, closeSize: closeMedium, closeIconSize: iconMedium, avatarSize: iconMedium, closeMargin: '12px', 
+        // Default
+        color: staticBlack, iconColor: staticWhite, textColor: staticWhite, closeIconColor: staticWhite, closeIconColorHover: staticWhite, closeIconColorPressed: staticWhite, closeColorHover: transparencyTertiary, closeColorPressed: transparencyQuinary, titleTextColor: staticWhite, descriptionTextColor: staticWhite, actionTextColor: staticWhite, 
+        // Success
+        colorSuccess: staticGreen, iconColorSuccess: staticWhite, textColorSuccess: staticWhite, closeIconColorSuccess: staticWhite, closeIconColorHoverSuccess: staticWhite, closeIconColorPressedSuccess: staticWhite, closeColorHoverSuccess: transparencyTertiary, closeColorPressedSuccess: transparencyQuinary, titleTextColorSuccess: staticWhite, descriptionTextColorSuccess: staticWhite, actionTextColorSuccess: staticWhite, 
+        // Info
+        colorInfo: elementsTertiary, iconColorInfo: textPrimary, textColorInfo: textPrimary, closeIconColorInfo: textPrimary, closeIconColorHoverInfo: textPrimary, closeIconColorPressedInfo: textPrimary, closeColorHoverInfo: transparencySecondary, closeColorPressedInfo: transparencyPrimary, titleTextColorInfo: textPrimary, descriptionTextColorInfo: textPrimary, actionTextColorInfo: textPrimary, 
+        // Warning
+        colorWarning: brandSecondary600, iconColorWarning: staticBlack, textColorWarning: staticBlack, closeIconColorWarning: staticBlack, closeIconColorHoverWarning: staticBlack, closeIconColorPressedWarning: staticBlack, closeColorHoverWarning: transparencyTertiary, closeColorPressedWarning: transparencyQuinary, titleTextColorWarning: staticBlack, descriptionTextColorWarning: staticBlack, actionTextColorWarning: staticBlack, 
+        // Error
+        colorError: staticRed, iconColorError: staticWhite, textColorError: staticWhite, closeIconColorError: staticWhite, closeIconColorHoverError: staticWhite, closeIconColorPressedError: staticWhite, closeColorHoverError: transparencyTertiary, closeColorPressedError: transparencyQuinary, titleTextColorError: staticWhite, descriptionTextColorError: staticWhite, actionTextColorError: staticWhite, 
+        // Primary
+        colorPrimary: brandPrimary500, iconColorPrimary: staticWhite, textColorPrimary: staticWhite, closeIconColorPrimary: staticWhite, closeIconColorHoverPrimary: staticWhite, closeIconColorPressedPrimary: staticWhite, closeColorHoverPrimary: transparencyTertiary, closeColorPressedPrimary: transparencyQuinary, titleTextColorPrimary: staticWhite, descriptionTextColorPrimary: staticWhite, actionTextColorPrimary: staticWhite });
 };
 exports.self = self;
 const notificationLight = (0, _mixins_1.createTheme)({

package/lib/page-header/src/PageHeader.d.ts

@@ -6,6 +6,8 @@ export declare const pageHeaderProps: {
     extra: StringConstructor;
     onBack: PropType<() => void>;
     theme: PropType<import("../../_mixins").Theme<"PageHeader", {
+        titleFontSize: string;
+        backSize: string;
         titleFontWeight: string;
         fontSize: string;
         titleTextColor: string;
@@ -13,10 +15,10 @@ export declare const pageHeaderProps: {
         backColorHover: string;
         backColorPressed: string;
         subtitleTextColor: string;
-        titleFontSize: string;
-        backSize: string;
     }, unknown>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"PageHeader", {
+        titleFontSize: string;
+        backSize: string;
         titleFontWeight: string;
         fontSize: string;
         titleTextColor: string;
@@ -24,10 +26,10 @@ export declare const pageHeaderProps: {
         backColorHover: string;
         backColorPressed: string;
         subtitleTextColor: string;
-        titleFontSize: string;
-        backSize: string;
     }, unknown>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"PageHeader", {
+        titleFontSize: string;
+        backSize: string;
         titleFontWeight: string;
         fontSize: string;
         titleTextColor: string;
@@ -35,8 +37,6 @@ export declare const pageHeaderProps: {
         backColorHover: string;
         backColorPressed: string;
         subtitleTextColor: string;
-        titleFontSize: string;
-        backSize: string;
     }, unknown>>>;
 };
 export type PageHeaderProps = ExtractPublicPropTypes<typeof pageHeaderProps>;
@@ -46,6 +46,8 @@ declare const _default: import("vue").DefineComponent<{
     extra: StringConstructor;
     onBack: PropType<() => void>;
     theme: PropType<import("../../_mixins").Theme<"PageHeader", {
+        titleFontSize: string;
+        backSize: string;
         titleFontWeight: string;
         fontSize: string;
         titleTextColor: string;
@@ -53,10 +55,10 @@ declare const _default: import("vue").DefineComponent<{
         backColorHover: string;
         backColorPressed: string;
         subtitleTextColor: string;
-        titleFontSize: string;
-        backSize: string;
     }, unknown>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"PageHeader", {
+        titleFontSize: string;
+        backSize: string;
         titleFontWeight: string;
         fontSize: string;
         titleTextColor: string;
@@ -64,10 +66,10 @@ declare const _default: import("vue").DefineComponent<{
         backColorHover: string;
         backColorPressed: string;
         subtitleTextColor: string;
-        titleFontSize: string;
-        backSize: string;
     }, unknown>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"PageHeader", {
+        titleFontSize: string;
+        backSize: string;
         titleFontWeight: string;
         fontSize: string;
         titleTextColor: string;
@@ -75,8 +77,6 @@ declare const _default: import("vue").DefineComponent<{
         backColorHover: string;
         backColorPressed: string;
         subtitleTextColor: string;
-        titleFontSize: string;
-        backSize: string;
     }, unknown>>>;
 }, {
     rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
@@ -101,6 +101,8 @@ declare const _default: import("vue").DefineComponent<{
     extra: StringConstructor;
     onBack: PropType<() => void>;
     theme: PropType<import("../../_mixins").Theme<"PageHeader", {
+        titleFontSize: string;
+        backSize: string;
         titleFontWeight: string;
         fontSize: string;
         titleTextColor: string;
@@ -108,10 +110,10 @@ declare const _default: import("vue").DefineComponent<{
         backColorHover: string;
         backColorPressed: string;
         subtitleTextColor: string;
-        titleFontSize: string;
-        backSize: string;
     }, unknown>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"PageHeader", {
+        titleFontSize: string;
+        backSize: string;
         titleFontWeight: string;
         fontSize: string;
         titleTextColor: string;
@@ -119,10 +121,10 @@ declare const _default: import("vue").DefineComponent<{
         backColorHover: string;
         backColorPressed: string;
         subtitleTextColor: string;
-        titleFontSize: string;
-        backSize: string;
     }, unknown>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"PageHeader", {
+        titleFontSize: string;
+        backSize: string;
         titleFontWeight: string;
         fontSize: string;
         titleTextColor: string;
@@ -130,8 +132,6 @@ declare const _default: import("vue").DefineComponent<{
         backColorHover: string;
         backColorPressed: string;
         subtitleTextColor: string;
-        titleFontSize: string;
-        backSize: string;
     }, unknown>>>;
 }>>, {}, {}>;
 export default _default;

package/lib/page-header/styles/light.d.ts

@@ -1,5 +1,7 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 export declare function self(vars: ThemeCommonVars): {
+    titleFontSize: string;
+    backSize: string;
     titleFontWeight: string;
     fontSize: string;
     titleTextColor: string;
@@ -7,10 +9,10 @@ export declare function self(vars: ThemeCommonVars): {
     backColorHover: string;
     backColorPressed: string;
     subtitleTextColor: string;
-    titleFontSize: string;
-    backSize: string;
 };
 export declare const pageHeaderLight: import("../../_mixins").Theme<"PageHeader", {
+    titleFontSize: string;
+    backSize: string;
     titleFontWeight: string;
     fontSize: string;
     titleTextColor: string;
@@ -18,8 +20,6 @@ export declare const pageHeaderLight: import("../../_mixins").Theme<"PageHeader"
     backColorHover: string;
     backColorPressed: string;
     subtitleTextColor: string;
-    titleFontSize: string;
-    backSize: string;
 }, unknown>;
 export type PageHeaderThemeVars = ReturnType<typeof self>;
 export type PageHeaderTheme = typeof pageHeaderLight;

package/lib/page-header/styles/light.js

@@ -1,15 +1,21 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.pageHeaderLight = exports.self = void 0;
 const _mixins_1 = require("../../_mixins");
 const common_1 = require("../../_styles/common");
-const _common_1 = __importDefault(require("./_common"));
 function self(vars) {
-    const { textColor1, textColor2, textColor3, fontSize, fontWeightStrong, primaryColorHover, primaryColorPressed } = vars;
-    return Object.assign(Object.assign({}, _common_1.default), { titleFontWeight: fontWeightStrong, fontSize, titleTextColor: textColor1, backColor: textColor2, backColorHover: primaryColorHover, backColorPressed: primaryColorPressed, subtitleTextColor: textColor3 });
+    const { fontWeightStrong, fontTitleSmall, iconMedium, fontBodyMedium, textPrimary, brandPrimary400, brandPrimary500, textTertiary } = vars;
+    return {
+        titleFontSize: fontTitleSmall,
+        backSize: iconMedium,
+        titleFontWeight: fontWeightStrong,
+        fontSize: fontBodyMedium,
+        titleTextColor: textPrimary,
+        backColor: textPrimary,
+        backColorHover: brandPrimary400,
+        backColorPressed: brandPrimary500,
+        subtitleTextColor: textTertiary
+    };
 }
 exports.self = self;
 exports.pageHeaderLight = (0, _mixins_1.createTheme)({