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

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/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/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/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/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.18",
+  "version": "0.0.19",
   "description": "React component library for the UNI Design System.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",