@dsrc-cm/core 0.1.0

package/src/components/translate/translate.css

@@ -0,0 +1,356 @@
+/**
+ * DSRC Translate (Language Selector) Component
+ *
+ * Cameroon is officially bilingual (French/English). This component
+ * provides language switching for all government websites.
+ *
+ * Usage (inline):
+ * <nav class="dsrc-translate" role="navigation" aria-label="Choix de la langue">
+ *   <ul class="dsrc-translate__list">
+ *     <li>
+ *       <a href="/fr" class="dsrc-translate__btn" aria-current="true" lang="fr" hreflang="fr">
+ *         Francais
+ *       </a>
+ *     </li>
+ *     <li class="dsrc-translate__separator" aria-hidden="true"></li>
+ *     <li>
+ *       <a href="/en" class="dsrc-translate__btn" lang="en" hreflang="en">
+ *         English
+ *       </a>
+ *     </li>
+ *   </ul>
+ * </nav>
+ *
+ * Compact variant (FR | EN):
+ * <nav class="dsrc-translate dsrc-translate--compact" role="navigation" aria-label="Choix de la langue">
+ *   <ul class="dsrc-translate__list">
+ *     <li>
+ *       <a href="/fr" class="dsrc-translate__btn" aria-current="true" lang="fr" hreflang="fr">FR</a>
+ *     </li>
+ *     <li class="dsrc-translate__separator" aria-hidden="true"></li>
+ *     <li>
+ *       <a href="/en" class="dsrc-translate__btn" lang="en" hreflang="en">EN</a>
+ *     </li>
+ *   </ul>
+ * </nav>
+ *
+ * Dropdown variant:
+ * <nav class="dsrc-translate dsrc-translate--dropdown" role="navigation" aria-label="Choix de la langue">
+ *   <button class="dsrc-translate__trigger" aria-expanded="false" aria-controls="translate-panel">
+ *     FR
+ *     <span class="dsrc-translate__chevron" aria-hidden="true"></span>
+ *   </button>
+ *   <ul class="dsrc-translate__panel" id="translate-panel" role="menu">
+ *     <li role="none">
+ *       <a href="/fr" class="dsrc-translate__option" role="menuitem" aria-current="true" lang="fr" hreflang="fr">
+ *         Francais
+ *       </a>
+ *     </li>
+ *     <li role="none">
+ *       <a href="/en" class="dsrc-translate__option" role="menuitem" lang="en" hreflang="en">
+ *         English
+ *       </a>
+ *     </li>
+ *   </ul>
+ * </nav>
+ */
+
+/* ----------------------------------------------------------------
+   Base container
+   ---------------------------------------------------------------- */
+
+.dsrc-translate {
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-small);
+  position: relative;
+}
+
+/* ----------------------------------------------------------------
+   Inline language list
+   ---------------------------------------------------------------- */
+
+.dsrc-translate__list {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* ----------------------------------------------------------------
+   Language button (link)
+   ---------------------------------------------------------------- */
+
+.dsrc-translate__btn {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--dsrc-spacing-1) var(--dsrc-spacing-2);
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-small);
+  font-weight: var(--dsrc-font-weight-medium);
+  color: var(--dsrc-color-gris-600);
+  text-decoration: none;
+  border-radius: var(--dsrc-radius-default);
+  border: var(--dsrc-border-width-default) solid transparent;
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    color var(--dsrc-transition-duration-fast) ease,
+    background-color var(--dsrc-transition-duration-fast) ease,
+    border-color var(--dsrc-transition-duration-fast) ease;
+}
+
+.dsrc-translate__btn:hover {
+  color: var(--dsrc-color-noir);
+  background-color: var(--dsrc-color-gris-50);
+}
+
+.dsrc-translate__btn:active {
+  color: var(--dsrc-color-noir);
+  background-color: var(--dsrc-color-gris-100);
+}
+
+/* Focus ring */
+.dsrc-translate__btn:focus-visible {
+  outline: var(--dsrc-outline-width) solid var(--dsrc-color-primaire-focus);
+  outline-offset: var(--dsrc-outline-offset);
+}
+
+/* Active language indicator */
+.dsrc-translate__btn[aria-current="true"] {
+  color: var(--dsrc-color-primaire);
+  font-weight: var(--dsrc-font-weight-semibold);
+  background-color: var(--dsrc-color-primaire-clair);
+  border-color: var(--dsrc-color-primaire);
+}
+
+.dsrc-translate__btn[aria-current="true"]:hover {
+  color: var(--dsrc-color-primaire-fonce);
+  background-color: var(--dsrc-color-primaire-clair);
+}
+
+/* ----------------------------------------------------------------
+   Separator (pipe between languages)
+   ---------------------------------------------------------------- */
+
+.dsrc-translate__separator {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--dsrc-spacing-1);
+  color: var(--dsrc-color-gris-400);
+  user-select: none;
+}
+
+.dsrc-translate__separator::before {
+  content: '|';
+}
+
+/* ----------------------------------------------------------------
+   Compact variant (FR | EN)
+   ---------------------------------------------------------------- */
+
+.dsrc-translate--compact .dsrc-translate__btn {
+  font-size: var(--dsrc-font-size-caption);
+  padding: var(--dsrc-spacing-1) var(--dsrc-spacing-1);
+  font-weight: var(--dsrc-font-weight-semibold);
+  letter-spacing: var(--dsrc-font-letter-spacing-wide);
+  text-transform: uppercase;
+}
+
+.dsrc-translate--compact .dsrc-translate__separator {
+  font-size: var(--dsrc-font-size-caption);
+  padding: 0 2px;
+}
+
+/* ----------------------------------------------------------------
+   Dropdown variant
+   ---------------------------------------------------------------- */
+
+.dsrc-translate--dropdown {
+  display: inline-flex;
+}
+
+/* Hide the inline list inside dropdown variant */
+.dsrc-translate--dropdown .dsrc-translate__list {
+  display: none;
+}
+
+/* Trigger button */
+.dsrc-translate__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dsrc-spacing-1);
+  padding: var(--dsrc-spacing-1) var(--dsrc-spacing-2);
+  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-600);
+  background: none;
+  border: var(--dsrc-border-width-default) solid var(--dsrc-color-gris-200);
+  border-radius: var(--dsrc-radius-default);
+  cursor: pointer;
+  white-space: nowrap;
+  letter-spacing: var(--dsrc-font-letter-spacing-wide);
+  transition:
+    color var(--dsrc-transition-duration-fast) ease,
+    background-color var(--dsrc-transition-duration-fast) ease,
+    border-color var(--dsrc-transition-duration-fast) ease;
+}
+
+.dsrc-translate__trigger:hover {
+  color: var(--dsrc-color-noir);
+  background-color: var(--dsrc-color-gris-50);
+  border-color: var(--dsrc-color-gris-400);
+}
+
+.dsrc-translate__trigger:active {
+  background-color: var(--dsrc-color-gris-100);
+}
+
+.dsrc-translate__trigger:focus-visible {
+  outline: var(--dsrc-outline-width) solid var(--dsrc-color-primaire-focus);
+  outline-offset: var(--dsrc-outline-offset);
+}
+
+/* Expanded state */
+.dsrc-translate__trigger[aria-expanded="true"] {
+  color: var(--dsrc-color-noir);
+  border-color: var(--dsrc-color-primaire);
+}
+
+/* Chevron icon (CSS triangle) */
+.dsrc-translate__chevron {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: rotate(45deg);
+  transition: transform var(--dsrc-transition-duration-fast) ease;
+  margin-top: -2px;
+}
+
+.dsrc-translate__trigger[aria-expanded="true"] .dsrc-translate__chevron {
+  transform: rotate(-135deg);
+  margin-top: 2px;
+}
+
+/* Dropdown panel */
+.dsrc-translate__panel {
+  display: none;
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: var(--dsrc-spacing-1);
+  min-width: 160px;
+  list-style: none;
+  padding: var(--dsrc-spacing-1) 0;
+  background-color: var(--dsrc-color-blanc);
+  border: var(--dsrc-border-width-thin) solid var(--dsrc-color-gris-200);
+  border-radius: var(--dsrc-radius-default);
+  box-shadow: var(--dsrc-shadow-md);
+  z-index: var(--dsrc-z-index-tooltip);
+}
+
+/* Show panel when trigger is expanded */
+.dsrc-translate__trigger[aria-expanded="true"] + .dsrc-translate__panel {
+  display: block;
+}
+
+/* Dropdown option */
+.dsrc-translate__option {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--dsrc-spacing-2) var(--dsrc-spacing-3);
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-small);
+  font-weight: var(--dsrc-font-weight-medium);
+  color: var(--dsrc-color-noir);
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background-color var(--dsrc-transition-duration-fast) ease,
+    color var(--dsrc-transition-duration-fast) ease;
+}
+
+.dsrc-translate__option:hover {
+  background-color: var(--dsrc-color-gris-50);
+}
+
+.dsrc-translate__option:active {
+  background-color: var(--dsrc-color-gris-100);
+}
+
+.dsrc-translate__option:focus-visible {
+  outline: var(--dsrc-outline-width) solid var(--dsrc-color-primaire-focus);
+  outline-offset: calc(-1 * var(--dsrc-outline-offset));
+}
+
+/* Active language in dropdown */
+.dsrc-translate__option[aria-current="true"] {
+  color: var(--dsrc-color-primaire);
+  font-weight: var(--dsrc-font-weight-semibold);
+  background-color: var(--dsrc-color-primaire-clair);
+}
+
+.dsrc-translate__option[aria-current="true"]:hover {
+  background-color: var(--dsrc-color-primaire-clair);
+  color: var(--dsrc-color-primaire-fonce);
+}
+
+/* ----------------------------------------------------------------
+   Integration with header (.dsrc-entete__actions)
+   ---------------------------------------------------------------- */
+
+.dsrc-entete__actions .dsrc-translate {
+  flex-shrink: 0;
+}
+
+.dsrc-entete__actions .dsrc-translate__btn {
+  font-size: var(--dsrc-font-size-caption);
+}
+
+.dsrc-entete__actions .dsrc-translate__separator {
+  font-size: var(--dsrc-font-size-caption);
+}
+
+/* ----------------------------------------------------------------
+   Responsive: adapt for mobile
+   ---------------------------------------------------------------- */
+
+@media (max-width: 47.999em) {
+  /* In the header, switch to compact sizing */
+  .dsrc-entete__actions .dsrc-translate__btn {
+    padding: var(--dsrc-spacing-1) var(--dsrc-spacing-1);
+  }
+
+  .dsrc-entete__actions .dsrc-translate__separator {
+    padding: 0 2px;
+  }
+
+  /* Dropdown panel: full width in narrow contexts */
+  .dsrc-translate--dropdown .dsrc-translate__panel {
+    right: 0;
+    left: auto;
+    min-width: 140px;
+  }
+}
+
+
+/* ==========================================================================
+   REDUCED MOTION
+   ========================================================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  .dsrc-translate__btn,
+  .dsrc-translate__trigger,
+  .dsrc-translate__option {
+    transition: none;
+  }
+
+  .dsrc-translate__chevron {
+    transition: none;
+  }
+}

package/src/components/upload/upload.css

@@ -0,0 +1,185 @@
+/**
+ * DSRC Upload Component
+ *
+ * Usage:
+ * <div class="dsrc-upload">
+ *   <label class="dsrc-upload__label" for="file">
+ *     <span class="dsrc-upload__icon">&#x1F4CE;</span>
+ *     <span class="dsrc-upload__text">Glissez un fichier ou cliquez</span>
+ *     <span class="dsrc-upload__hint">PDF, JPG — 10 Mo max</span>
+ *   </label>
+ *   <input type="file" id="file" class="dsrc-upload__input">
+ * </div>
+ */
+
+.dsrc-upload {
+  margin-bottom: var(--dsrc-spacing-4);
+}
+
+.dsrc-upload__label {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--dsrc-spacing-2);
+  padding: var(--dsrc-spacing-6) var(--dsrc-spacing-4);
+  border: 2px dashed var(--dsrc-color-gris-200);
+  border-radius: var(--dsrc-radius-default);
+  background-color: var(--dsrc-color-gris-50);
+  cursor: pointer;
+  text-align: center;
+  transition: border-color var(--dsrc-transition-duration-fast) ease, background-color var(--dsrc-transition-duration-fast) ease;
+}
+
+.dsrc-upload__label:hover {
+  border-color: var(--dsrc-color-primaire);
+  background-color: var(--dsrc-color-primaire-clair);
+}
+
+.dsrc-upload__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.dsrc-upload__input:focus-visible + .dsrc-upload__label,
+.dsrc-upload__input:focus + .dsrc-upload__label {
+  outline: var(--dsrc-outline-width) solid var(--dsrc-color-primaire-focus);
+  outline-offset: var(--dsrc-outline-offset);
+}
+
+.dsrc-upload__icon {
+  font-size: var(--dsrc-font-size-h2);
+}
+
+.dsrc-upload__text {
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-small);
+  font-weight: var(--dsrc-font-weight-medium);
+  color: var(--dsrc-color-primaire);
+}
+
+.dsrc-upload__hint {
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-caption);
+  color: var(--dsrc-color-gris-600);
+}
+
+.dsrc-upload--dragging .dsrc-upload__label {
+  border-color: var(--dsrc-color-primaire);
+  background-color: var(--dsrc-color-primaire-clair);
+}
+
+.dsrc-upload--error .dsrc-upload__label {
+  border-color: var(--dsrc-color-erreur-bordure);
+}
+
+.dsrc-upload--disabled .dsrc-upload__label {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.dsrc-upload__files {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsrc-spacing-2);
+  margin-top: var(--dsrc-spacing-3);
+}
+
+.dsrc-upload__file {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--dsrc-spacing-2) var(--dsrc-spacing-3);
+  background-color: var(--dsrc-color-gris-50);
+  border-radius: var(--dsrc-radius-default);
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-caption);
+}
+
+.dsrc-upload__file-remove {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--dsrc-color-erreur-texte);
+  font-size: var(--dsrc-font-size-small);
+  padding: var(--dsrc-spacing-1);
+}
+
+.dsrc-upload__file-remove:hover {
+  color: var(--dsrc-color-erreur-bordure);
+}
+
+.dsrc-upload__file-remove:focus-visible {
+  outline: var(--dsrc-outline-width) solid var(--dsrc-color-primaire-focus);
+  outline-offset: var(--dsrc-outline-offset);
+}
+
+.dsrc-upload__file-remove:active {
+  opacity: 0.8;
+}
+
+
+/* ============================================
+ * High contrast (forced-colors)
+ * ============================================ */
+
+@media (forced-colors: active) {
+  .dsrc-upload__label {
+    border: 2px dashed ButtonText;
+  }
+
+  .dsrc-upload--dragging .dsrc-upload__label {
+    border-color: Highlight;
+  }
+
+  .dsrc-upload--error .dsrc-upload__label {
+    border-color: LinkText;
+  }
+
+  .dsrc-upload--disabled .dsrc-upload__label {
+    border-color: GrayText;
+    color: GrayText;
+    opacity: 1;
+  }
+
+  .dsrc-upload__file-remove:focus-visible {
+    outline: 2px solid Highlight;
+  }
+}
+
+
+/* ============================================
+ * Upload progress bar
+ *
+ * <div class="dsrc-upload__progress">
+ *   <div class="dsrc-upload__progress-bar" style="width: 60%"
+ *        role="progressbar" aria-valuenow="60"
+ *        aria-valuemin="0" aria-valuemax="100">
+ *   </div>
+ * </div>
+ * ============================================ */
+
+.dsrc-upload__progress {
+  width: 100%;
+  height: 4px;
+  background-color: var(--dsrc-color-gris-200);
+  border-radius: 2px;
+  overflow: hidden;
+  margin-top: var(--dsrc-spacing-2);
+}
+
+.dsrc-upload__progress-bar {
+  height: 100%;
+  background-color: var(--dsrc-color-primaire);
+  border-radius: 2px;
+  transition: width var(--dsrc-transition-duration-normal) ease;
+}
+
+.dsrc-upload--error .dsrc-upload__progress-bar {
+  background-color: var(--dsrc-color-erreur-bordure);
+}

