@flodesk/grain 2.20.0 → 2.20.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/es/components/arrange.js +33 -260
  2. package/es/components/box.js +62 -995
  3. package/es/components/button.js +36 -100
  4. package/es/components/icon-button.js +30 -93
  5. package/es/components/icon-toggle.js +39 -94
  6. package/es/components/icon.js +30 -126
  7. package/es/components/index.js +11 -107
  8. package/es/components/stack.js +26 -81
  9. package/es/components/text-button.js +28 -66
  10. package/es/components/text-input.js +76 -138
  11. package/es/components/text-toggle.js +32 -78
  12. package/es/components/text.js +33 -159
  13. package/es/foundational/index.js +9 -23
  14. package/es/hooks/index.js +1 -15
  15. package/es/hooks/useMedia.js +21 -17
  16. package/es/icons/icon-align-center.js +5 -43
  17. package/es/icons/icon-align-left.js +6 -44
  18. package/es/icons/icon-align-right.js +6 -44
  19. package/es/icons/icon-arrow-down.js +5 -43
  20. package/es/icons/icon-arrow-left.js +5 -43
  21. package/es/icons/icon-arrow-right.js +5 -43
  22. package/es/icons/icon-arrow-up.js +5 -43
  23. package/es/icons/icon-browser.js +9 -47
  24. package/es/icons/icon-chart.js +5 -43
  25. package/es/icons/icon-check.js +7 -45
  26. package/es/icons/icon-chevron-down.js +5 -43
  27. package/es/icons/icon-chevron-horizontal.js +5 -43
  28. package/es/icons/icon-chevron-left.js +5 -43
  29. package/es/icons/icon-chevron-right.js +10 -48
  30. package/es/icons/icon-chevron-up.js +10 -48
  31. package/es/icons/icon-chevron-vertical.js +13 -51
  32. package/es/icons/icon-clip.js +5 -43
  33. package/es/icons/icon-clock.js +6 -44
  34. package/es/icons/icon-crop.js +5 -43
  35. package/es/icons/icon-cross.js +5 -43
  36. package/es/icons/icon-download.js +8 -46
  37. package/es/icons/icon-duplicate.js +6 -44
  38. package/es/icons/icon-ellipsis.js +7 -45
  39. package/es/icons/icon-file.js +5 -43
  40. package/es/icons/icon-folder-add.js +5 -43
  41. package/es/icons/icon-folder.js +5 -43
  42. package/es/icons/icon-gear.js +6 -44
  43. package/es/icons/icon-globe.js +5 -43
  44. package/es/icons/icon-heart.js +5 -43
  45. package/es/icons/icon-image.js +5 -43
  46. package/es/icons/icon-link.js +6 -44
  47. package/es/icons/icon-mail.js +5 -43
  48. package/es/icons/icon-minus.js +5 -43
  49. package/es/icons/icon-monitor.js +5 -43
  50. package/es/icons/icon-pencil.js +5 -43
  51. package/es/icons/icon-phone.js +5 -43
  52. package/es/icons/icon-plus.js +5 -43
  53. package/es/icons/icon-redo.js +5 -43
  54. package/es/icons/icon-search.js +6 -44
  55. package/es/icons/icon-send.js +5 -43
  56. package/es/icons/icon-share.js +5 -43
  57. package/es/icons/icon-smile.js +8 -46
  58. package/es/icons/icon-switch.js +5 -43
  59. package/es/icons/icon-tablet.js +5 -43
  60. package/es/icons/icon-text-align-center.js +5 -43
  61. package/es/icons/icon-text-align-left.js +5 -43
  62. package/es/icons/icon-text-align-right.js +5 -43
  63. package/es/icons/icon-trash.js +5 -43
  64. package/es/icons/icon-type.js +5 -43
  65. package/es/icons/icon-undo.js +5 -43
  66. package/es/icons/icon-upload.js +8 -46
  67. package/es/icons/index.js +51 -417
  68. package/es/index.js +3 -52
  69. package/es/types.js +23 -38
  70. package/es/utilities/helpers.js +22 -50
  71. package/es/utilities/index.js +21 -145
  72. package/es/utilities/responsive.js +58 -79
  73. package/es/utilities/styles.js +45 -89
  74. package/es/variables.js +101 -110
  75. package/package.json +2 -2
