naive-ui 2.19.10 → 2.19.11

package/lib/_mixins/use-rtl.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const css_render_1 = require("css-render");
+const vue3_ssr_1 = require("@css-render/vue3-ssr");
+function useRtl(mountId, rtlStateRef, clsPrefixRef) {
+    if (!rtlStateRef)
+        return undefined;
+    const ssrAdapter = (0, vue3_ssr_1.useSsrAdapter)();
+    const componentRtlStateRef = (0, vue_1.computed)(() => {
+        const { value: rtlState } = rtlStateRef;
+        if (!rtlState) {
+            return undefined;
+        }
+        const componentRtlState = rtlState[mountId];
+        if (!componentRtlState) {
+            return undefined;
+        }
+        return componentRtlState;
+    });
+    const mountStyle = () => {
+        (0, vue_1.watchEffect)(() => {
+            const { value: clsPrefix } = clsPrefixRef;
+            const id = `${clsPrefix}${mountId}Rtl`;
+            // if it already exists, we only need to watch clsPrefix, although in most
+            // of time it's unnecessary... However we can at least listen less
+            // handlers, which is great.
+            if ((0, css_render_1.exists)(id, ssrAdapter))
+                return;
+            const { value: componentRtlState } = componentRtlStateRef;
+            if (!componentRtlState)
+                return;
+            componentRtlState.style.mount({
+                id,
+                head: true,
+                props: {
+                    bPrefix: clsPrefix ? `.${clsPrefix}-` : undefined
+                },
+                ssr: ssrAdapter
+            });
+        });
+    };
+    if (ssrAdapter) {
+        mountStyle();
+    }
+    else {
+        (0, vue_1.onBeforeMount)(mountStyle);
+    }
+    return componentRtlStateRef;
+}
+exports.default = useRtl;

package/lib/_mixins/use-style.d.ts

@@ -0,0 +1,3 @@
+import { CNode } from 'css-render';
+import { Ref } from 'vue';
+export default function useStyle(mountId: string, style: CNode, clsPrefixRef?: Ref<string | undefined>): void;

package/lib/_mixins/use-style.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const vue3_ssr_1 = require("@css-render/vue3-ssr");
+const index_cssr_1 = require("../_styles/global/index.cssr");
+const _utils_1 = require("../_utils");
+function useStyle(mountId, style, clsPrefixRef) {
+    if (!style) {
+        if (process.env.NODE_ENV !== 'production')
+            (0, _utils_1.throwError)('use-style', 'No style is specified.');
+        return;
+    }
+    const ssrAdapter = (0, vue3_ssr_1.useSsrAdapter)();
+    const mountStyle = () => {
+        const clsPrefix = clsPrefixRef === null || clsPrefixRef === void 0 ? void 0 : clsPrefixRef.value;
+        style.mount({
+            id: clsPrefix === undefined ? mountId : clsPrefix + mountId,
+            head: true,
+            props: {
+                bPrefix: clsPrefix ? `.${clsPrefix}-` : undefined
+            },
+            ssr: ssrAdapter
+        });
+        index_cssr_1.default.mount({
+            id: 'naive-ui/global',
+            head: true,
+            ssr: ssrAdapter
+        });
+    };
+    if (ssrAdapter) {
+        mountStyle();
+    }
+    else {
+        (0, vue_1.onBeforeMount)(mountStyle);
+    }
+}
+exports.default = useStyle;

package/lib/_mixins/use-theme.d.ts

