@canlooks/can-ui 0.0.8 → 0.0.9

package/dist/cjs/components/app/app.js

@@ -42,6 +42,7 @@ exports.App = (0, react_1.forwardRef)(({ component: Component = 'div', theme, ch
                             app_style_1.style,
                             (0, react_2.css) `
                                 font-size: ${themeValue.fontSize}px;
+                                font-family: ${themeValue.fontFamily};
                                 color: ${themeValue.text.primary};
                                 background-color: ${themeValue.background.body};
                             `,

package/dist/cjs/components/app/app.style.js

@@ -7,9 +7,6 @@ exports.classes = (0, utils_1.defineClasses)('app');
 exports.style = (0, react_1.css) `
     line-height: ${20 / 14};
     box-sizing: border-box;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji', 'Microsoft YaHei UI', sans-serif;
 
     * {
         box-sizing: border-box;

package/dist/cjs/components/app/theme.d.ts

@@ -52,6 +52,7 @@ export type ThemeEasings = {
 export type Theme = {
     mode: 'light' | 'dark';
     fontSize: number;
+    fontFamily: string;
     size: Size;
     borderRadius: number;
     /** 间隙大小，如内边距、外边距等，是控制界面整体紧凑程度的主要参数 */
@@ -75,5 +76,6 @@ export type PartialTheme = Partial<Omit<Theme, 'colors' | 'text' | 'background'
     background?: Partial<ThemeBackgroundColor>;
     easing?: Partial<ThemeEasings>;
 };
+export declare const defaultFontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji',\n    'Segoe UI Symbol', 'Noto Color Emoji', 'Microsoft YaHei UI', sans-serif";
 export declare const defaultLightTheme: Theme;
 export declare const defaultDarkTheme: PartialTheme;

package/dist/cjs/components/app/theme.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultDarkTheme = exports.defaultLightTheme = exports.breakpoints = exports.zIndex = exports.spacing = void 0;
+exports.defaultDarkTheme = exports.defaultLightTheme = exports.defaultFontFamily = exports.breakpoints = exports.zIndex = exports.spacing = void 0;
 exports.gray = gray;
 exports.rGray = rGray;
 const tslib_1 = require("tslib");
@@ -47,9 +47,13 @@ exports.breakpoints = {
     lg: 1200,
     xl: 1536
 };
+exports.defaultFontFamily = `-apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji', 'Microsoft YaHei UI', sans-serif`;
 exports.defaultLightTheme = {
     mode: 'light',
     fontSize: 14,
+    fontFamily: exports.defaultFontFamily,
     size: 'medium',
     borderRadius: 6,
     spacing: exports.spacing,

package/dist/cjs/components/dateTimePicker/dateTimePicker.style.js

@@ -23,13 +23,13 @@ exports.classes = (0, utils_1.defineClasses)('date-time-picker', [
     'calendarDays',
     'dateItem'
 ]);
-exports.style = (0, utils_1.defineCss)(({ text }) => (0, react_1.css) `
+exports.style = (0, utils_1.defineCss)(({ text, fontFamily }) => (0, react_1.css) `
     .${exports.classes.container} {
         display: flex;
         align-items: center;
 
         .${exports.classes.input} {
-            ${input_style_1.commonNativeInputStyle}
+            ${(0, input_style_1.commonNativeInputStyle)(fontFamily)}
         }
     
         .${exports.classes.dateTimeIcon} {

package/dist/cjs/components/input/input.style.d.ts

@@ -4,5 +4,5 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare const commonNativeInputStyle: import("@emotion/react").SerializedStyles;
-export declare const style: import("@emotion/react").SerializedStyles;
+export declare const commonNativeInputStyle: (fontFamily: string) => import("@emotion/react").SerializedStyles;
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/cjs/components/input/input.style.js

@@ -7,7 +7,7 @@ exports.classes = (0, utils_1.defineClasses)('input', [
     'input',
     'adaptable'
 ]);
-exports.commonNativeInputStyle = (0, react_1.css) `
+const commonNativeInputStyle = (fontFamily) => (0, react_1.css) `
     width: 100%;
     height: 22px;
     flex: 1;
@@ -16,22 +16,24 @@ exports.commonNativeInputStyle = (0, react_1.css) `
     padding: 0;
     background-color: transparent;
     font-size: 1em;
+    font-family: ${fontFamily};
 `;
-exports.style = (0, react_1.css) `
+exports.commonNativeInputStyle = commonNativeInputStyle;
+exports.style = (0, utils_1.defineCss)(({ fontFamily }) => (0, react_1.css) `
     position: relative;
 
     .${exports.classes.input} {
-        ${exports.commonNativeInputStyle}
-    
+        ${(0, exports.commonNativeInputStyle)(fontFamily)}
+
         &::-webkit-search-cancel-button {
             display: none;
         }
-    
+
         &::-ms-clear,
         &::-webkit-search-cancel-button {
             display: none;
         }
-    
+
         &::-webkit-inner-spin-button,
         &::-webkit-outer-spin-button {
             width: 12px;
@@ -50,4 +52,4 @@ exports.style = (0, react_1.css) `
         opacity: 0;
         pointer-events: none;
     }
-`;
+`);

package/dist/cjs/components/textarea/textarea.style.js

@@ -7,7 +7,7 @@ const inputBase_style_1 = require("../inputBase/inputBase.style");
 exports.classes = (0, utils_1.defineClasses)('textarea', [
     'textarea'
 ]);
-exports.style = (0, utils_1.defineCss)(({ spacing }) => (0, react_1.css) `
+exports.style = (0, utils_1.defineCss)(({ spacing, fontFamily }) => (0, react_1.css) `
     height: auto;
 
     &[data-size] {
@@ -22,6 +22,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing }) => (0, react_1.css) `
         font-size: 1em;
         padding: ${spacing[3]}px;
         display: block;
+        font-family: ${fontFamily};
     }
 
     &[data-full-width=true] {

package/dist/esm/components/app/app.js

@@ -38,6 +38,7 @@ export const App = forwardRef(({ component: Component = 'div', theme, children,
                             style,
                             css `
                                 font-size: ${themeValue.fontSize}px;
+                                font-family: ${themeValue.fontFamily};
                                 color: ${themeValue.text.primary};
                                 background-color: ${themeValue.background.body};
                             `,

package/dist/esm/components/app/app.style.js

@@ -4,9 +4,6 @@ export const classes = defineClasses('app');
 export const style = css `
     line-height: ${20 / 14};
     box-sizing: border-box;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji', 'Microsoft YaHei UI', sans-serif;
 
     * {
         box-sizing: border-box;

package/dist/esm/components/app/theme.d.ts

@@ -52,6 +52,7 @@ export type ThemeEasings = {
 export type Theme = {
     mode: 'light' | 'dark';
     fontSize: number;
+    fontFamily: string;
     size: Size;
     borderRadius: number;
     /** 间隙大小，如内边距、外边距等，是控制界面整体紧凑程度的主要参数 */
@@ -75,5 +76,6 @@ export type PartialTheme = Partial<Omit<Theme, 'colors' | 'text' | 'background'
     background?: Partial<ThemeBackgroundColor>;
     easing?: Partial<ThemeEasings>;
 };
+export declare const defaultFontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji',\n    'Segoe UI Symbol', 'Noto Color Emoji', 'Microsoft YaHei UI', sans-serif";
 export declare const defaultLightTheme: Theme;
 export declare const defaultDarkTheme: PartialTheme;

package/dist/esm/components/app/theme.js

@@ -40,9 +40,13 @@ export const breakpoints = {
     lg: 1200,
     xl: 1536
 };
+export const defaultFontFamily = `-apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji', 'Microsoft YaHei UI', sans-serif`;
 export const defaultLightTheme = {
     mode: 'light',
     fontSize: 14,
+    fontFamily: defaultFontFamily,
     size: 'medium',
     borderRadius: 6,
     spacing,

package/dist/esm/components/dateTimePicker/dateTimePicker.style.js

@@ -20,13 +20,13 @@ export const classes = defineClasses('date-time-picker', [
     'calendarDays',
     'dateItem'
 ]);
-export const style = defineCss(({ text }) => css `
+export const style = defineCss(({ text, fontFamily }) => css `
     .${classes.container} {
         display: flex;
         align-items: center;
 
         .${classes.input} {
-            ${commonNativeInputStyle}
+            ${commonNativeInputStyle(fontFamily)}
         }
     
         .${classes.dateTimeIcon} {

package/dist/esm/components/input/input.style.d.ts

@@ -4,5 +4,5 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare const commonNativeInputStyle: import("@emotion/react").SerializedStyles;
-export declare const style: import("@emotion/react").SerializedStyles;
+export declare const commonNativeInputStyle: (fontFamily: string) => import("@emotion/react").SerializedStyles;
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/esm/components/input/input.style.js

@@ -1,10 +1,10 @@
 import { css } from '@emotion/react';
-import { defineClasses } from '../../utils';
+import { defineClasses, defineCss } from '../../utils';
 export const classes = defineClasses('input', [
     'input',
     'adaptable'
 ]);
-export const commonNativeInputStyle = css `
+export const commonNativeInputStyle = (fontFamily) => css `
     width: 100%;
     height: 22px;
     flex: 1;
@@ -13,22 +13,23 @@ export const commonNativeInputStyle = css `
     padding: 0;
     background-color: transparent;
     font-size: 1em;
+    font-family: ${fontFamily};
 `;
-export const style = css `
+export const style = defineCss(({ fontFamily }) => css `
     position: relative;
 
     .${classes.input} {
-        ${commonNativeInputStyle}
-    
+        ${commonNativeInputStyle(fontFamily)}
+
         &::-webkit-search-cancel-button {
             display: none;
         }
-    
+
         &::-ms-clear,
         &::-webkit-search-cancel-button {
             display: none;
         }
-    
+
         &::-webkit-inner-spin-button,
         &::-webkit-outer-spin-button {
             width: 12px;
@@ -47,4 +48,4 @@ export const style = css `
         opacity: 0;
         pointer-events: none;
     }
-`;
+`);

package/dist/esm/components/textarea/textarea.style.js

@@ -4,7 +4,7 @@ import { classes as inputBaseClasses } from '../inputBase/inputBase.style';
 export const classes = defineClasses('textarea', [
     'textarea'
 ]);
-export const style = defineCss(({ spacing }) => css `
+export const style = defineCss(({ spacing, fontFamily }) => css `
     height: auto;
 
     &[data-size] {
@@ -19,6 +19,7 @@ export const style = defineCss(({ spacing }) => css `
         font-size: 1em;
         padding: ${spacing[3]}px;
         display: block;
+        font-family: ${fontFamily};
     }
 
     &[data-full-width=true] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",