@medyll/cssfabric 0.2.1-beta.6 → 0.2.1-beta.8

package/dist/generated/cssFabric.vars.md

@@ -18,19 +18,19 @@ This is also a learning point about gulp, webpack, packages and friends.
 
 | modules |     |
 | ------- | --- |
-| animation | cssfabric simplest animation module |
-| base | cssfabric base config variables |
-| box | cssfabric box module to set heights, paddings, margins and shadows on all html elements |
-| color | cssfabric color system: its about colors |
-| flex | cssfabric flex system module |
-| grid | cssfabric flex grid system module |
-| menu | cssfabric menu module to set menu style |
-| overflow | cssfabric overflow module to set overflow styles on all html elements |
-| scale | cssfabric scale module to set dimensions and ratios on all html elements |
-| table | cssfabric table module to set different table styles |
-| text | cssfabric text module to set text style on all html elements |
-| theme |  |
 | zindex | cssfabric zindex module to set z-index on all html elements |
+| theme |  |
+| text | cssfabric text module to set text style on all html elements |
+| table | cssfabric table module to set different table styles |
+| scale | cssfabric scale module to set dimensions and ratios on all html elements |
+| overflow | cssfabric overflow module to set overflow styles on all html elements |
+| menu | cssfabric menu module to set menu style |
+| grid | cssfabric flex grid system module |
+| flex | cssfabric flex system module |
+| color | cssfabric color system: its about colors |
+| box | cssfabric box module to set heights, paddings, margins and shadows on all html elements |
+| base | cssfabric base config variables |
+| animation | cssfabric simplest animation module |
 
 
 <br/>
@@ -44,109 +44,114 @@ This is also a learning point about gulp, webpack, packages and friends.
 
 ---
 
-#### <strong>module box</strong>
+#### <strong>module theme</strong>
 
-#### [padding]
+#### [theme]
 
 
-- padding properties for html elements
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  theme
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: text&nbsp;&nbsp;bg&nbsp;&nbsp;border
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>level keys</b></span>:<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- primary</span>: _&nbsp;&nbsp;&nbsp;&nbsp;light&nbsp;&nbsp;&nbsp;&nbsp;lighter&nbsp;&nbsp;&nbsp;&nbsp;dark&nbsp;&nbsp;&nbsp;&nbsp;darker&nbsp;&nbsp;&nbsp;&nbsp;complement&nbsp;&nbsp;&nbsp;&nbsp;invert<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- secondary</span>: _&nbsp;&nbsp;&nbsp;&nbsp;light&nbsp;&nbsp;&nbsp;&nbsp;lighter&nbsp;&nbsp;&nbsp;&nbsp;dark&nbsp;&nbsp;&nbsp;&nbsp;darker&nbsp;&nbsp;&nbsp;&nbsp;complement&nbsp;&nbsp;&nbsp;&nbsp;invert<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- tertiary</span>: _&nbsp;&nbsp;&nbsp;&nbsp;light&nbsp;&nbsp;&nbsp;&nbsp;lighter&nbsp;&nbsp;&nbsp;&nbsp;dark&nbsp;&nbsp;&nbsp;&nbsp;darker&nbsp;&nbsp;&nbsp;&nbsp;complement&nbsp;&nbsp;&nbsp;&nbsp;invert
 
+---
 
- - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  pad
- - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: _&nbsp;&nbsp;t&nbsp;&nbsp;b&nbsp;&nbsp;l&nbsp;&nbsp;r&nbsp;&nbsp;all&nbsp;&nbsp;u&nbsp;&nbsp;ii&nbsp;&nbsp;tb
- - <span style='width:80px;display:inline-block;overflow:visible'><b>level keys</b></span>:<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- _</span>: _&nbsp;&nbsp;&nbsp;&nbsp;1&nbsp;&nbsp;&nbsp;&nbsp;2&nbsp;&nbsp;&nbsp;&nbsp;3&nbsp;&nbsp;&nbsp;&nbsp;4&nbsp;&nbsp;&nbsp;&nbsp;5&nbsp;&nbsp;&nbsp;&nbsp;6&nbsp;&nbsp;&nbsp;&nbsp;7&nbsp;&nbsp;&nbsp;&nbsp;8&nbsp;&nbsp;&nbsp;&nbsp;9&nbsp;&nbsp;&nbsp;&nbsp;10&nbsp;&nbsp;&nbsp;&nbsp;11&nbsp;&nbsp;&nbsp;&nbsp;12
+#### <strong>module text</strong>
 
