Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

themestress

Package Overview
Dependencies
Maintainers
1
Versions
20
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

themestress - npm Package Compare versions

Comparing version

0.1.4
to
0.1.5

README.md

2

components/Menu.js

@@ -54,2 +54,3 @@ "use strict";

var react_1 = __importStar(require("react"));
var react_dom_1 = require("react-dom");
var styled_1 = __importDefault(require("@emotion/styled"));

@@ -59,3 +60,2 @@ var color_1 = require("../core/md/color");

var Backdrop_1 = require("./Backdrop");
var react_dom_1 = require("react-dom");
var StyledMenu = (0, styled_1.default)(Surface_1.Surface)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: fixed;\n width: ", ";\n z-index: 2000;\n min-height: 10px;\n min-width: 112px;\n max-width: 280px;\n display: flex;\n border-radius: 4px;\n box-shadow: var(--sys-elevation-level-2);\n background-color: var(--sys-color-surface);\n background-image: ", ";\n\n left: ", "px;\n top: ", "px;\n transform: ", ";\n"], ["\n position: fixed;\n width: ", ";\n z-index: 2000;\n min-height: 10px;\n min-width: 112px;\n max-width: 280px;\n display: flex;\n border-radius: 4px;\n box-shadow: var(--sys-elevation-level-2);\n background-color: var(--sys-color-surface);\n background-image: ", ";\n\n left: ", "px;\n top: ", "px;\n transform: ", ";\n"])), function (_a) {

@@ -62,0 +62,0 @@ var width = _a.width;

2

components/Select.js

@@ -52,4 +52,4 @@ "use strict";

exports.Select = void 0;
var react_1 = __importStar(require("react"));
var styled_1 = __importDefault(require("@emotion/styled"));
var react_1 = __importStar(require("react"));
var InputBase_1 = require("./InputBase");

@@ -56,0 +56,0 @@ var Menu_1 = require("./Menu");

2

components/Snackbar.js

@@ -61,5 +61,5 @@ "use strict";

exports.SnackbarProvider = exports.SnackbarContext = void 0;
var styled_1 = __importDefault(require("@emotion/styled"));
var react_1 = __importStar(require("react"));
var react_dom_1 = __importDefault(require("react-dom"));
var styled_1 = __importDefault(require("@emotion/styled"));
var Snackbar = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: fixed;\n top: ", ";\n bottom: ", ";\n left: ", ";\n right: ", ";\n flex-direction: ", ";\n display: flex;\n min-width: ", ";\n min-height: fit-content;\n transition: min-height;\n transition-duration: 500ms;\n z-index: var(--sys-z-index-snackbar);\n"], ["\n position: fixed;\n top: ", ";\n bottom: ", ";\n left: ", ";\n right: ", ";\n flex-direction: ", ";\n display: flex;\n min-width: ", ";\n min-height: fit-content;\n transition: min-height;\n transition-duration: 500ms;\n z-index: var(--sys-z-index-snackbar);\n"])), function (_a) {

@@ -66,0 +66,0 @@ var position = _a.position, margin = _a.margin;

1

components/Typography.d.ts

@@ -1,2 +0,1 @@

/** @jsx jsx */
import React, { Ref } from 'react';

@@ -3,0 +2,0 @@ import { ReactHTMLProps } from '../core/definitions';

9

components/Typography.js

@@ -33,4 +33,5 @@ "use strict";

exports.Typography = void 0;
var react_1 = __importDefault(require("react"));
var styled_1 = __importDefault(require("@emotion/styled"));
var react_1 = require("@emotion/react");
var react_2 = require("@emotion/react");
var themeUtils_1 = require("../core/themeUtils");

