@muraldevkit/ds-foundation 1.0.0

package/src/styles/global-variables/color.scss

@@ -0,0 +1,156 @@
+////
+/// Global Color Tokens
+/// @group variables
+////
+
+$mrl-global-color-vars: (
+	/* Gray */
+	"gray-10": "250, 250, 250", // #fafafa"
+	"gray-20": "238, 238, 238", // #eeeeee"
+	"gray-30": "222, 222, 222", // #dedede"
+	"gray-40": "187, 187, 187", // #bbbbbb"
+	"gray-50": "158, 158, 158", // #9e9e9e"
+	"gray-60": "145, 145, 145", // #919191"
+	"gray-70": "115, 115, 115", // #737373"
+	"gray-80": "78, 78, 78", // #4e4e4e"
+	"gray-90": "47, 47, 47", // #2f2f2f"
+	"gray-100": "31, 31, 31", // #1f1f1f"
+	/* Blue */
+	"blue-10": "245, 250, 255", // #f5faff
+	"blue-20": "230, 244, 254", // #e6f4fe
+	"blue-30": "205, 230, 254", // #cde6fe
+	"blue-40": "180, 217, 253", // #b4d9fd
+	"blue-50": "131, 191, 252", // #83bffc
+	"blue-60": "81, 143, 251", // #518ffb
+	"blue-70": "55, 112, 228", // #3770e4
+	"blue-80": "49, 99, 201", // #3163c9
+	"blue-90": "42, 86, 176", // #2a56b0
+	"blue-100": "30, 61, 125", // #1e3d7d
+	/* Coral */
+	"coral-10": "255, 230, 239", // #ffe6ef"
+	"coral-20": "254, 204, 223", // #feccdf"
+	"coral-30": "254, 154, 191", // #fe9abf"
+	"coral-40": "253, 103, 160", // #fd67a0"
+	"coral-50": "253, 53, 129", // #fd3581"
+	"coral-60": "255, 0, 102", // #ff0066"
+	"coral-70": "232, 0, 90", // #e8005a"
+	"coral-80": "214, 0, 87", // #d60057"
+	"coral-90": "192, 3, 77", // #c0034d"
+	"coral-100": "163, 0, 63", // #a3003f"
+	/* Red */
+	"red-10": "255, 245, 245", // #fff5f5"
+	"red-20": "255, 229, 229", // #ffe5e5"
+	"red-30": "255, 204, 204", // #ffcccc"
+	"red-40": "255, 179, 179", // #ffb3b3"
+	"red-50": "255, 128, 128", // #ff8080"
+	"red-60": "255, 75, 75", // #ff4b4b"
+	"red-70": "224, 41, 53", // #e02935"
+	"red-80": "179, 33, 42", // #b3212a"
+	"red-90": "140, 26, 33", // #8c1a21"
+	"red-100": "115, 21, 27", // #73151b"
+	/* Tomato */
+	"tomato-10": "249, 240, 242", // #f9f0f2"
+	"tomato-20": "242, 212, 219", // #f2d4db"
+	"tomato-30": "243, 192, 204", // #f3c0cc"
+	"tomato-40": "239, 169, 184", // #efa9b8"
+	"tomato-50": "233, 134, 156", // #e9869c"
+	"tomato-60": "231, 111, 138", // #e76f8a"
+	"tomato-70": "225, 89, 120", // #e15978"
+	"tomato-80": "220, 64, 100", // #dc4064"
+	"tomato-90": "203, 52, 95", // #cb345f"
+	"tomato-100": "182, 52, 93", // #b6345d"
+	/* Orange */
+	"orange-10": "251, 233, 198", // #fbe9c6"
+	"orange-20": "249, 224, 175", // #f9e0af"
+	"orange-30": "246, 207, 166", // #f6cfa6"
+	"orange-40": "243, 193, 153", // #f3c199"
+	"orange-50": "243, 180, 148", // #f3b494"
+	"orange-60": "247, 169, 125", // #f7a97d"
+	"orange-70": "245, 156, 120", // #f59c78"
+	"orange-80": "245, 135, 101", // #f58765"
+	"orange-90": "234, 116, 79", // #ea744f"
+	"orange-100": "220, 96, 70", // #dc6046"
+	/* Lemon */
+	"lemon-10": "254, 252, 215", // #fefcd7"
+	"lemon-20": "255, 250, 183", // #fffab7"
+	"lemon-30": "253, 246, 147", // #fdf693"
+	"lemon-40": "254, 239, 136", // #feef88"
+	"lemon-50": "251, 233, 122", // #fbe97a"
+	"lemon-60": "249, 223, 129", // #f9df81"
+	"lemon-70": "238, 206, 127", // #eece7f"
+	"lemon-80": "229, 191, 118", // #e5bf76"
+	"lemon-90": "221, 180, 102", // #ddb466"
+	"lemon-100": "207, 160, 81", // #cfa051"
+	/* Melon */
+	"melon-10": "230, 248, 225", // #e6f8e1"
+	"melon-20": "213, 245, 204", // #d5f5cc"
+	"melon-30": "196, 239, 185", // #c4efb9"
+	"melon-40": "177, 236, 161", // #b1eca1"
+	"melon-50": "158, 223, 151", // #9edf97"
+	"melon-60": "136, 213, 138", // #88d58a"
+	"melon-70": "125, 195, 125", // #7dc37d"
+	"melon-80": "108, 179, 109", // #6cb36d"
+	"melon-90": "91, 157, 94", // #5b9d5e"
+	"melon-100": "79, 145, 81", // #4f9151"
+	/* Blueberry */
+	"blueberry-10": "222, 236, 252", // #deecfc"
+	"blueberry-20": "207, 228, 251", // #cfe4fb"
+	"blueberry-30": "185, 215, 250", // #b9d7fa"
+	"blueberry-40": "160, 200, 249", // #a0c8f9"
+	"blueberry-50": "131, 181, 245", // #83b5f5"
+	"blueberry-60": "100, 165, 247", // #64a5f7"
+	"blueberry-70": "76, 151, 245", // #4c97f5"
+	"blueberry-80": "71, 126, 222", // #477ede"
+	"blueberry-90": "56, 112, 211", // #3870d3"
+	"blueberry-100": "50, 89, 153", // #325999"
+	/* Grape */
+	"grape-10": "231, 230, 250", // #e7e6fa"
+	"grape-20": "217, 215, 247", // #d9d7f7"
+	"grape-30": "205, 202, 248", // #cdcaf8"
+	"grape-40": "187, 187, 242", // #bbbbf2"
+	"grape-50": "162, 163, 240", // #a2a3f0"
+	"grape-60": "150, 146, 243", // #9692f3"
+	"grape-70": "134, 126, 231", // #867ee7"
+	"grape-80": "119, 104, 222", // #7768de"
+	"grape-90": "114, 86, 219", // #7256db"
+	"grape-100": "83, 71, 157", // #53479d"
+	/* Pure colors */
+	"white": "255, 255, 255", // #ffffff"
+	"black": "0, 0, 0", // #000000"
+	/* Status colors */
+	"status-info": "49, 99, 201", // #3163c9
+	"status-success": "0, 132, 63", // #00843f
+	"status-warning": "255, 170, 1", // #ffaa01
+	"status-error": "179, 33, 42" // #b3212a
+);
+$mrl-global-colors-opacity: (
+	"black": (
+		"00": ".08",
+		"01": ".16",
+		"02": ".24",
+		"03": ".32",
+		"06": ".64",
+		"08": ".80"
+	),
+	"white": (
+		"02": ".24",
+		"03": ".30",
+		"04": ".40",
+		"06": ".60",
+		"08": ".80"
+	)
+);
+
+:root {
+	@each $token-name, $token-value in $mrl-global-color-vars {
+		--mrl-#{$token-name}: #{$token-value};
+	}
+
+	@each $color-name, $opacity-map in $mrl-global-colors-opacity {
+		@each $token-name, $token-value in $opacity-map {
+			--mrl-#{$color-name}-opacity-#{$token-name}: rgba(var(--mrl-#{$color-name}), #{$token-value});
+		}
+	}
+
+	--mrl-status-private: var(--mrl-gray-100); // #1f1f1f
+}

