@flodesk/grain 10.17.4 → 10.19.0

package/es/utilities/style-config.js

@@ -0,0 +1,442 @@
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.string.includes.js";
+import "core-js/modules/es.array.find.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.object.values.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.symbol.iterator.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.from.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.regexp.exec.js";
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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, 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';
+var spaces = [].concat(_toConsumableArray(Object.keys(vars.spaces)), _toConsumableArray(Object.keys(vars.spaceUtils)));
+var colors = [].concat(_toConsumableArray(Object.keys(vars.colors)), _toConsumableArray(Object.keys(vars.colorUtils)));
+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';
+  var borderConfig = {
+    top: ['top'],
+    right: ['right'],
+    bottom: ['bottom'],
+    left: ['left'],
+    y: ['top', 'bottom'],
+    x: ['right', 'left']
+  };
+  var borderStyles = ['top', 'right', 'bottom', 'left'].map(function (s) {
+    return borderConfig[side].includes(s) ? 'solid' : 'none';
+  });
+  return borderStyles.join(' ');
+};
+
+export var styleConfig = {
+  spaceProps: {
+    props: [{
+      propName: 'padding',
+      property: 'padding',
+      short: 'p'
+    }, {
+      propName: 'paddingTop',
+      property: 'padding-top',
+      short: 'pt'
+    }, {
+      propName: 'paddingBottom',
+      property: 'padding-bottom',
+      short: 'pb'
+    }, {
+      propName: 'paddingLeft',
+      property: 'padding-left',
+      short: 'pl'
+    }, {
+      propName: 'paddingRight',
+      property: 'padding-right',
+      short: 'pr'
+    }, {
+      propName: 'paddingX',
+      property: 'padding-inline',
+      short: 'px'
+    }, {
+      propName: 'paddingY',
+      property: 'padding-block',
+      short: 'py'
+    }, {
+      propName: 'margin',
+      property: 'margin',
+      short: 'm'
+    }, {
+      propName: 'marginTop',
+      property: 'margin-top',
+      short: 'mt'
+    }, {
+      propName: 'marginBottom',
+      property: 'margin-bottom',
+      short: 'mb'
+    }, {
+      propName: 'marginLeft',
+      property: 'margin-left',
+      short: 'ml'
+    }, {
+      propName: 'marginRight',
+      property: 'margin-right',
+      short: 'mr'
+    }, {
+      propName: 'marginX',
+      property: 'margin-inline',
+      short: 'mx'
+    }, {
+      propName: 'marginY',
+      property: 'margin-block',
+      short: 'my'
+    }, {
+      propName: 'top',
+      property: 'top',
+      short: 't'
+    }, {
+      propName: 'bottom',
+      property: 'bottom',
+      short: 'b'
+    }, {
+      propName: 'left',
+      property: 'left',
+      short: 'l'
+    }, {
+      propName: 'right',
+      property: 'right',
+      short: 'r'
+    }],
+    valueTransformer: getSpace,
+    variableChecker: isSpaceVar,
+    variables: spaces,
+    isResponsive: true
+  },
+  dimensionProps: {
+    props: [{
+      propName: 'width',
+      property: 'width',
+      short: 'w'
+    }, {
+      propName: 'minWidth',
+      property: 'min-width',
+      short: 'min-w'
+    }, {
+      propName: 'maxWidth',
+      property: 'max-width',
+      short: 'max-w'
+    }, {
+      propName: 'height',
+      property: 'height',
+      short: 'h'
+    }, {
+      propName: 'minHeight',
+      property: 'min-height',
+      short: 'min-h'
+    }, {
+      propName: 'maxHeight',
+      property: 'max-height',
+      short: 'max-h'
+    }],
+    valueTransformer: getDimension,
+    isResponsive: true
+  },
+  colorProps: {
+    props: [{
+      propName: 'color',
+      property: 'color',
+      short: 'c'
+    }, {
+      propName: 'colorHover',
+      property: 'color',
+      short: 'c-h'
+    }, {
+      propName: 'backgroundColor',
+      property: 'background-color',
+      short: 'bgc'
+    }, {
+      propName: 'backgroundColorHover',
+      property: 'background-color',
+      short: 'bgc-h'
+    }],
+    valueTransformer: getColor,
+    variableChecker: isColorVar,
+    variables: colors
+  },
+  shadowProps: {
+    props: [{
+      propName: 'shadow',
+      property: 'box-shadow',
+      short: 'sh'
+    }, {
+      propName: 'shadowHover',
+      property: 'box-shadow',
+      short: 'sh-h'
+    }],
+    valueTransformer: getShadow,
+    variableChecker: isShadowVar,
+    variables: shadows
+  },
+  radiusProps: {
+    props: [{
+      propName: 'radius',
+      property: 'border-radius',
+      short: 'rad'
+    }],
+    valueTransformer: getRadius,
+    variableChecker: isRadiusVar,
+    variables: radii
+  },
+  orderProps: {
+    props: [{
+      propName: 'order',
+      property: 'order',
+      short: 'ord'
+    }]
+  },
+  flexProps: {
+    props: [{
+      propName: 'flex',
+      property: 'flex',
+      short: 'flx'
+    }],
+    isResponsive: true
+  },
+  zIndexProps: {
+    props: [{
+      propName: 'zIndex',
+      property: 'z-index',
+      short: 'z'
+    }]
+  },
+  positionProps: {
+    props: [{
+      propName: 'position',
+      property: 'position',
+      short: 'pos'
+    }],
+    variableChecker: function variableChecker(value) {
+      return positions.includes(value);
+    },
+    variables: positions
+  },
+  overflowProps: {
+    props: [{
+      propName: 'overflow',
+      property: 'overflow',
+      short: 'of'
+    }, {
+      propName: 'overflowX',
+      property: 'overflow-x',
+      short: 'of-x'
+    }, {
+      propName: 'overflowY',
+      property: 'overflow-y',
+      short: 'of-y'
+    }],
+    variableChecker: function variableChecker(value) {
+      return overflows.includes(value);
+    },
+    variables: overflows
+  },
+  transitionProps: {
+    props: [{
+      propName: 'transition',
+      property: 'transition',
+      short: 'tr'
+    }, {
+      propName: 'transitionHover',
+      property: 'transition',
+      short: 'tr-h'
+    }],
+    valueTransformer: getTransition,
+    variableChecker: isTrasitionVar,
+    variables: transitions
+  },
+  cursorProps: {
+    props: [{
+      propName: 'cursor',
+      property: 'cursor',
+      short: 'cur'
+    }],
+    variableChecker: function variableChecker(value) {
+      return cursors.includes(value);
+    },
+    variables: cursors
+  },
+  aspectRatioProps: {
+    props: [{
+      propName: 'aspectRatio',
+      property: 'aspect-ratio',
+      short: 'ar'
+    }]
+  },
+  sizeProps: {
+    props: [{
+      propName: 'size',
+      property: 'font-size',
+      short: 'txt'
+    }],
+    isResponsive: true,
+    variables: sizes,
+    valueTransformer: getTextSize,
+    variableChecker: function variableChecker(value) {
+      return sizes.includes(value);
+    }
+  },
+  opacityProps: {
+    props: [{
+      propName: 'opacity',
+      property: 'opacity',
+      short: 'op'
+    }, {
+      propName: 'opacityHover',
+      property: 'opacity',
+      short: 'op-h'
+    }]
+  },
+  alignSelfProps: {
+    props: [{
+      propName: 'alignSelf',
+      property: 'align-self',
+      short: 'als'
+    }],
+    variables: alignSelfs,
+    variableChecker: function variableChecker(value) {
+      return alignSelfs.includes(value);
+    }
+  },
+  borderColorProps: {
+    props: [{
+      propName: 'borderColor',
+      property: 'border-color',
+      short: 'bdc'
+    }, {
+      propName: 'borderColorHover',
+      property: 'border-color',
+      short: 'bdc-h'
+    }],
+    valueTransformer: getColor,
+    variableChecker: isColorVar,
+    variables: colors
+  },
+  borderWidthProps: {
+    props: [{
+      propName: 'borderWidth',
+      property: 'border-width',
+      short: 'bdw'
+    }],
+    valueTransformer: function valueTransformer(borderWidth) {
+      return borderWidth;
+    },
+    variables: borderWidths,
+    variableChecker: function variableChecker(value) {
+      return borderWidths.includes(value);
+    }
+  },
+  borderSideProps: {
+    props: [{
+      propName: 'borderSide',
+      property: 'border-style',
+      short: 'bds'
+    }],
+    valueTransformer: borderSideToStyle,
+    variables: sides,
+    variableChecker: function variableChecker(value) {
+      return sides.includes(value);
+    }
+  },
+  alignProps: {
+    props: [{
+      propName: 'align',
+      property: 'text-align',
+      short: 'al'
+    }],
+    variables: textAlignments,
+    variableChecker: function variableChecker(value) {
+      return textAlignments.includes(value);
+    },
+    isResponsive: true
+  },
+  weightProps: {
+    props: [{
+      propName: 'weight',
+      property: 'font-weight',
+      short: 'w'
+    }],
+    variables: weights,
+    variableChecker: function variableChecker(value) {
+      return weights.includes(value);
+    },
+    valueTransformer: getWeight
+  },
+  textDisplayProps: {
+    props: [{
+      propName: 'display',
+      property: 'display',
+      short: 'ds' // instead of 'd' to avoid conflict with _display.scss in frontend
+
+    }],
+    variables: textDisplays,
+    variableChecker: function variableChecker(value) {
+      return textDisplays.includes(value);
+    }
+  },
+  letterSpacingProps: {
+    props: [{
+      propName: 'letterSpacing',
+      property: 'letter-spacing',
+      short: 'ls'
+    }]
+  },
+  textTransformProps: {
+    props: [{
+      propName: 'textTransform',
+      property: 'text-transform',
+      short: 'tt'
+    }],
+    variables: textTransforms,
+    variableChecker: function variableChecker(value) {
+      return textTransforms.includes(value);
+    }
+  }
+};
+export var propNameToShort = function propNameToShort(propName) {
+  var _prop$props$find;
+
+  var prop = Object.values(styleConfig).find(function (_ref) {
+    var props = _ref.props;
+    return props.find(function (_ref2) {
+      var prop = _ref2.propName;
+      return prop === propName;
+    });
+  });
+  return prop === null || prop === void 0 ? void 0 : (_prop$props$find = prop.props.find(function (_ref3) {
+    var prop = _ref3.propName;
+    return prop === propName;
+  })) === null || _prop$props$find === void 0 ? void 0 : _prop$props$find.short;
+};

