@cityway/basic-ui 1.0.2-beta001 → 1.0.2

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

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

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

@@ -5,23 +5,17 @@
 .btn {
   --#{p.$prefix}-btn-padding-x: #{size(2xl)};
   --#{p.$prefix}-btn-padding-y: #{size(sm)};
-  --#{p.$prefix}-btn-min-width: 17rem;
-
-  --#{p.$prefix}-btn-bg: #{color(base, "white")};
   --#{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)};
@@ -56,10 +50,6 @@
     border-color: var(--#{p.$prefix}-btn-disabled-bg);
   }
 
-  &.btn-min-width {
-    min-width: var(--#{p.$prefix}-btn-min-width);
-  }
-
   &-link {
     text-decoration: underline;
     &:hover, &:active {

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

@@ -3,17 +3,17 @@
 @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)};
+  --#{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);
+  width: var(--#{p.$prefix}spinner-width);
+  height: var(--#{p.$prefix}spinner-height);
   vertical-align: -0.125em;
 
-  border: var(--#{p.$prefix}-spinner-border-width) solid var(--#{p.$prefix}-primary);
+  border: var(--#{p.$prefix}spinner-border-width) solid currentcolor;
   border-right-color: transparent;
   border-radius: 50%;
   animation: 0.75s linear infinite spinner-border;
@@ -24,13 +24,7 @@
 }
 
 .spinner-border-sm {
-  --#{p.$prefix}-spinner-width: #{size(lg)};
-  --#{p.$prefix}-spinner-height: #{size(lg)};
-  --#{p.$prefix}-spinner-border-width: 0.188rem;
-}
-
-.spinner-border-lg {
-  --#{p.$prefix}-spinner-width: #{size(7xl)};
-  --#{p.$prefix}-spinner-height: #{size(7xl)};
-  --#{p.$prefix}-spinner-border-width: 0.5rem;
+  --#{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/mixins/_type.scss

@@ -24,21 +24,4 @@
       font-weight: font(fw, $key);
     }
   }
-
-  // Font color (text)
-  $text-colors: (
-    info: info,
-    success: success,
-    warning: warning,
-    danger: danger,
-    primary: primary,
-    secondary: secondary,
-    light: disabled
-  );
-
-  @each $key, $value in $text-colors {
-    .text-#{$key} {
-      color: var(--#{p.$prefix}-#{$value});
-    }
-  }
 }

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

@@ -7,10 +7,6 @@
   display: flex;
 }
 
-.d-flex-h {
-  align-items: center;
-}
-
 .d-flex-v {
   flex-direction: column;
 }

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

@@ -1,13 +1,18 @@
 @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/accordion";
 @use "cw-ds/components/button/button";
 @use "cw-ds/components/button/button-bo-variant";
 @use "cw-ds/components/badge";
@@ -18,23 +23,10 @@
 @use "cw-ds/components/close";
 @use "cw-ds/components/btn-collapse";
 @use "cw-ds/components/card";
-@use "cw-ds/components/tab/tab-bo";
+@use "cw-ds/components/tab";
 @use "cw-ds/components/stepper";
 @use "cw-ds/components/file-to-download";
 @use "cw-ds/components/numerical-range";
-@use "cw-ds/components/modal";
-
-// Utilities
-@use "cw-ds/utilities/breakpoints";
-@use "cw-ds/utilities/grid";
-@use "cw-ds/utilities/flex";
-@use "cw-ds/utilities/spacing";
-@use "cw-ds/utilities/type/type";
-@use "cw-ds/utilities/type/type-bo";
-@use "cw-ds/utilities/alignment";
-
-// En surcharge
-@use "cw-ds/helpers/skeleton";
 
 
 //## Import des variables de couleurs
@@ -83,7 +75,7 @@
 @import "bootstrap/scss/list-group";
 //@import "bootstrap/scss/close";
 //@import "bootstrap/scss/toasts";
-//@import "bootstrap/scss/modal";
+@import "bootstrap/scss/modal";
 @import "bootstrap/scss/tooltip";
 @import "bootstrap/scss/popover";
 //@import "bootstrap/scss/carousel";
@@ -108,8 +100,8 @@
 //## Import des fonts
 //--------------------------------------------------------
 @import "../../fonts/nunito/nunito";
-// @import "../../fonts/optyweb/optyweb";
-// @import "../../fonts/bo/bo";
+@import "../../fonts/optyweb/optyweb";
+@import "../../fonts/bo/bo";
 
 
 //## Import styles

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

@@ -1,13 +1,18 @@
 @use "cw-ds/reboot";
 @use "cw-ds/root-fo";
 
+// 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/accordion";
 @use "cw-ds/components/button/button";
 @use "cw-ds/components/button/button-fo-variant";
 @use "cw-ds/components/badge";
@@ -18,23 +23,10 @@
 @use "cw-ds/components/close";
 @use "cw-ds/components/btn-collapse";
 @use "cw-ds/components/card";
-@use "cw-ds/components/tab/tab-fo";
+@use "cw-ds/components/tab";
 @use "cw-ds/components/stepper";
 @use "cw-ds/components/file-to-download";
 @use "cw-ds/components/numerical-range";
-@use "cw-ds/components/modal";
-
-// Utilities
-@use "cw-ds/utilities/breakpoints";
-@use "cw-ds/utilities/grid";
-@use "cw-ds/utilities/flex";
-@use "cw-ds/utilities/spacing";
-@use "cw-ds/utilities/type/type";
-@use "cw-ds/utilities/type/type-fo";
-@use "cw-ds/utilities/alignment";
-
-// En surcharge
-@use "cw-ds/helpers/skeleton";
 
 
 //## Import des variables de couleurs
@@ -83,7 +75,7 @@
 @import "bootstrap/scss/list-group";
 //@import "bootstrap/scss/close";
 //@import "bootstrap/scss/toasts";
-//@import "bootstrap/scss/modal";
+@import "bootstrap/scss/modal";
 @import "bootstrap/scss/tooltip";
 @import "bootstrap/scss/popover";
 //@import "bootstrap/scss/carousel";
@@ -108,8 +100,8 @@
 //## Import des fonts
 //--------------------------------------------------------
 @import "../../fonts/nunito/nunito";
-// @import "../../fonts/optyweb/optyweb";
-// @import "../../fonts/bo/bo";
+@import "../../fonts/optyweb/optyweb";
+@import "../../fonts/bo/bo";
 
 
 //## Import styles

package/package.json

@@ -1,20 +1,21 @@
 {
   "name": "@cityway/basic-ui",
-  "version": "1.0.2-beta001",
+  "version": "1.0.2",
   "peerDependencies": {
     "@angular/common": "^20.3.0",
     "@angular/core": "^20.3.0",
     "@angular/forms": "^20.3.0",
     "@angular/animations": "^20.3.0",
     "@angular/cdk": "^20.2.2",
-    "@angular/platform-browser": "^20.3.0",
-    "@cityway/design-tokens": "1.0.1-beta004"
+    "@angular/platform-browser": "^20.3.0"
   },
   "dependencies": {
+    "@cityway/design-tokens": "1.0.1",
     "@ng-bootstrap/ng-bootstrap": "19.0.1",
     "@ng-select/ng-select": "20.0.1",
     "bootstrap": "5.3.0",
     "@angular-slider/ngx-slider": "20.0.0",
+    "ngx-toastr": "19.1.0",
     "tslib": "^2.8.0"
   },
   "sideEffects": false,