@medyll/cssfabric 0.0.10

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 (165) hide show
  1. package/.idea/codeStyles/codeStyleConfig.xml +5 -0
  2. package/.idea/cssfabric.iml +11 -0
  3. package/.idea/misc.xml +9 -0
  4. package/.idea/modules.xml +8 -0
  5. package/.idea/vcs.xml +6 -0
  6. package/.vscode/settings.json +24 -0
  7. package/README.md +240 -0
  8. package/cssfabric.config.js +3 -0
  9. package/cssfabric.json +8 -0
  10. package/gulpfile.js +610 -0
  11. package/lib/_generated/export.variables.json +583 -0
  12. package/lib/index.d.ts +2 -0
  13. package/lib/index.js +7 -0
  14. package/lib/scripts/cssfabric.d.ts +24 -0
  15. package/lib/scripts/cssfabric.js +48 -0
  16. package/lib/scripts/cssfabricClassNames.d.ts +14 -0
  17. package/lib/scripts/cssfabricClassNames.js +150 -0
  18. package/lib/scripts/utils.d.ts +5 -0
  19. package/lib/scripts/utils.js +40 -0
  20. package/lib/styles/core/animation/animation.css +0 -0
  21. package/lib/styles/core/animation/animation.min.css +0 -0
  22. package/lib/styles/core/base/base.css +222 -0
  23. package/lib/styles/core/base/base.min.css +1 -0
  24. package/lib/styles/core/box/box.css +2263 -0
  25. package/lib/styles/core/box/box.min.css +1 -0
  26. package/lib/styles/core/box/box.responsive.css +13590 -0
  27. package/lib/styles/core/box/box.responsive.min.css +1 -0
  28. package/lib/styles/core/color/color.css +923 -0
  29. package/lib/styles/core/color/color.min.css +1 -0
  30. package/lib/styles/core/color/color.responsive.css +5550 -0
  31. package/lib/styles/core/color/color.responsive.min.css +1 -0
  32. package/lib/styles/core/flex/flex.css +140 -0
  33. package/lib/styles/core/flex/flex.min.css +1 -0
  34. package/lib/styles/core/flex/flex.responsive.css +852 -0
  35. package/lib/styles/core/flex/flex.responsive.min.css +1 -0
  36. package/lib/styles/core/grid/grid.css +50 -0
  37. package/lib/styles/core/grid/grid.min.css +1 -0
  38. package/lib/styles/core/grid/grid.responsive.css +312 -0
  39. package/lib/styles/core/grid/grid.responsive.min.css +1 -0
  40. package/lib/styles/core/main.css +2263 -0
  41. package/lib/styles/core/main.min.css +1 -0
  42. package/lib/styles/core/menu/menu.css +97 -0
  43. package/lib/styles/core/menu/menu.min.css +1 -0
  44. package/lib/styles/core/menu/menu.responsive.css +504 -0
  45. package/lib/styles/core/menu/menu.responsive.min.css +1 -0
  46. package/lib/styles/core/overflow/overflow.css +60 -0
  47. package/lib/styles/core/overflow/overflow.min.css +1 -0
  48. package/lib/styles/core/overflow/overflow.responsive.css +367 -0
  49. package/lib/styles/core/overflow/overflow.responsive.min.css +1 -0
  50. package/lib/styles/core/scale/scale.css +639 -0
  51. package/lib/styles/core/scale/scale.min.css +1 -0
  52. package/lib/styles/core/scale/scale.responsive.css +3846 -0
  53. package/lib/styles/core/scale/scale.responsive.min.css +1 -0
  54. package/lib/styles/core/table/table.css +72 -0
  55. package/lib/styles/core/table/table.min.css +1 -0
  56. package/lib/styles/core/table/table.responsive.css +444 -0
  57. package/lib/styles/core/table/table.responsive.min.css +1 -0
  58. package/lib/styles/core/text/text.css +147 -0
  59. package/lib/styles/core/text/text.min.css +1 -0
  60. package/lib/styles/core/text/text.responsive.css +894 -0
  61. package/lib/styles/core/text/text.responsive.min.css +1 -0
  62. package/lib/styles/core/theme/theme.css +197 -0
  63. package/lib/styles/core/theme/theme.min.css +1 -0
  64. package/lib/styles/core/vars.css +278 -0
  65. package/lib/styles/core/vars.min.css +1 -0
  66. package/lib/styles/core/zindex/zindex.css +279 -0
  67. package/lib/styles/core/zindex/zindex.min.css +1 -0
  68. package/lib/styles/cssfabric.css +7631 -0
  69. package/lib/styles/cssfabric.min.css +15 -0
  70. package/lib/styles/cssfabric.responsive.css +26359 -0
  71. package/lib/styles/cssfabric.responsive.min.css +9 -0
  72. package/package.json +67 -0
  73. package/src/_generated/export.variables.json +756 -0
  74. package/src/_generated/export.variables.md +240 -0
  75. package/src/_generated/index.d.ts +3 -0
  76. package/src/cssfabric/_utils.scss +205 -0
  77. package/src/cssfabric/index.d.ts +3 -0
  78. package/src/cssfabric/modules/_cssfabric-config.scss +89 -0
  79. package/src/cssfabric/modules/_mixins.scss +1 -0
  80. package/src/cssfabric/modules/animation/_animation-build.scss +121 -0
  81. package/src/cssfabric/modules/animation/_animation-vars.scss +17 -0
  82. package/src/cssfabric/modules/animation/animation.scss +3 -0
  83. package/src/cssfabric/modules/base/_base-vars.scss +17 -0
  84. package/src/cssfabric/modules/base/base.scss +80 -0
  85. package/src/cssfabric/modules/box/_box-build.scss +215 -0
  86. package/src/cssfabric/modules/box/_box-vars.scss +119 -0
  87. package/src/cssfabric/modules/box/box-responsive.scss +18 -0
  88. package/src/cssfabric/modules/box/box.scss +3 -0
  89. package/src/cssfabric/modules/color/_color-build.scss +108 -0
  90. package/src/cssfabric/modules/color/_color-vars.scss +80 -0
  91. package/src/cssfabric/modules/color/color-responsive.scss +23 -0
  92. package/src/cssfabric/modules/color/color.scss +3 -0
  93. package/src/cssfabric/modules/css-fabric.scss +2 -0
  94. package/src/cssfabric/modules/flex/_flex-build.scss +169 -0
  95. package/src/cssfabric/modules/flex/_flex-vars.scss +87 -0
  96. package/src/cssfabric/modules/flex/flex-responsive.scss +25 -0
  97. package/src/cssfabric/modules/flex/flex.scss +3 -0
  98. package/src/cssfabric/modules/grid/_grid-build.scss +91 -0
  99. package/src/cssfabric/modules/grid/_grid-vars.scss +87 -0
  100. package/src/cssfabric/modules/grid/grid-responsive.scss +25 -0
  101. package/src/cssfabric/modules/grid/grid.scss +3 -0
  102. package/src/cssfabric/modules/main.scss +3 -0
  103. package/src/cssfabric/modules/menu/_menu-build.scss +119 -0
  104. package/src/cssfabric/modules/menu/_menu-vars.scss +29 -0
  105. package/src/cssfabric/modules/menu/menu-responsive.scss +19 -0
  106. package/src/cssfabric/modules/menu/menu.scss +3 -0
  107. package/src/cssfabric/modules/overflow/_overflow-build.scss +22 -0
  108. package/src/cssfabric/modules/overflow/_overflow-vars.scss +31 -0
  109. package/src/cssfabric/modules/overflow/overflow-responsive.scss +25 -0
  110. package/src/cssfabric/modules/overflow/overflow.scss +5 -0
  111. package/src/cssfabric/modules/scale/_scale-build.scss +129 -0
  112. package/src/cssfabric/modules/scale/_scale-vars.scss +75 -0
  113. package/src/cssfabric/modules/scale/scale-responsive.scss +23 -0
  114. package/src/cssfabric/modules/scale/scale.scss +3 -0
  115. package/src/cssfabric/modules/table/_table-build.scss +134 -0
  116. package/src/cssfabric/modules/table/_table-vars.scss +30 -0
  117. package/src/cssfabric/modules/table/table-responsive.scss +24 -0
  118. package/src/cssfabric/modules/table/table.scss +3 -0
  119. package/src/cssfabric/modules/text/_text-build.scss +109 -0
  120. package/src/cssfabric/modules/text/_text-vars.scss +87 -0
  121. package/src/cssfabric/modules/text/text-responsive.scss +25 -0
  122. package/src/cssfabric/modules/text/text.scss +5 -0
  123. package/src/cssfabric/modules/theme/_theme-build.scss +77 -0
  124. package/src/cssfabric/modules/theme/_theme-vars.scss +47 -0
  125. package/src/cssfabric/modules/theme/theme.scss +5 -0
  126. package/src/cssfabric/modules/vars.scss +120 -0
  127. package/src/cssfabric/modules/zindex/_zindex-vars.scss +19 -0
  128. package/src/cssfabric/modules/zindex/zindex.scss +18 -0
  129. package/src/index.d.ts +3 -0
  130. package/src/index.ts +4 -0
  131. package/src/scripts/cssfabric.ts +54 -0
  132. package/src/scripts/cssfabricClassNames.ts +216 -0
  133. package/src/scripts/utils.ts +37 -0
  134. package/src/vendor/index.d.ts +3 -0
  135. package/src/vendor/normalize/normalize.min.css +2 -0
  136. package/src/vendor/sass-json-export/CHANGELOG.md +26 -0
  137. package/src/vendor/sass-json-export/Gruntfile.js +60 -0
  138. package/src/vendor/sass-json-export/LICENSE +20 -0
  139. package/src/vendor/sass-json-export/README.md +90 -0
  140. package/src/vendor/sass-json-export/package.json +60 -0
  141. package/src/vendor/sass-json-export/stylesheets/encode/api/_json.scss +26 -0
  142. package/src/vendor/sass-json-export/stylesheets/encode/encode.scss +17 -0
  143. package/src/vendor/sass-json-export/stylesheets/encode/helpers/_quote.scss +9 -0
  144. package/src/vendor/sass-json-export/stylesheets/encode/mixins/_json.scss +42 -0
  145. package/src/vendor/sass-json-export/stylesheets/encode/types/_bool.scss +7 -0
  146. package/src/vendor/sass-json-export/stylesheets/encode/types/_color.scss +8 -0
  147. package/src/vendor/sass-json-export/stylesheets/encode/types/_list.scss +14 -0
  148. package/src/vendor/sass-json-export/stylesheets/encode/types/_map.scss +15 -0
  149. package/src/vendor/sass-json-export/stylesheets/encode/types/_null.scss +7 -0
  150. package/src/vendor/sass-json-export/stylesheets/encode/types/_number.scss +8 -0
  151. package/src/vendor/sass-json-export/stylesheets/encode/types/_string.scss +8 -0
  152. package/src/vendor/sass-json-export/stylesheets/sass-json-export.scss +2 -0
  153. package/src/vendor/sass-json-export/test/encode/_index.scss +14 -0
  154. package/src/vendor/sass-json-export/test/encode/api/_json.scss +29 -0
  155. package/src/vendor/sass-json-export/test/encode/helpers/_quote.scss +6 -0
  156. package/src/vendor/sass-json-export/test/encode/types/_bool.scss +6 -0
  157. package/src/vendor/sass-json-export/test/encode/types/_color.scss +7 -0
  158. package/src/vendor/sass-json-export/test/encode/types/_list.scss +25 -0
  159. package/src/vendor/sass-json-export/test/encode/types/_map.scss +17 -0
  160. package/src/vendor/sass-json-export/test/encode/types/_null.scss +8 -0
  161. package/src/vendor/sass-json-export/test/encode/types/_number.scss +68 -0
  162. package/src/vendor/sass-json-export/test/encode/types/_string.scss +9 -0
  163. package/src/vendor/sass-json-export/test/test.scss +9 -0
  164. package/tsconfig.json +46 -0
  165. package/webpack.config.js +53 -0
