@cityway/basic-ui 1.0.1

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

@@ -0,0 +1,107 @@
+@use "sass:map";
+@use "@cityway/design-tokens/primitives" as p;
+@use "@cityway/design-tokens/functions" as *;
+
+.badge {
+  --#{p.$prefix}-badge-padding-x: #{size(xs)};
+  --#{p.$prefix}-badge-padding-y: #{size(4xs)};
+  --#{p.$prefix}-badge-font-size: #{font(fs, sm)};
+  --#{p.$prefix}-badge-font-weight: #{font(fw, normal)};
+  --#{p.$prefix}-badge-color: #{color(base, "black")};
+  --#{p.$prefix}-badge-bg-color: #{color(base, "white")};
+  --#{p.$prefix}-badge-border-radius: #{border(br, round)};
+
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: size(4xs);
+  padding: size(4xs) size(xs);
+  font-size: font(fs, sm);
+  line-height: font(lh, sm);
+  font-weight: font(fw, normal);
+  color: var(--#{p.$prefix}-badge-color);
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius:  border(br, round);
+  background-color: var(--#{p.$prefix}-badge-bg-color);
+
+  &:empty {
+    display: none;
+  }
+}
+
+// MIXIN - Variantes
+// ---------------------------------
+@mixin badge-variants($type, $variants) {
+  @each $variant, $colors in $variants {
+    .badge-#{$type}-#{$variant} {
+      --#{p.$prefix}-badge-bg-color: #{map.get($colors, surface)};
+      --#{p.$prefix}-badge-color: #{map.get($colors, text)};
+    }
+  }
+}
+
+// Variables
+// ---------------------------------
+$badge-light: (
+  info: (
+    surface: var(--cw-info-light),
+    text: color("grey", 950)
+  ),
+  success: (
+    surface: var(--cw-success-light),
+    text: color("grey", 950)
+  ),
+  warning: (
+    surface: var(--cw-warning-light),
+    text: color("grey", 950)
+  ),
+  danger: (
+    surface: var(--cw-danger-light),
+    text: color("grey", 950)
+  ),
+  light: (
+    surface: var(--cw-light),
+    text: var(--cw-light-contrasted)
+  )
+);
+
+$badge-heavy: (
+  primary: (
+    surface: var(--cw-primary),
+    text: var(--cw-primary-contrasted)
+  ),
+  info: (
+    surface: var(--cw-info),
+    text: var(--cw-info-contrasted)
+  ),
+  success: (
+    surface: var(--cw-success),
+    text: var(--cw-success-contrasted)
+  ),
+  warning: (
+    surface: var(--cw-warning),
+    text: var(--cw-warning-contrasted)
+  ),
+  danger: (
+    surface: var(--cw-danger),
+    text: var(--cw-danger-contrasted)
+  ),
+  dark: (
+    surface: var(--cw-dark),
+    text: var(--cw-dark-contrasted)
+  ),
+  light: (
+    surface: var(--cw-light),
+    text: var(--cw-light-contrasted)
+  ),
+  disabled: (
+    surface: var(--cw-disabled),
+    text: var(--cw-disabled-contrasted)
+  )
+);
+
+// Générer toutes les variantes
+// ---------------------------------
+@include badge-variants("light", $badge-light);
+@include badge-variants("heavy", $badge-heavy);

package/lib/assets/styles/scss/cw-ds/components/_btn-collapse.scss

@@ -0,0 +1,15 @@
+.btn-collapse {
+  display: inline-block;
+  appearance: none;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+
+  &:hover, &:active {
+    color: initial;
+  }
+
+  &.collapsed .icon {
+    transform: rotate(180deg);
+  }
+}

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

@@ -0,0 +1,66 @@
+@use "sass:map";
+@use "@cityway/design-tokens/primitives" as p;
+@use "@cityway/design-tokens/functions" as *;
+
+.card {
+  --#{p.$prefix}-card-padding: #{size(md)};
+  --#{p.$prefix}-card-bg: var(--#{p.$prefix}-base-white);
+  --#{p.$prefix}-card-br: #{border(br, 2xl)};
+  --#{p.$prefix}-card-bs: #{border(bs, md)};
+
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--#{p.$prefix}-card-br);
+  box-shadow: var(--#{p.$prefix}-card-bs);
+  background-color: var(--#{p.$prefix}-card-bg);
+
+  &-header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: size(md);
+    margin: 0;
+    padding: var(--#{p.$prefix}-card-padding);
+
+    h2, .h2, h3, .h3, h4, .h4 {
+      margin: 0;
+    }
+
+    &-collapse {
+      &:hover, &:active &.card-header-collapsed {
+        color:  var(--#{p.$prefix}-primary);
+      }
+    }
+
+    &-custom-area {
+      flex: 1;
+    }
+
+    .btn-collapse {
+      align-self: flex-end;
+    }
+
+    + .card-body {
+      padding-top: 0;
+    }
+  }
+
+  &-body {
+    padding: var(--#{p.$prefix}-card-padding);
+
+    .card {
+      border-radius: calc(var(--#{p.$prefix}-card-br) - 0.25rem);
+    }
+  }
+
+  &-footer {
+    padding: 0 var(--#{p.$prefix}-card-padding) var(--#{p.$prefix}-card-padding) var(--#{p.$prefix}-card-padding);
+  }
+
+  &-light {
+    --#{p.$prefix}-card-bg: var(--#{p.$prefix}-light);
+    --#{p.$prefix}-card-bs: none;
+  }
+}
+
+// TODO comportement des boutons dans le footer

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

@@ -0,0 +1,6 @@
+.btn-close {
+  appearance: none;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+}

package/lib/assets/styles/scss/cw-ds/components/_file-to-download.scss

@@ -0,0 +1,46 @@
+@use "sass:map";
+@use "@cityway/design-tokens/primitives" as p;
+@use "@cityway/design-tokens/functions" as *;
+
+.file-to-download {
+
+  &-items {
+    display: flex;
+    flex-direction: column;
+    gap: size(md);
+    margin-bottom: 0;
+  }
+
+  &-link {
+    display: flex;
+    gap: size(md);
+    align-items: center;
+
+    padding: size(sm) size(md);
+    font-size: font(fs, sm);
+    color: var(--#{p.$prefix}-body-color);
+    text-decoration: none;
+    border-radius: var(--#{p.$prefix}-border-radius);
+    background-color: var(--#{p.$prefix}-base-white);
+    box-shadow: var(--#{p.$prefix}-shadow-default);
+
+    &:hover, &:active, &:active {
+      color: var(--#{p.$prefix}-body-color);
+      .file-to-download-name {
+        color: var(--#{p.$prefix}-primary);
+      }
+    }
+  }
+
+  &-name {
+    flex-grow: 1;
+  }
+
+  &-info {
+    display: flex;
+    gap: size(md);
+    align-items: center;
+    font-size: font(fs, xs);
+    color: var(--#{p.$prefix}-shadow-disabled);
+  }
+}

package/lib/assets/styles/scss/cw-ds/components/_icon-notification.scss

@@ -0,0 +1,30 @@
+@use "sass:map";
+@use "@cityway/design-tokens/primitives" as p;
+@use "@cityway/design-tokens/functions" as *;
+
+.icon-notification {
+  &-info {
+    --#{p.$prefix}-icon-rounded-bg: var(--cw-info);
+    --#{p.$prefix}-icon-rounded-color: var(--cw-info-contrasted);
+  }
+
+  &-success {
+    --#{p.$prefix}-icon-rounded-bg: var(--cw-success);
+    --#{p.$prefix}-icon-rounded-color: var(--cw-success-contrasted);
+  }
+
+  &-warning {
+    --#{p.$prefix}-icon-rounded-bg: var(--cw-warning);
+    --#{p.$prefix}-icon-rounded-color: var(--cw-base-white);
+  }
+
+  &-danger {
+    --#{p.$prefix}-icon-rounded-bg: var(--cw-danger);
+    --#{p.$prefix}-icon-rounded-color: var(--cw-danger-contrasted);
+  }
+
+  &-careful {
+    --#{p.$prefix}-icon-rounded-bg: var(--cw-danger);
+    --#{p.$prefix}-icon-rounded-color: var(--cw-danger-contrasted);
+  }
+}

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

@@ -0,0 +1,112 @@
+@use "sass:map";
+@use "@cityway/design-tokens/primitives" as p;
+@use "@cityway/design-tokens/functions" as *;
+
+// Default
+.icon {
+  --#{p.$prefix}-icon-size: #{size(md)};
+
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  container-type: inline-size;
+  width: var(--#{p.$prefix}-icon-size);
+  height: var(--#{p.$prefix}-icon-size);
+
+  &-span {
+    font-size: 83.3cqi;
+  }
+}
+
+// Rounded
+.icon-rounded {
+  --#{p.$prefix}-icon-rounded-size: #{size(md)};      // Taille du rond
+  --#{p.$prefix}-icon-rounded-bg: var(--cw-base-white); // Couleur de fond
+  --#{p.$prefix}-icon-rounded-color: var(--cw-base-dark);     // Couleur de l'icône
+
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--#{p.$prefix}-icon-rounded-size);
+  height: var(--#{p.$prefix}-icon-rounded-size);
+  border-radius: 50%;
+  background-color: var(--#{p.$prefix}-icon-rounded-bg);
+  color: var(--#{p.$prefix}-icon-rounded-color);
+  flex-shrink: 0;
+}
+
+// MIXIN - Variantes
+// ---------------------------------
+// Default
+@mixin icon-variants($sizes) {
+  @each $key, $value in $sizes {
+    .icon-#{$key} {
+      --#{p.$prefix}-icon-size: #{$value};
+    }
+  }
+}
+
+// Rounded
+@mixin icon-rounded-variants($sizes, $mapping) {
+  @each $rounded-size, $icon-size in $mapping {
+    .icon-rounded-#{$rounded-size} {
+      --#{p.$prefix}-icon-rounded-size: #{map.get($sizes, $rounded-size)};
+
+      // L'icône interne prend automatiquement la taille mappée
+      .icon {
+        --#{p.$prefix}-icon-size: #{map.get($sizes, $icon-size)};
+      }
+    }
+  }
+}
+
+// Variables
+// ---------------------------------
+$icon: (
+  5xl: size(7xl),
+  4xl: size(6xl),
+  3xl: size(4xl),
+  2xl: size(3xl),
+  xl: size(2xl),
+  lg: 1.75rem,
+  md: size(xl),
+  sm: size(lg),
+  xs: size(md),
+  2xs: size(sm),
+  3xs: size(xs)
+);
+
+// Mapping : Taille du rond → Taille de l'icône à l'intérieur
+$icon-rounded-mapping: (
+  5xl: 3xl,  // Rond 5xl → Icône 3xl
+  4xl: 2xl,  // Rond 4xl → Icône 2xl
+  3xl: xl,   // Rond 3xl → Icône xl
+  2xl: lg,   // Rond 2xl → Icône lg
+  xl: md,    // Rond xl → Icône md
+  lg: sm,    // Rond lg → Icône sm
+  md: xs,   // Rond md → Icône xs
+  sm: 2xs,   // Rond sm → Icône 2xs
+  2xs: 3xs  // Rond 2xs → Icône 3xs
+);
+
+// Générer toutes les variantes
+// ---------------------------------
+@include icon-variants($icon);
+@include icon-rounded-variants($icon, $icon-rounded-mapping);
+
+.icon-rounded {
+  &-light {
+    --#{p.$prefix}-icon-rounded-bg: var(--cw-light);
+  }
+
+  &-primary {
+    --#{p.$prefix}-icon-rounded-bg: var(--cw-primary);
+    --#{p.$prefix}-icon-rounded-color: var(--cw-primary-contrasted);
+  }
+
+  &-invert {
+    --#{p.$prefix}-icon-rounded-bg: var(--cw-dark);
+    --#{p.$prefix}-icon-rounded-color: var(--cw-dark-contrasted);
+  }
+}

package/lib/assets/styles/scss/cw-ds/components/_numerical-range.scss

@@ -0,0 +1,60 @@
+@use "sass:map";
+@use "@cityway/design-tokens/primitives" as p;
+@use "@cityway/design-tokens/functions" as *;
+
+.numerical-range {
+  --#{p.$prefix}-range-bg: transparent;
+  --#{p.$prefix}-range-container-bg: var(--cw-base-white);
+
+  display: inline-flex;
+  align-items: center;
+  gap: size(md);
+  border-radius: border(br, round);
+  background-color: var(--#{p.$prefix}-range-bg);
+
+  &-large-grey,
+  &-small-grey,
+  &-default-grey {
+    --#{p.$prefix}-range-bg: var(--cw-light);
+    --#{p.$prefix}-range-container-bg: var(--cw-light);
+  }
+
+  &-large-grey {
+    .numerical-range-label {
+      padding-left: size(md);
+    }
+  }
+
+  &-container {
+    display: flex;
+    align-items: center;
+    gap: size(sm);
+    padding: size(2xs);
+    background-color: var(--#{p.$prefix}-range-container-bg);
+    border-radius: border(br, round);
+  }
+
+  &-wrapper {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: size(2xs);
+  }
+
+  &-amount {
+    font-size: font(fs, md);
+    font-weight: font(fw, bold);
+    color: var(--#{p.$prefix}-body-color);
+    text-align: center;
+  }
+
+  &-label {
+    display: flex;
+    align-items: center;
+    gap: size(4xs);
+
+    font-size: font(fs, md);
+    color: var(--#{p.$prefix}-body-color);
+  }
+}

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

@@ -0,0 +1,78 @@
+@use "sass:map";
+@use "@cityway/design-tokens/primitives" as p;
+@use "@cityway/design-tokens/functions" as *;
+
+.stepper {
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+
+  &-item {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    flex: 1;
+    align-items: center;
+    font-size: font(fs, 2xs);
+    line-height: font(lh, 2xs);
+    color: var(--#{p.$prefix}-base-disabled);
+    text-transform: uppercase;
+
+    &::before {
+      content: "";
+      position: relative;
+      z-index: 2;
+      display: block;
+      width: size(md);
+      height: size(md);
+      margin-bottom: size(2xs);
+      border: 0.3rem solid var(--#{p.$prefix}-base-disabled);
+      background-color: var(--#{p.$prefix}-base-disabled);
+      border-radius: border(br,round);
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: calc(size(md) / 2);
+      z-index: 1;
+      display: block;
+      width: 100%;
+      height: size(4xs);
+      background-color: var(--#{p.$prefix}-base-disabled);
+      transform: translate(50%, -50%);
+    }
+
+    &-completed {
+      color: var(--#{p.$prefix}-primary);
+
+      &::before {
+        border-color: var(--#{p.$prefix}-primary);
+        background-color: var(--#{p.$prefix}-primary);
+      }
+
+      &::after {
+        background-color: var(--#{p.$prefix}-primary);
+      }
+    }
+
+    &-current {
+      color: var(--#{p.$prefix}-primary);
+
+      &::before {
+        border-color: var(--#{p.$prefix}-primary);
+        background-color: var(--#{p.$prefix}-base-white);
+      }
+
+      &::after {
+        background-image: linear-gradient(to right, var(--#{p.$prefix}-primary), var(--#{p.$prefix}-base-disabled));
+      }
+    }
+
+    &:last-child {
+      &::after {
+        content: none;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,81 @@
+@use "sass:map";
+@use "@cityway/design-tokens/primitives" as p;
+@use "@cityway/design-tokens/functions" as *;
+
+
+.tab {
+  --#{p.$prefix}-tab-fs: #{font(fs, md)};
+
+  &-default-xl {
+    --#{p.$prefix}-tab-fs: #{font(fs, xl)};
+  }
+
+  &-items {
+    position: relative;
+    height: size(4xl);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    &::before {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      display: block;
+      width: 100%;
+      height: size(3xs);
+      border-radius: 100rem;
+      background-color: var(--cw-base-white);
+    }
+  }
+
+  &-item {
+    flex: 1;
+    margin-bottom: size(3xs);
+  }
+
+  &-link {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: size(2xs);
+    width: 100%;
+    height: 100%;
+    padding: size(2xs);
+    font-size: var(--#{p.$prefix}-tab-fs);
+    font-weight: font(fw, semibold);
+    border-radius: size(2xs) size(2xs) 0 0;
+
+    &.active,
+    &:active,
+    &:hover {
+      background-color: var(--cw-base-white);
+    }
+
+    &:active,
+    &:hover {
+      color: var(--cw-primary);
+    }
+
+    &.active {
+
+      &:active,
+      &:hover {
+        color: inherit;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: -(size(3xs));
+        z-index: 1;
+        display: block;
+        width: 100%;
+        height: size(3xs);
+        border-radius: border(br, round);
+        background-color: var(--cw-primary);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+@use "sass:map";
+@use "@cityway/design-tokens/functions" as *;
+
+.toast {
+  position: fixed;
+  left: #{size(md)};
+  right: #{size(md)};
+  z-index: 2000; // TODO
+  display: flex;
+  flex-direction: column;
+  gap: #{size(md)};
+  max-width: 100%;
+
+  @media (min-width: 920px) {
+    top: #{size(md)};
+    left: 50%;
+    right: inherit;
+    min-width: 21.25rem;
+    max-width: 25rem;
+    transform: translateX(-50%);
+
+    &.is-absolute {
+      position: absolute;
+      top: inherit;
+    }
+  }
+}

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

@@ -0,0 +1,46 @@
+@use "sass:map";
+@use "@cityway/design-tokens/primitives" as p;
+@use "@cityway/design-tokens/functions" as *;
+@use "button" as mixin;
+
+// Variables
+// ---------------------------------
+$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),
+  ),
+  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),
+  ),
+  link: (
+    surface: transparent,
+    text: var(--cw-primary),
+    border: transparent,
+    surface-hover: transparent,
+    text-hover: var(--cw-primary-hover),
+    border-hover: transparent,
+    surface-disabled: transparent,
+    text-disabled: var(--cw-disabled),
+    border-disabled: transparent,
+  ),
+);
+
+// Générer toutes les variantes
+// ---------------------------------
+@include mixin.button-variants($buttons);