@@ -0,0 +1,94 @@
+import { ComputedRef, Ref, PropType } from 'vue';
+import { CNode } from 'css-render';
+import type { GlobalTheme } from '../config-provider';
+import type { ThemeCommonVars } from '../_styles/common';
+export interface Theme<N, T = {}, R = any> {
+    name: N;
+    common?: ThemeCommonVars;
+    peers?: R;
+    self?: (vars: ThemeCommonVars) => T;
+}
+export interface ThemeProps<T> {
+    theme: PropType<T>;
+    themeOverrides: PropType<ExtractThemeOverrides<T>>;
+    builtinThemeOverrides: PropType<ExtractThemeOverrides<T>>;
+}
+export interface ThemePropsReactive<T> {
+    theme?: T;
+    themeOverrides?: ExtractThemeOverrides<T>;
+    builtinThemeOverrides?: ExtractThemeOverrides<T>;
+}
+export declare type ExtractThemeVars<T> = T extends Theme<unknown, infer U, unknown> ? unknown extends U ? {} : U : {};
+export declare type ExtractPeerOverrides<T> = T extends Theme<unknown, unknown, infer V> ? {
+    peers?: {
+        [k in keyof V]?: ExtractThemeOverrides<V[k]>;
+    };
+} : T;
+export declare type ExtractMergedPeerOverrides<T> = T extends Theme<unknown, unknown, infer V> ? {
+    [k in keyof V]?: ExtractPeerOverrides<V[k]>;
+} : T;
+export declare type ExtractThemeOverrides<T> = Partial<ExtractThemeVars<T>> & ExtractPeerOverrides<T> & {
+    common?: ThemeCommonVars;
+};
+export declare function createTheme<N extends string, T, R>(theme: Theme<N, T, R>): Theme<N, T, R>;
+declare type UseThemeProps<T> = Readonly<{
+    theme?: T | undefined;
+    themeOverrides?: ExtractThemeOverrides<T>;
+    builtinThemeOverrides?: ExtractThemeOverrides<T>;
+}>;
+export declare type MergedTheme<T> = T extends Theme<unknown, infer V, infer W> ? {
+    common: ThemeCommonVars;
+    self: V;
+    peers: W;
+    peerOverrides: ExtractMergedPeerOverrides<T>;
+} : T;
+declare function useTheme<N, T, R>(resolveId: Exclude<keyof GlobalTheme, 'common'>, mountId: string, style: CNode | undefined, defaultTheme: Theme<N, T, R>, props: UseThemeProps<Theme<N, T, R>>, clsPrefixRef?: Ref<string | undefined>): ComputedRef<MergedTheme<Theme<N, T, R>>>;
+declare namespace useTheme {
+    var props: {
+        readonly theme: ObjectConstructor;
+        readonly themeOverrides: ObjectConstructor;
+        readonly builtinThemeOverrides: ObjectConstructor;
+    };
+}
+/**
+ * props.theme (Theme):
+ * {
+ *   common: CommonThemeVars,
+ *   self(): ThemeVars,
+ *   peers: { Component: Theme }
+ * }
+ * provider.theme:
+ * {
+ *   common: CommonThemeVars,
+ *   Button: Theme
+ *   ...
+ * }
+ * defaultTheme:
+ * {
+ *   common: CommonThemeVars,
+ *   self(): ThemeVars,
+ *   peers: { Component: Theme }
+ * }
+ *
+ * props.themeOverrides (ThemeOverrides):
+ * {
+ *   common: CommonThemeVars,
+ *   peers: { Component: ThemeOverrides },
+ *   ...ThemeVars
+ * }
+ * provider.themeOverrides:
+ * {
+ *   common: CommonThemeVars,
+ *   Component: ThemeOverrides
+ *   ...
+ * }
+ *
+ * mergedTheme:
+ * {
+ *   common: CommonThemeVars,
+ *   self: ThemeVars,
+ *   peers: { Component: Theme },
+ *   overrides: { Component: ThemeOverrides }
+ * }
+ */
+export default useTheme;