@@ -0,0 +1,25 @@
1
+
2
+ @use "sass:map";
3
+ // load scss config file
4
+ @use '../../_utils';
5
+ @use '_text-build' as build;
6
+ @use "../cssfabric-config";
7
+ // load general config variables
8
+ $config: cssfabric-config.$cssfabric-config;
9
+
10
+ // load general config variables
11
+ // media queries sizes, in rem
12
+ $_media_quey_sizes: map-get($config, media_quey_sizes);
13
+
14
+ // builder responsive
15
+ $min_value: 0;
16
+
17
+ @each $mq_size_key,
18
+ $mq_size_value in $_media_quey_sizes {
19
+
20
+ @include utils.fabricResponsiveEncloser($mq_size_value,$min_value) {
21
+ @include build.buildText($mq_size_key);
22
+ }
23
+ $min_value: $mq_size_value;
24
+ }
25
+
@@ -0,0 +1,5 @@
1
+ @use '_text-build' as build;
2
+
3
+ @include build.buildText();
4
+
5
+
@@ -0,0 +1,77 @@
1
+ @use "theme-vars";
2
+ @use "../cssfabric-config";
3
+ @use "../../_utils";
4
+ @use "sass:color";
5
+
6
+ $theme-config: theme-vars.$theme-config;
7
+
8
+ // COLOR THEME
9
+ $moduleNameShort: map-get($theme-config, moduleNameShort);
10
+ //
11
+ $color-themes: map-get($theme-config, color-default-config);
12
+ $theme-levels: map-get($theme-config, theme-level-config);
13
+ $theme-properties-apply-config: map-get($theme-config, theme-properties-apply-config);
14
+
15
+ $color-primary: map-get($color-themes, primary);
16
+ $color-secondary: complement($color-primary);
17
+ $color-tertiary: complement(invert($color-primary));
18
+
19
+ $declinations-config: map-get($theme-config, declinations-config);
20
+
21
+ @mixin fabric_theme($mq_size_key: null) {
22
+ // loop on each color grades
23
+ @each $color-grade in $declinations-config {
24
+ $switch-color-grad: utils.themeDeclinationColors($color-grade, $color-primary);
25
+
26
+
27
+ @each $text-or-bg-or-border in $theme-properties-apply-config {
28
+ $property_key: if($mq_size_key, #{$text-or-bg-or-border}-#{$mq_size_key}, #{$text-or-bg-or-border});
29
+
30
+ $switch-tag-type: utils.getColorPropertyType($text-or-bg-or-border);
31
+
32
+ .#{$moduleNameShort}-#{$property_key}-#{$color-grade} {
33
+ #{$switch-tag-type}: var(--theme-color-#{$color-grade});
34
+
35
+ @each $theme-level in $theme-levels {
36
+ $newColor: var(--theme-color-#{$color-grade}-#{$theme-level});
37
+
38
+ @include utils.fabricAttributes("&-", $theme-level, #{$switch-tag-type}, $newColor);
39
+ }
40
+ }
41
+ }
42
+ }
43
+ }
44
+
45
+ @mixin themeCssVars() {
46
+ /* theme primary colors*/
47
+ --theme-color-primary: #{$color-primary};
48
+ @each $theme-level in $theme-levels {
49
+ --theme-color-primary-#{$theme-level}: #{utils.applyColorEffect($theme-level,$color-primary)};
50
+ }
51
+ --theme-color-primary-alpha-low: #{color.change($color-primary,$alpha:0.8)};
52
+ --theme-color-primary-alpha-mid: #{color.change($color-primary,$alpha:0.3)};
53
+ --theme-color-primary-alpha-high: #{color.change($color-primary,$alpha:0.1)};
54
+
55
+ /* theme secondary colors*/
56
+ --theme-color-secondary: #{$color-secondary};
57
+ @each $theme-level in $theme-levels {
58
+ --theme-color-secondary-#{$theme-level}: #{utils.applyColorEffect($theme-level,$color-secondary)};
59
+ }
60
+ --theme-color-secondary-alpha-low: #{color.change($color-secondary,$alpha:0.8)};
61
+ --theme-color-secondary-alpha-mid: #{color.change($color-secondary,$alpha:0.3)};
62
+ --theme-color-secondary-alpha-high: #{color.change($color-secondary,$alpha:0.1)};
63
+
64
+ /* theme tertiary colors*/
65
+ --theme-color-tertiary: #{$color-tertiary};
66
+ @each $theme-level in $theme-levels {
67
+ --theme-color-tertiary-#{$theme-level}: #{utils.applyColorEffect($theme-level,$color-tertiary)};
68
+ }
69
+ --theme-color-tertiary-alpha-low: #{color.change($color-tertiary,$alpha:0.8)};
70
+ --theme-color-tertiary-alpha-mid: #{color.change($color-tertiary,$alpha:0.3)};
71
+ --theme-color-tertiary-alpha-high: #{color.change($color-tertiary,$alpha:0.1)};
72
+
73
+ }
74
+
75
+ @mixin buildTheme($mq_size_key: null) {
76
+ @include fabric_theme($mq_size_key);
77
+ }
@@ -0,0 +1,47 @@
1
+ @use '../../utils' as utils;
2
+ @use "../cssfabric-config";
3
+
4
+
5
+ $config: cssfabric-config.$cssfabric-config;
6
+
7
+ $theme: map-get($config, theme);
8
+
9
+ $_color-primary: map-get($theme, primary) !default;
10
+ $_foreground: map-get($theme, foreground) !default;
11
+ $_background: map-get($theme, background) !default;
12
+
13
+ $_declinations-config: (primary, secondary, tertiary);
14
+ $_theme-levels: (light lighter dark darker complement invert);
15
+ $_theme-properties-apply: (text, bg, border);
16
+
17
+
18
+ $theme-metadata: (
19
+ "title": "theme",
20
+ "description": ""
21
+ );
22
+
23
+ $_theme-levels-obj: (_ light lighter dark darker complement invert);
24
+ $_declinations-config-object: (primary:$_theme-levels-obj, secondary:$_theme-levels-obj, tertiary:$_theme-levels-obj);
25
+
26
+
27
+ $theme-config: (
28
+ moduleName: theme,
29
+ moduleNameShort: theme,
30
+ color-default-config: (
31
+ primary: $_color-primary,
32
+ foreground: $_foreground,
33
+ background: $_background
34
+ ),
35
+ declinations-config:$_declinations-config,
36
+ theme-level-config:$_theme-levels,
37
+ theme-properties-apply-config:$_theme-properties-apply,
38
+ color: utils.getThemeLevels($_declinations-config, $_color-primary)
39
+ );
40
+
41
+ $theme-docs: (attributes:(
42
+ theme:(
43
+ tag: theme,
44
+ keys: $_theme-properties-apply,
45
+ levels: $_declinations-config-object
46
+ )
47
+ ));
@@ -0,0 +1,5 @@
1
+ @use '_theme-build' as build;
2
+
3
+ @include build.buildTheme(null);
4
+
5
+
@@ -0,0 +1,120 @@
1
+ @use "../_utils";
2
+ @use "sass:color";
3
+ @use 'cssfabric-config';
4
+ @use '../../cssfabric/modules/color/color-vars';
5
+ @use "../../cssfabric/modules/box/box-vars" as box;
6
+ @use "../../cssfabric/modules/box/box-build" as boxBuild;
7
+ @use "../../cssfabric/modules/theme/theme-build" as themeBuild;
8
+ @use "../../cssfabric/modules/text/text-build" as textBuild;
9
+
10
+ $config: cssfabric-config.$cssfabric-config;
11
+ /* cssFabric vars */
12
+
13
+ $tru: utils.get_fabric_conf('themes','light');
14
+
15
+ // COLOR config
16
+ $color-config: color-vars.$color-config;
17
+ // COLOR SCHEMES
18
+ $color-schemes: map-get($color-config, scheme);
19
+ // COLOR PALETTE
20
+ $color-palette: map-get($color-config, palette);
21
+ // COLOR TYPES
22
+ $color-types-config: map-get($color-config, color-types-config);
23
+
24
+ $themes: map-get($config, themes) !default;
25
+ $theme-light: map-get($themes, light) !default;
26
+ $theme-dark: map-get($themes, dark) !default;
27
+
28
+ // GRAYS
29
+ $gray-config: map-get($color-config, gray-config) !default;
30
+ $color-gray-start: map-get($gray-config, start) !default;
31
+ $color-gray-end: map-get($gray-config, end) !default;
32
+ $color-gray-steps: map-get($gray-config, steps) !default;
33
+ $gray-schemes: utils.getGraySteps($color-gray-steps, $color-gray-start, $color-gray-end);
34
+
35
+
36
+ // BOX config
37
+ $box-config: box.$box-config;
38
+
39
+ $box-shadows-steps: map-get($box-config, shadows-steps) !default;
40
+ $box-shadows-step-multiplier: map-get($box-config, shadows-step_multiplier) !default;
41
+ $box-shadow-shorthand-config: map-get($box-config, shadow-shorthand-config) !default;
42
+
43
+ :root {
44
+
45
+ @include themeBuild.themeCssVars();
46
+
47
+ --theme-color-foreground: #{map-get($theme-light, foreground)};
48
+ --theme-color-text: #{map-get($theme-light, foreground)};
49
+ --theme-color-background: #{map-get($theme-light, background)};
50
+ --theme-color-paper: #{map-get($theme-light, paper)};
51
+
52
+ --theme-color-border: var(--theme-color-primary-alpha-mid);
53
+ --theme-color-overlay: '';
54
+
55
+
56
+
57
+
58
+ /* color-scheme */
59
+ @each $type-key, $type-prop in $color-schemes {
60
+ --color-scheme-#{$type-key} : #{$type-prop};
61
+ --color-scheme-#{$type-key}-light: #{utils.applyColorEffect('light',$type-prop)};
62
+ --color-scheme-#{$type-key}-dark: #{utils.applyColorEffect('dark',$type-prop)};
63
+ }
64
+
65
+ /* color-palette */
66
+ @each $type-key, $type-prop in $color-palette {
67
+ /* color-palette #{$type-key} */
68
+ --color-palette-#{$type-key} : #{$type-prop};
69
+
70
+ --color-palette-#{$type-key}-lighter: #{utils.applyColorEffect('lighter',$type-prop)};
71
+ --color-palette-#{$type-key}-light: #{utils.applyColorEffect('light',$type-prop)};
72
+ --color-palette-#{$type-key}-dark: #{utils.applyColorEffect('dark',$type-prop)};
73
+ --color-palette-#{$type-key}-darker: #{utils.applyColorEffect('darker',$type-prop)};
74
+ --color-palette-#{$type-key}-complement: #{utils.applyColorEffect('complement',$type-prop)};
75
+ --color-palette-#{$type-key}-invert: #{utils.applyColorEffect('invert',$type-prop)};
76
+
77
+ --color-palette-#{$type-key}-alpha-low: #{color.change($type-prop,$alpha:0.8)};
78
+ --color-palette-#{$type-key}-alpha-mid: #{color.change($type-prop,$alpha:0.3)};
79
+ --color-palette-#{$type-key}-alpha-high: #{color.change($type-prop,$alpha:0.1)};
80
+ }
81
+
82
+ /* grays */
83
+ @each $type-key, $type-prop in $gray-schemes {
84
+ --color-gray-#{$type-key} : #{$type-prop};
85
+ --color-gray-#{$type-key}-alpha-low: #{color.change($type-prop,$alpha:0.8)};
86
+ }
87
+
88
+ /* shadows */
89
+ @include boxBuild.shadowsCssVars();
90
+ /* boxes */
91
+ @include boxBuild.pmbCssVars();
92
+ /* text */
93
+ @include textBuild.textCssVars();
94
+
95
+ }
96
+
97
+ /*[data-theme="light"] {
98
+
99
+ --theme-color-foreground: #{map-get($theme-light, foreground)};
100
+ --theme-color-text: #{map-get($theme-light, foreground)};
101
+ --theme-color-background: #{map-get($theme-light, background)};
102
+ --theme-color-paper: #{map-get($theme-light, paper)};
103
+
104
+ --theme-color-border: var(--theme-color-primary-alpha-mid);
105
+ --theme-color-overlay: '';
106
+ }*/
107
+
108
+ [data-theme="dark"] {
109
+
110
+ --theme-color-foreground: #{map-get($theme-dark, foreground)};
111
+ --theme-color-text: #{map-get($theme-dark, foreground)};
112
+ --theme-color-background: #{map-get($theme-dark, background)};
113
+ --theme-color-paper: #{map-get($theme-dark, paper)};
114
+
115
+ --theme-color-border: var(--theme-color-primary-alpha-mid);
116
+ --theme-color-overlay: '';
117
+ }
118
+
119
+
120
+
@@ -0,0 +1,19 @@
1
+ $zindex-metadata: (
2
+ title: zindex,
3
+ tag: zI,
4
+ description: "cssfabric zindex module to set z-index on all html elements",
5
+ );
6
+ $zindex-config: (
7
+ z_groups: (
8
+ a,
9
+ b,
10
+ c,
11
+ d,
12
+ e,
13
+ f,
14
+ g,
15
+ ),
16
+ );
17
+ $zindex-docs: (
18
+ z_groups: _,
19
+ );
@@ -0,0 +1,18 @@
1
+
2
+ @use 'zindex-vars';
3
+ $zindex-config: zindex-vars.$zindex-config;
4
+ // load scss config file
5
+ @use '../../_utils';
6
+
7
+ // read variables
8
+ $z_groups: map-get($zindex-config, z_groups);
9
+
10
+
11
+ @each $z_group in $z_groups {
12
+ $i: index($z_groups, $z-group);
13
+ @for $z_value from 0 through 9 {
14
+ .zI-#{$z_group}-#{$z_value} {
15
+ z-index: ($i * 100) + (($z_value + 1) * 10);
16
+ }
17
+ }
18
+ }
package/src/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ declare const cssfabric;
2
+
3
+ export default cssfabric;
package/src/index.ts ADDED
@@ -0,0 +1,4 @@
1
+
2
+ import cssfabric from "./scripts/cssfabric"
3
+
4
+ export default cssfabric
@@ -0,0 +1,54 @@
1
+ import jsonConfig from "../_generated/export.variables.json" ;
2
+ import cssfabricClassNames from "./cssfabricClassNames";
3
+
4
+ export type IFabricConfModulePart = Record<string, any>;
5
+ export type IFabricConfModuleDataPart = Record<string, any>;
6
+ export type IFabricConfModuleMetaDataPart = Record<string, any>;
7
+ export type IFabricConfModuleDocsPart = Record<string, any>;
8
+ export type TFabricConfModuleDocsAttributesPart = Record<string, any>;
9
+
10
+ //
11
+ const getModuleList = (): Record<string, any> => {
12
+ return jsonConfig["cssfabric"]?.["modules"] || {};
13
+ };
14
+
15
+ const getModuleConfig = (module?: string): IFabricConfModulePart => {
16
+ if (module) return jsonConfig["cssfabric"]?.["modules"]?.[module] || {};
17
+ return jsonConfig;
18
+ };
19
+
20
+ const getModuleData = (module?: string): IFabricConfModuleDataPart => {
21
+ if (module) return jsonConfig["cssfabric"]?.["modules"]?.[module]?.["_data"] || {};
22
+ return jsonConfig;
23
+ };
24
+
25
+ const getModuleMetaData = (module?: string): IFabricConfModuleMetaDataPart => {
26
+ if (module)
27
+ return jsonConfig["cssfabric"]?.["modules"]?.[module]?.["_metadata"] || {};
28
+ return jsonConfig;
29
+ };
30
+
31
+ const getModuleDocs = (module?: string): IFabricConfModuleDocsPart => {
32
+ if (module)
33
+ return jsonConfig["cssfabric"]?.["modules"]?.[module]?.["_docs"] || {};
34
+ return jsonConfig;
35
+ };
36
+
37
+ const getModuleDocsAttributes = (module?: string): TFabricConfModuleDocsAttributesPart => {
38
+ if (module)
39
+ return jsonConfig["cssfabric"]?.["modules"]?.[module]?.["_docs"]?.["attributes"] || {};
40
+ return jsonConfig;
41
+ };
42
+
43
+ export default {
44
+ getModuleList,
45
+ getModuleConfig,
46
+ getModuleData,
47
+ getModuleMetaData,
48
+ getModuleDocs,
49
+ getModuleDocsAttributes,
50
+ getClassNames: cssfabricClassNames,
51
+ getModuleClassNames: cssfabricClassNames,
52
+ getModuleTagClassNames: cssfabricClassNames.getModuleTagClassNames,
53
+ getModuleTagDebug: cssfabricClassNames.getModuleTagDebug,
54
+ };
@@ -0,0 +1,216 @@
1
+ import cssfabric from "./cssfabric"
2
+ import utils from "./utils";
3
+
4
+ export interface IListCssfabricClassNamesProps {
5
+ module: string;
6
+ moduleAttribute: any;
7
+ outputStyle?: 'default' | 'debug';
8
+ }
9
+
10
+ type TFabricClassName = string;
11
+ type TClassNameFragment = string | number;
12
+
13
+ type TCollect = string[];
14
+ type TFabricClassNameList = TFabricClassName[];
15
+ type TFabricClassNameListFragments = TClassNameFragment[];
16
+
17
+ type TGuess = any;
18
+ type TLevelKey = string;
19
+
20
+ type level = string[];
21
+
22
+ type IModuleLevels = level | level[] | [] | any[] | Record<string, any[]>;
23
+
24
+
25
+ export interface ILoopIt {
26
+ module: string;
27
+ }
28
+
29
+ function loopIt(props: ILoopIt) {
30
+
31
+ const {module} = props;
32
+ const moduleAttributes = cssfabric.getModuleDocsAttributes(module);
33
+
34
+ }
35
+
36
+ function cssfabricClassNames(props: IListCssfabricClassNamesProps) {
37
+
38
+ const {module, moduleAttribute, outputStyle} = props;
39
+ const moduleAttributes = cssfabric.getModuleDocsAttributes(module);
40
+
41
+ const fabricAttributes = moduleAttributes[moduleAttribute];
42
+ const moduleTag = fabricAttributes["tag"];
43
+ const moduleKeys: any[] = fabricAttributes["keys"] || undefined;
44
+ const moduleLevels: IModuleLevels = fabricAttributes["levels"] || undefined;
45
+ const moduleLevelsLinked: IModuleLevels = fabricAttributes["levelsLinked"] || undefined;
46
+ const moduleLevelsExtended = fabricAttributes["levelsDeclin"] || undefined;
47
+ const moduleClassNames = fabricAttributes["classNames"] || undefined;
48
+
49
+ let finalOutput: TCollect = [];
50
+ let finalOutputDebug: Record<string, any> = {};
51
+
52
+
53
+ return doParse(outputStyle);
54
+
55
+ function doParse(mode?: string) {
56
+
57
+ let keyList,
58
+ levelList,
59
+ levelListLinked,
60
+ levelListDeclin;
61
+
62
+ const finalOut = [];
63
+ const debugOut = {};
64
+
65
+ if (moduleKeys && moduleKeys.length) {
66
+ // beware of any [][]
67
+ keyList = concatenateWithKey(moduleTag, moduleKeys);
68
+ }
69
+
70
+ if (moduleLevels && Object.keys(moduleLevels).length) { // object !!!
71
+ levelList = Object.keys(moduleLevels).map((level) => {
72
+ let val = moduleLevels[level]
73
+ return concatenateWithKey(level, val);
74
+ }).flat();
75
+ }
76
+
77
+ if (moduleLevelsLinked && Object.keys(moduleLevelsLinked).length) {
78
+ levelListLinked = Object.keys(moduleLevelsLinked).map((level) => {
79
+ let val = moduleLevelsLinked[level]
80
+ return concatenateWithKey(level, val);
81
+ }).flat();
82
+ }
83
+
84
+
85
+ if (moduleLevelsExtended && Object.keys(moduleLevelsExtended).length) {
86
+ levelListDeclin = Object.keys(moduleLevelsExtended).map((level) => {
87
+ let val = moduleLevelsLinked[level]
88
+ return concatenateWithKey(level, val);
89
+ }).flat();
90
+ }
91
+
92
+ // prefix all now , and link
93
+ // colors :
94
+ if (keyList && !moduleLevels && !moduleLevelsLinked) {
95
+ // export
96
+ finalOut.push(keyList);
97
+ registerDebug('default', keyList);
98
+ }
99
+
100
+ if (moduleKeys && (moduleLevels || moduleLevelsLinked)) {
101
+ // base
102
+ if (moduleLevels) {
103
+ let tg = keyList.map(x => {
104
+
105
+ let tre = Object.keys(moduleLevels).map((level) => {
106
+ let val = moduleLevels[level]
107
+
108
+ let debugKey = (x !== '_' && x.toString().charAt(0) !== '_') ? x : level;
109
+ debugKey = (level.toString().charAt(0)==='_')? debugKey : debugKey + '-' + level
110
+ registerDebug(x, concatenateWithKey(debugKey , val), level);
111
+
112
+ return concatenateWithKey(level, val);
113
+ }).flat(4)
114
+
115
+ return concatenateWithKey(x, tre);
116
+
117
+ });
118
+ // is it declinated ? only colors, so nope
119
+ // export
120
+ finalOut.push(tg.flat());
121
+ }
122
+ // if moduleLevelsLinked // only color ?
123
+ if (moduleLevelsLinked) {
124
+ //
125
+ let yt = Object.values(moduleKeys).map(moduleKey => {
126
+
127
+ if (moduleKeys.includes(moduleKey)) {
128
+ let out = [];
129
+ // linked are here !!
130
+ registerDebug('linked', concatenateWithKey(moduleTag + '-' + moduleKey, moduleLevelsLinked[moduleKey]), moduleKey);
131
+
132
+ out.push(concatenateWithKey(moduleKey, moduleLevelsLinked[moduleKey]));
133
+ // is it declinated ?
134
+ if (moduleLevelsExtended && moduleLevelsExtended[moduleKey]) {
135
+ //
136
+ out.push(moduleLevelsLinked[moduleKey].map((z) => {
137
+ // iddem
138
+ registerDebug('declinated', concatenateWithKey(moduleTag + '-' + moduleKey + '-' + z, moduleLevelsExtended[moduleKey]), z);
139
+
140
+ return concatenateWithKey(z, moduleLevelsExtended[moduleKey]);
141
+ }).flat(2))
142
+ }
143
+
144
+ // flatten for group here
145
+ return out.flat(2);
146
+ }
147
+ }).flat();
148
+
149
+ // export
150
+ finalOut.push(concatenateWithKey(moduleTag, yt));
151
+
152
+ }
153
+ if (levelListDeclin) {
154
+ } // only colors ? don't go there
155
+
156
+ }
157
+ if (!keyList && levelList) {
158
+ // export
159
+ let kkk = concatenateWithKey(moduleTag, levelList);
160
+ finalOut.push(kkk);
161
+ }
162
+
163
+ if (moduleClassNames) {
164
+ let kk = parseClassNames();
165
+ let kkk = concatenateWithKey(moduleTag, kk);
166
+
167
+ registerDebug('classnames', kk);
168
+
169
+ // export
170
+ finalOut.push(kkk);
171
+ }
172
+
173
+ if (mode && mode === 'debug') {
174
+ return finalOutputDebug
175
+
176
+ } else {
177
+ return finalOut.flat(2);
178
+ }
179
+ }
180
+
181
+ function registerDebug(tag: string, data: string[], nestedTag?: string) {
182
+ if (nestedTag) {
183
+ if (!finalOutputDebug[tag]) finalOutputDebug[tag] = {}
184
+ finalOutputDebug[tag][nestedTag] = finalOutputDebug[tag][nestedTag] ? finalOutputDebug[tag][nestedTag].concat(data) : data;
185
+
186
+ } else {
187
+
188
+ finalOutputDebug[tag] = finalOutputDebug[tag] ? finalOutputDebug[tag].concat(data) : data;
189
+ }
190
+ }
191
+
192
+ function parseClassNames() {
193
+ return Object.keys(moduleClassNames).map((klass) => {
194
+ return concatenateWithKey(klass, moduleClassNames[klass]);
195
+ }).flat();
196
+ }
197
+
198
+
199
+ function concatenateWithKey(key, levelLine: string[]) {
200
+ return levelLine.map((levelTag: string) => {
201
+ return [key, levelTag].filter((val) => {
202
+ return (val !== '_' && val.toString().charAt(0) !== '_')
203
+ }).filter(x => Boolean(x)).join('-');
204
+ })
205
+ }
206
+
207
+
208
+ }
209
+
210
+ export default {
211
+ getModuleTagClassNames: cssfabricClassNames,
212
+ getModuleTagDebug: function doIt(props: IListCssfabricClassNamesProps) {
213
+ props.outputStyle = 'debug'
214
+ return cssfabricClassNames(props);
215
+ }
216
+ }
@@ -0,0 +1,37 @@
1
+ const utils = {
2
+
3
+ isArrayOfTypes: (arr: any): any => {
4
+ let ret = '';
5
+
6
+ if (!Array.isArray(arr)) {
7
+ return false;
8
+ }
9
+ if (arr.every(x => Array.isArray(x))) ret = 'arrays'
10
+ if (arr.every(x => typeof x === 'number' || typeof x === 'string' ) ) ret = 'strings'
11
+ if (arr.every(x => typeof x === 'string')) ret = 'strings'
12
+ if (arr.every(x => typeof x === 'number')) ret = 'numbers'
13
+ if (arr.every(x => typeof x === 'object' && !Array.isArray(x))) ret = 'objects'
14
+
15
+ return ret;
16
+ },
17
+
18
+ isObjectOfTypes: (arr: any): any => {
19
+
20
+ if (Array.isArray(arr)) {
21
+ return false;
22
+ }
23
+
24
+ let ret = '';
25
+ let arrValues = Object.values(arr);
26
+
27
+ if (arrValues.every(x => typeof x === 'number' || typeof x === 'string' ) ) ret = 'strings'
28
+ if (arrValues.every(x => Array.isArray(x))) ret = 'arrays'
29
+ if (arrValues.every(x => typeof x === 'string')) ret = 'strings'
30
+ if (arrValues.every(x => typeof x === 'number')) ret = 'numbers'
31
+ if (arrValues.every(x => typeof x === 'object' && !Array.isArray(x))) ret = 'objects'
32
+
33
+ return ret;
34
+ }
35
+ }
36
+
37
+ export default utils;
@@ -0,0 +1,3 @@
1
+ declare const module;
2
+
3
+ export default module;
@@ -0,0 +1,2 @@
1
+ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
2
+ /*# sourceMappingURL=normalize.min.css.map */
@@ -0,0 +1,26 @@
1
+ # Changelog
2
+ * `2.0.1`: Resolve Sass deprecation warnings (Sass 3.5+) -- [#3](https://github.com/oddbird/sass-json-export/pull/3).
3
+ * `2.0.0`: Removed json-decode and changed name to `sass-json-export`.
4
+ * `1.1.8`: Solved an issue with tabs
5
+ * `1.1.7`: Included cosmetic changes made after linting with [scss-lint](https://github.com/causes/scss-lint)
6
+ * `1.1.6`: JSON files that are loaded via `@import "data.json?varname` can be pretty printed now.
7
+ * `1.1.5`: Fixed `json-encode` mixin to keep `body::before` in the render tree. Making it possible to access via `getComputedStyle(document.body, ':before')`
8
+ * `1.1.4`: Small fix for the `npm` release
9
+ * `1.1.3`: fixed error in `_pow` introduced after updating to Sass 3.3.0.rc.3
10
+ * `1.1.2`: Made it possible to import JSON files via `@import 'relative/path/to/file.json?variable-name'`
11
+ * `1.1.1`: fixing a minor issue with the gem
12
+ * `1.1.0`: adding the ability to import a JSON file
13
+ * `1.0.11`: fixing an issue with scientific number parsing
14
+ * `1.0.10`: improving number and string helpers
15
+ * `1.0.9`: fixing a bug in `_find-exponent`
16
+ * `1.0.8`: fixing a major issue in Ruby Gem
17
+ * `1.0.7`: minor fixes and stable Ruby Gem
18
+ * `1.0.6`: released a Ruby Gem
19
+ * `1.0.5`: improved the encoding mixin
20
+ * `1.0.4`: fixed an error in map parsing
21
+ * `1.0.3`: slightly edited the mixin to dump JSON to CSS
22
+ * `1.0.2`: fixed an issue with string parsing
23
+ * `1.0.1`: fixed an issue with alpha color parsing
24
+ * `1.0.0`: Stable API. `json-encode` and `json-decode`
25
+ * `0.0.2`: added `json-decode` and test
26
+ * `0.0.1`: initial commit