@stenajs-webui/core - npm Package Compare versions

Comparing version 0.0.44 to 0.0.45

dist/index.d.ts

@@ -31,2 +31,5 @@ export * from "./theme/hooks/UseTheme";
 export * from "./theme/DefaultTheme";
+export * from "./theme/variations/externalTheme";
+export * from "./theme/variations/internalTheme";
+export * from "./theme/DefaultTheme";
 export * from "./theme/Theme";
@@ -33,0 +36,0 @@ export * from "./types/ElementProps";

dist/index.es.js

@@ -478,2 +478,116 @@ import { createContext, useContext, useMemo, createElement, Fragment, useCallback, useState, useEffect, useRef } from 'react';
 
+var Colors;
+(function (Colors) {
+    Colors["UI1"] = "#202326"; /* Heading text */
+    Colors["UI2"] = "#4c4f56"; /* Normal text */
+    Colors["UI3"] = "#919296"; /* Disabled */
+    Colors["UI4"] = "#d1d2d7"; /* Lines & Borders */
+    Colors["UI5"] = "#e4e5e9"; /* Page background */
+    Colors["UI6"] = "#f2f3f5"; /*  */
+    Colors["UI7"] = "#fbfbfc"; /*  */
+    Colors["UI8"] = "#ffffff"; /* White */
+    Colors["UI10"] = "#0c0c0c"; /* Black */
+    Colors["Alert1"] = "#e28b09"; /*  */
+    Colors["Alert2"] = "#ffbd42"; /*  */
+    Colors["Alert3"] = "#fbe0ad"; /* Information & Highlight */
+    Colors["Alert4"] = "#fdf2dd"; /*  */
+    Colors["Sos1"] = "#d05353"; /* Error */
+    Colors["Sos2"] = "#ffb5ac"; /* Warning */
+    Colors["Sos3"] = "#f1d8d5"; /*  */
+    Colors["Sos4"] = "#faebe9"; /*  */
+    Colors["Lush1"] = "#305e17"; /*  */
+    Colors["Lush2"] = "#60bd2f"; /*  */
+    Colors["Lush3"] = "#d8efcc"; /*  */
+    Colors["Lush4"] = "#f7fcf5"; /*  */
+    Colors["Freight1"] = "#143e62"; /*  */
+    Colors["Freight2"] = "#2378cd"; /* Main blue */
+    Colors["Freight3"] = "#e2edf7"; /*  */
+    Colors["Freight4"] = "#f3f7fb"; /*  */
+    /* --- Project custom colors --- */
+    Colors["UI3Alt"] = "#8c9196";
+    Colors["Freight1Alt"] = "#1967b8"; /* BookingSearch > Input background; UserProfile */
+    Colors["Freight1AltContrast"] = "#9cc3ed"; /* BookingSearch > Input placeholder color */
+    Colors["Freight2Alt"] = "#5498E3"; /* Dashboard > DateWrapper */
+    Colors["Freight2AltContrast"] = "#3494DD"; /* Dashboard > Border color */
+    Colors["Night3"] = "#3a4145";
+    Colors["Night4"] = "#535e63";
+    Colors["Ocean2"] = "#2e4662";
+    Colors["Ocean3"] = "#4a5d73";
+    Colors["Lush2Alt"] = "rgb(174, 214, 145)"; /* Disabled Lush2 buttons */
+})(Colors || (Colors = {}));
+var externalTheme = __assign({}, defaultTheme, { colors: __assign({}, defaultTheme.colors, { primaryText: Colors.UI2, primaryTextLight: Colors.UI3, primaryBg: Colors.UI5, primaryBgLight: Colors.UI6, primaryBgDark: Colors.UI4, navBarBg: "#2e4662", navBarBgButtonText: "#ffffff", navBarBgButtonTextFaded: "#b1bbc0", interactionBgPrimary: Colors.Freight2, disabledText: Colors.UI3, disabledTextLight: Colors.UI4, disabledBackground: Colors.UI5, white: Colors.UI8, separator: Colors.UI4, separatorLight: Colors.UI5, separatorHighlighted: Colors.UI3, successGreen: Colors.Lush2, successGreenLight: Colors.Lush3, errorText: Colors.Sos2, errorTextLight: Colors.Sos3, errorBgLight: Colors.Sos3, errorBgDark: Colors.Sos1, badgeBg: "#af4b4d", alertText: Colors.Alert2, alertTextLight: Colors.Alert2, info: Colors.Freight2, infoLight: Colors.Freight3, inputBorder: Colors.UI4, inputBorderFocused: Colors.Freight2, inputBorderFocusedAlt: Colors.Freight2Alt, inputBorderFocusedLight: Colors.Freight3, highlightBoxBg: "#E8F4FA", highlightBoxBorder: "#7498AD" }), metrics: {
+        indent: 10,
+        spacing: 10,
+        space: 10
+    } });
+
+var internalTheme = {
+    colors: {
+        primaryText: "#1b2e47",
+        primaryTextLight: "#bcbabd",
+        primaryBg: "#F9F7F4",
+        primaryBgLight: "#FEFEFE",
+        primaryBgDark: "#226F81",
+        navBarBg: "#2e4662",
+        navBarBgButtonText: "#ffffff",
+        navBarBgButtonTextFaded: "#b1bbc0",
+        interactionBgPrimary: "#605988",
+        interactionBgHover: "#544e77",
+        disabledText: "#b6b6b6",
+        disabledTextLight: "#dddddd",
+        disabledBackground: "#F3F3F5",
+        white: "#ffffff",
+        separator: "#cccdcf",
+        separatorLight: "#F2F3F5",
+        separatorHighlighted: "#9391ff",
+        successGreen: "#8bc34a",
+        successGreenLight: "#94f78c",
+        errorText: "#D05353",
+        errorTextLight: "#ffbfc6",
+        errorBgLight: "#ffbfc6",
+        errorBgDark: "#a8171c",
+        badgeBg: "#af4b4d",
+        alertText: "#dbdb51",
+        alertTextLight: "#edec8a",
+        info: "#7a77c3",
+        infoLight: "#e6e5ff",
+        inputBorder: "#d2dadf",
+        inputBorderFocused: "#605988",
+        inputBorderFocusedAlt: "#C7C3D8",
+        inputBorderFocusedLight: "#E1DEEC",
+        highlightBoxBg: "#E8F4FA",
+        highlightBoxBorder: "#7498AD"
+    },
+    metrics: {
+        indent: 10,
+        spacing: 10,
+        space: 10
+    },
+    fontWeights: {
+        bold: 600,
+        standard: 400,
+        light: 100
+    },
+    fonts: {
+        primary: "Open Sans",
+        buttons: "Open Sans",
+        input: "Open Sans"
+    },
+    fontSizes: {
+        huge: "22px",
+        larger: "18px",
+        large: "16px",
+        normal: "14px",
+        input: "13px",
+        small: "12px",
+        smaller: "11px",
+        tiny: "9px"
+    },
+    shadows: {
+        modal: "rgba(0, 0, 0, 0.2) 0px 0px 10px 4px;",
+        popover: "rgba(0, 0, 0, 0.2) 0px 0px 6px 4px;",
+        box: "rgba(0, 0, 0, 0.15) 0 2px 4px 0;"
+    }
+};
+
 var useArraySet = function (list, setList) {
@@ -695,3 +809,3 @@ var add = useCallback(function (item) {
 
-export { Absolute, Box, Clickable, Column, HeaderText, Indent, LargeText, Nest, Relative, Row, SeparatorLine, SmallText, SmallerText, Space, Spacing, StandardText, ThemeContext, ThemeProvider, TinyText, defaultHeaderTextTheme, defaultLargeTextTheme, defaultSectionHeaderTextTheme, defaultSmallTextTheme, defaultSmallerTextTheme, defaultTheme, defaultTinyTextTheme, useArraySet, useBoolean, useDebounce, useDomId, useElementFocus, useEventListener, useMouseIsEntered, useMouseIsOver, useMultiOnClickOutside, useOnClickOutside, useOnNoMouseMovement, useTheme, useThemeFields, useThemeSelector };
+export { Absolute, Box, Clickable, Colors, Column, HeaderText, Indent, LargeText, Nest, Relative, Row, SeparatorLine, SmallText, SmallerText, Space, Spacing, StandardText, ThemeContext, ThemeProvider, TinyText, defaultHeaderTextTheme, defaultLargeTextTheme, defaultSectionHeaderTextTheme, defaultSmallTextTheme, defaultSmallerTextTheme, defaultTheme, defaultTinyTextTheme, externalTheme, internalTheme, useArraySet, useBoolean, useDebounce, useDomId, useElementFocus, useEventListener, useMouseIsEntered, useMouseIsOver, useMultiOnClickOutside, useOnClickOutside, useOnNoMouseMovement, useTheme, useThemeFields, useThemeSelector };
 //# sourceMappingURL=index.es.js.map

dist/index.js

@@ -484,2 +484,115 @@ 'use strict';
 
+(function (Colors) {
+    Colors["UI1"] = "#202326"; /* Heading text */
+    Colors["UI2"] = "#4c4f56"; /* Normal text */
+    Colors["UI3"] = "#919296"; /* Disabled */
+    Colors["UI4"] = "#d1d2d7"; /* Lines & Borders */
+    Colors["UI5"] = "#e4e5e9"; /* Page background */
+    Colors["UI6"] = "#f2f3f5"; /*  */
+    Colors["UI7"] = "#fbfbfc"; /*  */
+    Colors["UI8"] = "#ffffff"; /* White */
+    Colors["UI10"] = "#0c0c0c"; /* Black */
+    Colors["Alert1"] = "#e28b09"; /*  */
+    Colors["Alert2"] = "#ffbd42"; /*  */
+    Colors["Alert3"] = "#fbe0ad"; /* Information & Highlight */
+    Colors["Alert4"] = "#fdf2dd"; /*  */
+    Colors["Sos1"] = "#d05353"; /* Error */
+    Colors["Sos2"] = "#ffb5ac"; /* Warning */
+    Colors["Sos3"] = "#f1d8d5"; /*  */
+    Colors["Sos4"] = "#faebe9"; /*  */
+    Colors["Lush1"] = "#305e17"; /*  */
+    Colors["Lush2"] = "#60bd2f"; /*  */
+    Colors["Lush3"] = "#d8efcc"; /*  */
+    Colors["Lush4"] = "#f7fcf5"; /*  */
+    Colors["Freight1"] = "#143e62"; /*  */
+    Colors["Freight2"] = "#2378cd"; /* Main blue */
+    Colors["Freight3"] = "#e2edf7"; /*  */
+    Colors["Freight4"] = "#f3f7fb"; /*  */
+    /* --- Project custom colors --- */
+    Colors["UI3Alt"] = "#8c9196";
+    Colors["Freight1Alt"] = "#1967b8"; /* BookingSearch > Input background; UserProfile */
+    Colors["Freight1AltContrast"] = "#9cc3ed"; /* BookingSearch > Input placeholder color */
+    Colors["Freight2Alt"] = "#5498E3"; /* Dashboard > DateWrapper */
+    Colors["Freight2AltContrast"] = "#3494DD"; /* Dashboard > Border color */
+    Colors["Night3"] = "#3a4145";
+    Colors["Night4"] = "#535e63";
+    Colors["Ocean2"] = "#2e4662";
+    Colors["Ocean3"] = "#4a5d73";
+    Colors["Lush2Alt"] = "rgb(174, 214, 145)"; /* Disabled Lush2 buttons */
+})(exports.Colors || (exports.Colors = {}));
+var externalTheme = __assign({}, defaultTheme, { colors: __assign({}, defaultTheme.colors, { primaryText: exports.Colors.UI2, primaryTextLight: exports.Colors.UI3, primaryBg: exports.Colors.UI5, primaryBgLight: exports.Colors.UI6, primaryBgDark: exports.Colors.UI4, navBarBg: "#2e4662", navBarBgButtonText: "#ffffff", navBarBgButtonTextFaded: "#b1bbc0", interactionBgPrimary: exports.Colors.Freight2, disabledText: exports.Colors.UI3, disabledTextLight: exports.Colors.UI4, disabledBackground: exports.Colors.UI5, white: exports.Colors.UI8, separator: exports.Colors.UI4, separatorLight: exports.Colors.UI5, separatorHighlighted: exports.Colors.UI3, successGreen: exports.Colors.Lush2, successGreenLight: exports.Colors.Lush3, errorText: exports.Colors.Sos2, errorTextLight: exports.Colors.Sos3, errorBgLight: exports.Colors.Sos3, errorBgDark: exports.Colors.Sos1, badgeBg: "#af4b4d", alertText: exports.Colors.Alert2, alertTextLight: exports.Colors.Alert2, info: exports.Colors.Freight2, infoLight: exports.Colors.Freight3, inputBorder: exports.Colors.UI4, inputBorderFocused: exports.Colors.Freight2, inputBorderFocusedAlt: exports.Colors.Freight2Alt, inputBorderFocusedLight: exports.Colors.Freight3, highlightBoxBg: "#E8F4FA", highlightBoxBorder: "#7498AD" }), metrics: {
+        indent: 10,
+        spacing: 10,
+        space: 10
+    } });
+
+var internalTheme = {
+    colors: {
+        primaryText: "#1b2e47",
+        primaryTextLight: "#bcbabd",
+        primaryBg: "#F9F7F4",
+        primaryBgLight: "#FEFEFE",
+        primaryBgDark: "#226F81",
+        navBarBg: "#2e4662",
+        navBarBgButtonText: "#ffffff",
+        navBarBgButtonTextFaded: "#b1bbc0",
+        interactionBgPrimary: "#605988",
+        interactionBgHover: "#544e77",
+        disabledText: "#b6b6b6",
+        disabledTextLight: "#dddddd",
+        disabledBackground: "#F3F3F5",
+        white: "#ffffff",
+        separator: "#cccdcf",
+        separatorLight: "#F2F3F5",
+        separatorHighlighted: "#9391ff",
+        successGreen: "#8bc34a",
+        successGreenLight: "#94f78c",
+        errorText: "#D05353",
+        errorTextLight: "#ffbfc6",
+        errorBgLight: "#ffbfc6",
+        errorBgDark: "#a8171c",
+        badgeBg: "#af4b4d",
+        alertText: "#dbdb51",
+        alertTextLight: "#edec8a",
+        info: "#7a77c3",
+        infoLight: "#e6e5ff",
+        inputBorder: "#d2dadf",
+        inputBorderFocused: "#605988",
+        inputBorderFocusedAlt: "#C7C3D8",
+        inputBorderFocusedLight: "#E1DEEC",
+        highlightBoxBg: "#E8F4FA",
+        highlightBoxBorder: "#7498AD"
+    },
+    metrics: {
+        indent: 10,
+        spacing: 10,
+        space: 10
+    },
+    fontWeights: {
+        bold: 600,
+        standard: 400,
+        light: 100
+    },
+    fonts: {
+        primary: "Open Sans",
+        buttons: "Open Sans",
+        input: "Open Sans"
+    },
+    fontSizes: {
+        huge: "22px",
+        larger: "18px",
+        large: "16px",
+        normal: "14px",
+        input: "13px",
+        small: "12px",
+        smaller: "11px",
+        tiny: "9px"
+    },
+    shadows: {
+        modal: "rgba(0, 0, 0, 0.2) 0px 0px 10px 4px;",
+        popover: "rgba(0, 0, 0, 0.2) 0px 0px 6px 4px;",
+        box: "rgba(0, 0, 0, 0.15) 0 2px 4px 0;"
+    }
+};
+
 var useArraySet = function (list, setList) {
@@ -727,2 +840,4 @@ var add = React.useCallback(function (item) {
 exports.defaultTinyTextTheme = defaultTinyTextTheme;
+exports.externalTheme = externalTheme;
+exports.internalTheme = internalTheme;
 exports.useArraySet = useArraySet;
@@ -729,0 +844,0 @@ exports.useBoolean = useBoolean;

dist/theme/hooks/UseThemeSelector.d.ts

@@ -1,2 +0,1 @@
-import { ThemeFontWeightField } from "../theme-types/ThemeFontWeights";
 import { Theme } from "../Theme";
@@ -6,2 +5,3 @@ import { ThemeColorField } from "../theme-types/ThemeColors";
 import { ThemeFontSizeField } from "../theme-types/ThemeFontSizes";
+import { ThemeFontWeightField } from "../theme-types/ThemeFontWeights";
 declare type ThemeSelectorFunction<T> = (theme: Theme) => T;
@@ -8,0 +8,0 @@ export declare const useThemeSelector: <T>(fn: ThemeSelectorFunction<T>, deps: readonly any[] | undefined) => T;

package.json

 {
   "name": "@stenajs-webui/core",
-  "version": "0.0.44",
+  "version": "0.0.45",
   "description": "",
@@ -15,2 +15,3 @@ "author": "mattias800",
   "jsnext:main": "dist/index.es.js",
+  "sideEffects": false,
   "engines": {
@@ -63,3 +64,3 @@ "node": ">=8",
   ],
-  "gitHead": "17de4a61f47e1373527d53316794aabc3824c14a",
+  "gitHead": "201cd68281ab0a317ec7ab6eeca8d6d3750b3cba",
   "dependencies": {
@@ -66,0 +67,0 @@ "@emotion/is-prop-valid": "^0.8.2"

No alert changes

Improved metrics

Total package byte prevSize

233553

increased by13.21%

Number of package files

77

increased by2.67%

Lines of code

2148

increased by14.74%

No dependency changes