package/lib/_mixins/use-theme.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTheme = void 0;
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+const vue_1 = require("vue");
+const lodash_1 = require("lodash");
+const vue3_ssr_1 = require("@css-render/vue3-ssr");
+const index_cssr_1 = require("../_styles/global/index.cssr");
+const ConfigProvider_1 = require("../config-provider/src/ConfigProvider");
+function createTheme(theme) {
+    return theme;
+}
+exports.createTheme = createTheme;
+function useTheme(resolveId, mountId, style, defaultTheme, props, clsPrefixRef) {
+    const ssrAdapter = (0, vue3_ssr_1.useSsrAdapter)();
+    if (style) {
+        const mountStyle = () => {
+            const clsPrefix = clsPrefixRef === null || clsPrefixRef === void 0 ? void 0 : clsPrefixRef.value;
+            style.mount({
+                id: clsPrefix === undefined ? mountId : clsPrefix + mountId,
+                head: true,
+                props: {
+                    bPrefix: clsPrefix ? `.${clsPrefix}-` : undefined
+                },
+                ssr: ssrAdapter
+            });
+            index_cssr_1.default.mount({
+                id: 'naive-ui/global',
+                head: true,
+                ssr: ssrAdapter
+            });
+        };
+        if (ssrAdapter) {
+            mountStyle();
+        }
+        else {
+            (0, vue_1.onBeforeMount)(mountStyle);
+        }
+    }
+    const NConfigProvider = (0, vue_1.inject)(ConfigProvider_1.configProviderInjectionKey, null);
+    const mergedThemeRef = (0, vue_1.computed)(() => {
+        var _a;
+        // keep props to make theme overrideable
+        const { theme: { common: selfCommon, self, peers = {} } = {}, themeOverrides: selfOverrides = {}, builtinThemeOverrides: builtinOverrides = {} } = props;
+        const { common: selfCommonOverrides, peers: peersOverrides } = selfOverrides;
+        const { common: globalCommon = undefined, [resolveId]: { common: globalSelfCommon = undefined, self: globalSelf = undefined, peers: globalPeers = {} } = {} } = (NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedThemeRef.value) || {};
+        const { common: globalCommonOverrides = undefined, [resolveId]: globalSelfOverrides = {} } = (NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedThemeOverridesRef.value) || {};
+        const { common: globalSelfCommonOverrides, peers: globalPeersOverrides = {} } = globalSelfOverrides;
+        const mergedCommon = (0, lodash_1.merge)({}, selfCommon || globalSelfCommon || globalCommon || defaultTheme.common, globalCommonOverrides, globalSelfCommonOverrides, selfCommonOverrides);
+        const mergedSelf = (0, lodash_1.merge)(
+        // {}, executed every time, no need for empty obj
+        (_a = (self || globalSelf || defaultTheme.self)) === null || _a === void 0 ? void 0 : _a(mergedCommon), builtinOverrides, globalSelfOverrides, selfOverrides);
+        return {
+            common: mergedCommon,
+            self: mergedSelf,
+            peers: (0, lodash_1.merge)({}, defaultTheme.peers, globalPeers, peers),
+            peerOverrides: (0, lodash_1.merge)({}, globalPeersOverrides, peersOverrides)
+        };
+    });
+    return mergedThemeRef;
+}
+useTheme.props = {
+    theme: Object,
+    themeOverrides: Object,
+    builtinThemeOverrides: Object
+};
+/**
+ * props.theme (Theme):
+ * {
+ *   common: CommonThemeVars,
+ *   self(): ThemeVars,
+ *   peers: { Component: Theme }
+ * }
+ * provider.theme:
+ * {
+ *   common: CommonThemeVars,
+ *   Button: Theme
+ *   ...
+ * }
+ * defaultTheme:
+ * {
+ *   common: CommonThemeVars,
+ *   self(): ThemeVars,
+ *   peers: { Component: Theme }
+ * }
+ *
+ * props.themeOverrides (ThemeOverrides):
+ * {
+ *   common: CommonThemeVars,
+ *   peers: { Component: ThemeOverrides },
+ *   ...ThemeVars
+ * }
+ * provider.themeOverrides:
+ * {
+ *   common: CommonThemeVars,
+ *   Component: ThemeOverrides
+ *   ...
+ * }
+ *
+ * mergedTheme:
+ * {
+ *   common: CommonThemeVars,
+ *   self: ThemeVars,
+ *   peers: { Component: Theme },
+ *   overrides: { Component: ThemeOverrides }
+ * }
+ */
+exports.default = useTheme;

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

