@medyll/cssfabric 0.1.12 → 0.2.2

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 (159) hide show
  1. package/.github/workflows/main.yml +33 -0
  2. package/.idea/cssfabric.iml +4 -1
  3. package/README.md +38 -240
  4. package/bin/index.js +2 -1
  5. package/{cssfabric.json → cssfabric.sass.js} +3 -3
  6. package/gulpfile.js +77 -143
  7. package/package.json +69 -69
  8. package/src/app.css +107 -0
  9. package/src/app.d.ts +15 -0
  10. package/src/app.html +13 -0
  11. package/src/components/Header.svelte +17 -0
  12. package/src/components/HeaderSiteTitle.svelte +12 -0
  13. package/src/components/InnerMenu.svelte +27 -0
  14. package/src/components/SubHeader.svelte +10 -0
  15. package/src/components/SubHeaderH.svelte +3 -0
  16. package/src/components/SubSubHeader.svelte +22 -0
  17. package/src/components/demo/DemoElement.svelte +86 -0
  18. package/src/components/demo/elements/DemoElementBackgroundColor.svelte +7 -0
  19. package/src/components/demo/elements/DemoElementBorder.svelte +8 -0
  20. package/src/components/demo/elements/DemoElementBorderColor.svelte +8 -0
  21. package/src/components/demo/elements/DemoElementColor.svelte +8 -0
  22. package/src/components/demo/elements/DemoElementGrid.svelte +53 -0
  23. package/src/components/demo/elements/DemoElementMargin.svelte +8 -0
  24. package/src/components/demo/elements/DemoElementPadding.svelte +10 -0
  25. package/src/components/demo/elements/DemoElementScale.svelte +9 -0
  26. package/src/components/demo/elements/DemoElementTable.svelte +34 -0
  27. package/src/components/demo/elements/DemoElementText.svelte +10 -0
  28. package/src/components/demo/proxy/ProxyDsp.svelte +12 -0
  29. package/src/components/demo/proxy/ProxyDspArray.svelte +19 -0
  30. package/src/components/demo/proxy/ProxyDspObject.svelte +17 -0
  31. package/src/components/docs/Docs.svelte +97 -0
  32. package/src/components/docs/DocsClassNames.svelte +34 -0
  33. package/src/components/docs/DocsDemo.svelte +84 -0
  34. package/src/components/header/Header.svelte +105 -0
  35. package/src/components/header/svelte-logo.svg +1 -0
  36. package/src/cssfabric/modules/_cssfabric-config.scss +15 -5
  37. package/src/cssfabric/modules/base/base.scss +1 -6
  38. package/src/cssfabric/modules/box/_box-build.scss +20 -3
  39. package/src/cssfabric/modules/box/_box-vars.scss +1 -1
  40. package/src/cssfabric/modules/css-fabric.scss +1 -1
  41. package/src/cssfabric/modules/menu/_menu-build.scss +9 -8
  42. package/src/cssfabric/modules/vars.scss +3 -2
  43. package/src/hooks.ts +27 -0
  44. package/src/index.ts +1 -1
  45. package/src/lib/_generated/cssFabric.vars.json +13 -0
  46. package/src/{_generated → lib/_generated}/export.variables.md +0 -0
  47. package/src/{_generated → lib/_generated}/index.d.ts +0 -0
  48. package/src/{_generated → lib/_generated}/readme.md +0 -0
  49. package/src/lib/init/importCssVars.ts +3 -0
  50. package/src/{scripts → lib/scripts}/cssfabric.ts +1 -1
  51. package/src/{scripts → lib/scripts}/cssfabricClassNames.ts +0 -0
  52. package/src/{scripts → lib/scripts}/index.d.ts +0 -0
  53. package/src/{scripts → lib/scripts}/index.ts +0 -0
  54. package/src/lib/scripts/utils.ts +37 -0
  55. package/{lib/styles/core → src/lib/styles}/animation/animation.css +0 -0
  56. package/{lib/styles/core → src/lib/styles}/animation/animation.min.css +0 -0
  57. package/{lib/styles/core → src/lib/styles}/base/base.css +0 -7
  58. package/src/lib/styles/base/base.min.css +1 -0
  59. package/{lib/styles/core → src/lib/styles}/box/box.css +127 -111
  60. package/src/lib/styles/box/box.min.css +1 -0
  61. package/{lib/styles/core → src/lib/styles}/box/box.responsive.css +508 -444
  62. package/src/lib/styles/box/box.responsive.min.css +1 -0
  63. package/{lib/styles/core → src/lib/styles}/color/color.css +0 -0
  64. package/src/lib/styles/color/color.min.css +1 -0
  65. package/{lib/styles/core → src/lib/styles}/color/color.responsive.css +0 -0
  66. package/src/lib/styles/color/color.responsive.min.css +1 -0
  67. package/src/lib/styles/cssfabric.css +61792 -0
  68. package/src/lib/styles/cssfabric.min.css +168 -0
  69. package/src/lib/styles/cssfabric.responsive.css +200596 -0
  70. package/src/lib/styles/cssfabric.responsive.min.css +108 -0
  71. package/{lib/styles/core → src/lib/styles}/flex/flex.css +0 -0
  72. package/src/lib/styles/flex/flex.min.css +1 -0
  73. package/{lib/styles/core → src/lib/styles}/flex/flex.responsive.css +0 -0
  74. package/src/lib/styles/flex/flex.responsive.min.css +1 -0
  75. package/{lib/styles/core → src/lib/styles}/grid/grid.css +0 -0
  76. package/src/lib/styles/grid/grid.min.css +1 -0
  77. package/{lib/styles/core → src/lib/styles}/grid/grid.responsive.css +0 -0
  78. package/src/lib/styles/grid/grid.responsive.min.css +1 -0
  79. package/{lib/styles/core → src/lib/styles}/menu/menu.css +16 -12
  80. package/src/lib/styles/menu/menu.min.css +1 -0
  81. package/{lib/styles/core → src/lib/styles}/menu/menu.responsive.css +64 -48
  82. package/src/lib/styles/menu/menu.responsive.min.css +1 -0
  83. package/{lib/styles/core → src/lib/styles}/overflow/overflow.css +0 -0
  84. package/{lib/styles/core → src/lib/styles}/overflow/overflow.min.css +0 -0
  85. package/{lib/styles/core → src/lib/styles}/overflow/overflow.responsive.css +0 -0
  86. package/src/lib/styles/overflow/overflow.responsive.min.css +1 -0
  87. package/{lib/styles/core → src/lib/styles}/scale/scale.css +0 -0
  88. package/{lib/styles/core → src/lib/styles}/scale/scale.min.css +0 -0
  89. package/{lib/styles/core → src/lib/styles}/scale/scale.responsive.css +0 -0
  90. package/src/lib/styles/scale/scale.responsive.min.css +1 -0
  91. package/{lib/styles/core → src/lib/styles}/table/table.css +0 -0
  92. package/src/lib/styles/table/table.min.css +1 -0
  93. package/{lib/styles/core → src/lib/styles}/table/table.responsive.css +0 -0
  94. package/src/lib/styles/table/table.responsive.min.css +1 -0
  95. package/{lib/styles/core → src/lib/styles}/text/text.css +0 -0
  96. package/src/lib/styles/text/text.min.css +1 -0
  97. package/{lib/styles/core → src/lib/styles}/text/text.responsive.css +0 -0
  98. package/src/lib/styles/text/text.responsive.min.css +1 -0
  99. package/{lib/styles/core → src/lib/styles}/theme/theme.css +0 -0
  100. package/{lib/styles/core → src/lib/styles}/theme/theme.min.css +0 -0
  101. package/{lib/styles/core → src/lib/styles}/vars.css +6 -2
  102. package/src/lib/styles/vars.min.css +1 -0
  103. package/{lib/styles/core → src/lib/styles}/zindex/zindex.css +0 -0
  104. package/{lib/styles/core → src/lib/styles}/zindex/zindex.min.css +0 -0
  105. package/src/routes/__layout.svelte +91 -0
  106. package/src/routes/cssfabric-modules/[module]/__layout.svelte +75 -0
  107. package/src/routes/cssfabric-modules/[module]/classnames/index.svelte +24 -0
  108. package/src/routes/cssfabric-modules/[module]/demo/index.svelte +24 -0
  109. package/src/routes/cssfabric-modules/[module]/docs/index.svelte +30 -0
  110. package/src/routes/cssfabric-modules/[module]/index.svelte +3 -0
  111. package/src/routes/cssfabric-modules/__layout.svelte +26 -0
  112. package/src/routes/cssfabric-modules/index.svelte +0 -0
  113. package/src/routes/index.svelte +62 -0
  114. package/src/routes/installation/__layout.svelte +1 -0
  115. package/src/routes/installation/index.svelte +28 -0
  116. package/src/scripts/utils.ts +26 -37
  117. package/src/utils.ts +71 -0
  118. package/static/favicon.png +0 -0
  119. package/static/robots.txt +3 -0
  120. package/svelte.config.js +25 -0
  121. package/tsconfig.json +3 -46
  122. package/cssfabric.config.js +0 -3
  123. package/lib/_generated/export.variables.json +0 -583
  124. package/lib/index.d.ts +0 -2
  125. package/lib/index.js +0 -7
  126. package/lib/scripts/cssfabric.d.ts +0 -24
  127. package/lib/scripts/cssfabric.js +0 -48
  128. package/lib/scripts/cssfabricClassNames.d.ts +0 -14
  129. package/lib/scripts/cssfabricClassNames.js +0 -150
  130. package/lib/scripts/index.d.ts +0 -2
  131. package/lib/scripts/index.js +0 -6
  132. package/lib/scripts/utils.d.ts +0 -5
  133. package/lib/scripts/utils.js +0 -40
  134. package/lib/styles/core/base/base.min.css +0 -1
  135. package/lib/styles/core/box/box.min.css +0 -1
  136. package/lib/styles/core/box/box.responsive.min.css +0 -1
  137. package/lib/styles/core/color/color.min.css +0 -1
  138. package/lib/styles/core/color/color.responsive.min.css +0 -1
  139. package/lib/styles/core/flex/flex.min.css +0 -1
  140. package/lib/styles/core/flex/flex.responsive.min.css +0 -1
  141. package/lib/styles/core/grid/grid.min.css +0 -1
  142. package/lib/styles/core/grid/grid.responsive.min.css +0 -1
  143. package/lib/styles/core/main.min.css +0 -1
  144. package/lib/styles/core/menu/menu.min.css +0 -1
  145. package/lib/styles/core/menu/menu.responsive.min.css +0 -1
  146. package/lib/styles/core/overflow/overflow.responsive.min.css +0 -1
  147. package/lib/styles/core/scale/scale.responsive.min.css +0 -1
  148. package/lib/styles/core/table/table.min.css +0 -1
  149. package/lib/styles/core/table/table.responsive.min.css +0 -1
  150. package/lib/styles/core/text/text.min.css +0 -1
  151. package/lib/styles/core/text/text.responsive.min.css +0 -1
  152. package/lib/styles/core/vars.min.css +0 -1
  153. package/lib/styles/core/vars2.css +0 -4
  154. package/lib/styles/core/vars2.min.css +0 -1
  155. package/lib/styles/cssfabric.css +0 -5147
  156. package/lib/styles/cssfabric.min.css +0 -16
  157. package/lib/styles/cssfabric.responsive.css +0 -16679
  158. package/lib/styles/cssfabric.responsive.min.css +0 -9
  159. package/src/_generated/export.variables.json +0 -759
