@cityway/basic-ui 1.0.1

package/lib/assets/styles/scss/cw-ds/_reboot.scss

@@ -0,0 +1,551 @@
+
+@use "@cityway/design-tokens/primitives" as p;
+
+// ============================================
+// REBOOT - Reset CSS
+// ============================================
+// Inspiré de Bootstrap Reboot, Normalize.css et modern-css-reset
+
+// ============================================
+// 1. DOCUMENT & BOX-SIZING
+// ============================================
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+// ============================================
+// 2. ROOT
+// ============================================
+
+:root {
+  // Améliore la lisibilité du texte
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  // Smooth scrolling (optionnel, peut être désactivé pour certains users)
+  @media (prefers-reduced-motion: no-preference) {
+    scroll-behavior: smooth;
+  }
+}
+
+// ============================================
+// 3. BODY
+// ============================================
+
+body {
+  margin: 0;
+  font-family: var(--#{p.$prefix}-body-ff-text, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
+  font-size: var(--#{p.$prefix}-body-fs, 1rem);
+  font-weight:  var(--#{p.$prefix}-body-fw, 400);
+  line-height: var(--#{p.$prefix}-body-lh, 1.5);
+  color: var(--#{p.$prefix}-body-color, #212529);
+  background-color: var(--#{p.$prefix}-body-bg, #fff);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+// ============================================
+// 4. TYPOGRAPHIE
+// ============================================
+
+// Reset des margins pour les headings et paragraphes
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre,
+dl, dd, ol, ul,
+figure, hr {
+  margin: 0;
+  margin-block: 0;
+}
+
+// Headings
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  line-height: 1.2;
+  color: inherit;
+}
+
+h1 { font-size: 2.5rem; }
+h2 { font-size: 2rem; }
+h3 { font-size: 1.75rem; }
+h4 { font-size: 1.5rem; }
+h5 { font-size: 1.25rem; }
+h6 { font-size: 1rem; }
+
+// Paragraphes
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+// Listes
+ol, ul {
+  padding-left: 2rem;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+// Supprimer les styles de liste par défaut
+ol.list-unstyled,
+ul.list-unstyled {
+  list-style: none;
+  padding: 0;
+}
+
+// Description lists
+dt {
+  font-weight: 600;
+}
+
+dd {
+  margin-bottom: 0.5rem;
+  margin-left: 0;
+}
+
+// ============================================
+// 5. LIENS
+// ============================================
+
+a {
+  color: var(--#{p.$prefix}-link-color, #0066cc);
+  text-decoration: var(--#{p.$prefix}-link-decoration, underline);
+  background-color: transparent;
+
+  &:hover {
+    color: var(--#{p.$prefix}-link-hover, #0052a3);
+    text-decoration: none;
+  }
+}
+
+// Liens sans href
+a:not([href]):not([class]) {
+  &,
+  &:hover {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+// ============================================
+// 6. CODE
+// ============================================
+
+pre,
+code,
+kbd,
+samp {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.875em;
+}
+
+pre {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  font-size: 0.875rem;
+
+  code {
+    font-size: inherit;
+    color: inherit;
+    word-break: normal;
+  }
+}
+
+code {
+  font-size: 0.875em;
+  color: var(--code-color, #d63384);
+  word-wrap: break-word;
+}
+
+kbd {
+  padding: 0.1875rem 0.375rem;
+  font-size: 0.875em;
+  color: var(--kbd-color, #fff);
+  background-color: var(--kbd-bg, #212529);
+  border-radius: 0.25rem;
+
+  kbd {
+    padding: 0;
+    font-size: 1em;
+  }
+}
+
+// ============================================
+// 7. IMAGES ET MÉDIAS
+// ============================================
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  vertical-align: middle;
+}
+
+img {
+  border-style: none;
+}
+
+svg {
+  overflow: hidden;
+}
+
+// ============================================
+// 8. TABLEAUX
+// ============================================
+
+table {
+  caption-side: bottom;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+caption {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  text-align: left;
+}
+
+th {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+// ============================================
+// 9. FORMULAIRES
+// ============================================
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+// Styles du bouton
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  appearance: none;
+  -webkit-appearance: none;
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+  background-color: transparent;
+  background-image: none;
+
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+}
+
+// Reset du style natif pour les boutons
+button {
+  border: none;
+  padding: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+
+  &::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+}
+
+// Input
+input[type="text"],
+input[type="email"],
+input[type="url"],
+input[type="password"],
+input[type="number"],
+input[type="date"],
+input[type="datetime-local"],
+input[type="month"],
+input[type="search"],
+input[type="tel"],
+input[type="time"],
+input[type="week"],
+select,
+textarea {
+  width: 100%;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--input-color, #212529);
+  background-color: var(--input-bg, #fff);
+  background-clip: padding-box;
+  border: 1px solid var(--input-border-color, #dee2e6);
+  appearance: none;
+  border-radius: 0.375rem;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+// Textarea
+textarea {
+  resize: vertical;
+  min-height: 6rem;
+}
+
+// Placeholder
+::placeholder {
+  color: var(--placeholder-color, #6c757d);
+  opacity: 1;
+}
+
+// Désactiver le spinner pour les inputs number
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+input[type="search"] {
+  outline-offset: -2px;
+  -webkit-appearance: textfield;
+
+  &::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+}
+
+// File input
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+// Fieldset
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  float: left;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 0.5rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: inherit;
+
+  + * {
+    clear: left;
+  }
+}
+
+// Label
+label {
+  display: inline-block;
+  margin-bottom: 0.5rem;
+}
+
+// ============================================
+// 10. ÉLÉMENTS INTERACTIFS
+// ============================================
+
+// Summary (details)
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+// Progress
+progress {
+  vertical-align: baseline;
+}
+
+// Disabled
+[disabled],
+[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+// Hidden
+[hidden] {
+  display: none !important;
+}
+
+// ============================================
+// 11. AUTRES ÉLÉMENTS
+// ============================================
+
+// HR
+hr {
+  margin: 1rem 0;
+  color: inherit;
+  border: 0;
+  border-top: 1px solid currentColor;
+  opacity: 0.25;
+}
+
+// Blockquote
+blockquote {
+  margin: 0 0 1rem;
+  padding-left: 1rem;
+  border-left: 0.25rem solid var(--border-color, #dee2e6);
+}
+
+// Abbr
+abbr[title] {
+  text-decoration: underline dotted;
+  cursor: help;
+  text-decoration-skip-ink: none;
+}
+
+// Mark
+mark {
+  padding: 0.1875em;
+  background-color: var(--mark-bg, #fcf8e3);
+  color: var(--mark-color, inherit);
+}
+
+// Small
+small {
+  font-size: 0.875em;
+}
+
+// Sub et Sup
+sub,
+sup {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+// ============================================
+// 12. ACCESSIBILITÉ
+// ============================================
+
+// Respecter les préférences d'animation
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+// Skip links pour l'accessibilité
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: #000;
+  color: white;
+  padding: 8px;
+  text-decoration: none;
+  z-index: 100;
+
+  &:focus {
+    top: 0;
+  }
+}
+
+// ============================================
+// 13. PRINT
+// ============================================
+
+@media print {
+  *,
+  *::before,
+  *::after {
+    text-shadow: none !important;
+    box-shadow: none !important;
+  }
+
+  a:not(.btn) {
+    text-decoration: underline;
+  }
+
+  abbr[title]::after {
+    content: " (" attr(title) ")";
+  }
+
+  pre {
+    white-space: pre-wrap !important;
+    border: 1px solid #adb5bd;
+    page-break-inside: avoid;
+  }
+
+  thead {
+    display: table-header-group;
+  }
+
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+
+  // Hide elements not needed in print
+  .no-print {
+    display: none !important;
+  }
+}

package/lib/assets/styles/scss/cw-ds/_root-bo.scss

@@ -0,0 +1,9 @@
+@use "sass:map";
+@use "@cityway/design-tokens/primitives" as p;
+@use "@cityway/design-tokens/functions" as f;
+@use "@cityway/design-tokens/theme-mapping" as tm;
+
+:root, [data-cw-theme=cw-bo] {
+  @include tm.generate-theme-colors(tm.$theme-bo-colors);
+  @include tm.generate-theme-props(tm.$theme-bo-props);
+}

package/lib/assets/styles/scss/cw-ds/_root-fo.scss

@@ -0,0 +1,9 @@
+@use "sass:map";
+@use "@cityway/design-tokens/primitives" as p;
+@use "@cityway/design-tokens/functions" as f;
+@use "@cityway/design-tokens/theme-mapping" as tm;
+
+:root, [data-cw-theme=cw-fo] {
+  @include tm.generate-theme-colors(tm.$theme-fo-colors);
+  @include tm.generate-theme-props(tm.$theme-fo-props);
+}

package/lib/assets/styles/scss/cw-ds/components/_alert.scss

@@ -0,0 +1,76 @@
+@use "sass:map";
+@use "@cityway/design-tokens/primitives" as p;
+@use "@cityway/design-tokens/functions" as *;
+
+.alert {
+  --#{p.$prefix}-alert-color: #{color(base, "black")};
+  --#{p.$prefix}-alert-bg-color: #{color(base, "white")};
+
+  display: flex;
+  align-items: center;
+  gap: size(md);
+  padding: size(md);
+  font-size: font(fs, xs);
+  line-height: font(lh, xs);
+  color: var(--#{p.$prefix}-alert-color);
+  border-radius: var(--#{p.$prefix}-border-radius);
+  background-color: var(--#{p.$prefix}-alert-bg-color);
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+
+    a {
+      color: currentColor;
+    }
+  }
+
+  .btn-close {
+    align-self: flex-start;
+
+    &:hover, &:active {
+      color: #{color(base, disabled)};
+    }
+  }
+}
+
+// MIXIN - Variantes
+// ---------------------------------
+@mixin alert-variants($variants) {
+  @each $variant, $colors in $variants {
+    .alert-#{$variant} {
+      --#{p.$prefix}-alert-bg-color: #{map.get($colors, surface)};
+      --#{p.$prefix}-alert-color: #{map.get($colors, text)};
+    }
+  }
+}
+
+// Variables
+// ---------------------------------
+$alert: (
+  info: (
+    surface: var(--cw-info-light),
+    text: var(--cw-body-color)
+  ),
+  success: (
+    surface: var(--cw-success-light),
+    text: var(--cw-body-color)
+  ),
+  warning: (
+    surface: var(--cw-warning-light),
+    text: var(--cw-body-color)
+  ),
+  danger: (
+    surface: var(--cw-danger-light),
+    text: var(--cw-body-color)
+  ),
+  light: (
+    surface: var(--cw-light-light),
+    text: var(--cw-body-color)
+  )
+);
+
+// Générer toutes les variantes
+// ---------------------------------
+@include alert-variants($alert);