-#### [margin]
+#### [text-transform]
 
 
-- margin properties for html elements
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  text
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: cap&nbsp;&nbsp;up&nbsp;&nbsp;low&nbsp;&nbsp;none&nbsp;&nbsp;full
 
+#### [font-weight]
 
- - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  marg
- - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: _&nbsp;&nbsp;t&nbsp;&nbsp;b&nbsp;&nbsp;l&nbsp;&nbsp;r&nbsp;&nbsp;all&nbsp;&nbsp;u&nbsp;&nbsp;ii&nbsp;&nbsp;tb
- - <span style='width:80px;display:inline-block;overflow:visible'><b>level keys</b></span>:<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- _</span>: _&nbsp;&nbsp;&nbsp;&nbsp;1&nbsp;&nbsp;&nbsp;&nbsp;2&nbsp;&nbsp;&nbsp;&nbsp;3&nbsp;&nbsp;&nbsp;&nbsp;4&nbsp;&nbsp;&nbsp;&nbsp;5&nbsp;&nbsp;&nbsp;&nbsp;6&nbsp;&nbsp;&nbsp;&nbsp;7&nbsp;&nbsp;&nbsp;&nbsp;8&nbsp;&nbsp;&nbsp;&nbsp;9&nbsp;&nbsp;&nbsp;&nbsp;10&nbsp;&nbsp;&nbsp;&nbsp;11&nbsp;&nbsp;&nbsp;&nbsp;12
 
-#### [border]
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  text
 
+#### [text-align]
 
-- border properties for html elements
 
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  text
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: l&nbsp;&nbsp;r&nbsp;&nbsp;center&nbsp;&nbsp;justify
 
- - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  border
- - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: _&nbsp;&nbsp;t&nbsp;&nbsp;b&nbsp;&nbsp;l&nbsp;&nbsp;r&nbsp;&nbsp;all&nbsp;&nbsp;u&nbsp;&nbsp;ii&nbsp;&nbsp;tb
- - <span style='width:80px;display:inline-block;overflow:visible'><b>level keys</b></span>:<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- _</span>: _&nbsp;&nbsp;&nbsp;&nbsp;1&nbsp;&nbsp;&nbsp;&nbsp;2&nbsp;&nbsp;&nbsp;&nbsp;3
+#### [text-shadow]
 
-#### [radius]
 
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  text-shad
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: palette
 
- - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  radiusGuy
+---
 
-#### [shadow]
+#### <strong>module table</strong>
 
+#### [table]
 
-- applying shadows give depth and levels to your design
+
+- is a table
 
 
- - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  shad
- - <span style='width:80px;display:inline-block;overflow:visible'><b>level keys</b></span>:<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- _</span>: 2&nbsp;&nbsp;&nbsp;&nbsp;4&nbsp;&nbsp;&nbsp;&nbsp;8&nbsp;&nbsp;&nbsp;&nbsp;16&nbsp;&nbsp;&nbsp;&nbsp;32
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  table
 
 ---
 
-#### <strong>module color</strong>
-
-#### [color]
+#### <strong>module scale</strong>
 
+#### [scale]
 
