@dsrc-cm/core 0.1.0

package/src/components/callout/callout.css

@@ -0,0 +1,95 @@
+/**
+ * DSRC Callout Component
+ *
+ * Highlighted box with a colored left accent bar,
+ * used to draw attention to important information.
+ *
+ * Variants:
+ *   --info / --success / --warning / --error  (semantic colors)
+ *
+ * Usage:
+ *   <div class="dsrc-callout">
+ *     <h3 class="dsrc-callout__title">Titre</h3>
+ *     <p class="dsrc-callout__text">Contenu informatif.</p>
+ *   </div>
+ */
+
+
+/* ============================================
+ * 1. Base callout
+ * ============================================ */
+
+.dsrc-callout {
+  position: relative;
+  padding: var(--dsrc-spacing-6);
+  margin: var(--dsrc-spacing-4) 0;
+  background-color: var(--dsrc-color-gris-50);
+  border-left: 4px solid var(--dsrc-color-primaire);
+}
+
+.dsrc-callout__title {
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-h4);
+  font-weight: 700;
+  line-height: 1.5;
+  margin: 0 0 var(--dsrc-spacing-2);
+}
+
+.dsrc-callout__text {
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-lg);
+  line-height: 1.5;
+  margin: 0;
+}
+
+.dsrc-callout .dsrc-btn {
+  margin-top: var(--dsrc-spacing-4);
+}
+
+
+/* ============================================
+ * 2. Semantic variants
+ * ============================================ */
+
+.dsrc-callout--info {
+  background-color: var(--dsrc-color-info-fond);
+  border-left-color: var(--dsrc-color-info-bordure);
+}
+
+.dsrc-callout--success {
+  background-color: var(--dsrc-color-succes-fond);
+  border-left-color: var(--dsrc-color-succes-bordure);
+}
+
+.dsrc-callout--warning {
+  background-color: var(--dsrc-color-avertissement-fond);
+  border-left-color: var(--dsrc-color-avertissement-bordure);
+}
+
+.dsrc-callout--error {
+  background-color: var(--dsrc-color-erreur-fond);
+  border-left-color: var(--dsrc-color-erreur-bordure);
+}
+
+
+/* ============================================
+ * 3. High contrast (forced-colors)
+ * ============================================ */
+
+@media (forced-colors: active) {
+  .dsrc-callout {
+    border-left: 4px solid ButtonText;
+  }
+}
+
+
+/* ============================================
+ * 4. Print
+ * ============================================ */
+
+@media print {
+  .dsrc-callout {
+    border: 1px solid var(--dsrc-color-gris-400);
+    border-left-width: 4px;
+  }
+}

package/src/components/card/card.css

