@cityway/basic-ui 1.0.1 → 1.0.2-beta001

package/lib/assets/styles/scss/cw-ds/components/button/_button-fo-variant.scss

@@ -7,104 +7,38 @@
 // ---------------------------------
 $buttons: (
   primary: (
-    surface: var(--cw-primary),
-    text: var(--cw-primary-contrasted),
-    border: var(--cw-primary),
-    surface-hover: var(--cw-primary-hover),
-    text-hover: var(--cw-primary-contrasted),
-    border-hover: var(--cw-primary-hover),
-    surface-disabled: var(--cw-disabled),
-    text-disabled: var(--cw-disabled-contrasted),
-    border-disabled: var(--cw-disabled),
+    surface: var(--#{p.$prefix}-primary),
+    text: var(--#{p.$prefix}-primary-contrasted),
+    border: var(--#{p.$prefix}-primary),
+    surface-hover: var(--#{p.$prefix}-primary-hover),
+    text-hover: var(--#{p.$prefix}-primary-contrasted),
+    border-hover: var(--#{p.$prefix}-primary-hover),
+    surface-disabled: var(--#{p.$prefix}-disabled),
+    text-disabled: var(--#{p.$prefix}-disabled-contrasted),
+    border-disabled: var(--#{p.$prefix}-disabled),
   ),
   secondary: (
-    surface: var(--cw-primary-contrasted),
-    text: var(--cw-primary),
-    border: var(--cw-primary),
-    surface-hover: var(--cw-primary-contrasted),
-    text-hover: var(--cw-primary-hover),
-    border-hover: var(--cw-primary-hover),
-    surface-disabled: var(--cw-disabled-contrasted),
-    text-disabled: var(--cw-disabled),
-    border-disabled: var(--cw-disabled),
+    surface: var(--#{p.$prefix}-primary-contrasted),
+    text: var(--#{p.$prefix}-primary),
+    border: var(--#{p.$prefix}-primary),
+    surface-hover: var(--#{p.$prefix}-primary-contrasted),
+    text-hover: var(--#{p.$prefix}-primary-hover),
+    border-hover: var(--#{p.$prefix}-primary-hover),
+    surface-disabled: var(--#{p.$prefix}-disabled-contrasted),
+    text-disabled: var(--#{p.$prefix}-disabled),
+    border-disabled: var(--#{p.$prefix}-disabled),
   ),
   link: (
     surface: transparent,
-    text: var(--cw-primary),
+    text: var(--#{p.$prefix}-primary),
     border: transparent,
     surface-hover: transparent,
-    text-hover: var(--cw-primary-hover),
+    text-hover: var(--#{p.$prefix}-primary-hover),
     border-hover: transparent,
     surface-disabled: transparent,
-    text-disabled: var(--cw-disabled),
+    text-disabled: var(--#{p.$prefix}-disabled),
     border-disabled: transparent,
   ),
-  info: (
-    surface: var(--cw-info),
-    text: var(--cw-info-contrasted),
-    border: var(--cw-info),
-    surface-hover: var(--cw-info-hover),
-    text-hover: var(--cw-info-contrasted),
-    border-hover: var(--cw-info-hover),
-    surface-disabled: var(--cw-disabled),
-    text-disabled: var(--cw-disabled-contrasted),
-    border-disabled: var(--cw-disabled),
-  ),
-  success: (
-    surface: var(--cw-success),
-    text: var(--cw-success-contrasted),
-    border: var(--cw-success),
-    surface-hover: var(--cw-success-hover),
-    text-hover: var(--cw-success-contrasted),
-    border-hover: var(--cw-success-hover),
-    surface-disabled: var(--cw-disabled),
-    text-disabled: var(--cw-disabled-contrasted),
-    border-disabled: var(--cw-disabled),
-  ),
-  warning: (
-    surface: var(--cw-warning),
-    text: var(--cw-warning-contrasted),
-    border: var(--cw-warning),
-    surface-hover: var(--cw-warning-hover),
-    text-hover: var(--cw-warning-contrasted),
-    border-hover: var(--cw-warning-hover),
-    surface-disabled: var(--cw-disabled),
-    text-disabled: var(--cw-disabled-contrasted),
-    border-disabled: var(--cw-disabled),
-  ),
-  danger: (
-    surface: var(--cw-danger),
-    text: var(--cw-danger-contrasted),
-    border: var(--cw-danger),
-    surface-hover: var(--cw-danger-hover),
-    text-hover: var(--cw-danger-contrasted),
-    border-hover: var(--cw-danger-hover),
-    surface-disabled: var(--cw-disabled),
-    text-disabled: var(--cw-disabled-contrasted),
-    border-disabled: var(--cw-disabled),
-  ),
-  danger-outline: (
-    surface: var(--cw-danger-contrasted),
-    text: var(--cw-danger),
-    border: var(--cw-danger),
-    surface-hover: var(--cw-danger-contrasted),
-    text-hover: var(--cw-danger-hover),
-    border-hover: var(--cw-danger-hover),
-    surface-disabled: var(--cw-disabled-contrasted),
-    text-disabled: var(--cw-disabled),
-    border-disabled: var(--cw-disabled),
-  ),
-  light: (
-    surface: var(--cw-light),
-    text: var(--cw-light-contrasted),
-    border: var(--cw-light),
-    surface-hover: var(--cw-light-hover),
-    text-hover: var(--cw-light-contrasted),
-    border-hover: var(--cw-light-hover),
-    surface-disabled: var(--cw-disabled),
-    text-disabled: var(--cw-disabled-contrasted),
-    border-disabled: var(--cw-disabled),
-  ),
 );
 
 // Générer toutes les variantes

package/lib/assets/styles/scss/cw-ds/components/button/_button.scss

@@ -5,17 +5,23 @@
 .btn {
   --#{p.$prefix}-btn-padding-x: #{size(2xl)};
   --#{p.$prefix}-btn-padding-y: #{size(sm)};
-  --#{p.$prefix}-btn-color: #{color(base, "dark")};
+  --#{p.$prefix}-btn-min-width: 17rem;
+
   --#{p.$prefix}-btn-bg: #{color(base, "white")};
+  --#{p.$prefix}-btn-color: #{color(base, "dark")};
+
   --#{p.$prefix}-btn-fs: #{font(fs, md)};
   --#{p.$prefix}-btn-lh: #{font(lh, md)};
   --#{p.$prefix}-btn-fw: #{font(fw, semibold)};
+
   --#{p.$prefix}-btn-border-color: #{color(base, "white")};
   --#{p.$prefix}-btn-border-width: #{size(5xs)};
   --#{p.$prefix}-btn-br: var(--#{p.$prefix}-border-radius-input);
+
   --#{p.$prefix}-btn-hover-color: #{color(base, "dark")};
   --#{p.$prefix}-btn-hover-bg: #{color(base, "white")};
   --#{p.$prefix}-btn-hover-border-color: #{color(base, "white")};
+
   --#{p.$prefix}-btn-disabled-color: #{color(base, "white")};
   --#{p.$prefix}-btn-disabled-bg: #{color("grey", 700)};
   --#{p.$prefix}-btn-disabled-border-color: #{color("grey", 700)};
@@ -50,6 +56,10 @@
     border-color: var(--#{p.$prefix}-btn-disabled-bg);
   }
 
+  &.btn-min-width {
+    min-width: var(--#{p.$prefix}-btn-min-width);
+  }
+
   &-link {
     text-decoration: underline;
     &:hover, &:active {

package/lib/assets/styles/scss/cw-ds/components/tab/_tab-bo.scss

@@ -0,0 +1,96 @@
+@use "sass:map";
+@use "@cityway/design-tokens/primitives" as p;
+@use "@cityway/design-tokens/functions" as *;
+
+.tab {
+  --#{p.$prefix}-tab-padding: #{size(sm)} #{size(lg)};
+  --#{p.$prefix}-tab-bg: var(--#{p.$prefix}-base-white);
+  --#{p.$prefix}-tab-fs: #{font(fs, sm)};
+
+  h2,.h2 {
+    margin: 0;
+    padding: var(--#{p.$prefix}-tab-padding);
+    border-bottom: 1px solid #{color('grey', 200)};
+  }
+
+  .tab-items {
+    list-style: none;
+    margin: 0;
+    padding: #{size(2xs)} 0;
+  }
+
+  .tab-link {
+    padding: var(--#{p.$prefix}-tab-padding);
+    color: var(--#{p.$prefix}-primary);
+    font-size: var(--#{p.$prefix}-tab-fs);
+    font-weight: font(fw, semibold);
+    text-decoration: none;
+    border: 0;
+
+    &:hover,
+    &:active {
+      color: var(--#{p.$prefix}-primary-hover);
+    }
+
+    &.active {
+      color: var(--#{p.$prefix}-body-color);
+
+      &:hover,
+      &:active {
+        color: inherit;
+      }
+    }
+  }
+}
+
+.tab-card {
+  @extend .tab;
+
+  --#{p.$prefix}-tab-br: #{border(br, xs)};
+  --#{p.$prefix}-tab-bs: #{border(bs, md)};
+
+  margin-bottom: size(lg);
+  border-radius: var(--#{p.$prefix}-tab-br);
+  box-shadow: var(--#{p.$prefix}-tab-bs);
+  background-color: var(--#{p.$prefix}-tab-bg);
+
+  .tab-items {
+    gap: size(md);
+  }
+}
+
+.tab-basic {
+  @extend .tab;
+
+  --#{p.$prefix}-tab-br: #{border(br, xs)} #{border(br, xs)} 0 0;
+  --#{p.$prefix}-tab-bs: 0 #{size(md)} 0 #fff,
+  #{border(bs, md)};
+
+  .tab-items {
+    gap: size(lg);
+  }
+
+  .tab-link {
+    border-radius: 0;
+
+    &.active {
+      border-radius: var(--#{p.$prefix}-tab-br);
+      box-shadow: var(--#{p.$prefix}-tab-bs);
+      background-color: var(--#{p.$prefix}-tab-bg);
+    }
+  }
+}
+
+.tab-content-basic {
+  --#{p.$prefix}-tab-content-bg: var(--#{p.$prefix}-base-white);
+  --#{p.$prefix}-tab-content-br: #{border(br, md)};
+  --#{p.$prefix}-tab-content-bs: #{border(bs, md)};
+  --#{p.$prefix}-tab-content-padding-y: #{size(md)};
+  --#{p.$prefix}-tab-content-padding-x: #{size(md)};
+
+  padding: var(--#{p.$prefix}-tab-content-padding-y) var(--#{p.$prefix}-tab-content-padding-x);
+
+  border-radius: var(--#{p.$prefix}-tab-content-br);
+  box-shadow: var(--#{p.$prefix}-tab-content-bs);
+  background-color: var(--#{p.$prefix}-tab-content-bg);
+}

package/lib/assets/styles/scss/cw-ds/components/{_tab.scss → tab/_tab-fo.scss}

@@ -6,6 +6,8 @@
 .tab {
   --#{p.$prefix}-tab-fs: #{font(fs, md)};
 
+  margin-bottom: size(xl);
+
   &-default-xl {
     --#{p.$prefix}-tab-fs: #{font(fs, xl)};
   }
@@ -25,7 +27,7 @@
       width: 100%;
       height: size(3xs);
       border-radius: 100rem;
-      background-color: var(--cw-base-white);
+      background-color: var(--#{p.$prefix}-base-white);
     }
   }
 
@@ -50,12 +52,12 @@
     &.active,
     &:active,
     &:hover {
-      background-color: var(--cw-base-white);
+      background-color: var(--#{p.$prefix}-base-white);
     }
 
     &:active,
     &:hover {
-      color: var(--cw-primary);
+      color: var(--#{p.$prefix}-primary);
     }
 
     &.active {
@@ -74,7 +76,7 @@
         width: 100%;
         height: size(3xs);
         border-radius: border(br, round);
-        background-color: var(--cw-primary);
+        background-color: var(--#{p.$prefix}-primary);
       }
     }
   }

package/lib/assets/styles/scss/cw-ds/helpers/_skeleton.scss

@@ -0,0 +1,67 @@
+@use "sass:map";
+@use "@cityway/design-tokens/primitives" as p;
+@use "@cityway/design-tokens/functions" as *;
+
+@keyframes sk-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.skeleton {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  max-width: 50%;
+  min-height: 16px;
+
+  background-color: #e8e8e8 !important;
+
+  /* Masquer le contenu sans casser le layout */
+  color: transparent !important;
+  -webkit-text-fill-color: transparent !important;
+  pointer-events: none;
+  user-select: none;
+
+  /* Cacher les enfants (textes, icônes…) */
+  * {
+    visibility: hidden !important;
+  }
+
+  /* Cacher les images sans les retirer du flux */
+  img,
+  picture,
+  svg {
+    opacity: 0 !important;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+
+    background: linear-gradient(90deg,
+        transparent,
+        rgba(255, 255, 255, 0.6),
+        transparent);
+
+    transform: translateX(-100%);
+    animation: sk-shimmer 1.4s infinite;
+  }
+
+  &.btn,
+  &.badge {
+    display: inline-flex;
+    max-width: 100%;
+    min-width: 5rem;
+    padding: 0;
+  }
+
+  &.btn {
+    min-width: 7rem;
+  }
+
+  &.form-control {
+    border: 0;
+  }
+}

package/lib/assets/styles/scss/cw-ds/helpers/_spinner.scss

@@ -3,17 +3,17 @@
 @use "@cityway/design-tokens/functions" as *;
 
 .spinner-border {
-  --#{p.$prefix}spinner-width: #{size(3xl)};
-  --#{p.$prefix}spinner-height: #{size(3xl)};
-  --#{p.$prefix}spinner-border-width: #{size(4xs)};
+  --#{p.$prefix}-spinner-width: #{size(3xl)};
+  --#{p.$prefix}-spinner-height: #{size(3xl)};
+  --#{p.$prefix}-spinner-border-width: #{size(4xs)};
 
   display: inline-block;
   flex-shrink: 0;
-  width: var(--#{p.$prefix}spinner-width);
-  height: var(--#{p.$prefix}spinner-height);
+  width: var(--#{p.$prefix}-spinner-width);
+  height: var(--#{p.$prefix}-spinner-height);
   vertical-align: -0.125em;
 
-  border: var(--#{p.$prefix}spinner-border-width) solid currentcolor;
+  border: var(--#{p.$prefix}-spinner-border-width) solid var(--#{p.$prefix}-primary);
   border-right-color: transparent;
   border-radius: 50%;
   animation: 0.75s linear infinite spinner-border;
@@ -24,7 +24,13 @@
 }
 
 .spinner-border-sm {
-  --#{p.$prefix}spinner-width: #{size(lg)};
-  --#{p.$prefix}spinner-height: #{size(lg)};
-  --#{p.$prefix}spinner-border-width: 0.188rem;
+  --#{p.$prefix}-spinner-width: #{size(lg)};
+  --#{p.$prefix}-spinner-height: #{size(lg)};
+  --#{p.$prefix}-spinner-border-width: 0.188rem;
+}
+
+.spinner-border-lg {
+  --#{p.$prefix}-spinner-width: #{size(7xl)};
+  --#{p.$prefix}-spinner-height: #{size(7xl)};
+  --#{p.$prefix}-spinner-border-width: 0.5rem;
 }

package/lib/assets/styles/scss/cw-ds/mixins/_type.scss

@@ -24,4 +24,21 @@
       font-weight: font(fw, $key);
     }
   }
+
+  // Font color (text)
+  $text-colors: (
+    info: info,
+    success: success,
+    warning: warning,
+    danger: danger,
+    primary: primary,
+    secondary: secondary,
+    light: disabled
+  );
+
+  @each $key, $value in $text-colors {
+    .text-#{$key} {
+      color: var(--#{p.$prefix}-#{$value});
+    }
+  }
 }

package/lib/assets/styles/scss/cw-ds/utilities/_breakpoints.scss

@@ -0,0 +1,30 @@
+
+@use "sass:map";
+@use "@cityway/design-tokens/primitives" as p;
+
+@mixin media-breakpoint-up($name) {
+  $min: map.get(p.$grid, "breakpoints", $name);
+
+  @if $min and $min != 0 {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else if $min == 0 {
+    // Pour 'xs', on n'enveloppe pas dans une media query (Mobile First)
+    @content;
+  } @else {
+    @warn "Le breakpoint '#{$name}' n'existe pas dans p.$grid.";
+  }
+}
+
+@mixin media-breakpoint-down($name) {
+  $breakpoint-value: map.get(p.$grid, "breakpoints", $name);
+  @if $breakpoint-value and $breakpoint-value != 0 {
+    // On retire 0.02px pour éviter les conflits de précision sur les écrans Retina
+    @media (max-width: ($breakpoint-value - 0.02px)) {
+      @content;
+    }
+  } @else {
+    @warn "Le breakpoint '#{$name}' n'est pas valide pour un down (ou est à 0).";
+  }
+}

package/lib/assets/styles/scss/cw-ds/utilities/_flex.scss

@@ -7,6 +7,10 @@
   display: flex;
 }
 
+.d-flex-h {
+  align-items: center;
+}
+
 .d-flex-v {
   flex-direction: column;
 }

package/lib/assets/styles/scss/cw-ds/utilities/_grid.scss

@@ -0,0 +1,65 @@
+@use "sass:map";
+@use "@cityway/design-tokens/primitives" as p;
+
+// --- Mixins de Breakpoints ---
+@mixin media-breakpoint-up($name) {
+  $min: map.get(p.$grid, "breakpoints", $name);
+  @if $min and $min != 0 {
+    @media (min-width: $min) { @content; }
+  } @else {
+    @content;
+  }
+}
+
+// --- Container ---
+.container, .container-fluid {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  // Utilise la gutter de ta map colonnes
+  padding-right: var(--#{p.$prefix}-columns-gutter);
+  padding-left: var(--#{p.$prefix}-columns-gutter);
+}
+
+.container {
+  width: 100%;
+  margin-inline: auto;
+  padding-inline: var(--#{p.$prefix}-columns-gutter);
+
+  @each $bp, $value in map.get(p.$grid, "breakpoints") {
+    @if $value > 0 {
+      @include media-breakpoint-up($bp) {
+        max-width: calc(#{$value} - (var(--#{p.$prefix}-columns-gutter) * 2));
+      }
+    }
+  }
+}
+
+// --- Row & Columns (Grid) ---
+.row {
+  display: grid;
+  grid-template-columns: repeat(var(--#{p.$prefix}-columns-number), 1fr);
+  gap: var(--#{p.$prefix}-columns-gutter);
+}
+
+[class^="col-"] {
+  grid-column: span var(--#{p.$prefix}-columns-number);
+}
+
+// --- Générateur de colonnes et offsets ---
+@each $name, $width in map.get(p.$grid, "breakpoints") {
+  @include media-breakpoint-up($name) {
+    @for $i from 1 through map.get(p.$grid, "columns", "number") {
+      .col-#{$name}-#{$i} {
+        grid-column: span #{$i};
+      }
+      .offset-#{$name}-#{$i} {
+        grid-column-start: #{$i + 1};
+      }
+    }
+    // Reset offset
+    .offset-#{$name}-0 {
+      grid-column-start: auto;
+    }
+  }
+}

package/lib/assets/styles/scss/cw-ds/utilities/type/_type-bo.scss

@@ -0,0 +1,40 @@
+@use "@cityway/design-tokens/primitives" as p;
+@use "@cityway/design-tokens/functions" as *;
+@use "type" as mixin;
+
+// Variables
+// ---------------------------------
+$heading: (
+  h1: (
+    ff: var(--#{p.$prefix}-body-ff-heading),
+    fw: font(fw, normal),
+    fs: font(fs, xl),
+    lh: font(lh, xl),
+    color: var(--#{p.$prefix}-body-color)
+  ),
+  h2: (
+    ff: var(--#{p.$prefix}-body-ff-heading),
+    fw: font(fw, normal),
+    fs: font(fs, xl),
+    lh: font(lh, xl),
+    color: var(--#{p.$prefix}-body-color)
+  ),
+  h3: (
+    ff: var(--#{p.$prefix}-body-ff-heading),
+    fw: font(fw, normal),
+    fs: font(fs, lg),
+    lh: font(lh, lg),
+    color: var(--#{p.$prefix}-base-disabled)
+  ),
+  h4: (
+    ff: var(--#{p.$prefix}-body-ff-heading),
+    fw: font(fw, bold),
+    fs: font(fs, md),
+    lh: font(lh, md),
+    color: var(--#{p.$prefix}-body-color)
+  )
+);
+
+// Générer toutes les variantes
+// ---------------------------------
+@include mixin.heading-variants($heading);

package/lib/assets/styles/scss/cw-ds/utilities/type/_type-fo.scss

@@ -0,0 +1 @@
+

package/lib/assets/styles/scss/cw-ds/utilities/type/_type.scss

@@ -0,0 +1,18 @@
+@use "sass:map";
+@use "../../mixins/type" as *;
+
+@include generate-type-utilities();
+
+// MIXIN - Variantes
+// ---------------------------------
+@mixin heading-variants($variants) {
+  @each $tag, $props in $variants {
+    #{$tag}, .#{$tag} {
+      font-family: #{map.get($props, ff)};
+      font-weight: #{map.get($props, fw)};
+      font-size: #{map.get($props, fs)};
+      line-height: #{map.get($props, lh)};
+      color: #{map.get($props, color)};
+    }
+  }
+}

package/lib/assets/styles/scss/styles-bo.scss

@@ -1,18 +1,13 @@
 @use "cw-ds/reboot";
 @use "cw-ds/root-bo";
 
-// Utilities
-@use "cw-ds/utilities/flex";
-@use "cw-ds/utilities/spacing";
-@use "cw-ds/utilities/type";
-@use "cw-ds/utilities/alignment";
-
 // Helpers
 @use "cw-ds/helpers/visually-hidden";
 @use "cw-ds/helpers/stretched-link";
 @use "cw-ds/helpers/spinner";
 
 // Components
+@use "cw-ds/components/accordion";
 @use "cw-ds/components/button/button";
 @use "cw-ds/components/button/button-bo-variant";
 @use "cw-ds/components/badge";
@@ -23,10 +18,23 @@
 @use "cw-ds/components/close";
 @use "cw-ds/components/btn-collapse";
 @use "cw-ds/components/card";
-@use "cw-ds/components/tab";
+@use "cw-ds/components/tab/tab-bo";
 @use "cw-ds/components/stepper";
 @use "cw-ds/components/file-to-download";
 @use "cw-ds/components/numerical-range";
+@use "cw-ds/components/modal";
+
+// Utilities
+@use "cw-ds/utilities/breakpoints";
+@use "cw-ds/utilities/grid";
+@use "cw-ds/utilities/flex";
+@use "cw-ds/utilities/spacing";
+@use "cw-ds/utilities/type/type";
+@use "cw-ds/utilities/type/type-bo";
+@use "cw-ds/utilities/alignment";
+
+// En surcharge
+@use "cw-ds/helpers/skeleton";
 
 
 //## Import des variables de couleurs
@@ -75,7 +83,7 @@
 @import "bootstrap/scss/list-group";
 //@import "bootstrap/scss/close";
 //@import "bootstrap/scss/toasts";
-@import "bootstrap/scss/modal";
+//@import "bootstrap/scss/modal";
 @import "bootstrap/scss/tooltip";
 @import "bootstrap/scss/popover";
 //@import "bootstrap/scss/carousel";
@@ -100,8 +108,8 @@
 //## Import des fonts
 //--------------------------------------------------------
 @import "../../fonts/nunito/nunito";
-@import "../../fonts/optyweb/optyweb";
-@import "../../fonts/bo/bo";
+// @import "../../fonts/optyweb/optyweb";
+// @import "../../fonts/bo/bo";
 
 
 //## Import styles