-- color for text level html elements
 
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  scale
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: w&nbsp;&nbsp;h
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>level keys</b></span>:<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- _size</span>: full&nbsp;&nbsp;&nbsp;&nbsp;mid&nbsp;&nbsp;&nbsp;&nbsp;quarter&nbsp;&nbsp;&nbsp;&nbsp;tiers<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- _content</span>: content-max&nbsp;&nbsp;&nbsp;&nbsp;content-min<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- _defined-steps</span>: 1&nbsp;&nbsp;&nbsp;&nbsp;2&nbsp;&nbsp;&nbsp;&nbsp;4&nbsp;&nbsp;&nbsp;&nbsp;8&nbsp;&nbsp;&nbsp;&nbsp;16&nbsp;&nbsp;&nbsp;&nbsp;24&nbsp;&nbsp;&nbsp;&nbsp;32&nbsp;&nbsp;&nbsp;&nbsp;48&nbsp;&nbsp;&nbsp;&nbsp;64<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- _grid-16</span>: 1-16&nbsp;&nbsp;&nbsp;&nbsp;2-16&nbsp;&nbsp;&nbsp;&nbsp;3-16&nbsp;&nbsp;&nbsp;&nbsp;4-16&nbsp;&nbsp;&nbsp;&nbsp;5-16&nbsp;&nbsp;&nbsp;&nbsp;6-16&nbsp;&nbsp;&nbsp;&nbsp;7-16&nbsp;&nbsp;&nbsp;&nbsp;8-16&nbsp;&nbsp;&nbsp;&nbsp;9-16&nbsp;&nbsp;&nbsp;&nbsp;10-16&nbsp;&nbsp;&nbsp;&nbsp;11-16&nbsp;&nbsp;&nbsp;&nbsp;12-16&nbsp;&nbsp;&nbsp;&nbsp;13-16&nbsp;&nbsp;&nbsp;&nbsp;14-16&nbsp;&nbsp;&nbsp;&nbsp;15-16&nbsp;&nbsp;&nbsp;&nbsp;16-16
 
- - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  color
- - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: scheme&nbsp;&nbsp;palette&nbsp;&nbsp;gray
+---
 
-#### [background-color]
+#### <strong>module overflow</strong>
 
+#### [overflow]
 
-- background colors
 
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  flow
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: visible&nbsp;&nbsp;hidden&nbsp;&nbsp;clip&nbsp;&nbsp;scroll&nbsp;&nbsp;auto
 
- - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  bg
- - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: scheme&nbsp;&nbsp;palette&nbsp;&nbsp;gray
+#### [overflowX]
 
-#### [background-themed]
 
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  flowX
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: visible&nbsp;&nbsp;hidden&nbsp;&nbsp;clip&nbsp;&nbsp;scroll&nbsp;&nbsp;auto
 
-- same as background-color, but with added contrasted color to text
+#### [overflowY]
 
 
- - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  bg-themed
- - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: scheme&nbsp;&nbsp;palette&nbsp;&nbsp;gray
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  flowY
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: visible&nbsp;&nbsp;hidden&nbsp;&nbsp;clip&nbsp;&nbsp;scroll&nbsp;&nbsp;auto
 
-#### [border-color]
+---
 
+#### <strong>module menu</strong>
 
-- border colors are slightly darker to maximize surrounding effect
+#### [menu]
 
 
- - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  border-color
- - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: palette&nbsp;&nbsp;gray
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  menu
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: h&nbsp;&nbsp;v
 
 ---
 
-#### <strong>module flex</strong>
+#### <strong>module grid</strong>
 
 #### [grid]
 
 
-- a classic flex grid system, and hey, it gets height !
+- a classic grid system
 
 
- - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  flex
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  grid
  - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: v&nbsp;&nbsp;h
 
 #### [self]
 
 
-- flex children specific classnames
+- grid children specific classnames
 
 
  - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  self
@@ -154,21 +159,21 @@ This is also a learning point about gulp, webpack, packages and friends.
 
 ---
 
-#### <strong>module grid</strong>
+#### <strong>module flex</strong>
 
 #### [grid]
 
 
-- a classic grid system
+- a classic flex grid system, and hey, it gets height !
 
 
- - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  grid
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  flex
  - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: v&nbsp;&nbsp;h
 
 #### [self]
 
 
-- grid children specific classnames
+- flex children specific classnames
 
 
  - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  self
@@ -176,93 +181,88 @@ This is also a learning point about gulp, webpack, packages and friends.
 
 ---
 
-#### <strong>module menu</strong>
+#### <strong>module color</strong>
 
-#### [menu]
+#### [color]
 
 
- - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  menu
- - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: h&nbsp;&nbsp;v
+- color for text level html elements
 
----
 
-#### <strong>module overflow</strong>
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  color
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: scheme&nbsp;&nbsp;palette&nbsp;&nbsp;gray
 
