@uzum-tech/ui 0.1.2 → 1.0.1

package/lib/_styles/common/dark.js

@@ -3,103 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const seemly_1 = require("seemly");
 const _common_1 = __importDefault(require("./_common"));
-const base = {
-    neutralBase: '#000',
-    neutralInvertBase: '#fff',
-    neutralTextBase: '#fff',
-    neutralPopover: 'rgb(72, 72, 78)',
-    neutralCard: 'rgb(24, 24, 28)',
-    neutralModal: 'rgb(44, 44, 50)',
-    neutralBody: 'rgb(16, 16, 20)',
-    alpha1: '0.9',
-    alpha2: '0.82',
-    alpha3: '0.52',
-    alpha4: '0.38',
-    alpha5: '0.28',
-    alphaClose: '0.52',
-    alphaDisabled: '0.38',
-    alphaDisabledInput: '0.06',
-    alphaPending: '0.09',
-    alphaTablePending: '0.06',
-    alphaTableStriped: '0.05',
-    alphaPressed: '0.05',
-    alphaAvatar: '0.18',
-    alphaRail: '0.2',
-    alphaProgressRail: '0.12',
-    alphaBorder: '0.24',
-    alphaDivider: '0.09',
-    alphaInput: '0.1',
-    alphaAction: '0.06',
-    alphaTab: '0.04',
-    alphaScrollbar: '0.2',
-    alphaScrollbarHover: '0.3',
-    alphaCode: '0.12',
-    alphaTag: '0.2',
-    // primary
-    primaryHover: '#7fe7c4',
-    primaryDefault: '#63e2b7',
-    primaryActive: '#5acea7',
-    primarySuppl: 'rgb(42, 148, 125)',
-    // info
-    infoHover: '#8acbec',
-    infoDefault: '#70c0e8',
-    infoActive: '#66afd3',
-    infoSuppl: 'rgb(56, 137, 197)',
-    // error
-    errorHover: '#e98b8b',
-    errorDefault: '#e88080',
-    errorActive: '#e57272',
-    errorSuppl: 'rgb(208, 58, 82)',
-    // warning
-    warningHover: '#f5d599',
-    warningDefault: '#f2c97d',
-    warningActive: '#e6c260',
-    warningSuppl: 'rgb(240, 138, 0)',
-    // success
-    successHover: '#7fe7c4',
-    successDefault: '#63e2b7',
-    successActive: '#5acea7',
-    successSuppl: 'rgb(42, 148, 125)',
-    // tertiary
-    tertiaryHover: '#4E4D4D',
-    tertiaryDefault: '#101010',
-    tertiaryActive: '#4E4D4D',
-    tertiarySuppl: '#C5C7CA'
-};
-const baseBackgroundRgb = (0, seemly_1.rgba)(base.neutralBase);
-const baseInvertBackgroundRgb = (0, seemly_1.rgba)(base.neutralInvertBase);
-const overlayPrefix = 'rgba(' + baseInvertBackgroundRgb.slice(0, 3).join(', ') + ', ';
-function overlay(alpha) {
-    return overlayPrefix + String(alpha) + ')';
-}
-function neutral(alpha) {
-    const overlayRgba = Array.from(baseInvertBackgroundRgb);
-    overlayRgba[3] = Number(alpha);
-    return (0, seemly_1.composite)(baseBackgroundRgb, overlayRgba);
-}
-const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.default), { baseColor: base.neutralBase, 
-    // primary color
-    primaryColor: base.primaryDefault, primaryColorHover: base.primaryHover, primaryColorPressed: base.primaryActive, primaryColorSuppl: base.primarySuppl, 
-    // info color
-    infoColor: base.infoDefault, infoColorHover: base.infoHover, infoColorPressed: base.infoActive, infoColorSuppl: base.infoSuppl, 
-    // success color
-    successColor: base.successDefault, successColorHover: base.successHover, successColorPressed: base.successActive, successColorSuppl: base.successSuppl, 
-    // warning color
-    warningColor: base.warningDefault, warningColorHover: base.warningHover, warningColorPressed: base.warningActive, warningColorSuppl: base.warningSuppl, 
-    // error color
-    errorColor: base.errorDefault, errorColorHover: base.errorHover, errorColorPressed: base.errorActive, errorColorSuppl: base.errorSuppl, 
-    // tertiary color
-    tertiaryColor: base.tertiaryDefault, tertiaryColorHover: base.tertiaryHover, tertiaryColorActive: base.tertiaryActive, tertiaryColorSuppl: base.tertiarySuppl, tertiaryElements: '#F3F4F6', 
-    // text color
-    textColorBase: base.neutralTextBase, textColor1: overlay(base.alpha1), textColor2: overlay(base.alpha2), textColor3: overlay(base.alpha3), textTertiary: '#999', 
-    // textColor4: overlay(base.alpha4), // disabled, placeholder, icon
-    // textColor5: overlay(base.alpha5),
-    // Box Shadow colors
-    boxShadowHover: 'rgba(197, 199, 202, 0.25)', boxShadowFocus: 'rgba(197, 199, 202, 0.36)', boxShadowHoverChecked: 'rgba(187, 162, 253, 0.25)', boxShadowFocusChecked: 'rgba(187, 162, 253, 0.36)', textColorDisabled: overlay(base.alpha4), placeholderColor: overlay(base.alpha4), placeholderColorDisabled: overlay(base.alpha5), iconColor: overlay(base.alpha4), iconColorDisabled: overlay(base.alpha5), iconColorHover: overlay(Number(base.alpha4) * 1.25), iconColorPressed: overlay(Number(base.alpha4) * 0.8), opacity1: base.alpha1, opacity2: base.alpha2, opacity3: base.alpha3, opacity4: base.alpha4, opacity5: base.alpha5, dividerColor: overlay(base.alphaDivider), borderColor: overlay(base.alphaBorder), borderTagColor: '#C5C7CA', 
-    // close
-    closeIconColorHover: overlay(Number(base.alphaClose)), closeIconColor: overlay(Number(base.alphaClose)), closeIconColorPressed: overlay(Number(base.alphaClose)), closeColorHover: 'rgba(255, 255, 255, .12)', closeColorPressed: 'rgba(255, 255, 255, .08)', 
-    // clear
-    clearColor: overlay(base.alpha4), clearColorHover: (0, seemly_1.scaleColor)(overlay(base.alpha4), { alpha: 1.25 }), clearColorPressed: (0, seemly_1.scaleColor)(overlay(base.alpha4), { alpha: 0.8 }), scrollbarColor: overlay(base.alphaScrollbar), scrollbarColorHover: overlay(base.alphaScrollbarHover), scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', progressRailColor: overlay(base.alphaProgressRail), railColor: overlay(base.alphaRail), popoverColor: base.neutralPopover, tableColor: base.neutralCard, cardColor: base.neutralCard, modalColor: base.neutralModal, bodyColor: base.neutralBody, tagColor: neutral(base.alphaTag), avatarColor: overlay(base.alphaAvatar), avatarTextColor: base.neutralTextBase, avatarIconColor: base.neutralTextBase, invertedColor: base.neutralBase, tooltipColor: base.neutralPopover, inputColor: overlay(base.alphaInput), codeColor: overlay(base.alphaCode), tabColor: overlay(base.alphaTab), actionColor: overlay(base.alphaAction), tableHeaderColor: overlay(base.alphaAction), hoverColor: overlay(base.alphaPending), tableColorHover: overlay(base.alphaTablePending), tableColorStriped: overlay(base.alphaTableStriped), pressedColor: overlay(base.alphaPressed), opacityDisabled: base.alphaDisabled, inputColorDisabled: overlay(base.alphaDisabledInput), buttonColor2: 'rgba(255, 255, 255, .08)', buttonColor2Hover: 'rgba(255, 255, 255, .12)', buttonColor2Pressed: 'rgba(255, 255, 255, .08)', boxShadow1: '0 1px 2px -2px rgba(0, 0, 0, .24), 0 3px 6px 0 rgba(0, 0, 0, .18), 0 5px 12px 4px rgba(0, 0, 0, .12)', boxShadow2: '0 3px 6px -4px rgba(0, 0, 0, .24), 0 6px 12px 0 rgba(0, 0, 0, .16), 0 9px 18px 8px rgba(0, 0, 0, .10)', boxShadow3: '0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03)' });
+const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.default), { scrollbarColor: 'rgba(255, 255, 255, 0.25)', scrollbarColorHover: 'rgba(255, 255, 255, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brandPrimary50: '#2B204E', brandPrimary100: '#412A89', brandPrimary200: '#6A40ED', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#8967F1', brandPrimary550: '#6607DF', brandPrimary600: '#5D46A6', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#101010', surfaceSecondary: '#1D1D1D', containerPrimary: '#1D1D1D', containerSecondary: '#313135', textPrimary: '#F3F4F6', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#101010', textBrand: '#F3F4F6', elementsPrimary: '#F3F4F6', elementsSecondary: '#101010', elementsTertiary: '#222222', elementsQuaternary: '#424247', elementsQuinary: '#707479', elementsDarkQuinary: '#919396', elementsSenary: '#DFDFDF', elementsOnContainer: '#101010', transparencyPrimary: 'rgba(255, 255, 255, 0.1)', transparencySecondary: 'rgba(255, 255, 255, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.75)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticErrorAccent: '#CB0000', shadowDepth2: '0 0 0 1px #424247' // В дизайне тень вообще отсутствует, пока что пусть побудет визуально как border
+ });
 exports.default = derived;