package/src/index.css

@@ -0,0 +1,77 @@
+/**
+ * DSRC - Design Systeme de la Republique du Cameroun
+ * @version 0.2.0
+ * @license MIT
+ *
+ * Paix, Travail, Patrie
+ */
+
+/* Tokens */
+@import '@dsrc/tokens/css';
+
+/* Base reset */
+@import './base/reset.css';
+
+/* Print stylesheet */
+@import './base/print.css';
+
+/* Layout components */
+@import './layout/grid/grid.css';
+@import './layout/bandeau/bandeau.css';
+@import './layout/entete/entete.css';
+@import './layout/navigation/navigation.css';
+@import './layout/hero/hero.css';
+@import './layout/main/main.css';
+@import './layout/footer/footer.css';
+
+/* Core components */
+@import './components/button/button.css';
+@import './components/badge/badge.css';
+@import './components/alert/alert.css';
+@import './components/input/input.css';
+@import './components/label/label.css';
+@import './components/card/card.css';
+@import './components/link/link.css';
+@import './components/tile/tile.css';
+@import './components/notice/notice.css';
+@import './components/breadcrumb/breadcrumb.css';
+@import './components/table/table.css';
+@import './components/accordion/accordion.css';
+@import './components/search/search.css';
+@import './components/select/select.css';
+@import './components/upload/upload.css';
+@import './components/pagination/pagination.css';
+@import './components/spinner/spinner.css';
+@import './components/logo/logo.css';
+@import './components/download/download.css';
+
+/* Form components */
+@import './components/checkbox/checkbox.css';
+@import './components/radio/radio.css';
+@import './components/toggle/toggle.css';
+@import './components/password/password.css';
+@import './components/range/range.css';
+
+/* Content components */
+@import './components/tag/tag.css';
+@import './components/callout/callout.css';
+@import './components/highlight/highlight.css';
+@import './components/quote/quote.css';
+@import './components/tab/tab.css';
+
+/* Navigation components */
+@import './components/stepper/stepper.css';
+@import './components/sidemenu/sidemenu.css';
+@import './components/summary/summary.css';
+
+/* Overlay components */
+@import './components/modal/modal.css';
+@import './components/tooltip/tooltip.css';
+@import './components/consent/consent.css';
+@import './components/dropdown/dropdown.css';
+
+/* Header utilities */
+@import './components/translate/translate.css';
+
+/* Utility classes (loaded last for highest cascade priority) */
+@import './utilities/utilities.css';