-#### [overflow]
+#### [background-color]
 
 
- - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  flow
- - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: visible&nbsp;&nbsp;hidden&nbsp;&nbsp;clip&nbsp;&nbsp;scroll&nbsp;&nbsp;auto
+- background colors
 
-#### [overflowX]
 
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  bg
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: scheme&nbsp;&nbsp;palette&nbsp;&nbsp;gray
 
- - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  flowX
- - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: visible&nbsp;&nbsp;hidden&nbsp;&nbsp;clip&nbsp;&nbsp;scroll&nbsp;&nbsp;auto
+#### [background-themed]
 
-#### [overflowY]
 
+- same as background-color, but with added contrasted color to text
 
- - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  flowY
- - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: visible&nbsp;&nbsp;hidden&nbsp;&nbsp;clip&nbsp;&nbsp;scroll&nbsp;&nbsp;auto
 
----
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  bg-themed
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: scheme&nbsp;&nbsp;palette&nbsp;&nbsp;gray
 
-#### <strong>module scale</strong>
+#### [border-color]
 
-#### [scale]
 
+- border colors are slightly darker to maximize surrounding effect
 
- - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  scale
- - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: w&nbsp;&nbsp;h
- - <span style='width:80px;display:inline-block;overflow:visible'><b>level keys</b></span>:<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- _size</span>: full&nbsp;&nbsp;&nbsp;&nbsp;mid&nbsp;&nbsp;&nbsp;&nbsp;quarter&nbsp;&nbsp;&nbsp;&nbsp;tiers<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- _content</span>: content-max&nbsp;&nbsp;&nbsp;&nbsp;content-min<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- _defined-steps</span>: 1&nbsp;&nbsp;&nbsp;&nbsp;2&nbsp;&nbsp;&nbsp;&nbsp;4&nbsp;&nbsp;&nbsp;&nbsp;8&nbsp;&nbsp;&nbsp;&nbsp;16&nbsp;&nbsp;&nbsp;&nbsp;24&nbsp;&nbsp;&nbsp;&nbsp;32&nbsp;&nbsp;&nbsp;&nbsp;48&nbsp;&nbsp;&nbsp;&nbsp;64<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- _grid-16</span>: 1-16&nbsp;&nbsp;&nbsp;&nbsp;2-16&nbsp;&nbsp;&nbsp;&nbsp;3-16&nbsp;&nbsp;&nbsp;&nbsp;4-16&nbsp;&nbsp;&nbsp;&nbsp;5-16&nbsp;&nbsp;&nbsp;&nbsp;6-16&nbsp;&nbsp;&nbsp;&nbsp;7-16&nbsp;&nbsp;&nbsp;&nbsp;8-16&nbsp;&nbsp;&nbsp;&nbsp;9-16&nbsp;&nbsp;&nbsp;&nbsp;10-16&nbsp;&nbsp;&nbsp;&nbsp;11-16&nbsp;&nbsp;&nbsp;&nbsp;12-16&nbsp;&nbsp;&nbsp;&nbsp;13-16&nbsp;&nbsp;&nbsp;&nbsp;14-16&nbsp;&nbsp;&nbsp;&nbsp;15-16&nbsp;&nbsp;&nbsp;&nbsp;16-16
 
----
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  border-color
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: palette&nbsp;&nbsp;gray
 
-#### <strong>module table</strong>
+---
 
-#### [table]
+#### <strong>module box</strong>
 
+#### [padding]
 
-- is a table
 
+- padding properties for html elements
 
- - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  table
 
----
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  pad
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: _&nbsp;&nbsp;t&nbsp;&nbsp;b&nbsp;&nbsp;l&nbsp;&nbsp;r&nbsp;&nbsp;all&nbsp;&nbsp;u&nbsp;&nbsp;ii&nbsp;&nbsp;tb
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>level keys</b></span>:<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- _</span>: _&nbsp;&nbsp;&nbsp;&nbsp;1&nbsp;&nbsp;&nbsp;&nbsp;2&nbsp;&nbsp;&nbsp;&nbsp;3&nbsp;&nbsp;&nbsp;&nbsp;4&nbsp;&nbsp;&nbsp;&nbsp;5&nbsp;&nbsp;&nbsp;&nbsp;6&nbsp;&nbsp;&nbsp;&nbsp;7&nbsp;&nbsp;&nbsp;&nbsp;8&nbsp;&nbsp;&nbsp;&nbsp;9&nbsp;&nbsp;&nbsp;&nbsp;10&nbsp;&nbsp;&nbsp;&nbsp;11&nbsp;&nbsp;&nbsp;&nbsp;12
 
