@uni-design-system/uni-react 0.0.17 → 0.0.19

package/README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://uni-design-system.github.io/uni-react/" target="_blank">
-    <img src="./.github/uni-logo.png" alt="UNI Design System">
+    <img src="https://github.com/uni-design-system/uni-react/raw/v0.0.17/.github/uni-logo.png" alt="UNI Design System">
   </a>
 </p>
 

package/dist/cjs/components/button/button.component.js

@@ -62,7 +62,7 @@ const Button = (_a) => {
         setClick(true);
         onClick && onClick(event);
     };
-    return (react_1.default.createElement("button", Object.assign({ onMouseDown: createRipple, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onClick: handleClick, disabled: disabled, style: Object.assign(Object.assign({}, style), userStyle), ref: ref }, rest), iconName ? (react_1.default.createElement(icon_text_row_1.IconTextRow, { iconName: iconName, color: contentColor, textRole: "button" }, text || children)) : (react_1.default.createElement(core_1.Text, { align: "center", role: "button", color: contentColor }, text || children))));
+    return (react_1.default.createElement("button", Object.assign({ onMouseDown: createRipple, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onClick: handleClick, disabled: disabled, style: Object.assign(Object.assign({}, style), userStyle), ref: ref }, rest), iconName ? (react_1.default.createElement(icon_text_row_1.IconTextRow, { iconName: iconName, color: contentColor, textRole: "button" }, text || children)) : (react_1.default.createElement(core_1.Text, { align: "center", role: "button", colorToken: contentColor }, text || children))));
 };
 exports.Button = Button;
 function Style(theme, buttonType, size = 'md', hover, disabled, click) {

package/dist/cjs/components/card/card.component.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Card = void 0;
 const react_1 = __importDefault(require("react"));
 const core_1 = require("../../core");
+const container_component_1 = __importDefault(require("../../core/container/container.component"));
 function Card(_a) {
     var { children, cardType, elevation, colorToken = 'surface', width, height, borderRadius, style } = _a, rest = __rest(_a, ["children", "cardType", "elevation", "colorToken", "width", "height", "borderRadius", "style"]);
     const { colors, containers } = (0, core_1.useTheme)();
@@ -29,6 +30,6 @@ function Card(_a) {
     if (borderRadii && borderRadius !== 'none') {
         styles.borderRadius = borderRadii[borderRadius || 'md'];
     }
-    return (react_1.default.createElement("div", Object.assign({ style: styles }, rest), children));
+    return (react_1.default.createElement(container_component_1.default, Object.assign({ colorToken: colorToken, style: styles }, rest), children));
 }
 exports.Card = Card;

package/dist/cjs/components/grainy-gradient-background/grainy-gradient-background.component.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { Property } from 'csstype';
+export interface GrainyGradientProps {
+    children?: ReactNode;
+    noiseFrequency?: number;
+    noiseOctaves?: number;
+    size?: number;
+    minHeight?: Property.MinHeight;
+    angle?: number;
+    gradientColor?: Property.Color;
+    backgroundColor?: Property.Color;
+}
+export declare const GrainyGradientBackground: ({ children, noiseFrequency, noiseOctaves, minHeight, size, angle, gradientColor, backgroundColor, }: GrainyGradientProps) => JSX.Element;

package/dist/cjs/components/grainy-gradient-background/grainy-gradient-background.component.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GrainyGradientBackground = void 0;
+const react_1 = __importDefault(require("react"));
+const GrainyGradientBackground = ({ children, noiseFrequency = 0.65, noiseOctaves = 3, minHeight, size = 740, angle = 20, gradientColor = 'rebeccapurple', backgroundColor = 'moccasin', }) => {
+    const gradient = `linear-gradient(${angle}deg, ${gradientColor}, transparent)`;
+    const image = `url("data:image/svg+xml,%3Csvg viewBox='0 0 ${size} ${size}' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='${noiseFrequency}' numOctaves='${noiseOctaves}' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`;
+    const container = {};
+    const content = {
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+    };
+    const noise = {
+        filter: 'contrast(290%) brightness(1000%)',
+        background: gradient + ', ' + image,
+        minHeight,
+    };
+    const isolate = {
+        isolation: 'isolate',
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+    };
+    const overlay = {
+        position: 'absolute',
+        top: 0,
+        width: '100%',
+        height: '100%',
+        background: backgroundColor,
+        mixBlendMode: 'multiply',
+    };
+    return (react_1.default.createElement("div", { style: container },
+        react_1.default.createElement("div", { style: isolate },
+            react_1.default.createElement("div", { style: noise }),
+            react_1.default.createElement("div", { style: overlay })),
+        react_1.default.createElement("div", { style: content }, children)));
+};
+exports.GrainyGradientBackground = GrainyGradientBackground;

package/dist/cjs/components/icon-text-row/icon-text-row.component.js

@@ -19,7 +19,7 @@ const IconTextRow = ({ iconName, color, align = 'left', text, textRole = 'title-
     }
     function RowText() {
         return (react_1.default.createElement("div", { style: Object.assign(Object.assign({}, core_1.expand), { paddingLeft: textMargin, paddingRight: textMargin }) },
-            react_1.default.createElement(core_1.Text, { align: align, color: color, role: textRole }, text || children)));
+            react_1.default.createElement(core_1.Text, { align: align, colorToken: color, role: textRole }, text || children)));
     }
     function RowCenter() {
         return align === 'center' ? react_1.default.createElement("div", { style: Object.assign({}, core_1.expand) }) : null;

package/dist/cjs/components/switch/switch.component.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Size } from '@uni-design-system/uni-core';
 export interface SwitchProps {
-    size: Size;
+    size?: Size;
     on?: boolean;
     onChange?: (on: boolean) => void;
 }

package/dist/cjs/core/background/background.component.d.ts

@@ -1,9 +1,15 @@
 import { ReactNode } from 'react';
 import { Property } from 'csstype';
-interface BackgroundProps {
+export interface BackgroundProps {
+    className?: string;
     children?: ReactNode;
-    image?: Property.BackgroundImage | undefined;
-    gradiant?: Property.BackgroundImage | undefined;
+    image?: Property.BackgroundImage;
+    imageUrl?: string;
+    gradiant?: Property.BackgroundImage;
+    position?: Property.BackgroundPosition;
+    size?: Property.BackgroundSize;
+    attachment?: 'fixed' | 'local' | 'scroll';
+    minHeight?: Property.MinHeight;
+    color?: string;
 }
-export declare const Background: ({ children, image, gradiant }: BackgroundProps) => JSX.Element;
-export {};
+export declare const Background: ({ children, image, imageUrl, gradiant, position, size, attachment, className, minHeight, color, }: BackgroundProps) => JSX.Element;

package/dist/cjs/core/background/background.component.js

@@ -5,16 +5,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Background = void 0;
 const react_1 = __importDefault(require("react"));
-const theme_1 = require("../theme");
-const Background = ({ children, image, gradiant }) => {
-    const theme = (0, theme_1.useTheme)();
-    const style = BackgroundStyle({ theme, image, gradiant });
-    return react_1.default.createElement("div", { style: style }, children);
-};
-exports.Background = Background;
-function BackgroundStyle({ image, gradiant, theme }) {
-    return {
-        backgroundColor: theme.colors.background,
+const Background = ({ children, image, imageUrl, gradiant, position, size, attachment, className, minHeight, color, }) => {
+    if (!!imageUrl) {
+        image = `url(${imageUrl})`;
+    }
+    const style = {
+        backgroundColor: color,
         backgroundImage: image || gradiant,
+        backgroundPosition: position,
+        backgroundSize: size,
+        minHeight,
+        backgroundAttachment: attachment,
     };
-}
+    return (react_1.default.createElement("div", { className: className, style: style }, children));
+};
+exports.Background = Background;

package/dist/cjs/core/background/index.d.ts

@@ -0,0 +1 @@
+export * from './background.component';

package/dist/cjs/core/background/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("./background.component"), exports);

package/dist/cjs/core/container/container.component.d.ts

@@ -1,6 +1,11 @@
-import { CSSProperties, ReactNode } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
+import { ContainerColorToken } from '@uni-design-system/uni-core';
 export interface ContainerProps {
     children: ReactNode;
     style: CSSProperties;
+    colorToken?: ContainerColorToken;
 }
-export default function Container({ children, style, ...rest }: ContainerProps): JSX.Element;
+export declare const ContainerContext: React.Context<{
+    colorToken?: ContainerColorToken | undefined;
+}>;
+export default function Container({ children, style, colorToken, ...rest }: ContainerProps): JSX.Element;

package/dist/cjs/core/container/container.component.js

@@ -1,4 +1,27 @@
 "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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -10,13 +33,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+exports.ContainerContext = void 0;
+const react_1 = __importStar(require("react"));
+exports.ContainerContext = (0, react_1.createContext)({});
 function Container(_a) {
-    var { children, style } = _a, rest = __rest(_a, ["children", "style"]);
-    return (react_1.default.createElement("div", Object.assign({ style: style }, rest), children));
+    var { children, style, colorToken } = _a, rest = __rest(_a, ["children", "style", "colorToken"]);
+    return (react_1.default.createElement(exports.ContainerContext.Provider, { value: { colorToken } },
+        react_1.default.createElement("div", Object.assign({ style: style }, rest), children)));
 }
 exports.default = Container;

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

@@ -1,3 +1,4 @@
+export * from './background';
 export * from './border';
 export * from './container';
 export * from './flex';

package/dist/cjs/core/index.js

@@ -14,6 +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 });
+__exportStar(require("./background"), exports);
 __exportStar(require("./border"), exports);
 __exportStar(require("./container"), exports);
 __exportStar(require("./flex"), exports);