package/es/variables.js CHANGED
@@ -1,126 +1,117 @@
1
- "use strict";
2
-
3
- require("core-js/modules/es.object.define-property.js");
4
-
5
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports.vars = exports.varNames = exports.grnPrefix = void 0;
11
-
12
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
-
14
- var _vars;
15
-
16
- var grnPrefix = "--grn-";
17
- exports.grnPrefix = grnPrefix;
18
- var varNames = {
19
- text: {
20
- group: "texts",
1
+ export var grnPrefix = "--grn-";
2
+ export var vars = {
3
+ texts: {
4
+ s: "s",
5
+ m: "m",
6
+ l: "l",
7
+ xl: "xl",
8
+ xxl: "xxl"
9
+ },
10
+ icons: {
11
+ s: "s",
12
+ m: "m",
13
+ l: "l",
14
+ xl: "xl",
15
+ xxl: "xxl"
16
+ },
17
+ spaces: {
18
+ xs: "xs",
19
+ s: "s",
20
+ m: "m",
21
+ l: "l",
22
+ xl: "xl",
23
+ xxl: "xxl"
24
+ },
25
+ weights: {
26
+ normal: "normal",
27
+ medium: "medium",
28
+ semiBold: "semiBold"
29
+ },
30
+ radii: {
31
+ s: "s",
32
+ m: "m",
33
+ l: "l"
34
+ },
35
+ shadows: {
36
+ s: "s",
37
+ m: "m",
38
+ l: "l"
39
+ },
40
+ transitions: {
41
+ slow: "slow",
42
+ fast: "fast",
43
+ xFast: "xFast"
44
+ },
45
+ colors: {
46
+ greys: {
47
+ grey8: "grey8",
48
+ grey7: "grey7",
49
+ grey6: "grey6",
50
+ grey5: "grey5",
51
+ grey4: "grey4",
52
+ grey3: "grey3",
53
+ grey2: "grey2",
54
+ grey1: "grey1"
55
+ },
56
+ fades: {
57
+ fade7: "fade7",
58
+ fade6: "fade6",
59
+ fade5: "fade5",
60
+ fade4: "fade4",
61
+ fade3: "fade3",
62
+ fade2: "fade2",
63
+ fade1: "fade1"
64
+ },
65
+ bases: {
66
+ blue: "blue",
67
+ red: "red"
68
+ },
69
+ semantics: {
70
+ body: "body",
71
+ bodyDimmed: "bodyDimmed",
72
+ accent: "accent",
73
+ backgroundSecondary: "backgroundSecondary",
74
+ background: "background",
75
+ overlay: "overlay",
76
+ border: "border",
77
+ selection: "selection",
78
+ danger: "danger",
79
+ disabledContent: "disabledContent",
80
+ disabledBackground: "disabledBackground"
81
+ }
82
+ }
83
+ };
84
+ export var varInfo = {
85
+ texts: {
86
+ name: 'texts',
21
87
  prefix: "text"
22
88
  },
23
- icon: {
24
- group: "icons",
89
+ icons: {
90
+ name: 'icons',
25
91
  prefix: "icon"
26
92
  },
27
- space: {
28
- group: "spaces",
93
+ spaces: {
94
+ name: 'spaces',
29
95
  prefix: "space"
30
96
  },
31
- weight: {
32
- group: "weights",
97
+ weights: {
98
+ name: 'weights',
33
99
  prefix: "weight"
34
100
  },
35
- radius: {
36
- group: "radiuses",
101
+ radii: {
102
+ name: 'radii',
37
103
  prefix: "radius"
38
104
  },
39
- shadow: {
40
- group: "shadows",
105
+ shadows: {
106
+ name: 'shadows',
41
107
  prefix: "shadow"
42
108
  },
43
- transition: {
44
- group: "transitions",
109
+ transitions: {
110
+ name: 'transitions',
45
111
  prefix: "transition"
46
112
  },
47
- color: {
48
- group: "colors",
113
+ colors: {
114
+ name: 'colors',
49
115
  prefix: "color"
50
116
  }
51
- };
52
- exports.varNames = varNames;
53
- var vars = (_vars = {}, (0, _defineProperty2.default)(_vars, varNames.text.group, {
54
- s: "s",
55
- m: "m",
56
- l: "l",
57
- xl: "xl",
58
- xxl: "xxl"
59
- }), (0, _defineProperty2.default)(_vars, varNames.icon.group, {
60
- s: "s",
61
- m: "m",
62
- l: "l",
63
- xl: "xl",
64
- xxl: "xxl"
65
- }), (0, _defineProperty2.default)(_vars, varNames.space.group, {
66
- xs: "xs",
67
- s: "s",
68
- m: "m",
69
- l: "l",
70
- xl: "xl",
71
- xxl: "xxl"
72
- }), (0, _defineProperty2.default)(_vars, varNames.weight.group, {
73
- normal: "normal",
74
- medium: "medium",
75
- semiBold: "semiBold"
76
- }), (0, _defineProperty2.default)(_vars, varNames.radius.group, {
77
- s: "s",
78
- m: "m",
79
- l: "l"
80
- }), (0, _defineProperty2.default)(_vars, varNames.shadow.group, {
81
- s: "s",
82
- m: "m",
83
- l: "l"
84
- }), (0, _defineProperty2.default)(_vars, varNames.transition.group, {
85
- slow: "slow",
86
- fast: "fast",
87
- xFast: "xFast"
88
- }), (0, _defineProperty2.default)(_vars, varNames.color.group, {
89
- greys: {
90
- grey8: "grey8",
91
- grey7: "grey7",
92
- grey6: "grey6",
93
- grey5: "grey5",
94
- grey4: "grey4",
95
- grey3: "grey3",
96
- grey2: "grey2",
97
- grey1: "grey1"
98
- },
99
- fades: {
100
- fade7: "fade7",
101
- fade6: "fade6",
102
- fade5: "fade5",
103
- fade4: "fade4",
104
- fade3: "fade3",
105
- fade2: "fade2",
106
- fade1: "fade1"
107
- },
108
- baseColors: {
109
- blue: "blue",
110
- red: "red"
111
- },
112
- semanticColors: {
113
- body: "body",
114
- bodyDimmed: "bodyDimmed",
115
- accent: "accent",
116
- backgroundSecondary: "backgroundSecondary",
117
- background: "background",
118
- overlay: "overlay",
119
- border: "border",
120
- selection: "selection",
121
- danger: "danger",
122
- disabledContent: "disabledContent",
123
- disabledBackground: "disabledBackground"
124
- }
125
- }), _vars);
126
- exports.vars = vars;
117
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flodesk/grain",
3
- "version": "2.20.0",
3
+ "version": "2.20.3",
4
4
  "description": "Flodesk design system",
5
5
  "module": "es/index.js",
6
6
  "author": "Flodesk",
@@ -12,7 +12,7 @@
12
12
  "start": "next start",
13
13
  "lint": "next lint",
14
14
  "semantic-release": "semantic-release",
15
- "build:es": "del es/* && cross-env NODE_ENV=production babel --config-file ./babel.config.es.js --out-dir es --copy-files src"
15
+ "build:es": "del es/* && cross-env NODE_ENV=production babel --no-babelrc --config-file ./babel.config.es.js --out-dir es --copy-files src"
16
16
  },
17
17
  "publishConfig": {
18
18
  "access": "public"