@indoqa/ui-explorer - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

CHANGELOG.md

@@ -0,1 +1,8 @@
+# v1.2.1 | 2019-04-26
+* fix path to typings in package.json
+* semantic color names in uieTheme
+
+# v1.2.0 | 2019-04-23
+* no changes
+
 # v1.1.1 | 2019-04-02
@@ -2,0 +9,0 @@ * no changes

dist/indoqa-ui-explorer.cjs.js

@@ -45,14 +45,27 @@ 'use strict';
 
-var fontFamilies = {
+var uieFontFamilies = {
     base: 'Lato, sans-serif',
     heading: 'Oswald, sans-serif',
 };
-var lightTheme = {
+var uieColors = {
+    white_1: '#FFFFFF',
+    white_2: '#F1F3F5',
+    white_3: '#E9ECEF',
+    white_4: '#dedede',
+    grey_1: '#868E96',
+    grey_2: '#495057',
+};
+var uieLightTheme = {
     colors: {
-        primaryDark: '#868E96',
-        primary: '#E9ECEF',
-        primaryLight: '#F1F3F5',
-        background: '#FFFFFF',
-        text: '#495057',
-        textInverted: '#FFFFFF',
+        bgMainHeading: uieColors.grey_1,
+        bgMenu: uieColors.white_2,
+        bgPanelHeader: uieColors.white_2,
+        bgContent: uieColors.white_1,
+        bgContentHeader: uieColors.white_3,
+        text: uieColors.grey_2,
+        textMainHeading: uieColors.white_1,
+        textPanelHeading: uieColors.grey_1,
+        textMenuHeading: uieColors.grey_1,
+        textMenuItem: uieColors.grey_2,
+        borderPanel: uieColors.white_4,
     },
@@ -69,3 +82,3 @@ fontFamilyCSSImports: 'https://fonts.googleapis.com/css?family=Lato|Oswald:700',
         base: {
-            fontFamily: fontFamilies.base,
+            fontFamily: uieFontFamilies.base,
             fontSize: '0.9rem',
@@ -75,3 +88,3 @@ lineHeight: 1.2,
         headline: {
-            fontFamily: fontFamilies.heading,
+            fontFamily: uieFontFamilies.heading,
             fontWeight: 700,
@@ -90,7 +103,6 @@ lineHeight: 1.2,
         topMenuHeight: '5rem',
-        colorPanelBorder: 'solid 1px #dedede',
     },
 };
 
-var StyleGuideThemeContext = React.createContext(lightTheme);
+var StyleGuideThemeContext = React.createContext(uieLightTheme);
 
@@ -132,3 +144,5 @@ function withUIETheme(Component) {
         borderRadius: '3px',
-        border: uieTheme.layout.colorPanelBorder,
+        borderStyle: 'solid',
+        borderWidth: 1,
+        borderColor: uieTheme.colors.borderPanel,
     };
@@ -154,3 +168,5 @@ return (React.createElement(reactFela.FelaComponent, { style: style },
         borderRadius: '3px',
-        border: uieTheme.layout.colorPanelBorder,
+        borderStyle: 'solid',
+        borderWidth: 1,
+        borderColor: uieTheme.colors.borderPanel,
     };
@@ -182,3 +198,3 @@ return (React.createElement(reactFela.FelaComponent, { style: style }));
         paddingLeft: uieTheme.spacing.space4,
-        backgroundColor: uieTheme.colors.primaryLight,
+        backgroundColor: uieTheme.colors.bgContentHeader,
     };
@@ -193,3 +209,3 @@ return (React.createElement(styleSystem.Flex, { fullWidth: true, style: style, alignItems: "center" }, children));
         boxSizing: 'border-box',
-        backgroundColor: uieTheme.colors.background,
+        backgroundColor: uieTheme.colors.bgContent,
         overflow: 'auto',
@@ -206,4 +222,4 @@ };
                 fontSize: sgTheme.fontSizes.veryBig,
-                backgroundColor: sgTheme.colors.primaryDark,
-                color: sgTheme.colors.textInverted,
+                backgroundColor: sgTheme.colors.bgMainHeading,
+                color: sgTheme.colors.textMainHeading,
                 lineHeight: 1,
@@ -236,3 +252,3 @@ paddingLeft: sgTheme.spacing.space2,
         marginBottom: uieTheme.spacing.space0,
-        color: uieTheme.colors.primaryDark,
+        color: uieTheme.colors.textMenuHeading,
     };
@@ -269,3 +285,3 @@ return (React.createElement(reactFela.FelaComponent, { style: [baseStyle, uieTheme.fontStyles.headline, getConcreteStyle(as, uieTheme)], as: as }, children));
         boxSizing: 'border-box',
-        backgroundColor: uieTheme.colors.primary,
+        backgroundColor: uieTheme.colors.bgMenu,
         tablet: {
@@ -327,3 +343,3 @@ overflowY: 'auto',
         listStyle: 'none',
-        '> a': __assign({ textDecoration: 'none' }, uieTheme.fontStyles.base, { color: uieTheme.colors.text, fontSize: uieTheme.fontSizes.text }),
+        '> a': __assign({ textDecoration: 'none' }, uieTheme.fontStyles.base, { color: uieTheme.colors.textMenuItem, fontSize: uieTheme.fontSizes.text }),
         '> a:visited': __assign({ textDecoration: 'none' }, uieTheme.fontStyles.base),
@@ -444,3 +460,3 @@ '> a.active': {
     var uieTheme = _a.uieTheme, children = _a.children;
-    var style = __assign({ backgroundColor: uieTheme.colors.primaryLight, textTransform: 'uppercase' }, uieTheme.fontStyles.headline, { fontSize: uieTheme.fontSizes.small, color: uieTheme.colors.primaryDark, padding: uieTheme.spacing.space2, borderRadius: '1px', marginBottom: uieTheme.spacing.space2 });
+    var style = __assign({ backgroundColor: uieTheme.colors.bgPanelHeader, textTransform: 'uppercase' }, uieTheme.fontStyles.headline, { fontSize: uieTheme.fontSizes.small, color: uieTheme.colors.textPanelHeading, padding: uieTheme.spacing.space2, borderRadius: '1px', marginBottom: uieTheme.spacing.space2 });
     return (React.createElement(reactFela.FelaComponent, { style: style }, children));
@@ -451,3 +467,3 @@ };
     var style = {
-        backgroundColor: uieTheme.colors.background,
+        backgroundColor: uieTheme.colors.bgContent,
         borderRadius: '3px',
@@ -624,3 +640,3 @@ marginBottom: '2rem',
         return (React.createElement("div", { className: className, onClick: function () { return toggleMenu(); } },
-            React.createElement(MenuIcon, { color: uieTheme.colors.primaryDark, size: "35" })));
+            React.createElement(MenuIcon, { color: uieTheme.colors.bgMainHeading, size: "35" })));
     };
