@muraldevkit/ds-foundation 2.18.0 → 2.19.0

package/dist/tokens/contextual-variables/color.json

@@ -0,0 +1,352 @@
+{
+	"color": {
+		"focus": {
+			"$value": "rgba({blue.70}, 1)",
+			"$description": "Focus ring on interactive elements."
+		},
+		"focus-inverse": {
+			"$value": "rgba({white}, 1)",
+			"$description": "Focus ring on inverse (dark) surfaces."
+		},
+		"shadows": {
+			"$value": "rgba({black}, 1)",
+			"$description": "Base color for shadow tokens."
+		},
+		"brand": {
+			"$value": "rgba({red.70}, 1)",
+			"$description": "Primary brand color."
+		},
+		"brand-hover": {
+			"$value": "rgba({red.80}, 1)",
+			"$description": "Brand color, hover state."
+		},
+		"brand-active": {
+			"$value": "rgba({red.90}, 1)",
+			"$description": "Brand color, active/pressed state."
+		},
+		"accent": {
+			"$value": "rgba({blue.70}, 1)",
+			"$description": "Accent color used for emphasis and selection."
+		},
+		"skeleton": {
+			"$value": "rgba({gray.20}, 1)",
+			"$description": "Skeleton placeholder background."
+		},
+		"skeleton-inverse": {
+			"$value": "rgba({white}, 1)",
+			"$description": "Skeleton placeholder background on inverse surfaces."
+		},
+		"background": {
+			"$value": "rgba({white}, 1)",
+			"$description": "Default surface background."
+		},
+		"background-secondary": {
+			"$value": "rgba({gray.80}, 1)",
+			"$description": "Secondary surface background."
+		},
+		"background-decorative": {
+			"$value": "rgba({gray.20}, 1)",
+			"$description": "Background for decorative, non-interactive surfaces."
+		},
+		"background-highlight-secondary": {
+			"$value": "rgba({blue.10}, 1)",
+			"$description": "Secondary highlight background."
+		},
+		"background-info": {
+			"$value": "rgba({status.info}, 1)",
+			"$description": "Background for info status surfaces."
+		},
+		"background-info-light": {
+			"$value": "rgba({status.info-light}, 1)",
+			"$description": "Light background for info status surfaces."
+		},
+		"background-success": {
+			"$value": "rgba({status.success}, 1)",
+			"$description": "Background for success status surfaces."
+		},
+		"background-success-light": {
+			"$value": "rgba({status.success-light}, 1)",
+			"$description": "Light background for success status surfaces."
+		},
+		"background-warning": {
+			"$value": "rgba({status.warning}, 1)",
+			"$description": "Background for warning status surfaces."
+		},
+		"background-warning-light": {
+			"$value": "rgba({status.warning-light}, 1)",
+			"$description": "Light background for warning status surfaces."
+		},
+		"background-error": {
+			"$value": "rgba({status.error}, 1)",
+			"$description": "Background for error status surfaces."
+		},
+		"background-error-light": {
+			"$value": "rgba({status.error-light}, 1)",
+			"$description": "Light background for error status surfaces."
+		},
+		"background-private": {
+			"$value": "rgba({gray.100}, 1)",
+			"$description": "Background for private content warnings."
+		},
+		"background-inverse": {
+			"$value": "rgba({gray.100}, 1)",
+			"$description": "Inverse (dark) surface background."
+		},
+		"background-inverse-hover": {
+			"$value": "rgba({gray.90}, 1)",
+			"$description": "Inverse surface background, hover state."
+		},
+		"background-disabled": {
+			"$value": "rgba({gray.40}, 1)",
+			"$description": "Background for disabled controls."
+		},
+		"background-highlight-hover": {
+			"$value": "rgba({gray.20}, 1)",
+			"$description": "Highlight background, hover state."
+		},
+		"background-highlight-active": {
+			"$value": "rgba({gray.90}, 1)",
+			"$description": "Highlight background, active/pressed state."
+		},
+		"background-highlight-selected": {
+			"$value": "rgba({gray.100}, 1)",
+			"$description": "Highlight background, selected state."
+		},
+		"background-highlight-emph-active": {
+			"$value": "rgba({gray.30}, 1)",
+			"$description": "Emphasized highlight background, active state."
+		},
+		"line": {
+			"$value": "rgba({gray.70}, 1)",
+			"$description": "Default line/border color."
+		},
+		"line-hover": {
+			"$value": "rgba({gray.90}, 1)",
+			"$description": "Line color, hover state."
+		},
+		"line-active": {
+			"$value": "rgba({gray.100}, 1)",
+			"$description": "Line color, active state."
+		},
+		"line-selected": {
+			"$value": "rgba({gray.90}, 1)",
+			"$description": "Line color, selected state."
+		},
+		"line-disabled": {
+			"$value": "rgba({gray.40}, 1)",
+			"$description": "Line color for disabled controls."
+		},
+		"line-highlight-secondary": {
+			"$value": "rgba({blue.20}, 1)",
+			"$description": "Secondary highlight line color."
+		},
+		"line-divider": {
+			"$value": "rgba({gray.20}, 1)",
+			"$description": "Divider line color."
+		},
+		"line-divider-inverse": {
+			"$value": "rgba({gray.80}, 1)",
+			"$description": "Divider line color on inverse surfaces."
+		},
+		"line-emph": {
+			"$value": "rgba({gray.20}, 1)",
+			"$description": "Emphasized line color."
+		},
+		"line-emph-hover": {
+			"$value": "rgba({gray.90}, 1)",
+			"$description": "Emphasized line color, hover state."
+		},
+		"line-emph-active": {
+			"$value": "rgba({black}, 1)",
+			"$description": "Emphasized line color, active state."
+		},
+		"line-inverse": {
+			"$value": "rgba({white}, 1)",
+			"$description": "Line color on inverse surfaces."
+		},
+		"line-inverse-disabled": {
+			"$value": "rgba({white}, 1)",
+			"$description": "Line color for disabled controls on inverse surfaces."
+		},
+		"icon-light": {
+			"$value": "rgba({gray.70}, 1)",
+			"$description": "Light icon color."
+		},
+		"icon-disabled": {
+			"$value": "rgba({gray.40}, 1)",
+			"$description": "Icon color for disabled controls."
+		},
+		"icon-inverse": {
+			"$value": "rgba({white}, 1)",
+			"$description": "Icon color on inverse surfaces."
+		},
+		"input-icon-default": {
+			"$value": "rgba({gray.70}, 1)",
+			"$description": "Default icon color inside form inputs."
+		},
+		"text": {
+			"$value": "rgba({gray.80}, 1)",
+			"$description": "Default body text color."
+		},
+		"text-hover": {
+			"$value": "rgba({gray.90}, 1)",
+			"$description": "Text color, hover state."
+		},
+		"text-active": {
+			"$value": "rgba({gray.90}, 1)",
+			"$description": "Text color, active state."
+		},
+		"text-selected": {
+			"$value": "rgba({gray.100}, 1)",
+			"$description": "Text color, selected state."
+		},
+		"text-disabled": {
+			"$value": "rgba({gray.40}, 1)",
+			"$description": "Text color for disabled controls."
+		},
+		"text-disabled-inverse": {
+			"$value": "rgba({white}, 1)",
+			"$description": "Disabled text color on inverse surfaces."
+		},
+		"text-emph": {
+			"$value": "rgba({gray.80}, 1)",
+			"$description": "Emphasized text color."
+		},
+		"text-emph-hover": {
+			"$value": "rgba({gray.90}, 1)",
+			"$description": "Emphasized text color, hover state."
+		},
+		"text-emph-active": {
+			"$value": "rgba({black}, 1)",
+			"$description": "Emphasized text color, active state."
+		},
+		"text-highlight": {
+			"$value": "rgba({gray.80}, 1)",
+			"$description": "Text color on highlighted backgrounds."
+		},
+		"text-highlight-hover": {
+			"$value": "rgba({gray.90}, 1)",
+			"$description": "Highlighted text color, hover state."
+		},
+		"text-highlight-active": {
+			"$value": "rgba({white}, 1)",
+			"$description": "Highlighted text color, active state."
+		},
+		"text-highlight-selected": {
+			"$value": "rgba({white}, 1)",
+			"$description": "Highlighted text color, selected state."
+		},
+		"text-highlight-emph": {
+			"$value": "rgba({gray.90}, 1)",
+			"$description": "Emphasized highlighted text color."
+		},
+		"text-highlight-emph-hover": {
+			"$value": "rgba({gray.100}, 1)",
+			"$description": "Emphasized highlighted text color, hover state."
+		},
+		"text-highlight-emph-active": {
+			"$value": "rgba({black}, 1)",
+			"$description": "Emphasized highlighted text color, active state."
+		},
+		"text-highlight-emph-selected": {
+			"$value": "rgba({white}, 1)",
+			"$description": "Emphasized highlighted text color, selected state."
+		},
+		"text-inverse": {
+			"$value": "rgba({white}, 1)",
+			"$description": "Text color on inverse surfaces."
+		},
+		"text-inverse-secondary": {
+			"$value": "rgba({gray.10}, 1)",
+			"$description": "Secondary text color on inverse surfaces."
+		},
+		"text-inverse-hover": {
+			"$value": "rgba({white}, 1)",
+			"$description": "Inverse text color, hover state."
+		},
+		"text-inverse-active": {
+			"$value": "rgba({white}, 1)",
+			"$description": "Inverse text color, active state."
+		},
+		"text-inverse-selected": {
+			"$value": "rgba({white}, 1)",
+			"$description": "Inverse text color, selected state."
+		},
+		"text-02": {
+			"$value": "rgba({gray.90}, 1)",
+			"$description": "Alternate body text color."
+		},
+		"text-secondary": {
+			"$value": "rgba({gray.70}, 1)",
+			"$description": "Secondary text color."
+		},
+		"text-label": {
+			"$value": "rgba({gray.100}, 1)",
+			"$description": "Text color for form labels."
+		},
+		"text-heading": {
+			"$value": "rgba({gray.100}, 1)",
+			"$description": "Text color for headings."
+		},
+		"text-success": {
+			"$value": "rgba({status.success}, 1)",
+			"$description": "Text color for success messages."
+		},
+		"text-warning": {
+			"$value": "rgba({gray.90}, 1)",
+			"$description": "Text color for warning messages."
+		},
+		"text-warning-light": {
+			"$value": "rgba({gray.80}, 1)",
+			"$description": "Text color for light-warning messages."
+		},
+		"text-error": {
+			"$value": "rgba({status.error}, 1)",
+			"$description": "Text color for error messages."
+		},
+		"text-info": {
+			"$value": "rgba({status.info}, 1)",
+			"$description": "Text color for info messages."
+		},
+		"text-private": {
+			"$value": "rgba({gray.100}, 1)",
+			"$description": "Text color for private content."
+		},
+		"icon-emph-selected": {
+			"$value": "rgba({gray.100}, 1)",
+			"$description": "Emphasized icon color, selected state."
+		},
+		"background-inverse-active": {
+			"$value": "{color.accent}",
+			"$description": "Inverse surface background, active state."
+		},
+		"background-inverse-selected": {
+			"$value": "{color.accent}",
+			"$description": "Inverse surface background, selected state."
+		},
+		"background-highlight-emph-selected": {
+			"$value": "{color.accent}",
+			"$description": "Emphasized highlight background, selected state."
+		},
+		"line-emph-selected": {
+			"$value": "{color.accent}",
+			"$description": "Emphasized line color, selected state."
+		},
+		"text-emph-selected": {
+			"$value": "{color.accent}",
+			"$description": "Emphasized text color, selected state."
+		},
+		"background-page": {
+			"$value": "rgb(243, 245, 246)",
+			"$description": "Intentional one-off page background (#f3f5f6)."
+		},
+		"background-hover-opacity": {
+			"$value": "rgba({gray.30}, 0.2)",
+			"$description": "Hover overlay at 20% opacity."
+		},
+		"background-inverse-hover-opacity": {
+			"$value": "{black-opacity-02}",
+			"$description": "Inverse hover overlay using black-opacity-02."
+		}
+	}
+}