package/es/utilities/styles.js

@@ -3,6 +3,9 @@ import "core-js/modules/es.array.map.js";
 import { getCssVar, isNumber, isString, u } from '.';
 import { vars, varInfo } from '../variables';
 import { getDimension } from './responsive';
+export var isColorVar = function isColorVar(color) {
+  return color in vars.colorUtils || color in vars.colors;
+};
 export var getColor = function getColor(color) {
   if (color in vars.colorUtils) {
     return getCssVar(varInfo.colorUtils.name, color);
@@ -14,8 +17,11 @@ export var getColor = function getColor(color) {
 
   return color;
 };
+export var isShadowVar = function isShadowVar(shadow) {
+  return shadow in vars.shadows;
+};
 export var getShadow = function getShadow(shadow) {
-  if (shadow in vars.shadows) {
+  if (isShadowVar(shadow)) {
     return getCssVar(varInfo.shadows.name, shadow);
   }
 
@@ -26,8 +32,11 @@ export var getWeight = function getWeight(weight) {
     return getCssVar(varInfo.weights.name, weight);
   }
 };
+export var isRadiusVar = function isRadiusVar(radius) {
+  return radius in vars.radii;
+};
 export var getRadius = function getRadius(radius) {
-  if (radius in vars.radii) {
+  if (isRadiusVar(radius)) {
     return getCssVar(varInfo.radii.name, radius);
   }
 
@@ -35,6 +44,9 @@ export var getRadius = function getRadius(radius) {
   if (isString(radius)) return radius;
   if (isNumber(radius)) return u(radius);
 };
+export var isTrasitionVar = function isTrasitionVar(transition) {
+  return transition in vars.transitionUtils || transition in vars.transitions;
+};
 export var getTransition = function getTransition(transition) {
   if (transition in vars.transitionUtils) {
     return getCssVar(varInfo.transitionUtils.name, transition);

package/es/variables/breakpoints.js

@@ -0,0 +1,9 @@
+export var breakpoints = {
+  tablet: 1169,
+  mobile: 767
+};
+export var deviceShort = {
+  default: 'def',
+  mobile: 'mob',
+  tablet: 'tab'
+};

package/es/variables/colors.js

@@ -82,7 +82,8 @@ export var colors = {
     content2: 'content2',
     content3: 'content3',
     disabledContent: 'disabledContent',
-    icon: 'icon'
+    icon: 'icon',
+    disabledIcon: 'disabledIcon'
   },
   backgrounds: {
     background: 'background',

package/es/variables/index.js

@@ -1,2 +1,3 @@
 export * from './vars';
-export * from './colors';
+export * from './colors';
+export * from './breakpoints';

package/es/variables/vars.js

@@ -34,9 +34,12 @@ export var vars = {
   spaces: {
     xs: 'xs',
     s: 's',
+    s2: 's2',
     m: 'm',
     l: 'l',
+    l2: 'l2',
     xl: 'xl',
+    xl2: 'xl2',
     xxl: 'xxl'
   },
   weights: {

package/package.json

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

package/es/styles/base.css

@@ -1,53 +0,0 @@
-@import './variables.css';
-@import './colors/core.css';
-@import './colors/theme.css';
-@import './colors/experimental.css';
-@import './shadows.css';
-
-:root {
-  --grn-lineHeight-fixed: 7px;
-  --grn-lineHeight-relative: 0.9em;
-  --grn-lineHeight-global: calc(var(--grn-lineHeight-fixed) + var(--grn-lineHeight-relative));
-
-  --grn-font-global: 'Flodesk Sans', sans-serif;
-  --grn-radius-button: var(--grn-radius-s);
-}
-
-.grn-context, .grn-context * {
-  line-height: var(--grn-lineHeight-global);
-  outline-color: var(--grn-color-selection);
-}
-
-.grn-context {
-  font-family: var(--grn-font-global);
-  font-size: var(--grn-text-m);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-[data-theme],
-.grn-context {
-  color: var(--grn-color-content);
-}
-
-*, *:before, *:after {
-  box-sizing: border-box;
-}
-
-.grn-link-context a {
-  transition: var(--grn-transition-slow);
-  text-underline-position: under;
-  text-underline-offset: calc(2px - 0.1em);
-  color: inherit;
-  cursor: pointer;
-  text-decoration-color: var(--grn-color-fade3);
-}
-
-.grn-link-context a:hover {
-  transition: var(--grn-transition-fast);
-  text-decoration-color: currentColor;
-}
-
-.grn-link-context a:active {
-  transition: var(--grn-transition-xxFast);
-}

package/es/styles/colors/core.css

@@ -1,74 +0,0 @@
-:root {
-  --white: hsl(0 0% 100%);
-  --H: 13.85;
-  --S: 7%;
-  --HS: var(--H) var(--S);
-  --bfS: 20%;
-  --wfS: calc(100% - var(--bfS));
-}
-
-:root {
-  --redHS: 6 55%;
-  --redL: 52%;
-
-  --grn-color-blue: hsl(218 74% 54%);
-  --grn-color-red: hsl(var(--redHS) var(--redL));
-  --grn-color-yellow: hsl(44 99% 59%);
-  --grn-color-green: hsl(153 22% 57%);
-}
-
-:root, [data-experimental] {
-  --grn-color-shadeTone13: hsl(var(--H) 20% 10%);
-  --grn-color-shadeTone12: hsl(var(--H) 22% 11.5%);
-  --grn-color-shadeTone11: hsl(var(--H) 15% 15%);
-  --grn-color-shadeTone10: hsl(var(--H) 12% 21%);
-  --grn-color-shadeTone9: hsl(var(--H) 9% 28%);
-  --grn-color-shadeTone8: hsl(var(--H) 7% 38%);
-  --grn-color-shadeTone7: hsl(var(--H) 5% 51%);
-  --grn-color-shadeTone6: hsl(var(--H) 6% 70%);
-  --grn-color-shadeTone5: hsl(var(--H) 7% 82%);
-  --grn-color-shadeTone4: hsl(var(--H) 7% 90%);
-  --grn-color-shadeTone3: hsl(var(--H) 7% 95%);
-  --grn-color-shadeTone2: hsl(var(--H) 6% 97.5%);
-  --grn-color-shadeTone1: hsl(var(--H) 6% 100%);
-
-  --fadeA10: 73%;
-  --fadeA9: 66%;
-  --fadeA8: 59%;
-  --fadeA7: 52%;
-  --fadeA6: 45%;
-  --fadeA5: 38%;
-  --fadeA4: 31%;
-  --fadeA3: 24%;
-  --fadeA2: 17%;
-  --fadeA1: 10%;
-
-  --grn-color-lightFade10: hsl(var(--H) 7% var(--wfS) / var(--fadeA10));
-  --grn-color-lightFade9:  hsl(var(--H) 7% var(--wfS) / var(--fadeA9));
-  --grn-color-lightFade8:  hsl(var(--H) 7% var(--wfS) / var(--fadeA8));
-  --grn-color-lightFade7:  hsl(var(--H) 7% var(--wfS) / var(--fadeA7));
-  --grn-color-lightFade6:  hsl(var(--H) 7% var(--wfS) / var(--fadeA6));
-  --grn-color-lightFade5:  hsl(var(--H) 7% var(--wfS) / var(--fadeA5));
-  --grn-color-lightFade4:  hsl(var(--H) 7% var(--wfS) / var(--fadeA4));
-  --grn-color-lightFade3:  hsl(var(--H) 7% var(--wfS) / var(--fadeA3));
-  --grn-color-lightFade2:  hsl(var(--H) 7% var(--wfS) / var(--fadeA2));
-  --grn-color-lightFade1:  hsl(var(--H) 7% var(--wfS) / var(--fadeA1));
-
-  --grn-color-darkFade10: hsl(var(--H) 7% var(--bfS) / var(--fadeA10));
-  --grn-color-darkFade9:  hsl(var(--H) 7% var(--bfS) / var(--fadeA9));
-  --grn-color-darkFade8:  hsl(var(--H) 7% var(--bfS) / var(--fadeA8));
-  --grn-color-darkFade7:  hsl(var(--H) 7% var(--bfS) / var(--fadeA7));
-  --grn-color-darkFade6:  hsl(var(--H) 7% var(--bfS) / var(--fadeA6));
-  --grn-color-darkFade5:  hsl(var(--H) 7% var(--bfS) / var(--fadeA5));
-  --grn-color-darkFade4:  hsl(var(--H) 9% var(--bfS) / var(--fadeA4));
-  --grn-color-darkFade3:  hsl(var(--H) 11% var(--bfS) / var(--fadeA3));
-  --grn-color-darkFade2:  hsl(var(--H) 13% var(--bfS) / var(--fadeA2));
-  --grn-color-darkFade1:  hsl(var(--H) 15% var(--bfS) / var(--fadeA1));
-}
-
-:root {
-  --grn-color-warning: var(--grn-color-yellow);
-  --grn-color-danger: var(--grn-color-red);
-  --grn-color-success: var(--grn-color-green);
-  --grn-color-selection: var(--grn-color-blue);
-}

package/es/styles/colors/experimental.css

@@ -1,3 +0,0 @@
-[data-experimental="true"] {
-  --grn-radius-button: 1000px;
-}