@project-r/styleguide - npm Package Compare versions

Comparing version 0.4.9 to 1.0.0

lib/catalogTheme.js

@@ -8,68 +8,22 @@ 'use strict';
 exports.default = {
-  // Colors
-  background: '#fff',
-  pageHeadingBackground: '#fff',
+  pageHeadingBackground: 'rgb(245,245,245)',
   pageHeadingTextColor: '#000',
-  pageHeadingHeight: 200,
   brandColor: '#000',
-  sidebarColor: '#fff',
-  sidebarColorActive: '#000',
-  sidebarColorText: '#999',
-  sidebarColorTextActive: '#000',
-  sidebarColorLine: '#fff',
-  sidebarColorHeading: '#000',
-  textColor: '#000',
-  codeColor: '#00263E',
-  linkColor: '#666',
-  textMedium: '#000',
-  bgLight: '#fff',
-  bgDark: '#f2f2f2',
-  lightColor: '#ccc',
 
-  codeStyles: {
-    tag: { color: '#FF5555' },
-    punctuation: { color: '#535353' },
-    script: { color: '#3F7397' },
-    function: { color: '#FF5555' },
-    keyword: { color: '#3F7397' },
-    string: { color: '#00263E' }
-  },
-
-  // Patterns
-  checkerboardPatternLight: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAF0lEQVQI12P4BAI/QICBFCaYBPNJYQIAkUZftTbC4sIAAAAASUVORK5CYII=',
-  checkerboardPatternDark: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg==',
-
-  // Fonts
-  fontFamily: _fonts.fontFamilies.serifRegular,
+  fontFamily: _fonts.fontFamilies.sansSerifRegular,
   fontHeading: _fonts.fontFamilies.sansSerifMedium,
-  fontMono: "'Source Code Pro', monospace",
+  textColor: 'rgba(0,0,0,0.8)',
+  textMedium: 'rgba(0,0,0,0.8)',
+  linkColor: 'rgb(0,180,0)',
 
-  fontXs: 12,
-  fontS: 14,
-  fontM: 16,
-  fontL: 21,
-  fontXl: 28,
-  fontXxl: 38,
+  sidebarColor: 'rgb(245,245,245)',
+  sidebarColorTextActive: 'rgb(60,100,90)', // rgb(60,100,90)
+  sidebarColorText: '#000',
 
-  sizeS: 8,
-  sizeM: 15,
-  sizeL: 21,
-  sizeXl: 28,
-  sizeXxl: 38,
+  lightColor: 'rgba(60,100,90,0.5)',
 
-  // The vertical grid unit. Margin, padding, and line-height are set to multiples
-  // of this value. This is the value that determines the baseline for our vertical
-  // rhythm. The default value of 6px allows more fine tuned designs that still
-  // obey vertical rhythm.
-  baseVerticalUnit: 4,
+  background: 'rgb(245,245,245)',
+  baseFontSize: 20,
 
-  // The value that multiplies the baseVerticalUnit to get the baseLineHeight.
-  // This gives type an ideal lineHeight.
-  baseLineMulti: 10,
-
-  // Base font size in pixels.
-  baseFontSize: 16,
-
-  // Modular scale ratio that is used to figure out all the different font sizes
-  msRatio: 1.2
+  bgLight: 'rgb(245,245,245)'
 };

lib/components/Button/index.js

@@ -15,8 +15,6 @@ 'use strict';
 
-var colors = _interopRequireWildcard(_colors);
+var _colors2 = _interopRequireDefault(_colors);
 
 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; } }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -36,13 +34,13 @@
   fontFamily: _fonts.fontFamilies.sansSerifRegular,
-  border: '1px solid ' + colors.secondary,
-  color: colors.secondary,
+  border: '1px solid ' + _colors2.default.secondary,
+  color: _colors2.default.secondary,
   cursor: 'pointer',
   ':hover': {
-    backgroundColor: colors.primary,
-    borderColor: colors.primary,
+    backgroundColor: _colors2.default.primary,
+    borderColor: _colors2.default.primary,
     color: '#fff'
   },
   ':active': {
-    backgroundColor: colors.secondary,
-    borderColor: colors.secondary,
+    backgroundColor: _colors2.default.secondary,
+    borderColor: _colors2.default.secondary,
     color: '#fff'
@@ -52,4 +50,4 @@ },
     backgroundColor: '#fff',
-    color: colors.disabled,
-    borderColor: colors.disabled,
+    color: _colors2.default.disabled,
+    borderColor: _colors2.default.disabled,
     cursor: 'default'
@@ -59,8 +57,8 @@ }
 var primaryStyle = (0, _glamor.css)({
-  backgroundColor: colors.primary,
-  borderColor: colors.primary,
+  backgroundColor: _colors2.default.primary,
+  borderColor: _colors2.default.primary,
   color: '#fff',
   ':hover': {
-    backgroundColor: colors.secondary,
-    borderColor: colors.secondary
+    backgroundColor: _colors2.default.secondary,
+    borderColor: _colors2.default.secondary
   },
@@ -67,0 +65,0 @@ ':active': {

lib/components/Form/AutosuggestField.js

@@ -21,3 +21,3 @@ 'use strict';
 
-var colors = _interopRequireWildcard(_colors);
+var _colors2 = _interopRequireDefault(_colors);
 
@@ -28,4 +28,2 @@ var _Field = require('./Field');
 
-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; } }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -121,3 +119,3 @@
                 style: {
-                  backgroundColor: isHighlighted ? colors.primaryBg : '',
+                  backgroundColor: isHighlighted ? _colors2.default.primaryBg : '',
                   borderBottom: '1px solid #ccc',
@@ -124,0 +122,0 @@ padding: '6px 0'

lib/components/Form/Checkbox.js

@@ -15,8 +15,6 @@ 'use strict';
 
-var colors = _interopRequireWildcard(_colors);
+var _colors2 = _interopRequireDefault(_colors);
 
 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; } }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -28,3 +26,3 @@
     lineHeight: '20px',
-    color: colors.text,
+    color: _colors2.default.text,
     fontFamily: _fonts.fontFamilies.sansSerifRegular,
@@ -41,3 +39,3 @@ cursor: 'pointer'
     height: 18,
-    border: '1px solid ' + colors.secondary
+    border: '1px solid ' + _colors2.default.secondary
   }),
@@ -57,3 +55,3 @@ box: (0, _glamor.css)({
     { width: '18', height: '18', viewBox: '0 0 18 18' },
-    _react2.default.createElement('path', { d: 'M0 0h18v18H0V0zm7 14L2 9.192l1.4-1.346L7 11.308 14.6 4 16 5.346 7 14z', fill: colors.primary, fillRule: 'evenodd' })
+    _react2.default.createElement('path', { d: 'M0 0h18v18H0V0zm7 14L2 9.192l1.4-1.346L7 11.308 14.6 4 16 5.346 7 14z', fill: _colors2.default.primary, fillRule: 'evenodd' })
   );
@@ -60,0 +58,0 @@ };

lib/components/Form/Field.js

@@ -22,3 +22,3 @@ 'use strict';
 
-var colors = _interopRequireWildcard(_colors);
+var _colors2 = _interopRequireDefault(_colors);
 
@@ -29,4 +29,2 @@ 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; } }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -62,13 +60,13 @@
   border: 'none',
-  borderBottom: 'solid ' + colors.disabled + ' ' + borderWidth + 'px',
+  borderBottom: 'solid ' + _colors2.default.disabled + ' ' + borderWidth + 'px',
   borderRadius: 0,
-  color: colors.text,
+  color: _colors2.default.text,
   ':focus': {
-    borderColor: colors.primary
+    borderColor: _colors2.default.primary
   }
 });
 var fieldErrorStyle = (0, _glamor.css)({
-  borderColor: colors.error,
+  borderColor: _colors2.default.error,
   ':focus': {
-    borderColor: colors.error
+    borderColor: _colors2.default.error
   }
@@ -102,3 +100,3 @@ });
   top: lineHeight + yPadding,
-  color: colors.disabled,
+  color: _colors2.default.disabled,
   transition: 'top 200ms, font-size 200ms'
@@ -116,6 +114,6 @@ });
 var labelTextFocusedStyle = (0, _glamor.css)({
-  color: colors.primary
+  color: _colors2.default.primary
 });
 var labelTextErrorStyle = (0, _glamor.css)({
-  color: colors.error
+  color: _colors2.default.error
 });