package/src/layout/bandeau/bandeau.css

@@ -0,0 +1,44 @@
+/**
+ * DSRC Bandeau Component
+ *
+ * Usage:
+ * <div class="dsrc-bandeau">
+ *   Republique du Cameroun - Paix, Travail, Patrie
+ * </div>
+ */
+
+.dsrc-bandeau {
+  background-color: var(--dsrc-color-primaire);
+  color: rgba(255, 255, 255, 0.85);
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-micro);
+  text-align: center;
+  padding: var(--dsrc-spacing-2) var(--dsrc-spacing-5);
+  letter-spacing: var(--dsrc-font-letter-spacing-wide);
+}
+
+/* Tricolore variant - decorative stripe */
+.dsrc-tricolore {
+  display: flex;
+  height: var(--dsrc-spacing-1);
+  opacity: 0.25;
+  border-radius: var(--dsrc-radius-small);
+  overflow: hidden;
+  max-width: var(--dsrc-layout-max-width);
+  margin: 0 auto var(--dsrc-spacing-6);
+}
+
+.dsrc-tricolore__vert {
+  flex: 1;
+  background-color: var(--dsrc-color-drapeau-vert);
+}
+
+.dsrc-tricolore__rouge {
+  flex: 1;
+  background-color: var(--dsrc-color-drapeau-rouge);
+}
+
+.dsrc-tricolore__jaune {
+  flex: 1;
+  background-color: var(--dsrc-color-drapeau-jaune);
+}