@cityway/basic-ui 1.0.2-beta001 → 1.0.2

package/lib/assets/fonts/nunito/_nunito.scss

@@ -1,39 +1,39 @@
 @font-face {
   font-family: "Nunito";
-  src: url("/assets/fonts/nunito/nunito-light.woff") format("woff"),
-    url("/assets/fonts/nunito/nunito-light.woff2") format("woff2");
+  src: url("./lib/assets/fonts/nunito/nunito-light.woff") format("woff"),
+    url("./lib/assets/fonts/nunito/nunito-light.woff2") format("woff2");
   font-weight: 300;
   font-style: normal;
 }
 
 @font-face {
   font-family: "Nunito";
-  src: url("/assets/fonts/nunito/nunito-regular.woff") format("woff"),
-    url("/assets/fonts/nunito/nunito-regular.woff2") format("woff2");
+  src: url("./lib/assets/fonts/nunito/nunito-regular.woff") format("woff"),
+    url("./lib/assets/fonts/nunito/nunito-regular.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: "Nunito";
-  src: url("/assets/fonts/nunito/nunito-semi-bold.woff") format("woff"),
-    url("/assets/fonts/nunito/nunito-semi-bold.woff2") format("woff2");
+  src: url("./lib/assets/fonts/nunito/nunito-semi-bold.woff") format("woff"),
+    url("./lib/assets/fonts/nunito/nunito-semi-bold.woff2") format("woff2");
   font-weight: 600;
   font-style: normal;
 }
 
 @font-face {
   font-family: "Nunito";
-  src: url("/assets/fonts/nunito/nunito-bold.woff") format("woff"),
-    url("/assets/fonts/nunito/nunito-bold.woff2") format("woff2");
+  src: url("./lib/assets/fonts/nunito/nunito-bold.woff") format("woff"),
+    url("./lib/assets/fonts/nunito/nunito-bold.woff2") format("woff2");
   font-weight: 700;
   font-style: normal;
 }
 
 @font-face {
   font-family: "Nunito";
-  src: url("/assets/fonts/nunito/nunito-extrabold.woff") format("woff"),
-    url("/assets/fonts/nunito/nunito-extrabold.woff2") format("woff2");
+  src: url("./lib/assets/fonts/nunito/nunito-extrabold.woff") format("woff"),
+    url("./lib/assets/fonts/nunito/nunito-extrabold.woff2") format("woff2");
   font-weight: 800;
   font-style: normal;
 }

package/lib/assets/styles/scss/_custom-bootstrap.scss

@@ -11,7 +11,7 @@
 @import "bootstrap/forms";
 @import "bootstrap/input-group";
 @import "bootstrap/lists";
-//@import "bootstrap/modal";
+@import "bootstrap/modal";
 @import "bootstrap/pagination";
 @import "bootstrap/popover";
 @import "bootstrap/progress";

package/lib/assets/styles/scss/bootstrap/_breadcrumb.scss

@@ -16,12 +16,12 @@
     align-items: baseline;
     color: var(--bs-grey9);
 
-    // + .breadcrumb-item {
-    //   &::before {
-    //     font-family: $cw-font-transinfo;
-    //     font-size: 0.75rem;
-    //   }
-    // }
+    + .breadcrumb-item {
+      &::before {
+        font-family: $cw-font-transinfo;
+        font-size: 0.75rem;
+      }
+    }
 
     // Breadcrumb h1 title
     h1 {

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

@@ -64,21 +64,29 @@ figure, hr {
 // Headings
 h1, h2, h3, h4, h5, h6 {
   margin-top: 0;
-  margin-bottom: 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: 0;
+  margin-top: 0;
+  margin-bottom: 1rem;
 }
 
 // Listes
 ol, ul {
   padding-left: 2rem;
-  margin-bottom: 0;
+  margin-bottom: 1rem;
 }
 
 ol ol,

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

@@ -4,7 +4,6 @@
 @use "@cityway/design-tokens/theme-mapping" as tm;
 
 :root, [data-cw-theme=cw-bo] {
-  @include tm.generate-grid-vars(p.$grid);
   @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

@@ -4,7 +4,6 @@
 @use "@cityway/design-tokens/theme-mapping" as tm;
 
 :root, [data-cw-theme=cw-fo] {
-  @include tm.generate-grid-vars(p.$grid);
   @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

@@ -50,24 +50,24 @@
 // ---------------------------------
 $alert: (
   info: (
-    surface: var(--#{p.$prefix}-info-light),
-    text: var(--#{p.$prefix}-body-color)
+    surface: var(--cw-info-light),
+    text: var(--cw-body-color)
   ),
   success: (
-    surface: var(--#{p.$prefix}-success-light),
-    text: var(--#{p.$prefix}-body-color)
+    surface: var(--cw-success-light),
+    text: var(--cw-body-color)
   ),
   warning: (
-    surface: var(--#{p.$prefix}-warning-light),
-    text: var(--#{p.$prefix}-body-color)
+    surface: var(--cw-warning-light),
+    text: var(--cw-body-color)
   ),
   danger: (
-    surface: var(--#{p.$prefix}-danger-light),
-    text: var(--#{p.$prefix}-body-color)
+    surface: var(--cw-danger-light),
+    text: var(--cw-body-color)
   ),
   light: (
-    surface: var(--#{p.$prefix}-light-light),
-    text: var(--#{p.$prefix}-body-color)
+    surface: var(--cw-light-light),
+    text: var(--cw-body-color)
   )
 );
 

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

@@ -45,59 +45,59 @@
 // ---------------------------------
 $badge-light: (
   info: (
-    surface: var(--#{p.$prefix}-info-light),
+    surface: var(--cw-info-light),
     text: color("grey", 950)
   ),
   success: (
-    surface: var(--#{p.$prefix}-success-light),
+    surface: var(--cw-success-light),
     text: color("grey", 950)
   ),
   warning: (
-    surface: var(--#{p.$prefix}-warning-light),
+    surface: var(--cw-warning-light),
     text: color("grey", 950)
   ),
   danger: (
-    surface: var(--#{p.$prefix}-danger-light),
+    surface: var(--cw-danger-light),
     text: color("grey", 950)
   ),
   light: (
-    surface: var(--#{p.$prefix}-light),
-    text: var(--#{p.$prefix}-light-contrasted)
+    surface: var(--cw-light),
+    text: var(--cw-light-contrasted)
   )
 );
 
 $badge-heavy: (
   primary: (
-    surface: var(--#{p.$prefix}-primary),
-    text: var(--#{p.$prefix}-primary-contrasted)
+    surface: var(--cw-primary),
+    text: var(--cw-primary-contrasted)
   ),
   info: (
-    surface: var(--#{p.$prefix}-info),
-    text: var(--#{p.$prefix}-info-contrasted)
+    surface: var(--cw-info),
+    text: var(--cw-info-contrasted)
   ),
   success: (
-    surface: var(--#{p.$prefix}-success),
-    text: var(--#{p.$prefix}-success-contrasted)
+    surface: var(--cw-success),
+    text: var(--cw-success-contrasted)
   ),
   warning: (
-    surface: var(--#{p.$prefix}-warning),
-    text: var(--#{p.$prefix}-warning-contrasted)
+    surface: var(--cw-warning),
+    text: var(--cw-warning-contrasted)
   ),
   danger: (
-    surface: var(--#{p.$prefix}-danger),
-    text: var(--#{p.$prefix}-danger-contrasted)
+    surface: var(--cw-danger),
+    text: var(--cw-danger-contrasted)
   ),
   dark: (
-    surface: var(--#{p.$prefix}-dark),
-    text: var(--#{p.$prefix}-dark-contrasted)
+    surface: var(--cw-dark),
+    text: var(--cw-dark-contrasted)
   ),
   light: (
-    surface: var(--#{p.$prefix}-light),
-    text: var(--#{p.$prefix}-light-contrasted)
+    surface: var(--cw-light),
+    text: var(--cw-light-contrasted)
   ),
   disabled: (
-    surface: var(--#{p.$prefix}-disabled),
-    text: var(--#{p.$prefix}-disabled-contrasted)
+    surface: var(--cw-disabled),
+    text: var(--cw-disabled-contrasted)
   )
 );
 

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

@@ -3,9 +3,4 @@
   padding: 0;
   border: 0;
   background-color: transparent;
-
-  &.btn-icon-default {
-    width: inherit;
-    height: inherit;
-  }
 }

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

@@ -4,27 +4,27 @@
 
 .icon-notification {
   &-info {
-    --#{p.$prefix}-icon-rounded-bg: var(--#{p.$prefix}-info);
-    --#{p.$prefix}-icon-rounded-color: var(--#{p.$prefix}-info-contrasted);
+    --#{p.$prefix}-icon-rounded-bg: var(--cw-info);
+    --#{p.$prefix}-icon-rounded-color: var(--cw-info-contrasted);
   }
 
   &-success {
-    --#{p.$prefix}-icon-rounded-bg: var(--#{p.$prefix}-success);
-    --#{p.$prefix}-icon-rounded-color: var(--#{p.$prefix}-success-contrasted);
+    --#{p.$prefix}-icon-rounded-bg: var(--cw-success);
+    --#{p.$prefix}-icon-rounded-color: var(--cw-success-contrasted);
   }
 
   &-warning {
-    --#{p.$prefix}-icon-rounded-bg: var(--#{p.$prefix}-warning);
-    --#{p.$prefix}-icon-rounded-color: var(--#{p.$prefix}-base-white);
+    --#{p.$prefix}-icon-rounded-bg: var(--cw-warning);
+    --#{p.$prefix}-icon-rounded-color: var(--cw-base-white);
   }
 
   &-danger {
-    --#{p.$prefix}-icon-rounded-bg: var(--#{p.$prefix}-danger);
-    --#{p.$prefix}-icon-rounded-color: var(--#{p.$prefix}-danger-contrasted);
+    --#{p.$prefix}-icon-rounded-bg: var(--cw-danger);
+    --#{p.$prefix}-icon-rounded-color: var(--cw-danger-contrasted);
   }
 
   &-careful {
-    --#{p.$prefix}-icon-rounded-bg: var(--#{p.$prefix}-danger);
-    --#{p.$prefix}-icon-rounded-color: var(--#{p.$prefix}-danger-contrasted);
+    --#{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

@@ -14,17 +14,16 @@
   width: var(--#{p.$prefix}-icon-size);
   height: var(--#{p.$prefix}-icon-size);
 
-  svg {
-    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(--#{p.$prefix}-base-white); // Couleur de fond
-  --#{p.$prefix}-icon-rounded-color: var(--#{p.$prefix}-base-dark);     // Couleur de l'icône
+  --#{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;
@@ -98,41 +97,16 @@ $icon-rounded-mapping: (
 
 .icon-rounded {
   &-light {
-    --#{p.$prefix}-icon-rounded-bg: var(--#{p.$prefix}-light);
+    --#{p.$prefix}-icon-rounded-bg: var(--cw-light);
   }
 
   &-primary {
-    --#{p.$prefix}-icon-rounded-bg: var(--#{p.$prefix}-primary);
-    --#{p.$prefix}-icon-rounded-color: var(--#{p.$prefix}-primary-contrasted);
-  }
-
-  &-success {
-    --#{p.$prefix}-icon-rounded-bg: var(--#{p.$prefix}-success);
-    --#{p.$prefix}-icon-rounded-color: var(--#{p.$prefix}-success-contrasted);
-  }
-
-  &-warning {
-    --#{p.$prefix}-icon-rounded-bg: var(--#{p.$prefix}-warning);
-    --#{p.$prefix}-icon-rounded-color: var(--#{p.$prefix}-base-white);
-  }
-
-  &-info {
-    --#{p.$prefix}-icon-rounded-bg: var(--#{p.$prefix}-info);
-    --#{p.$prefix}-icon-rounded-color: var(--#{p.$prefix}-info-contrasted);
-  }
-
-  &-danger {
-    --#{p.$prefix}-icon-rounded-bg: var(--#{p.$prefix}-danger);
-    --#{p.$prefix}-icon-rounded-color: var(--#{p.$prefix}-danger-contrasted);
-  }
-
-  &-neutral {
-    --#{p.$prefix}-icon-rounded-bg: var(--#{p.$prefix}-dark);
-    --#{p.$prefix}-icon-rounded-color: var(--#{p.$prefix}-dark-contrasted);
+    --#{p.$prefix}-icon-rounded-bg: var(--cw-primary);
+    --#{p.$prefix}-icon-rounded-color: var(--cw-primary-contrasted);
   }
 
   &-invert {
-    --#{p.$prefix}-icon-rounded-bg: var(--#{p.$prefix}-dark);
-    --#{p.$prefix}-icon-rounded-color: var(--#{p.$prefix}-dark-contrasted);
+    --#{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

@@ -4,19 +4,19 @@
 
 .numerical-range {
   --#{p.$prefix}-range-bg: transparent;
-  --#{p.$prefix}-range-container-bg: var(--#{p.$prefix}-base-white);
+  --#{p.$prefix}-range-container-bg: var(--cw-base-white);
 
   display: inline-flex;
   align-items: center;
   gap: size(md);
-  border-radius: var(--#{p.$prefix}-border-radius-input);
+  border-radius: border(br, round);
   background-color: var(--#{p.$prefix}-range-bg);
 
   &-large-grey,
   &-small-grey,
   &-default-grey {
-    --#{p.$prefix}-range-bg: var(--#{p.$prefix}-light);
-    --#{p.$prefix}-range-container-bg: var(--#{p.$prefix}-light);
+    --#{p.$prefix}-range-bg: var(--cw-light);
+    --#{p.$prefix}-range-container-bg: var(--cw-light);
   }
 
   &-large-grey {

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

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

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

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