@@ -288,3 +286,3 @@ var whiteStyle = (0, _glamor.css)({
       hasDecrease && _react2.default.createElement(ArrowDown, {
-        fill: isFocused ? colors.primary : colors.disabled,
+        fill: isFocused ? _colors2.default.primary : _colors2.default.disabled,
         size: fieldHeight / 2,
@@ -300,3 +298,3 @@ onClick: function onClick(e) {
       hasIncrease && _react2.default.createElement(ArrowUp, {
-        fill: isFocused ? colors.primary : colors.disabled,
+        fill: isFocused ? _colors2.default.primary : _colors2.default.disabled,
         size: fieldHeight / 2,
@@ -303,0 +301,0 @@ onClick: function onClick(e) {

lib/components/Form/Radio.js

@@ -15,8 +15,6 @@ 'use strict';
 
-var colors = _interopRequireWildcard(_colors);
+var _colors2 = _interopRequireDefault(_colors);
 
 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; } }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -28,3 +26,3 @@
     lineHeight: '20px',
-    color: colors.text,
+    color: _colors2.default.text,
     fontFamily: _fonts.fontFamilies.sansSerifRegular,
@@ -52,4 +50,4 @@ cursor: 'pointer'
     _react2.default.createElement('circle', { fill: '#fff', stroke: '#fff', strokeWidth: '6', cx: '12', cy: '12', r: '9' }),
-    checked && _react2.default.createElement('circle', { fill: colors.primary, cx: '12', cy: '12', r: '6' }),
-    _react2.default.createElement('circle', { fill: 'none', stroke: checked ? colors.primary : colors.divider,
+    checked && _react2.default.createElement('circle', { fill: _colors2.default.primary, cx: '12', cy: '12', r: '6' }),
+    _react2.default.createElement('circle', { fill: 'none', stroke: checked ? _colors2.default.primary : _colors2.default.divider,
       cx: '12', cy: '12', r: '11.5' })
@@ -56,0 +54,0 @@ );

lib/components/Grid/index.js

 'use strict';
 
 exports.__esModule = true;
-exports.Span = exports.Grid = exports.NarrowContainer = exports.Container = exports.CONTENT_MAX_WIDTH = exports.NARROW_CONTENT_MAX_WIDTH = exports.CONTENT_PADDING = exports.GUTTER = undefined;
+exports.NarrowContainer = exports.Container = exports.CONTENT_MAX_WIDTH = exports.NARROW_CONTENT_MAX_WIDTH = exports.CONTENT_PADDING = exports.GUTTER = undefined;
 
 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 _css, _css2, _css3, _css4, _css5, _css6, _css7, _css8, _css9, _css10, _css11, _css12, _css13, _css14, _css15, _css16, _css17, _css18, _css19, _css20;
-
 var _react = require('react');
@@ -20,4 +18,2 @@
 
-var _mediaQueries = require('../../theme/mediaQueries');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -49,37 +45,3 @@
     marginRight: 'auto'
-  }),
-  grid: (0, _glamor.css)({
-    clear: 'both',
-    overflow: 'auto',
-    zoom: '1',
-    marginLeft: '-' + GUTTER / 2 + 'px',
-    width: 'calc(100% + ' + GUTTER + 'px)'
-  }),
-  span: (0, _glamor.css)({
-    boxSizing: 'border-box',
-    float: 'left',
-    paddingLeft: GUTTER / 2 + 'px',
-    paddingRight: GUTTER / 2 + 'px',
-    minHeight: 1
-  }),
-  s1of2: (0, _glamor.css)((_css = {}, _css[_mediaQueries.onlyS] = { width: '50%' }, _css)),
-  s2of2: (0, _glamor.css)((_css2 = {}, _css2[_mediaQueries.onlyS] = { width: '100%' }, _css2)),
-  m1of18: (0, _glamor.css)((_css3 = {}, _css3[_mediaQueries.mUp] = { width: 100 / 18 * 1 + '%' }, _css3)),
-  m2of18: (0, _glamor.css)((_css4 = {}, _css4[_mediaQueries.mUp] = { width: 100 / 18 * 2 + '%' }, _css4)),
-  m3of18: (0, _glamor.css)((_css5 = {}, _css5[_mediaQueries.mUp] = { width: 100 / 18 * 3 + '%' }, _css5)),
-  m4of18: (0, _glamor.css)((_css6 = {}, _css6[_mediaQueries.mUp] = { width: 100 / 18 * 4 + '%' }, _css6)),
-  m5of18: (0, _glamor.css)((_css7 = {}, _css7[_mediaQueries.mUp] = { width: 100 / 18 * 5 + '%' }, _css7)),
-  m6of18: (0, _glamor.css)((_css8 = {}, _css8[_mediaQueries.mUp] = { width: 100 / 18 * 6 + '%' }, _css8)),
-  m7of18: (0, _glamor.css)((_css9 = {}, _css9[_mediaQueries.mUp] = { width: 100 / 18 * 7 + '%' }, _css9)),
-  m8of18: (0, _glamor.css)((_css10 = {}, _css10[_mediaQueries.mUp] = { width: 100 / 18 * 8 + '%' }, _css10)),
-  m9of18: (0, _glamor.css)((_css11 = {}, _css11[_mediaQueries.mUp] = { width: 100 / 18 * 9 + '%' }, _css11)),
-  m10of18: (0, _glamor.css)((_css12 = {}, _css12[_mediaQueries.mUp] = { width: 100 / 18 * 10 + '%' }, _css12)),
-  m11of18: (0, _glamor.css)((_css13 = {}, _css13[_mediaQueries.mUp] = { width: 100 / 18 * 11 + '%' }, _css13)),
-  m12of18: (0, _glamor.css)((_css14 = {}, _css14[_mediaQueries.mUp] = { width: 100 / 18 * 12 + '%' }, _css14)),
-  m13of18: (0, _glamor.css)((_css15 = {}, _css15[_mediaQueries.mUp] = { width: 100 / 18 * 13 + '%' }, _css15)),
-  m14of18: (0, _glamor.css)((_css16 = {}, _css16[_mediaQueries.mUp] = { width: 100 / 18 * 14 + '%' }, _css16)),
-  m15of18: (0, _glamor.css)((_css17 = {}, _css17[_mediaQueries.mUp] = { width: 100 / 18 * 15 + '%' }, _css17)),
-  m16of18: (0, _glamor.css)((_css18 = {}, _css18[_mediaQueries.mUp] = { width: 100 / 18 * 16 + '%' }, _css18)),
-  m17of18: (0, _glamor.css)((_css19 = {}, _css19[_mediaQueries.mUp] = { width: 100 / 18 * 17 + '%' }, _css19)),
-  m18of18: (0, _glamor.css)((_css20 = {}, _css20[_mediaQueries.mUp] = { width: 100 / 18 * 18 + '%' }, _css20))
+  })
 };
@@ -118,44 +80,2 @@
   children: _propTypes2.default.node
-};
-
-var Grid = exports.Grid = function Grid(_ref3) {
-  var children = _ref3.children;
-  return _react2.default.createElement(
-    'div',
-    styles.grid,
-    children
-  );
-};
-
-Grid.propTypes = {
-  children: _propTypes2.default.node
-};
-
-var fractionToClassName = function fractionToClassName() {
-  var frac = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  return frac.replace(/\//, 'of');
-};
-
-var Span = exports.Span = function Span(_ref4) {
-  var children = _ref4.children,
-      style = _ref4.style,
-      s = _ref4.s,
-      m = _ref4.m;
-
-  return _react2.default.createElement(
-    'div',
-    _extends({ style: style }, styles.span, styles['s' + fractionToClassName(s)], styles['m' + fractionToClassName(m)]),
-    children
-  );
-};
-
-Span.propTypes = {
-  children: _propTypes2.default.node,
-  s: _propTypes2.default.oneOf(['1/2', '2/2']),
-  m: _propTypes2.default.oneOf(['1/18', '2/18', '3/18', '4/18', '5/18', '6/18', '7/18', '8/18', '9/18', '10/18', '11/18', '12/18', '13/18', '14/18', '15/18', '16/18', '17/18', '18/18'])
-};
-
-Span.defaultProps = {
-  s: '2/2',
-  m: '18/18'
 };

lib/components/Logo/index.js

 'use strict';
 
 exports.__esModule = true;
-exports.R = undefined;
 
 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 _R = require('./R');
-
-Object.defineProperty(exports, 'R', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_R).default;
-  }
-});
-
 var _react = require('react');
@@ -23,2 +13,6 @@
 
+var _env = require('../../theme/env');
+
+var _env2 = _interopRequireDefault(_env);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -28,4 +22,12 @@
 
-var ratio = 960 / 140;
+var VIEWBOX = _env2.default.LOGO_VIEWBOX || '0 0 4 1.5';
+var PATH = _env2.default.LOGO_PATH || 'M0 0 L4 0 L4 1.5 L3 0.5 L2 4 L1 0.5 L0 1.5 Z';
+var VIEWBOX_ARRAY = VIEWBOX.split(' ').map(function (d) {
+  return +d;
+});
+var WIDTH = VIEWBOX_ARRAY[2] - VIEWBOX_ARRAY[0];
+var HEIGHT = VIEWBOX_ARRAY[3] - VIEWBOX_ARRAY[1];
 
