@officesdk/design 0.1.26 → 0.1.28

package/dist/theme/cjs/index.d.ts

@@ -3,7 +3,38 @@ import { CommonThemeConfig } from '@officesdk/editor-sdk-core/shared';
 type Theme$1 = CommonThemeConfig;
 declare const lightTheme: Theme$1;
 
+interface ModalVariantSize {
+    maxWidth: string;
+    minWidth: string;
+    maxHeight: string;
+    minHeight: string;
+    defaultWidth: string;
+}
+interface ModalBaseConfig {
+    background: string;
+    border: string;
+    borderRadius: string;
+    shadow: string;
+    maskLight: string;
+    maskDark: string;
+    maskZIndex: number;
+    titleColor: string;
+    titleFontSize: string;
+    titleFontWeight: number;
+    titleLineHeight: string;
+    bodyColor: string;
+    bodyFontSize: string;
+    bodyLineHeight: string;
+    padding: string;
+    closeButtonHoverBackground: string;
+    closeButtonActiveBackground: string;
+}
+interface ModalConfig {
+    message: ModalBaseConfig & ModalVariantSize;
+    functional: ModalVariantSize;
+}
+
 type Theme = CommonThemeConfig;
 declare const theme: Theme;
 
-export { type Theme, lightTheme, theme };
+export { type ModalBaseConfig, type ModalConfig, type ModalVariantSize, type Theme, lightTheme, theme };

package/dist/theme/cjs/index.js

@@ -428,7 +428,7 @@ var button = {
       borderColorHover: "transparent",
       borderColorActive: "transparent",
       borderColorDisabled: "transparent",
-      fontWeight: 500,
+      fontWeight: 400,
       colorHover: colors.palettes.brand,
       colorActive: colors.palettes.brand,
       colorDisabled: colors.palettes.transparency["30"]
@@ -447,7 +447,7 @@ var button = {
       borderColorHover: "transparent",
       borderColorActive: "transparent",
       borderColorDisabled: "transparent",
-      fontWeight: 500,
+      fontWeight: 400,
       colorHover: colors.palettes.blue["6"],
       colorActive: colors.palettes.blue["6"],
       colorDisabled: colors.palettes.transparency["30"]
@@ -466,7 +466,7 @@ var button = {
       borderColorHover: "transparent",
       borderColorActive: "transparent",
       borderColorDisabled: "transparent",
-      fontWeight: 500,
+      fontWeight: 400,
       colorHover: colors.palettes.red["6"],
       colorActive: colors.palettes.red["6"],
       colorDisabled: colors.palettes.transparency["30"]
@@ -485,7 +485,7 @@ var button = {
       borderColorHover: "transparent",
       borderColorActive: "transparent",
       borderColorDisabled: "transparent",
-      fontWeight: 500,
+      fontWeight: 400,
       colorHover: colors.palettes.blue["6"],
       colorActive: colors.palettes.blue["6"],
       colorDisabled: colors.palettes.transparency["60"]
@@ -547,7 +547,7 @@ var button = {
       height: "40px",
       padding: "0px 26px",
       textPadding: "0px 6px",
-      fontSize: "14px",
+      fontSize: "16px",
       lineHeight: "24px",
       borderRadius: borderRadius.small,
       iconSize: { width: "16px", height: "16px" },
@@ -1002,7 +1002,7 @@ var tab = {
       backgroundDisabled: "transparent",
       borderColor: "transparent",
       borderColorHover: "transparent",
-      borderColorActive: colors.palettes.transparency["10"],
+      borderColorActive: colors.palettes.transparency["20"],
       borderColorDisabled: "transparent",
       color: colors.palettes.transparency["60"],
       colorHover: colors.palettes.brand,
@@ -1011,15 +1011,16 @@ var tab = {
     },
     layout: {
       gap: "0"
-    }
+    },
+    backgroundColor: colors.palettes.gray["8"]
   },
   large: {
-    height: "40px",
+    height: "32px",
     padding: "10px 16px",
     fontSize: "14px",
     lineHeight: "20px",
     borderRadius: "4px",
-    fontWeight: 500
+    fontWeight: 400
   }
 };
 
@@ -1394,6 +1395,41 @@ var dropdownButton = {
   }
 };
 
+// src/light/components/modal.ts
+var modal = {
+  message: {
+    background: colors.palettes.gray["0"],
+    border: `1px solid ${colors.palettes.transparency["5"]}`,
+    borderRadius: borderRadius.medium,
+    shadow: boxShadow.xl,
+    maskLight: colors.mask.light,
+    maskDark: colors.mask.dark,
+    maskZIndex: 1e3,
+    titleColor: colors.palettes.gray["120"],
+    titleFontSize: typography.title.fontSize.l,
+    titleFontWeight: typography.title.fontWeight.semibold,
+    titleLineHeight: typography.title.lineHeight.medium,
+    bodyColor: colors.palettes.gray["120"],
+    bodyFontSize: typography.paragraph.fontSize.m,
+    bodyLineHeight: typography.paragraph.lineHeight.medium,
+    padding: "24px",
+    closeButtonHoverBackground: colors.palettes.transparency["5"],
+    closeButtonActiveBackground: colors.palettes.transparency["10"],
+    maxWidth: "400px",
+    minWidth: "360px",
+    maxHeight: "50vh",
+    minHeight: "172px",
+    defaultWidth: "400px"
+  },
+  functional: {
+    maxWidth: "800px",
+    minWidth: "400px",
+    maxHeight: "80vh",
+    minHeight: "380px",
+    defaultWidth: "640px"
+  }
+};
+
 // src/light/components/index.ts
 var components = {
   toast,
@@ -1410,7 +1446,8 @@ var components = {
   tooltip,
   toolbarButton,
   menu,
-  dropdownButton
+  dropdownButton,
+  modal
 };
 
 // src/light/index.ts