-#### <strong>module text</strong>
+#### [margin]
 
-#### [text-transform]
 
+- margin properties for html elements
 
- - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  text
- - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: cap&nbsp;&nbsp;up&nbsp;&nbsp;low&nbsp;&nbsp;none&nbsp;&nbsp;full
 
-#### [font-weight]
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  marg
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: _&nbsp;&nbsp;t&nbsp;&nbsp;b&nbsp;&nbsp;l&nbsp;&nbsp;r&nbsp;&nbsp;all&nbsp;&nbsp;u&nbsp;&nbsp;ii&nbsp;&nbsp;tb
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>level keys</b></span>:<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- _</span>: _&nbsp;&nbsp;&nbsp;&nbsp;1&nbsp;&nbsp;&nbsp;&nbsp;2&nbsp;&nbsp;&nbsp;&nbsp;3&nbsp;&nbsp;&nbsp;&nbsp;4&nbsp;&nbsp;&nbsp;&nbsp;5&nbsp;&nbsp;&nbsp;&nbsp;6&nbsp;&nbsp;&nbsp;&nbsp;7&nbsp;&nbsp;&nbsp;&nbsp;8&nbsp;&nbsp;&nbsp;&nbsp;9&nbsp;&nbsp;&nbsp;&nbsp;10&nbsp;&nbsp;&nbsp;&nbsp;11&nbsp;&nbsp;&nbsp;&nbsp;12
 
+#### [border]
 
- - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  text
 
-#### [text-align]
+- border properties for html elements
 
 
- - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  text
- - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: l&nbsp;&nbsp;r&nbsp;&nbsp;center&nbsp;&nbsp;justify
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  border
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: _&nbsp;&nbsp;t&nbsp;&nbsp;b&nbsp;&nbsp;l&nbsp;&nbsp;r&nbsp;&nbsp;all&nbsp;&nbsp;u&nbsp;&nbsp;ii&nbsp;&nbsp;tb
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>level keys</b></span>:<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- _</span>: _&nbsp;&nbsp;&nbsp;&nbsp;1&nbsp;&nbsp;&nbsp;&nbsp;2&nbsp;&nbsp;&nbsp;&nbsp;3
 
-#### [text-shadow]
+#### [radius]
 
 
- - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  text-shad
- - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: palette
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  radiusGuy
 
----
+#### [shadow]
 
-#### <strong>module theme</strong>
 
-#### [theme]
+- applying shadows give depth and levels to your design
 
 
- - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  theme
- - <span style='width:80px;display:inline-block;overflow:visible'><b>keys</b></span>: text&nbsp;&nbsp;bg&nbsp;&nbsp;border
- - <span style='width:80px;display:inline-block;overflow:visible'><b>level keys</b></span>:<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- primary</span>: _&nbsp;&nbsp;&nbsp;&nbsp;light&nbsp;&nbsp;&nbsp;&nbsp;lighter&nbsp;&nbsp;&nbsp;&nbsp;dark&nbsp;&nbsp;&nbsp;&nbsp;darker&nbsp;&nbsp;&nbsp;&nbsp;complement&nbsp;&nbsp;&nbsp;&nbsp;invert<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- secondary</span>: _&nbsp;&nbsp;&nbsp;&nbsp;light&nbsp;&nbsp;&nbsp;&nbsp;lighter&nbsp;&nbsp;&nbsp;&nbsp;dark&nbsp;&nbsp;&nbsp;&nbsp;darker&nbsp;&nbsp;&nbsp;&nbsp;complement&nbsp;&nbsp;&nbsp;&nbsp;invert<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- tertiary</span>: _&nbsp;&nbsp;&nbsp;&nbsp;light&nbsp;&nbsp;&nbsp;&nbsp;lighter&nbsp;&nbsp;&nbsp;&nbsp;dark&nbsp;&nbsp;&nbsp;&nbsp;darker&nbsp;&nbsp;&nbsp;&nbsp;complement&nbsp;&nbsp;&nbsp;&nbsp;invert
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>shorthand</b></span>:  shad
+ - <span style='width:80px;display:inline-block;overflow:visible'><b>level keys</b></span>:<br/><span style='margin-left:20px;width:80px;display:inline-block;overflow:visible'>- _</span>: 2&nbsp;&nbsp;&nbsp;&nbsp;4&nbsp;&nbsp;&nbsp;&nbsp;8&nbsp;&nbsp;&nbsp;&nbsp;16&nbsp;&nbsp;&nbsp;&nbsp;32