+var ratio = WIDTH / HEIGHT;
+
 var styles = {
@@ -36,3 +38,3 @@ container: (0, _glamor.css)({
     width: '100%',
-    paddingBottom: 140 / 960 * 100 + '%'
+    paddingBottom: HEIGHT / WIDTH * 100 + '%'
   }),
@@ -56,4 +58,4 @@ svg: (0, _glamor.css)({
     'svg',
-    _extends({}, props, { width: width, height: height, viewBox: '0 0 925.115 136.781' }),
-    _react2.default.createElement('path', { fill: fill, d: 'M721.463 133.73v-4.7l11.6-6.24 2.26-4.6V22.735l-2.26-4.6-11.6-6.238v-4.7h62.818v4.7l-11.6 6.238-2.438 4.6v95.457l2.44 4.6 11.6 6.24v4.7h-62.82zM424.22 136.78c34.81 0 46.53-20.452 46.53-46.696V26.59l2.438-4.6 17.783-10.094v-4.7h-51.005v4.7l17.963 10.095 2.26 4.6v63.132c0 23.71-10.033 34.027-25.08 34.027-15.55 0-24.078-11.403-24.078-34.753l.002-66.262 2.44-4.6 11.6-6.24v-4.7h-62.82v4.7l11.6 6.24 2.26 4.6V89.54c0 33.305 18.02 47.24 48.107 47.24zM715.02 87.195l-28.378 36.894h-23.156V22.733l2.442-4.6 11.597-6.24v-4.7H614.71v4.7l11.6 6.24 2.258 4.6v95.457l-2.26 4.6-11.6 6.24v4.7h98.6l6.415-46.535M309.033 7.208l-.012-.013h-59.817v4.7l11.6 6.238 2.26 4.6v95.458l-2.26 4.6-11.6 6.24v4.7h62.817v-4.7l-11.6-6.24-2.44-4.6V86.456l5.496-4.836 19.513 7.26c21.39-2.392 40.19-19.536 40.19-39.93 0-28.612-22.613-41.47-54.147-41.742zm-3.012 68.08h-8.04V24.324l13.608-9.857c8.34 2.882 14.27 11.627 14.27 29.56 0 22.694-11.044 31.263-19.837 31.263zM233.688 87.193l-28.71 36.896h-26.224V73.983h11.035l4.4 3.65 10.2 16.22h5v-49.2h-5l-10.2 16.22-4.4 3.65h-11.036V25.97l12.73-9.136h12.03l28.024 34.896h4.983L229.19 0h-5.213l-5.788 7.195h-88.214v4.7l11.6 6.24 2.26 4.6v95.456l-2.26 4.6-10.184 6.24v4.7h100.163l7.117-46.537M913.52 122.79L875.7 50.81l34.8-34.314 9.282-4.6v-4.7H874.5v30.59l-24.884 24.382h-6.826V22.732l2.44-4.6 11.6-6.24v-4.7H794.01v4.7l11.6 6.24 2.26 4.6v95.46l-2.26 4.6-11.6 6.237v4.7h62.817v-4.7l-11.6-6.24-2.44-4.6V83.26l5.61-5.534 30.407 56.004h46.31v-4.7M115.67 122.79L95.395 79.423c-15.315.61-28.903-2.24-28.903-2.24V75c24.693-4.342 47.487-12.46 47.487-34.276 0-27.613-25.178-33.396-54.154-33.525l-.006-.005H.003v4.7l11.6 6.24 2.26 4.6v95.456l-2.26 4.6-11.6 6.24v4.7H62.82v-4.7l-11.6-6.24-2.44-4.6V87.965l10.07-8.575 22.035 54.34h46.382v-4.7l-11.598-6.24zM62.302 14.52c8.184 1.527 14.354 8.963 14.354 27.578 0 21.176-8.315 27.912-21.948 27.912h-5.93V24.266l13.523-9.747zM568.615 69.232v-2.136c22.137-4.47 36.877-13.75 36.877-30.26 0-18.82-16.657-29.642-45.396-29.642h-66.903v4.7l11.6 6.24 2.26 4.6v95.456l-2.26 4.6-11.6 6.24v4.7h68.4c26.272-.708 47.42-10.087 47.42-33.62 0-21.525-17.542-28.874-40.398-30.878zM555.74 14.34c7.565 2.452 13.404 9.734 13.404 25.316 0 19.984-8.392 26.342-21.886 26.342h-5.288V24.266l13.77-9.927zm-7.75 109.75h-6.02V83.983l14.292-10.232c10.236 2.52 16.403 9.83 16.403 25.322 0 20.04-9.634 25.015-24.676 25.015z' })
+    _extends({}, props, { width: width, height: height, viewBox: VIEWBOX }),
+    _react2.default.createElement('path', { fill: fill, d: PATH })
   );
@@ -60,0 +62,0 @@ };

lib/components/Typography/styles.js

@@ -10,3 +10,3 @@ 'use strict';
 
-var colors = _interopRequireWildcard(_colors);
+var _colors2 = _interopRequireDefault(_colors);
 
@@ -17,12 +17,12 @@ 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; } }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var link = exports.link = {
   textDecoration: 'none',
-  color: colors.primary,
+  color: _colors2.default.primary,
   ':visited': {
-    color: colors.primary
+    color: _colors2.default.primary
   },
   ':hover': {
-    color: colors.secondary
+    color: _colors2.default.secondary
   }
@@ -32,3 +32,3 @@ };
 var h1 = exports.h1 = {
-  color: colors.text,
+  color: _colors2.default.text,
   fontFamily: _fonts.fontFamilies.serifBold,
@@ -49,3 +49,3 @@ fontWeight: 'normal',
 var h2 = exports.h2 = {
-  color: colors.text,
+  color: _colors2.default.text,
   fontFamily: _fonts.fontFamilies.serifBold,
@@ -66,3 +66,3 @@ fontWeight: 'normal',
 var lead = exports.lead = {
-  color: colors.text,
+  color: _colors2.default.text,
   fontFamily: _fonts.fontFamilies.serifRegular,
@@ -75,3 +75,3 @@ fontSize: 25,
 var p = exports.p = (_p = {
-  color: colors.text,
+  color: _colors2.default.text,
   fontFamily: _fonts.fontFamilies.serifRegular,
@@ -93,7 +93,7 @@ fontSize: 16,
   fontFamily: _fonts.fontFamilies.sansSerifRegular,
-  color: colors.secondary
+  color: _colors2.default.secondary
 };
 
 var quote = exports.quote = {
-  color: colors.text,
+  color: _colors2.default.text,
   fontSize: 21,
@@ -106,3 +106,3 @@ lineHeight: '32px',
 var interactionH1 = exports.interactionH1 = {
-  color: colors.text,
+  color: _colors2.default.text,
   fontFamily: _fonts.fontFamilies.sansSerifMedium,
@@ -117,3 +117,3 @@ fontWeight: 'normal',
 var interactionH2 = exports.interactionH2 = {
-  color: colors.text,
+  color: _colors2.default.text,
   fontFamily: _fonts.fontFamilies.sansSerifRegular,
@@ -128,3 +128,3 @@ fontWeight: 'normal',
 var interactionH3 = exports.interactionH3 = {
-  color: colors.text,
+  color: _colors2.default.text,
   fontFamily: _fonts.fontFamilies.sansSerifMedium,
@@ -139,3 +139,3 @@ fontWeight: 'normal',
 var interactionP = exports.interactionP = (_interactionP = {
-  color: colors.text,
+  color: _colors2.default.text,
   fontFamily: _fonts.fontFamilies.sansSerifRegular,
@@ -142,0 +142,0 @@ fontSize: 16,

lib/index.js

@@ -27,2 +27,4 @@ 'use strict';
 
+var _fonts = require('./theme/fonts');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -32,4 +34,8 @@
 
+var styleTag = document.createElement('style');
+styleTag.innerHTML = (0, _fonts.fontFaces)();
+document.body.appendChild(styleTag);
+
 _reactDom2.default.render(_react2.default.createElement(_catalog.Catalog, {
-  title: 'Styleguide',
+  title: 'Style Guide',
   theme: _catalogTheme2.default,
@@ -40,6 +46,6 @@ useBrowserHistory: true,
     path: '/',
-    title: 'Brainstorm',
-    src: require('../docs/brainstorm.md')
+    title: 'Overview',
+    src: require('./README.md')
   }, {
-    title: 'Grundlagen',
+    title: 'Base',
     pages: [{
@@ -50,8 +56,8 @@ path: '/logo',
         Logo: require('./components/Logo'),
-        R: require('./components/Logo').R
+        BrandMark: require('./components/Logo/BrandMark')
       },
       src: require('./components/Logo/docs.md')
     }, {
-      path: '/typographie',
-      title: 'Typographie',
+      path: '/typography',
+      title: 'Typography',
       imports: _extends({}, require('./components/Typography'), {
@@ -62,4 +68,4 @@ fontFamilies: require('./theme/fonts').fontFamilies
     }, {
-      path: '/farben',
-      title: 'Farben',
+      path: '/colors',
+      title: 'Colors',
       component: require('./theme/colors.docs.js')
@@ -73,3 +79,3 @@ }, {
   }, {
-    title: 'Komponenten',
+    title: 'Components',
     pages: [{
@@ -83,5 +89,7 @@ path: '/components/button',
     }, {
-      path: '/formulare',
-      title: 'Formulare',
-      imports: _extends({}, require('./components/Typography'), {
+      path: '/forms',
+      title: 'Forms',
+      imports: _extends({
+        css: _glamor.css
+      }, require('./components/Typography'), {
         Button: require('./components/Button'),
@@ -91,36 +99,17 @@ Checkbox: require('./components/Form/Checkbox.js'),
         Field: require('./components/Form/Field.js'),
+        FieldSet: require('./components/Form/FieldSet.js'),
         AutosuggestField: require('./components/Form/AutosuggestField.js'),
-        MaskedInput: require('react-maskedinput')
+        MaskedInput: require('react-maskedinput'),
+        AutosizeInput: require('react-textarea-autosize')
       }),
       src: require('./components/Form/docs.md')
-    }, {
-      path: '/media',
-      title: 'Bilder und Videos',
-      src: require('./components/Media.docs.md')
-    }, {
-      path: '/navigation',
-      title: 'Navigation',
-      src: require('./components/Navigation.docs.md')
-    }, {
-      path: '/share',
-      title: 'Share',
-      src: require('./components/Share.docs.md')
-    }, {
-      path: '/crowdfunding',
-      title: 'Crowdfunding',
-      src: require('./components/Crowdfunding.docs.md')
-    }, {
-      path: '/community',
-      title: 'Community',
-      src: require('./components/Community.docs.md')
-    }, {
-      path: '/kalender',
-      title: 'Kalender',
-      src: require('./components/Calendar.docs.md')
-    }, {
-      path: '/manifest',
-      title: 'Manifest',
-      src: require('./components/Manifest.docs.md')
     }]
+  }, {
+    title: 'Development',
+    pages: [{
+      path: '/dev/process',
+      title: 'Process',
+      src: require('./development/process.docs.md')
+    }]
   }]
 }), document.getElementById('root'));

lib/lib.js

 'use strict';
 
 exports.__esModule = true;
-exports.Checkbox = exports.Radio = exports.Field = exports.Button = exports.R = exports.Logo = exports.fontFaces = exports.fontFamilies = exports.mediaQueries = exports.colors = undefined;
+exports.Interaction = exports.Quote = exports.Label = exports.P = exports.Lead = exports.H2 = exports.H1 = exports.A = exports.linkRule = exports.NarrowContainer = exports.Container = exports.Checkbox = exports.Radio = exports.Field = exports.Button = exports.BrandMark = exports.Logo = exports.fontFaces = exports.fontFamilies = exports.mediaQueries = exports.colors = undefined;
 
+var _colors = require('./theme/colors');
+
+Object.defineProperty(exports, 'colors', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_colors).default;
+  }
+});
+
 var _fonts = require('./theme/fonts');
@@ -29,6 +38,9 @@
 });
-Object.defineProperty(exports, 'R', {
+
+var _BrandMark = require('./components/Logo/BrandMark');
+
+Object.defineProperty(exports, 'BrandMark', {
   enumerable: true,
   get: function get() {
-    return _Logo.R;
+    return _interopRequireDefault(_BrandMark).default;
   }
@@ -75,28 +87,72 @@ });
 
-Object.keys(_Grid).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Grid[key];
-    }
-  });
+Object.defineProperty(exports, 'Container', {
+  enumerable: true,
+  get: function get() {
+    return _Grid.Container;
+  }
 });
+Object.defineProperty(exports, 'NarrowContainer', {
+  enumerable: true,
+  get: function get() {
+    return _Grid.NarrowContainer;
+  }
+});
 
 var _Typography = require('./components/Typography');
 
-Object.keys(_Typography).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Typography[key];
-    }
-  });
+Object.defineProperty(exports, 'linkRule', {
+  enumerable: true,
+  get: function get() {
+    return _Typography.linkRule;
+  }
 });
+Object.defineProperty(exports, 'A', {
+  enumerable: true,
+  get: function get() {
+    return _Typography.A;
+  }
+});
+Object.defineProperty(exports, 'H1', {
+  enumerable: true,
+  get: function get() {
+    return _Typography.H1;
+  }
+});
+Object.defineProperty(exports, 'H2', {
+  enumerable: true,
+  get: function get() {
+    return _Typography.H2;
+  }
+});
+Object.defineProperty(exports, 'Lead', {
+  enumerable: true,
+  get: function get() {
+    return _Typography.Lead;
+  }
+});
+Object.defineProperty(exports, 'P', {
+  enumerable: true,
+  get: function get() {
+    return _Typography.P;
+  }
+});
+Object.defineProperty(exports, 'Label', {
+  enumerable: true,
+  get: function get() {
+    return _Typography.Label;
+  }
+});
+Object.defineProperty(exports, 'Quote', {
+  enumerable: true,
+  get: function get() {
+    return _Typography.Quote;
+  }
+});
+Object.defineProperty(exports, 'Interaction', {
+  enumerable: true,
+  get: function get() {
+    return _Typography.Interaction;
+  }
+});
 
-var _colors = require('./theme/colors');
-
-var allColors = _interopRequireWildcard(_colors);
-
 var _mediaQueries = require('./theme/mediaQueries');
@@ -110,3 +166,2 @@
 
-var colors = exports.colors = allColors;
 var mediaQueries = exports.mediaQueries = allMediaQueries;

lib/theme/colors.docs.js

@@ -13,6 +13,4 @@ 'use strict';
 
-var colors = _interopRequireWildcard(_colors);
+var _colors2 = _interopRequireDefault(_colors);
 
-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; } }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -24,11 +22,16 @@
     null,
-    _react2.default.createElement(_catalog.ColorSpecimen, { span: 3, name: 'Prim\xE4r Farbe', value: colors.primary }),
-    _react2.default.createElement(_catalog.ColorSpecimen, { span: 2, name: 'Second\xE4r', value: colors.secondary }),
-    _react2.default.createElement(_catalog.ColorSpecimen, { span: 1, name: 'Deaktiviert', value: colors.disabled }),
-    _react2.default.createElement(_catalog.ColorSpecimen, { span: 3, name: 'Prim\xE4r Hintergrund', value: colors.primaryBg }),
-    _react2.default.createElement(_catalog.ColorSpecimen, { span: 2, name: 'Second\xE4r Hintergrund', value: colors.secondaryBg }),
-    _react2.default.createElement(_catalog.ColorSpecimen, { span: 1, name: 'Separator', value: colors.divider }),
-    _react2.default.createElement(_catalog.ColorSpecimen, { span: 5, name: 'Text', value: colors.text }),
-    _react2.default.createElement(_catalog.ColorSpecimen, { span: 1, name: 'Fehler', value: colors.error })
+    _react2.default.createElement(
+      _catalog.CodeSpecimen,
+      { lang: 'js' },
+      'import {colors} from \'@project-r/styleguide\''
+    ),
+    _react2.default.createElement(_catalog.ColorSpecimen, { span: 3, name: 'primary', value: _colors2.default.primary }),
+    _react2.default.createElement(_catalog.ColorSpecimen, { span: 2, name: 'secondary', value: _colors2.default.secondary }),
+    _react2.default.createElement(_catalog.ColorSpecimen, { span: 1, name: 'disabled', value: _colors2.default.disabled }),
+    _react2.default.createElement(_catalog.ColorSpecimen, { span: 3, name: 'primaryBg', value: _colors2.default.primaryBg }),
+    _react2.default.createElement(_catalog.ColorSpecimen, { span: 2, name: 'secondaryBg', value: _colors2.default.secondaryBg }),
+    _react2.default.createElement(_catalog.ColorSpecimen, { span: 1, name: 'divider', value: _colors2.default.divider }),
+    _react2.default.createElement(_catalog.ColorSpecimen, { span: 5, name: 'text', value: _colors2.default.text }),
+    _react2.default.createElement(_catalog.ColorSpecimen, { span: 1, name: 'error', value: _colors2.default.error })
   );
 };

