@muraldevkit/ui-toolkit 4.3.0 → 4.4.0

package/dist/src/components/error-page-template/MrlBrandColors/MrlBrandColors.functions.scss

@@ -0,0 +1,12 @@
+@use 'sass:list';
+@function color-grid($color-counts) {
+	$template-areas: '';
+	@each $color-count in $color-counts {
+		$color: list.nth($color-count, 1);
+		$count: list.nth($color-count, 2);
+		@for $i from 1 through $count {
+			$template-areas: '#{$template-areas} #{$color}';
+		}
+	}
+	@return $template-areas;
+}

package/dist/styles/MrlBrandColors/mixins.scss

@@ -0,0 +1,9 @@
+@use './MrlBrandColors.functions.scss' as functions;
+@mixin pattern-classes($patterns) {
+	@each $pattern-name, $color-counts in $patterns {
+		$grid-template-areas: functions.color-grid($color-counts);
+		.#{$pattern-name} {
+			grid-template-areas: $grid-template-areas;
+		}
+	}
+}

package/dist/styles/MrlBrandColors/module.scss

@@ -0,0 +1,24 @@
+@use '@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
+@use './MrlBrandColors.functions.scss' as *;
+@use './MrlBrandColors.variables.scss' as *;
+@use './MrlBrandColors.mixins.scss' as *;
+@each $name, $color in $colors {
+	.MrlBrandColor-#{$name} {
+		background-color: #{$color};
+		grid-area: #{$name};
+	}
+}
+.MrlBrandColors {
+	display: grid;
+	grid-template-columns: repeat(8, 1fr);
+	grid-template-rows: 1fr;
+	height: 15rem;
+	width: 100%;
+}
+@include pattern-classes($patterns-xs);
+@media (min-width: $mrl-breakpoint-01) {
+	.MrlBrandColors {
+		grid-template-columns: repeat(32, 1fr);
+	}
+	@include pattern-classes($patterns);
+}

package/dist/styles/MrlBrandColors/variables.scss

@@ -0,0 +1,89 @@
+
+$colors: (
+	black: rgba(var(--mrl-black), 1),
+	jade: #00c27a,
+	blue: #5887ff,
+	pink: #fc83ff,
+	red: rgba(var(--mrl-red-60), 1),
+	yellow: #fa0,
+	grape: #be53ff,
+	sky: #79c1ff,
+	lemon: #ffe146,
+	lavander: #e6bfff
+);
+$patterns: (
+	MrlPattern-01: (
+		(blue, 2),
+		(pink, 12),
+		(jade, 1),
+		(yellow, 8),
+		(red, 6),
+		(black, 3)
+	),
+	MrlPattern-02: (
+		(blue, 3),
+		(black, 3),
+		(yellow, 1),
+		(red, 9),
+		(grape, 10),
+		(jade, 6)
+	),
+	MrlPattern-03: (
+		(black, 3),
+		(lemon, 2),
+		(red, 6),
+		(pink, 12),
+		(jade, 6),
+		(sky, 4)
+	),
+	MrlPattern-04: (
+		(jade, 2),
+		(sky, 6),
+		(black, 3),
+		(pink, 12),
+		(lemon, 7),
+		(red, 2)
+	),
+	MrlPattern-05: (
+		(lavander, 3),
+		(jade, 6),
+		(black, 2),
+		(yellow, 12),
+		(blue, 7),
+		(red, 2)
+	),
+	MrlPattern-06: (
+		(yellow, 5),
+		(lavander, 3),
+		(jade, 12),
+		(black, 3),
+		(red, 1),
+		(sky, 8)
+	)
+);
+$patterns-xs: (
+	MrlPattern-01: (
+		(blue, 2),
+		(pink, 6)
+	),
+	MrlPattern-02: (
+		(red, 5),
+		(grape, 3)
+	),
+	MrlPattern-03: (
+		(pink, 6),
+		(jade, 2)
+	),
+	MrlPattern-04: (
+		(pink, 5),
+		(lemon, 3)
+	),
+	MrlPattern-05: (
+		(lavander, 2),
+		(jade, 6)
+	),
+	MrlPattern-06: (
+		(jade, 6),
+		(black, 2)
+	)
+);

package/dist/styles.css