package/src/styles/global-variables/index.scss

@@ -0,0 +1,7 @@
+@forward 'border';
+@forward 'breakpoints';
+@forward 'color';
+@forward 'motion';
+@forward 'shadows';
+@forward 'spacing';
+@forward 'typography';

package/src/styles/global-variables/motion.scss

@@ -0,0 +1,40 @@
+////
+/// Global Motion Tokens
+/// Source: see internal documentation on "Motion"
+/// @group variables
+////
+
+$mrl-global-motion-timing-vars: (
+	"m1": "0.17, 0.00, 0.00, 1.00",
+	"m1r": "1.00, 0.00, 0.83, 1.00",
+	"m2": "0, 0.5, 0, 1",
+	"m3": "0.33, 0.00, 0.67, 1.00",
+	"m4": "0.00, 0.00, 0.00, 1.00"
+);
+$mrl-global-motion-duration-vars: (
+	"01": "17",
+	"02": "167",
+	"03": "333",
+	"04": "667"
+);
+$mrl-global-motion-distance-vars: (
+	"01": "4",
+	"02": "8"
+);
+
+:root {
+	/* Motion - Timing */
+	@each $token-name, $token-value in $mrl-global-motion-timing-vars {
+		--mrl-timing-#{$token-name}: cubic-bezier(#{$token-value});
+	}
+
+	/* Motion - Duration */
+	@each $token-name, $token-value in $mrl-global-motion-duration-vars {
+		--mrl-duration-#{$token-name}: #{$token-value}ms;
+	}
+
+	/* Motion - Distance */
+	@each $token-name, $token-value in $mrl-global-motion-distance-vars {
+		--mrl-distance-#{$token-name}: #{$token-value}px;
+	}
+}

