@design-factory/styles 21.0.0-next.0 → 21.0.0

package/package.json

@@ -2,13 +2,14 @@
   "name": "@design-factory/styles",
   "description": "Amadeus design system styles",
   "license": "BSD-3-Clause",
-  "version": "21.0.0-next.0",
+  "version": "21.0.0",
   "type": "module",
   "peerDependencies": {
     "bootstrap": "5.3.8",
-    "@agnos-ui/core-bootstrap": "~0.10.0-next.4",
-    "@design-factory/tokens": "21.0.0-next.0",
-    "ag-grid-community": "^35.0.0"
+    "@agnos-ui/core-bootstrap": "~0.10.0",
+    "@design-factory/tokens": "21.0.0",
+    "ag-grid-community": "^35.0.0",
+    "@ng-select/ng-select": "^21.0.0"
   },
   "peerDependenciesMeta": {
     "bootstrap": {
@@ -19,6 +20,12 @@
     },
     "ag-grid-community": {
       "optional": true
+    },
+    "@design-factory/tokens": {
+      "optional": true
+    },
+    "@ng-select/ng-select": {
+      "optional": true
     }
   },
   "exports": {

package/scss/_common.mixins.scss

@@ -1,4 +1,5 @@
-@import './utilities/form.mixins';
+@use 'sass:map';
+
 @mixin rtl {
   @if $df-enable-rtl {
     [dir='rtl'] & {
@@ -18,13 +19,12 @@
   }
 }
 
-@mixin heading {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    @content;
-  }
+@function get-font-sizing($extension, $ratio, $font-size-to-scale: $font-size-base, $body: false) {
+  $df-size-ratios-font: (
+    'sm': var(--df-typo-sizing-small),
+    'lg': var(--df-typo-sizing-large),
+    'md': var(--df-typo-sizing-default),
+    'xl': var(--df-typo-sizing-2xlarge)
+  );
+  @return map.get($df-size-ratios-font, $extension);
 }

package/scss/_common.root.scss

@@ -1,35 +1,4 @@
 :root {
-  --df-disabled-color: #{$df-disabled-color};
-  --df-disabled-bg-color: #{$gray-100};
-  --df-focus-outline: #{$df-focus-outline};
-  --df-disabled-cursor: #{$df-disabled-cursor};
-  --df-link-hover-text-decoration: #{$df-link-hover-text-decoration};
-  --df-disabled-opacity: #{$df-disabled-opacity};
-  --df-font-family: 'Design-Factory-icon';
-
-  --df-white-color: #{color-contrast($white)};
-  --df-black-color: #{color-contrast($black)};
-
-  // Box-shadow
-  --df-box-shadow: #{$df-box-shadow};
-  --df-focused-box-shadow: #{$df-focused-box-shadow};
-  --df-box-shadow-blur: #{$focus-ring-blur};
-  --df-box-shadow-width: #{$focus-ring-width};
-  --df-box-shadow-opacity: #{$focus-ring-opacity};
-  --df-box-shadow-color: #{$focus-ring-color};
-
-  @each $breakpoint, $value in $grid-breakpoints {
-    --df-breakpoint-#{$breakpoint}: #{$value};
-  }
-
-  @each $color, $value in $shade-colors {
-    --df-#{$color}: #{$value};
-  }
-
-  @each $color, $value in $shade-colors-text {
-    --df-#{$color}-color: #{$value};
-  }
-
   // have to set the body colors as CSS variables unfortunately as bootstrap has mixin based on $body-bg and $body-color
   --df-body-bg: var(--df-color-inert-neutral-pageBackground);
   --df-body-color: var(--df-color-inert-neutral-main-foreground);

package/scss/_common.scss

@@ -1,17 +1,18 @@
+@use 'common.variables' as df;
+
 .mandatory-indicator {
   // add
   color: var(--df-color-danger-alt-default-foreground);
-  font-weight: $df-mandatory-indicator-font-weight;
-  margin-left: $df-mandatory-indicator-margin;
-  margin-right: $df-mandatory-indicator-margin;
+  font-weight: var(--df-typo-weight-regular);
+  margin-inline: var(--df-spacing-1);
 }
 
 .df-subtitle {
   // add
-  color: $df-subtitle-color;
+  color: var(--df-color-subtext-foreground);
 }
 
-@each $extension, $ratio in $df-size-ratios {
+@each $extension, $ratio in ('sm': 0.875, 'md': 1, 'lg': 1.125, 'xl': 1.25) {
   .df-font-#{$extension} {
     font-size: #{get-font-sizing($extension, $ratio)};
   }
@@ -26,13 +27,16 @@
 }
 
 .df-focused {
-  border-radius: $df-focused-border-radius;
-  box-shadow: $df-focused-box-shadow;
-  border: $df-focused-border;
-  outline: var(--df-focus-outline); //disable default
+  border-radius: var(--df-borderRadius-main-medium);
+  box-shadow: df.$df-focus-box-shadow;
+  border: 1px solid var(--df-color-primary-main-default-border);
+  outline: none; //disable default
 }
 
-@each $degree, $value in $df-degrees {
+@each $degree,
+  $value
+    in (0: 0deg, 45: 45deg, 90: 90deg, 135: 135deg, 180: 180deg, 225: 225deg, 270: 270deg, 315: 315deg, 360: 360deg)
+{
   .df-transform-r-#{$degree} {
     transform: rotate($value);
   }

package/scss/_common.variables.scss

@@ -1,62 +1,16 @@
-@use 'sass:math';
-@use 'sass:map';
-// Common variables DF
+// the box shadow, mostly used for cards, popovers, modals, etc.
+$df-box-shadow: 0px 0px 8px var(--df-color-shadow-1) !default;
+// the focus box shadow, mostly used for focus states of buttons, inputs, etc.
+$df-focus-box-shadow:
+  0 0 0 2px var(--df-inner-box-shadow-color, var(--df-body-bg)),
+  0 0 0 4px var(--df-box-shadow-color, var(--df-color-primary-main-default-border)) !default;
+// the inset focus box shadow, mostly used for focus states of tabs, navlinks, etc.
+$df-focus-inset-box-shadow:
+  inset 0 0 0 2px var(--df-inner-box-shadow-color, var(--df-body-bg)),
+  inset 0 0 0 4px var(--df-box-shadow-color, var(--df-color-primary-main-default-border)) !default;
 
-// stylelint-disable-next-line scss/dollar-variable-pattern
+// the path to the fonts folder
+// TODO refactor this one day
 $font-path: '../../../assets/fonts' !default;
-$df-font-icon-color: $gray-600 !default;
-$df-mandatory-indicator-font-weight: 700 !default;
-$df-mandatory-indicator-margin: 0.125rem !default;
-$df-subtitle-color: $gray-600 !default;
-// Merge DF Spacer with BS ones
-// @deprecated - will be removed in version 21, use $spacer-4 instead of '75'
-// stylelint-disable-next-line scss/dollar-variable-pattern, scss/dollar-variable-default
-$spacers: map.merge(
-  (
-    '75': (
-      calc($spacer * 0.75)
-    )
-  ),
-  $spacers
-);
-
-// stylelint-disable-next-line scss/dollar-variable-default
-$df-size-ratios: map.merge(
-  (
-    'sm': math.div($font-size-sm, $font-size-base),
-    'lg': math.div($font-size-lg, $font-size-base)
-  ),
-  $df-size-ratios
-);
-
-$df-focused-border-radius: $border-radius !default;
-$df-focused-box-shadow: $input-btn-focus-box-shadow !default; // $input-btn-focus-box-shadow need to be customize for changing the whole box-shadow
-$df-focused-border: $border-width solid var(--df-color-primary-main-default-border) !default;
+// enable right to left support
 $df-enable-rtl: false !default;
-
-// Disabled state
-$df-disabled-bg-color: var(--df-gray-100) !default;
-$df-disabled-color: var(--df-gray-300) !default;
-$df-disabled-opacity: 1 !default; //TODO: should be removed after all the clean up
-$df-disabled-cursor: not-allowed !default; //TODO: should be removed after all the clean up
-$df-focus-outline: none !default;
-
-// TODO propagate the usage of the variables for the link hover text-decoration
-$df-link-hover-text-decoration: none !default;
-// TODO same for visited / disabled / more link / icon in link ?
-// stylelint-disable scss/dollar-variable-pattern
-$shade-colors-rgb: map-loop($shade-colors, to-rgb, '$value') !default;
-$shade-colors-text: map-loop($shade-colors, color-contrast, '$value') !default;
-$shade-colors-text-rgb: map-loop($shade-colors-text, to-rgb, '$value') !default;
-
-$df-degrees: (
-  0: 0deg,
-  45: 45deg,
-  90: 90deg,
-  135: 135deg,
-  180: 180deg,
-  225: 225deg,
-  270: 270deg,
-  315: 315deg,
-  360: 360deg
-) !default;

package/scss/_variables.scss

@@ -1,5 +1,14 @@
+// Overriding bootstrap is done in this way:
+// We declare sass vars BEFORE bootstrap sass vars.
+// We redefine mixins and functions AFTER bootstrap mixins and functions.
+// We declare component css override AFTER bootstrap component css.
+
+// First we import bootstrap functions and override them.
 @import 'bootstrap/scss/functions';
-@import 'utilities/common.utilities';
+@import 'bootstrap/functions';
+
+// Following files override bootstrap variables
+@import 'bootstrap/variables';
 
 @import 'components/fonts/fonts.variables';
 @import 'components/accordion/accordion.variables';
@@ -31,16 +40,11 @@
 @import 'components/toggle/toggle.variables';
 @import 'components/tooltip/tooltip.variables';
 
-// File to override bootstrap variables
-@import 'bootstrap/variables';
-@import 'bootstrap/variables-dark';
+// Then the import of bootstrap variables
 @import 'bootstrap/scss/variables';
 
 // File to override agnosui variables
 @import 'agnosui/variables';
 
-// import common variables for components
+// import common variables for components (no bootstrap variables here)
 @import 'common.variables';
-
-// import local variable DF of all components
-@import 'components/brand-color/brand-color.variables';

package/scss/bootstrap/_functions.scss

@@ -0,0 +1,55 @@
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:string';
+@use 'sass:list';
+@use 'sass:meta';
+
+@function to-rgb($value) {
+  @if meta.type-of($value) != color {
+    @return str-replace($value, ')', '-rgb)');
+  }
+  @return color.red($value), color.green($value), color.blue($value);
+}
+
+@function rgba-css-var($identifier, $target) {
+  @if not list.index(neutral primary danger warning success info tip accent chromatic1 chromatic2, $identifier) {
+    @error "#{$identifier} not managed, called with #{$target}";
+  }
+  @if $target == 'focus-ring' or $target == 'border' {
+    @return var(--df-color-#{$identifier}-main-default-border);
+  }
+  @if $target == 'text' {
+    @return var(--df-color-#{$identifier}-alt-default-foreground);
+  } @else {
+    @return var(--df-color-#{$identifier}-main-default-background);
+  }
+}
+
+@function color-contrast(
+  $background,
+  $color-contrast-dark: $color-contrast-dark,
+  $color-contrast-light: $color-contrast-light,
+  $min-contrast-ratio: $min-contrast-ratio
+) {
+  @if meta.type-of($background) != color {
+    @return str-replace($background, ')', '-color)');
+  }
+  $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
+  $max-ratio: 0;
+  $max-ratio-color: null;
+
+  @each $color in $foregrounds {
+    $contrast-ratio: contrast-ratio($background, $color);
+    @if $contrast-ratio > $min-contrast-ratio {
+      @return $color;
+    } @else if $contrast-ratio > $max-ratio {
+      $max-ratio: $contrast-ratio;
+      $max-ratio-color: $color;
+    }
+  }
+
+  @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
+
+  @return $max-ratio-color;
+}

package/scss/bootstrap/_mixins-override.scss

@@ -1,69 +1,25 @@
 @mixin border-end-radius($radius: $border-radius) {
-  @if $enable-rounded {
-    @include ltr {
-      border-top-right-radius: valid-radius($radius);
-      border-bottom-right-radius: valid-radius($radius);
-    }
-    @include rtl {
-      border-top-left-radius: valid-radius($radius);
-      border-bottom-left-radius: valid-radius($radius);
-    }
-  }
+  border-start-end-radius: valid-radius($radius);
+  border-end-end-radius: valid-radius($radius);
 }
 
 @mixin border-start-radius($radius: $border-radius) {
-  @if $enable-rounded {
-    @include ltr {
-      border-top-left-radius: valid-radius($radius);
-      border-bottom-left-radius: valid-radius($radius);
-    }
-    @include rtl {
-      border-top-right-radius: valid-radius($radius);
-      border-bottom-right-radius: valid-radius($radius);
-    }
-  }
+  border-start-start-radius: valid-radius($radius);
+  border-end-start-radius: valid-radius($radius);
 }
 
 @mixin border-top-start-radius($radius: $border-radius) {
-  @if $enable-rounded {
-    @include ltr {
-      border-top-left-radius: valid-radius($radius);
-    }
-    @include rtl {
-      border-top-right-radius: valid-radius($radius);
-    }
-  }
+  border-start-start-radius: valid-radius($radius);
 }
 
 @mixin border-top-end-radius($radius: $border-radius) {
-  @if $enable-rounded {
-    @include ltr {
-      border-top-right-radius: valid-radius($radius);
-    }
-    @include rtl {
-      border-top-left-radius: valid-radius($radius);
-    }
-  }
+  border-start-end-radius: valid-radius($radius);
 }
 
 @mixin border-bottom-end-radius($radius: $border-radius) {
-  @if $enable-rounded {
-    @include ltr {
-      border-bottom-right-radius: valid-radius($radius);
-    }
-    @include rtl {
-      border-bottom-left-radius: valid-radius($radius);
-    }
-  }
+  border-end-end-radius: valid-radius($radius);
 }
 
 @mixin border-bottom-start-radius($radius: $border-radius) {
-  @if $enable-rounded {
-    @include ltr {
-      border-bottom-left-radius: valid-radius($radius);
-    }
-    @include rtl {
-      border-bottom-right-radius: valid-radius($radius);
-    }
-  }
+  border-end-start-radius: valid-radius($radius);
 }