@medyll/cssfabric 0.2.2 → 0.2.5
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/package.json +1 -4
- package/src/cssfabric/_utils.scss +2 -2
- package/src/cssfabric/modules/theme/_theme-build.scss +53 -15
- package/src/cssfabric/modules/vars.scss +25 -28
- package/src/lib/_generated/cssFabric.vars.json +1 -1
- package/src/lib/styles/cssfabric.css +155894 -1
- package/src/lib/styles/cssfabric.min.css +420 -0
- package/src/lib/styles/cssfabric.responsive.css +502770 -0
- package/src/lib/styles/cssfabric.responsive.min.css +270 -0
- package/src/lib/styles/theme/theme.css +49 -0
- package/src/lib/styles/theme/theme.min.css +1 -1
- package/src/lib/styles/vars.css +16 -27
- package/src/lib/styles/vars.min.css +1 -1
package/package.json
CHANGED
|
@@ -71,9 +71,9 @@
|
|
|
71
71
|
@mixin alphaTize($key,$color,$ranges: (_:0.3,low:0.8,high:0.1)) {
|
|
72
72
|
@each $range, $val in $ranges {
|
|
73
73
|
$rg: if($range==_,'',-#{$range});
|
|
74
|
-
#{$key}-alpha#{$rg} : #{color.change($color,$alpha:$val)};
|
|
74
|
+
#{$key}-alpha#{$rg} : rgba($color,$val); // #{color.change($color,$alpha:$val)};
|
|
75
75
|
}
|
|
76
|
-
}
|
|
76
|
+
}
|
|
77
77
|
|
|
78
78
|
@function getGraySteps($steps, $gray-start, $gray-end) {
|
|
79
79
|
$gray-schemes: ();
|
|
@@ -7,18 +7,13 @@
|
|
|
7
7
|
|
|
8
8
|
// COLOR THEME
|
|
9
9
|
$moduleNameShort: map-get($theme-config, moduleNameShort);
|
|
10
|
-
//
|
|
11
|
-
$color-themes: map-get($theme-config, color-default-config);
|
|
10
|
+
//
|
|
12
11
|
$theme-levels: map-get($theme-config, theme-level-config);
|
|
13
12
|
$theme-properties-apply-config: map-get($theme-config, theme-properties-apply-config);
|
|
14
13
|
|
|
15
14
|
|
|
16
15
|
$declinations-config: map-get($theme-config, declinations-config);
|
|
17
16
|
|
|
18
|
-
$themes: map-get($cssfabric-config, themes) !default;
|
|
19
|
-
$theme-light: map-get($themes, light) !default;
|
|
20
|
-
$theme-dark: map-get($themes, dark) !default;
|
|
21
|
-
|
|
22
17
|
@mixin fabric_theme($mq_size_key: null) {
|
|
23
18
|
// loop on each color grades primary secondary tertiary
|
|
24
19
|
@each $color-grade in $declinations-config {
|
|
@@ -39,20 +34,63 @@ $theme-dark: map-get($themes, dark) !default;
|
|
|
39
34
|
}
|
|
40
35
|
}
|
|
41
36
|
}
|
|
37
|
+
.theme-text-color, .theme-foreground-color {
|
|
38
|
+
color: var(--theme-color-text);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.theme-foreground-color-alpha {
|
|
42
|
+
color: var(--theme-color-foreground-alpha);
|
|
43
|
+
}
|
|
44
|
+
.theme-foreground-color-alpha-low {
|
|
45
|
+
color: var(--theme-color-foreground-alpha-low);
|
|
46
|
+
}
|
|
47
|
+
.theme-foreground-color-alpha-high {
|
|
48
|
+
color: var(--theme-color-foreground-alpha-high);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.theme-bg{
|
|
52
|
+
background-color: var(--theme-color-background);
|
|
53
|
+
}
|
|
54
|
+
.theme-bg-alpha{
|
|
55
|
+
background-color: var(--theme-color-background-alpha);
|
|
56
|
+
}
|
|
57
|
+
.theme-bg-alpha-low{
|
|
58
|
+
background-color: var(--theme-color-background-alpha-low);
|
|
59
|
+
}
|
|
60
|
+
.theme-bg-alpha-high{
|
|
61
|
+
background-color: var(--theme-color-background-alpha-high);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.theme-bg-paper{
|
|
65
|
+
background-color: var(--theme-color-paper);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.theme-bg-paper-alpha{
|
|
69
|
+
background-color: var(--theme-color-paper-alpha);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.theme-bg-paper-alpha-low{
|
|
73
|
+
background-color: var(--theme-color-paper-alpha-low);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.theme-bg-paper-alpha-high{
|
|
77
|
+
background-color: var(--theme-color-paper-alpha-high);
|
|
78
|
+
}
|
|
42
79
|
}
|
|
43
80
|
|
|
44
|
-
@mixin themeBaseVars($theme
|
|
81
|
+
@mixin themeBaseVars($theme-color-foreground,$theme-color-background,$theme-color-paper) {
|
|
45
82
|
/* theme base colors*/
|
|
46
|
-
--theme-color-text: #{
|
|
47
|
-
--theme-color-foreground: #{
|
|
48
|
-
|
|
49
|
-
--theme-color-
|
|
50
|
-
|
|
51
|
-
--theme-color-
|
|
52
|
-
|
|
83
|
+
--theme-color-text: #{$theme-color-foreground};
|
|
84
|
+
--theme-color-foreground: #{$theme-color-foreground};
|
|
85
|
+
|
|
86
|
+
@include utils.alphaTize(--theme-color-foreground, $theme-color-foreground);
|
|
87
|
+
--theme-color-background: #{$theme-color-background};
|
|
88
|
+
@include utils.alphaTize(--theme-color-background, $theme-color-background);
|
|
89
|
+
--theme-color-paper: #{$theme-color-paper};
|
|
90
|
+
@include utils.alphaTize(--theme-color-paper, $theme-color-paper);
|
|
53
91
|
}
|
|
54
92
|
|
|
55
|
-
|
|
93
|
+
/* primary,secondary with alphas */
|
|
56
94
|
@mixin themeCssVars($theme-color-primary,$theme-color-secondary,$theme-color-tertiary) {
|
|
57
95
|
|
|
58
96
|
/* theme primary colors*/
|
|
@@ -1,50 +1,47 @@
|
|
|
1
1
|
@use "../_utils";
|
|
2
2
|
@use "sass:color";
|
|
3
|
-
@use
|
|
4
|
-
@use
|
|
5
|
-
@use "../../cssfabric/modules/box/box-vars" as box;
|
|
3
|
+
@use "../../cssfabric/modules/color/color-vars";
|
|
4
|
+
@use "../../cssfabric/modules/color/color-build" as colorBuild;
|
|
6
5
|
@use "../../cssfabric/modules/box/box-build" as boxBuild;
|
|
7
6
|
@use "../../cssfabric/modules/theme/theme-build" as themeBuild;
|
|
8
7
|
@use "../../cssfabric/modules/text/text-build" as textBuild;
|
|
9
8
|
|
|
10
|
-
@import
|
|
9
|
+
@import "cssfabric-config";
|
|
11
10
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
/* cssFabric vars yes */
|
|
11
|
+
/*
|
|
12
|
+
cssFabric vars
|
|
13
|
+
*/
|
|
17
14
|
:root {
|
|
18
|
-
|
|
15
|
+
/* --theme-color-primary|*-alpha-|* */
|
|
16
|
+
@include themeBuild.themeCssVars($theme-color-primary, $theme-color-secondary, $theme-color-tertiary);
|
|
17
|
+
|
|
19
18
|
@include colorBuild.buildColorCssVars();
|
|
20
19
|
/* boxes */
|
|
21
20
|
@include boxBuild.pmbCssVars();
|
|
22
21
|
/* text */
|
|
23
22
|
@include textBuild.textCssVars();
|
|
24
|
-
|
|
25
23
|
/* shadows */
|
|
26
24
|
@include boxBuild.shadowsCssVars();
|
|
27
|
-
|
|
28
|
-
@include themeBuild.themeBaseVars($theme-
|
|
25
|
+
|
|
26
|
+
// @include themeBuild.themeBaseVars($theme-color-foreground, $theme-color-background, $theme-color-paper);
|
|
29
27
|
|
|
30
|
-
|
|
31
|
-
&,
|
|
32
|
-
|
|
28
|
+
|
|
29
|
+
&,
|
|
30
|
+
[data-theme="light"] {
|
|
31
|
+
@include themeBuild.themeBaseVars($theme-color-foreground, $theme-color-background, $theme-color-paper);
|
|
33
32
|
|
|
34
|
-
--theme-color-border: #{color.change($theme-color-foreground
|
|
35
|
-
--theme-color-overlay: rgba(
|
|
33
|
+
--theme-color-border: #{color.change($theme-color-foreground, $alpha: 0.2)};
|
|
34
|
+
--theme-color-overlay: rgba($theme-color-foreground, 0.4);
|
|
36
35
|
}
|
|
37
36
|
|
|
38
37
|
[data-theme="dark"] {
|
|
39
|
-
@include themeBuild.themeBaseVars(
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
38
|
+
@include themeBuild.themeBaseVars(
|
|
39
|
+
$theme-dark-color-foreground,
|
|
40
|
+
$theme-dark-color-background,
|
|
41
|
+
$theme-dark-color-paper
|
|
42
|
+
);
|
|
43
|
+
|
|
44
|
+
--theme-color-border: #{color.change($theme-dark-color-foreground, $alpha: 0.3)};
|
|
45
|
+
--theme-color-overlay: rgba($theme-dark-color-background, 0.4);
|
|
43
46
|
}
|
|
44
47
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{"cssfabric":{"modules":{"animation":{"_data": {"attention_props": [], "in_out_props": {"back": []}}, "_metadata": {"title": "animation", "description": "cssfabric simplest animation module"}, "_docs": {"attention_props": "", "in_out_props": ""}},
|
|
2
|
-
"box":{"_data": {"unit-config": "rem", "border-unit-config": "px", "unit-size-config": 0.5, "unit-border-size-config": 1, "sizes-config": 12, "border-sizes-px-config": 3, "shadows-steps": 5, "shadows_step_multiplier": 2, "position-shorthand-config": "pos", "display-shorthand-config": "dsp", "shadow-shorthand-config": "shad", "border-shorthand-config": "border", "padding-shorthand-config": "pad", "margin-shorthand-config": "marg", "cssProps": {"borderShorthands": {"_": ["top", "bottom", "left", "right"], "t": "top", "b": "bottom", "l": "left", "r": "right", "all": ["top", "bottom", "left", "right"], "u": ["bottom", "left", "right"], "ii": ["left", "right"], "tb": ["top", "bottom"]}, "positionProps": {"abs": "absolute", "rel": "relative", "stat": "static", "fix": "fixed", "sticky": "sticky"}, "displayProps": {"block": "block", "none": "none", "inline": "inline", "block-inline": "inline-block", "flex-inline": "inline-flex", "tbl": "table", "tbl-row": "table-row", "tbl-cell": "table-cell", "tbl-column": "table-column"}}}, "_metadata": {"title": "box", "tag": "box", "description": "cssfabric box module to set heights, paddings, margins and shadows on all html elements"}, "_docs": {"attributes": {"padding": {"tag": "pad", "keys": ["_", "t", "b", "l", "r", "all", "u", "ii", "tb"], "values": {"_": "_", "1": "0.5rem", "2": "1rem", "3": "1.5rem", "4": "2rem", "5": "2.5rem", "6": "3rem", "7": "3.5rem", "8": "4rem", "9": "4.5rem", "10": "5rem", "11": "5.5rem", "12": "6rem"}, "levels": {"_": ["_", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}, "about": "padding properties for html elements"}, "margin": {"tag": "marg", "keys": ["_", "t", "b", "l", "r", "all", "u", "ii", "tb"], "values": {"_": "_", "1": "0.5rem", "2": "1rem", "3": "1.5rem", "4": "2rem", "5": "2.5rem", "6": "3rem", "7": "3.5rem", "8": "4rem", "9": "4.5rem", "10": "5rem", "11": "5.5rem", "12": "6rem"}, "levels": {"_": ["_", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}, "about": "margin properties for html elements"}, "border": {"tag": "border", "keys": ["_", "t", "b", "l", "r", "all", "u", "ii", "tb"], "values": {"_": "_", "1": "1px", "2": "2px", "3": "3px"}, "levels": {"_": ["_", 1, 2, 3]}, "about": "border properties for html elements"}, "radius": {"tag": "radiusGuy"}, "shadow": {"tag": "shad", "values": {"2": "0.83333333331.724137931", "4": "1.66666666673.4482758621", "8": "3.33333333336.8965517241", "16": "6.666666666713.7931034483", "32": "13.333333333327.5862068966"}, "levels": {"_": [2, 4, 8, 16, 32]}, "about": "applying shadows give depth and levels to your design"}}}},
|
|
3
2
|
"base":{"_data": {"cfg-has-dimension-strict": true, "CFG_HAS_DIMENSION_MIN": true, "CFG_HAS_DIMENSION_MAX": true, "size_step": "0.5rem", "sizes": {"tiny": 32, "small": 64, "medium": 128, "large": 256, "full": "100%"}}, "_metadata": {"title": "base", "tag": "base", "description": "cssfabric base config variables"}, "_docs": []},
|
|
3
|
+
"box":{"_data": {"unit-config": "rem", "border-unit-config": "px", "unit-size-config": 0.5, "unit-border-size-config": 1, "sizes-config": 12, "border-sizes-px-config": 3, "shadows-steps": 5, "shadows_step_multiplier": 2, "position-shorthand-config": "pos", "display-shorthand-config": "dsp", "shadow-shorthand-config": "shad", "border-shorthand-config": "border", "padding-shorthand-config": "pad", "margin-shorthand-config": "marg", "cssProps": {"borderShorthands": {"_": ["top", "bottom", "left", "right"], "t": "top", "b": "bottom", "l": "left", "r": "right", "all": ["top", "bottom", "left", "right"], "u": ["bottom", "left", "right"], "ii": ["left", "right"], "tb": ["top", "bottom"]}, "positionProps": {"abs": "absolute", "rel": "relative", "stat": "static", "fix": "fixed", "sticky": "sticky"}, "displayProps": {"block": "block", "none": "none", "inline": "inline", "block-inline": "inline-block", "flex-inline": "inline-flex", "tbl": "table", "tbl-row": "table-row", "tbl-cell": "table-cell", "tbl-column": "table-column"}}}, "_metadata": {"title": "box", "tag": "box", "description": "cssfabric box module to set heights, paddings, margins and shadows on all html elements"}, "_docs": {"attributes": {"padding": {"tag": "pad", "keys": ["_", "t", "b", "l", "r", "all", "u", "ii", "tb"], "values": {"_": "_", "1": "0.5rem", "2": "1rem", "3": "1.5rem", "4": "2rem", "5": "2.5rem", "6": "3rem", "7": "3.5rem", "8": "4rem", "9": "4.5rem", "10": "5rem", "11": "5.5rem", "12": "6rem"}, "levels": {"_": ["_", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}, "about": "padding properties for html elements"}, "margin": {"tag": "marg", "keys": ["_", "t", "b", "l", "r", "all", "u", "ii", "tb"], "values": {"_": "_", "1": "0.5rem", "2": "1rem", "3": "1.5rem", "4": "2rem", "5": "2.5rem", "6": "3rem", "7": "3.5rem", "8": "4rem", "9": "4.5rem", "10": "5rem", "11": "5.5rem", "12": "6rem"}, "levels": {"_": ["_", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}, "about": "margin properties for html elements"}, "border": {"tag": "border", "keys": ["_", "t", "b", "l", "r", "all", "u", "ii", "tb"], "values": {"_": "_", "1": "1px", "2": "2px", "3": "3px"}, "levels": {"_": ["_", 1, 2, 3]}, "about": "border properties for html elements"}, "radius": {"tag": "radiusGuy"}, "shadow": {"tag": "shad", "values": {"2": "0.83333333331.724137931", "4": "1.66666666673.4482758621", "8": "3.33333333336.8965517241", "16": "6.666666666713.7931034483", "32": "13.333333333327.5862068966"}, "levels": {"_": [2, 4, 8, 16, 32]}, "about": "applying shadows give depth and levels to your design"}}}},
|
|
4
4
|
"color":{"_data": {"gray-config": {"start": "#f4f4f4", "end": "#999", "steps": 5}, "color-types-config": ["color", "bg", "bg-themed", "border-color"], "theme": {"primary": "#201700", "secondary": "#D14B02", "tertiary": "#88D102", "foreground": "#282230", "background": "#ffffff", "paper": "#f1f1f1"}, "scheme": {"discrete": "#ccc", "success": "green", "info": "#FFDD57FF", "warning": "#e6b905", "alert": "#ff7300", "error": "red"}, "palette": {"yellow": "#ffb900", "orange": "#d83b01", "red": "#d13438", "magenta": "#b4009e", "purple": "#5c2d91", "green": "#107c10", "teal": "#008272", "blue": "#0078d4", "dark": "#323232"}, "gray": "getGraySteps(5, #f4f4f4, #999)"}, "_metadata": {"title": "color", "title_tag": "its about colors", "description": "cssfabric color system: its about colors"}, "_docs": {"attributes": {"color": {"tag": "color", "keys": ["scheme", "palette", "gray"], "levelsLinked": {"scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"], "gray": ["getGraySteps(5, #f4f4f4, #999)"]}, "levelsDeclin": {"palette": ["_", "lighter", "light", "dark", "darker", "complement"]}, "about": "color for text level html elements"}, "background-color": {"tag": "bg", "keys": ["scheme", "palette", "gray"], "levelsLinked": {"scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"], "gray": ["getGraySteps(5, #f4f4f4, #999)"]}, "levelsDeclin": {"palette": ["_", "lighter", "light", "dark", "darker", "complement"]}, "about": "background colors"}, "background-themed": {"tag": "bg-themed", "keys": ["scheme", "palette", "gray"], "levelsLinked": {"gray": ["getGraySteps(5, #f4f4f4, #999)"], "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"]}, "levelsDeclin": {"palette": ["_", "lighter", "light", "dark", "darker", "complement"]}, "about": "same as background-color, but with added contrasted color to text"}, "border-color": {"tag": "border-color", "keys": ["palette", "gray"], "levelsLinked": {"gray": ["getGraySteps(5, #f4f4f4, #999)"], "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"]}, "about": "border colors are slightly darker to maximize surrounding effect"}}}},
|
|
5
5
|
"flex":{"_data": {"moduleName": "flex", "moduleNameShort": "flex", "horCode": "h", "vertCode": "v", "gridFullWidth": "main", "grow-shrink-steps": 2, "cssProps": {"flexWrap": {"wrap": "wrap", "wrap-reverse": "wrap-reverse"}, "grid-justify": {"start": "flex-start", "end": "flex-end", "between": "space-between", "stretch": "stretch", "center": "flex-center"}, "grid-items": {"baseline": "baseline", "stretch": "stretch", "start": "flex-start", "center": "center", "end": "flex-end"}, "grid-content": {"start": "flex-start", "center": "center", "end": "flex-end", "between": "space-between", "equal": "space-evenly"}}, "cssItemsProps": {"self": {"start": "flex-start", "end": "flex-end", "stretch": "stretch"}}}, "_metadata": {"title": "flex", "tag": "flex", "description": "cssfabric flex system module"}, "_docs": {"attributes": {"grid": {"tag": "flex", "keys": ["v", "h"], "classNames": {"align": ["top", "middle", "bottom", "left", "right", "center", "middle-center", "stretch"], "grid": ["wrap", "wrap-reverse"]}, "about": "a classic flex grid system, and hey, it gets height !"}, "self": {"tag": "self", "keys": ["start", "end", "stretch"], "about": "flex children specific classnames"}}}},
|
|
6
6
|
"grid":{"_data": {"moduleName": "grid", "moduleNameShort": "grid", "horCode": "h", "vertCode": "v", "gridFullWidth": "main", "grow-shrink-steps": 4, "cssProps": {"flexWrap": {"wrap": "wrap", "wrap-reverse": "wrap-reverse"}, "grid-justify": {"start": "flex-start", "end": "flex-end", "between": "space-between", "stretch": "stretch", "center": "flex-center"}, "grid-items": {"baseline": "baseline", "stretch": "stretch", "start": "flex-start", "center": "center", "end": "flex-end"}, "grid-content": {"start": "flex-start", "center": "center", "end": "flex-end", "between": "space-between", "equal": "space-evenly"}}, "cssItemsProps": {"self": {"start": "flex-start", "end": "flex-end", "stretch": "stretch"}}, "grid-max-rows": 8, "grid-max-cols": 12}, "_metadata": {"title": "grid", "tag": "grid", "description": "cssfabric flex grid system module"}, "_docs": {"attributes": {"grid": {"tag": "grid", "keys": ["v", "h"], "classNames": {"align": ["top", "middle", "bottom", "left", "right", "center", "middle-center", "stretch"], "grid": ["wrap", "wrap-reverse"]}, "about": "a classic grid system"}, "self": {"tag": "self", "keys": ["start", "end", "stretch"], "about": "grid children specific classnames"}}}},
|