@muraldevkit/ds-foundation 1.0.0

package/dist/tokens/spacing.json

@@ -0,0 +1,46 @@
+{
+	"spacing": {
+		"01": {
+			"value": "2"
+		},
+		"02": {
+			"value": "4"
+		},
+		"03": {
+			"value": "8"
+		},
+		"04": {
+			"value": "12"
+		},
+		"05": {
+			"value": "16"
+		},
+		"06": {
+			"value": "20"
+		},
+		"07": {
+			"value": "24"
+		},
+		"08": {
+			"value": "32"
+		},
+		"09": {
+			"value": "40"
+		},
+		"10": {
+			"value": "48"
+		},
+		"11": {
+			"value": "64"
+		},
+		"12": {
+			"value": "80"
+		},
+		"13": {
+			"value": "96"
+		},
+		"14": {
+			"value": "160"
+		}
+	}
+}

package/dist/tokens/typography.json

@@ -0,0 +1,148 @@
+{
+	"$font-family": {
+		"01": {
+			"value": "'proxima-nova'",
+			"comment": "Brand font family used everywhere"
+		}
+	},
+	"font-size": {
+		"01": {
+			"value": "11",
+			"comment": "11px text"
+		},
+		"02": {
+			"value": "12",
+			"comment": "12px text"
+		},
+		"03": {
+			"value": "14",
+			"comment": "14px text"
+		},
+		"04": {
+			"value": "16",
+			"comment": "16px text"
+		},
+		"05": {
+			"value": "18",
+			"comment": "18px text"
+		},
+		"06": {
+			"value": "20",
+			"comment": "20px text"
+		},
+		"07": {
+			"value": "24",
+			"comment": "24px text"
+		},
+		"08": {
+			"value": "32",
+			"comment": "32px text"
+		},
+		"09": {
+			"value": "40",
+			"comment": "40px text"
+		},
+		"10": {
+			"value": "48",
+			"comment": "48px text"
+		},
+		"11": {
+			"value": "64",
+			"comment": "64px text"
+		},
+		"12": {
+			"value": "80",
+			"comment": "80px text"
+		},
+		"13": {
+			"value": "96",
+			"comment": "96px text"
+		},
+		"14": {
+			"value": "120",
+			"comment": "120px text"
+		}
+	},
+	"line-height": {
+		"01": {
+			"value": "0.875"
+		},
+		"02": {
+			"value": "1"
+		},
+		"03": {
+			"value": "1.125"
+		},
+		"04": {
+			"value": "1.167"
+		},
+		"05": {
+			"value": "1.2"
+		},
+		"06": {
+			"value": "1.33"
+		},
+		"07": {
+			"value": "1.4"
+		},
+		"08": {
+			"value": "1.45"
+		},
+		"09": {
+			"value": "1.5"
+		},
+		"10": {
+			"value": "1.56"
+		},
+		"11": {
+			"value": "1.75"
+		},
+		"12": {
+			"value": "2"
+		}
+	},
+	"letter-spacing": {
+		"01": {
+			"value": "-2%",
+			"comment": "Condensed spacing"
+		},
+		"02": {
+			"value": "-1%",
+			"comment": "Semi-condensed spacing"
+		},
+		"03": {
+			"value": "0%",
+			"comment": "No spacing"
+		},
+		"04": {
+			"value": "1%",
+			"comment": "Semi-extended spacing"
+		},
+		"05": {
+			"value": "2%",
+			"comment": "Extended spacing"
+		}
+	},
+	"font-weight": {
+		"01": {
+			"value": "400",
+			"comment": "Regular"
+		},
+		"02": {
+			"value": "500",
+			"comment": "Medium"
+		},
+		"03": {
+			"value": "600",
+			"comment": "Semibold"
+		},
+		"04": {
+			"value": "700",
+			"comment": "Bold"
+		},
+		"05": {
+			"value": "800",
+			"comment": "Extra bold"
+		}
+	}
+}

package/package.json

