@cityway/basic-ui 1.0.1

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

@@ -0,0 +1,112 @@
+@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,
+  ),
+  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
+// ---------------------------------
+@include mixin.button-variants($buttons);

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

@@ -0,0 +1,95 @@
+@use "sass:map";
+@use "@cityway/design-tokens/primitives" as p;
+@use "@cityway/design-tokens/functions" as *;
+
+.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-bg: #{color(base, "white")};
+  --#{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)};
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: size(2xs);
+  padding: var(--#{p.$prefix}-btn-padding-y) var(--#{p.$prefix}-btn-padding-x);
+
+  font-size: var(--#{p.$prefix}-btn-fs);
+  font-weight: var(--#{p.$prefix}-btn-fw);
+  line-height: var(--#{p.$prefix}-btn-lh);
+  color: var(--#{p.$prefix}-btn-color);
+
+  cursor: pointer;
+  user-select: none;
+  border: var(--#{p.$prefix}-btn-border-width) solid var(--#{p.$prefix}-btn-border-color);
+  border-radius: var(--#{p.$prefix}-btn-br);
+  background-color: var(--#{p.$prefix}-btn-bg);
+  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+
+  &:hover, &:active {
+    color: var(--#{p.$prefix}-btn-hover-color);
+    background-color: var(--#{p.$prefix}-btn-hover-bg);
+    border-color: var(--#{p.$prefix}-btn-hover-border-color);
+  }
+
+  &.disabled, &[disabled], &:disabled {
+    color: var(--#{p.$prefix}-btn-disabled-color);
+    background-color: var(--#{p.$prefix}-btn-disabled-bg);
+    border-color: var(--#{p.$prefix}-btn-disabled-bg);
+  }
+
+  &-link {
+    text-decoration: underline;
+    &:hover, &:active {
+      text-decoration: none;
+    }
+  }
+}
+
+.btn-icon {
+  --#{p.$prefix}-btn-padding-x: 0;
+  --#{p.$prefix}-btn-padding-y: 0;
+
+  &-small {
+    width: size(2xl);
+    height: size(2xl);
+  }
+
+  &-default {
+    width: size(3xl);
+    height: size(3xl);
+  }
+}
+
+
+// MIXIN - Variantes
+// ---------------------------------
+@mixin button-variants($variants) {
+  @each $variant, $colors in $variants {
+    .btn-#{$variant} {
+      --#{p.$prefix}-btn-color: #{map.get($colors, text)};
+      --#{p.$prefix}-btn-bg: #{map.get($colors, surface)};
+      --#{p.$prefix}-btn-border-color: #{map.get($colors, border)};
+
+      --#{p.$prefix}-btn-hover-color:  #{map.get($colors, text-hover)};
+      --#{p.$prefix}-btn-hover-bg: #{map.get($colors, surface-hover)};
+      --#{p.$prefix}-btn-hover-border-color: #{map.get($colors, border-hover)};
+
+      --#{p.$prefix}-btn-disabled-color:  #{map.get($colors, text-disabled)};
+      --#{p.$prefix}-btn-disabled-bg: #{map.get($colors, surface-disabled)};
+      --#{p.$prefix}-btn-disabled-border-color: #{map.get($colors, border-disabled)};
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+@use "sass:map";
+@use "@cityway/design-tokens/primitives" as p;
+@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)};
+
+  display: inline-block;
+  flex-shrink: 0;
+  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-right-color: transparent;
+  border-radius: 50%;
+  animation: 0.75s linear infinite spinner-border;
+}
+
+@keyframes spinner-border {
+  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
+}
+
+.spinner-border-sm {
+  --#{p.$prefix}spinner-width: #{size(lg)};
+  --#{p.$prefix}spinner-height: #{size(lg)};
+  --#{p.$prefix}spinner-border-width: 0.188rem;
+}

package/lib/assets/styles/scss/cw-ds/helpers/_stretched-link.scss

@@ -0,0 +1,9 @@
+.stretched-link::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    content: "";
+}

package/lib/assets/styles/scss/cw-ds/helpers/_visually-hidden.scss

@@ -0,0 +1,18 @@
+.visually-hidden {
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+
+  &:not(caption) {
+    position: absolute !important;
+  }
+
+  * {
+    overflow: hidden !important;
+  }
+}

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

@@ -0,0 +1,16 @@
+@use "@cityway/design-tokens/functions" as f;
+@use "@cityway/design-tokens/primitives" as p;
+
+@mixin color-with-rgb($name, $hex) {
+  --#{$name}: #{$hex};
+  --#{$name}-rgb: #{f.hex-to-rgb($hex)};
+}
+
+@mixin generate-color-vars($category-name, $shades-map) {
+  @each $shade, $value in $shades-map {
+    @if type-of($value) == 'color' {
+      $var-name: #{p.$prefix}-#{$category-name}-#{$shade};
+      @include color-with-rgb($var-name, $value);
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+@use "sass:map";
+@use "@cityway/design-tokens/primitives" as p;
+@use "@cityway/design-tokens/functions" as *;
+
+@mixin generate-flex-system() {
+  @each $key, $value in p.$sizing {
+    .gap-#{$key} {
+      gap: size($key);
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+// @use "sass:map";
+// @use '../variables/primitives' as p;
+// @use '../variables/tokens' as *;
+
+// @mixin generate-variables($desktop-map, $mobile-map, $variable, $rwd: false) {
+//   :root {
+//     @if ($rwd) {
+//       @each $key, $value in map.get($mobile-map, $variable) {
+//         --#{p.$prefix}-#{$variable}-#{$key}: #{$value};
+//       }
+
+//       // Desktop override
+//       @media (min-width: 992px) {
+//         @each $key, $value in map.get($desktop-map, $variable) {
+//           --#{p.$prefix}-#{$variable}-#{$key}: #{$value};
+//         }
+//       }
+//     }
+
+//     @else {
+//       @each $key, $value in map.get($desktop-map, $variable) {
+//         --#{p.$prefix}-#{$variable}-#{$key}: #{$value};
+//       }
+//     }
+//   }
+// }

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

@@ -0,0 +1,84 @@
+@use "sass:map";
+@use "@cityway/design-tokens/primitives" as p;
+@use "@cityway/design-tokens/functions" as *;
+
+// Sapcing
+@mixin generate-spacing-utilities() {
+  @each $key, $value in p.$sizing {
+    .p-#{$key} {
+      padding: size($key);
+    }
+
+    .pt-#{$key} {
+      padding-top: size($key);
+    }
+
+    .pe-#{$key} {
+      padding-right: size($key);
+    }
+
+    .pb-#{$key} {
+      padding-bottom: size($key);
+    }
+
+    .ps-#{$key} {
+      padding-left: size($key);
+    }
+
+    .px-#{$key} {
+      padding-left: size($key);
+      padding-right: size($key);
+    }
+
+    .py-#{$key} {
+      padding-top: size($key);
+      padding-bottom: size($key);
+    }
+
+    // Margin
+    .m-#{$key} {
+      margin: size($key);
+    }
+
+    .mt-#{$key} {
+      margin-top: size($key);
+    }
+
+    .me-#{$key} {
+      margin-right: size($key);
+    }
+
+    .mb-#{$key} {
+      margin-bottom: size($key);
+    }
+
+    .ms-#{$key} {
+      margin-left:size($key);
+    }
+
+    .mx-#{$key} {
+      margin-left: size($key);
+      margin-right: size($key);
+    }
+
+    .my-#{$key} {
+      margin-top: size($key);
+      margin-bottom: size($key);
+    }
+  }
+
+  // Margin auto
+  .m-auto {
+    margin: auto;
+  }
+
+  .mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+}

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

@@ -0,0 +1,27 @@
+@use "sass:map";
+@use "@cityway/design-tokens/primitives" as p;
+@use "@cityway/design-tokens/functions" as *;
+
+
+
+@mixin generate-type-utilities() {
+
+  // Font Size (fs) avec Line Height associé
+  @each $key, $value in map.get(p.$font, fs) {
+    .fs-#{$key} {
+      font-size: font(fs, $key);
+
+      // Ajouter line-height si elle existe pour cette taille
+      @if map.has-key(map.get(p.$font, lh), $key) {
+        line-height: font(lh, $key);
+      }
+    }
+  }
+
+  // Font Weight (fw)
+  @each $key, $value in map.get(p.$font, fw) {
+    .fw-#{$key} {
+      font-weight: font(fw, $key);
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+@use "sass:map";
+
+// MIXIN - Variantes
+// ---------------------------------
+@mixin alignent-variants($variants) {
+  @each $variant, $alignent in $variants {
+    .text-#{$variant} {
+      text-align: $alignent;
+    }
+  }
+}
+
+// Variables
+// ---------------------------------
+$align: (
+  start: left,
+  end: right,
+  center: center
+);
+
+// Générer toutes les variantes
+// ---------------------------------
+@include alignent-variants($align);

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

@@ -0,0 +1,96 @@
+@use "../mixins/flex" as *;
+
+@include generate-flex-system();
+
+.d-flex-h,
+.d-flex-v {
+  display: flex;
+}
+
+.d-flex-v {
+  flex-direction: column;
+}
+
+.d-inline-flex {
+  display: inline-flex;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+.justify-evenly {
+  justify-content: space-evenly;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.items-end {
+  align-items: flex-end;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.items-baseline {
+  align-items: baseline;
+}
+
+.items-stretch {
+  align-items: stretch;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.flex-auto {
+  flex: 1 1 auto;
+}
+
+.flex-none {
+  flex: none;
+}

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

@@ -0,0 +1,3 @@
+@use "../mixins/spacing" as *;
+
+@include generate-spacing-utilities();

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

@@ -0,0 +1,3 @@
+@use "../mixins/type" as *;
+
+@include generate-type-utilities();

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

@@ -0,0 +1,115 @@
+@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/button/button";
+@use "cw-ds/components/button/button-bo-variant";
+@use "cw-ds/components/badge";
+@use "cw-ds/components/icon";
+@use "cw-ds/components/icon-notification";
+@use "cw-ds/components/alert";
+@use "cw-ds/components/toast";
+@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/stepper";
+@use "cw-ds/components/file-to-download";
+@use "cw-ds/components/numerical-range";
+
+
+//## Import des variables de couleurs
+//--------------------------------------------------------
+//@import "scss/variables-colors";
+
+//## Import de bootstrap contrôlé
+//--------------------------------------------------------
+//@import "bootstrap";
+@import "bootstrap/scss/mixins/banner";
+@include bsBanner("");
+
+
+// scss-docs-start import-stack
+// Configuration
+@import "bootstrap/scss/functions";
+@import "variables/custom";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+
+// Layout & components
+@import "bootstrap/scss/root";
+//@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/forms";
+//@import "bootstrap/scss/buttons";
+//@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+//@import "bootstrap/scss/nav";
+//@import "bootstrap/scss/navbar";
+//@import "bootstrap/scss/card";
+@import "bootstrap/scss/accordion";
+//@import "bootstrap/scss/breadcrumb";
+//@import "bootstrap/scss/pagination";
+//@import "bootstrap/scss/badge";
+//@import "bootstrap/scss/alert";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/list-group";
+//@import "bootstrap/scss/close";
+//@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/popover";
+//@import "bootstrap/scss/carousel";
+//@import "bootstrap/scss/offcanvas";
+//@import "bootstrap/scss/placeholders";
+
+// Helpers
+//@import "bootstrap/scss/helpers";
+
+// Utilities
+@import "bootstrap/scss/utilities/api";
+// scss-docs-end import-stack
+
+//## Mixins
+//--------------------------------------------------------
+//@import "mixins/utilities";
+
+//## Import des variables propres au site
+//--------------------------------------------------------
+@import "variables/site";
+
+//## Import des fonts
+//--------------------------------------------------------
+@import "../../fonts/nunito/nunito";
+@import "../../fonts/optyweb/optyweb";
+@import "../../fonts/bo/bo";
+
+
+//## Import styles
+//--------------------------------------------------------
+@import "custom-bootstrap";
+@import "components";
+
+// Tools
+//--------------------------------------------------------
+//@import "tools/loader";
+//@import "tools/focus";