package/dist/tokens/contextual-variables/shadows.json

@@ -0,0 +1,30 @@
+{
+	"shadows": {
+		"$description": "Contextual Shadow Tokens. 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 tokens to map to the drop-shadow filter!",
+		"lifted": {
+			"$type": "shadow",
+			"$value": "{shadow.01}",
+			"$description": "Contextual shadow token."
+		},
+		"raised": {
+			"$type": "shadow",
+			"$value": "{shadow.02}",
+			"$description": "Contextual shadow token."
+		},
+		"floating": {
+			"$type": "shadow",
+			"$value": "{shadow.03}",
+			"$description": "Contextual shadow token."
+		},
+		"hover": {
+			"$type": "shadow",
+			"$value": "{shadow.interactive-01}",
+			"$description": "Contextual shadow token."
+		},
+		"drag": {
+			"$type": "shadow",
+			"$value": "{shadow.interactive-02}",
+			"$description": "Contextual shadow token."
+		}
+	}
+}

package/dist/tokens/contextual-variables/spacing.json

@@ -0,0 +1,120 @@
+{
+	"space": {
+		"offset-focus": {
+			"$value": "1px",
+			"$description": "Focus ring offset. No global spacing token for 1px, so this is hard-coded."
+		},
+		"stack-components": {
+			"$value": "{spacing.06}",
+			"$description": "Vertical stack spacing between components."
+		},
+		"stack-controls": {
+			"$value": "{spacing.05}",
+			"$description": "Vertical stack spacing between controls."
+		},
+		"stack-controls-small": {
+			"$value": "{spacing.04}",
+			"$description": "Vertical stack spacing between small controls."
+		},
+		"stack-section": {
+			"$value": "{spacing.07}",
+			"$description": "Vertical stack spacing between sections."
+		},
+		"stack-section-divider": {
+			"$value": "{spacing.04}",
+			"$description": "Vertical stack spacing around section dividers."
+		},
+		"stack-section-divider-small": {
+			"$value": "{spacing.03}",
+			"$description": "Vertical stack spacing around small section dividers."
+		},
+		"stack-section-divider-large": {
+			"$value": "{spacing.06}",
+			"$description": "Vertical stack spacing around large section dividers."
+		},
+		"stack-section-divider-xlarge": {
+			"$value": "{spacing.08}",
+			"$description": "Vertical stack spacing around xlarge section dividers."
+		},
+		"stack-section-divider-label": {
+			"$value": "{spacing.05}",
+			"$description": "Vertical stack spacing around section divider labels."
+		},
+		"stack-siblings": {
+			"$value": "{spacing.04}",
+			"$description": "Vertical stack spacing between sibling elements."
+		},
+		"stack-related": {
+			"$value": "{spacing.03}",
+			"$description": "Vertical stack spacing between related elements."
+		},
+		"stack-related-small": {
+			"$value": "{spacing.02}",
+			"$description": "Vertical stack spacing between closely related elements."
+		},
+		"inset": {
+			"$value": "{spacing.03}",
+			"$description": "Default inset padding."
+		},
+		"inset-container": {
+			"$value": "{spacing.08}",
+			"$description": "Inset padding for containers."
+		},
+		"inset-container-large": {
+			"$value": "{spacing.05}",
+			"$description": "Inset padding for large containers (mobile-first; overridden above 600px in spacing.scss)."
+		},
+		"inset-large": {
+			"$value": "{spacing.05}",
+			"$description": "Large inset padding."
+		},
+		"inset-control": {
+			"$value": "{spacing.06}",
+			"$description": "Inset padding for controls."
+		},
+		"inset-control-large": {
+			"$value": "{spacing.05}",
+			"$description": "Inset padding for large controls."
+		},
+		"inset-control-small": {
+			"$value": "calc({spacing.03} + {spacing.01})",
+			"$description": "Inset padding for small controls (form inputs, buttons)."
+		},
+		"inline-related": {
+			"$value": "{spacing.03}",
+			"$description": "Horizontal spacing between related elements."
+		},
+		"inline-sibling": {
+			"$value": "{spacing.04}",
+			"$description": "Horizontal spacing between sibling elements."
+		},
+		"inline-sibling-small": {
+			"$value": "{spacing.02}",
+			"$description": "Horizontal spacing between closely placed sibling elements."
+		},
+		"inline-sibling-xsmall": {
+			"$value": "{space.inline-sibling-small}",
+			"$description": "Horizontal spacing between very closely placed sibling elements."
+		},
+		"gutter": {
+			"$value": "{spacing.04}",
+			"$description": "Default grid/layout gutter."
+		},
+		"gutter-label": {
+			"$value": "{spacing.05}",
+			"$description": "Gutter spacing around labels."
+		},
+		"stack-subheading": {
+			"$value": "{spacing.05}",
+			"$description": "Vertical stack spacing around subheadings."
+		},
+		"stack-title": {
+			"$value": "{spacing.07}",
+			"$description": "Vertical stack spacing around titles."
+		},
+		"stack-title-related": {
+			"$value": "{spacing.05}",
+			"$description": "Vertical stack spacing between a title and related content."
+		}
+	}
+}