@@ -659,3 +675,3 @@ return (React.createElement(reactFela.FelaComponent, { style: style }, renderMenuIcon));
         _this.state = {
-            uieTheme: uieTheme || lightTheme,
+            uieTheme: uieTheme || uieLightTheme,
             showMenu: false,
@@ -741,1 +757,4 @@ };
 exports.UIExplorer = UIExplorer;
+exports.uieColors = uieColors;
+exports.uieFontFamilies = uieFontFamilies;
+exports.uieLightTheme = uieLightTheme;

dist/indoqa-ui-explorer.es.js

@@ -41,14 +41,27 @@ import { Box, Flex, Grid, Row, Panel, withRenderer } from '@indoqa/style-system';
 
-var fontFamilies = {
+var uieFontFamilies = {
     base: 'Lato, sans-serif',
     heading: 'Oswald, sans-serif',
 };
-var lightTheme = {
+var uieColors = {
+    white_1: '#FFFFFF',
+    white_2: '#F1F3F5',
+    white_3: '#E9ECEF',
+    white_4: '#dedede',
+    grey_1: '#868E96',
+    grey_2: '#495057',
+};
+var uieLightTheme = {
     colors: {
-        primaryDark: '#868E96',
-        primary: '#E9ECEF',
-        primaryLight: '#F1F3F5',
-        background: '#FFFFFF',
-        text: '#495057',
-        textInverted: '#FFFFFF',
+        bgMainHeading: uieColors.grey_1,
+        bgMenu: uieColors.white_2,
+        bgPanelHeader: uieColors.white_2,
+        bgContent: uieColors.white_1,
+        bgContentHeader: uieColors.white_3,
+        text: uieColors.grey_2,
+        textMainHeading: uieColors.white_1,
+        textPanelHeading: uieColors.grey_1,
+        textMenuHeading: uieColors.grey_1,
+        textMenuItem: uieColors.grey_2,
+        borderPanel: uieColors.white_4,
     },
@@ -65,3 +78,3 @@ fontFamilyCSSImports: 'https://fonts.googleapis.com/css?family=Lato|Oswald:700',
         base: {
-            fontFamily: fontFamilies.base,
+            fontFamily: uieFontFamilies.base,
             fontSize: '0.9rem',
@@ -71,3 +84,3 @@ lineHeight: 1.2,
         headline: {
-            fontFamily: fontFamilies.heading,
+            fontFamily: uieFontFamilies.heading,
             fontWeight: 700,
@@ -86,7 +99,6 @@ lineHeight: 1.2,
         topMenuHeight: '5rem',
-        colorPanelBorder: 'solid 1px #dedede',
     },
 };
 
-var StyleGuideThemeContext = createContext(lightTheme);
+var StyleGuideThemeContext = createContext(uieLightTheme);
 
@@ -128,3 +140,5 @@ function withUIETheme(Component) {
         borderRadius: '3px',
-        border: uieTheme.layout.colorPanelBorder,
+        borderStyle: 'solid',
+        borderWidth: 1,
+        borderColor: uieTheme.colors.borderPanel,
     };
@@ -150,3 +164,5 @@ return (createElement(FelaComponent, { style: style },
         borderRadius: '3px',
-        border: uieTheme.layout.colorPanelBorder,
+        borderStyle: 'solid',
+        borderWidth: 1,
+        borderColor: uieTheme.colors.borderPanel,
     };
@@ -178,3 +194,3 @@ return (createElement(FelaComponent, { style: style }));
         paddingLeft: uieTheme.spacing.space4,
-        backgroundColor: uieTheme.colors.primaryLight,
+        backgroundColor: uieTheme.colors.bgContentHeader,
     };
@@ -189,3 +205,3 @@ return (createElement(Flex, { fullWidth: true, style: style, alignItems: "center" }, children));
         boxSizing: 'border-box',
-        backgroundColor: uieTheme.colors.background,
+        backgroundColor: uieTheme.colors.bgContent,
         overflow: 'auto',
@@ -202,4 +218,4 @@ };
                 fontSize: sgTheme.fontSizes.veryBig,
-                backgroundColor: sgTheme.colors.primaryDark,
-                color: sgTheme.colors.textInverted,
+                backgroundColor: sgTheme.colors.bgMainHeading,
+                color: sgTheme.colors.textMainHeading,
                 lineHeight: 1,
@@ -232,3 +248,3 @@ paddingLeft: sgTheme.spacing.space2,
         marginBottom: uieTheme.spacing.space0,
-        color: uieTheme.colors.primaryDark,
+        color: uieTheme.colors.textMenuHeading,
     };
@@ -265,3 +281,3 @@ return (createElement(FelaComponent, { style: [baseStyle, uieTheme.fontStyles.headline, getConcreteStyle(as, uieTheme)], as: as }, children));
         boxSizing: 'border-box',
-        backgroundColor: uieTheme.colors.primary,
+        backgroundColor: uieTheme.colors.bgMenu,
         tablet: {
@@ -323,3 +339,3 @@ overflowY: 'auto',
         listStyle: 'none',
-        '> a': __assign({ textDecoration: 'none' }, uieTheme.fontStyles.base, { color: uieTheme.colors.text, fontSize: uieTheme.fontSizes.text }),
+        '> a': __assign({ textDecoration: 'none' }, uieTheme.fontStyles.base, { color: uieTheme.colors.textMenuItem, fontSize: uieTheme.fontSizes.text }),
         '> a:visited': __assign({ textDecoration: 'none' }, uieTheme.fontStyles.base),
@@ -440,3 +456,3 @@ '> a.active': {
     var uieTheme = _a.uieTheme, children = _a.children;
-    var style = __assign({ backgroundColor: uieTheme.colors.primaryLight, textTransform: 'uppercase' }, uieTheme.fontStyles.headline, { fontSize: uieTheme.fontSizes.small, color: uieTheme.colors.primaryDark, padding: uieTheme.spacing.space2, borderRadius: '1px', marginBottom: uieTheme.spacing.space2 });
+    var style = __assign({ backgroundColor: uieTheme.colors.bgPanelHeader, textTransform: 'uppercase' }, uieTheme.fontStyles.headline, { fontSize: uieTheme.fontSizes.small, color: uieTheme.colors.textPanelHeading, padding: uieTheme.spacing.space2, borderRadius: '1px', marginBottom: uieTheme.spacing.space2 });
     return (createElement(FelaComponent, { style: style }, children));
@@ -447,3 +463,3 @@ };
     var style = {
-        backgroundColor: uieTheme.colors.background,
+        backgroundColor: uieTheme.colors.bgContent,
         borderRadius: '3px',
@@ -620,3 +636,3 @@ marginBottom: '2rem',
         return (createElement("div", { className: className, onClick: function () { return toggleMenu(); } },
-            createElement(MenuIcon, { color: uieTheme.colors.primaryDark, size: "35" })));
+            createElement(MenuIcon, { color: uieTheme.colors.bgMainHeading, size: "35" })));
     };