@@ -0,0 +1 @@
+{"name":"@muraldevkit/ds-foundation","version":"1.0.0","description":"Mural's design system's Foundation package containing our design language features used across all components","license":"https://www.mural.co/terms/developer-addendum","scripts":{"copy":"npm run copy:json","copy:json":"cpy src/tokens/*.json dist/tokens/ --flat","build:minify":"npm run build:fonts:min && npm run build:foundation:min","build:transpile":"npm run build:fonts && npm run build:foundation","build:foundation":"sass src/styles/index.scss dist/foundation.css","build:foundation:min":"sass src/styles/index.scss dist/foundation.min.css --style compressed","build:fonts":"sass src/styles/fonts.scss dist/fonts.css","build:fonts:min":"sass src/styles/fonts.scss dist/fonts.min.css --style compressed","build:tokens":"style-dictionary build --config ../../node_modules/@muraldevkit/ds-utilities/lib/configs/style-dictionary.json","build:styles":"npm run build:transpile && npm run build:minify","build":"npm run clean && npm run build:tokens && npm run build:styles","postbuild":"npm run copy","clean":"rimraf dist && rimraf src/styles/_global.scss","watch":"sass src/styles/index.scss dist/foundation.css --watch","release":"npx semantic-release"},"files":["dist/","src/styles/","assets/fonts"],"publishConfig":{"access":"public"},"packageConfig":{"status":"integration-ready"},"devDependencies":{"@muraldevkit/ds-semrel-config":"1.0.0","@muraldevkit/ds-semrel-manager":"1.0.0","@muraldevkit/ds-semrel-stencil-exports":"1.0.1","@muraldevkit/ds-utilities":"1.0.0","cpy-cli":"4.2.0","rimraf":"3.0.2","sass":"1.56.2","semantic-release-monorepo":"7.0.5","style-dictionary":"3.7.1"},"release":{"extends":["semantic-release-monorepo","./config/release.config"]},"nx":{"targets":{"build":{"dependsOn":["^build"]},"inputs":["{projectRoot}/src/**/*"],"outputs":["{projectRoot}/dist"]}}}

package/src/styles/_functions.scss

@@ -0,0 +1,18 @@
+////
+/// Mural's design system function utilities
+/// @group functions
+////
+
+@use 'sass:math';
+
+/// Converts pixels to rems
+/// @group functions
+/// @param {Number} $value - Pixel value to convert
+/// @param {Number} $baseline - Baseline value to use, defaults to 16
+/// 	For the Classic theme use 10.
+/// @returns {Number} The rem equivalent of $value
+/// @example mrl-rem(600)
+@function mrl-rem($value, $baseline: 16) {
+	$remValue: (math.div($value, 16)) + rem;
+	@return $remValue;
+}

package/src/styles/_mixins.scss