package/dist/legacy/scripts/cssfabric.d.ts

@@ -5,11 +5,11 @@ export type IFabricConfModuleDocsPart = Record<string, any>;
 export type TFabricConfModuleDocsAttributesPart = Record<string, any>;
 declare const _default: {
     getModuleList: () => Record<string, any>;
-    getModuleConfig: (module?: string | undefined) => IFabricConfModulePart;
-    getModuleData: (module?: string | undefined) => IFabricConfModuleDataPart;
-    getModuleMetaData: (module?: string | undefined) => IFabricConfModuleMetaDataPart;
-    getModuleDocs: (module?: string | undefined) => IFabricConfModuleDocsPart;
-    getModuleDocsAttributes: (module?: string | undefined) => TFabricConfModuleDocsAttributesPart;
+    getModuleConfig: (module?: string) => IFabricConfModulePart;
+    getModuleData: (module?: string) => IFabricConfModuleDataPart;
+    getModuleMetaData: (module?: string) => IFabricConfModuleMetaDataPart;
+    getModuleDocs: (module?: string) => IFabricConfModuleDocsPart;
+    getModuleDocsAttributes: (module?: string) => TFabricConfModuleDocsAttributesPart;
     getClassNames: {
         getModuleTagClassNames: (props: import("./cssfabricClassNames.js").IListCssfabricClassNamesProps) => Record<string, any> | string[];
         getModuleTagDebug: (props: import("./cssfabricClassNames.js").IListCssfabricClassNamesProps) => Record<string, any> | string[];

package/dist/scss/_utils.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+@use "sass:meta";
 @use "sass:string";
 @use "sass:map";
 @use "sass:math";
@@ -12,11 +14,11 @@
     @return cssfabric-config.$cssfabric-config;
   }
   @if $prop and not $val {
-    @return map-get(cssfabric-config.$cssfabric-config, $prop);
+    @return map.get(cssfabric-config.$cssfabric-config, $prop);
   }
   @if $val {
-    $in: map-get(cssfabric-config.$cssfabric-config, $prop);
-    @return map-get($in, $prop, $val);
+    $in: map.get(cssfabric-config.$cssfabric-config, $prop);
+    @return map.get($in, $prop, $val);
   }
 }
 
