À propos du projet
Carbon Components Svelte est une bibliothèque de composants pour le framework Svelte qui implémente le Carbon Design System, le système de conception open source maintenu par IBM. Selon le README, elle propose plus de 90 composants, allant des champs de saisie aux tableaux de données, cinq thèmes intégrés (deux clairs et trois sombres), une API TypeScript entièrement typée couvrant les props, les événements et les slots, et vise l'accessibilité WCAG 2.1 AA avec un support pour le clavier et les lecteurs d'écran.
Le stylage peut être chargé soit sous forme de CSS précompilé, soit en important le SCSS directement depuis le package phare carbon-components, ce que le README décrit comme la voie la plus performante car les styles de composants inutilisés peuvent être supprimés. Cinq feuilles de style de thème sont fournies : white (clair par défaut), g10 (clair), g80, g90 et g100 (sombre), ainsi qu'un bundle all.css qui regroupe les cinq via des propriétés CSS personnalisées. Le thémage dynamique s'effectue en important all.css et en définissant un attribut de thème sur l'élément html, soit dans le balisage, soit via un script ; un composant Theme est également disponible pour une commutation réactive.
Les composants sont importés depuis le package à l'intérieur d'un bloc de script Svelte, et le README oriente les lecteurs vers le site de documentation du projet pour les détails de l'API des composants.
L'écosystème élargi comprend Carbon Icons Svelte avec plus de 2 700 icônes en quatre tailles (16, 20, 24 et 32 pixels) sélectionnées via une prop size ; Carbon Pictograms Svelte avec plus de 1 500 pictogrammes illustratifs destinés aux états vides, à l'onboarding, aux sections hero et aux mises en avant de fonctionnalités, par défaut à 64 pixels ; Carbon Charts Svelte avec plus de 25 graphiques basés sur d3 ; et Carbon Preprocess Svelte, décrit comme une dépendance de développement optionnelle.
Carbon Preprocess Svelte fournit deux optimisations. optimizeImports est un préprocesseur Svelte qui réécrit les imports barrel des packages de composants, d'icônes et de pictogrammes vers leurs chemins de fichiers Svelte sources, ce qui, selon le README, peut accélérer les temps de compilation en développement et en production tout en préservant l'autocomplétion de l'IDE. optimizeCss est un plugin Vite et Rollup qui supprime les styles Carbon inutilisés lors du build ; le README montre un exemple où une feuille de style compilée passe d'environ 606 ko à environ 53 ko, et note que la version 0.85.0 ou ultérieure de la bibliothèque est requise. Des extraits de configuration sont fournis pour Vite, SvelteKit, Rollup et Webpack, et des projets d'exemple pour chacun sont inclus dans le dépôt.
Les définitions TypeScript sont générées avec sveld. La documentation est également publiée dans un format texte brut adapté aux LLM : un index de composants llms.txt où chaque entrée renvoie vers un document Markdown par composant, et un fichier llms-full.txt contenant la documentation complète, avec un document Markdown disponible pour tout composant en ajoutant .md à son URL.
Le projet est sous licence Apache 2.0 et liste des directives de contribution ainsi qu'un journal des modifications. Le README révèle que le package utilise la télémétrie d'IBM pour collecter des données métriques désidentifiées et anonymisées dans les environnements CI, que son installation en tant que dépendance constitue un accord pour cette collecte, et renvoie vers la documentation d'IBM pour s'en exclure et pour obtenir des détails sur les données collectées.
Comments
0 Rating appears after 10 ratings
Sign in to join the discussion.