package/src/styles/global-variables/shadows.scss

@@ -0,0 +1,28 @@
+////
+/// Global Shadow/Elevation Tokens
+/// @group variables
+////
+
+/**
+ * Please note!
+ * If you make a change to these tokens, please make sure that the
+ * mrl-shadow mixin is changed as well. We need the contextual tokens
+ * to map to the drop-shadow filter!
+*/
+
+/* Shadow/Elevation Tokens */
+$mrl-global-shadow-vars: (
+	/* Base */
+	"01": "0 0 0 1px rgba(var(--mrl-black), 0.08), 0 3px 4px rgba(var(--mrl-black), 0.08)",
+	"02": "0 0 0 1px rgba(var(--mrl-black), 0.08), 0 5px 8px rgba(var(--mrl-black), 0.08)",
+	"03": "0 0 0 1px rgba(var(--mrl-black), 0.08), 0 25px 20px rgba(var(--mrl-black), 0.12)",
+	/* Interactive */
+	"interactive-01": "0 4px 5px rgba(var(--mrl-black), 0.08)",
+	"interactive-02": "0 20px 12px rgba(var(--mrl-black), 0.20)"
+);
+
+:root {
+	@each $token-name, $token-value in $mrl-global-shadow-vars {
+		--mrl-shadow-#{$token-name}: #{$token-value};
+	}
+}

package/src/styles/global-variables/spacing.scss

@@ -0,0 +1,32 @@
+////
+/// Global Spacing Tokens
+/// Source: see internal documentation on "Spacing"
+/// @group variables
+////
+
+/* Spacing Tokens */
+// Values in the map is the number of pixels provided by design.
+// We use a calculation to convert the pixel values to rems for accessibility support.
+$mrl-global-spacing-vars: (
+	"01": 2,
+	"02": 4,
+	"03": 8,
+	"04": 12,
+	"05": 16,
+	"06": 20,
+	"07": 24,
+	"08": 32,
+	"09": 40,
+	"10": 48,
+	"11": 64,
+	"12": 80,
+	"13": 96,
+	"14": 160,
+);
+
+:root {
+	@each $token-name, $token-value in $mrl-global-spacing-vars {
+		--mrl-spacing-#{$token-name}: calc(#{$token-value} / var(--mrl-baseline) * 1rem);
+	}
+}
+

package/src/styles/global-variables/typography.scss