@@ -90,3 +90,4 @@
 .MrlPanelStickyHeader--I1FiZ{background-color:var(--mrl-color-background);position:sticky;top:0}.MrlPanelStickyHeader--I1FiZ::after{background:var(--mrl-color-background);content:"";display:block;inset:0 calc(-1*var(--mrl-spacing-03));pointer-events:all;position:absolute;z-index:-1}
 .MrlToolbar--Lrhb6{align-items:center;background:var(--mrl-color-background);border-radius:var(--mrl-border-radius-container);box-shadow:var(--mrl-shadows-lifted);cursor:default;display:flex;gap:var(--mrl-spacing-02);min-height:3rem;padding:var(--mrl-spacing-03);pointer-events:all;transition:opacity var(--mrl-duration-03) var(--mrl-timing-m3)}.MrlToolbar-inverse--OwdSd{background:var(--mrl-color-background-inverse);box-shadow:none;color:var(--mrl-color-text-inverse)}.MrlToolbar-skeleton--eWZQv.MrlToolbar-vertical--hO8hj{background-color:rgba(var(--mrl-gray-30), 1)}.MrlToolbar-medium--FKg7Y{gap:calc(var(--mrl-spacing-02) + var(--mrl-spacing-01));min-height:3.5rem;padding:calc(var(--mrl-spacing-02) + var(--mrl-spacing-01))}.MrlToolbar-xsmall--St9Ez{gap:var(--mrl-spacing-01);min-height:2rem;padding:var(--mrl-spacing-02)}.MrlToolbar-vertical--hO8hj{flex-direction:column;min-height:0;min-width:3rem}.MrlToolbar-vertical--hO8hj.MrlToolbar-medium--FKg7Y{min-width:3.5rem}.MrlToolbar-vertical--hO8hj.MrlToolbar-xsmall--St9Ez{min-width:2rem}.MrlToolbar-spaced--gmE0X{gap:var(--mrl-spacing-05);padding-left:var(--mrl-spacing-05)}.MrlToolbar-spaced--gmE0X .mrlButton--Oymf3+.mrlButton--Oymf3{margin-left:calc(var(--mrl-spacing-03)/2*-1)}
 .MrlToolbarButtonIcon--Oetsi{margin-right:var(--mrl-spacing-03)}
+.MrlBrandColor-black--Tkumf{background-color:rgba(var(--mrl-black), 1);grid-area:black}.MrlBrandColor-jade--g4zLB{background-color:#00c27a;grid-area:jade}.MrlBrandColor-blue--NZ8Mv{background-color:#5887ff;grid-area:blue}.MrlBrandColor-pink--zk3Hh{background-color:#fc83ff;grid-area:pink}.MrlBrandColor-red--EAkFV{background-color:rgba(var(--mrl-red-60), 1);grid-area:red}.MrlBrandColor-yellow--eLxiI{background-color:#fa0;grid-area:yellow}.MrlBrandColor-grape--jIQbg{background-color:#be53ff;grid-area:grape}.MrlBrandColor-sky--Pxh7U{background-color:#79c1ff;grid-area:sky}.MrlBrandColor-lemon--mLsko{background-color:#ffe146;grid-area:lemon}.MrlBrandColor-lavander--de18C{background-color:#e6bfff;grid-area:lavander}.MrlBrandColors--kwFlI{display:grid;grid-template-columns:repeat(8, 1fr);grid-template-rows:1fr;height:15rem;width:100%}.MrlPattern-01--FIK5B{grid-template-areas:" blue blue pink pink pink pink pink pink"}.MrlPattern-02--xxmfG{grid-template-areas:" red red red red red grape grape grape"}.MrlPattern-03--fbJXJ{grid-template-areas:" pink pink pink pink pink pink jade jade"}.MrlPattern-04--vm9Du{grid-template-areas:" pink pink pink pink pink lemon lemon lemon"}.MrlPattern-05--S6ARq{grid-template-areas:" lavander lavander jade jade jade jade jade jade"}.MrlPattern-06--pXY2r{grid-template-areas:" jade jade jade jade jade jade black black"}@media(min-width: 37.5rem){.MrlBrandColors--kwFlI{grid-template-columns:repeat(32, 1fr)}.MrlPattern-01--FIK5B{grid-template-areas:" blue blue pink pink pink pink pink pink pink pink pink pink pink pink jade yellow yellow yellow yellow yellow yellow yellow yellow red red red red red red black black black"}.MrlPattern-02--xxmfG{grid-template-areas:" blue blue blue black black black yellow red red red red red red red red red grape grape grape grape grape grape grape grape grape grape jade jade jade jade jade jade"}.MrlPattern-03--fbJXJ{grid-template-areas:" black black black lemon lemon red red red red red red pink pink pink pink pink pink pink pink pink pink pink pink jade jade jade jade jade jade sky sky sky sky"}.MrlPattern-04--vm9Du{grid-template-areas:" jade jade sky sky sky sky sky sky black black black pink pink pink pink pink pink pink pink pink pink pink pink lemon lemon lemon lemon lemon lemon lemon red red"}.MrlPattern-05--S6ARq{grid-template-areas:" lavander lavander lavander jade jade jade jade jade jade black black yellow yellow yellow yellow yellow yellow yellow yellow yellow yellow yellow yellow blue blue blue blue blue blue blue red red"}.MrlPattern-06--pXY2r{grid-template-areas:" yellow yellow yellow yellow yellow lavander lavander lavander jade jade jade jade jade jade jade jade jade jade jade jade black black black red sky sky sky sky sky sky sky sky"}}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@muraldevkit/ui-toolkit",
-	"version": "4.3.0",
+	"version": "4.4.0",
 	"description": "Mural's UI Toolkit",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",