@@ -46,3 +47,3 @@ var variantElementMap = {

var role = props.variant;
return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: var(--sys-typescale-", "-font);\n line-height: var(--sys-typescale-", "-line-height);\n font-size: var(--sys-typescale-", "-size);\n letter-spacing: var(--sys-typescale-", "-tracking);\n font-weight: var(--sys-typescale-", "-weight);\n "], ["\n font-family: var(--sys-typescale-", "-font);\n line-height: var(--sys-typescale-", "-line-height);\n font-size: var(--sys-typescale-", "-size);\n letter-spacing: var(--sys-typescale-", "-tracking);\n font-weight: var(--sys-typescale-", "-weight);\n "])), role, role, role, role, role);
return (0, react_2.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: var(--sys-typescale-", "-font);\n line-height: var(--sys-typescale-", "-line-height);\n font-size: var(--sys-typescale-", "-size);\n letter-spacing: var(--sys-typescale-", "-tracking);\n font-weight: var(--sys-typescale-", "-weight);\n "], ["\n font-family: var(--sys-typescale-", "-font);\n line-height: var(--sys-typescale-", "-line-height);\n font-size: var(--sys-typescale-", "-size);\n letter-spacing: var(--sys-typescale-", "-tracking);\n font-weight: var(--sys-typescale-", "-weight);\n "])), role, role, role, role, role);
};

@@ -52,3 +53,3 @@ var customStyles = function (props) {

var capitalize = props.capitalize, uppercase = props.uppercase;
return (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: ", ";\n background-color: ", ";\n line-height: ", ";\n text-align: ", ";\n font-size: ", ";\n font-weight: ", ";\n text-transform: ", ";\n ", "\n "], ["\n color: ", ";\n background-color: ", ";\n line-height: ", ";\n text-align: ", ";\n font-size: ", ";\n font-weight: ", ";\n text-transform: ", ";\n ", "\n "])), (_a = props.fontColor) !== null && _a !== void 0 ? _a : 'inherit', (_b = props.bgColor) !== null && _b !== void 0 ? _b : '', (_c = props.lineHeight) !== null && _c !== void 0 ? _c : '', (_d = props.align) !== null && _d !== void 0 ? _d : '', (_e = props.fontSize) !== null && _e !== void 0 ? _e : '', props.bold ? 'bold' : (_f = props.weight) !== null && _f !== void 0 ? _f : '', capitalize ? 'capitalize' : uppercase ? 'uppercase' : '', (0, themeUtils_1.getMarginAndPadding)(props));
return (0, react_2.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: ", ";\n background-color: ", ";\n line-height: ", ";\n text-align: ", ";\n font-size: ", ";\n font-weight: ", ";\n text-transform: ", ";\n ", "\n "], ["\n color: ", ";\n background-color: ", ";\n line-height: ", ";\n text-align: ", ";\n font-size: ", ";\n font-weight: ", ";\n text-transform: ", ";\n ", "\n "])), (_a = props.fontColor) !== null && _a !== void 0 ? _a : 'inherit', (_b = props.bgColor) !== null && _b !== void 0 ? _b : '', (_c = props.lineHeight) !== null && _c !== void 0 ? _c : '', (_d = props.align) !== null && _d !== void 0 ? _d : '', (_e = props.fontSize) !== null && _e !== void 0 ? _e : '', props.bold ? 'bold' : (_f = props.weight) !== null && _f !== void 0 ? _f : '', capitalize ? 'capitalize' : uppercase ? 'uppercase' : '', (0, themeUtils_1.getMarginAndPadding)(props));
};

@@ -61,5 +62,5 @@ var createStyledComponent = function (mappedVariant) { return (0, styled_1.default)(mappedVariant)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), baseStyles, customStyles); };

var Component = createStyledComponent(element !== null && element !== void 0 ? element : variantElementMap[props.variant.split('-')[0]]);
return ((0, react_1.jsx)(Component, __assign({ className: "_Typography" }, props), children));
return (react_1.default.createElement(Component, __assign({ className: "_Typography" }, props), children));
};
exports.Typography = Typography;
var templateObject_1, templateObject_2, templateObject_3;

127

