# Système de design Morningstar ## Aperçu de l’interface système de design Morningstar Basculez entre deux modèles de répartition d’origine et triez les pourcentages, tout en conservant les couleurs associées aux catégories d’actifs. ## Référence de design système de design Morningstar Adoption actuelle de Vue 3 et recommandations Intrinsic de 2025, avec des références aux constantes publiques explicitement associées à leur version. Les valeurs numériques historiques de v2.37 servent uniquement de référence historique ; elles ne décrivent pas le package Vue 3 actuel. L’exemple utilise les couleurs de graphique historiques citées et sa propre mise en page applicative. ### Périmètre de l’adoption actuelle | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | UI scope | @mds | Composants versionnés individuellement. | | Chart scope | @mce | Éléments de graphique à périmètre distinct. | | Vue 3 packages | -vue3 suffix | Utilisez la génération de bibliothèque correspondante. | | Registry | artifacts.morningstar.com/repository/npm-prod-group/ | Accès interne requis. | | Sass | Dart Sass / sass package | Compilez les styles des composants fournis. | | CSS Modules | [local]___researchNotebook | Espace de noms de l’application d’exemple, et non suffixe officiellement requis. | ### Transition vers Intrinsic | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Typeface | Morningstar Intrinsic | Les ressources approuvées doivent être obtenues séparément. | | Weights | Regular and Bold | Familles de graisses actuellement prises en charge. | | Thin / Light / Regular | Map to Intrinsic Regular | Les anciens noms de graisse ne signifient pas qu’il existe trois nouveaux fichiers de police. | | Bold / Heavy | Map to Intrinsic Bold | Utilisez les emphases avec discernement. | | Vue 3 typography | @mds/typography-vue3 | Mixins mis à jour. | | Legacy monolith / MBC | No Intrinsic updates | Ne fondez pas une nouvelle intégration sur l’ancien monolithe. | ### Couleurs du texte — instantané des constantes 3.3.0 | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | $mds-text-color-primary | #1e1e1e | Texte principal sur fond clair. | | $mds-text-color-secondary | #5e5e5e | Texte secondaire sur fond clair. | | $mds-text-color-primary-on-dark | #ffffff | Texte principal sur fond sombre. | | $mds-text-color-secondary-on-dark | #ababab | Texte secondaire sur fond sombre. | | $mds-text-color-interactive-primary | #006fba | Texte interactif ; pour les liens, privilégiez le mixin dédié. | | $mds-text-color-error | #ca0000 | Texte d’erreur, à distinguer d’un fond de notification. | ### Palette historique de répartition — v2.37 | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | $mds-visualization-color-asset-allocation-equity | #1f55a5 | Segment des actions. | | $mds-visualization-color-asset-allocation-fixed-income | #ef7622 | Segment des titres à revenu fixe. | | $mds-visualization-color-asset-allocation-cash | #518428 | Segment des liquidités. | | $mds-visualization-color-asset-allocation-alternative | #a50032 | Segment des actifs alternatifs. | | $mds-visualization-color-asset-allocation-not-classified | #e5e5e5 | Segment non classé ; associez-le à un libellé. | ### Espacements historiques — v2.37 | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | $mds-space-quarter-x | 2px | Constante historique ; vérifiez le package installé avant de l’adopter. | | $mds-space-half-x | 4px | Constante historique ; vérifiez le package installé avant de l’adopter. | | $mds-space-1-x | 8px | Constante historique ; vérifiez le package installé avant de l’adopter. | | $mds-space-1-and-a-half-x | 12px | Constante historique ; vérifiez le package installé avant de l’adopter. | | $mds-space-2-x | 16px | Constante historique ; vérifiez le package installé avant de l’adopter. | | $mds-space-3-x | 24px | Constante historique ; vérifiez le package installé avant de l’adopter. | | $mds-space-4-x | 32px | Constante historique ; vérifiez le package installé avant de l’adopter. | | $mds-space-6-x | 48px | Constante historique ; vérifiez le package installé avant de l’adopter. | ### Contrôles de composition du tableau | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | row-numbers | Boolean on mds-table | Fournissez le numéro de ligne dans mds-tr. | | nested-headers | Number of levels | Utilisez les emplacements mds-thead-group-n. | | multiselection | Boolean on mds-table | Distinguez les états « tout sélectionné » et « sélection partielle ». | | mds-thead.indeterminate | Boolean | Indique une sélection partielle. | | mds-tr.multiselection-label | Row-identifying text | Nomme la case à cocher de sélection. | | mds-pagination-page-changed | Pagination event | L’application fournit la logique de changement de page. | ## Système de design Morningstar Guide complet Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Système de design Morningstar Un carnet de recherche fondé sur des chiffres comparables ### Les tableaux affichent les valeurs exactes > L’exemple d’origine présente deux modèles de répartition fictifs, une barre empilée et un tableau de valeurs exactes. La représentation visuelle explique la composition relative ; le tableau reste la référence pour consulter les données. Chaque modèle totalise 100 %, et le modèle sélectionné est indiqué dans le titre comme dans la légende du tableau. Le tri modifie l’ordre des lignes sans changer le dénominateur ni les couleurs des classes d’actifs. Le lecteur peut passer d’une vue d’ensemble de la répartition à un pourcentage exact sans avoir à interpréter une icône de notation propriétaire. Il s’agit d’une interaction concrète de recherche, et non d’un produit ou d’une recommandation Morningstar inventés. Consultez la spécification associée ## Système de design Morningstar Les constantes ont des rôles définis et des limites de version ### Ne transformez pas chaque gris en jeton de couleur du texte MDS distingue les constantes définies par rôle des couleurs génériques. Le guide destiné aux ingénieurs distingue spécifiquement une couleur de texte d’un ton neutre générique lorsque la même valeur visuelle est nécessaire pour un élément non textuel. L’exemple Sass fourni utilise le rôle de lecture pour le texte et un ton neutre générique pour une règle de tableau personnalisée. Les tableaux de référence conservent leurs limites de version : les constantes 3.3.0 prennent en charge les valeurs de texte citées, tandis que l’archive publique v2.37 contient les valeurs historiques de répartition et d’espacement. Elles sont utiles pour comprendre une interface existante, mais ne prouvent pas que toutes les constantes actuelles de Vue 3 produisent les mêmes résultats. Consultez le package installé autorisé avant de considérer une valeur archivée comme une exigence actuelle du design system. Consultez la spécification associée ## Système de design Morningstar Morningstar Intrinsic modifie la base de référence de l’implémentation ### Deux familles de graisses, mises à jour coordonnées des composants L’annonce Intrinsic de 2025 associe les anciens noms thin, light et regular à la police regular, et les noms bold et heavy à la police bold. Modifier uniquement la déclaration de font-family ne suffit pas à reproduire cette migration : l’annonce préconise des mises à jour des composants, notamment des packages de polices et de typographie. L’ancien monolithe morningstar-design-system et Morningstar Base Charts ne bénéficient pas des mises à jour Intrinsic. Les nouveaux exemples ne doivent pas associer ces anciennes méthodes d’installation aux instructions actuelles pour Vue 3. Le carnet hors ligne utilise une police de remplacement système et n’intègre aucun fichier de police propriétaire. Consultez la spécification associée ## Système de design Morningstar Composez explicitement les fonctionnalités du tableau ### La sélection, les en-têtes imbriqués et la pagination relèvent de responsabilités distinctes MDS propose des éléments de tableau à composer, plutôt que d’imposer toutes les opérations sur les données dans une seule grille opaque. Les modèles documentés exposent les numéros de ligne, les emplacements d’en-têtes imbriqués, la sélection multiple et la pagination. L’application reste responsable de la transformation des données et de l’état de sélection. L’exemple fonctionnel fourni utilise volontairement un tableau HTML natif avec des styles fondés sur les constantes. La référence documentée de composition MDS reste utile lors du passage à la famille de composants native : une sélection partielle doit être représentée par l’état indéterminé de la case à cocher d’en-tête, et chaque case de ligne doit avoir un libellé de sélection multiple qui identifie la ligne. - Conservez les pourcentages sous forme numérique jusqu’au formatage d’affichage ; ne triez pas les chaînes formatées. - Alignez les en-têtes numériques à droite, comme les cellules correspondantes. - Préservez le libellé de l’actif lors du tri ; les positions dans un tableau ne sont pas des identifiants d’enregistrement stables. Consultez la spécification associée ## Système de design Morningstar Les couleurs des actifs ne sont pas de simples éléments décoratifs ### Utilisez une signification fixe et une équivalence textuelle La palette historique de répartition distingue les actions, les titres à revenu fixe, les liquidités, les actifs alternatifs et les éléments non classés. Dans l’exemple, les trois couleurs d’actifs concernées restent associées à leurs classes d’actifs, quel que soit le modèle ou l’ordre des lignes. Les couleurs ne changent pas en fonction du segment qui se trouve en première position. Un tableau textuel reprend chaque valeur ; l’utilisateur n’a donc pas besoin de distinguer le bleu, l’orange et le vert pour comprendre le modèle. L’exemple évite les étoiles, les icônes de médaillé et les images de style box Morningstar : la référence officielle des icônes réserve les icônes de propriété intellectuelle à leurs significations établies. Consultez la spécification associée ## Système de design Morningstar Distinguez l’échelle historique de la mise en page de l’application ### Une surface de lecture compacte, sans colonnes masquées L’archive documente un espacement de base de 8 pixels, avec des pas d’un quart et d’une moitié. L’exemple adopte un rythme sobre de 8/16/24/32, inspiré de cette référence historique. La largeur totale, la hauteur de la barre empilée et le seuil mobile sont des choix propres à l’application, et non des constantes officielles inventées. Le tableau ne comporte que trois colonnes : classe d’actifs, pourcentage et barre comparative. Sur les écrans étroits, la barre comparative miniature est supprimée, tandis que l’actif et son pourcentage exact restent visibles. Le sélecteur de modèle reste au-dessus des données et son libellé demeure visible ; aucun filtre n’est représenté par une icône seule sans libellé. Consultez la spécification associée ## Système de design Morningstar Adoptez la génération actuelle du package dans les limites d’accès prévues ### Configurez les ressources réellement utilisées avant de styliser un produit Les équipes autorisées peuvent utiliser le registre interne documenté, le suffixe de package Vue 3 et la configuration Sass. CSS Les modules isolent les styles des composants afin que différentes versions puissent coexister ; l’exemple utilise un espace de noms propre au produit. Les ressources de polices hébergées doivent être configurées avant les styles qui les utilisent. L’aperçu public ne nécessite aucun de ces accès. Il s’agit d’une démonstration complète et autonome HTML de l’interaction d’allocation, avec des couleurs historiques étayées par des sources et une police système explicitement définie comme solution de repli. L’exemple Vue distinct propose une méthode d’adoption concrète basée sur des constantes ; il ne prétend pas que cette page puisse donner accès au registre ou aux polices. 1. Confirmez que vous disposez des accès autorisés au registre interne et aux polices, puis créez la configuration de projet isolée présentée ci-dessus. 2. Compilez le point d’entrée Sass avant le composant de l’application, puis montez l’exemple App.vue complet. 3. Changez de modèle d’allocation dans l’aperçu, triez dans les deux sens et vérifiez que les libellés, les valeurs et le total restent cohérents. Consultez la spécification associée ## Exemples de composants du système de design système de design Morningstar ### Exemple interactif autonome complet Enregistrez le document complet sous le nom index.html et ouvrez-le dans un navigateur. Interprétation native HTML hors ligne, avec les couleurs historiques d’allocation MDS citées et une police système. Aucun environnement d’exécution MDS Vue, aucune note propriétaire ni donnée d’investissement en temps réel. ``` Allocation notebook — MDS interpretation
RESEARCH NOTEBOOKIndependent MDS interpretation

