@medyll/cssfabric 0.2.1-beta.6 → 0.2.1-beta.8
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.
- package/dist/NewMenu.svelte +11 -8
- package/dist/NewMenu.svelte.d.ts +4 -4
- package/dist/css/cssfabric.css +4829 -4830
- package/dist/css/cssfabric.min.css +1 -4877
- package/dist/css/cssfabric.responsive.css +11791 -11791
- package/dist/css/cssfabric.responsive.min.css +1 -1
- package/dist/cssf/README.md +2 -48
- package/dist/cssf/cssFabricMixins.scss +95 -0
- package/dist/cssf/cssfLib.d.ts +28 -28
- package/dist/generated/cssFabric.vars.json +12 -12
- package/dist/generated/cssFabric.vars.md +105 -105
- package/dist/legacy/scripts/cssfabric.d.ts +5 -5
- package/dist/scss/_utils.scss +23 -21
- package/dist/scss/modules/_cssfabric-config.scss +2 -1
- package/dist/scss/modules/box/_box-build.scss +3 -2
- package/dist/scss/modules/box/box-responsive.scss +2 -1
- package/dist/scss/modules/color/_color-build.scss +8 -7
- package/dist/scss/modules/color/color-responsive.scss +1 -1
- package/dist/scss/modules/flex/_flex-build.scss +11 -10
- package/dist/scss/modules/flex/_flex-vars.scss +3 -2
- package/dist/scss/modules/flex/flex-responsive.scss +2 -1
- package/dist/scss/modules/grid/_grid-build.scss +11 -10
- package/dist/scss/modules/grid/_grid-vars.scss +3 -2
- package/dist/scss/modules/grid/grid-responsive.scss +2 -1
- package/dist/scss/modules/menu/_menu-build.scss +11 -10
- package/dist/scss/modules/menu/menu-responsive.scss +2 -1
- package/dist/scss/modules/overflow/_overflow-build.scss +3 -2
- package/dist/scss/modules/overflow/overflow-responsive.scss +1 -1
- package/dist/scss/modules/scale/_scale-build.scss +4 -3
- package/dist/scss/modules/scale/scale-responsive.scss +2 -1
- package/dist/scss/modules/table/_table-build.scss +9 -8
- package/dist/scss/modules/table/table-responsive.scss +2 -1
- package/dist/scss/modules/text/_text-build.scss +15 -14
- package/dist/scss/modules/text/_text-vars.scss +7 -6
- package/dist/scss/modules/text/text-responsive.scss +1 -1
- package/dist/scss/modules/theme/_theme-build.scss +7 -6
- package/dist/scss/modules/theme/_theme-vars.scss +30 -24
- package/dist/scss/modules/vars.scss +8 -8
- package/dist/scss/modules/zindex/zindex.scss +2 -1
- package/dist/style/cssfabric.css +0 -0
- package/dist/style/cssfabric.min.css +0 -0
- package/dist/style/cssfabric.responsive.css +0 -0
- package/dist/style/cssfabric.responsive.min.css +0 -0
- package/dist/styles/cssfabric.css +0 -0
- package/dist/styles/cssfabric.min.css +0 -0
- package/dist/styles/cssfabric.responsive.css +0 -0
- package/dist/styles/cssfabric.responsive.min.css +0 -0
- package/package.json +28 -27
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use "sass:map";
|
|
1
2
|
@use '../../utils';
|
|
2
3
|
|
|
3
4
|
|
|
@@ -71,13 +72,13 @@ $flex-docs: (// add align-middle non generated className // grow + shrink
|
|
|
71
72
|
keys: (v, h),
|
|
72
73
|
classNames: (
|
|
73
74
|
align: $_grid-align,
|
|
74
|
-
grid:utils.getObjectKeys(map
|
|
75
|
+
grid:utils.getObjectKeys(map.get($_cssProps, flexWrap)), // add inline !
|
|
75
76
|
),
|
|
76
77
|
about: "a classic flex grid system, and hey, it gets height !"
|
|
77
78
|
),
|
|
78
79
|
self:(
|
|
79
80
|
tag: self,
|
|
80
|
-
keys: utils.getObjectKeys(map
|
|
81
|
+
keys: utils.getObjectKeys(map.get($_cssItemsProps, self)),
|
|
81
82
|
about: "flex children specific classnames"
|
|
82
83
|
)
|
|
83
84
|
)
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use "sass:map";
|
|
1
2
|
|
|
2
3
|
|
|
3
4
|
// load scss config file
|
|
@@ -9,7 +10,7 @@ $config: cssfabric-config.$cssfabric-config;
|
|
|
9
10
|
|
|
10
11
|
// load general config variables
|
|
11
12
|
// media queries sizes, in rem
|
|
12
|
-
$_media_quey_sizes: map
|
|
13
|
+
$_media_quey_sizes: map.get($config, media_quey_sizes);
|
|
13
14
|
|
|
14
15
|
|
|
15
16
|
// builder responsive
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use "sass:map";
|
|
1
2
|
// load scss config file
|
|
2
3
|
@use '../../_utils';
|
|
3
4
|
@use '../cssfabric-config';
|
|
@@ -6,21 +7,21 @@
|
|
|
6
7
|
$grid-config: grid-vars.$grid-config;
|
|
7
8
|
$cssfabric-config: cssfabric-config.$cssfabric-config;
|
|
8
9
|
|
|
9
|
-
$sep: map
|
|
10
|
+
$sep: map.get($cssfabric-config, sep);
|
|
10
11
|
// read variables
|
|
11
|
-
$grid-code: map
|
|
12
|
-
$grid-h: map
|
|
13
|
-
$grid-v: map
|
|
12
|
+
$grid-code: map.get($grid-config, moduleNameShort);
|
|
13
|
+
$grid-h: map.get($grid-config, horCode);
|
|
14
|
+
$grid-v: map.get($grid-config, vertCode);
|
|
14
15
|
|
|
15
|
-
$cssProps: map
|
|
16
|
-
$cssItemsProps: map
|
|
16
|
+
$cssProps: map.get($grid-config, cssProps);
|
|
17
|
+
$cssItemsProps: map.get($grid-config, cssItemsProps);
|
|
17
18
|
|
|
18
|
-
$gridFullWidth: map
|
|
19
|
+
$gridFullWidth: map.get($grid-config, gridFullWidth);
|
|
19
20
|
|
|
20
|
-
$grow-shrink-steps: map
|
|
21
|
+
$grow-shrink-steps: map.get($grid-config, grow-shrink-steps);
|
|
21
22
|
|
|
22
|
-
$grid-max-cols: map
|
|
23
|
-
$grid-max-rows: map
|
|
23
|
+
$grid-max-cols: map.get($grid-config, grid-max-cols);
|
|
24
|
+
$grid-max-rows: map.get($grid-config, grid-max-rows);
|
|
24
25
|
|
|
25
26
|
$grid-code-sep: #{$grid-code}#{$sep};
|
|
26
27
|
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use "sass:map";
|
|
1
2
|
@use '../../utils';
|
|
2
3
|
|
|
3
4
|
|
|
@@ -75,13 +76,13 @@ $grid-docs: (// add align-middle non generated className // grow + shrink
|
|
|
75
76
|
keys: (v, h),
|
|
76
77
|
classNames: (
|
|
77
78
|
align: $_grid-align,
|
|
78
|
-
grid:utils.getObjectKeys(map
|
|
79
|
+
grid:utils.getObjectKeys(map.get($_cssProps, flexWrap)), // add inline !
|
|
79
80
|
),
|
|
80
81
|
about: "a classic grid system"
|
|
81
82
|
),
|
|
82
83
|
self:(
|
|
83
84
|
tag: self,
|
|
84
|
-
keys: utils.getObjectKeys(map
|
|
85
|
+
keys: utils.getObjectKeys(map.get($_cssItemsProps, self)),
|
|
85
86
|
about: "grid children specific classnames"
|
|
86
87
|
)
|
|
87
88
|
)
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use "sass:map";
|
|
1
2
|
|
|
2
3
|
|
|
3
4
|
// load scss config file
|
|
@@ -9,7 +10,7 @@ $config: cssfabric-config.$cssfabric-config;
|
|
|
9
10
|
|
|
10
11
|
// load general config variables
|
|
11
12
|
// media queries sizes, in rem
|
|
12
|
-
$_media_quey_sizes: map
|
|
13
|
+
$_media_quey_sizes: map.get($config, media_quey_sizes);
|
|
13
14
|
|
|
14
15
|
|
|
15
16
|
// builder responsive
|
|
@@ -1,22 +1,23 @@
|
|
|
1
|
+
@use "sass:map";
|
|
1
2
|
@use 'menu-vars';
|
|
2
3
|
@use '../../_utils';
|
|
3
4
|
|
|
4
5
|
$menu-config: menu-vars.$menu-config;
|
|
5
6
|
|
|
6
7
|
// read variables
|
|
7
|
-
$menu_class_name: map
|
|
8
|
-
$menu_class_name_short: map
|
|
8
|
+
$menu_class_name: map.get($menu-config, menu_class_name);
|
|
9
|
+
$menu_class_name_short: map.get($menu-config, menu_class_name_short);
|
|
9
10
|
|
|
10
|
-
$menu_item_class_name: map
|
|
11
|
-
$menu_item_class_name_short: map
|
|
11
|
+
$menu_item_class_name: map.get($menu-config, menu_item_class_name);
|
|
12
|
+
$menu_item_class_name_short: map.get($menu-config, menu_item_class_name_short);
|
|
12
13
|
|
|
13
|
-
$orientations: map
|
|
14
|
-
$menu_item_disabled_tag: map
|
|
15
|
-
$menu_item_selected_tag: map
|
|
14
|
+
$orientations: map.get($menu-config, orientations);
|
|
15
|
+
$menu_item_disabled_tag: map.get($menu-config, menu_item_disabled_tag);
|
|
16
|
+
$menu_item_selected_tag: map.get($menu-config, menu_item_selected_tag);
|
|
16
17
|
|
|
17
|
-
$menu_dropdown_tag: map
|
|
18
|
-
$menu_dropdown_open: map
|
|
19
|
-
$menu_dropdown_close: map
|
|
18
|
+
$menu_dropdown_tag: map.get($menu-config, menu_dropdown_tag);
|
|
19
|
+
$menu_dropdown_open: map.get($menu-config, menu_dropdown_open);
|
|
20
|
+
$menu_dropdown_close: map.get($menu-config, menu_dropdown_close);
|
|
20
21
|
|
|
21
22
|
@mixin buildMenu($mq_key) {
|
|
22
23
|
$class_name: if($mq_key, #{$menu_class_name}-#{$mq_key}, #{$menu_class_name});
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use "sass:map";
|
|
1
2
|
|
|
2
3
|
@use '../../_utils';
|
|
3
4
|
@use '_menu-build'as build;
|
|
@@ -5,7 +6,7 @@
|
|
|
5
6
|
// load general config variables
|
|
6
7
|
$config: cssfabric-config.$cssfabric-config;
|
|
7
8
|
|
|
8
|
-
$_media_quey_sizes: map
|
|
9
|
+
$_media_quey_sizes: map.get($config, media_quey_sizes);
|
|
9
10
|
|
|
10
11
|
// builder responsive
|
|
11
12
|
$min_value: 0;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use "sass:map";
|
|
1
2
|
|
|
2
3
|
@use 'overflow-vars';
|
|
3
4
|
$overflow-config: overflow-vars.$overflow-config;
|
|
@@ -5,8 +6,8 @@ $overflow-config: overflow-vars.$overflow-config;
|
|
|
5
6
|
@use '../../_utils';
|
|
6
7
|
|
|
7
8
|
// read variables
|
|
8
|
-
$overflow_props: map
|
|
9
|
-
$overflow_values: map
|
|
9
|
+
$overflow_props: map.get($overflow-config, overflow_props);
|
|
10
|
+
$overflow_values: map.get($overflow-config, overflow_values);
|
|
10
11
|
|
|
11
12
|
/* css overflow rules */
|
|
12
13
|
@mixin buildOverflow($mq_size_key: null) {
|
|
@@ -9,7 +9,7 @@ $config: cssfabric-config.$cssfabric-config;
|
|
|
9
9
|
|
|
10
10
|
// load general config variables
|
|
11
11
|
// media queries sizes, in rem
|
|
12
|
-
$_media_quey_sizes: map
|
|
12
|
+
$_media_quey_sizes: map.get($config, media_quey_sizes);
|
|
13
13
|
|
|
14
14
|
// builder responsive
|
|
15
15
|
$min_value: 0;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use "sass:map";
|
|
1
2
|
@use 'scale-vars';
|
|
2
3
|
@use '../../_utils';
|
|
3
4
|
@use "sass:math";
|
|
@@ -5,7 +6,7 @@
|
|
|
5
6
|
$_cfg: utils.get_fabric_conf();
|
|
6
7
|
|
|
7
8
|
// read variables
|
|
8
|
-
$_has_dimensions_strict: map
|
|
9
|
+
$_has_dimensions_strict: map.get($_cfg, has_dimensions_strict);
|
|
9
10
|
$_has_dimensions_min: true; // map-get($_cfg, has_dimensions_min);
|
|
10
11
|
$_has_dimensions_max: true; // map-get($_cfg, has_dimensions_max);
|
|
11
12
|
|
|
@@ -24,7 +25,7 @@ $scale-sizes-preset-config: scale-vars.$scale-sizes-preset-config;
|
|
|
24
25
|
/// css dimensions rules builder
|
|
25
26
|
@mixin scale-classname-builder($scale_prop, $size_code, $size_value, $media_query_code) {
|
|
26
27
|
|
|
27
|
-
$scale_prop_short: map
|
|
28
|
+
$scale_prop_short: map.get($unit-tag-config, $scale_prop);
|
|
28
29
|
|
|
29
30
|
$tag: if(
|
|
30
31
|
$media_query_code,
|
|
@@ -60,7 +61,7 @@ $scale-sizes-preset-config: scale-vars.$scale-sizes-preset-config;
|
|
|
60
61
|
@include scale-classname-builder(
|
|
61
62
|
$scale_prop,
|
|
62
63
|
$scale_shorthand,
|
|
63
|
-
map
|
|
64
|
+
map.get($scale-sizes, $scale_shorthand),
|
|
64
65
|
$mq_size_key
|
|
65
66
|
);
|
|
66
67
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use "sass:map";
|
|
1
2
|
|
|
2
3
|
// load scss config file
|
|
3
4
|
@use '../../_utils';
|
|
@@ -8,7 +9,7 @@ $config: cssfabric-config.$cssfabric-config;
|
|
|
8
9
|
|
|
9
10
|
// load general config variables
|
|
10
11
|
// media queries sizes, in rem
|
|
11
|
-
$_media_quey_sizes: map
|
|
12
|
+
$_media_quey_sizes: map.get($config, media_quey_sizes);
|
|
12
13
|
|
|
13
14
|
// builder responsive
|
|
14
15
|
$min_value: 0;
|
|
@@ -1,18 +1,19 @@
|
|
|
1
|
+
@use "sass:map";
|
|
1
2
|
@use 'table-vars';
|
|
2
3
|
@use '../../_utils';
|
|
3
4
|
|
|
4
5
|
$table-config: table-vars.$table-config;
|
|
5
6
|
|
|
6
|
-
$TABLE_PREFIX: map
|
|
7
|
-
$TABLE_PREFIX_SHORT: map
|
|
7
|
+
$TABLE_PREFIX: map.get($table-config, table_class_name);
|
|
8
|
+
$TABLE_PREFIX_SHORT: map.get($table-config, table_class_name_short);
|
|
8
9
|
|
|
9
|
-
$table_bg_color_head: map
|
|
10
|
-
$table_bg_color_strip_main: map
|
|
11
|
-
$table_bg_color_strip_second: map
|
|
10
|
+
$table_bg_color_head: map.get($table-config, table-bg-color-head);
|
|
11
|
+
$table_bg_color_strip_main: map.get($table-config, table-bg-color-strip-main);
|
|
12
|
+
$table_bg_color_strip_second: map.get($table-config, table-bg-color-strip-second);
|
|
12
13
|
|
|
13
|
-
$table_border_color_header: map
|
|
14
|
-
$table_border_color_main: map
|
|
15
|
-
$table_border_color_second: map
|
|
14
|
+
$table_border_color_header: map.get($table-config, table-border-color-header);
|
|
15
|
+
$table_border_color_main: map.get($table-config, table-border-color-main);
|
|
16
|
+
$table_border_color_second: map.get($table-config, table-border-color-second);
|
|
16
17
|
|
|
17
18
|
// .table-bg-strip-2
|
|
18
19
|
@mixin bg-strip($prefix_short,$nb_strips) {
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use "sass:map";
|
|
1
2
|
|
|
2
3
|
// load scss config file
|
|
3
4
|
@use '../../_utils';
|
|
@@ -8,7 +9,7 @@ $config: cssfabric-config.$cssfabric-config;
|
|
|
8
9
|
|
|
9
10
|
// load general config variables
|
|
10
11
|
// media queries sizes, in rem
|
|
11
|
-
$_media_quey_sizes: map
|
|
12
|
+
$_media_quey_sizes: map.get($config, media_quey_sizes);
|
|
12
13
|
|
|
13
14
|
// builder responsive
|
|
14
15
|
$min_value: 0;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use "sass:map";
|
|
1
2
|
@use 'text-vars';
|
|
2
3
|
@use "../cssfabric-config";
|
|
3
4
|
@use '../../_utils';
|
|
@@ -5,26 +6,26 @@
|
|
|
5
6
|
|
|
6
7
|
// load general config variables
|
|
7
8
|
$cssfabric-config: cssfabric-config.$cssfabric-config;
|
|
8
|
-
$sep: map
|
|
9
|
+
$sep: map.get($cssfabric-config, sep);
|
|
9
10
|
|
|
10
11
|
$text-config: text-vars.$text-config;
|
|
11
|
-
$moduleName: map
|
|
12
|
-
$moduleNameShort: map
|
|
12
|
+
$moduleName: map.get($text-config, moduleName);
|
|
13
|
+
$moduleNameShort: map.get($text-config, moduleNameShort);
|
|
13
14
|
|
|
14
|
-
$cssProps: map
|
|
15
|
-
$color-schemes: map
|
|
16
|
-
$color-palette-props: map
|
|
15
|
+
$cssProps: map.get($text-config, cssProps);
|
|
16
|
+
$color-schemes: map.get($text-config, scheme);
|
|
17
|
+
$color-palette-props: map.get($text-config, palette);
|
|
17
18
|
|
|
18
|
-
$gray-list: map
|
|
19
|
+
$gray-list: map.get($text-config, gray);
|
|
19
20
|
|
|
20
|
-
$textTransform: map
|
|
21
|
-
$fontWeight: map
|
|
22
|
-
$textAlign: map
|
|
21
|
+
$textTransform: map.get($cssProps, textTransform);
|
|
22
|
+
$fontWeight: map.get($cssProps, fontWeight);
|
|
23
|
+
$textAlign: map.get($cssProps, textAlign);
|
|
23
24
|
|
|
24
|
-
$font-size-unit-config: map
|
|
25
|
-
$font-size-h-steps: map
|
|
26
|
-
$font-size-h-max-config: map
|
|
27
|
-
$font-size-h-min-config: map
|
|
25
|
+
$font-size-unit-config: map.get($text-config, font-size-unit-config) !default;
|
|
26
|
+
$font-size-h-steps: map.get($text-config, title-size-declination-config) !default;
|
|
27
|
+
$font-size-h-max-config: map.get($text-config, font-sizes-h1-rem-config) !default;
|
|
28
|
+
$font-size-h-min-config: map.get($text-config, font-size-h-min-rem-config) !default;
|
|
28
29
|
|
|
29
30
|
$size-diff: $font-size-h-max-config - $font-size-h-min-config;
|
|
30
31
|
$steps: $font-size-h-steps - 1;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use "sass:map";
|
|
1
2
|
@use '../../_utils';
|
|
2
3
|
|
|
3
4
|
$cssProps: (
|
|
@@ -52,8 +53,8 @@ $text-config: (
|
|
|
52
53
|
none: none,
|
|
53
54
|
full: full-width
|
|
54
55
|
),
|
|
55
|
-
fontWeight: map
|
|
56
|
-
textAlign: map
|
|
56
|
+
fontWeight: map.get($cssProps, "font-weight"),
|
|
57
|
+
textAlign: map.get($cssProps, "text-align")
|
|
57
58
|
),
|
|
58
59
|
scheme: utils.get_fabric_conf(scheme),
|
|
59
60
|
palette: utils.get_fabric_conf(palette),
|
|
@@ -64,19 +65,19 @@ $text-docs: (
|
|
|
64
65
|
attributes: (
|
|
65
66
|
text-transform: (
|
|
66
67
|
tag: text,
|
|
67
|
-
keys: utils.getObjectKeys(map
|
|
68
|
+
keys: utils.getObjectKeys(map.get($cssProps, text-transform))
|
|
68
69
|
),
|
|
69
70
|
font-weight: (
|
|
70
71
|
tag: text,
|
|
71
|
-
keys: utils.getObjectKeys(map
|
|
72
|
+
keys: utils.getObjectKeys(map.get($cssProps, font-weight))
|
|
72
73
|
),
|
|
73
74
|
text-align: (
|
|
74
75
|
tag: text,
|
|
75
|
-
keys: utils.getObjectKeys(map
|
|
76
|
+
keys: utils.getObjectKeys(map.get($cssProps, text-align))
|
|
76
77
|
),
|
|
77
78
|
text-shadow: (
|
|
78
79
|
tag: text-shad,
|
|
79
|
-
keys: utils.getObjectKeys(map
|
|
80
|
+
keys: utils.getObjectKeys(map.get($cssProps, text-shadow))
|
|
80
81
|
)
|
|
81
82
|
),
|
|
82
83
|
classNames: (
|
|
@@ -9,7 +9,7 @@ $config: cssfabric-config.$cssfabric-config;
|
|
|
9
9
|
|
|
10
10
|
// load general config variables
|
|
11
11
|
// media queries sizes, in rem
|
|
12
|
-
$_media_quey_sizes: map
|
|
12
|
+
$_media_quey_sizes: map.get($config, media_quey_sizes);
|
|
13
13
|
|
|
14
14
|
// builder responsive
|
|
15
15
|
$min_value: 0;
|
|
@@ -2,17 +2,18 @@
|
|
|
2
2
|
@use "sass:color";
|
|
3
3
|
@use "theme-vars";
|
|
4
4
|
|
|
5
|
-
@
|
|
6
|
-
@
|
|
5
|
+
@use "sass:map";
|
|
6
|
+
@use "theme-vars";
|
|
7
|
+
@use "../cssfabric-config";
|
|
7
8
|
|
|
8
9
|
// COLOR THEME
|
|
9
|
-
$moduleNameShort: map
|
|
10
|
+
$moduleNameShort: map.get(theme-vars.$theme-config, moduleNameShort);
|
|
10
11
|
//
|
|
11
|
-
$theme-levels: map
|
|
12
|
-
$theme-properties-apply-config: map
|
|
12
|
+
$theme-levels: map.get(theme-vars.$theme-config, theme-level-config);
|
|
13
|
+
$theme-properties-apply-config: map.get(theme-vars.$theme-config, theme-properties-apply-config);
|
|
13
14
|
|
|
14
15
|
|
|
15
|
-
$declinations-config: map
|
|
16
|
+
$declinations-config: map.get(theme-vars.$theme-config, declinations-config);
|
|
16
17
|
|
|
17
18
|
@mixin fabric_theme($mq_size_key: null) {
|
|
18
19
|
// loop on each color grades primary secondary tertiary
|
|
@@ -1,46 +1,52 @@
|
|
|
1
|
-
@use
|
|
2
|
-
@
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
@use "../../utils" as utils;
|
|
2
|
+
@use "../cssfabric-config";
|
|
5
3
|
|
|
6
4
|
$_declinations-config: (primary, secondary, tertiary);
|
|
7
|
-
$themeii
|
|
5
|
+
$themeii: (
|
|
6
|
+
primary: cssfabric-config.$theme-color-primary,
|
|
7
|
+
secondary: cssfabric-config.$theme-color-secondary,
|
|
8
|
+
tertiary: cssfabric-config.$theme-color-tertiary
|
|
9
|
+
);
|
|
8
10
|
|
|
9
11
|
$_theme-levels: (light lighter dark darker complement invert);
|
|
10
12
|
$_theme-properties-apply: (text, bg, border);
|
|
11
13
|
|
|
12
|
-
|
|
13
14
|
$theme-metadata: (
|
|
14
15
|
"title": "theme",
|
|
15
16
|
"description": ""
|
|
16
17
|
);
|
|
17
18
|
|
|
18
19
|
$_theme-levels-obj: (_ light lighter dark darker complement invert);
|
|
19
|
-
$_declinations-config-object: (
|
|
20
|
-
|
|
20
|
+
$_declinations-config-object: (
|
|
21
|
+
primary: $_theme-levels-obj,
|
|
22
|
+
secondary: $_theme-levels-obj,
|
|
23
|
+
tertiary: $_theme-levels-obj
|
|
24
|
+
);
|
|
21
25
|
|
|
22
26
|
$theme-config: (
|
|
23
27
|
moduleName: theme,
|
|
24
28
|
moduleNameShort: theme,
|
|
25
29
|
color-default-config: (
|
|
26
|
-
primary:
|
|
27
|
-
secondary:
|
|
28
|
-
tertiary:
|
|
29
|
-
foreground:
|
|
30
|
-
background:
|
|
31
|
-
paper:
|
|
30
|
+
primary: cssfabric-config.$theme-color-primary,
|
|
31
|
+
secondary: cssfabric-config.$theme-color-secondary,
|
|
32
|
+
tertiary: cssfabric-config.$theme-color-tertiary,
|
|
33
|
+
foreground: cssfabric-config.$theme-color-foreground,
|
|
34
|
+
background: cssfabric-config.$theme-color-background,
|
|
35
|
+
paper: cssfabric-config.$theme-color-paper
|
|
32
36
|
),
|
|
33
|
-
declinations-config
|
|
34
|
-
theme-level-config
|
|
35
|
-
theme-properties-apply-config
|
|
37
|
+
declinations-config: $_declinations-config,
|
|
38
|
+
theme-level-config: $_theme-levels,
|
|
39
|
+
theme-properties-apply-config: $_theme-properties-apply,
|
|
36
40
|
// primary secondary tertiary
|
|
37
|
-
color: utils.getThemeLevels($themeii,
|
|
41
|
+
color: utils.getThemeLevels($themeii, cssfabric-config.$theme-color-primary)
|
|
38
42
|
);
|
|
39
43
|
|
|
40
|
-
$theme-docs: (
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
44
|
+
$theme-docs: (
|
|
45
|
+
attributes: (
|
|
46
|
+
theme: (
|
|
47
|
+
tag: theme,
|
|
48
|
+
keys: $_theme-properties-apply,
|
|
49
|
+
levels: $_declinations-config-object
|
|
50
|
+
)
|
|
45
51
|
)
|
|
46
|
-
)
|
|
52
|
+
);
|
|
@@ -6,14 +6,14 @@
|
|
|
6
6
|
@use "./theme/theme-build" as themeBuild;
|
|
7
7
|
@use "./text/text-build" as textBuild;
|
|
8
8
|
|
|
9
|
-
@
|
|
9
|
+
@use "cssfabric-config";
|
|
10
10
|
|
|
11
11
|
/*
|
|
12
12
|
cssFabric vars
|
|
13
13
|
*/
|
|
14
14
|
:root {
|
|
15
15
|
/* --theme-color-primary|*-alpha-|* */
|
|
16
|
-
@include themeBuild.themeCssVars(
|
|
16
|
+
@include themeBuild.themeCssVars(cssfabric-config.$theme-color-primary, cssfabric-config.$theme-color-secondary, cssfabric-config.$theme-color-tertiary);
|
|
17
17
|
|
|
18
18
|
@include colorBuild.buildColorCssVars();
|
|
19
19
|
/* text */
|
|
@@ -27,20 +27,20 @@ cssFabric vars
|
|
|
27
27
|
|
|
28
28
|
&,
|
|
29
29
|
[data-theme="light"] {
|
|
30
|
-
@include themeBuild.themeBaseVars(
|
|
30
|
+
@include themeBuild.themeBaseVars(cssfabric-config.$theme-color-foreground, cssfabric-config.$theme-color-background, cssfabric-config.$theme-color-paper);
|
|
31
31
|
|
|
32
|
-
--theme-color-border: #{color.change(
|
|
32
|
+
--theme-color-border: #{color.change(cssfabric-config.$theme-color-foreground, $alpha: 0.2)};
|
|
33
33
|
--theme-color-overlay: rgba($theme-color-foreground, 0.4);
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
[data-theme="dark"] {
|
|
37
37
|
@include themeBuild.themeBaseVars(
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
38
|
+
cssfabric-config.$theme-dark-color-foreground,
|
|
39
|
+
cssfabric-config.$theme-dark-color-background,
|
|
40
|
+
cssfabric-config.$theme-dark-color-paper
|
|
41
41
|
);
|
|
42
42
|
|
|
43
|
-
--theme-color-border: #{color.change(
|
|
43
|
+
--theme-color-border: #{color.change(cssfabric-config.$theme-dark-color-foreground, $alpha: 0.3)};
|
|
44
44
|
--theme-color-overlay: rgba($theme-dark-color-background, 0.4);
|
|
45
45
|
}
|
|
46
46
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use "sass:map";
|
|
1
2
|
|
|
2
3
|
@use 'zindex-vars';
|
|
3
4
|
$zindex-config: zindex-vars.$zindex-config;
|
|
@@ -5,7 +6,7 @@ $zindex-config: zindex-vars.$zindex-config;
|
|
|
5
6
|
@use '../../_utils';
|
|
6
7
|
|
|
7
8
|
// read variables
|
|
8
|
-
$z_groups: map
|
|
9
|
+
$z_groups: map.get($zindex-config, z_groups);
|
|
9
10
|
|
|
10
11
|
|
|
11
12
|
@for $z_value from 0 through 10 {
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@medyll/cssfabric",
|
|
3
3
|
"scope": "@medyll",
|
|
4
|
-
"version": "0.2.1-beta.
|
|
4
|
+
"version": "0.2.1-beta.8",
|
|
5
5
|
"description": "fabric some css. Get pure and simple utility classes. Use the cssf file extension to go semantic. Get a preprocessor for cssf files. Generate your color scheme. Get your own css-properties.",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"dev": "vite dev",
|
|
@@ -33,39 +33,40 @@
|
|
|
33
33
|
"!dist/**/*.spec.*"
|
|
34
34
|
],
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@sveltejs/adapter-auto": "^
|
|
37
|
-
"@sveltejs/kit": "^2.
|
|
38
|
-
"@sveltejs/package": "^2.
|
|
39
|
-
"@sveltejs/vite-plugin-svelte": "^
|
|
40
|
-
"@types/eslint": "
|
|
36
|
+
"@sveltejs/adapter-auto": "^6.0.0",
|
|
37
|
+
"@sveltejs/kit": "^2.20.3",
|
|
38
|
+
"@sveltejs/package": "^2.3.10",
|
|
39
|
+
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
|
40
|
+
"@types/eslint": "9.6.1",
|
|
41
41
|
"@types/fs-extra": "^11.0.4",
|
|
42
|
-
"@typescript-eslint/eslint-plugin": "^
|
|
43
|
-
"@typescript-eslint/parser": "^
|
|
44
|
-
"eslint": "^
|
|
45
|
-
"eslint-config-prettier": "^
|
|
46
|
-
"eslint-plugin-svelte": "^
|
|
47
|
-
"fs-extra": "^11.
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"prettier
|
|
53
|
-
"
|
|
54
|
-
"
|
|
42
|
+
"@typescript-eslint/eslint-plugin": "^8.29.0",
|
|
43
|
+
"@typescript-eslint/parser": "^8.29.0",
|
|
44
|
+
"eslint": "^9.23.0",
|
|
45
|
+
"eslint-config-prettier": "^10.1.1",
|
|
46
|
+
"eslint-plugin-svelte": "^3.5.0",
|
|
47
|
+
"fs-extra": "^11.3.0",
|
|
48
|
+
"glob": "^11.0.1",
|
|
49
|
+
"husky": "^9.1.7",
|
|
50
|
+
"json2md": "^2.0.2",
|
|
51
|
+
"postcss": "^8.5.3",
|
|
52
|
+
"prettier": "^3.5.3",
|
|
53
|
+
"prettier-plugin-svelte": "^3.3.3",
|
|
54
|
+
"publint": "^0.3.10",
|
|
55
|
+
"simpler-color": "^1.0.2",
|
|
55
56
|
"standard-version": "^9.5.0",
|
|
56
|
-
"svelte": "^
|
|
57
|
-
"svelte-check": "^
|
|
57
|
+
"svelte": "^5.25.6",
|
|
58
|
+
"svelte-check": "^4.1.5",
|
|
58
59
|
"ts-node": "^10.9.2",
|
|
59
|
-
"tslib": "^2.
|
|
60
|
-
"typescript": "^5.
|
|
61
|
-
"vite": "^
|
|
62
|
-
"vitest": "^1.
|
|
60
|
+
"tslib": "^2.8.1",
|
|
61
|
+
"typescript": "^5.8.2",
|
|
62
|
+
"vite": "^6.2.5",
|
|
63
|
+
"vitest": "^3.1.1"
|
|
63
64
|
},
|
|
64
65
|
"svelte": "./dist/index.js",
|
|
65
66
|
"types": "./dist/index.d.ts",
|
|
66
67
|
"type": "module",
|
|
67
68
|
"dependencies": {
|
|
68
|
-
"inquirer": "^
|
|
69
|
-
"svelte-highlight": "^7.
|
|
69
|
+
"inquirer": "^12.5.0",
|
|
70
|
+
"svelte-highlight": "^7.8.3"
|
|
70
71
|
}
|
|
71
72
|
}
|