@@ -0,0 +1,25 @@
+declare const _default: {
+    fontFamily: string;
+    fontFamilyMono: string;
+    fontWeight: string;
+    fontWeightStrong: string;
+    cubicBezierEaseInOut: string;
+    cubicBezierEaseOut: string;
+    cubicBezierEaseIn: string;
+    borderRadius: string;
+    borderRadiusSmall: string;
+    fontSize: string;
+    fontSizeTiny: string;
+    fontSizeSmall: string;
+    fontSizeMedium: string;
+    fontSizeLarge: string;
+    fontSizeHuge: string;
+    lineHeight: string;
+    heightTiny: string;
+    heightSmall: string;
+    heightMedium: string;
+    heightLarge: string;
+    heightHuge: string;
+    transformDebounceScale: string;
+};
+export default _default;

package/lib/_styles/common/_common.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    fontFamily: 'v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    fontFamilyMono: 'v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace',
+    fontWeight: '400',
+    fontWeightStrong: '500',
+    cubicBezierEaseInOut: 'cubic-bezier(.4, 0, .2, 1)',
+    cubicBezierEaseOut: 'cubic-bezier(0, 0, .2, 1)',
+    cubicBezierEaseIn: 'cubic-bezier(.4, 0, 1, 1)',
+    borderRadius: '3px',
+    borderRadiusSmall: '2px',
+    fontSize: '14px',
+    fontSizeTiny: '12px',
+    fontSizeSmall: '14px',
+    fontSizeMedium: '14px',
+    fontSizeLarge: '15px',
+    fontSizeHuge: '16px',
+    lineHeight: '1.6',
+    heightTiny: '22px',
+    heightSmall: '28px',
+    heightMedium: '34px',
+    heightLarge: '40px',
+    heightHuge: '46px',
+    transformDebounceScale: 'scale(1)'
+};

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

@@ -0,0 +1,3 @@
+import type { ThemeCommonVars } from './light';
+declare const derived: ThemeCommonVars;
+export default derived;

package/lib/_styles/common/dark.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const seemly_1 = require("seemly");
+const _common_1 = 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',
+    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',
+    // 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)'
+};
+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, 
+    // text color
+    textColorBase: base.neutralTextBase, textColor1: overlay(base.alpha1), textColor2: overlay(base.alpha2), textColor3: overlay(base.alpha3), 
+    // textColor4: overlay(base.alpha4), // disabled, placeholder, icon
+    // textColor5: overlay(base.alpha5),
+    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), 
+    // close
+    closeColorHover: overlay(Number(base.alphaClose) * 1.25), closeColor: overlay(Number(base.alphaClose)), closeColorPressed: overlay(Number(base.alphaClose) * 0.8), closeColorDisabled: overlay(base.alpha4), 
+    // 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), invertedColor: base.neutralBase, 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), pressedColor: overlay(base.alphaPressed), opacityDisabled: base.alphaDisabled, inputColorDisabled: overlay(base.alphaDisabledInput), 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)' });
+exports.default = derived;

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

@@ -0,0 +1,3 @@
+export { default as commonDark } from './dark';
+export { default as commonLight } from './light';
+export type { ThemeCommonVars } from './light';

package/lib/_styles/common/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.commonLight = exports.commonDark = void 0;
+var dark_1 = require("./dark");
+Object.defineProperty(exports, "commonDark", { enumerable: true, get: function () { return dark_1.default; } });
+var light_1 = require("./light");
+Object.defineProperty(exports, "commonLight", { enumerable: true, get: function () { return light_1.default; } });

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

