@flodesk/grain 10.12.0 → 10.12.1

package/es/styles/utilities.js

@@ -96,12 +96,12 @@ var spaceProps = styleConfig.spaceProps,
     borderSideProps = styleConfig.borderSideProps,
     alignProps = styleConfig.alignProps,
     weightProps = styleConfig.weightProps,
-    displayProps = styleConfig.displayProps,
+    textDisplayProps = styleConfig.textDisplayProps,
     zIndexProps = styleConfig.zIndexProps,
     letterSpacingProps = styleConfig.letterSpacingProps,
     textTransformProps = styleConfig.textTransformProps;
 var classAndStyleDeclarationProps = [spaceProps, colorProps, shadowProps, radiusProps, transitionProps, sizeProps, borderColorProps, alignProps];
-var classDeclarationProps = [].concat(classAndStyleDeclarationProps, [positionProps, overflowProps, cursorProps, sizeProps, alignSelfProps, borderWidthProps, weightProps, displayProps, borderSideProps, textTransformProps]);
+var classDeclarationProps = [].concat(classAndStyleDeclarationProps, [positionProps, overflowProps, cursorProps, sizeProps, alignSelfProps, borderWidthProps, weightProps, textDisplayProps, borderSideProps, textTransformProps]);
 var styleDeclarationProps = [].concat(classAndStyleDeclarationProps, [dimensionProps, aspectRatioProps, orderProps, flexProps, opacityProps, zIndexProps, letterSpacingProps]);
 var defaultBorder = "\n  [class*=\"bd\"] {\n    border-color: var(--grn-color-border);\n    border-width: 1px;\n  }\n";
 var utilities = "\n  ".concat(defaultBorder, "\n  ").concat(generateUtilityClassDeclarations(classDeclarationProps), ";\n  ").concat(generateStyleClassDeclarations(styleDeclarationProps), ";\n");

package/es/types.js

@@ -22,6 +22,9 @@ export var positions = ['static', 'relative', 'fixed', 'absolute', 'sticky'];
 export var cursors = ['default', 'pointer'];
 export var sides = ['all', 'left', 'right', 'top', 'bottom', 'x', 'y'];
 export var borderWidths = ['1px', '2px', '3px', '4px'];
+export var textTransforms = ['capitalize', 'uppercase', 'lowercase'];
+export var textDisplays = ['block', 'inline-block', 'inline'];
+export var textAlignments = ['left', 'center', 'right'];
 export var types = {
   color: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.colors)), PropTypes.string]),
   responsiveSpace: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.spaces)), PropTypes.number, PropTypes.string, PropTypes.object]),
@@ -32,12 +35,12 @@ export var types = {
   shadow: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.shadows)), PropTypes.string]),
   position: PropTypes.oneOf(positions),
   responsiveTextSize: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.texts)), PropTypes.string, PropTypes.object]),
-  responsiveTextAlign: PropTypes.oneOfType([PropTypes.oneOf(['left', 'center', 'right']), PropTypes.string, PropTypes.object]),
+  responsiveTextAlign: PropTypes.oneOfType([PropTypes.oneOf(textAlignments), PropTypes.string, PropTypes.object]),
   iconSize: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.icons)), PropTypes.number, PropTypes.string]),
   weight: PropTypes.oneOf(Object.keys(vars.weights)),
   overflow: PropTypes.oneOf(overflows),
   textTag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'label']),
-  textDisplay: PropTypes.oneOf(['block', 'inline-block', 'inline']),
+  textDisplay: PropTypes.oneOf(textDisplays),
   responsiveColumns: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   responsiveRows: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   autoFlow: PropTypes.oneOfType([PropTypes.oneOf(autoFlows), PropTypes.string, PropTypes.object]),

package/es/utilities/style-config.js

@@ -28,7 +28,7 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-import { alignSelfs, borderWidths, cursors, overflows, positions, sides } from '../types';
+import { alignSelfs, borderWidths, cursors, overflows, positions, sides, textAlignments, textDisplays, textTransforms } from '../types';
 import { vars } from '../variables';
 import { getDimension, getSpace, getTextSize, isSpaceVar } from './responsive';
 import { getColor, getRadius, getShadow, getTransition, getWeight, isColorVar, isRadiusVar, isShadowVar, isTrasitionVar } from './styles';
@@ -38,6 +38,7 @@ var shadows = Object.keys(vars.shadows);
 var radii = Object.keys(vars.radii);
 var transitions = [].concat(_toConsumableArray(Object.keys(vars.transitions)), _toConsumableArray(Object.keys(vars.transitionUtils)));
 var sizes = Object.keys(vars.texts);
+var weights = Object.keys(vars.weights);
 
 var borderSideToStyle = function borderSideToStyle(side) {
   if (side === 'all') return 'solid';
@@ -375,9 +376,9 @@ export var styleConfig = {
       property: 'text-align',
       short: 'al'
     }],
-    variables: ['left', 'center', 'right'],
+    variables: textAlignments,
     variableChecker: function variableChecker(value) {
-      return ['left', 'center', 'right'].includes(value);
+      return textAlignments.includes(value);
     },
     isResponsive: true
   },
@@ -387,21 +388,21 @@ export var styleConfig = {
       property: 'font-weight',
       short: 'w'
     }],
-    variables: ['normal', 'medium'],
+    variables: weights,
     variableChecker: function variableChecker(value) {
-      return ['normal', 'medium'].includes(value);
+      return weights.includes(value);
     },
     valueTransformer: getWeight
   },
-  displayProps: {
+  textDisplayProps: {
     props: [{
       propName: 'display',
       property: 'display',
       short: 'd'
     }],
-    variables: ['block', 'inline', 'inline-block'],
+    variables: textDisplays,
     variableChecker: function variableChecker(value) {
-      return ['block', 'inline', 'inline-block'].includes(value);
+      return textDisplays.includes(value);
     }
   },
   letterSpacingProps: {
@@ -417,9 +418,9 @@ export var styleConfig = {
       property: 'text-transform',
       short: 'tt'
     }],
-    variables: ['capitalize', 'uppercase', 'lowercase'],
+    variables: textTransforms,
     variableChecker: function variableChecker(value) {
-      return ['capitalize', 'uppercase', 'lowercase'].includes(value);
+      return textTransforms.includes(value);
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "10.12.0",
+  "version": "10.12.1",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",