@project-r/styleguide - npm Package Compare versions

Comparing version 0.2.9 to 0.3.0

lib/catalogTheme.js

 'use strict';
 
 exports.__esModule = true;
+
+var _fonts = require('./theme/fonts');
+
 exports.default = {
@@ -39,4 +42,4 @@ // Colors
   // Fonts
-  fontFamily: "Cala-Regular",
-  fontHeading: "ApercuBold, serif",
+  fontFamily: _fonts.fontFamilies.serifRegular,
+  fontHeading: _fonts.fontFamilies.sansSerifMedium,
   fontMono: "'Source Code Pro', monospace",
@@ -43,0 +46,0 @@

lib/components/Button/index.js

@@ -17,2 +17,4 @@ 'use strict';
 
+var _fonts = require('../../theme/fonts');
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
@@ -22,3 +24,3 @@
 
-var fieldStyle = (0, _glamor.css)({
+var buttonStyle = (0, _glamor.css)({
   outline: 'none',
@@ -34,2 +36,3 @@ verticalAlign: 'bottom',
   backgroundColor: '#fff',
+  fontFamily: _fonts.fontFamilies.sansSerifRegular,
   border: '1px solid ' + colors.secondary,
@@ -91,3 +94,3 @@ color: colors.secondary,
   var simulations = sim ? (0, _glamor.simulate)(sim) : {};
-  var styles = (0, _glamor.merge)(fieldStyle, primary && primaryStyle, block && blockStyle, big && bigStyle);
+  var styles = (0, _glamor.merge)(buttonStyle, primary && primaryStyle, block && blockStyle, big && bigStyle);
 
@@ -94,0 +97,0 @@ return _react2.default.createElement(

lib/components/Form/Field.js

@@ -16,2 +16,4 @@ 'use strict';
 
+var _fonts = require('../../theme/fonts');
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
@@ -64,3 +66,3 @@
   display: 'inline-block',
-  fontFamily: 'sans-serif',
+  fontFamily: _fonts.fontFamilies.sansSerifRegular,
   fontSize: 22,
@@ -67,0 +69,0 @@ lineHeight: lineHeight + 'px'

lib/components/Typography/styles.js

@@ -12,2 +12,4 @@ 'use strict';
 
+var _fonts = require('../../theme/fonts');
+
 var _mediaQueries = require('../../theme/mediaQueries');
@@ -30,3 +32,3 @@
   color: colors.text,
-  fontFamily: 'sans-serif',
+  fontFamily: _fonts.fontFamilies.sansSerifMedium,
   fontSize: 52,
@@ -39,3 +41,3 @@ lineHeight: '56px',
   color: colors.text,
-  fontFamily: 'sans-serif',
+  fontFamily: _fonts.fontFamilies.sansSerifMedium,
   fontSize: 24,
@@ -48,3 +50,3 @@ lineHeight: '26px',
   color: colors.text,
-  fontFamily: 'Rubis-Regular, serif',
+  fontFamily: _fonts.fontFamilies.serifRegular,
   fontSize: 25,
@@ -57,3 +59,3 @@ lineHeight: '33px',
   color: colors.text,
-  fontFamily: 'Rubis-Regular, serif',
+  fontFamily: _fonts.fontFamilies.serifRegular,
   fontSize: 16,
@@ -70,3 +72,3 @@ lineHeight: '25px',
   lineHeight: '19px',
-  fontFamily: 'sans-serif',
+  fontFamily: _fonts.fontFamilies.sansSerifRegular,
   color: colors.secondary
@@ -79,4 +81,4 @@ };
   lineHeight: '32px',
-  fontFamily: 'Rubis-Regular, serif'
+  fontFamily: _fonts.fontFamilies.serifRegular
 };
 var quoteText = exports.quoteText = {};

lib/index.js

 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _react = require('react');
@@ -21,4 +23,2 @@
 
-require('./playground.css');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -38,13 +38,2 @@
   }, {
-    title: 'Design Checkin',
-    pages: [{
-      path: 'checkin/grundschriften',
-      title: 'Grundschriften',
-      src: require('../docs/checkin/grundschriften.md')
-    }, {
-      path: 'checkin/logo',
-      title: 'Logo',
-      src: require('../docs/checkin/logo.md')
-    }]
-  }, {
     title: 'Grundlagen',
@@ -61,3 +50,5 @@ pages: [{
       title: 'Typographie',
-      imports: require('./components/Typography'),
+      imports: _extends({}, require('./components/Typography'), {
+        fontFamilies: require('./theme/fonts').fontFamilies
+      }),
       src: require('./components/Typography/docs.md')
@@ -64,0 +55,0 @@ }, {

lib/lib.js

 'use strict';
 
 exports.__esModule = true;
-exports.AutocompleteField = exports.Field = exports.Button = exports.Logo = exports.mediaQueries = exports.colors = undefined;
+exports.AutocompleteField = exports.Field = exports.Button = exports.Logo = exports.fontFamilies = exports.mediaQueries = exports.colors = undefined;
 
+var _fonts = require('./theme/fonts');
+
+Object.defineProperty(exports, 'fontFamilies', {
+  enumerable: true,
+  get: function get() {
+    return _fonts.fontFamilies;
+  }
+});
+
 var _Logo = require('./components/Logo');
@@ -7,0 +16,0 @@

package.json

 {
   "name": "@project-r/styleguide",
-  "version": "0.2.9",
+  "version": "0.3.0",
   "dependencies": {
@@ -5,0 +5,0 @@ "react-autocomplete": "^1.4.1"

src/catalogTheme.js

@@ -0,1 +1,3 @@
+import {fontFamilies} from './theme/fonts'
+
 export default {
@@ -36,4 +38,4 @@ // Colors
   // Fonts
-  fontFamily: "Cala-Regular",
-  fontHeading: "ApercuBold, serif",
+  fontFamily: fontFamilies.serifRegular,
+  fontHeading: fontFamilies.sansSerifMedium,
   fontMono: "'Source Code Pro', monospace",
@@ -40,0 +42,0 @@

src/components/Button/index.js

 import React from 'react'
 import {css, merge, simulate} from 'glamor'
 import * as colors from '../../theme/colors'
+import {fontFamilies} from '../../theme/fonts'
 
-const fieldStyle = css({
+const buttonStyle = css({
   outline: 'none',
@@ -16,2 +17,3 @@ verticalAlign: 'bottom',
   backgroundColor: '#fff',
+  fontFamily: fontFamilies.sansSerifRegular,
   border: `1px solid ${colors.secondary}`,
@@ -64,3 +66,3 @@ color: colors.secondary,
   const styles = merge(
-    fieldStyle,
+    buttonStyle,
     primary && primaryStyle,
@@ -67,0 +69,0 @@ block && blockStyle,

src/components/Form/Field.js

 import React, {Component, PropTypes} from 'react'
 import {css, merge, simulate} from 'glamor'
 import * as colors from '../../theme/colors'
+import {fontFamilies} from '../../theme/fonts'
 
@@ -42,3 +43,3 @@ const xPadding = 0
   display: 'inline-block',
-  fontFamily: 'sans-serif',
+  fontFamily: fontFamilies.sansSerifRegular,
   fontSize: 22,
@@ -45,0 +46,0 @@ lineHeight: `${lineHeight}px`

src/components/Typography/docs.md

@@ -0,1 +1,24 @@
+## Webfonts
+
+We have four font cuts:
+
+- `serifRegular` Rubis Regular
+- `serifBold` Rubis Bold
+- `sansSerifRegular` GT America Standard Regular
+- `sansSerifMedium` GT America Standard Medium
+
+Full font family definitions are available as `fontFamilies` export from the styleguide.
+
+```react|no-source
+<pre style={{overflow: 'auto'}}>
+    <code>
+    {JSON.stringify(fontFamilies, null, 2)}
+    </code>
+</pre>
+```
+
+The webfonts are licensed for out usage. You are responsible to include the webfonts in your app and track them with our Piwik.
+
+You can optain the files, including a css file with `@font-face` definitions, from our internal filling system under `00 Vorlagen und Design Grundlagen/Webfonts`.
+
 ## Überschriften
@@ -2,0 +25,0 @@

src/components/Typography/styles.js

 import * as colors from '../../theme/colors'
+import {fontFamilies} from '../../theme/fonts'
 import {mUp} from '../../theme/mediaQueries'
@@ -17,3 +18,3 @@
   color: colors.text,
-  fontFamily: 'sans-serif',
+  fontFamily: fontFamilies.sansSerifMedium,
   fontSize: 52,
@@ -26,3 +27,3 @@ lineHeight: '56px',
   color: colors.text,
-  fontFamily: 'sans-serif',
+  fontFamily: fontFamilies.sansSerifMedium,
   fontSize: 24,
@@ -35,3 +36,3 @@ lineHeight: '26px',
   color: colors.text,
-  fontFamily: 'Rubis-Regular, serif',
+  fontFamily: fontFamilies.serifRegular,
   fontSize: 25,
@@ -44,3 +45,3 @@ lineHeight: '33px',
   color: colors.text,
-  fontFamily: 'Rubis-Regular, serif',
+  fontFamily: fontFamilies.serifRegular,
   fontSize: 16,
@@ -58,3 +59,3 @@ lineHeight: '25px',
   lineHeight: '19px',
-  fontFamily: 'sans-serif',
+  fontFamily: fontFamilies.sansSerifRegular,
   color: colors.secondary
@@ -67,3 +68,3 @@ }
   lineHeight: '32px',
-  fontFamily: 'Rubis-Regular, serif'
+  fontFamily: fontFamilies.serifRegular
 }
@@ -70,0 +71,0 @@ export const quoteText = {

src/index.js

@@ -7,3 +7,2 @@ import React from 'react';
 import './catalogTheme.css';
-import './playground.css';
 
@@ -28,17 +27,2 @@ simulations(true)
       {
-        title: 'Design Checkin',
-        pages: [
-          {
-            path: 'checkin/grundschriften',
-            title: 'Grundschriften',
-            src: require('../docs/checkin/grundschriften.md')
-          },
-          {
-            path: 'checkin/logo',
-            title: 'Logo',
-            src: require('../docs/checkin/logo.md')
-          }
-        ]
-      },
-      {
         title: 'Grundlagen',
@@ -57,3 +41,6 @@ pages: [
             title: 'Typographie',
-            imports: require('./components/Typography'),
+            imports: {
+              ...require('./components/Typography'),
+              fontFamilies: require('./theme/fonts').fontFamilies
+            },
             src: require('./components/Typography/docs.md')
@@ -60,0 +47,0 @@ },

src/lib.js

@@ -7,2 +7,4 @@ import * as allColors from './theme/colors'
 
+export {fontFamilies} from './theme/fonts'
+
 export {default as Logo} from './components/Logo'
@@ -9,0 +11,0 @@ export {default as Button} from './components/Button'

New alerts

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Fixed alerts

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

14

decreased by-82.05%

Worsened metrics

Total package byte prevSize

1132462

decreased by-88.01%

Number of package files

59

decreased by-57.86%

Lines of code

1718

decreased by-7.98%

No dependency changes