lib/theme/colors.js

 'use strict';
 
 exports.__esModule = true;
-var primary = exports.primary = '#3CAD00';
-var primaryBg = exports.primaryBg = '#EBF6E5'; // 10%
-var secondary = exports.secondary = '#4B6359';
-var secondaryBg = exports.secondaryBg = '#F6F8F7'; // 5%
-var disabled = exports.disabled = '#B7C1BD';
 
-var error = exports.error = '#9F2500';
+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 background = exports.background = '#fff';
-var text = exports.text = '#282828';
-var textLabel = exports.textLabel = '#ccc';
+var _env = require('./env');
 
-var divider = exports.divider = '#DADDDC';
+var colors = _extends({
+  primary: '#00508C',
+  primaryBg: '#BFE1FF',
+  secondary: '#00335A',
+  secondaryBg: '#D8EEFF',
+  disabled: '#B8BDC1',
+  text: '#191919',
+  error: '#9E0041',
+  divider: '#DBDCDD'
+}, (0, _env.getJson)('COLORS'));
+
+exports.default = colors;

lib/theme/fonts.js

 'use strict';
 
 exports.__esModule = true;
-var fontFamilies = exports.fontFamilies = {
-  serifRegular: 'Rubis-Regular, Georgia-Regular, Droid-Serif-Regular, serif',
-  serifBold: 'Rubis-Bold, Georgia-Bold, Droid-Serif-Bold, serif',
-  sansSerifRegular: 'GT-America-Standard-Regular, Helvetica-Neue-Regular, Arial-Regular, Roboto-Regular, sans-serif',
-  sansSerifMedium: 'GT-America-Standard-Medium, Helvetica-Neue-Medium, Arial-Bold, Roboto-Medium, sans-serif'
-};
+exports.fontFaces = exports.fontFamilies = undefined;
 
+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 _env = require('./env');
+
+var _env2 = _interopRequireDefault(_env);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var fontFamilies = exports.fontFamilies = _extends({
+  serifRegular: 'Georgia, serif',
+  serifBold: 'Georgia-Bold, serif',
+  sansSerifRegular: 'Helvetica-Neue-Regular, Helvetica Neue, Helvetica, sans-serif',
+  sansSerifMedium: 'Helvetica-Neue-Medium, Helvetica-Bold, sans-serif'
+}, (0, _env.getJson)('FONT_FAMILIES'));
+
 var fontFaces = exports.fontFaces = function fontFaces() {
-  var baseUrl = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '/static/fonts';
-  return '@font-face{font-family:\'Rubis-Regular\';src:url(' + baseUrl + '/rubis-regular.eot);src:url(' + baseUrl + '/rubis-regular.eot?#iefix) format("embedded-opentype"),url(' + baseUrl + '/rubis-regular.woff2) format("woff2"),url(' + baseUrl + '/rubis-regular.woff) format("woff"),url(' + baseUrl + '/rubis-regular.ttf) format("truetype")}@font-face{font-family:\'Rubis-Bold\';src:url(' + baseUrl + '/rubis-bold.eot);src:url(' + baseUrl + '/rubis-bold.eot?#iefix) format("embedded-opentype"),url(' + baseUrl + '/rubis-bold.woff2) format("woff2"),url(' + baseUrl + '/rubis-bold.woff) format("woff"),url(' + baseUrl + '/rubis-bold.ttf) format("truetype")}@font-face{font-family:\'GT-America-Standard-Regular\';src:url(' + baseUrl + '/gt-america-standard-regular.eot);src:url(' + baseUrl + '/gt-america-standard-regular.eot?#iefix) format("embedded-opentype"),url(' + baseUrl + '/gt-america-standard-regular.woff) format("woff"),url(' + baseUrl + '/gt-america-standard-regular.ttf) format("truetype")}@font-face{font-family:\'GT-America-Standard-Medium\';src:url(' + baseUrl + '/gt-america-standard-medium.eot);src:url(' + baseUrl + '/gt-america-standard-medium.eot?#iefix) format("embedded-opentype"),url(' + baseUrl + '/gt-america-standard-medium.woff) format("woff"),url(' + baseUrl + '/gt-america-standard-medium.ttf) format("truetype")}';
+  return _env2.default.FONT_FACES || '';
 };