package/lib/_styles/common/light.d.ts

@@ -1,122 +1,111 @@
 declare const derived: {
-    baseColor: string;
-    primaryColor: string;
-    primaryColorHover: string;
-    primaryColorPressed: string;
-    primaryColorSuppl: string;
-    infoColor: string;
-    infoColorHover: string;
-    infoColorPressed: string;
-    infoColorSuppl: string;
-    successColor: string;
-    successColorHover: string;
-    successColorPressed: string;
-    successColorSuppl: string;
-    warningColor: string;
-    warningColorHover: string;
-    warningColorPressed: string;
-    warningColorSuppl: string;
-    errorColor: string;
-    errorColorHover: string;
-    errorColorPressed: string;
-    errorColorSuppl: string;
-    tertiaryColor: string;
-    tertiaryColorHover: string;
-    tertiaryColorActive: string;
-    tertiaryColorSuppl: string;
-    tertiaryElements: string;
-    textColorBase: string;
-    textColor1: string;
-    textColor2: string;
-    textColor3: string;
-    textTertiary: string;
-    boxShadowHover: string;
-    boxShadowFocus: string;
-    boxShadowHoverChecked: string;
-    boxShadowFocusChecked: string;
-    textColorDisabled: string;
-    placeholderColor: string;
-    placeholderColorDisabled: string;
-    iconColor: string;
-    iconColorHover: string;
-    iconColorPressed: string;
-    iconColorDisabled: string;
-    opacity1: string;
-    opacity2: string;
-    opacity3: string;
-    opacity4: string;
-    opacity5: string;
-    dividerColor: string;
-    borderColor: string;
-    borderTagColor: string;
-    closeIconColor: string;
-    closeIconColorHover: string;
-    closeIconColorPressed: string;
-    closeColorHover: string;
-    closeColorPressed: string;
-    clearColor: string;
-    clearColorHover: string;
-    clearColorPressed: string;
     scrollbarColor: string;
     scrollbarColorHover: string;
     scrollbarWidth: string;
     scrollbarHeight: string;
     scrollbarBorderRadius: string;
-    progressRailColor: string;
-    railColor: string;
-    popoverColor: string;
-    tableColor: string;
-    cardColor: string;
-    modalColor: string;
-    bodyColor: string;
-    tagColor: string;
-    avatarColor: string;
-    avatarTextColor: string;
-    avatarIconColor: string;
-    invertedColor: string;
-    tooltipColor: string;
-    inputColor: string;
-    codeColor: string;
-    tabColor: string;
-    actionColor: string;
-    tableHeaderColor: string;
-    hoverColor: string;
-    tableColorHover: string;
-    tableColorStriped: string;
-    pressedColor: string;
     opacityDisabled: string;
-    inputColorDisabled: string;
-    buttonColor2: string;
-    buttonColor2Hover: string;
-    buttonColor2Pressed: string;
-    boxShadow1: string;
-    boxShadow2: string;
-    boxShadow3: string;
+    brandPrimary50: string;
+    brandPrimary100: string;
+    brandPrimary200: string;
+    brandPrimary300: string;
+    brandPrimary400: string;
+    brandPrimary500: string;
+    brandPrimary550: string;
+    brandPrimary600: string;
+    brandSecondary500: string;
+    brandSecondary300: string;
+    brandSecondary600: string;
+    brandTertiary500: string;
+    brandTertiary300: string;
+    brandTertiary600: string;
+    brandQuaternary500: string;
+    brandQuaternary300: string;
+    brandQuaternary600: string;
+    brandQuinary500: string;
+    brandQuinary300: string;
+    brandQuinary600: string;
+    brandQuinary100: string;
+    surfacePrimary: string;
+    surfaceSecondary: string;
+    containerPrimary: string;
+    containerSecondary: string;
+    textPrimary: string;
+    textSecondary: string;
+    textTertiary: string;
+    textQuaternary: string;
+    textBrand: string;
+    elementsPrimary: string;
+    elementsSecondary: string;
+    elementsTertiary: string;
+    elementsQuaternary: string;
+    elementsQuinary: string;
+    elementsDarkQuinary: string;
+    elementsSenary: string;
+    elementsOnContainer: string;
+    transparencyPrimary: string;
+    transparencySecondary: string;
+    transparencyTertiary: string;
+    transparencyQuinary: string;
+    transparencyModal: string;
+    staticBlack: string;
+    staticDarkGrey: string;
+    staticWhite: string;
+    staticRed: string;
+    staticOrange: string;
+    staticGreen: string;
+    staticErrorAccent: string;
+    shadowDepth2: string;
     fontFamily: string;
     fontFamilyMono: string;
-    fontWeight: string;
-    fontWeightStrong: string;
     cubicBezierEaseInOut: string;
     cubicBezierEaseOut: string;
     cubicBezierEaseIn: string;
-    borderWidth: number;
-    borderTagWidth: number;
+    borderRadiusLarge: string;
     borderRadius: string;
+    borderRadiusMedium: string;
     borderRadiusSmall: string;
-    fontSize: string;
-    fontSizeMini: string;
-    fontSizeTiny: string;
-    fontSizeSmall: string;
-    fontSizeMedium: string;
-    fontSizeLarge: string;
-    fontSizeHuge: string;
-    lineHeight: string;
+    borderRadiusTiny: string;
     heightMini: string;
     heightTiny: string;
     heightSmall: string;
     heightMedium: string;
     heightLarge: string;
     heightHuge: string;
+    fontDisplayLarge: string;
+    fontDisplaySmall: string;
+    fontHeadingLarge: string;
+    fontHeadingMedium: string;
+    fontHeadingSmall: string;
+    fontTitleLarge: string;
+    fontTitleMedium: string;
+    fontTitleSmall: string;
+    fontBodyLarge: string;
+    fontBodyMedium: string;
+    fontBodySmall: string;
+    lineHeightDisplayLarge: string;
+    lineHeightDisplaySmall: string;
+    lineHeightHeadingLarge: string;
+    lineHeightHeadingMedium: string;
+    lineHeightHeadingSmall: string;
+    lineHeightTitleLarge: string;
+    lineHeightTitleMedium: string;
+    lineHeightTitleSmall: string;
+    lineHeightBodyLarge: string;
+    lineHeightBodyMedium: string;
+    lineHeightBodySmall: string;
+    fontWeight: string;
+    fontWeightStrong: string;
+    fontWeightBold: string;
+    iconSmall: string;
+    iconMedium: string;
+    iconLarge: string;
+    iconHuge: string;
+    closeSmall: string;
+    closeMedium: string;
+    closeLarge: string;
+    closeHuge: string;
+    closeBorderRadius: string;
     name: "common";
 };
 export default derived;