@@ -0,0 +1,86 @@
+////
+/// Global Typography Tokens
+/// Source: see internal documentation on "Typography Tokens"
+/// @group variables
+////
+
+/* Font Size Tokens */
+// Values in the map are the number of pixels provided by design.
+// We use a calculation to convert the pixel values to rems for accessibility support.
+$mrl-global-font-size-vars: (
+	"01": 11,
+	"02": 12,
+	"03": 14,
+	"04": 16,
+	"05": 18,
+	"06": 20,
+	"07": 24,
+	"08": 32,
+	"09": 40,
+	"10": 48,
+	"11": 64,
+	"12": 80,
+	"13": 96,
+	"14": 120
+);
+
+
+/* Line-height Tokens */
+$mrl-global-line-height-vars: (
+	"01": 0.875,
+	"02": 1,
+	"03": 1.125,
+	"04": 1.167,
+	"05": 1.2,
+	"06": 1.33,
+	"07": 1.4,
+	"08": 1.45,
+	"09": 1.5,
+	"10": 1.56,
+	"11": 1.75,
+	"12": 2
+);
+
+/* Letter Spacing Tokens */
+$mrl-global-letter-spacing-vars: (
+	"01": -2%,
+	"02": -1%,
+	"03": 0%,
+	"04": 1%,
+	"05": 2%
+);
+
+
+/* Font Weight Tokens */
+$mrl-global-font-weight-vars: (
+	"01": 400,
+	"02": 500,
+	"03": 600,
+	"04": 700,
+	"05": 800,
+);
+
+:root {
+	--mrl-baseline: 16;
+	--mrl-font-family-01: proxima-nova;
+
+	/* Typography - Font Size */
+	@each $token-name, $token-value in $mrl-global-font-size-vars {
+		--mrl-font-size-#{$token-name}: calc(#{$token-value} / var(--mrl-baseline) * 1rem);
+	}
+
+	/* Typography - Line Height */
+	@each $token-name, $token-value in $mrl-global-line-height-vars {
+		--mrl-line-height-#{$token-name}: #{$token-value};
+	}
+
+	/* Typography - Letter Spacing */
+	@each $token-name, $token-value in $mrl-global-letter-spacing-vars {
+		--mrl-letter-spacing-#{$token-name}: #{$token-value} ;
+	}
+
+	/* Typography - Font Weight */
+	@each $token-name, $token-value in $mrl-global-font-weight-vars {
+		--mrl-font-weight-#{$token-name}: #{$token-value} ;
+	}
+}

package/src/styles/grid.scss

@@ -0,0 +1,4 @@
+////
+/// Mural's design system grid
+/// @group grid
+////

package/src/styles/index.scss

@@ -0,0 +1,17 @@
+////
+/// Mural's design system foundation
+/// @group foundation
+////
+
+// @todo - some of the following files export CSS, providing an option for adopters
+// who do not want the full CSS output and prefer to use mixins directly without bloating their code base
+@forward "global-variables/index";
+@forward "contextual-variables/index";
+@forward "mixins";
+@forward "focus";
+@forward "functions";
+@forward "baseline";
+@forward "grid";
+@forward "spacing";
+@forward "typography";
+@forward "skeletons/index";

package/src/styles/skeletons/button.scss