package.json

 {
   "name": "@project-r/styleguide",
-  "version": "0.4.9",
+  "version": "1.0.0",
   "peerDependencies": {
-    "glamor": "^2.20.24",
+    "glamor": "^2.20.37",
     "react": "^15.4.2",
@@ -14,5 +14,7 @@ "prop-types": "^15.5.7"
     "babel-preset-stage-2": "^6.22.0",
-    "catalog": "^2.5.3",
+    "catalog": "^3.0.0-rc.3",
     "core-js": "^2.4.1",
-    "glamor": "^2.20.24",
+    "cz-conventional-changelog": "^2.0.0",
+    "glamor": "^2.20.37",
+    "husky": "^0.14.3",
     "prop-types": "^15.5.7",
@@ -23,4 +25,7 @@ "react": "^15.4.2",
     "react-maskedinput": "^3.3.4",
-    "react-scripts": "0.9.3",
-    "rimraf": "^2.6.1"
+    "react-scripts": "1.0.10",
+    "react-textarea-autosize": "^5.1.0",
+    "rimraf": "^2.6.1",
+    "semantic-release": "^6.3.6",
+    "validate-commit-msg": "^2.14.0"
   },
@@ -32,2 +37,8 @@ "files": [
   "main": "./lib/lib.js",
+  "author": "Thomas Preusse <[e-mail]> (https://t.preus.se/)",
+  "license": "BSD-3-Clause",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/orbiting/styleguide.git"
+  },
   "scripts": {
@@ -41,4 +52,11 @@ "prepublishOnly": "npm run prebuild && npm run build:lib",
     "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "semantic-release": "semantic-release pre && npm publish && semantic-release post",
+    "commitmsg": "validate-commit-msg"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
   }
-}
+}

README.md

@@ -1,27 +0,14 @@
-# R Styleguide
+This is a living style guide. Subject to constant change.
 
