A constant is a reusable design decision expressed as a property-value pair. Constants are threaded throughout MDS components to maintain a consistent visual style and are available for use by product teams.
Constants include not just official System Colors, but how color is predictably applied to backgrounds, text, and borders in specific settings. Similarly, engineers are not limited to generic spacer values, but can instead compose components more intentionally with Space insets, stack values, and other choices.
Constants are managed in src/library/constants/constants.yaml, using YAML syntax to encode property-value pairs with a hierarchy.
The MDS build process transforms constants.yaml into additional generated files for use within this System site and by those using MDS:
src/library/data/mds_constants.jsonsrc/library/styles/_mds_constants.scsssrc/library/components), and for product teams when composing custom styles.Constants are used throughout the MDS library. For example, the Pagination component style in src/library/components/pagination/pagination.scss includes constants for border color, text color, font family and font size:
border: $mds-border-control-default;
color: $mds-text-color-primary-default;
font-family: $mds-font-family-sans-serif;
font-size: $mds-font-size-s;All components are built with and reviewed for appropriate constant use.
A product team may want to adopt the Morningstar visual language but has limited or no bandwidth to change HTML markup within their product. In this case, a product team can apply MDS constants using SASS variables by following these steps:
src/library/styles/_mds_constants.scss within their style compilation, enabling access to constants as variables within a product’s environment.For example, consider a module repeated across a view. If a team wanted to update the module’s header (div.layout__header), but were unable to modify the markup, they could apply constants as SASS variables to update only CSS.
<div class=”layout__component”>
<div class=”layout__header”> </div>
<div class=”layout__component-wrapper”> </div>
</div>.layout__header {
background-color: #ccc;
border-bottom: 1px solid rgba(0, 0, 0, 0.02);
}.layout__header {
background-color: $mds-background-color-light;
border-bottom: $mds-border-separator-default;
}Constants are managed by MDS designers in collaboration with the Morningstar design community. We add constants conservatively. Please be prepared to justify the addition of a constant by showing how it would be used across many MDS components. To request extensions or changes to the constants, email [email protected].
| Variable Name | Value |
|---|---|
| $mds-background-color-default |
#ffffff
|
| $mds-background-color-light |
#f2f2f2
|
| $mds-background-color-dark |
#1e1e1e
|
| $mds-background-color-black |
#000000
|
| $mds-background-color-alternative-row-default |
#e5e5e5
|
| $mds-background-color-alternative-row-on-light |
#e5e5e5
|
| $mds-background-color-alternative-row-on-dark |
#333333
|
| $mds-background-color-feedback-error |
#ff0000
|
| $mds-background-color-feedback-warning |
#f5c400
|
| Variable Name | Value |
|---|---|
| $mds-text-color-primary-default |
#1e1e1e
|
| $mds-text-color-primary-on-light |
#1e1e1e
|
| $mds-text-color-primary-on-dark |
#ffffff
|
| $mds-text-color-secondary-default |
#5e5e5e
|
| $mds-text-color-secondary-on-light |
#5e5e5e
|
| $mds-text-color-secondary-on-dark |
#ababab
|
| $mds-text-color-link-default |
#006fba
|
| $mds-text-color-link-on-light |
#006fba
|
| $mds-text-color-link-on-dark |
#008dde
|
| $mds-text-color-error-default |
#ff0000
|
| $mds-text-color-error-on-light |
#ff0000
|
| $mds-text-color-error-on-dark |
#ff0000
|
| Variable Name | Value |
|---|---|
| $mds-interactive-color-primary-default |
#0077cf
|
| $mds-interactive-color-primary-hover |
#005ba1
|
| $mds-interactive-color-primary-focus |
#005ba1
|
| $mds-interactive-color-primary-active |
#004376
|
| $mds-interactive-color-secondary-primary | transparent |
| $mds-interactive-color-secondary-hover |
#5e5e5e
|
| $mds-interactive-color-secondary-focus |
#5e5e5e
|
| $mds-interactive-color-secondary-active-on-light |
#333333
|
| $mds-interactive-color-secondary-active-on-dark |
#e5e5e5
|
| $mds-interactive-color-disabled-on-light |
#808080
|
| $mds-interactive-color-disabled-on-dark |
#ababab
|
| Variable Name | Value |
|---|---|
| $mds-visualization-color-asset-allocation-local-stocks |
#1f55a5
|
| $mds-visualization-color-asset-allocation-non-local-stocks |
#8faad2
|
| $mds-visualization-color-asset-allocation-real-estate |
#a50032
|
| $mds-visualization-color-asset-allocation-other |
#f5c400
|
| $mds-visualization-color-asset-allocation-cash |
#518428
|
| $mds-visualization-color-asset-allocation-bonds |
#ef7622
|
| $mds-visualization-color-asset-allocation-not-classified |
#e5e5e5
|
| $mds-visualization-color-sector-cyclical |
#ef7622
|
| $mds-visualization-color-sector-sensitive |
#1f55a5
|
| $mds-visualization-color-sector-defensive |
#518428
|
| $mds-visualization-color-valuation-under |
#00a8e1
|
| $mds-visualization-color-valuation-fair |
#e5efef
|
| $mds-visualization-color-valuation-over |
#ef7622
|
| $mds-visualization-color-performance-positive |
#00af41
|
| $mds-visualization-color-performance-neutral-text |
#5e5e5e
|
| $mds-visualization-color-performance-neutral-chart |
#cccccc
|
| $mds-visualization-color-performance-negative |
#ff0000
|
| Variable Name | Value |
|---|---|
| $mds-chart-color-1 |
#1f55a5
|
| $mds-chart-color-2 |
#a50032
|
| $mds-chart-color-3 |
#f5c400
|
| $mds-chart-color-4 |
#518428
|
| $mds-chart-color-5 |
#00a8e1
|
| $mds-chart-color-6 |
#6a4c9e
|
| $mds-chart-color-7 |
#ef7622
|
| $mds-chart-color-8 |
#005f5f
|
| $mds-chart-color-9 |
#00af41
|
| $mds-chart-color-10 |
#e60546
|
| $mds-chart-color-11 |
#7d256f
|
| $mds-chart-color-12 |
#c19c31
|
| $mds-chart-color-13 |
#00beaf
|
| $mds-chart-color-14 |
#ff3c00
|
| $mds-chart-color-15 |
#89bd40
|
| Variable Name | Value |
|---|---|
| $mds-color-white |
#ffffff
|
| $mds-color-black |
#000000
|
| $mds-color-neutral-12 |
#1e1e1e
|
| $mds-color-neutral-20 |
#333333
|
| $mds-color-neutral-37 |
#5e5e5e
|
| $mds-color-neutral-50 |
#808080
|
| $mds-color-neutral-67 |
#ababab
|
| $mds-color-neutral-80 |
#cccccc
|
| $mds-color-neutral-90 |
#e5e5e5
|
| $mds-color-neutral-95 |
#f2f2f2
|
| $mds-color-blue-23 |
#004376
|
| $mds-color-blue-32 |
#005ba1
|
| $mds-color-blue-36 |
#006fba
|
| $mds-color-blue-38 |
#1f55a5
|
| $mds-color-blue-41 |
#0077cf
|
| $mds-color-blue-44 |
#008dde
|
| $mds-color-green-34 |
#00af41
|
| $mds-color-dark-green-34 |
#518428
|
| $mds-color-teal-19 |
#005f5f
|
| $mds-color-violet-46 |
#6a4c9e
|
| $mds-color-cyan-44 |
#00a8e1
|
| $mds-color-maroon-32 |
#a50032
|
| $mds-color-red-50 |
#ff0000
|
| $mds-color-yellow-48 |
#f5c400
|
| $mds-color-orange-54 |
#ef7622
|
| $mds-color-light-red-46 |
#e60546
|
| $mds-color-dark-violet-32 |
#7d256f
|
| $mds-color-dark-yellow-47 |
#c19c31
|
| $mds-color-aqua-37 |
#00beaf
|
| $mds-color-bright-orange-50 |
#ff3c00
|
| $mds-color-light-green-50 |
#89bd40
|
| Variable Name | Value |
|---|---|
| $mds-font-family-sans-serif | 'Univers', HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif |
| $mds-font-family-monospace | 'Lucida Sans Typewriter', 'Lucida Console', monaco, 'Bitstream Vera Sans Mono', monospace |
| $mds-font-size-base | 16px |
| $mds-font-size-default | 16px |
| $mds-font-size-xs | 10px |
| $mds-font-size-s | 14px |
| $mds-font-size-m | 16px |
| $mds-font-size-l | 20px |
| $mds-font-size-heading-level-1 | 45px |
| $mds-font-size-heading-level-2 | 32px |
| $mds-font-size-heading-level-3 | 28px |
| $mds-font-size-heading-level-4 | 23px |
| $mds-font-size-heading-level-5 | 20px |
| $mds-font-size-heading-level-6 | 18px |
| $mds-font-size-code | 12px |
| Variable Name | Value |
|---|---|
| $mds-border-separator-default | solid 1px #e5e5e5 |
| $mds-border-separator-on-light | solid 1px #cccccc |
| $mds-border-separator-on-dark | solid 1px #333333 |
| $mds-border-separator-on-title | solid 2px #333333 |
| $mds-border-separator-color-on-light |
#cccccc
|
| $mds-border-separator-color-on-dark |
#333333
|
| $mds-border-control-default | solid 1px #808080 |
| $mds-border-control-color |
#808080
|
| $mds-border-disabled | solid 1px #808080 |
| $mds-border-radius-panel | 12px |
| $mds-border-radius-pill | 24px |
| $mds-border-radius-round | 50% |
| $mds-border-radius-s | 2px |
| Variable Name | Value |
|---|---|
| $mds-size-icon-s | 15px |
| $mds-size-icon-m | 23px |
| Variable Name | Value |
|---|---|
| $mds-space-xs | 4px |
| $mds-space-s | 6px |
| $mds-space-m | 8px |
| $mds-space-l | 12px |
| $mds-space-xl | 16px |
| $mds-space-inset-xs | 4px |
| $mds-space-inset-s | 6px |
| $mds-space-inset-m | 8px |
| $mds-space-inset-l | 12px |
| $mds-space-inset-xl | 16px |
| $mds-space-inset-stretch-s | 6px 12px |
| $mds-space-inset-stretch-m | 8px 16px |
| $mds-space-inset-stretch-l | 12px 24px |
| $mds-space-inline-left-xs | 0 4px 0 0 |
| $mds-space-inline-left-s | 0 6px 0 0 |
| $mds-space-inline-left-m | 0 8px 0 0 |
| $mds-space-inline-left-l | 0 12px 0 0 |
| $mds-space-inline-left-xl | 0 16px 0 0 |
| $mds-space-inline-right-xs | 0 0 0 4px |
| $mds-space-inline-right-s | 0 0 0 6px |
| $mds-space-inline-right-m | 0 0 0 8px |
| $mds-space-inline-right-l | 0 0 0 12px |
| $mds-space-inline-right-xl | 0 0 0 16px |
| $mds-space-stack-s | 0 0 6px |
| $mds-space-stack-m | 0 0 8px |
| $mds-space-stack-l | 0 0 12px |
| $mds-space-stack-xl | 0 0 16px |
| Variable Name | Value |
|---|---|
| $mds-transition-color-link | color, 300ms |
| Variable Name | Value |
|---|---|
| $mds-opacity-disabled | .4 |
| $mds-opacity-overlay | .5 |
| Variable Name | Value |
|---|---|
| $mds-box-shadow-drop | 0 2px 4px 0 rgba(0, 0, 0, .08) |
| $mds-box-shadow-focus | 0 0 4px 2px rgba(#0077cf, .8) |