@@ -46,13 +48,13 @@
   */
   @each $red, $rt in $module-config {
     // list map string
-    @if (type_of($rt) == "string") {
+    @if (meta.type_of($rt) == "string") {
       $key: #{$module}-#{$red};
       --cssfabric-#{$key}: #{$rt};
     }
-    @if (type_of($rt) == "map") {
+    @if (meta.type_of($rt) == "map") {
       @each $rtkey, $rtval in $rt {
-        $type: type_of($rtval);
+        $type: meta.type_of($rtval);
         $key: #{$module}-#{$red}-#{$rtkey};
         $compval: is-map; // #{string.slice(#{#ss($rtval)}, 4)};
 
@@ -61,7 +63,7 @@
         --cssfabric-#{$key}: #{$comp};
       }
     }
-    @if (type_of($rt) == "list") {
+    @if (meta.type_of($rt) == "list") {
       $key: #{$module}-#{$red};
       --cssfabric-#{$key}: #{string.slice(#{#ss($rt)}, 4)};
     }
@@ -80,7 +82,7 @@
 
   @for $i from 0 through $steps {
 
-    $color: mix($gray-end, $gray-start, math.div($i , $steps) * 100%);
+    $color: color.mix($gray-end, $gray-start, math.div($i , $steps) * 100%);
 
     $gray-schemes: map.set($gray-schemes, #{($i+1) * 100}, $color);
   }
@@ -89,14 +91,14 @@
 }
 
 @function applyColorEffect($theme-level, $color) {
-  $switch-named: map-get(
+  $switch-named: map.get(
                   (
-                          light: lighten($color, 15%),
-                          lighter: lighten($color, 30%),
-                          dark: darken($color, 10%),
-                          darker: darken($color, 20%),
-                          complement: complement($color),
-                          invert: invert($color)
+                          light: color.adjust($color, $lightness: 15%),
+                          lighter: color.adjust($color, $lightness: 30%),
+                          dark: color.adjust($color, $lightness: -10%),
+                          darker: color.adjust($color, $lightness: -20%),
+                          complement: color.complement($color),
+                          invert: color.invert($color)
                   ),
                   $theme-level
   );
@@ -106,7 +108,7 @@
 
 @function getColorPropertyType($fabric-tag) {
   /** get property for #{$fabric-tag} */
-  @return map-get(
+  @return map.get(
                   (
                           color: color,
                           text: color,
@@ -148,11 +150,11 @@
 @function getShadowIterator($factors,$box-shadows-steps) {
   $out: ();
 
-  $v_fact: map-get($factors, v_fact);
-  $h_fact: map-get($factors, h_fact);
+  $v_fact: map.get($factors, v_fact);
+  $h_fact: map.get($factors, h_fact);
 
-  $v_fact_2: map-get($factors, v_fact_2);
-  $h_fact_2: map-get($factors, h_fact_2);
+  $v_fact_2: map.get($factors, v_fact_2);
+  $h_fact_2: map.get($factors, h_fact_2);
 
   $acc: 1;
 
@@ -188,7 +190,7 @@
 @function getObjectKeys($object) {
   $out: ();
   @each $key, $value in $object {
-    $out: append($out, $key);
+    $out: list.append($out, $key);
   }
 
   @return $out;

package/dist/scss/modules/_cssfabric-config.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "sass:map";
 @use "sass:math";
 
@@ -167,7 +168,7 @@ $cssfabric-config: (
 
   @for $i from 0 through $steps {
 
-    $color: mix($gray-end, $gray-start, math.div($i , $steps) * 100%);
+    $color: color.mix($gray-end, $gray-start, math.div($i , $steps) * 100%);
 
     $gray-schemes: map.set($gray-schemes, #{($i+1) * 100}, $color);
   }

package/dist/scss/modules/box/_box-build.scss

@@ -1,3 +1,4 @@
+@use "sass:list";
 @use "sass:map";
 @use "sass:math";
 @use '../../_utils';
@@ -99,7 +100,7 @@ $densities-ratios : cssfabric-config.$densities-ratios;
         $computed_value: $css_size_value + " solid var(--theme-color-border)";
 
         #{raw_size_tag_rule($grid_size_value)} &-#{$grid_size_value} {
-          @if length($rule) == 4 {
+          @if list.length($rule) == 4 {
             #{$fabric_box_position_prop}: #{$computed_value};
           } @else {
 
@@ -135,7 +136,7 @@ $densities-ratios : cssfabric-config.$densities-ratios;
         $computed_value: var(--box-density-#{$grid_size_value});
 
         #{raw_size_tag_rule($grid_size_value)} &-#{$grid_size_value} {
-          @if length($rule) == 4 {
+          @if list.length($rule) == 4 {
             #{$fabric_box_position_prop}: #{$computed_value};
           } @else {
             @each $rule_value in $rule {

package/dist/scss/modules/box/box-responsive.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 
 @use '../../_utils';
 @use "_box-build" as build; 
@@ -5,7 +6,7 @@
 // load general config variables
 $config: cssfabric-config.$cssfabric-config;
 
-$_media_quey_sizes: map-get($config, media_quey_sizes);
+$_media_quey_sizes: map.get($config, media_quey_sizes);
 
 // responsive builder here
 $min_value: 0;

package/dist/scss/modules/color/_color-build.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "sass:map";
 @use 'color-vars';
 @use "sass:math";
@@ -8,13 +9,13 @@
 $color-config: color-vars.$color-config;
 
 // COLOR TYPES
-$color-types-config: map-get($color-config, color-types-config);
+$color-types-config: map.get($color-config, color-types-config);
 // COLOR SCHEMES
-$color-schemes: map-get($color-config, scheme) !default;
+$color-schemes: map.get($color-config, scheme) !default;
 // COLOR PALETTE
-$color-palette: map-get($color-config, palette) !default;
+$color-palette: map.get($color-config, palette) !default;
 // COLOR THEME 
-$color-theme: map-get($color-config, theme) !default;
+$color-theme: map.get($color-config, theme) !default;
 
 
 // GRAYS
@@ -28,11 +29,11 @@ $gray-schemes: utils.getGraySteps($color-gray-steps, $color-gray-start, $color-g
 
 
 @function text-contrast($n) {
-  $color-brightness: round((red($n) * 299) + (green($n) * 587) +  math.div(blue(#ffffff) * 114, 1000));
-  $light-color: round((red(#ffffff) * 299) + (green(#ffffff) * 587) + math.div(blue(#ffffff) * 114, 1000));
+  $color-brightness: math.round((color.red($n) * 299) + (color.green($n) * 587) +  math.div(color.blue(#ffffff) * 114, 1000));
+  $light-color: math.round((color.red(#ffffff) * 299) + (color.green(#ffffff) * 587) + math.div(color.blue(#ffffff) * 114, 1000));
   $color: black;
 
-  @if abs($color-brightness) < math.div($light-color,2) {
+  @if math.abs($color-brightness) < math.div($light-color,2) {
     $color: white;
   }
 

package/dist/scss/modules/color/color-responsive.scss

@@ -9,7 +9,7 @@ $config: cssfabric-config.$cssfabric-config;
 
 // load general config variables
 // media queries sizes, in rem
-$_media_quey_sizes: map-get($config, media_quey_sizes);
+$_media_quey_sizes: map.get($config, media_quey_sizes);
 
 // builder responsive  
 $min_value: 0;

package/dist/scss/modules/flex/_flex-build.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 // load scss config file
 @use '../../_utils';
 @use '../cssfabric-config' as cssfabric-vars;
@@ -6,18 +7,18 @@
 $flex-config: flex-vars.$flex-config;
 $cssfabric-config: cssfabric-vars.$cssfabric-config;
 
-$sep: map-get($cssfabric-config, sep);
+$sep: map.get($cssfabric-config, sep);
 // read variables
-$grid-code: map-get($flex-config, moduleNameShort);
-$grid-h: map-get($flex-config, horCode);
-$grid-v: map-get($flex-config, vertCode);
+$grid-code: map.get($flex-config, moduleNameShort);
+$grid-h: map.get($flex-config, horCode);
+$grid-v: map.get($flex-config, vertCode);
 
-$cssProps: map-get($flex-config, cssProps);
-$cssItemsProps: map-get($flex-config, cssItemsProps);
+$cssProps: map.get($flex-config, cssProps);
+$cssItemsProps: map.get($flex-config, cssItemsProps);
 
-$gridFullWidth: map-get($flex-config, gridFullWidth);
+$gridFullWidth: map.get($flex-config, gridFullWidth);
 
-$grow-shrink-steps: map-get($flex-config, grow-shrink-steps);
+$grow-shrink-steps: map.get($flex-config, grow-shrink-steps);
 
 $grid-code-sep: #{$grid-code}#{$sep};
 
@@ -126,14 +127,14 @@ $grid-code-sep: #{$grid-code}#{$sep};
 
   // wrap rules
   .#{$grid-code} {
-    @each $fabricRule, $value in map-get($cssProps, flexWrap) {
+    @each $fabricRule, $value in map.get($cssProps, flexWrap) {
       @include utils.fabricAttributes('&'+$sep, $fabricRule, 'flex-wrap', $value);
     }
   }
 
   // align-self rules for children */
   .self {
-    @each $fabricRule, $value in map-get($cssItemsProps, self) {
+    @each $fabricRule, $value in map.get($cssItemsProps, self) {
       @include utils.fabricAttributes('&-', $fabricRule, 'align-self', $value);
     }
   }