@@ -1,583 +0,0 @@
1
- {
2
- "cssfabric": {
3
- "modules": {
4
- "cssfabric": {
5
- "_data": {
6
- "cfg-has-dimension-strict": true,
7
- "CFG_HAS_DIMENSION_MIN": true,
8
- "CFG_HAS_DIMENSION_MAX": true,
9
- "size_step": "0.5rem",
10
- "sep": "-",
11
- "sizes": {
12
- "tiny": 32, "small": 64, "medium": 256, "large": 250, "full": "100%"
13
- },
14
- "media_quey_sizes": {
15
- "xxxl": 180, "xxl": 120, "xl": 90, "lg": 64, "md": 48, "sm": 35.7
16
- },
17
- "theme": {
18
- "primary": "orange", "foreground": "#333", "background": "#ededed"
19
- },
20
- "scheme": {
21
- "discrete": "#ccc", "success": "green", "info": "#ffdd57", "warning": "#e6b905", "alert": "#ff7300", "error": "red"
22
- },
23
- "palette": {
24
- "yellow": "#ffb900", "orange": "#d83b01", "red": "#d13438", "magenta": "#b4009e", "purple": "#5c2d91", "green": "#107c10", "teal": "#008272", "blue": "#0078d4"
25
- },
26
- "gray": {
27
- "100": "#f4f4f4", "200": "#e9e9e9", "300": "#dddddd", "400": "#d2d2d2", "500": "#c7c7c7", "600": "#bbbbbb", "700": "#b0b0b0", "800": "#a4a4a4", "900": "#999999"
28
- },
29
- "gray-config": {
30
- "start": "#f4f4f4", "end": "#999", "steps": 8
31
- }
32
- },
33
- "_metadata": {
34
- "title": "cssfabric", "tag": "cssfabric", "description": "cssfabric global config variables"
35
- },
36
- "_docs": []
37
- },
38
- "animation": {
39
- "_data": {
40
- "attention_props": [],
41
- "in_out_props": {
42
- "back": []
43
- }
44
- },
45
- "_metadata": {
46
- "title": "animation", "description": "cssfabric simplest animation module"
47
- },
48
- "_docs": {
49
- "attention_props": "", "in_out_props": ""
50
- }
51
- },
52
- "base": {
53
- "_data": {
54
- "cfg-has-dimension-strict": true,
55
- "CFG_HAS_DIMENSION_MIN": true,
56
- "CFG_HAS_DIMENSION_MAX": true,
57
- "size_step": "0.5rem",
58
- "sizes": {
59
- "tiny": 32, "small": 64, "medium": 256, "large": 250, "full": "100%"
60
- }
61
- },
62
- "_metadata": {
63
- "title": "base", "tag": "base", "description": "cssfabric base config variables"
64
- },
65
- "_docs": []
66
- },
67
- "box": {
68
- "_data": {
69
- "unit-config": "rem",
70
- "border-unit-config": "px",
71
- "unit-size-config": 0.5,
72
- "unit-border-size-config": 1,
73
- "sizes-config": 20,
74
- "border-sizes-px-config": 5,
75
- "shadows-steps": 10,
76
- "shadows_step_multiplier": 2,
77
- "position-shorthand-config": "pos",
78
- "display-shorthand-config": "dsp",
79
- "shadow-shorthand-config": "shad",
80
- "border-shorthand-config": "border",
81
- "padding-shorthand-config": "pad",
82
- "margin-shorthand-config": "marg",
83
- "cssProps": {
84
- "borderShorthands": {
85
- "_": ["top", "bottom", "left", "right"], "t": "top", "b": "bottom", "l": "left", "r": "right", "all": ["top", "bottom", "left", "right"], "u": ["bottom", "left", "right"], "ii": ["left", "right"], "tb": ["top", "bottom"]
86
- },
87
- "positionProps": {
88
- "abs": "absolute", "rel": "relative", "stat": "static", "fix": "fixed", "sticky": "sticky"
89
- },
90
- "displayProps": {
91
- "block": "block", "none": "none", "inline": "inline", "block-inline": "inline-block", "flex-inline": "inline-flex", "tbl": "table", "tbl-row": "table-row", "tbl-cell": "table-cell", "tbl-column": "table-column"
92
- }
93
- }
94
- },
95
- "_metadata": {
96
- "title": "box", "tag": "box", "description": "cssfabric box module to set heights, paddings, margins and shadows on all html elements"
97
- },
98
- "_docs": {
99
- "attributes": {
100
- "padding": {
101
- "tag": "pad",
102
- "keys": ["_",
103
- "t",
104
- "b",
105
- "l",
106
- "r",
107
- "all",
108
- "u",
109
- "ii",
110
- "tb"],
111
- "values": {
112
- "_": "_", "1": "0.5rem", "2": "1rem", "3": "1.5rem", "4": "2rem", "5": "2.5rem", "6": "3rem", "7": "3.5rem", "8": "4rem", "9": "4.5rem", "10": "5rem", "11": "5.5rem", "12": "6rem", "13": "6.5rem", "14": "7rem", "15": "7.5rem", "16": "8rem", "17": "8.5rem", "18": "9rem", "19": "9.5rem", "20": "10rem"
113
- },
114
- "levels": {
115
- "_": ["_", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
116
- },
117
- "about": "padding properties for html elements"
118
- },
119
- "margin": {
120
- "tag": "marg",
121
- "keys": ["_",
122
- "t",
123
- "b",
124
- "l",
125
- "r",
126
- "all",
127
- "u",
128
- "ii",
129
- "tb"],
130
- "values": {
131
- "_": "_", "1": "0.5rem", "2": "1rem", "3": "1.5rem", "4": "2rem", "5": "2.5rem", "6": "3rem", "7": "3.5rem", "8": "4rem", "9": "4.5rem", "10": "5rem", "11": "5.5rem", "12": "6rem", "13": "6.5rem", "14": "7rem", "15": "7.5rem", "16": "8rem", "17": "8.5rem", "18": "9rem", "19": "9.5rem", "20": "10rem"
132
- },
133
- "levels": {
134
- "_": ["_", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
135
- },
136
- "about": "margin properties for html elements"
137
- },
138
- "border": {
139
- "tag": "border",
140
- "keys": ["_",
141
- "t",
142
- "b",
143
- "l",
144
- "r",
145
- "all",
146
- "u",
147
- "ii",
148
- "tb"],
149
- "values": {
150
- "_": "_", "1": "1px", "2": "2px", "3": "3px", "4": "4px", "5": "5px"
151
- },
152
- "levels": {
153
- "_": ["_", 1, 2, 3, 4, 5]
154
- },
155
- "about": "border properties for html elements"
156
- },
157
- "shadow": {
158
- "tag": "shad",
159
- "values": {
160
- "2": "0.83333333331.724137931", "4": "1.66666666673.4482758621", "8": "3.33333333336.8965517241", "16": "6.666666666713.7931034483", "32": "13.333333333327.5862068966", "64": "26.666666666755.1724137931", "128": "53.3333333333110.3448275862", "256": "106.6666666667220.6896551724"
161
- },
162
- "levels": {
163
- "_": [2, 4, 8, 16, 32, 64, 128, 256]
164
- },
165
- "about": "applying shadows give depth and levels to your design"
166
- }
167
- }
168
- }
169
- },
170
- "color": {
171
- "_data": {
172
- "gray-config": {
173
- "start": "#f4f4f4", "end": "#999", "steps": 8
174
- },
175
- "color-types-config": ["color",
176
- "bg",
177
- "bg-themed",
178
- "border-color"],
179
- "theme": {
180
- "primary": "orange", "foreground": "#333", "background": "#ededed"
181
- },
182
- "scheme": {
183
- "discrete": "#ccc", "success": "green", "info": "#ffdd57", "warning": "#e6b905", "alert": "#ff7300", "error": "red"
184
- },
185
- "palette": {
186
- "yellow": "#ffb900", "orange": "#d83b01", "red": "#d13438", "magenta": "#b4009e", "purple": "#5c2d91", "green": "#107c10", "teal": "#008272", "blue": "#0078d4"
187
- },
188
- "gray": {
189
- "100": "#f4f4f4", "200": "#e9e9e9", "300": "#dddddd", "400": "#d2d2d2", "500": "#c7c7c7", "600": "#bbbbbb", "700": "#b0b0b0", "800": "#a4a4a4", "900": "#999999"
190
- }
191
- },
192
- "_metadata": {
193
- "title": "color", "title_tag": "its about colors", "description": "cssfabric color system: its about colors"
194
- },
195
- "_docs": {
196
- "attributes": {
197
- "color": {
198
- "tag": "color",
199
- "keys": ["scheme",
200
- "palette",
201
- "gray"],
202
- "levelsLinked": {
203
- "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue"], "gray": ["100", "200", "300", "400", "500", "600", "700", "800", "900"]
204
- },
205
- "levelsDeclin": {
206
- "palette": ["_", "lighter", "light", "dark", "darker", "complement"]
207
- },
208
- "about": "color for text level html elements"
209
- },
210
- "background-color": {
211
- "tag": "bg",
212
- "keys": ["scheme",
213
- "palette",
214
- "gray"],
215
- "levelsLinked": {
216
- "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue"], "gray": ["100", "200", "300", "400", "500", "600", "700", "800", "900"]
217
- },
218
- "levelsDeclin": {
219
- "palette": ["_", "lighter", "light", "dark", "darker", "complement"]
220
- },
221
- "about": "background colors"
222
- },
223
- "background-themed": {
224
- "tag": "bg-themed",
225
- "keys": ["scheme",
226
- "palette",
227
- "gray"],
228
- "levelsLinked": {
229
- "gray": ["100", "200", "300", "400", "500", "600", "700", "800", "900"], "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue"]
230
- },
231
- "levelsDeclin": {
232
- "palette": ["_", "lighter", "light", "dark", "darker", "complement"]
233
- },
234
- "about": "same as background-color, but with added contrasted color to text"
235
- },
236
- "border-color": {
237
- "tag": "border-color",
238
- "keys": ["palette",
239
- "gray"],
240
- "levelsLinked": {
241
- "gray": ["100", "200", "300", "400", "500", "600", "700", "800", "900"], "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue"]
242
- },
243
- "about": "border colors are slightly darker to maximize surrounding effect"
244
- }
245
- }
246
- }
247
- },
248
- "flex": {
249
- "_data": {
250
- "moduleName": "flex",
251
- "moduleNameShort": "flex",
252
- "horCode": "h",
253
- "vertCode": "v",
254
- "gridFullWidth": "main",
255
- "grow-shrink-steps": 4,
256
- "cssProps": {
257
- "flexWrap": {
258
- "wrap": "wrap", "wrap-reverse": "wrap-reverse"
259
- },
260
- "grid-justify": {
261
- "start": "flex-start", "end": "flex-end", "between": "space-between", "stretch": "stretch", "center": "flex-center"
262
- },
263
- "grid-items": {
264
- "baseline": "baseline", "stretch": "stretch", "start": "flex-start", "center": "center", "end": "flex-end"
265
- },
266
- "grid-content": {
267
- "start": "flex-start", "center": "center", "end": "flex-end", "between": "space-between", "equal": "space-evenly"
268
- }
269
- },
270
- "cssItemsProps": {
271
- "self": {
272
- "start": "flex-start", "end": "flex-end", "stretch": "stretch"
273
- }
274
- }
275
- },
276
- "_metadata": {
277
- "title": "flex", "tag": "flex", "description": "cssfabric flex system module"
278
- },
279
- "_docs": {
280
- "attributes": {
281
- "grid": {
282
- "tag": "flex",
283
- "keys": ["v",
284
- "h"],
285
- "classNames": {
286
- "align": ["top", "middle", "bottom", "left", "right", "center", "middle-center", "stretch"], "grid": ["wrap", "wrap-reverse"]
287
- },
288
- "about": "a classic grid system, and hey, it gets height !"
289
- },
290
- "self": {
291
- "tag": "self", "keys": ["start", "end", "stretch"], "about": "grid children specific classnames"
292
- }
293
- }
294
- }
295
- },
296
- "grid": {
297
- "_data": {
298
- "moduleName": "grid",
299
- "moduleNameShort": "grid",
300
- "horCode": "h",
301
- "vertCode": "v",
302
- "gridFullWidth": "main",
303
- "grow-shrink-steps": 4,
304
- "cssProps": {
305
- "flexWrap": {
306
- "wrap": "wrap", "wrap-reverse": "wrap-reverse"
307
- },
308
- "grid-justify": {
309
- "start": "flex-start", "end": "flex-end", "between": "space-between", "stretch": "stretch", "center": "flex-center"
310
- },
311
- "grid-items": {
312
- "baseline": "baseline", "stretch": "stretch", "start": "flex-start", "center": "center", "end": "flex-end"
313
- },
314
- "grid-content": {
315
- "start": "flex-start", "center": "center", "end": "flex-end", "between": "space-between", "equal": "space-evenly"
316
- }
317
- },
318
- "cssItemsProps": {
319
- "self": {
320
- "start": "flex-start", "end": "flex-end", "stretch": "stretch"
321
- }
322
- }
323
- },
324
- "_metadata": {
325
- "title": "grid", "tag": "grid", "description": "cssfabric flex grid system module"
326
- },
327
- "_docs": {
328
- "attributes": {
329
- "grid": {
330
- "tag": "grid",
331
- "keys": ["v",
332
- "h"],
333
- "classNames": {
334
- "align": ["top", "middle", "bottom", "left", "right", "center", "middle-center", "stretch"], "grid": ["wrap", "wrap-reverse"]
335
- },
336
- "about": "a classic grid system, and hey, it gets height !"
337
- },
338
- "self": {
339
- "tag": "self", "keys": ["start", "end", "stretch"], "about": "grid children specific classnames"
340
- }
341
- }
342
- }
343
- },
344
- "menu": {
345
- "_data": {
346
- "menu_class_name": "menu",
347
- "menu_class_name_short": "ul",
348
- "orientations": {
349
- "v": "vertical", "h": "horizontal"
350
- },
351
- "menu_item_class_name": "menu-item",
352
- "menu_item_class_name_short": "li",
353
- "menu_item_disabled_tag": "disabled",
354
- "menu_item_selected_tag": "selected",
355
- "menu_dropdown_tag": "drop",
356
- "menu_dropdown_open": "open",
357
- "menu_dropdown_close": "close"
358
- },
359
- "_metadata": {
360
- "title": "menu", "tag": "ul", "description": "cssfabric menu module to set menu style"
361
- },
362
- "_docs": {
363
- "attributes": {
364
- "menu": {
365
- "tag": "menu", "keys": ["h", "v"]
366
- }
367
- }
368
- }
369
- },
370
- "overflow": {
371
- "_data": {
372
- "overflow_props": ["overflow",
373
- "overflow-x",
374
- "overflow-y"],
375
- "overflow_values": ["visible",
376
- "hidden",
377
- "clip",
378
- "scroll",
379
- "auto"],
380
- "cssProps": {
381
- "overflow": {
382
- "visible": "visible", "hidden": "hidden", "clip": "clip", "scroll": "scroll", "_": "auto"
383
- }
384
- }
385
- },
386
- "_metadata": {
387
- "title": "overflow", "tag": "flow", "description": "cssfabric overflow module to set overflow styles on all html elements"
388
- },
389
- "_docs": {
390
- "attributes": {
391
- "overflow": {
392
- "tag": "flow", "keys": ["visible", "hidden", "clip", "scroll", "auto"]
393
- },
394
- "overflowX": {
395
- "tag": "flowX", "keys": ["visible", "hidden", "clip", "scroll", "auto"]
396
- },
397
- "overflowY": {
398
- "tag": "flowY", "keys": ["visible", "hidden", "clip", "scroll", "auto"]
399
- }
400
- }
401
- }
402
- },
403
- "table": {
404
- "_data": {
405
- "className": "table", "classNameShort": "tbl", "table_class_name": "table", "table_class_name_short": "tbl", "table-bg-color-head": "#f4f4f4", "table-bg-color-strip-main": "#ededed", "table-bg-color-strip-second": "#f5f5f5", "table-border-color-header": "#ccc", "table-border-color-main": "#ededed", "table-border-color-second": "#f5f5f5"
406
- },
407
- "_metadata": {
408
- "title": "table", "tag": "table", "description": "cssfabric table module to set different table styles"
409
- },
410
- "_docs": {
411
- "attributes": {
412
- "table": {
413
- "tag": "table",
414
- "classNames": {
415
- "_": ["bg-strip-2", "bg-strip-5"], "_pos": ["sticky", "layout"], "_deco": ["h-line", "v-line", "border"]
416
- },
417
- "about": "is a table"
418
- }
419
- }
420
- }
421
- },
422
- "scale": {
423
- "_data": {
424
- "weight-config": "1em",
425
- "unit-tag-config": {
426
- "width": "w", "height": "h"
427
- },
428
- "grid-ratios-config": [5,
429
- 12],
430
- "defined-step-size": 2,
431
- "defined-step-unit": "rem",
432
- "defined-steps": [1,
433
- 2,
434
- 4,
435
- 8,
436
- 16,
437
- 24,
438
- 32,
439
- 48,
440
- 64],
441
- "cssProps": {
442
- "size": {
443
- "full": "100%", "mid": "50%", "quarter": "25%", "tiers": "33%"
444
- },
445
- "content": {
446
- "content-max": "max-content", "content-min": "min-content"
447
- },
448
- "defined-steps": [1,
449
- 2,
450
- 4,
451
- 8,
452
- 16,
453
- 24,
454
- 32,
455
- 48,
456
- 64]
457
- }
458
- },
459
- "_metadata": {
460
- "title": "scale", "tag": "scale", "description": "cssfabric scale module to set dimensions and ratios on all html elements"
461
- },
462
- "_docs": {
463
- "attributes": {
464
- "scale": {
465
- "tag": "scale",
466
- "keys": ["w",
467
- "h"],
468
- "levels": {
469
- "_size": ["full", "mid", "quarter", "tiers"], "_content": ["content-max", "content-min"], "_defined-steps": [1, 2, 4, 8, 16, 24, 32, 48, 64], "_grid-5": ["1-5", "2-5", "3-5", "4-5", "5-5"], "_grid-12": ["1-12", "2-12", "3-12", "4-12", "5-12", "6-12", "7-12", "8-12", "9-12", "10-12", "11-12", "12-12"]
470
- }
471
- }
472
- }
473
- }
474
- },
475
- "text": {
476
- "_data": {
477
- "moduleName": "text",
478
- "moduleNameShort": "text",
479
- "title-size-declination-config": 6,
480
- "font-size-unit-config": "rem",
481
- "font-sizes-h1-rem-config": 3.1,
482
- "font-size-h-min-rem-config": 1,
483
- "text-ellipsis-tag-config": "ellipsis",
484
- "cssProps": {
485
- "textTransform": {
486
- "cap": "capitalize", "up": "uppercase", "low": "lowercase", "none": "none", "full": "full-width"
487
- },
488
- "fontWeight": {
489
- "50": 50, "100": 100, "300": 400, "500": 500, "900": 900, "light": "lighter", "cap": "normal", "bold": "bold", "bolder": "bolder"
490
- },
491
- "textAlign": {
492
- "l": "left", "r": "right", "center": "center", "justify": "justify"
493
- }
494
- },
495
- "scheme": {
496
- "discrete": "#ccc", "success": "green", "info": "#ffdd57", "warning": "#e6b905", "alert": "#ff7300", "error": "red"
497
- },
498
- "palette": {
499
- "yellow": "#ffb900", "orange": "#d83b01", "red": "#d13438", "magenta": "#b4009e", "purple": "#5c2d91", "green": "#107c10", "teal": "#008272", "blue": "#0078d4"
500
- },
501
- "gray": {
502
- "100": "#f4f4f4", "200": "#e9e9e9", "300": "#dddddd", "400": "#d2d2d2", "500": "#c7c7c7", "600": "#bbbbbb", "700": "#b0b0b0", "800": "#a4a4a4", "900": "#999999"
503
- }
504
- },
505
- "_metadata": {
506
- "title": "text", "tag": "text", "description": "cssfabric text module to set text style on all html elements"
507
- },
508
- "_docs": {
509
- "attributes": {
510
- "text-transform": {
511
- "tag": "text", "keys": ["cap", "up", "low", "none", "full"]
512
- },
513
- "font-weight": {
514
- "tag": "text", "keys": [50, 100, 300, 500, 900, "light", "cap", "bold", "bolder"]
515
- },
516
- "text-align": {
517
- "tag": "text", "keys": ["l", "r", "center", "justify"]
518
- },
519
- "text-shadow": {
520
- "tag": "text-shad", "keys": ["palette"]
521
- }
522
- },
523
- "classNames": {
524
- "_": {
525
- "et": "ellipsis"
526
- }
527
- }
528
- }
529
- },
530
- "theme": {
531
- "_data": {
532
- "moduleName": "theme",
533
- "moduleNameShort": "theme",
534
- "color-default-config": {
535
- "primary": "orange", "foreground": "#333", "background": "#ededed"
536
- },
537
- "declinations-config": ["primary",
538
- "secondary",
539
- "tertiary"],
540
- "theme-level-config": ["light",
541
- "lighter",
542
- "dark",
543
- "darker",
544
- "complement",
545
- "invert"],
546
- "theme-properties-apply-config": ["text",
547
- "bg",
548
- "border"],
549
- "color": {
550
- "primary": "orange", "primary-light": "#ffc04d", "primary-lighter": "#ffdb99", "primary-dark": "#cc8400", "primary-darker": "#996300", "primary-complement": "#005aff", "primary-invert": "#005aff", "secondary": "#005aff", "secondary-light": "#4d8cff", "secondary-lighter": "#99bdff", "secondary-dark": "#0048cc", "secondary-darker": "#003699", "secondary-complement": "orange", "secondary-invert": "orange", "tertiary": "orange", "tertiary-light": "#ffc04d", "tertiary-lighter": "#ffdb99", "tertiary-dark": "#cc8400", "tertiary-darker": "#996300", "tertiary-complement": "#005aff", "tertiary-invert": "#005aff"
551
- }
552
- },
553
- "_metadata": {
554
- "title": "theme", "description": ""
555
- },
556
- "_docs": {
557
- "attributes": {
558
- "theme": {
559
- "tag": "theme",
560
- "keys": ["text",
561
- "bg",
562
- "border"],
563
- "levels": {
564
- "primary": ["_", "light", "lighter", "dark", "darker", "complement", "invert"], "secondary": ["_", "light", "lighter", "dark", "darker", "complement", "invert"], "tertiary": ["_", "light", "lighter", "dark", "darker", "complement", "invert"]
565
- }
566
- }
567
- }
568
- }
569
- },
570
- "zindex": {
571
- "_data": {
572
- "z_groups": ["a", "b", "c", "d", "e", "f", "g"]
573
- },
574
- "_metadata": {
575
- "title": "zindex", "tag": "zI", "description": "cssfabric zindex module to set z-index on all html elements"
576
- },
577
- "_docs": {
578
- "z_groups": "_"
579
- }
580
- }
581
- }
582
- }
583
- }
package/lib/index.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import cssfabric from "./scripts/cssfabric";
2
- export default cssfabric;
package/lib/index.js DELETED
@@ -1,7 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const cssfabric_1 = __importDefault(require("./scripts/cssfabric"));
7
- exports.default = cssfabric_1.default;
@@ -1,24 +0,0 @@
1
- export declare type IFabricConfModulePart = Record<string, any>;
2
- export declare type IFabricConfModuleDataPart = Record<string, any>;
3
- export declare type IFabricConfModuleMetaDataPart = Record<string, any>;
4
- export declare type IFabricConfModuleDocsPart = Record<string, any>;
5
- export declare type TFabricConfModuleDocsAttributesPart = Record<string, any>;
6
- declare const _default: {
7
- getModuleList: () => Record<string, any>;
8
- getModuleConfig: (module?: string) => IFabricConfModulePart;
9
- getModuleData: (module?: string) => IFabricConfModuleDataPart;
10
- getModuleMetaData: (module?: string) => IFabricConfModuleMetaDataPart;
11
- getModuleDocs: (module?: string) => IFabricConfModuleDocsPart;
12
- getModuleDocsAttributes: (module?: string) => TFabricConfModuleDocsAttributesPart;
13
- getClassNames: {
14
- getModuleTagClassNames: (props: import("./cssfabricClassNames").IListCssfabricClassNamesProps) => Record<string, any>;
15
- getModuleTagDebug: (props: import("./cssfabricClassNames").IListCssfabricClassNamesProps) => Record<string, any>;
16
- };
17
- getModuleClassNames: {
18
- getModuleTagClassNames: (props: import("./cssfabricClassNames").IListCssfabricClassNamesProps) => Record<string, any>;
19
- getModuleTagDebug: (props: import("./cssfabricClassNames").IListCssfabricClassNamesProps) => Record<string, any>;
20
- };
21
- getModuleTagClassNames: (props: import("./cssfabricClassNames").IListCssfabricClassNamesProps) => Record<string, any>;
22
- getModuleTagDebug: (props: import("./cssfabricClassNames").IListCssfabricClassNamesProps) => Record<string, any>;
23
- };
24
- export default _default;