-This styleguide is build with [Catalog](https://interactivethings.github.io/catalog/). You can write documention in Markdown and React.
+It documents the current state and provides implemented React components, published as an npm package.
 
-## Develop
+## License
 
-You will need [Node.js 6.9](https://nodejs.org/en/download/current/) or higher.
+The logo and fonts are the property of their owners (logo—Project R, GT America—GrilliType and Rubis—Nootype), and may not be reproduced without permission.
 
-To start the development server run:
+The source code is «BSD 3-clause» licensed.
 
-```
-npm install
-npm start
-```
-
-## Deploy
-
-Everything pushed on master is automatically deployed to:
-[styleguide.project-r.construction](https://styleguide.project-r.construction/)
-
-User name: `Media`  
-Password: `GetYourGrooveBack`
-
 ## Use it in your React app
 
-The peer dependencies are: `react` and `glamor`
+The peer dependencies are: `react`, `prop-types` and `glamor`.
 
@@ -32,8 +19,7 @@ ```
 
-Then use it in your app:
+Example [button](/components/button):
 
-```
+```code|lang-js
 import {Button} from '@project-r/styleguide'
 
-
 const Crowdfunding = () => (
@@ -47,7 +33,9 @@ <section>
 
+See components in the menu for a full list and documentation.
+
 ### Usage with Next.js
 
-Make sure to include the CSS when server rendering with following `pages/_document.js`:
+`glamor` needs to be integrated into server rendering. For a simple integration use the following `pages/_document.js`:
 
-```
+```code|lang-js
 import Document, {Head, Main, NextScript} from 'next/document'
@@ -80,1 +68,90 @@ import {renderStatic} from 'glamor/server'
 ```
+
+See also:
+- [next.js Example](https://github.com/zeit/next.js/blob/master/examples/with-glamor/pages/_document.js)
+- [Webfonts Integration](/typographie)
+
+### Theming
+
+We want to keep the style guide code simple and will keep the theming options to a minimum. Fork if you want to customize more.
+
+Following environment variables are available for theming:
+
+```
+SG_COLORS={"primary":"Maroon"}
+SG_FONT_FAMILIES={"serifRegular":"'Droid Serif', serif"}
+SG_FONT_FACES=@import url('https://fonts.googleapis.com/css?family=Droid+Serif')
+SG_LOGO_PATH=M0 0 L4 0 L4 1.5 L3 0.5 L2 4 L1 0.5 L0 1.5 Z
+SG_LOGO_VIEWBOX=0 0 4 1.5
+SG_BRAND_MARK_PATH=M0 4 L1 0 L4 4 Z
+SG_BRAND_MARK_VIEWBOX=0 0 4 4
+```
+
+They may be prefixed with `REACT_APP_` for [CRA compatibility](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables). And will be retrieved from `window.ENV`, `window.__NEXT_DATA__.env` or  `process.env`.
+
+## Develop
+
+This style guide is build with [Catalog](https://interactivethings.github.io/catalog/). You can write documentation in Markdown and React.
+
+You will need [Node.js 6.9](https://nodejs.org/en/download/current/) or higher.
+
+To start the development server run:
+
+```
+npm install
+npm run dev
+```
+
+Further reading:
+- [Adding a New Component)](/dev/process)
+
+### Semantic Release
+
+The `master` branch gets auto-released via Travis. The next version is automatically determined according to the past [commit messages](https://github.com/semantic-release/semantic-release#default-commit-message-format).
+
+#### Commit Message Format
+
+```
+<type>(<scope>): <subject>
+<BLANK LINE>
+<body>
+<BLANK LINE>
+<footer>
+```
+
+You can use [`commitizen`](https://github.com/commitizen/cz-cli) via `git cz` to generate a message via interactive prompt.
+
+**Types**
+
+Always changelog relevant: `feat`, `fix`, `perf`
+Others: `docs`, `chore`, `style`, `refactor`, `test`
+
+Scope is optional.
+
+> The body should include the motivation for the change and contrast this with previous behavior.
+
+> The footer should contain any information about Breaking Changes and is also the place to reference GitHub issues that this commit Closes.
+
+##### Quick Examples
+
+**Patch Release**
+
+```
+fix(field): focus issue in IE
+
+Closes #28
+```
+
+**Feature Release**
+
+```
+feat(field): add auto focus option
+```
+
+**Breaking Release**
+
+```
+refactor(field): remove label support
+
+BREAKING CHANGE: We no longer support field labels only placeholders!
+```

src/catalogTheme.js

 import {fontFamilies} from './theme/fonts'
 
 export default {
-  // Colors
-  background: '#fff',
-  pageHeadingBackground: '#fff',
+  pageHeadingBackground: 'rgb(245,245,245)',
   pageHeadingTextColor: '#000',
-  pageHeadingHeight: 200,
   brandColor: '#000',
-  sidebarColor: '#fff',
-  sidebarColorActive: '#000',
-  sidebarColorText: '#999',
-  sidebarColorTextActive: '#000',
-  sidebarColorLine: '#fff',
-  sidebarColorHeading: '#000',
-  textColor: '#000',
-  codeColor: '#00263E',
-  linkColor: '#666',
-  textMedium: '#000',
-  bgLight: '#fff',
-  bgDark: '#f2f2f2',
-  lightColor: '#ccc',
 
-  codeStyles: {
-    tag: {color: '#FF5555'},
-    punctuation: {color: '#535353'},
-    script: {color: '#3F7397'},
-    function: {color: '#FF5555'},
-    keyword: {color: '#3F7397'},
-    string: {color: '#00263E'}
-  },
-
-  // Patterns
-  checkerboardPatternLight: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAF0lEQVQI12P4BAI/QICBFCaYBPNJYQIAkUZftTbC4sIAAAAASUVORK5CYII=',
-  checkerboardPatternDark: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg==',
-
-  // Fonts
-  fontFamily: fontFamilies.serifRegular,
+  fontFamily: fontFamilies.sansSerifRegular,
   fontHeading: fontFamilies.sansSerifMedium,
-  fontMono: "'Source Code Pro', monospace",
+  textColor:  'rgba(0,0,0,0.8)',
+  textMedium: 'rgba(0,0,0,0.8)',
+  linkColor: 'rgb(0,180,0)',
 
-  fontXs:  12,
-  fontS:   14,
-  fontM:   16,
-  fontL:   21,
-  fontXl:  28,
-  fontXxl: 38,
+  sidebarColor: 'rgb(245,245,245)',
+  sidebarColorTextActive: 'rgb(60,100,90)', // rgb(60,100,90)
+  sidebarColorText: '#000',
+  
+  lightColor: 'rgba(60,100,90,0.5)',
 
-  sizeS:   8,
-  sizeM:   15,
-  sizeL:   21,
-  sizeXl:  28,
-  sizeXxl: 38,
+  background:'rgb(245,245,245)',
+  baseFontSize: 20,
 
-
-  // The vertical grid unit. Margin, padding, and line-height are set to multiples
-  // of this value. This is the value that determines the baseline for our vertical
-  // rhythm. The default value of 6px allows more fine tuned designs that still
-  // obey vertical rhythm.
-  baseVerticalUnit: 4,
-
-  // The value that multiplies the baseVerticalUnit to get the baseLineHeight.
-  // This gives type an ideal lineHeight.
-  baseLineMulti: 10,
-
-  // Base font size in pixels.
-  baseFontSize: 16,
-
-  // Modular scale ratio that is used to figure out all the different font sizes
-  msRatio: 1.2
+  bgLight: 'rgb(245,245,245)'
 };

src/components/Button/docs.md

@@ -1,2 +0,2 @@
-##  Primär
+##  Primary
 
@@ -27,3 +27,3 @@ ```react|span-3
 
-## Secondär
+## Secondary
 
@@ -54,6 +54,4 @@ ```react|span-3
 
-## Gross
+## Big
 
-Grosse Buttons sind Block-Elemente und füllen den gegebenen Platz.
-
 ```react|span-3
@@ -71,5 +69,5 @@ <Button big primary>
 
-### Spezialfälle
+### Special Cases
 
-Für Einpassungen, z.B. in einen Header, ist es zulässig eine explizite Höhe zu setzen.
+To fit, e.g. in a header, it's permissible to set an explicit height.
 
@@ -96,3 +94,3 @@ ```react
 
-## Schwarzweiss
+## Black and White
 
@@ -99,0 +97,0 @@ ```react|span-3

src/components/Button/index.js

 import React from 'react'
 import {css, merge, simulate} from 'glamor'
-import * as colors from '../../theme/colors'
+import colors from '../../theme/colors'
 import {fontFamilies} from '../../theme/fonts'
@@ -5,0 +5,0 @@

src/components/Form/AutosuggestField.js

 import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import Autocomplete from 'react-autocomplete'
-import * as colors from '../../theme/colors'
+import colors from '../../theme/colors'
 import Field, {fieldHeight} from './Field'
@@ -6,0 +6,0 @@

src/components/Form/Checkbox.js

 import React from 'react'
 import {css} from 'glamor'
-import * as colors from '../../theme/colors'
+import colors from '../../theme/colors'
 import {fontFamilies} from '../../theme/fonts'
@@ -5,0 +5,0 @@

src/components/Form/docs.md

@@ -1,2 +0,2 @@
-## Felder
+## Fields
 
@@ -17,3 +17,3 @@ ```react|span-3
 
-### Auf- und Abstockung
+### Increase and Decrease
 
@@ -33,3 +33,3 @@ ```react
 
-### Schwarzweiss
+### Black and White
 
@@ -195,3 +195,3 @@ ```react|span-3
 
-## Komposition
+## Composition
 
@@ -219,2 +219,97 @@ ```react|noSource
 </form>
-```
+```
+
+## Field Sets
+
+A component for fast form building and state handling.
+
+```react
+state: {values: {}, errors: {}, dirty: {}}
+---
+<FieldSet
+  values={state.values}
+  errors={state.errors}
+  dirty={state.dirty}
+  onChange={fields => {
+    setState(FieldSet.utils.mergeFields(fields))
+  }}
+  fields={[
+    {
+      label: 'Vorname',
+      name: 'firstName',
+      validator: (value) => (
+        value.trim().length <= 0 && 'Vorname fehlt'
+      )
+    },
+    {
+      label: 'Nachname',
+      name: 'lastName',
+      validator: (value) => (
+        value.trim().length <= 0 && 'Nachname fehlt'
+      )
+    }
+  ]} />
+```
+
+### Custom Fields
+
+It can easily be extended, e.g. to support custom inputs like masks and autosizing:
+
+```react
+state: {values: {}, errors: {}, dirty: {}}
+---
+<FieldSet
+  additionalFieldProps={field => {
+    const fieldProps = {}
+    if (field.autoSize) {
+      fieldProps.renderInput = (props) => (
+        <AutosizeInput
+          {...props}
+          {...css({
+            minHeight: 40,
+            paddingTop: '7px !important',
+            paddingBottom: '6px !important'
+          })} />
+      )
+    }
+    if (field.mask) {
+      fieldProps.renderInput = (props) => (
+        <MaskedInput
+          {...props}
+          {...css({
+            '::placeholder': {
+              color: 'transparent'
+            },
+            ':focus': {
+              '::placeholder': {
+                color: '#ccc'
+              }
+            }
+          })}
+          placeholderChar={field.maskChar || ' '}
+          mask={field.mask} />
+      )
+    }
+    return fieldProps
+  }}
+  fields={[
+    {
+      label: 'Geburtsdatum',
+      name: 'birthday',
+      mask: '11.11.1111',
+      maskChar: '_',
+      validator: value => value.trim().length <= 0 && 'Geburtsdatum fehlt'
+    },
+    {
+      label: 'Gruss',
+      name: 'greetings',
+      autoSize: true
+    }
+  ]}
+  values={state.values}
+  errors={state.errors}
+  dirty={state.dirty}
+  onChange={fields => {
+    setState(FieldSet.utils.mergeFields(fields))
+  }} />
+```

src/components/Form/Field.js

 import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import {css, merge, simulate} from 'glamor'
-import * as colors from '../../theme/colors'
+import colors from '../../theme/colors'
 import {fontFamilies} from '../../theme/fonts'
@@ -6,0 +6,0 @@ import {mUp} from '../../theme/mediaQueries'

src/components/Form/Radio.js

 import React from 'react'
 import {css} from 'glamor'
-import * as colors from '../../theme/colors'
+import colors from '../../theme/colors'
 import {fontFamilies} from '../../theme/fonts'
@@ -5,0 +5,0 @@

src/components/Grid/docs.md

 ## Containers
 
-Container definieren die maximale Breite des Grids und kümmeren sich um das horizontale Padding zum Rand.
+Containers define the max width and ensure a horizontal padding.
 
@@ -18,46 +18,2 @@ ```react
 
-## Grid & Spans
-
-Je nach verfügbarer Fläche nutzen wir ein zwei oder 18 Spalten Grid.
-
-### Props
-
-- `s` Spaltenbreite für kleine Displays. Brüche von 2, z.B. `1/2`
-- `m` Spaltenbreite ab mittel grossem Display. Brüche von 18, z.B. `5/18`
-
-```hint
-`<Span>`s müssen in einem `<Grid>` sein
-```
-
-```react
-<Grid>
-  <Span s='1/2' m='6/18'>Foo</Span>
-  <Span s='1/2' m='12/18'>Bar</Span>
-</Grid>
-```
-
-### Offset
-
-```react
-<Grid>
-  <Span m='1/18' />
-  <Span m='10/18'>
-    Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte! Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern?
-  </Span>
-</Grid>
-```
-
-### Pull Right
-
-```react
-<Grid>
-  <Span s='2/2' m='5/18' style={{float: 'right'}}>
-    Ein rechter Sidebar,<br />
-    der zuerst kommt auf Mobile.
-  </Span>
-  <Span s='2/2' m='1/18' />
-  <Span s='2/2' m='10/18'>
-    Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte! Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern?
-  </Span>
-</Grid>
-```
+We've skipped a multi column grid for now.

src/components/Grid/index.js

 import React from 'react'
 import PropTypes from 'prop-types'
 import {css} from 'glamor'
-import {onlyS, mUp} from '../../theme/mediaQueries'
 
@@ -28,37 +27,3 @@ export const GUTTER = 42
     marginRight: 'auto'
-  }),
-  grid: css({
-    clear: 'both',
-    overflow: 'auto',
-    zoom: '1',
-    marginLeft: `-${GUTTER / 2}px`,
-    width: `calc(100% + ${GUTTER}px)`
-  }),
-  span: css({
-    boxSizing: 'border-box',
-    float: 'left',
-    paddingLeft: `${GUTTER / 2}px`,
-    paddingRight: `${GUTTER / 2}px`,
-    minHeight: 1
-  }),
-  s1of2: css({[onlyS]: {width: '50%'}}),
-  s2of2: css({[onlyS]: {width: '100%'}}),
-  m1of18: css({[mUp]: {width: `${100 / 18 * 1}%`}}),
-  m2of18: css({[mUp]: {width: `${100 / 18 * 2}%`}}),
-  m3of18: css({[mUp]: {width: `${100 / 18 * 3}%`}}),
-  m4of18: css({[mUp]: {width: `${100 / 18 * 4}%`}}),
-  m5of18: css({[mUp]: {width: `${100 / 18 * 5}%`}}),
-  m6of18: css({[mUp]: {width: `${100 / 18 * 6}%`}}),
-  m7of18: css({[mUp]: {width: `${100 / 18 * 7}%`}}),
-  m8of18: css({[mUp]: {width: `${100 / 18 * 8}%`}}),
-  m9of18: css({[mUp]: {width: `${100 / 18 * 9}%`}}),
-  m10of18: css({[mUp]: {width: `${100 / 18 * 10}%`}}),
-  m11of18: css({[mUp]: {width: `${100 / 18 * 11}%`}}),
-  m12of18: css({[mUp]: {width: `${100 / 18 * 12}%`}}),
-  m13of18: css({[mUp]: {width: `${100 / 18 * 13}%`}}),
-  m14of18: css({[mUp]: {width: `${100 / 18 * 14}%`}}),
-  m15of18: css({[mUp]: {width: `${100 / 18 * 15}%`}}),
-  m16of18: css({[mUp]: {width: `${100 / 18 * 16}%`}}),
-  m17of18: css({[mUp]: {width: `${100 / 18 * 17}%`}}),
-  m18of18: css({[mUp]: {width: `${100 / 18 * 18}%`}})
+  })
 }
@@ -86,37 +51,1 @@
 }
-
-export const Grid = ({children}) => (
-  <div {...styles.grid}>
-    {children}
-  </div>
-)
-
-Grid.propTypes = {
-  children: PropTypes.node
-}
-
-const fractionToClassName = (frac = '') => frac.replace(/\//, 'of')
-
-export const Span = ({children, style, s, m}) => {
-  return (
-    <div style={style} {...styles.span}
-      {...styles[`s${fractionToClassName(s)}`]}
-      {...styles[`m${fractionToClassName(m)}`]}>
-      {children}
-    </div>
-  )
-}
-
-Span.propTypes = {
-  children: PropTypes.node,
-  s: PropTypes.oneOf(['1/2', '2/2']),
-  m: PropTypes.oneOf([
-    '1/18', '2/18', '3/18', '4/18', '5/18', '6/18', '7/18', '8/18', '9/18',
-    '10/18', '11/18', '12/18', '13/18', '14/18', '15/18', '16/18', '17/18', '18/18'
-  ])
-}
-
-Span.defaultProps = {
-  s: '2/2',
-  m: '18/18'
-}

src/components/Logo/docs.md

@@ -5,5 +5,5 @@ ```react
 
-Das Logo ist standardmässig responsive und füllt die volle Breite.
+The logo is responsive by default and fills the full width.
 
-## Invertiert
+## Inverted
 
@@ -14,6 +14,4 @@ ```react|dark
 
-## Explizite Grössen
+## Explicit Sizes
 
-### Höhe
-
 ```react
@@ -23,4 +21,2 @@ <Logo height={40} />
 
-### Breite
-
 ```react
@@ -30,3 +26,3 @@ <Logo width={200} />
 
-## R
+## Brand Mark
 
@@ -37,3 +33,3 @@ The responsive brand mark.
 <div style={{maxWidth: 200, margin: '0 auto'}}>
-  <R />
+  <BrandMark />
 </div>
@@ -43,3 +39,3 @@ ```
 ```react
-<R />
+<BrandMark />
 ```

src/components/Logo/index.js

 import React from 'react'
 import {css} from 'glamor'
+import SG from '../../theme/env'
 
-const ratio = 960 / 140
+const VIEWBOX = SG.LOGO_VIEWBOX || '0 0 4 1.5'
+const PATH = SG.LOGO_PATH || 'M0 0 L4 0 L4 1.5 L3 0.5 L2 4 L1 0.5 L0 1.5 Z'
+const VIEWBOX_ARRAY = VIEWBOX.split(' ').map(d => +d)
+const WIDTH = VIEWBOX_ARRAY[2] - VIEWBOX_ARRAY[0]
+const HEIGHT = VIEWBOX_ARRAY[3] - VIEWBOX_ARRAY[1]
 
+const ratio = WIDTH / HEIGHT
+
 const styles = {
@@ -11,3 +18,3 @@ container: css({
     width: '100%',
-    paddingBottom: `${140 / 960 * 100}%`
+    paddingBottom: `${HEIGHT / WIDTH * 100}%`
   }),
@@ -24,4 +31,4 @@ svg: css({
 const LogoSvg = ({width, height, fill, ...props}) => (
-  <svg {...props} width={width} height={height} viewBox='0 0 925.115 136.781'>
-    <path fill={fill} d='M721.463 133.73v-4.7l11.6-6.24 2.26-4.6V22.735l-2.26-4.6-11.6-6.238v-4.7h62.818v4.7l-11.6 6.238-2.438 4.6v95.457l2.44 4.6 11.6 6.24v4.7h-62.82zM424.22 136.78c34.81 0 46.53-20.452 46.53-46.696V26.59l2.438-4.6 17.783-10.094v-4.7h-51.005v4.7l17.963 10.095 2.26 4.6v63.132c0 23.71-10.033 34.027-25.08 34.027-15.55 0-24.078-11.403-24.078-34.753l.002-66.262 2.44-4.6 11.6-6.24v-4.7h-62.82v4.7l11.6 6.24 2.26 4.6V89.54c0 33.305 18.02 47.24 48.107 47.24zM715.02 87.195l-28.378 36.894h-23.156V22.733l2.442-4.6 11.597-6.24v-4.7H614.71v4.7l11.6 6.24 2.258 4.6v95.457l-2.26 4.6-11.6 6.24v4.7h98.6l6.415-46.535M309.033 7.208l-.012-.013h-59.817v4.7l11.6 6.238 2.26 4.6v95.458l-2.26 4.6-11.6 6.24v4.7h62.817v-4.7l-11.6-6.24-2.44-4.6V86.456l5.496-4.836 19.513 7.26c21.39-2.392 40.19-19.536 40.19-39.93 0-28.612-22.613-41.47-54.147-41.742zm-3.012 68.08h-8.04V24.324l13.608-9.857c8.34 2.882 14.27 11.627 14.27 29.56 0 22.694-11.044 31.263-19.837 31.263zM233.688 87.193l-28.71 36.896h-26.224V73.983h11.035l4.4 3.65 10.2 16.22h5v-49.2h-5l-10.2 16.22-4.4 3.65h-11.036V25.97l12.73-9.136h12.03l28.024 34.896h4.983L229.19 0h-5.213l-5.788 7.195h-88.214v4.7l11.6 6.24 2.26 4.6v95.456l-2.26 4.6-10.184 6.24v4.7h100.163l7.117-46.537M913.52 122.79L875.7 50.81l34.8-34.314 9.282-4.6v-4.7H874.5v30.59l-24.884 24.382h-6.826V22.732l2.44-4.6 11.6-6.24v-4.7H794.01v4.7l11.6 6.24 2.26 4.6v95.46l-2.26 4.6-11.6 6.237v4.7h62.817v-4.7l-11.6-6.24-2.44-4.6V83.26l5.61-5.534 30.407 56.004h46.31v-4.7M115.67 122.79L95.395 79.423c-15.315.61-28.903-2.24-28.903-2.24V75c24.693-4.342 47.487-12.46 47.487-34.276 0-27.613-25.178-33.396-54.154-33.525l-.006-.005H.003v4.7l11.6 6.24 2.26 4.6v95.456l-2.26 4.6-11.6 6.24v4.7H62.82v-4.7l-11.6-6.24-2.44-4.6V87.965l10.07-8.575 22.035 54.34h46.382v-4.7l-11.598-6.24zM62.302 14.52c8.184 1.527 14.354 8.963 14.354 27.578 0 21.176-8.315 27.912-21.948 27.912h-5.93V24.266l13.523-9.747zM568.615 69.232v-2.136c22.137-4.47 36.877-13.75 36.877-30.26 0-18.82-16.657-29.642-45.396-29.642h-66.903v4.7l11.6 6.24 2.26 4.6v95.456l-2.26 4.6-11.6 6.24v4.7h68.4c26.272-.708 47.42-10.087 47.42-33.62 0-21.525-17.542-28.874-40.398-30.878zM555.74 14.34c7.565 2.452 13.404 9.734 13.404 25.316 0 19.984-8.392 26.342-21.886 26.342h-5.288V24.266l13.77-9.927zm-7.75 109.75h-6.02V83.983l14.292-10.232c10.236 2.52 16.403 9.83 16.403 25.322 0 20.04-9.634 25.015-24.676 25.015z'/>
+  <svg {...props} width={width} height={height} viewBox={VIEWBOX}>
+    <path fill={fill} d={PATH} />
   </svg>
@@ -56,3 +63,2 @@ )
 
-export {default as R} from './R'
 export default Logo

src/components/Typography/docs.md

@@ -5,9 +5,13 @@ ## Webfonts
 
-- `serifRegular` Rubis Regular
-- `serifBold` Rubis Bold
-- `sansSerifRegular` GT America Standard Regular
-- `sansSerifMedium` GT America Standard Medium
+- `serifRegular`
+- `serifBold`
+- `sansSerifRegular`
+- `sansSerifMedium`
 
-Full font family definitions are available as `fontFamilies` export from the styleguide.
+Full font family definitions are available as `fontFamilies` export from the style guide.
 
+```code|lang-js
+import {fontFamilies} from '@project-r/styleguide'
+```
+
 ```react|no-source
@@ -21,8 +25,4 @@ <pre style={{overflow: 'auto'}}>
 
-The webfonts are licensed for our usage. You are responsible to include the webfonts in your app and track them with our Piwik.
+A helper function to generate the `@font-face` css is available as `fontFaces`. 
 
-You can obtain the files, including a css file with `@font-face` definitions, from our internal filling system under `00 Vorlagen und Design Grundlagen/Webfonts`.
-
-A helper to generate the `@font-face` css is available and takes an optional `baseUrl` (defaults to `/static/fonts`) argument. 
-
 ### Next.js example
@@ -39,7 +39,7 @@
 
-## Redaktioneller Inhalt
+## Editorial Content
 
-Lang, redaktionelle Texte sind in Rubis. Mit Margins, ausser `:first-child` 0 Oben, `:last-child` 0 Unten.
+Long, editorial texts use the serif cuts. With margins, except `:first-child` 0 top, `:last-child` 0 bottom.
 
-### Überschriften
+### Headlines
 
@@ -62,3 +62,3 @@ ```react
 
-### Paragraphen
+### Paragraphs
 
@@ -73,3 +73,3 @@ ```react|responsive
 
-### Zitate
+### Quotes
 
@@ -93,5 +93,5 @@ ```react
 
-Benutzeroberflächen, strukturierte Informationen in GT America. Ohne Margins.
+UI elements and structured information uses the sans serif cuts. Without margins.
 
-### Überschriften
+### Headlines
 
@@ -110,3 +110,3 @@ ```react
 
-### Paragraphen
+### Paragraphs
 
@@ -113,0 +113,0 @@ ```react|responsive

src/components/Typography/styles.js

@@ -1,2 +0,2 @@
-import * as colors from '../../theme/colors'
+import colors from '../../theme/colors'
 import {fontFamilies} from '../../theme/fonts'
@@ -3,0 +3,0 @@ import {mUp} from '../../theme/mediaQueries'

src/index.js

@@ -1,7 +0,7 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import {Catalog} from 'catalog';
-import {simulations} from 'glamor';
-import theme from './catalogTheme';
-import './catalogTheme.css';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import {Catalog} from 'catalog'
+import {simulations, css} from 'glamor'
+import theme from './catalogTheme'
+import './catalogTheme.css'
 
@@ -11,7 +11,13 @@ import 'core-js/fn/array/from'
 
+import {fontFaces} from './theme/fonts';
+
 simulations(true)
 
+const styleTag = document.createElement('style')
+styleTag.innerHTML = fontFaces()
+document.body.appendChild(styleTag)
+
 ReactDOM.render(
   <Catalog
-    title='Styleguide'
+    title='Style Guide'
     theme={theme}
@@ -26,7 +32,7 @@ useBrowserHistory
         path: '/',
-        title: 'Brainstorm',
-        src: require('../docs/brainstorm.md')
+        title: 'Overview',
+        src: require('./README.md')
       },
       {
-        title: 'Grundlagen',
+        title: 'Base',
         pages: [
@@ -38,3 +44,3 @@ {
               Logo: require('./components/Logo'),
-              R: require('./components/Logo').R
+              BrandMark: require('./components/Logo/BrandMark')
             },
@@ -44,4 +50,4 @@ src: require('./components/Logo/docs.md')
           {
-            path: '/typographie',
-            title: 'Typographie',
+            path: '/typography',
+            title: 'Typography',
             imports: {
@@ -54,4 +60,4 @@ ...require('./components/Typography'),
           {
-            path: '/farben',
-            title: 'Farben',
+            path: '/colors',
+            title: 'Colors',
             component: require('./theme/colors.docs.js')
@@ -68,3 +74,3 @@ },
       {
-        title: 'Komponenten',
+        title: 'Components',
         pages: [
@@ -80,5 +86,6 @@ {
           {
-            path: '/formulare',
-            title: 'Formulare',
+            path: '/forms',
+            title: 'Forms',
             imports: {
+              css,
               ...require('./components/Typography'),
@@ -89,44 +96,21 @@ Button: require('./components/Button'),
               Field: require('./components/Form/Field.js'),
+              FieldSet: require('./components/Form/FieldSet.js'),
               AutosuggestField: require('./components/Form/AutosuggestField.js'),
-              MaskedInput: require('react-maskedinput')
+              MaskedInput: require('react-maskedinput'),
+              AutosizeInput: require('react-textarea-autosize')
             },
             src: require('./components/Form/docs.md')
-          },
+          }
+        ]
+      },
+      {
+        title: 'Development',
+        pages: [
           {
-            path: '/media',
-            title: 'Bilder und Videos',
-            src: require('./components/Media.docs.md')
-          },
-          {
-            path: '/navigation',
-            title: 'Navigation',
-            src: require('./components/Navigation.docs.md')
-          },
-          {
-            path: '/share',
-            title: 'Share',
-            src: require('./components/Share.docs.md')
-          },
-          {
-            path: '/crowdfunding',
-            title: 'Crowdfunding',
-            src: require('./components/Crowdfunding.docs.md')
-          },
-          {
-            path: '/community',
-            title: 'Community',
-            src: require('./components/Community.docs.md')
-          },
-          {
-            path: '/kalender',
-            title: 'Kalender',
-            src: require('./components/Calendar.docs.md')
-          },
-          {
-            path: '/manifest',
-            title: 'Manifest',
-            src: require('./components/Manifest.docs.md')
+            path: '/dev/process',
+            title: 'Process',
+            src: require('./development/process.docs.md')
           }
         ]
-      }
+      },
     ]}
@@ -133,0 +117,0 @@ />,

src/lib.js

@@ -1,13 +0,10 @@
-import * as allColors from './theme/colors'
 import * as allMediaQueries from './theme/mediaQueries'
 
-export const colors = allColors
+export {default as colors} from './theme/colors'
 export const mediaQueries = allMediaQueries
 
-export {
-  fontFamilies,
-  fontFaces
-} from './theme/fonts'
+export {fontFamilies, fontFaces} from './theme/fonts'
 
-export {default as Logo, R as R} from './components/Logo'
+export {default as Logo} from './components/Logo'
+export {default as BrandMark} from './components/Logo/BrandMark'
 export {default as Button} from './components/Button'
@@ -17,3 +14,12 @@ export {default as Field} from './components/Form/Field'
 export {default as Checkbox} from './components/Form/Checkbox'
-export * from './components/Grid'
-export * from './components/Typography'
+
+export {Container, NarrowContainer} from './components/Grid'
+export {
+  linkRule, A,
+  H1, H2,
+  Lead,
+  P,
+  Label,
+  Quote,
+  Interaction
+} from './components/Typography'

src/theme/colors.docs.js

 import React from 'react'
-import {Page, ColorSpecimen} from 'catalog'
-import * as colors from './colors'
+import {Page, ColorSpecimen, CodeSpecimen} from 'catalog'
+import colors from './colors'
 
 export default () => (
   <Page>
-    <ColorSpecimen span={3} name='Primär Farbe' value={colors.primary} />
-    <ColorSpecimen span={2} name='Secondär' value={colors.secondary} />
-    <ColorSpecimen span={1} name='Deaktiviert' value={colors.disabled} />
-    <ColorSpecimen span={3} name='Primär Hintergrund' value={colors.primaryBg} />
-    <ColorSpecimen span={2} name='Secondär Hintergrund' value={colors.secondaryBg} />
-    <ColorSpecimen span={1} name='Separator' value={colors.divider} />
+    <CodeSpecimen lang='js'>
+      {`import {colors} from '@project-r/styleguide'`}
+    </CodeSpecimen>
+    <ColorSpecimen span={3} name='primary' value={colors.primary} />
+    <ColorSpecimen span={2} name='secondary' value={colors.secondary} />
+    <ColorSpecimen span={1} name='disabled' value={colors.disabled} />
+    <ColorSpecimen span={3} name='primaryBg' value={colors.primaryBg} />
+    <ColorSpecimen span={2} name='secondaryBg' value={colors.secondaryBg} />
+    <ColorSpecimen span={1} name='divider' value={colors.divider} />
 
-    <ColorSpecimen span={5} name='Text' value={colors.text} />
-    <ColorSpecimen span={1} name='Fehler' value={colors.error} />
+    <ColorSpecimen span={5} name='text' value={colors.text} />
+    <ColorSpecimen span={1} name='error' value={colors.error} />
   </Page>
 )

src/theme/colors.js

@@ -1,13 +0,15 @@
-export const primary = '#3CAD00'
-export const primaryBg = '#EBF6E5' // 10%
-export const secondary = '#4B6359'
-export const secondaryBg = '#F6F8F7' // 5%
-export const disabled = '#B7C1BD'
+import {getJson} from './env'
 
-export const error = '#9F2500'
+const colors = {
+  primary: '#00508C',
+  primaryBg: '#BFE1FF',
+  secondary: '#00335A',
+  secondaryBg: '#D8EEFF',
+  disabled: '#B8BDC1',
+  text: '#191919',
+  error: '#9E0041',
+  divider: '#DBDCDD',
+  ...getJson('COLORS')
+}
 
-export const background = '#fff'
-export const text = '#282828'
-export const textLabel = '#ccc'
-
-export const divider = '#DADDDC'
+export default colors

src/theme/fonts.js

@@ -0,8 +1,11 @@
+import SG, {getJson} from './env'
+
 export const fontFamilies = {
-  serifRegular: 'Rubis-Regular, Georgia-Regular, Droid-Serif-Regular, serif',
-  serifBold: 'Rubis-Bold, Georgia-Bold, Droid-Serif-Bold, serif',
-  sansSerifRegular: 'GT-America-Standard-Regular, Helvetica-Neue-Regular, Arial-Regular, Roboto-Regular, sans-serif',
-  sansSerifMedium: 'GT-America-Standard-Medium, Helvetica-Neue-Medium, Arial-Bold, Roboto-Medium, sans-serif'
+  serifRegular: 'Georgia, serif',
+  serifBold: 'Georgia-Bold, serif',
+  sansSerifRegular: 'Helvetica-Neue-Regular, Helvetica Neue, Helvetica, sans-serif',
+  sansSerifMedium: 'Helvetica-Neue-Medium, Helvetica-Bold, sans-serif',
+  ...getJson('FONT_FAMILIES')
 }
 
-export const fontFaces = (baseUrl = '/static/fonts') => `@font-face{font-family:'Rubis-Regular';src:url(${baseUrl}/rubis-regular.eot);src:url(${baseUrl}/rubis-regular.eot?#iefix) format("embedded-opentype"),url(${baseUrl}/rubis-regular.woff2) format("woff2"),url(${baseUrl}/rubis-regular.woff) format("woff"),url(${baseUrl}/rubis-regular.ttf) format("truetype")}@font-face{font-family:'Rubis-Bold';src:url(${baseUrl}/rubis-bold.eot);src:url(${baseUrl}/rubis-bold.eot?#iefix) format("embedded-opentype"),url(${baseUrl}/rubis-bold.woff2) format("woff2"),url(${baseUrl}/rubis-bold.woff) format("woff"),url(${baseUrl}/rubis-bold.ttf) format("truetype")}@font-face{font-family:'GT-America-Standard-Regular';src:url(${baseUrl}/gt-america-standard-regular.eot);src:url(${baseUrl}/gt-america-standard-regular.eot?#iefix) format("embedded-opentype"),url(${baseUrl}/gt-america-standard-regular.woff) format("woff"),url(${baseUrl}/gt-america-standard-regular.ttf) format("truetype")}@font-face{font-family:'GT-America-Standard-Medium';src:url(${baseUrl}/gt-america-standard-medium.eot);src:url(${baseUrl}/gt-america-standard-medium.eot?#iefix) format("embedded-opentype"),url(${baseUrl}/gt-america-standard-medium.woff) format("woff"),url(${baseUrl}/gt-america-standard-medium.ttf) format("truetype")}`
+export const fontFaces = () => SG.FONT_FACES || ''

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Lines of code

2694

increased by2.98%

Number of low maintenance alerts

1

decreased by-50%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

155

increased by98.72%

Number of low supply chain risk alerts

0

decreased by-100%

Number of medium supply chain risk alerts

1

decreased by-92.86%

Worsened metrics

Total package byte prevSize

107168

decreased by-90.81%

Dev dependency count

19

increased by35.71%

Number of package files

48

decreased by-26.15%

No dependency changes