@cityway/basic-ui 1.0.2-beta001 → 1.0.2

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

@@ -1,35 +0,0 @@
-@use "sass:map";
-@use "@cityway/design-tokens/primitives" as p;
-@use "@cityway/design-tokens/functions" as *;
-
-.accordion {
-  --#{p.$prefix}-accordion-gap: #{size(md)};
-
-  display: flex;
-  flex-direction: column;
-  gap: var(--#{p.$prefix}-accordion-gap);
-
-  cw-card {
-    .card {
-      border-radius: 0;
-    }
-
-    &:only-child {
-      .card {
-        border-radius: var(--#{p.$prefix}-card-br);
-      }
-    }
-
-    &:first-child:not(:only-child) {
-      .card {
-        border-radius: var(--#{p.$prefix}-card-br) 0 0;
-      }
-    }
-
-    &:last-child:not(:only-child) {
-      .card {
-        border-radius: 0 0 var(--#{p.$prefix}-card-br) var(--#{p.$prefix}-card-br);
-      }
-    }
-  }
-}

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

@@ -1,161 +0,0 @@
-@use "sass:map";
-@use "@cityway/design-tokens/primitives" as p;
-@use "@cityway/design-tokens/functions" as *;
-
-.open-modal {
-  overflow: hidden;
-  padding-right: 15px;
-}
-
-.modal {
-  --#{p.$prefix}-modal-zindex: 1055;
-  --#{p.$prefix}-modal-width: 500px;
-  --#{p.$prefix}-modal-padding: #{size(md)};
-  --#{p.$prefix}-modal-margin: 0.5rem;
-  --#{p.$prefix}-modal-color: var(--#{p.$prefix}-body-color);
-  --#{p.$prefix}-modal-bg: var(--#{p.$prefix}-body-bg);
-
-  --#{p.$prefix}-modal-border-color: transparent;
-  --#{p.$prefix}-modal-border-width: 0;
-
-  --#{p.$prefix}-modal-border-radius: var(--#{p.$prefix}-border-radius);
-  --#{p.$prefix}-modal-box-shadow: var(--#{p.$prefix}-shadow-default);
-
-  --#{p.$prefix}-modal-inner-border-radius: calc(var(--#{p.$prefix}-border-radius-lg) - (var(--#{p.$prefix}-border-width)));
-
-  --#{p.$prefix}-modal-sub-border-color: #{color("grey", 100)};
-  --#{p.$prefix}-modal-sub-border-width: 0.063rem;
-
-  --#{p.$prefix}-modal-title-fw: #{font(fw, bold)};
-  --#{p.$prefix}-modal-title-fs: #{font(fs, xl)};
-  --#{p.$prefix}-modal-title-lh: #{font(lh, xl)};
-  --#{p.$prefix}-modal-title-color: #{font(fl, xl)};
-
-  --#{p.$prefix}-modal-footer-gap: #{size(2xs)};
-  --#{p.$prefix}-modal-footer-align: center;
-  --#{p.$prefix}-modal-footer-bg: ;
-  --#{p.$prefix}-modal-footer-border-color: var(--#{p.$prefix}-border-color);
-  --#{p.$prefix}-modal-footer-border-width: var(--#{p.$prefix}-border-width);
-
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: var(--#{p.$prefix}-modal-zindex);
-  display: none;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  outline: 0;
-
-  &-dialog {
-    position: relative;
-    width: auto;
-    margin: var(--#{p.$prefix}-modal-margin);
-    pointer-events: none;
-  }
-
-  &-content {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    color: var(--#{p.$prefix}-modal-color);
-    pointer-events: auto;
-    background-color: var(--#{p.$prefix}-modal-bg);
-    background-clip: padding-box;
-    border: var(--#{p.$prefix}-modal-border-width) solid var(--#{p.$prefix}-modal-border-color);
-    border-radius: var(--#{p.$prefix}-modal-border-radius);
-    outline: 0;
-  }
-
-  &-header {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    padding: var(--#{p.$prefix}-modal-padding);
-    border-bottom: var(--#{p.$prefix}-modal-sub-border-width) solid var(--#{p.$prefix}-modal-sub-border-color);
-    border-top-left-radius: var(--#{p.$prefix}-modal-inner-border-radius);
-    border-top-right-radius: var(--#{p.$prefix}-modal-inner-border-radius);
-
-    cw-button {
-      display: inline-flex;
-    }
-  }
-
-  &-inner-backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-  }
-
-  &-title {
-    flex-grow: 1;
-    margin-bottom: 0;
-    font-size: var(--#{p.$prefix}-modal-title-fs);
-    line-height: var(--#{p.$prefix}-modal-title-lh);
-    font-weight: var(--#{p.$prefix}-modal-title-fw);
-    color: var(--#{p.$prefix}-modal-title-color);
-  }
-
-  &-body {
-    position: relative;
-    flex: 1 1 auto;
-    padding: var(--#{p.$prefix}-modal-padding);
-    font-size: font(fs, md-rwd);
-  }
-
-  &-footer {
-    display: flex;
-    flex-shrink: 0;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--#{p.$prefix}-modal-footer-gap);
-    justify-content: var(--#{p.$prefix}-modal-footer-align);
-    padding: var(--#{p.$prefix}-modal-padding);
-    background-color: var(--#{p.$prefix}-modal-footer-bg);
-    border-top: var(--#{p.$prefix}-modal-footer-border-width) solid var(--#{p.$prefix}-modal-footer-border-color);
-    border-bottom-right-radius: var(--#{p.$prefix}-modal-inner-border-radius);
-    border-bottom-left-radius: var(--#{p.$prefix}-modal-inner-border-radius);
-  }
-
-  &-backdrop {
-    --#{p.$prefix}-backdrop-zindex: 1050;
-    --#{p.$prefix}-backdrop-bg: #000;
-    --#{p.$prefix}-backdrop-opacity: 0.5;
-
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: var(--#{p.$prefix}-backdrop-zindex);
-    width: 100vw;
-    height: 100vh;
-    background-color: var(--#{p.$prefix}-backdrop-bg);
-  }
-
-  &-backdrop.fade {
-    opacity: 0;
-  }
-
-  &-backdrop.show {
-    opacity: var(--#{p.$prefix}-backdrop-opacity);
-  }
-}
-
-.modal-sm {
-  width: 18.75rem;
-}
-.modal-md {
-  width: 31.25rem;
-}
-.modal-lg {
-  width: 50rem;
-}
-.modal-xl {
-  width: 71.25rem;
-}
-

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

@@ -1,96 +0,0 @@
-@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/helpers/_skeleton.scss

@@ -1,67 +0,0 @@
-@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/utilities/_breakpoints.scss

@@ -1,30 +0,0 @@
-
-@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/_grid.scss

@@ -1,65 +0,0 @@
-@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

@@ -1,40 +0,0 @@
-@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

@@ -1 +0,0 @@
-

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

@@ -1,18 +0,0 @@
-@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)};
-    }
-  }
-}