@@ -655,3 +671,3 @@ return (createElement(FelaComponent, { style: style }, renderMenuIcon));
         _this.state = {
-            uieTheme: uieTheme || lightTheme,
+            uieTheme: uieTheme || uieLightTheme,
             showMenu: false,
@@ -736,2 +752,2 @@ };
 
-export { UIExplorer };
+export { UIExplorer, uieColors, uieFontFamilies, uieLightTheme };

dist/ui-explorer/src/index.d.ts

 export * from './types';
 export * from './UIExplorer';
+export * from './uietheme/uieThemes';

dist/ui-explorer/src/uietheme/UIETheme.d.ts

 import { IStyle } from 'fela';
 export interface UIETheme {
     colors: {
-        primary: string;
-        primaryDark: string;
-        primaryLight: string;
-        background: string;
+        bgMenu: string;
+        bgMainHeading: string;
+        bgPanelHeader: string;
+        bgContent: string;
+        bgContentHeader: string;
         text: string;
-        textInverted: string;
+        textMainHeading: string;
+        textPanelHeading: string;
+        textMenuHeading: string;
+        textMenuItem: string;
+        borderPanel: string;
     };
@@ -32,4 +37,3 @@ fontFamilyCSSImports: string;
         topMenuHeight: string;
-        colorPanelBorder: string;
     };
 }

