@hig/themes - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

build/index.es.js

 import webLightThemeData from '@hig/theme-data-poc/build/webLightTheme.json';
 import lightGrayThemeData from '@hig/theme-data-poc/build/lightGrayTheme.json';
 import darkBlueThemeData from '@hig/theme-data-poc/build/darkBlueTheme.json';
+import webLightThemeData$1 from '@hig/theme-data-poc/build/webLightHighDensityTheme.json';
+import lightGrayThemeData$1 from '@hig/theme-data-poc/build/lightGrayHighDensityTheme.json';
+import darkBlueThemeData$1 from '@hig/theme-data-poc/build/darkBlueHighDensityTheme.json';
 import PropTypes from 'prop-types';
@@ -8,2 +11,3 @@ import { Component } from 'react';
 var HIGLightTheme = {
+  density: "medium",
   themeName: "Web Light",
@@ -16,2 +20,3 @@ themeId: "hig-light",
 var HIGLightGrayTheme = {
+  density: "medium",
   themeName: "Light Gray",
@@ -24,2 +29,3 @@ themeId: "hig-light-gray",
 var HIGDarkBlueTheme = {
+  density: "medium",
   themeName: "Dark Blue",
@@ -31,3 +37,28 @@ themeId: "hig-dark-blue",
 
+var HIGLightHighDensityTheme = {
+  density: "high",
+  themeName: "Web Light",
+  themeId: "hig-light",
+  themeClass: "hig--light-theme",
+  themeData: webLightThemeData$1
+};
+
+var HIGLightGrayHighDensityTheme = {
+  density: "high",
+  themeName: "Light Gray",
+  themeId: "hig-light-gray",
+  themeClass: "hig--light-gray-theme",
+  themeData: lightGrayThemeData$1
+};
+
+var HIGDarkBlueHighDensityTheme = {
+  density: "high",
+  themeName: "Dark Blue",
+  themeId: "hig-dark-blue",
+  themeClass: "hig--dark-blue-theme",
+  themeData: darkBlueThemeData$1
+};
+
 var MatrixTheme = {
+  density: "medium",
   themeName: "BIM360 Matrix",
@@ -47,3 +78,5 @@ themeId: "matrix",
   /** Data describing presentation of the theme */
-  themeData: PropTypes.object
+  themeData: PropTypes.object,
+  /** Data describing density level of the theme */
+  density: PropTypes.string
 };
@@ -145,2 +178,2 @@
 
-export { HIGLightTheme, HIGLightGrayTheme, HIGDarkBlueTheme, MatrixTheme, index as ThemeContext };
+export { HIGLightTheme, HIGLightGrayTheme, HIGDarkBlueTheme, HIGLightHighDensityTheme, HIGLightGrayHighDensityTheme, HIGDarkBlueHighDensityTheme, MatrixTheme, index as ThemeContext };

build/index.js

@@ -10,2 +10,5 @@ 'use strict';
 var darkBlueThemeData = _interopDefault(require('@hig/theme-data-poc/build/darkBlueTheme.json'));
+var webLightThemeData$1 = _interopDefault(require('@hig/theme-data-poc/build/webLightHighDensityTheme.json'));
+var lightGrayThemeData$1 = _interopDefault(require('@hig/theme-data-poc/build/lightGrayHighDensityTheme.json'));
+var darkBlueThemeData$1 = _interopDefault(require('@hig/theme-data-poc/build/darkBlueHighDensityTheme.json'));
 var PropTypes = _interopDefault(require('prop-types'));
@@ -15,2 +18,3 @@ var react = require('react');
 var HIGLightTheme = {
+  density: "medium",
   themeName: "Web Light",
@@ -23,2 +27,3 @@ themeId: "hig-light",
 var HIGLightGrayTheme = {
+  density: "medium",
   themeName: "Light Gray",
@@ -31,2 +36,3 @@ themeId: "hig-light-gray",
 var HIGDarkBlueTheme = {
+  density: "medium",
   themeName: "Dark Blue",
@@ -38,3 +44,28 @@ themeId: "hig-dark-blue",
 
+var HIGLightHighDensityTheme = {
+  density: "high",
+  themeName: "Web Light",
+  themeId: "hig-light",
+  themeClass: "hig--light-theme",
+  themeData: webLightThemeData$1
+};
+
+var HIGLightGrayHighDensityTheme = {
+  density: "high",
+  themeName: "Light Gray",
+  themeId: "hig-light-gray",
+  themeClass: "hig--light-gray-theme",
+  themeData: lightGrayThemeData$1
+};
+
+var HIGDarkBlueHighDensityTheme = {
+  density: "high",
+  themeName: "Dark Blue",
+  themeId: "hig-dark-blue",
+  themeClass: "hig--dark-blue-theme",
+  themeData: darkBlueThemeData$1
+};
+
 var MatrixTheme = {
+  density: "medium",
   themeName: "BIM360 Matrix",
@@ -54,3 +85,5 @@ themeId: "matrix",
   /** Data describing presentation of the theme */
-  themeData: PropTypes.object
+  themeData: PropTypes.object,
+  /** Data describing density level of the theme */
+  density: PropTypes.string
 };
@@ -155,3 +188,6 @@
 exports.HIGDarkBlueTheme = HIGDarkBlueTheme;
+exports.HIGLightHighDensityTheme = HIGLightHighDensityTheme;
+exports.HIGLightGrayHighDensityTheme = HIGLightGrayHighDensityTheme;
+exports.HIGDarkBlueHighDensityTheme = HIGDarkBlueHighDensityTheme;
 exports.MatrixTheme = MatrixTheme;
 exports.ThemeContext = index;

CHANGELOG.md

@@ -0,1 +1,9 @@
+<a name="@hig/themes-v0.3.0"></a>
+# [@hig/themes-v0.3.0](https://github.com/Autodesk/hig/compare/@hig/themes@0.2.1...@hig/themes@0.3.0) (2018-07-26)
+
+
+### Features
+
+* publish low and high density themes ([ebe4b71](https://github.com/Autodesk/hig/commit/ebe4b71))
+
 <a name="@hig/themes-v0.2.1"></a>
@@ -2,0 +10,0 @@ # [@hig/themes-v0.2.1](https://github.com/Autodesk/hig/compare/@hig/themes@0.2.0...@hig/themes@0.2.1) (2018-07-19)

package.json

 {
   "name": "@hig/themes",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "HIG theme definitions and supporting components",
@@ -21,3 +21,3 @@ "author": "Autodesk Inc.",
   "dependencies": {
-    "@hig/theme-data-poc": "^0.0.7-alpha",
+    "@hig/theme-data-poc": "^0.0.8-alpha",
     "prop-types": "^15.6.1"
@@ -24,0 +24,0 @@ },

README.md

@@ -7,3 +7,3 @@ # ThemeContext component
 
-```
+```bash
 yarn add @hig/themes
@@ -13,7 +13,7 @@ ```
 ## Provide a theme to components
-```
-import { ThemeContext, HIGLightTheme } from '@hig/themes`;
+```jsx
+import { ThemeContext, HIGLightGrayTheme } from '@hig/themes`;
 
 function MyApp() {
-  <ThemeContext.Provider value={HIGLightTheme}>
+  <ThemeContext.Provider value={HIGLightGrayTheme}>
     <TheRestOfMyApp />
@@ -23,1 +23,19 @@ </ThemeContext.Provider>
 ```
+
+## Consume theme values in a component
+```jsx
+import { ThemeContext } from '@hig/themes`;
+
+function MyThemedComponent() {
+  <ThemeContext.Consumer>{({ themeData, themeName }) => (
+    <div style={{
+      backgroundColor: themeData["COLOR_SCHEME.SURFACE_LEVEL_2_COLOR"],
+      borderRadius: themeData["BASICS.BORDER_RADII.s"],
+      color: themeData["COLOR_SCHEME.TEXT_COLOR"],
+      padding: themeData["DENSITY.SPACINGS.M"],
+    }}>
+      The current theme is "{themeName}".
+    </div>
+  )}</ThemeContext.Consumer>
+}
+```

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

19198

increased by19.37%

Lines of code

302

increased by26.36%

Number of lines in readme file

39

increased by85.71%

Dependency changes

• + Added@hig/theme-data-poc@0.0.8-alpha(transitive)

• - Removed@hig/theme-data-poc@0.0.7-alpha(transitive)

• Updated@hig/theme-data-poc@^0.0.8-alpha