@@ -0,0 +1,101 @@
+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;
+    textColorBase: string;
+    textColor1: string;
+    textColor2: string;
+    textColor3: 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;
+    closeColor: string;
+    closeColorHover: string;
+    closeColorPressed: string;
+    closeColorDisabled: 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;
+    invertedColor: string;
+    inputColor: string;
+    codeColor: string;
+    tabColor: string;
+    actionColor: string;
+    tableHeaderColor: string;
+    hoverColor: string;
+    tableColorHover: string;
+    pressedColor: string;
+    opacityDisabled: string;
+    inputColorDisabled: string;
+    boxShadow1: string;
+    boxShadow2: string;
+    boxShadow3: string;
+    fontFamily: string;
+    fontFamilyMono: string;
+    fontWeight: string;
+    fontWeightStrong: string;
+    cubicBezierEaseInOut: string;
+    cubicBezierEaseOut: string;
+    cubicBezierEaseIn: string;
+    borderRadius: string;
+    borderRadiusSmall: string;
+    fontSize: string;
+    fontSizeTiny: string;
+    fontSizeSmall: string;
+    fontSizeMedium: string;
+    fontSizeLarge: string;
+    fontSizeHuge: string;
+    lineHeight: string;
+    heightTiny: string;
+    heightSmall: string;
+    heightMedium: string;
+    heightLarge: string;
+    heightHuge: string;
+    transformDebounceScale: string;
+    name: "common";
+};
+export default derived;
+export declare type ThemeCommonVars = typeof derived;

package/lib/_styles/common/light.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const seemly_1 = require("seemly");
+const _common_1 = require("./_common");
+const base = {
+    neutralBase: '#FFF',
+    neutralInvertBase: '#000',
+    neutralTextBase: '#000',
+    neutralPopover: '#fff',
+    neutralCard: '#fff',
+    neutralModal: '#fff',
+    neutralBody: '#fff',
+    alpha1: '0.82',
+    alpha2: '0.72',
+    alpha3: '0.38',
+    alpha4: '0.24',
+    alpha5: '0.18',
+    alphaClose: '0.52',
+    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: '#36ad6a',
+    primaryDefault: '#18a058',
+    primaryActive: '#0c7a43',
+    primarySuppl: '#36ad6a',
+    // info
+    infoHover: '#4098fc',
+    infoDefault: '#2080f0',
+    infoActive: '#1060c9',
+    infoSuppl: '#4098fc',
+    // error
+    errorHover: '#de576d',
+    errorDefault: '#d03050',
+    errorActive: '#ab1f3f',
+    errorSuppl: '#de576d',
+    // warning
+    warningHover: '#fcb040',
+    warningDefault: '#f0a020',
+    warningActive: '#c97c10',
+    warningSuppl: '#fcb040',
+    // success
+    successHover: '#36ad6a',
+    successDefault: '#18a058',
+    successActive: '#0c7a43',
+    successSuppl: '#36ad6a'
+};
+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, 
+    // text color
+    textColorBase: base.neutralTextBase, textColor1: 'rgb(31, 34, 37)', textColor2: 'rgb(51, 54, 57)', textColor3: 'rgb(158, 164, 170)', 
+    // textColor4: neutral(base.alpha4), // disabled, placeholder, icon
+    // textColor5: neutral(base.alpha5),
+    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)', 
+    // close
+    closeColor: neutral(Number(base.alphaClose)), closeColorHover: neutral(Number(base.alphaClose) * 1.25), closeColorPressed: neutral(Number(base.alphaClose) * 0.8), closeColorDisabled: neutral(base.alpha4), 
+    // 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: 'rgb(250, 250, 252)', avatarColor: neutral(base.alphaAvatar), invertedColor: 'rgb(0, 20, 40)', 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.02)', pressedColor: 'rgb(237, 237, 239)', opacityDisabled: base.alphaDisabled, inputColorDisabled: 'rgb(250, 250, 252)', 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: '0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05)', 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)' });
+exports.default = derived;

package/lib/_styles/global/index.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;