@cityway/basic-ui 1.0.1 → 1.0.2-beta001

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

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

@@ -4,6 +4,7 @@
 @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,6 +4,7 @@
 @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/_accordion.scss

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

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

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

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

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

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

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

@@ -14,16 +14,17 @@
   width: var(--#{p.$prefix}-icon-size);
   height: var(--#{p.$prefix}-icon-size);
 
-  &-span {
-    font-size: 83.3cqi;
+  svg {
+    width: var(--#{p.$prefix}-icon-size);
+    height: var(--#{p.$prefix}-icon-size);
   }
 }
 
 // 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
+  --#{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
 
   display: inline-flex;
   justify-content: center;
@@ -97,16 +98,41 @@ $icon-rounded-mapping: (
 
 .icon-rounded {
   &-light {
-    --#{p.$prefix}-icon-rounded-bg: var(--cw-light);
+    --#{p.$prefix}-icon-rounded-bg: var(--#{p.$prefix}-light);
   }
 
   &-primary {
-    --#{p.$prefix}-icon-rounded-bg: var(--cw-primary);
-    --#{p.$prefix}-icon-rounded-color: var(--cw-primary-contrasted);
+    --#{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);
   }
 
   &-invert {
-    --#{p.$prefix}-icon-rounded-bg: var(--cw-dark);
-    --#{p.$prefix}-icon-rounded-color: var(--cw-dark-contrasted);
+    --#{p.$prefix}-icon-rounded-bg: var(--#{p.$prefix}-dark);
+    --#{p.$prefix}-icon-rounded-color: var(--#{p.$prefix}-dark-contrasted);
   }
 }

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

@@ -0,0 +1,161 @@
+@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/_numerical-range.scss

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

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

@@ -7,38 +7,104 @@
 // ---------------------------------
 $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(--#{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