@@ -0,0 +1,551 @@
+/**
+ * DSRC Card Component
+ * Design Systeme de la Republique du Cameroun
+ *
+ * Architecture alignee sur le DSFR (Design Systeme de l'Etat francais).
+ * Le composant carte affiche du contenu avec image, titre, description
+ * et actions optionnelles.
+ *
+ * Structure HTML :
+ *
+ *   <div class="dsrc-card dsrc-enlarge-link">
+ *     <div class="dsrc-card__body">
+ *       <div class="dsrc-card__content">
+ *         <h3 class="dsrc-card__title">
+ *           <a href="#">Titre de la carte</a>
+ *         </h3>
+ *         <p class="dsrc-card__desc">Description de la carte</p>
+ *         <div class="dsrc-card__start">
+ *           <!-- Tags ou badges -->
+ *         </div>
+ *         <div class="dsrc-card__end">
+ *           <p class="dsrc-card__detail">Detail optionnel</p>
+ *         </div>
+ *       </div>
+ *       <div class="dsrc-card__footer">
+ *         <!-- Boutons d'action -->
+ *       </div>
+ *     </div>
+ *     <div class="dsrc-card__header">
+ *       <div class="dsrc-card__img">
+ *         <img class="dsrc-responsive-img" src="image.jpg" alt="">
+ *       </div>
+ *     </div>
+ *   </div>
+ *
+ * Modificateurs :
+ *   --grey          Fond gris au lieu de blanc
+ *   --shadow        Elevation avec ombre portee
+ *   --no-border     Sans bordure
+ *   --no-background Fond transparent
+ *   --accent        Barre verte en haut
+ *   --sm            Padding reduit
+ *   --lg            Padding et titre plus grands
+ *   --horizontal      Image 1/3, contenu 2/3
+ *   --horizontal-half Image 1/2, contenu 1/2
+ *   --horizontal-tier Image 1/3, contenu 2/3 (alias explicite)
+ *
+ * Note : .dsrc-enlarge-link est defini dans button.css.
+ */
+
+
+/* ==========================================================================
+   1. RESPONSIVE IMAGE
+   Utility class for images that fill their container and crop via
+   object-fit. Used inside .dsrc-card__img and elsewhere.
+   ========================================================================== */
+
+.dsrc-responsive-img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+
+/* ==========================================================================
+   2. IMAGE ASPECT-RATIO UTILITIES
+   Apply to .dsrc-card__img to control the visible ratio of the image.
+   ========================================================================== */
+
+.dsrc-ratio-16x9 { aspect-ratio: 16 / 9; }
+.dsrc-ratio-4x3  { aspect-ratio: 4 / 3; }
+.dsrc-ratio-3x2  { aspect-ratio: 3 / 2; }
+.dsrc-ratio-1x1  { aspect-ratio: 1 / 1; }
+
+
+/* ==========================================================================
+   3. BASE CARD
+   Default vertical card layout.
+   In the DOM, .dsrc-card__body comes BEFORE .dsrc-card__header so that
+   screen readers see the content first. We use flexbox + order to
+   render the image on top visually.
+   ========================================================================== */
+
+.dsrc-card {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  background-color: var(--dsrc-color-blanc);
+  border: var(--dsrc-border-width-thin) solid var(--dsrc-color-gris-200);
+  border-radius: var(--dsrc-radius-default);
+  overflow: hidden;
+  font-family: var(--dsrc-font-family-sans);
+  /* Smooth hover transitions */
+  transition:
+    box-shadow var(--dsrc-transition-duration-fast) ease,
+    border-color var(--dsrc-transition-duration-fast) ease;
+}
+
+
+/* ==========================================================================
+   4. CARD HEADER  (image area)
+   Placed last in the DOM but displayed first visually via order: -1.
+   ========================================================================== */
+
+.dsrc-card__header {
+  order: -1;
+  padding: 0;
+}
+
+.dsrc-card__img {
+  overflow: hidden;
+  /* Default aspect ratio; override with .dsrc-ratio-* on this element */
+  aspect-ratio: 3 / 2;
+}
+
+.dsrc-card__img > img,
+.dsrc-card__img > .dsrc-responsive-img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+
+/* ==========================================================================
+   5. CARD BODY
+   Contains .dsrc-card__content and optionally .dsrc-card__footer.
+   ========================================================================== */
+
+.dsrc-card__body {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  padding: 0;
+}
+
+
+/* ==========================================================================
+   6. CARD CONTENT
+   Title, description, start zone (tags), end zone (detail).
+   ========================================================================== */
+
+.dsrc-card__content {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  padding: var(--dsrc-spacing-4) var(--dsrc-spacing-5) var(--dsrc-spacing-3);
+}
+
+/* --------------------------------------------------------------------------
+   6.1 Title
+   -------------------------------------------------------------------------- */
+
+.dsrc-card__title {
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-body);
+  font-weight: var(--dsrc-font-weight-bold);
+  line-height: var(--dsrc-font-line-height-tight);
+  color: var(--dsrc-color-noir);
+  margin: 0 0 var(--dsrc-spacing-2) 0;
+}
+
+.dsrc-card__title a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.dsrc-card__title a:hover {
+  text-decoration: underline;
+}
+
+/* --------------------------------------------------------------------------
+   6.2 Description
+   -------------------------------------------------------------------------- */
+
+.dsrc-card__desc {
+  font-size: var(--dsrc-font-size-small);
+  line-height: var(--dsrc-font-line-height-normal);
+  color: var(--dsrc-color-gris-600);
+  margin: 0 0 var(--dsrc-spacing-3) 0;
+}
+
+/* --------------------------------------------------------------------------
+   6.3 Start zone (tags, badges)
+   -------------------------------------------------------------------------- */
+
+.dsrc-card__start {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--dsrc-spacing-2);
+  margin-bottom: var(--dsrc-spacing-3);
+  order: -1;
+  /* Tags appear above the title visually, matching DSFR behavior */
+}
+
+/* --------------------------------------------------------------------------
+   6.4 End zone (detail, metadata)
+   -------------------------------------------------------------------------- */
+
+.dsrc-card__end {
+  margin-top: auto;
+  padding-top: var(--dsrc-spacing-2);
+}
+
+.dsrc-card__detail {
+  font-size: var(--dsrc-font-size-caption);
+  line-height: var(--dsrc-font-line-height-normal);
+  color: var(--dsrc-color-gris-400);
+  margin: 0;
+}
+
+
+/* ==========================================================================
+   7. CARD FOOTER
+   Action buttons inside the body, below the content.
+   ========================================================================== */
+
+.dsrc-card__footer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--dsrc-spacing-3);
+  align-items: center;
+  padding: 0 var(--dsrc-spacing-5) var(--dsrc-spacing-4);
+}
+
+/* Ensure footer buttons remain clickable above dsrc-enlarge-link overlay */
+.dsrc-card__footer .dsrc-btn,
+.dsrc-card__footer a,
+.dsrc-card__footer button {
+  position: relative;
+  z-index: 2;
+}
+
+
+/* ==========================================================================
+   8. HOVER / FOCUS / ACTIVE
+   Interaction states for the card container.
+   ========================================================================== */
+
+.dsrc-enlarge-link.dsrc-card:hover {
+  box-shadow: var(--dsrc-shadow-md);
+  border-color: var(--dsrc-color-gris-400);
+}
+
+.dsrc-enlarge-link.dsrc-card:active {
+  box-shadow: var(--dsrc-shadow-sm);
+}
+
+/* Focus ring appears around the link inside the title */
+.dsrc-card__title a:focus-visible {
+  outline: var(--dsrc-outline-width) solid var(--dsrc-color-primaire-focus);
+  outline-offset: var(--dsrc-outline-offset);
+}
+
+
+/* ==========================================================================
+   9. SIZE MODIFIERS
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   9.1 Small (--sm): reduced padding
+   -------------------------------------------------------------------------- */
+
+.dsrc-card--sm .dsrc-card__content {
+  padding: var(--dsrc-spacing-3) var(--dsrc-spacing-3) var(--dsrc-spacing-2);
+}
+
+.dsrc-card--sm .dsrc-card__footer {
+  padding: 0 var(--dsrc-spacing-3) var(--dsrc-spacing-3);
+}
+
+.dsrc-card--sm .dsrc-card__title {
+  font-size: var(--dsrc-font-size-small);
+}
+
+.dsrc-card--sm .dsrc-card__desc {
+  font-size: var(--dsrc-font-size-caption);
+}
+
+/* --------------------------------------------------------------------------
+   9.2 Large (--lg): increased padding, bigger title
+   -------------------------------------------------------------------------- */
+
+.dsrc-card--lg .dsrc-card__content {
+  padding: var(--dsrc-spacing-5) var(--dsrc-spacing-6) var(--dsrc-spacing-4);
+}
+
+.dsrc-card--lg .dsrc-card__footer {
+  padding: 0 var(--dsrc-spacing-6) var(--dsrc-spacing-5);
+}
+
+.dsrc-card--lg .dsrc-card__title {
+  font-size: var(--dsrc-font-size-h4, 1.25rem);
+  margin-bottom: var(--dsrc-spacing-3);
+}
+
+.dsrc-card--lg .dsrc-card__desc {
+  font-size: var(--dsrc-font-size-body);
+}
+
+
+/* ==========================================================================
+   10. VISUAL MODIFIERS
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   10.1 --grey: grey background instead of white
+   -------------------------------------------------------------------------- */
+
+.dsrc-card--grey {
+  background-color: var(--dsrc-color-gris-50);
+}
+
+/* --------------------------------------------------------------------------
+   10.2 --shadow: elevated with shadow
+   -------------------------------------------------------------------------- */
+
+.dsrc-card--shadow {
+  box-shadow: var(--dsrc-shadow-md);
+  border-color: transparent;
+}
+
+.dsrc-enlarge-link.dsrc-card--shadow:hover {
+  box-shadow: var(--dsrc-shadow-lg);
+}
+
+/* --------------------------------------------------------------------------
+   10.3 --no-border: remove border
+   -------------------------------------------------------------------------- */
+
+.dsrc-card--no-border {
+  border: 0;
+}
+
+/* --------------------------------------------------------------------------
+   10.4 --no-background: transparent background
+   -------------------------------------------------------------------------- */
+
+.dsrc-card--no-background {
+  background-color: transparent;
+}
+
+/* --------------------------------------------------------------------------
+   10.5 --accent: top green accent bar
+   -------------------------------------------------------------------------- */
+
+.dsrc-card--accent {
+  border-top: var(--dsrc-border-width-thick) solid var(--dsrc-color-primaire);
+}
+
+
+/* ==========================================================================
+   11. HORIZONTAL VARIANTS
+   Side-by-side image + content layout.
+   At mobile (<768px) they stack vertically.
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   11.1 --horizontal (default 1/3 image, 2/3 content)
+   -------------------------------------------------------------------------- */
+
+.dsrc-card--horizontal {
+  flex-direction: row;
+}
+
+.dsrc-card--horizontal > .dsrc-card__header {
+  order: 0;
+  flex: 0 0 33.333%;
+  max-width: 33.333%;
+}
+
+.dsrc-card--horizontal > .dsrc-card__header .dsrc-card__img {
+  aspect-ratio: auto;
+  height: 100%;
+}
+
+.dsrc-card--horizontal > .dsrc-card__body {
+  flex: 1 1 66.666%;
+  justify-content: center;
+}
+
+/* --------------------------------------------------------------------------
+   11.2 --horizontal-half (50/50)
+   -------------------------------------------------------------------------- */
+
+.dsrc-card--horizontal-half {
+  flex-direction: row;
+}
+
+.dsrc-card--horizontal-half > .dsrc-card__header {
+  order: 0;
+  flex: 0 0 50%;
+  max-width: 50%;
+}
+
+.dsrc-card--horizontal-half > .dsrc-card__header .dsrc-card__img {
+  aspect-ratio: auto;
+  height: 100%;
+}
+
+.dsrc-card--horizontal-half > .dsrc-card__body {
+  flex: 1 1 50%;
+  justify-content: center;
+}
+
+/* --------------------------------------------------------------------------
+   11.3 --horizontal-tier (1/3 image, 2/3 content - explicit alias)
+   -------------------------------------------------------------------------- */
+
+.dsrc-card--horizontal-tier {
+  flex-direction: row;
+}
+
+.dsrc-card--horizontal-tier > .dsrc-card__header {
+  order: 0;
+  flex: 0 0 33.333%;
+  max-width: 33.333%;
+}
+
+.dsrc-card--horizontal-tier > .dsrc-card__header .dsrc-card__img {
+  aspect-ratio: auto;
+  height: 100%;
+}
+
+.dsrc-card--horizontal-tier > .dsrc-card__body {
+  flex: 1 1 66.666%;
+  justify-content: center;
+}
+
+/* --------------------------------------------------------------------------
+   11.4 Responsive: horizontal cards stack on mobile
+   -------------------------------------------------------------------------- */
+
+@media (max-width: 767px) {
+  .dsrc-card--horizontal,
+  .dsrc-card--horizontal-half,
+  .dsrc-card--horizontal-tier {
+    flex-direction: column;
+  }
+
+  .dsrc-card--horizontal > .dsrc-card__header,
+  .dsrc-card--horizontal-half > .dsrc-card__header,
+  .dsrc-card--horizontal-tier > .dsrc-card__header {
+    flex: none;
+    max-width: 100%;
+    order: -1;
+  }
+
+  .dsrc-card--horizontal > .dsrc-card__header .dsrc-card__img,
+  .dsrc-card--horizontal-half > .dsrc-card__header .dsrc-card__img,
+  .dsrc-card--horizontal-tier > .dsrc-card__header .dsrc-card__img {
+    aspect-ratio: 3 / 2;
+    height: auto;
+  }
+
+  .dsrc-card--horizontal > .dsrc-card__body,
+  .dsrc-card--horizontal-half > .dsrc-card__body,
+  .dsrc-card--horizontal-tier > .dsrc-card__body {
+    flex: none;
+  }
+}
+
+
+/* ==========================================================================
+   12. CARD WITHOUT IMAGE
+   When there is no .dsrc-card__header, the body spans the full card.
+   No special CSS needed -- flex: 1 on body handles it.
+   Add top padding to content so it is not flush against border.
+   ========================================================================== */
+
+.dsrc-card:not(:has(.dsrc-card__header)) .dsrc-card__content {
+  padding-top: var(--dsrc-spacing-5);
+}
+
+
+/* ==========================================================================
+   13. CARD GRID
+   Auto-responsive grid for multiple cards.
+   ========================================================================== */
+
+.dsrc-card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: var(--dsrc-spacing-5);
+}
+
+.dsrc-card-grid > .dsrc-card {
+  /* Each card stretches to fill the grid cell height */
+  display: flex;
+  flex-direction: column;
+}
+
+.dsrc-card-grid > .dsrc-card > .dsrc-card__body {
+  flex: 1;
+}
+
+
+/* ==========================================================================
+   14. PRINT
+   Strip decorations for print output.
+   ========================================================================== */
+
+@media print {
+  .dsrc-card {
+    box-shadow: none;
+    border: var(--dsrc-border-width-thin) solid var(--dsrc-color-gris-200);
+    break-inside: avoid;
+  }
+
+  .dsrc-card__title a::after {
+    content: " (" attr(href) ")";
+    font-weight: var(--dsrc-font-weight-medium);
+    font-size: var(--dsrc-font-size-caption);
+  }
+}
+
+
+/* ==========================================================================
+   15. HIGH CONTRAST (forced-colors)
+   ========================================================================== */
+
+@media (forced-colors: active) {
+  .dsrc-card {
+    border: 1px solid ButtonText;
+    box-shadow: none;
+  }
+
+  .dsrc-card--shadow {
+    box-shadow: none;
+  }
+
+  .dsrc-card--accent {
+    border-top: 3px solid Highlight;
+  }
+
+  .dsrc-card__title a:focus-visible {
+    outline: 2px solid Highlight;
+  }
+}
+
+
+/* ==========================================================================
+   16. REDUCED MOTION
+   ========================================================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  .dsrc-card {
+    transition: none;
+  }
+}