One model. Every allocation.

Read the mix at a glance, then inspect the exact numbers. These two original models are fictional.

No market data or investment recommendation
EquityFixed incomeCash
100PERCENT TOTAL
Balanced sample allocation
Asset classShare of model

Sorted by allocation, highest first.

Historical MDS v2.37 allocation colors; original application layout and system-font fallback. No Morningstar ratings, proprietary font assets or native Vue components are included.

``` Référence du code - Les valeurs d’allocation sont fictives. Les couleurs des actifs conservent leur signification catégorielle lors du tri ; ce document n’intègre ni ressources propriétaires de MDS Vue ni polices Intrinsic. ### Un tableau triable complet avec un dénominateur explicite Un tableau Vue 3 utilise la sémantique native et la configuration du langage visuel MDS présentées ci-dessus. Le tri préserve les valeurs numériques et indique le sens du tri. ``` ``` Référence du code - MDS autorise les équipes à adapter ses constantes et son langage visuel sans utiliser ses composants Vue. - Cet exemple n’invente délibérément ni import MdsTable ni événement de tri non documenté. - L’allocation 55/35/10 est fictive, totalise 100 et ne représente pas des données de marché. ### Distinguer l’échelle typographique du niveau sémantique des titres La mixin officielle peut appliquer à un h1 l’échelle visuelle du niveau 2 sans changer sa signification dans le document. ``` @use '@mds/constants-vue3' as *; @use '@mds/typography-vue3' as *; h1 { @include mds-level-2-heading($bold:true); color:$mds-text-color-primary; } p { @include mds-body-text-m(); color:$mds-text-color-primary; } ``` Référence du code - Les mixins typographiques ne définissent pas la couleur du texte. - Utilisez des constantes MCE isolées pour les éléments de graphique plutôt que de supposer que les substitutions MDS s’y appliquent aussi. ## Configuration de l’agent IA système de design Morningstar ### Point de départ de l’implémentation Configuration du registre réservé aux équipes autorisées. Le chemin des polices doit pointer vers des fichiers sous licence réellement hébergés par l’application. À associer à App.vue ci-dessous. Il s’agit d’un tableau natif HTML basé sur des constantes, et non d’une affirmation selon laquelle les packages MDS seraient accessibles au public ou que la compilation native ait été vérifiée. ``` # Authorized Morningstar teams only: project .npmrc @mds:registry=https://artifacts.morningstar.com/repository/npm-prod-group/ @mce:registry=https://artifacts.morningstar.com/repository/npm-prod-group/ # Within a Vite Vue 3 project with approved registry access pnpm add @mds/constants-vue3 @mds/typography-vue3 @mds/fonts-vue3 pnpm add -D sass // vite.config.js import {defineConfig} from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins:[vue()], css:{modules:{generateScopedName:'[local]___researchNotebook'}} }); // src/main.js import {createApp} from 'vue'; import './main.scss'; import App from './App.vue'; createApp(App).mount('#app'); // src/main.scss — host licensed font files at this application path first @use '@mds/fonts-vue3/scss/config' with ($font-path:'/fonts/morningstar-intrinsic'); @use '@mds/fonts-vue3'; @use '@mds/constants-vue3' as *; @use '@mds/typography-vue3' as *; h1 { @include mds-level-2-heading($bold:true); color:$mds-text-color-primary; } p,td,th { @include mds-body-text-m(); color:$mds-text-color-primary; } main { margin:$mds-space-4-x; } table { width:100%;border-collapse:collapse; } th,td { text-align:left; border-bottom:1px solid $mds-color-neutral-37; } .numeric { text-align:right;font-variant-numeric:tabular-nums; } button { font:inherit;cursor:pointer; } ``` ### Un prompt pour votre projet ``` Créez un carnet de recherche inspiré de Morningstar en respectant les limites de version explicites de ce guide. Présentez les valeurs exactes de l’allocation dans un tableau sémantique et associez les couleurs de façon permanente à la signification de leurs actifs. N’inventez pas de notes et n’utilisez pas les icônes IP comme décoration. N’utilisez la configuration actuelle des polices et des constantes Vue 3 autorisées qu’avec les accès approuvés ; sinon, identifiez clairement l’implémentation hors ligne. ``` ## Sources et périmètre système de design Morningstar Guide indépendant OpenDesign. Les exemples d’allocation sont fictifs et ne constituent pas des conseils financiers. Les constantes numériques historiques sont associées à leur version source ; Morningstar contrôle toujours l’accès aux packages actuels et aux polices. - Adoption de Vue 3 Registre, Sass, polices, modules et constantes. - Annonce d’Intrinsic Transition actuelle des polices et exclusions des anciennes versions. - Constantes historiques v2.37 Espacements et couleurs d’allocation explicitement historiques. - Constantes de texte 3.3.0 Valeurs de couleur de lecture associées à leur version. - Guide des fonctionnalités du tableau Composition, sélection et pagination. - Sémantique des icônes Restrictions relatives aux icônes IP et utilisation accessible. - À propos de MDS Adoption basée sur des constantes, sans composants natifs. ## Ressources connexes système de design Morningstar ### Mozilla Protocol Un guide éditorial Protocol avec les véritables familles de polices et échelles d’espacement et de conteneurs, une page de lecture illustrée et adaptative, ainsi qu’un exemple complet de formulaire natif CSS. ### Nord système de design Examinez les tokens du thème Therapy de Nord et les contrats des Web Components au moyen d’un brouillon de demande de salle : rôles de couleur réels, dimensions adaptatives des champs, validation explicite et résultats préparés localement. ### Oracle Redwood Découvrez la palette réelle d’Oracle JET 19 Redwood, ses rôles sémantiques et ses limites d’espacement et de densité grâce à une fiche de travail originale et complète pour l’analyse des stocks, entièrement modifiable. - [Référence de mise en œuvre](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples) - [Source](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3) - [Source](https://designsystem.morningstar.com/whats-new/blog/introducing-morningstar-intrinsic/) - [Source](https://designsystem.morningstar.com/component-docs/constants/3.3.0/color.html?tab=text) - [Source](https://designsystem.morningstar.com/legacy/visual-language/constants.html) - [Source](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples) - [Consultez la spécification associée](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples) - [Consultez la spécification associée](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3) - [Consultez la spécification associée](https://designsystem.morningstar.com/whats-new/blog/introducing-morningstar-intrinsic/) - [Consultez la spécification associée](https://designsystem.morningstar.com/ui-elements-docs/icon-vue3/2.0.0/index.html) - [Consultez la spécification associée](https://designsystem.morningstar.com/legacy/visual-language/constants.html) - [Référence du code](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples) - [Référence du code](https://designsystem.morningstar.com/getting-started/about-mds/) - [Référence du code](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3) - [Adoption de Vue 3 Registre, Sass, polices, modules et constantes.](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3) - [Annonce d’Intrinsic Transition actuelle des polices et exclusions des anciennes versions.](https://designsystem.morningstar.com/whats-new/blog/introducing-morningstar-intrinsic/) - [Constantes historiques v2.37 Espacements et couleurs d’allocation explicitement historiques.](https://designsystem.morningstar.com/legacy/visual-language/constants.html) - [Constantes de texte 3.3.0 Valeurs de couleur de lecture associées à leur version.](https://designsystem.morningstar.com/component-docs/constants/3.3.0/color.html?tab=text) - [Guide des fonctionnalités du tableau Composition, sélection et pagination.](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples) - [Sémantique des icônes Restrictions relatives aux icônes IP et utilisation accessible.](https://designsystem.morningstar.com/ui-elements-docs/icon-vue3/2.0.0/index.html) - [À propos de MDS Adoption basée sur des constantes, sans composants natifs.](https://designsystem.morningstar.com/getting-started/about-mds/)