package/lib/_styles/common/light.js

@@ -3,108 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const seemly_1 = require("seemly");
 const _common_1 = __importDefault(require("./_common"));
-const base = {
-    neutralBase: '#FFF',
-    neutralInvertBase: '#000',
-    neutralTextBase: '#000',
-    neutralPopover: '#fff',
-    neutralCard: '#fff',
-    neutralModal: '#fff',
-    neutralBody: '#fff',
-    neutralContainer: '#F3F4F6',
-    alpha1: '0.82',
-    alpha2: '0.72',
-    alpha3: '0.38',
-    alpha4: '0.24',
-    alpha5: '0.18',
-    alphaClose: '0.6',
-    alphaDisabled: '0.5',
-    alphaDisabledInput: '0.02',
-    alphaPending: '0.05',
-    alphaTablePending: '0.02',
-    alphaPressed: '0.07',
-    alphaAvatar: '0.2',
-    alphaRail: '0.14',
-    alphaProgressRail: '.08',
-    alphaBorder: '0.12',
-    alphaDivider: '0.06',
-    alphaInput: '0',
-    alphaAction: '0.02',
-    alphaTab: '0.04',
-    alphaScrollbar: '0.25',
-    alphaScrollbarHover: '0.4',
-    alphaCode: '0.05',
-    alphaTag: '0.02',
-    // primary
-    primaryHover: '#5B34C1',
-    primaryDefault: '#7000FF',
-    primaryActive: '#7000FF',
-    primarySuppl: '#5B34C1',
-    // info
-    infoHover: '#54B8F9',
-    infoDefault: '#90DDFB',
-    infoActive: '#90DDFB',
-    infoSuppl: '#54B8F9',
-    // error
-    errorHover: '#EA3E68',
-    errorDefault: '#F24835',
-    errorActive: '#EC616A',
-    errorSuppl: '#EA3E68',
-    // warning
-    warningHover: '#fcb040',
-    warningDefault: '#f0a020',
-    warningActive: '#c97c10',
-    warningSuppl: '#fcb040',
-    // success
-    successHover: '#09B849',
-    successDefault: '#00C853',
-    successActive: '#00C853',
-    successSuppl: '#09B849',
-    // tertiary
-    tertiaryHover: '#4E4D4D',
-    tertiaryDefault: '#101010',
-    tertiaryActive: '#4E4D4D',
-    tertiarySuppl: '#C5C7CA'
-};
-const baseBackgroundRgb = (0, seemly_1.rgba)(base.neutralBase);
-const baseInvertBackgroundRgb = (0, seemly_1.rgba)(base.neutralInvertBase);
-const overlayPrefix = 'rgba(' + baseInvertBackgroundRgb.slice(0, 3).join(', ') + ', ';
-function overlay(alpha) {
-    return overlayPrefix + String(alpha) + ')';
-}
-function neutral(alpha) {
-    const overlayRgba = Array.from(baseInvertBackgroundRgb);
-    overlayRgba[3] = Number(alpha);
-    return (0, seemly_1.composite)(baseBackgroundRgb, overlayRgba);
-}
-const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.default), { baseColor: base.neutralBase, 
-    // primary color
-    primaryColor: base.primaryDefault, primaryColorHover: base.primaryHover, primaryColorPressed: base.primaryActive, primaryColorSuppl: base.primarySuppl, 
-    // info color
-    infoColor: base.infoDefault, infoColorHover: base.infoHover, infoColorPressed: base.infoActive, infoColorSuppl: base.infoSuppl, 
-    // success color
-    successColor: base.successDefault, successColorHover: base.successHover, successColorPressed: base.successActive, successColorSuppl: base.successSuppl, 
-    // warning color
-    warningColor: base.warningDefault, warningColorHover: base.warningHover, warningColorPressed: base.warningActive, warningColorSuppl: base.warningSuppl, 
-    // error color
-    errorColor: base.errorDefault, errorColorHover: base.errorHover, errorColorPressed: base.errorActive, errorColorSuppl: base.errorSuppl, 
-    // tertiary color
-    tertiaryColor: base.tertiaryDefault, tertiaryColorHover: base.tertiaryHover, tertiaryColorActive: base.tertiaryActive, tertiaryColorSuppl: base.tertiarySuppl, tertiaryElements: base.neutralContainer, 
-    // text color
-    textColorBase: base.neutralTextBase, textColor1: 'rgb(31, 34, 37)', textColor2: base.tertiaryDefault, textColor3: 'rgb(118, 124, 130)', textTertiary: '#999999', 
-    // textColor4: neutral(base.alpha4), // disabled, placeholder, icon
-    // textColor5: neutral(base.alpha5),
-    // Box Shadow colors
-    boxShadowHover: 'rgba(197, 199, 202, 0.25)', boxShadowFocus: 'rgba(197, 199, 202, 0.36)', boxShadowHoverChecked: 'rgba(187, 162, 253, 0.25)', boxShadowFocusChecked: 'rgba(187, 162, 253, 0.36)', textColorDisabled: neutral(base.alpha4), placeholderColor: neutral(base.alpha4), placeholderColorDisabled: neutral(base.alpha5), iconColor: neutral(base.alpha4), iconColorHover: (0, seemly_1.scaleColor)(neutral(base.alpha4), { lightness: 0.75 }), iconColorPressed: (0, seemly_1.scaleColor)(neutral(base.alpha4), { lightness: 0.9 }), iconColorDisabled: neutral(base.alpha5), opacity1: base.alpha1, opacity2: base.alpha2, opacity3: base.alpha3, opacity4: base.alpha4, opacity5: base.alpha5, dividerColor: 'rgb(239, 239, 245)', borderColor: 'rgb(224, 224, 230)', borderTagColor: '#C5C7CA', 
-    // close
-    closeIconColor: neutral(Number(base.alphaClose)), closeIconColorHover: neutral(Number(base.alphaClose)), closeIconColorPressed: neutral(Number(base.alphaClose)), closeColorHover: 'rgba(0, 0, 0, .09)', closeColorPressed: 'rgba(0, 0, 0, .13)', 
-    // clear
-    clearColor: neutral(base.alpha4), clearColorHover: (0, seemly_1.scaleColor)(neutral(base.alpha4), { lightness: 0.75 }), clearColorPressed: (0, seemly_1.scaleColor)(neutral(base.alpha4), { lightness: 0.9 }), scrollbarColor: overlay(base.alphaScrollbar), scrollbarColorHover: overlay(base.alphaScrollbarHover), scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', progressRailColor: neutral(base.alphaProgressRail), railColor: 'rgb(219, 219, 223)', popoverColor: base.neutralPopover, tableColor: base.neutralCard, cardColor: base.neutralCard, modalColor: base.neutralModal, bodyColor: base.neutralBody, tagColor: base.neutralContainer, avatarColor: base.neutralContainer, avatarTextColor: '#808080', avatarIconColor: base.tertiaryDefault, invertedColor: 'rgb(0, 20, 40)', tooltipColor: neutral('0.79'), inputColor: neutral(base.alphaInput), codeColor: 'rgb(244, 244, 248)', tabColor: 'rgb(247, 247, 250)', actionColor: 'rgb(250, 250, 252)', tableHeaderColor: 'rgb(250, 250, 252)', hoverColor: 'rgb(243, 243, 245)', 
-    // use color with alpha since it can be nested with header filter & sorter effect
-    tableColorHover: 'rgba(0, 0, 100, 0.03)', tableColorStriped: 'rgba(0, 0, 100, 0.02)', pressedColor: 'rgb(237, 237, 239)', opacityDisabled: base.alphaDisabled, inputColorDisabled: 'rgb(250, 250, 252)', 
-    // secondary button color
-    // can also be used in tertiary button & quaternary button
-    buttonColor2: base.neutralContainer, buttonColor2Hover: '#E7E8EA', buttonColor2Pressed: base.neutralContainer, boxShadow1: '0 1px 2px -2px rgba(0, 0, 0, .08), 0 3px 6px 0 rgba(0, 0, 0, .06), 0 5px 12px 4px rgba(0, 0, 0, .04)', boxShadow2: '0px 20px 80px 0px rgba(0, 0, 0, 0.07)', boxShadow3: '0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03)' });
+const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.default), { scrollbarColor: 'rgba(0, 0, 0, 0.25)', scrollbarColorHover: 'rgba(0, 0, 0, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brandPrimary50: '#F8F2FF', brandPrimary100: '#EAE2FF', brandPrimary200: '#DACCFF', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#7000FF', brandPrimary550: '#6607DF', brandPrimary600: '#5B34C1', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#fff', surfaceSecondary: '#1d1d1d', containerPrimary: '#fff', containerSecondary: '#F3F4F6', textPrimary: '#101010', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#FFFFFF', textBrand: '#7000FF', elementsPrimary: '#101010', elementsSecondary: '#fff', elementsTertiary: '#F3F4F6', elementsQuaternary: '#E7E8EA', elementsQuinary: '#C5C7CA', elementsDarkQuinary: '#919396', elementsSenary: '#4E4D4D', elementsOnContainer: '#fff', transparencyPrimary: 'rgba(0, 0, 0, 0.35)', transparencySecondary: 'rgba(0, 0, 0, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.40)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticErrorAccent: '#CB0000', shadowDepth2: '0px 20px 80px 0px rgba(0, 0, 0, 0.07)' });
 exports.default = derived;

package/lib/_styles/global/index.cssr.js

@@ -11,9 +11,8 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../_utils/cssr");
 const _common_1 = __importDefault(require("../common/_common"));
 const {
-  fontSize,
-  fontFamily,
-  lineHeight
+  fontBodyMedium,
+  fontFamily
 } = _common_1.default;
 // All the components need the style
 // It is static and won't be changed in the app's lifetime
@@ -27,9 +26,9 @@ const {
 // In some android devices, there will be the style.
 exports.default = (0, cssr_1.c)('body', `
  margin: 0;
- font-size: ${fontSize};
+ font-size: ${fontBodyMedium};
  font-family: ${fontFamily};
- line-height: ${lineHeight};
+ line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
 `, [(0, cssr_1.c)('input', `

package/lib/_utils/index.d.ts

@@ -9,3 +9,6 @@ export { isBrowser } from './env/is-browser';
 export { eventEffectNotPerformed, markEventEffectPerformed } from './event';
 export * from './composable';
 export * from './dom';
+export { createStylesWithSingleColor } from './themes';
+export * from './types';
+export * from './inject';

package/lib/_utils/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.markEventEffectPerformed = exports.eventEffectNotPerformed = exports.isBrowser = exports.isJsdom = exports.createKey = exports.color2Class = exports.formatLength = exports.getTitleAttribute = exports.largerSize = exports.smallerSize = exports.throwError = exports.warnOnce = exports.warn = exports.Wrapper = exports.resolveWrappedSlotWithProps = exports.isNodeVShowFalse = exports.mergeEventHandlers = exports.isSlotEmpty = exports.resolveWrappedSlot = exports.resolveSlotWithProps = exports.resolveSlot = exports.createInjectionKey = exports.createRefSetter = exports.createDataKey = exports.getFirstSlotVNode = exports.render = exports.keysOf = exports.getVNodeChildren = exports.getSlot = exports.flatten = exports.omit = exports.keep = exports.call = void 0;
+exports.createStylesWithSingleColor = exports.markEventEffectPerformed = exports.eventEffectNotPerformed = exports.isBrowser = exports.isJsdom = exports.createKey = exports.color2Class = exports.formatLength = exports.getTitleAttribute = exports.largerSize = exports.smallerSize = exports.throwError = exports.warnOnce = exports.warn = exports.Wrapper = exports.resolveWrappedSlotWithProps = exports.isNodeVShowFalse = exports.mergeEventHandlers = exports.isSlotEmpty = exports.resolveWrappedSlot = exports.resolveSlotWithProps = exports.resolveSlot = exports.createInjectionKey = exports.createRefSetter = exports.createDataKey = exports.getFirstSlotVNode = exports.render = exports.keysOf = exports.getVNodeChildren = exports.getSlot = exports.flatten = exports.omit = exports.keep = exports.call = void 0;
 var vue_1 = require("./vue");
 Object.defineProperty(exports, "call", { enumerable: true, get: function () { return vue_1.call; } });
 Object.defineProperty(exports, "keep", { enumerable: true, get: function () { return vue_1.keep; } });
@@ -57,3 +57,7 @@ Object.defineProperty(exports, "eventEffectNotPerformed", { enumerable: true, ge
 Object.defineProperty(exports, "markEventEffectPerformed", { enumerable: true, get: function () { return event_1.markEventEffectPerformed; } });
 __exportStar(require("./composable"), exports);
 __exportStar(require("./dom"), exports);
+var themes_1 = require("./themes");
+Object.defineProperty(exports, "createStylesWithSingleColor", { enumerable: true, get: function () { return themes_1.createStylesWithSingleColor; } });
+__exportStar(require("./types"), exports);
+__exportStar(require("./inject"), exports);

package/lib/_utils/inject/index.d.ts

@@ -0,0 +1,2 @@
+import { ComputedRef, Ref } from 'vue';
+export declare const createRefFromPropsAndInjection: <N extends string, R>(props: { [K in N]: R | undefined; }, injection: { [K_1 in N]: Ref<R | undefined>; }, name: N) => ComputedRef<R | undefined>;

package/lib/_utils/inject/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createRefFromPropsAndInjection = void 0;
+const vue_1 = require("vue");
+const createRefFromPropsAndInjection = function (props, injection, name) {
+    return (0, vue_1.computed)(() => {
+        var _a;
+        return (props[name] !== undefined ? props[name] : (_a = injection[name]) === null || _a === void 0 ? void 0 : _a.value);
+    });
+};
+exports.createRefFromPropsAndInjection = createRefFromPropsAndInjection;

package/lib/_utils/themes/index.d.ts

@@ -0,0 +1 @@
+export { createStylesWithSingleColor } from './rewrite-styles';

package/lib/_utils/themes/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createStylesWithSingleColor = void 0;
+var rewrite_styles_1 = require("./rewrite-styles");
+Object.defineProperty(exports, "createStylesWithSingleColor", { enumerable: true, get: function () { return rewrite_styles_1.createStylesWithSingleColor; } });

package/lib/_utils/themes/rewrite-styles.d.ts

@@ -0,0 +1 @@
+export declare const createStylesWithSingleColor: (stylesToRewrite: string[], typesToRewrite: string[], color: string) => Record<string, string>;

package/lib/_utils/themes/rewrite-styles.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createStylesWithSingleColor = void 0;
+const createStylesWithSingleColor = (stylesToRewrite, typesToRewrite, color) => {
+    return stylesToRewrite.reduce((acc, curr) => {
+        typesToRewrite.forEach((type) => (acc[curr + type] = color));
+        return acc;
+    }, {});
+};
+exports.createStylesWithSingleColor = createStylesWithSingleColor;

package/lib/_utils/types/index.d.ts

@@ -0,0 +1 @@
+export * from './utility.types';

package/lib/_utils/types/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./utility.types"), exports);

package/lib/_utils/types/utility.types.d.ts

@@ -0,0 +1,10 @@
+import { MaybeArray } from '../vue';
+export type ExtractWithoutPostfix<T extends string, P extends string> = T extends `${infer U}${P}` ? ExtractWithoutPostfix<U, P> : T;
+export type MouseEventHandler = (e: MouseEvent) => void;
+export type KeyboardEventHandler = (e: KeyboardEvent) => void;
+export type EmptyEventHandler = () => void;
+export type FocusEventHandler = (e: FocusEvent) => void;
+export type ArrayMouseHandler = MaybeArray<MouseEventHandler>;
+export type ArrayEmptyHandler = MaybeArray<EmptyEventHandler>;
+export type ArrayKeyboardHandler = MaybeArray<KeyboardEventHandler>;
+export type ArrayFocusHandler = MaybeArray<FocusEventHandler>;

package/lib/{popconfirm/styles/_common.js → _utils/types/utility.types.js}

@@ -1,5 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    iconSize: '22px'
-};

package/lib/_utils/uzum/prop.d.ts

@@ -1,7 +1,7 @@
 export declare function largerSize(size: 'tiny' | 'small' | 'medium' | 'large'): 'small' | 'medium' | 'large' | 'huge';
 interface SmallerSizeMap {
-    tiny: 'mini';
-    small: 'tiny';
+    tiny: 'small';
+    small: 'small';
     medium: 'small';
     large: 'medium';
     huge: 'large';

package/lib/_utils/uzum/prop.js

@@ -17,9 +17,7 @@ exports.largerSize = largerSize;
 function smallerSize(size) {
     switch (size) {
         case 'tiny':
-            return 'mini';
         case 'small':
-            return 'tiny';
         case 'medium':
             return 'small';
         case 'large':