@canlooks/can-ui 0.0.21 → 0.0.23

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

@@ -1,142 +0,0 @@
-import Color from 'color';
-/**
- * 获取不同程度的灰色
- * @param amount 0 至 1，数值越小越靠近背景颜色，数值越大越靠近文字颜色（mode改变后数组会倒转）
- */
-export function gray(amount) {
-    return rGray(1 - amount);
-}
-export function rGray(amount) {
-    return Color(`hsl(0, 0%, ${amount * 100}%)`, 'hsl').hex();
-}
-/**
- * ---------------------------------------------------------------------
- * 以3的倍数统一处理间距
- */
-export const spacing = (amount) => amount * 3;
-spacing[0] = spacing(0);
-spacing[1] = spacing(1);
-spacing[2] = spacing(2);
-spacing[3] = spacing(3);
-spacing[4] = spacing(4);
-spacing[5] = spacing(5);
-spacing[6] = spacing(6);
-spacing[7] = spacing(7);
-spacing[8] = spacing(8);
-spacing[9] = spacing(9);
-spacing[10] = spacing(10);
-export const zIndex = {
-    overlay: 1000,
-    popper: 1100,
-    bubbleConfirm: 1200,
-    dropdown: 1300,
-    snackbar: 1400,
-    tooltip: 1500
-};
-export const breakpoints = {
-    xs: 0,
-    sm: 600,
-    md: 900,
-    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,
-    gap: spacing[6],
-    get gray() {
-        return gray;
-    },
-    /** divider: gray(.15), */
-    divider: '#d9d9d9',
-    colors: {
-        primary: '#1e71ec',
-        secondary: '#925CC1',
-        success: '#13C13C',
-        warning: '#ED9121',
-        error: '#DD3F3F',
-        info: '#52AEDF'
-    },
-    text: {
-        /* primary: gray(1), */
-        primary: '#000000',
-        /* secondary: gray(.6), */
-        secondary: '#666666',
-        /* disabled: gray(.4), */
-        disabled: '#999999',
-        /* placeholder: gray(.3), */
-        placeholder: '#b3b3b3',
-        /* inverse: gray(0) */
-        inverse: '#ffffff'
-    },
-    background: {
-        card: '#ffffff',
-        /* body: gray(.04), */
-        body: '#f5f5f5',
-        fixed: 'rgba(0, 0, 0, .02)'
-    },
-    boxShadow: [
-        /* 通常用于弹框，气泡等 */
-        '3px 6px 18px rgba(0, 0, 0, .2)',
-        /* 通常用于抽屉等 */
-        '0 0 24px rgba(0, 0, 0, .2)',
-        '1px 2px 3px rgba(0, 0, 0, .2)',
-        '2px 4px 6px rgba(0, 0, 0, .2)',
-        '3px 6px 9px rgba(0, 0, 0, .2)',
-        '3px 6px 18px rgba(0, 0, 0, .2)',
-        '4px 8px 24px rgba(0, 0, 0, .2)'
-    ],
-    easing: {
-        linear: 'linear',
-        ease: 'ease',
-        easeIn: 'cubic-bezier(.3, 0, .6, 0)',
-        easeOut: 'cubic-bezier(.4, 1, .7, 1)',
-        easeInOut: 'ease-in-out',
-        bounce: 'cubic-bezier(.5, 2, .5, .7)',
-        swing: 'cubic-bezier(.5, 3, .5, .1)'
-    },
-    _isTop: true,
-    update: () => { }
-};
-export const defaultDarkTheme = {
-    mode: 'dark',
-    background: {
-        /* body: rGray(.15), */
-        body: '#252525',
-        /* card: rGray(.2), */
-        card: '#333333',
-        fixed: 'rgba(255, 255, 255, .06)'
-    },
-    get gray() {
-        return rGray;
-    },
-    /* divider: rGray(.36), */
-    divider: '#5c5c5c',
-    colors: {
-        /* primary: Color('#1e71ec').lighten(.1).hex(), */
-        primary: '#3780ee',
-        /* success: Color('#13C13C').lighten(.06).hex(), */
-        success: '#14cd40',
-        /* error: Color('#DD3F3F').lighten(.06).hex(), */
-        error: '#E04D4D'
-    },
-    text: {
-        /* primary: rGray(1), */
-        primary: '#ffffff',
-        /* secondary: rGray(.7), */
-        secondary: '#b3b3b3',
-        /* disabled: rGray(.5), */
-        disabled: '#808080',
-        /* placeholder: rGray(.45), */
-        placeholder: '#737373',
-        /* inverse: rGray(0) */
-        inverse: '#000000'
-    }
-};

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