dist/ui-explorer/src/uietheme/uieThemes.d.ts

 import { UIETheme } from './UIETheme';
-export declare const lightTheme: UIETheme;
+export declare const uieFontFamilies: {
+    base: string;
+    heading: string;
+};
+export declare const uieColors: {
+    white_1: string;
+    white_2: string;
+    white_3: string;
+    white_4: string;
+    grey_1: string;
+    grey_2: string;
+};
+export declare const uieLightTheme: UIETheme;

package.json

 {
   "name": "@indoqa/ui-explorer",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "author": "Indoqa Software Design und Beratung GmbH (https://www.indoqa.com)",
@@ -9,3 +9,3 @@ "description": "A React component to showcase isolated React components and an Indoqa Style-System based theme",
   "module": "dist/indoqa-ui-explorer.es.js",
-  "typings": "dist/ui-explorer/src/main/index.d.ts",
+  "typings": "dist/ui-explorer/src/index.d.ts",
   "files": [
@@ -38,3 +38,3 @@ "dist"
   "dependencies": {
-    "@indoqa/style-system": "^1.2.0",
+    "@indoqa/style-system": "^1.2.1",
     "fela": "^10.2.4",
@@ -47,3 +47,3 @@ "react": "^16.8.6",
   },
-  "gitHead": "d60468a04afbc84667c6be25392f0f70e57a5280"
+  "gitHead": "6db8b0895f7d441457a259a8b27eeddab9fc5690"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

117197

increased by1.52%

Lines of code

2108

increased by2.53%

Dependency changes

• Updated@indoqa/style-system@^1.2.1