package/dist/cjs/core/text/text.component.d.ts

@@ -6,6 +6,6 @@ export interface TextProps {
     align?: HorizontalAlign;
     role?: TextRole;
     scale?: Size;
-    color?: ContentColorToken;
+    colorToken?: ContentColorToken;
 }
 export declare function Text(props: TextProps): JSX.Element;

package/dist/cjs/core/text/text.component.js

@@ -1,30 +1,50 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Text = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const uni_core_1 = require("@uni-design-system/uni-core");
 const theme_1 = require("../theme");
+const container_1 = require("../container");
 function Text(props) {
-    const { text, children, align, role = 'body-1-long', color } = props;
-    const theme = (0, theme_1.useTheme)();
-    const style = Style(theme, align, role, color);
-    return react_1.default.createElement("div", { style: style }, text || children);
-}
-exports.Text = Text;
-function Style(theme, textAlign, role, color) {
-    const { fontSize, letterSpacing, lineHeight, fontWeight, fontFamily, fontStyle, textTransform } = theme.typography[role];
-    return {
-        color: theme.colors[color || 'on-background'],
+    const { text, children, align, role = 'body-1-long', colorToken: overridingColorToken } = props;
+    const { colors, typography } = (0, theme_1.useTheme)();
+    const { colorToken: containerColorToken } = (0, react_1.useContext)(container_1.ContainerContext);
+    const colorToken = containerColorToken ? `on-${containerColorToken}` : undefined;
+    const { fontSize, letterSpacing, lineHeight, fontWeight, fontFamily, fontStyle, textTransform } = typography[role];
+    const style = {
+        color: colors[overridingColorToken || colorToken || 'on-surface'],
         fontSize: fontSize + 'px',
         letterSpacing,
-        textAlign,
+        textAlign: align,
         textTransform,
         lineHeight: lineHeight + 'px',
         fontFamily,
         fontStyle,
         fontWeight: uni_core_1.FontWeightMap[fontWeight],
     };
+    return react_1.default.createElement("div", { style: style }, text || children);
 }
+exports.Text = Text;

package/dist/esm/components/button/button.component.js

@@ -33,7 +33,7 @@ export const Button = (_a) => {
         setClick(true);
         onClick && onClick(event);
     };
-    return (React.createElement("button", Object.assign({ onMouseDown: createRipple, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onClick: handleClick, disabled: disabled, style: Object.assign(Object.assign({}, style), userStyle), ref: ref }, rest), iconName ? (React.createElement(IconTextRow, { iconName: iconName, color: contentColor, textRole: "button" }, text || children)) : (React.createElement(Text, { align: "center", role: "button", color: contentColor }, text || children))));
+    return (React.createElement("button", Object.assign({ onMouseDown: createRipple, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onClick: handleClick, disabled: disabled, style: Object.assign(Object.assign({}, style), userStyle), ref: ref }, rest), iconName ? (React.createElement(IconTextRow, { iconName: iconName, color: contentColor, textRole: "button" }, text || children)) : (React.createElement(Text, { align: "center", role: "button", colorToken: contentColor }, text || children))));
 };
 function Style(theme, buttonType, size = 'md', hover, disabled, click) {
     const { color, horizontalPadding, verticalPadding, borderColor, borderWidth, borderRadius, contentColor } = theme.buttons[buttonType];

package/dist/esm/components/card/card.component.js

@@ -11,6 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { BoxShadow, Padding, useTheme } from '../../core';
+import Container from '../../core/container/container.component';
 export function Card(_a) {
     var { children, cardType, elevation, colorToken = 'surface', width, height, borderRadius, style } = _a, rest = __rest(_a, ["children", "cardType", "elevation", "colorToken", "width", "height", "borderRadius", "style"]);
     const { colors, containers } = useTheme();
@@ -23,5 +24,5 @@ export function Card(_a) {
     if (borderRadii && borderRadius !== 'none') {
         styles.borderRadius = borderRadii[borderRadius || 'md'];
     }
-    return (React.createElement("div", Object.assign({ style: styles }, rest), children));
+    return (React.createElement(Container, Object.assign({ colorToken: colorToken, style: styles }, rest), children));
 }

package/dist/esm/components/grainy-gradient-background/grainy-gradient-background.component.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { Property } from 'csstype';
+export interface GrainyGradientProps {
+    children?: ReactNode;
+    noiseFrequency?: number;
+    noiseOctaves?: number;
+    size?: number;
+    minHeight?: Property.MinHeight;
+    angle?: number;
+    gradientColor?: Property.Color;
+    backgroundColor?: Property.Color;
+}
+export declare const GrainyGradientBackground: ({ children, noiseFrequency, noiseOctaves, minHeight, size, angle, gradientColor, backgroundColor, }: GrainyGradientProps) => JSX.Element;

package/dist/esm/components/grainy-gradient-background/grainy-gradient-background.component.js

@@ -0,0 +1,35 @@
+import React from 'react';
+export const GrainyGradientBackground = ({ children, noiseFrequency = 0.65, noiseOctaves = 3, minHeight, size = 740, angle = 20, gradientColor = 'rebeccapurple', backgroundColor = 'moccasin', }) => {
+    const gradient = `linear-gradient(${angle}deg, ${gradientColor}, transparent)`;
+    const image = `url("data:image/svg+xml,%3Csvg viewBox='0 0 ${size} ${size}' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='${noiseFrequency}' numOctaves='${noiseOctaves}' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`;
+    const container = {};
+    const content = {
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+    };
+    const noise = {
+        filter: 'contrast(290%) brightness(1000%)',
+        background: gradient + ', ' + image,
+        minHeight,
+    };
+    const isolate = {
+        isolation: 'isolate',
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+    };
+    const overlay = {
+        position: 'absolute',
+        top: 0,
+        width: '100%',
+        height: '100%',
+        background: backgroundColor,
+        mixBlendMode: 'multiply',
+    };
+    return (React.createElement("div", { style: container },
+        React.createElement("div", { style: isolate },
+            React.createElement("div", { style: noise }),
+            React.createElement("div", { style: overlay })),
+        React.createElement("div", { style: content }, children)));
+};

package/dist/esm/components/icon-text-row/icon-text-row.component.js

@@ -13,7 +13,7 @@ export const IconTextRow = ({ iconName, color, align = 'left', text, textRole =
     }
     function RowText() {
         return (React.createElement("div", { style: Object.assign(Object.assign({}, expand), { paddingLeft: textMargin, paddingRight: textMargin }) },
-            React.createElement(Text, { align: align, color: color, role: textRole }, text || children)));
+            React.createElement(Text, { align: align, colorToken: color, role: textRole }, text || children)));
     }
     function RowCenter() {
         return align === 'center' ? React.createElement("div", { style: Object.assign({}, expand) }) : null;

package/dist/esm/components/switch/switch.component.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Size } from '@uni-design-system/uni-core';
 export interface SwitchProps {
-    size: Size;
+    size?: Size;
     on?: boolean;
     onChange?: (on: boolean) => void;
 }

package/dist/esm/core/background/background.component.d.ts

@@ -1,9 +1,15 @@
 import { ReactNode } from 'react';
 import { Property } from 'csstype';
-interface BackgroundProps {
+export interface BackgroundProps {
+    className?: string;
     children?: ReactNode;
-    image?: Property.BackgroundImage | undefined;
-    gradiant?: Property.BackgroundImage | undefined;
+    image?: Property.BackgroundImage;
+    imageUrl?: string;
+    gradiant?: Property.BackgroundImage;
+    position?: Property.BackgroundPosition;
+    size?: Property.BackgroundSize;
+    attachment?: 'fixed' | 'local' | 'scroll';
+    minHeight?: Property.MinHeight;
+    color?: string;
 }
-export declare const Background: ({ children, image, gradiant }: BackgroundProps) => JSX.Element;
-export {};
+export declare const Background: ({ children, image, imageUrl, gradiant, position, size, attachment, className, minHeight, color, }: BackgroundProps) => JSX.Element;

package/dist/esm/core/background/background.component.js

@@ -1,13 +1,15 @@
 import React from 'react';
-import { useTheme } from '../theme';
-export const Background = ({ children, image, gradiant }) => {
-    const theme = useTheme();
-    const style = BackgroundStyle({ theme, image, gradiant });
-    return React.createElement("div", { style: style }, children);
-};
-function BackgroundStyle({ image, gradiant, theme }) {
-    return {
-        backgroundColor: theme.colors.background,
+export const Background = ({ children, image, imageUrl, gradiant, position, size, attachment, className, minHeight, color, }) => {
+    if (!!imageUrl) {
+        image = `url(${imageUrl})`;
+    }
+    const style = {
+        backgroundColor: color,
         backgroundImage: image || gradiant,
+        backgroundPosition: position,
+        backgroundSize: size,
+        minHeight,
+        backgroundAttachment: attachment,
     };
-}
+    return (React.createElement("div", { className: className, style: style }, children));
+};

package/dist/esm/core/background/index.d.ts

@@ -0,0 +1 @@
+export * from './background.component';

package/dist/esm/core/background/index.js

@@ -0,0 +1 @@
+export * from './background.component';

package/dist/esm/core/container/container.component.d.ts

@@ -1,6 +1,11 @@
-import { CSSProperties, ReactNode } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
+import { ContainerColorToken } from '@uni-design-system/uni-core';
 export interface ContainerProps {
     children: ReactNode;
     style: CSSProperties;
+    colorToken?: ContainerColorToken;
 }
-export default function Container({ children, style, ...rest }: ContainerProps): JSX.Element;
+export declare const ContainerContext: React.Context<{
+    colorToken?: ContainerColorToken | undefined;
+}>;
+export default function Container({ children, style, colorToken, ...rest }: ContainerProps): JSX.Element;

package/dist/esm/core/container/container.component.js

@@ -9,8 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import React, { createContext } from 'react';
+export const ContainerContext = createContext({});
 export default function Container(_a) {
-    var { children, style } = _a, rest = __rest(_a, ["children", "style"]);
-    return (React.createElement("div", Object.assign({ style: style }, rest), children));
+    var { children, style, colorToken } = _a, rest = __rest(_a, ["children", "style", "colorToken"]);
+    return (React.createElement(ContainerContext.Provider, { value: { colorToken } },
+        React.createElement("div", Object.assign({ style: style }, rest), children)));
 }

package/dist/esm/core/index.d.ts

@@ -1,3 +1,4 @@
+export * from './background';
 export * from './border';
 export * from './container';
 export * from './flex';

package/dist/esm/core/index.js

@@ -1,3 +1,4 @@
+export * from './background';
 export * from './border';
 export * from './container';
 export * from './flex';

package/dist/esm/core/text/text.component.d.ts

@@ -6,6 +6,6 @@ export interface TextProps {
     align?: HorizontalAlign;
     role?: TextRole;
     scale?: Size;
-    color?: ContentColorToken;
+    colorToken?: ContentColorToken;
 }
 export declare function Text(props: TextProps): JSX.Element;

package/dist/esm/core/text/text.component.js

@@ -1,23 +1,23 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { FontWeightMap, } from '@uni-design-system/uni-core';
 import { useTheme } from '../theme';
+import { ContainerContext } from '../container';
 export function Text(props) {
-    const { text, children, align, role = 'body-1-long', color } = props;
-    const theme = useTheme();
-    const style = Style(theme, align, role, color);
-    return React.createElement("div", { style: style }, text || children);
-}
-function Style(theme, textAlign, role, color) {
-    const { fontSize, letterSpacing, lineHeight, fontWeight, fontFamily, fontStyle, textTransform } = theme.typography[role];
-    return {
-        color: theme.colors[color || 'on-background'],
+    const { text, children, align, role = 'body-1-long', colorToken: overridingColorToken } = props;
+    const { colors, typography } = useTheme();
+    const { colorToken: containerColorToken } = useContext(ContainerContext);
+    const colorToken = containerColorToken ? `on-${containerColorToken}` : undefined;
+    const { fontSize, letterSpacing, lineHeight, fontWeight, fontFamily, fontStyle, textTransform } = typography[role];
+    const style = {
+        color: colors[overridingColorToken || colorToken || 'on-surface'],
         fontSize: fontSize + 'px',
         letterSpacing,
-        textAlign,
+        textAlign: align,
         textTransform,
         lineHeight: lineHeight + 'px',
         fontFamily,
         fontStyle,
         fontWeight: FontWeightMap[fontWeight],
     };
+    return React.createElement("div", { style: style }, text || children);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uni-design-system/uni-react",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "description": "React component library for the UNI Design System.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/dist/cjs/core/theme/theme.context.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { Theme } from '@uni-design-system/uni-core';
-export interface ThemeContextProps {
-    themeId?: string;
-    themes?: Record<string, Theme>;
-    switchTheme: (themeId: string) => void;
-}
-declare const ThemeContext: React.Context<ThemeContextProps>;
-export default ThemeContext;

package/dist/cjs/core/theme/theme.context.js

@@ -1,16 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const uni_core_1 = require("@uni-design-system/uni-core");
-const ThemeContext = react_1.default.createContext({
-    themeId: 'LightTheme',
-    themes: { LightTheme: uni_core_1.LightTheme },
-    switchTheme: () => { },
-});
-if (process.env.NODE_ENV !== 'production') {
-    ThemeContext.displayName = 'ThemeContext';
-}
-exports.default = ThemeContext;

package/dist/cjs/core/theme/theme.hook.d.ts

@@ -1,5 +0,0 @@
-import { Theme } from '@uni-design-system/uni-core';
-export declare const useTheme: () => Theme;
-export declare const useSwitchTheme: () => {
-    switchTheme: (themeId: string) => void;
-};

package/dist/cjs/core/theme/theme.hook.js

@@ -1,53 +0,0 @@
-"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSwitchTheme = exports.useTheme = void 0;
-const react_1 = __importStar(require("react"));
-const theme_context_1 = __importDefault(require("./theme.context"));
-const uni_core_1 = require("@uni-design-system/uni-core");
-const useTheme = () => {
-    const { themeId, themes } = (0, react_1.useContext)(theme_context_1.default);
-    let theme = themes && themeId ? themes[themeId] : uni_core_1.BaseTheme;
-    (0, react_1.useEffect)(() => { }, [themeId]);
-    if (process.env.NODE_ENV !== 'production') {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        react_1.default.useDebugValue(theme);
-    }
-    (0, react_1.useEffect)(() => {
-        console.log(themeId);
-        theme = themes && themeId ? themes[themeId] : uni_core_1.BaseTheme;
-    }, [themeId]);
-    // return theme || LightTheme;
-    return theme;
-};
-exports.useTheme = useTheme;
-const useSwitchTheme = () => {
-    const { switchTheme } = (0, react_1.useContext)(theme_context_1.default);
-    return { switchTheme };
-};
-exports.useSwitchTheme = useSwitchTheme;

package/dist/cjs/core/theme/theme.provider.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { Theme } from '@uni-design-system/uni-core';
-interface ThemeProviderProps {
-    themeId?: string;
-    themes?: Record<string, Theme>;
-    children?: React.ReactChild;
-}
-export declare const ThemeProvider: ({ children, themeId, themes }: ThemeProviderProps) => JSX.Element;
-export {};

package/dist/cjs/core/theme/theme.provider.js

@@ -1,73 +0,0 @@
-"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeProvider = void 0;
-const react_1 = __importStar(require("react"));
-const theme_context_1 = __importDefault(require("./theme.context"));
-const STORAGE_KEY = 'THEME_ID';
-const ThemeProvider = ({ children, themeId, themes }) => {
-    const [_themeId, setThemeId] = (0, react_1.useState)(themeId);
-    (0, react_1.useEffect)(() => {
-        (() => __awaiter(void 0, void 0, void 0, function* () {
-            const id = localStorage.getItem(STORAGE_KEY);
-            setThemeId(id || themeId);
-        }))();
-    }, [themeId]);
-    return (react_1.default.createElement(theme_context_1.default.Provider, { value: { themeId: _themeId, themes, switchTheme: setThemeId } }, _themeId ? children : null));
-};
-exports.ThemeProvider = ThemeProvider;
-/*export function withTheme(Component: ({children, theme, themes }: (any & ThemeProps)) => JSX.Element) {
-
-  return (props: JSX.IntrinsicAttributes) => {
-    const { themeId, setThemeId } = useContext(ThemeContext);
-
-    const getTheme = (themeId: string) => themes[themeId];
-    const setTheme = (themeId: string) => {
-      localStorage.setItem(STORAGE_KEY, themeId);
-      setThemeId(themeId);
-    };
-
-    return (
-      <Component
-        {...props}
-        themes={Themes}
-        theme={getTheme(themeId)}
-        setTheme={setTheme}
-      />
-    );
-  };
-}*/

package/dist/esm/core/theme/theme.context.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { Theme } from '@uni-design-system/uni-core';
-export interface ThemeContextProps {
-    themeId?: string;
-    themes?: Record<string, Theme>;
-    switchTheme: (themeId: string) => void;
-}
-declare const ThemeContext: React.Context<ThemeContextProps>;
-export default ThemeContext;

package/dist/esm/core/theme/theme.context.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { LightTheme } from '@uni-design-system/uni-core';
-const ThemeContext = React.createContext({
-    themeId: 'LightTheme',
-    themes: { LightTheme },
-    switchTheme: () => { },
-});
-if (process.env.NODE_ENV !== 'production') {
-    ThemeContext.displayName = 'ThemeContext';
-}
-export default ThemeContext;

package/dist/esm/core/theme/theme.hook.d.ts

@@ -1,5 +0,0 @@
-import { Theme } from '@uni-design-system/uni-core';
-export declare const useTheme: () => Theme;
-export declare const useSwitchTheme: () => {
-    switchTheme: (themeId: string) => void;
-};

package/dist/esm/core/theme/theme.hook.js

@@ -1,22 +0,0 @@
-import React, { useContext, useEffect } from 'react';
-import ThemeContext from './theme.context';
-import { BaseTheme } from '@uni-design-system/uni-core';
-export const useTheme = () => {
-    const { themeId, themes } = useContext(ThemeContext);
-    let theme = themes && themeId ? themes[themeId] : BaseTheme;
-    useEffect(() => { }, [themeId]);
-    if (process.env.NODE_ENV !== 'production') {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        React.useDebugValue(theme);
-    }
-    useEffect(() => {
-        console.log(themeId);
-        theme = themes && themeId ? themes[themeId] : BaseTheme;
-    }, [themeId]);
-    // return theme || LightTheme;
-    return theme;
-};
-export const useSwitchTheme = () => {
-    const { switchTheme } = useContext(ThemeContext);
-    return { switchTheme };
-};

package/dist/esm/core/theme/theme.provider.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { Theme } from '@uni-design-system/uni-core';
-interface ThemeProviderProps {
-    themeId?: string;
-    themes?: Record<string, Theme>;
-    children?: React.ReactChild;
-}
-export declare const ThemeProvider: ({ children, themeId, themes }: ThemeProviderProps) => JSX.Element;
-export {};

package/dist/esm/core/theme/theme.provider.js

@@ -1,43 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import React, { useEffect, useState } from 'react';
-import ThemeContext from './theme.context';
-const STORAGE_KEY = 'THEME_ID';
-export const ThemeProvider = ({ children, themeId, themes }) => {
-    const [_themeId, setThemeId] = useState(themeId);
-    useEffect(() => {
-        (() => __awaiter(void 0, void 0, void 0, function* () {
-            const id = localStorage.getItem(STORAGE_KEY);
-            setThemeId(id || themeId);
-        }))();
-    }, [themeId]);
-    return (React.createElement(ThemeContext.Provider, { value: { themeId: _themeId, themes, switchTheme: setThemeId } }, _themeId ? children : null));
-};
-/*export function withTheme(Component: ({children, theme, themes }: (any & ThemeProps)) => JSX.Element) {
-
-  return (props: JSX.IntrinsicAttributes) => {
-    const { themeId, setThemeId } = useContext(ThemeContext);
-
-    const getTheme = (themeId: string) => themes[themeId];
-    const setTheme = (themeId: string) => {
-      localStorage.setItem(STORAGE_KEY, themeId);
-      setThemeId(themeId);
-    };
-
-    return (
-      <Component
-        {...props}
-        themes={Themes}
-        theme={getTheme(themeId)}
-        setTheme={setTheme}
-      />
-    );
-  };
-}*/