@dsrc-cm/core 0.1.0

package/src/components/label/label.css

@@ -0,0 +1,29 @@
+/**
+ * DSRC Label Component
+ *
+ * Usage:
+ * <label class="dsrc-label">
+ *   Nom complet <span class="dsrc-label__required">*</span>
+ * </label>
+ */
+
+.dsrc-label {
+  display: block;
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-small);
+  font-weight: var(--dsrc-font-weight-semibold);
+  color: var(--dsrc-color-gris-800);
+  margin-bottom: var(--dsrc-spacing-1);
+}
+
+.dsrc-label__required {
+  color: var(--dsrc-color-erreur-texte);
+  margin-left: var(--dsrc-spacing-1);
+}
+
+.dsrc-label__hint {
+  font-weight: var(--dsrc-font-weight-regular);
+  color: var(--dsrc-color-gris-600);
+  font-size: var(--dsrc-font-size-caption);
+  margin-left: var(--dsrc-spacing-2);
+}

package/src/components/link/link.css

@@ -0,0 +1,208 @@
+/**
+ * DSRC Link Component
+ * Design Systeme de la Republique du Cameroun
+ *
+ * Architecture alignee sur le DSFR pour les liens avec
+ * icones, tailles, et variantes.
+ *
+ * Usage :
+ *   <a class="dsrc-link" href="/page">Voir la page</a>
+ *   <a class="dsrc-link dsrc-link--icon-right" href="/page">Suivant</a>
+ *   <a class="dsrc-link dsrc-link--external" href="https://..." target="_blank" rel="noopener">Site externe</a>
+ *   <a class="dsrc-link dsrc-link--download" href="/file.pdf" download>Telecharger (PDF, 1.2 Mo)</a>
+ *
+ * Modificateurs :
+ *   --sm                Taille reduite
+ *   --lg                Taille augmentee
+ *   --icon-left         Fleche a gauche du texte
+ *   --icon-right        Fleche a droite du texte
+ *   --external          Icone lien externe
+ *   --download          Icone telechargement
+ *   --neutral           Couleur grise
+ *   --no-underline      Sans soulignement par defaut
+ */
+
+
+/* ==========================================================================
+   1. BASE LINK
+   ========================================================================== */
+
+.dsrc-link {
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-body);
+  color: var(--dsrc-color-primaire);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dsrc-spacing-1);
+  transition: color var(--dsrc-transition-duration-fast) ease;
+}
+
+.dsrc-link:hover {
+  color: var(--dsrc-color-primaire-fonce);
+}
+
+.dsrc-link:active {
+  color: var(--dsrc-color-primaire-fonce);
+}
+
+.dsrc-link:focus-visible {
+  outline: var(--dsrc-outline-width) solid var(--dsrc-color-primaire-focus);
+  outline-offset: var(--dsrc-outline-offset);
+  border-radius: var(--dsrc-radius-small);
+}
+
+.dsrc-link:visited {
+  color: var(--dsrc-color-primaire-fonce);
+}
+
+
+/* ==========================================================================
+   2. SIZE MODIFIERS
+   ========================================================================== */
+
+.dsrc-link--sm {
+  font-size: var(--dsrc-font-size-small);
+}
+
+.dsrc-link--lg {
+  font-size: var(--dsrc-font-size-h5, 1.125rem);
+}
+
+
+/* ==========================================================================
+   3. ICON VARIANTS
+   Arrows via CSS mask-image.
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   3.1 Icon left (back arrow)
+   -------------------------------------------------------------------------- */
+
+.dsrc-link--icon-left::before {
+  content: '';
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  background-color: currentColor;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M10 3L5 8l5 5' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M10 3L5 8l5 5' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+
+/* --------------------------------------------------------------------------
+   3.2 Icon right (forward arrow)
+   -------------------------------------------------------------------------- */
+
+.dsrc-link--icon-right::after {
+  content: '';
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  background-color: currentColor;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M6 3l5 5-5 5' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M6 3l5 5-5 5' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+
+
+/* ==========================================================================
+   4. EXTERNAL LINK VARIANT
+   ========================================================================== */
+
+.dsrc-link--external::after {
+  content: '';
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  background-color: currentColor;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M13 9v4a1 1 0 01-1 1H4a1 1 0 01-1-1V5a1 1 0 011-1h4M9 2h5v5M14 2L7 9' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M13 9v4a1 1 0 01-1 1H4a1 1 0 01-1-1V5a1 1 0 011-1h4M9 2h5v5M14 2L7 9' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+
+
+/* ==========================================================================
+   5. DOWNLOAD LINK VARIANT
+   ========================================================================== */
+
+.dsrc-link--download::before {
+  content: '';
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  background-color: currentColor;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M8 2v8M8 10L4.5 6.5M8 10l3.5-3.5M3 14h10' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M8 2v8M8 10L4.5 6.5M8 10l3.5-3.5M3 14h10' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+
+
+/* ==========================================================================
+   6. COLOR MODIFIERS
+   ========================================================================== */
+
+.dsrc-link--neutral {
+  color: var(--dsrc-color-gris-700);
+}
+
+.dsrc-link--neutral:hover {
+  color: var(--dsrc-color-noir);
+}
+
+.dsrc-link--neutral:visited {
+  color: var(--dsrc-color-gris-700);
+}
+
+
+/* ==========================================================================
+   7. TEXT-DECORATION MODIFIER
+   ========================================================================== */
+
+.dsrc-link--no-underline {
+  text-decoration: none;
+}
+
+.dsrc-link--no-underline:hover {
+  text-decoration: underline;
+}
+
+
+/* ==========================================================================
+   8. HIGH CONTRAST (forced-colors)
+   ========================================================================== */
+
+@media (forced-colors: active) {
+  .dsrc-link {
+    text-decoration: underline;
+  }
+
+  .dsrc-link:focus-visible {
+    outline: 2px solid Highlight;
+  }
+
+  .dsrc-link--icon-left::before,
+  .dsrc-link--icon-right::after,
+  .dsrc-link--external::after,
+  .dsrc-link--download::before {
+    background-color: LinkText;
+  }
+}

package/src/components/logo/logo.css

@@ -0,0 +1,86 @@
+/**
+ * DSRC Logo Component
+ *
+ * Usage:
+ * <div class="dsrc-logo">
+ *   <div class="dsrc-logo__flag">
+ *     <span class="dsrc-logo__flag-green"></span>
+ *     <span class="dsrc-logo__flag-red"></span>
+ *     <span class="dsrc-logo__flag-yellow"></span>
+ *   </div>
+ *   <div class="dsrc-logo__text">
+ *     <span class="dsrc-logo__title">Republique du Cameroun</span>
+ *     <span class="dsrc-logo__motto">Paix - Travail - Patrie</span>
+ *   </div>
+ * </div>
+ */
+
+.dsrc-logo {
+  display: flex;
+  align-items: center;
+  gap: var(--dsrc-spacing-3);
+  text-decoration: none;
+  color: var(--dsrc-color-noir);
+}
+
+.dsrc-logo__flag {
+  display: flex;
+  width: 36px;
+  height: 28px;
+  border-radius: var(--dsrc-radius-small);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.dsrc-logo__flag-green {
+  flex: 1;
+  background-color: var(--dsrc-color-drapeau-vert);
+}
+
+.dsrc-logo__flag-red {
+  flex: 1;
+  background-color: var(--dsrc-color-drapeau-rouge);
+}
+
+.dsrc-logo__flag-yellow {
+  flex: 1;
+  background-color: var(--dsrc-color-drapeau-jaune);
+}
+
+.dsrc-logo__text {
+  display: flex;
+  flex-direction: column;
+}
+
+.dsrc-logo__title {
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-small);
+  font-weight: var(--dsrc-font-weight-bold);
+  line-height: var(--dsrc-font-line-height-tight);
+}
+
+.dsrc-logo__motto {
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-micro);
+  color: var(--dsrc-color-gris-600);
+  font-style: italic;
+}
+
+.dsrc-logo--lg .dsrc-logo__flag {
+  width: 48px;
+  height: 36px;
+}
+
+.dsrc-logo--lg .dsrc-logo__title {
+  font-size: var(--dsrc-font-size-body);
+}
+
+.dsrc-logo--lg .dsrc-logo__motto {
+  font-size: var(--dsrc-font-size-caption);
+}
+
+.dsrc-logo:focus-visible {
+  outline: var(--dsrc-outline-width) solid var(--dsrc-color-primaire-focus);
+  outline-offset: var(--dsrc-outline-offset);
+  border-radius: var(--dsrc-radius-small);
+}

package/src/components/modal/modal.css

@@ -0,0 +1,271 @@
+/**
+ * DSRC Modal Component
+ *
+ * Based on the native <dialog> element for built-in a11y.
+ * Layout: flex column with header / body (scrollable) / footer (sticky).
+ *
+ * Variants:
+ *   --top ... Anchored to top instead of bottom on mobile
+ *
+ * Usage:
+ *   <dialog class="dsrc-modal" id="modal1">
+ *     <div class="dsrc-modal__body">
+ *       <div class="dsrc-modal__header">
+ *         <h2 class="dsrc-modal__title">Titre</h2>
+ *       </div>
+ *       <div class="dsrc-modal__content">
+ *         <p>Contenu de la modale.</p>
+ *       </div>
+ *       <div class="dsrc-modal__footer">
+ *         <button class="dsrc-btn">Confirmer</button>
+ *       </div>
+ *     </div>
+ *   </dialog>
+ */
+
+
+/* ============================================
+ * 1. Base modal (dialog reset)
+ * ============================================ */
+
+.dsrc-modal {
+  border: none;
+  color: inherit;
+  background-color: transparent;
+  padding: 0;
+  margin: 0;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-end;
+  z-index: var(--dsrc-z-index-modal, 1000);
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.3s, visibility 0.3s;
+}
+
+
+/* ============================================
+ * 2. Overlay (::backdrop)
+ * ============================================ */
+
+.dsrc-modal::backdrop {
+  background-color: rgba(0, 0, 0, 0.64);
+}
+
+
+/* ============================================
+ * 3. Open state
+ * ============================================ */
+
+.dsrc-modal[open] {
+  visibility: visible;
+  opacity: 1;
+}
+
+
+/* ============================================
+ * 4. Spacers (center the body vertically)
+ * ============================================ */
+
+.dsrc-modal::before {
+  content: '';
+  display: block;
+  width: 0;
+  height: 32px;
+  flex: 1 0 32px;
+}
+
+.dsrc-modal::after {
+  content: none;
+}
+
+/* Top variant: body at top on mobile */
+.dsrc-modal--top::before {
+  content: none;
+}
+
+.dsrc-modal--top::after {
+  content: '';
+  display: block;
+  width: 0;
+  height: 32px;
+  flex: 1 0 32px;
+}
+
+@media (min-width: 768px) {
+  .dsrc-modal {
+    justify-content: center;
+  }
+
+  .dsrc-modal::before {
+    height: 10%;
+    flex: 1 0 10%;
+  }
+
+  .dsrc-modal::after {
+    content: '';
+    display: block;
+    width: 0;
+    height: 10%;
+    flex: 1 0 10%;
+  }
+
+  .dsrc-modal--top::before {
+    content: '';
+  }
+}
+
+
+/* ============================================
+ * 5. Modal body (white card)
+ * ============================================ */
+
+.dsrc-modal__body {
+  --modal-max-height: calc(100vh - 2rem);
+  pointer-events: all;
+  overflow-y: auto;
+  flex: 1 1 auto;
+  max-height: var(--modal-max-height);
+  background-color: var(--dsrc-color-blanc);
+  box-shadow: var(--dsrc-shadow-lg);
+}
+
+@media (min-width: 768px) {
+  .dsrc-modal__body {
+    max-height: 80vh;
+    max-width: 600px;
+    margin: 0 auto;
+    width: 100%;
+    border-radius: var(--dsrc-radius-default);
+  }
+}
+
+
+/* ============================================
+ * 6. Header
+ * ============================================ */
+
+.dsrc-modal__header {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  padding: var(--dsrc-spacing-4);
+}
+
+@media (min-width: 768px) {
+  .dsrc-modal__header {
+    padding: var(--dsrc-spacing-4) var(--dsrc-spacing-8);
+  }
+}
+
+.dsrc-modal__title {
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-h4);
+  font-weight: 700;
+  margin: 0;
+}
+
+
+/* ============================================
+ * 7. Content
+ * ============================================ */
+
+.dsrc-modal__content {
+  padding: 0 var(--dsrc-spacing-4) var(--dsrc-spacing-14);
+}
+
+@media (min-width: 768px) {
+  .dsrc-modal__content {
+    padding: 0 var(--dsrc-spacing-8) var(--dsrc-spacing-16);
+  }
+}
+
+
+/* ============================================
+ * 8. Footer (sticky)
+ * ============================================ */
+
+.dsrc-modal__footer {
+  flex: 0 0 auto;
+  display: flex;
+  padding: var(--dsrc-spacing-4);
+  position: sticky;
+  bottom: 0;
+  background-color: var(--dsrc-color-blanc);
+  transition: box-shadow 0.3s;
+}
+
+@media (min-width: 768px) {
+  .dsrc-modal__footer {
+    padding: var(--dsrc-spacing-8);
+  }
+}
+
+
+/* ============================================
+ * 9. Close button
+ * ============================================ */
+
+.dsrc-modal__close {
+  margin-left: auto;
+  background: none;
+  border: none;
+  padding: var(--dsrc-spacing-1);
+  cursor: pointer;
+  color: var(--dsrc-color-noir);
+  line-height: 1;
+}
+
+.dsrc-modal__close:focus-visible {
+  outline: 2px solid var(--dsrc-color-primaire);
+  outline-offset: 2px;
+}
+
+
+/* ============================================
+ * 10. High contrast (forced-colors)
+ * ============================================ */
+
+@media (forced-colors: active) {
+  .dsrc-modal__body {
+    border: 1px solid ButtonText;
+  }
+
+  .dsrc-modal__footer {
+    border-top: 1px solid ButtonText;
+  }
+}
+
+
+/* ============================================
+ * 11. Reduced motion
+ * ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .dsrc-modal {
+    transition: none;
+  }
+
+  .dsrc-modal__footer {
+    transition: none;
+  }
+}
+
+
+/* ============================================
+ * 12. Print
+ * ============================================ */
+
+@media print {
+  .dsrc-modal {
+    display: none;
+  }
+}