@@ -0,0 +1,152 @@
+////
+/// Mural's design system mixins
+/// @group mixins
+////
+@forward "focus";
+
+/// Font face mixin
+/// @group mixins
+/// @param {String} $font-name - Name of the font family
+/// @param {String} $font-path - Path of the font file
+/// @param {Number} $font-weight - Weight of the font
+/// @param {String} $font-style - Style of the font - default: normal
+/// @example font-face( "proxima-nova","../fonts/proximanova" , 400)
+@mixin font-face($font-family, $font-path, $font-weight: 400, $font-style: normal) {
+	@font-face {
+		font-family: $font-family;
+		font-style : $font-style;
+		font-weight: $font-weight;
+		src: url('#{$font-path}.woff2') format('woff2');
+	}
+}
+
+/// Interactive text mixin
+/// This mixin is for pulling related CSS with contextual tokens for
+/// interactive elements, such as buttons, links, etc.
+/// @group mixins
+/// @param {String} $size - The desired size based on the typography scale
+/// Available options are "xsmall", "small", "medium" (default), "large"
+/// @example @include mrl-text-interactive("large");
+@mixin mrl-text-interactive($size: 'medium') {
+	// we use the default token if size is medium
+	$size-token: '';
+
+	@if $size != 'medium' {
+		$size-token: '-#{$size}';
+	}
+
+	// xsmall has a different letter spacing than others
+	$spacing-token: 'text';
+	@if $size == 'xsmall' {
+		$spacing-token: 'interactive-xsmall';
+	}
+
+	font-family: var(--mrl-font-family-01);
+	font-size: var(--mrl-type-size-text#{$size-token});
+	font-weight: var(--mrl-type-weight-interactive);
+	letter-spacing: var(--mrl-type-spacing-#{$spacing-token});
+	line-height: var(--mrl-type-line-height-interactive#{$size-token});
+}
+
+/// Body text mixin
+/// This mixin is for pulling related CSS with contextual tokens for
+/// elements that use the body text design configuration.
+/// @group mixins
+/// @param {String} $size - The desired size based on the typography scale
+/// Available options are "xsmall", "small", "medium" (default), "large"
+/// @param {String} $kind - Changes the text style kind based on the available options
+/// Available options are "body" (default), "title-secondary"
+/// @example @include mrl-text-static("large");
+@mixin mrl-text-static($size: 'medium', $kind: 'body') {
+	// we use the default token if size is medium
+	$size-token: '';
+	$weight-token: 'text';
+
+	@if $size != 'medium' {
+		$size-token: '-#{$size}';
+	}
+
+	@if $kind == 'title-secondary' {
+		$weight-token: 'title-secondary'
+	}
+
+	font-family: var(--mrl-text-family);
+	font-size:  var(--mrl-type-size-text#{$size-token});
+	font-weight: var(--mrl-type-weight-#{$weight-token});
+	letter-spacing: var(--mrl-type-spacing-text);
+	line-height: var(--mrl-type-line-height-text#{$size-token});
+}
+
+
+/// Toggleable label mixin
+/// This mixin is for using with icon buttons and dynamic labels withing drawers
+/// @group mixins
+/// @example @include mrl-text-toggleable-label();
+@mixin mrl-text-toggleable-label() {
+	font-size: var(--mrl-type-size-toggleable-label);
+	font-weight: var(--mrl-type-weight-toggleable-label);
+}
+
+/// Vertical centering for immediate children of an element
+/// @group mixins
+/// @param {String} $display - specifies the display behavior (the type of rendering box) of an element
+/// Available options are "inline", "block" (default)
+/// @example @include mrl-space-center-vertical("inline");
+@mixin mrl-space-center-vertical($display: 'block') {
+	$display-centered: flex;
+
+	@if $display == 'inline' {
+		$display-centered: inline-flex;
+	}
+
+	align-items: center;
+	display: $display-centered;
+
+	> * {
+		display: inline-flex;
+	}
+}
+
+/// Horizontal centering for immediate children of an element
+/// @group mixins
+/// @param {String} $display - specifies the display behavior (the type of rendering box) of an element
+/// Available options are "inline", "block" (default)
+/// @example @include mrl-space-center-horizontal("inline");
+@mixin mrl-space-center-horizontal($display: 'block') {
+	$display-centered: flex;
+
+	@if $display == 'inline' {
+		$display-centered: inline-flex;
+	}
+
+	display: $display-centered;
+}
+
+/// Drop shadow mixin
+/// This mixin is for creating drop shadows using `filter: drop-shadow(...)`.
+/// This method is preferred over `box-shadow` in instances like the canvas where
+/// the shadows will rerender continuously on drag. Note, filters get applied to all
+/// child elements as well. To work around affecting children, use a pseudo element
+/// to apply the filter instead.
+/// @group mixins
+/// @param {String} $type - The desired type based on the shadow tokens.
+/// Available options are "lifted" (default), "raised", "floating", "hover", "drag"
+/// @example @include mrl-shadow("raised");
+@mixin mrl-shadow($type: 'lifted') {
+	// Set a filter for "raised", "floating", "hover", or "drag" if they are passed, otherwise use "lifted"
+	// We use hard coded rgba values here because CSS variables don't render in the filter.
+	@if $type == 'raised' {
+		filter: drop-shadow(0 0 1px rgba(0, 0, 0, 8%)) drop-shadow(0 5px 8px rgba(0, 0, 0, 8%));
+	} @else if $type == 'floating' {
+		filter: drop-shadow(0 0 1px rgba(0, 0, 0, 8%)) drop-shadow(0 25px 20px rgba(0, 0, 0, 12%));
+	} @else if $type == 'hover' {
+		filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 8%));
+	} @else if $type == 'drag' {
+		filter: drop-shadow(0 20px 12px rgba(0, 0, 0, 12%));
+	} @else {
+		// The box-shadow version of this shadow contains a spread value which is not supported
+		// in the drop-shadow filter. The values of the first shadow have been manually tweaked
+		// with design to create alignment as much as possible between the two implementations.
+		filter: drop-shadow(0 0 1px rgba(0, 0, 0, 28%)) drop-shadow(0 4px 4px rgba(0, 0, 0, 4%));
+	}
+}

package/src/styles/baseline.scss

@@ -0,0 +1,157 @@
+////
+/// Mural's design system baseline and normalizer styles
+/// @group baseline
+////
+
+/// http://meyerweb.com/eric/tools/css/reset/
+/// v2.0 | 20110126
+/// License: none (public domain)
+/// Start vendor reset
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+img,
+ins,
+kbd,
+q,
+samp,
+small,
+tt,
+var,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+	border: 0;
+	margin: 0;
+	padding: 0;
+	vertical-align: baseline;
+}
+
+b,
+em,
+i,
+strike,
+strong,
+sub,
+sup,
+u {
+	border: 0;
+	font-family: inherit;
+	margin: 0;
+	padding: 0;
+	vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+	display: block;
+}
+
+ol,
+ul {
+	list-style: none;
+}
+
+blockquote,
+q {
+	quotes: none;
+}
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+	content: none;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+/// End vendor reset
+
+html {
+	border: 0;
+	box-sizing: border-box;
+	font: inherit;
+	font-family: var(--mrl-font-family-01), sans-serif;
+	font-size: var(--mrl-font-size, 100%);
+	-webkit-font-smoothing: antialiased;
+	margin: 0;
+	padding: 0;
+	vertical-align: baseline;
+}
+
+*,
+*::before,
+*::after {
+	box-sizing: inherit;
+}

package/src/styles/contextual-variables/border.scss

@@ -0,0 +1,100 @@
+////
+/// Contextual Border Tokens
+/// @group variables
+////
+
+$mrl-contextual-border-width-vars: (
+	"border": "01",
+	"border-selected": "01",
+	"focus": "01",
+	"control": "01",
+	"divider": "01",
+);
+$mrl-contextual-border-radius-vars: (
+	"tight": "01",
+	"content": "02",
+	"content-large": "03",
+	"functional": "03",
+	"functional-large": "04",
+	"container": "04",
+	"container-large": "05",
+	"rounded": "07",
+	"rounded-large": "08",
+);
+
+// Setup for contextual border stroke and color combinations
+$mrl-contextual-border-sets: (
+	"", // default color set
+	"emph",
+	"inverse"
+);
+$mrl-contextual-border-states: (
+	"", // default element state
+	"hover",
+	"active",
+	"selected",
+	"disabled"
+);
+$mrl-contextual-border-unique: (
+	"focus",
+	"divider"
+);
+
+:root {
+	// Border Width
+	@each $token-name, $token-value in $mrl-contextual-border-width-vars {
+		--mrl-line-width-#{$token-name}: var(--mrl-stroke-#{$token-value});
+	}
+
+	// Border Radius
+	@each $token-name, $token-value in $mrl-contextual-border-radius-vars {
+		--mrl-border-radius-#{$token-name}: var(--mrl-radii-#{$token-value});
+	}
+
+	// Disabling stylelint rule because this is an intentional nesting to keep DRY code to create a list of CSS variables
+	// stylelint-disable max-nesting-depth
+
+	// Border combinations
+	@each $set in $mrl-contextual-border-sets {
+		@each $state in $mrl-contextual-border-states {
+			$set-token: '-#{$set}';
+			$state-token: '-#{$state}';
+			$width-token: '';
+
+			@if $set == '' {
+				$set-token: '';
+			}
+
+			@if $state == '' {
+				$state-token: '';
+			}
+
+			$color-token: $state-token;
+
+			@if $state == 'selected' {
+				$width-token: '-#{$state}'
+			}
+
+			@if $set == 'inverse' {
+				@if $state != 'disabled' {
+					$color-token: '';
+				}
+			}
+
+			--mrl-border#{$set-token}#{$state-token}: var(--mrl-line-width-border#{$width-token}) solid var(--mrl-color-line#{$set-token}#{$color-token});
+		}
+	}
+
+
+	// Unique border combinations
+	@each $use-case in $mrl-contextual-border-unique {
+		$color-token: 'line-#{$use-case}';
+
+		@if $use-case == 'focus' {
+			$color-token: 'focus';
+		}
+
+		--mrl-border-#{$use-case}: var(--mrl-line-width-#{$use-case}) solid var(--mrl-color-#{$color-token});
+	}
+	// stylelint-enable max-nesting-depth
+}