@@ -1,9 +0,0 @@
-import { ReactNode } from 'react';
-import { PartialTheme, Theme } from './theme';
-export declare const themeContext: import("react").Context<Theme>;
-export declare function useTheme(): Theme;
-export declare function useThemeProvider(theme?: PartialTheme): Theme;
-export declare function ThemeProvider(props: {
-    theme?: PartialTheme;
-    children?: ReactNode;
-}): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,23 +0,0 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { createContext, useContext, useState } from 'react';
-import { defaultDarkTheme, defaultLightTheme } from './theme';
-import { mergeDeep } from '../../utils';
-export const themeContext = createContext(defaultLightTheme);
-export function useTheme() {
-    return useContext(themeContext);
-}
-export function useThemeProvider(theme) {
-    const defaultTheme = useTheme();
-    const mergeTheme = (theme) => {
-        const newTheme = typeof theme === 'function' ? theme(themeValue) : theme;
-        return mergeDeep({}, defaultTheme, newTheme?.mode === 'dark' && defaultDarkTheme, newTheme);
-    };
-    const [themeValue, setThemeValue] = useState(() => mergeTheme(theme));
-    themeValue.update = theme => {
-        setThemeValue(mergeTheme(theme));
-    };
-    return themeValue;
-}
-export function ThemeProvider(props) {
-    return (_jsx(themeContext.Provider, { value: useThemeProvider(props.theme), children: props.children }));
-}

package/dist/types/index.d.ts

@@ -1,50 +0,0 @@
-import {ComponentType, DetailedHTMLProps, HTMLAttributes, Ref} from 'react'
-
-export type Id = string | number
-
-export type Obj<T = any> = {[p: Id]: T}
-
-export type ThemeEasingName = 'linear' | 'ease' | 'easeIn' | 'easeOut' | 'easeInOut' | 'bounce' | 'swing'
-
-export type Status = 'success' | 'error' | 'warning' | 'info'
-
-export type ColorPresets = 'primary' | 'secondary' | Status
-
-export type ColorPropsValue = ColorPresets | 'text' | 'disabled' | 'placeholder' | 'inverse' | 'divider' | string
-
-export type TextColorPresets = 'primary' | 'secondary' | 'disabled' | 'placeholder' | 'inverse'
-
-export type Size = 'small' | 'medium' | 'large'
-
-export type CornerPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom'
-
-export type BlockPlacement = CornerPlacement | 'top' | 'bottom'
-
-export type Placement = BlockPlacement | 'left' | 'right'
-
-export type DefineElement<T = Element | null | undefined> = T | (() => T)
-
-export type Breakpoints =
-    | 'xs'
-    | 'sm'
-    | 'md'
-    | 'lg'
-    | 'xl'
-
-export type ResponsiveValue<T = number> = {
-    [P in Breakpoints]?: T
-}
-
-export type ResponsiveProp<T = number> = T | ResponsiveValue<T>
-
-export type DOMProps<T extends Element> = Omit<DetailedHTMLProps<HTMLAttributes<T>, T>, 'ref'> & {ref?: Ref<T>}
-
-export type DIVProps = DOMProps<HTMLDivElement>
-
-export type OverridableProps<T> = {
-    component?: T
-} & (
-        T extends ComponentType<infer P> ? P
-        : T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T]
-        : {}
-    )

package/tscup.config.ts

@@ -1,7 +0,0 @@
-import {defineConfig} from '@canlooks/tscup'
-
-export default defineConfig({
-    format: ['cjs', 'esm'],
-    clean: true,
-    copyDir: 'types'
-})

package/types/index.d.ts

@@ -1,50 +0,0 @@
-import {ComponentType, DetailedHTMLProps, HTMLAttributes, Ref} from 'react'
-
-export type Id = string | number
-
-export type Obj<T = any> = {[p: Id]: T}
-
-export type ThemeEasingName = 'linear' | 'ease' | 'easeIn' | 'easeOut' | 'easeInOut' | 'bounce' | 'swing'
-
-export type Status = 'success' | 'error' | 'warning' | 'info'
-
-export type ColorPresets = 'primary' | 'secondary' | Status
-
-export type ColorPropsValue = ColorPresets | 'text' | 'disabled' | 'placeholder' | 'inverse' | 'divider' | string
-
-export type TextColorPresets = 'primary' | 'secondary' | 'disabled' | 'placeholder' | 'inverse'
-
-export type Size = 'small' | 'medium' | 'large'
-
-export type CornerPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom'
-
-export type BlockPlacement = CornerPlacement | 'top' | 'bottom'
-
-export type Placement = BlockPlacement | 'left' | 'right'
-
-export type DefineElement<T = Element | null | undefined> = T | (() => T)
-
-export type Breakpoints =
-    | 'xs'
-    | 'sm'
-    | 'md'
-    | 'lg'
-    | 'xl'
-
-export type ResponsiveValue<T = number> = {
-    [P in Breakpoints]?: T
-}
-
-export type ResponsiveProp<T = number> = T | ResponsiveValue<T>
-
-export type DOMProps<T extends Element> = Omit<DetailedHTMLProps<HTMLAttributes<T>, T>, 'ref'> & {ref?: Ref<T>}
-
-export type DIVProps = DOMProps<HTMLDivElement>
-
-export type OverridableProps<T> = {
-    component?: T
-} & (
-        T extends ComponentType<infer P> ? P
-        : T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T]
-        : {}
-    )