core/themeUtils.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getMarginAndPadding = void 0;
// // import {htmlColorMap} from './htmlColorMap';
// import {
// ELimitedColorCategory,
// ThemeProps,
// TColor,
// PaletteProps,
// ColorDesignationPath,
// TypographyColorPath,
// NeutralColorPath,
// } from './definitions';
// import {BreakPointEnum} from '.';
// // const corePalette: PaletteProps = {
// // primary: {main: '#448aff', light: '#6fb4ff', dark: '#2a5296'},
// // secondary: {main: '#fba91a'},
// // accent: {main: '#680ce9'},
// // success: {main: '#56bd66'},
// // warning: {main: '#f1c946'},
// // info: {main: '#6fb4ff'},
// // error: {main: '#e52a66'},
// // neutral: {
// // '50': {main: '#f2f2f2'},
// // '100': {main: '#e5e5e5'},
// // '150': {main: '#d8d8d8'},
// // '200': {main: '#cccccc'},
// // '250': {main: '#bfbfbf'},
// // '300': {main: '#b2b2b2'},
// // '350': {main: '#a5a5a5'},
// // '400': {main: '#999999'},
// // '450': {main: '#8c8c8c'},
// // '500': {main: '#7f7f7f'},
// // '550': {main: '#727272'},
// // '600': {main: '#666666'},
// // '650': {main: '#595959'},
// // '700': {main: '#4c4c4c'},
// // '750': {main: '#3f3f3f'},
// // '800': {main: '#333333'},
// // '850': {main: '#262626'},
// // '900': {main: '#191919'},
// // '950': {main: '#0d0d0d'},
// // },
// // outline: {light: 'rgba(0,0,0,0.2)', dark: 'rgba(255,255,255,0.2)'},
// // };
// /** Generate the palette */
// const createPalette = (initialPalette: PaletteProps) => {
// // Generate "on" colors
// const createOnColors = (value: unknown) => {
// if (!isObject(value) || value['main'] === undefined) return;
// validateColorString(value['main']);
// value['main'] = value['main'].toLowerCase();
// if (value['on'] !== undefined) {
// validateColorString(value['on']);
// value['on'] = rgbToHex(value['on']);
// return;
// }
// value['on'] = onWhite(value['main']) ? '#ffffff' : '#000000';
// };
// const palette = Object.assign({}, initialPalette);
// objDeep(palette, createOnColors, []);
// const defaultPalette = mergeDeep({}, corePalette);
// objDeep(defaultPalette, createOnColors, []);
// const result = mergeDeep(defaultPalette, palette) as PaletteProps;
// return result;
// };
// /** Generate a theme object */
// export const createTheme = (theme: ThemeProps): ThemeProps => {
// const defaultTheme: ThemeProps = {
// palette: {},
// typography: {size: 14},
// spacing: 4,
// zIndex: {
// navbar: 1100,
// backdrop: 1300,
// modal: 1400,
// snackbar: 1500,
// tooltip: 1600,
// },
// breakpoints: {
// xs: '300px',
// sm: '600px',
// md: '900px',
// lg: '1200px',
// xl: '1536px',
// },
// };
// const result: ThemeProps = mergeDeep(defaultTheme, theme);
// result.palette = createPalette(result.palette);
// return result;
// };
// export const colorFromTheme = (theme: ThemeProps, color: TColor) => {
// let _color = 'inherit';
// if (Array.isArray(color)) {
// let value = theme.palette;
// color.forEach(v => (value = value[v]));
// _color = value as string;
// } else if (typeof color === 'string') {
// if (Object.keys(ELimitedColorCategory).includes(color)) {
// _color = theme.palette[color].main;
// } else {
// _color = color;
// }
// }
// return _color;
// };
// export const onColorFromTheme = (theme: ThemeProps, color: TColor) => {
// let _color = 'inherit';
// if (Array.isArray(color)) {
// const clonedColor = color.map(v => (v === 'main' ? 'on' : v));
// type t = ColorDesignationPath | TypographyColorPath | NeutralColorPath;
// _color = colorFromTheme(theme, clonedColor as t);
// } else if (typeof color === 'string') {
// if (Object.keys(ELimitedColorCategory).includes(color)) {
// _color = theme.palette[color].on;
// } else if (Object.keys(htmlColorMap).includes(color)) {
// _color = onWhite(htmlColorMap[color]) ? 'white' : 'black';
// } else {
// _color = onWhite(color) ? 'white' : 'black';
// }
// }
// return _color;
// };
// export const contrastLegible = (c1: string, c2: string): boolean => {
// return contrastRatio(c1, c2) > 4.5;
// };
// export const getBreakpoint = (theme: ThemeProps, breakpoint: string): string => {
// const isEnum = Object.keys(BreakPointEnum).includes(breakpoint);
// return isEnum ? theme.breakpoints[breakpoint] : breakpoint;
// };
var getMarginAndPadding = function (props) {

@@ -132,0 +5,0 @@ var theme = props.theme;

8

package.json
{
"name": "themestress",
"version": "0.1.4",
"version": "0.1.5",
"description": "A react component library for creating beautiful and interactive UI components using Material Design 3",

@@ -16,7 +16,7 @@ "keywords": [

"peerDependencies": {
"@emotion/react": "^11.0.0",
"@emotion/styled": "^11.0.0",
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0",
"@emotion/react": "^11.0.0",
"@emotion/styled": "^11.0.0"
"react-dom": "^17.0.0 || ^18.0.0"
}
}
SocketSocket SOC 2 Logo

Product

About

Packages

Explore npm
Explore Cargo
Explore Go
Explore Maven
Explore NuGet
Explore PyPI
Explore Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.