@@ -0,0 +1,84 @@
+////
+/// Mural's pre-hydration button skeleton styles
+/// @group foundation
+////
+
+// Variables
+// --------------------------------------------------
+:root {
+	--mrl-button-background-color-skeleton: var(--mrl-color-skeleton);
+	--mrl-button-border-radius: var(--mrl-border-radius-functional);
+	--mrl-button-height: var(--mrl-spacing-09);
+}
+
+// Mixins
+// --------------------------------------------------
+/// Styles for buttons prior to hydrating or when it's in `state="skeleton"` which represents
+/// a hydrated button within an overall application loading state
+/// @group button
+/// @example mrl-button[state="skeleton"] { @include mrl-button-skeleton; }
+@mixin mrl-button-skeleton() {
+	background: var(--mrl-button-background-color-skeleton);
+	border-radius: var(--mrl-button-border-radius);
+	box-shadow: none;
+	color: transparent;
+	display: inline-flex;
+	font-family: var(--mrl-font-family-01);
+	min-height: var(--mrl-button-height);
+
+	// per Design, the minimum should be a square
+	min-width: var(--mrl-button-height);
+	pointer-events: none;
+	visibility: inherit;
+}
+
+// Styles
+// --------------------------------------------------
+
+
+// We scope the actual skeleton state to a class to allow adopters control
+// over when the skeleton is visible
+.mrl-u-preHydrateSkeleton {
+	// @todo - v2 - Using the :not selector to ensure no regressions with existing
+	// buttons but we should review to see if we can reduce this weight as :not is
+	// one of the heaviest selector types
+	mrl-button:not(.hydrated),
+	mrl-icon-button:not(.hydrated),
+	mrl-shadow-button:not(.hydrated) {
+		@include mrl-button-skeleton;
+	}
+
+	// Skeleton state for inverse buttons
+	// Note: if you change any of the following styles, the button
+	// component's [state="skeleton"] styles also need to be updated
+	mrl-button[kind="inverse"]:not(.hydrated),
+	mrl-button[kind="ghost-inverse"]:not(.hydrated),
+	mrl-icon-button[kind="inverse"]:not(.hydrated),
+	mrl-icon-button[kind="ghost-inverse"]:not(.hydrated),
+	mrl-shadow-button[kind="inverse"]:not(.hydrated),
+	mrl-shadow-button[kind="ghost-inverse"]:not(.hydrated) {
+		--mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse);
+	}
+}
+
+// The following styles are used for both the skeleton and the final rendering
+// of the component so they are not scoped to a class.
+mrl-button[size="small"],
+mrl-icon-button[size="small"],
+mrl-shadow-button[size="small"] {
+	--mrl-button-height: var(--mrl-spacing-08);
+}
+
+mrl-button[size="large"],
+mrl-icon-button[size="large"],
+mrl-shadow-button[size="large"] {
+	// We don't have a 44px spacing token so we need to calculate this as padding does not
+	// impact min-height
+	--mrl-button-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
+}
+
+// XSmall size is only allowed on the ghost variants of Icon Buttons
+mrl-icon-button[size="xsmall"][kind="ghost"],
+mrl-icon-button[size="xsmall"][kind="ghost-inverse"] {
+	--mrl-button-height: var(--mrl-spacing-07);
+}

package/src/styles/skeletons/index.scss

@@ -0,0 +1,10 @@
+////
+/// Mural's design system component skeletons
+///
+/// Due to the nature of Stencil, we have to have skeleton states defined globally
+/// to have them render correctly during the hydration process.
+/// @todo v2 - explore how we can keep this code with it's related component
+/// @group foundation
+////
+
+@forward "button"

package/src/styles/spacing.scss

@@ -0,0 +1,24 @@
+////
+/// Mural's design system spacing foundations
+/// @group foundation
+////
+@use "mixins" as *;
+
+/// The design system provides utility classes for adopters that do not support Sass
+/// and can not rely on our mixins.
+
+.mrl-u-space-center-horizontal {
+	@include mrl-space-center-horizontal;
+}
+
+.mrl-u-space-center-horizontal-inline {
+	@include mrl-space-center-horizontal('inline');
+}
+
+.mrl-u-space-center-vertical {
+	@include mrl-space-center-vertical;
+}
+
+.mrl-u-space-center-vertical-inline {
+	@include mrl-space-center-vertical('inline');
+}

package/src/styles/typography.scss

@@ -0,0 +1,19 @@
+////
+/// Mural's design system typography foundations
+/// @group foundation
+////
+@use "mixins" as *;
+
+/// The design system provides utility classes for adopters that do not support Sass
+/// and can not rely on our mixins.
+$mrl-utils-text-interactive-sizes: 'xsmall', 'small', 'medium', 'large';
+
+@each $size in $mrl-utils-text-interactive-sizes {
+	.mrl-u-text-interactive-#{$size} {
+		@include mrl-text-interactive($size);
+	}
+}
+
+.mrl-u-text-toggleable-label {
+	@include mrl-text-toggleable-label;
+}