@design-factory/styles 21.0.0-next.0

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@design-factory/styles",
+  "description": "Amadeus design system styles",
+  "license": "BSD-3-Clause",
+  "version": "21.0.0-next.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"
+  },
+  "peerDependenciesMeta": {
+    "bootstrap": {
+      "optional": true
+    },
+    "@agnos-ui/core-bootstrap": {
+      "optional": true
+    },
+    "ag-grid-community": {
+      "optional": true
+    }
+  },
+  "exports": {
+    "./assets/*": "./assets/*",
+    "./scss/*": "./scss/*.scss",
+    "./scss/*.scss": "./scss/*.scss",
+    "./bundle": "./bundle.css",
+    "./bundle.css": "./bundle.css"
+  }
+}

package/scss/_common.mixins.scss

@@ -0,0 +1,30 @@
+@import './utilities/form.mixins';
+@mixin rtl {
+  @if $df-enable-rtl {
+    [dir='rtl'] & {
+      @content;
+    }
+  }
+}
+
+@mixin ltr {
+  @if $df-enable-rtl {
+    [dir='ltr'] &,
+    html:not([dir='rtl']) & {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin heading {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @content;
+  }
+}

package/scss/_common.root.scss

@@ -0,0 +1,36 @@
+: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

@@ -0,0 +1,50 @@
+.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;
+}
+
+.df-subtitle {
+  // add
+  color: $df-subtitle-color;
+}
+
+@each $extension, $ratio in $df-size-ratios {
+  .df-font-#{$extension} {
+    font-size: #{get-font-sizing($extension, $ratio)};
+  }
+}
+
+// To be used to remove text-decoration on icon of DF
+.df-icon-wtd {
+  &::before {
+    display: inline-block;
+    text-decoration: none;
+  }
+}
+
+.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
+}
+
+@each $degree, $value in $df-degrees {
+  .df-transform-r-#{$degree} {
+    transform: rotate($value);
+  }
+}
+
+.df-w-0 {
+  width: 0;
+}
+
+// CSS class for common app container
+.df-app-container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}

package/scss/_common.variables.scss

@@ -0,0 +1,62 @@
+@use 'sass:math';
+@use 'sass:map';
+// Common variables DF
+
+// stylelint-disable-next-line scss/dollar-variable-pattern
+$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;
+$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/_new-brand-common.variables.scss

@@ -0,0 +1,7 @@
+$df-box-shadow: 0px 0px 8px var(--df-color-shadow-1) !default;
+$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;
+$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;

package/scss/_variables.scss

@@ -0,0 +1,46 @@
+@import 'bootstrap/scss/functions';
+@import 'utilities/common.utilities';
+
+@import 'components/fonts/fonts.variables';
+@import 'components/accordion/accordion.variables';
+@import 'components/alert/alert.variables';
+@import 'components/badge/badge.variables';
+@import 'components/breadcrumbs/breadcrumbs.variables';
+@import 'components/button/button.variables';
+@import 'components/card/card.variables';
+@import 'components/carousel/carousel.variables';
+@import 'components/checkbox/checkbox.variables';
+@import 'components/dropdown/dropdown.variables';
+@import 'components/image/image.variables';
+@import 'components/inputs/inputs.variables';
+@import 'components/fieldset/fieldset.variables';
+@import 'components/form/form.variables';
+@import 'components/link/link.variables';
+@import 'components/list-group/list-group.variables';
+@import 'components/modal/modal.variables';
+@import 'components/navbar/navbar.variables';
+@import 'components/pagination/pagination.variables';
+@import 'components/popover/popover.variables';
+@import 'components/progressbar/progressbar.variables';
+@import 'components/select/select.variables';
+@import 'components/separator/separator.variables';
+@import 'components/spinner/spinner.variables';
+@import 'components/table/table.variables';
+@import 'components/tabs/tabs.variables';
+@import 'components/toast/toast.variables';
+@import 'components/toggle/toggle.variables';
+@import 'components/tooltip/tooltip.variables';
+
+// File to override bootstrap variables
+@import 'bootstrap/variables';
+@import 'bootstrap/variables-dark';
+@import 'bootstrap/scss/variables';
+
+// File to override agnosui variables
+@import 'agnosui/variables';
+
+// import common variables for components
+@import 'common.variables';
+
+// import local variable DF of all components
+@import 'components/brand-color/brand-color.variables';

package/scss/agnosui/_variables.scss

@@ -0,0 +1,33 @@
+/* stylelint-disable-next-line scss/load-no-partial-leading-underscore */
+@forward '@agnos-ui/core-bootstrap/scss/_variables.scss' with (
+  $prefix: 'df-',
+
+  $au-slider-color-background: var(--df-color-disabled-main-foreground) !default,
+  $au-slider-handle-color: var(--df-color-primary-main-default-background) !default,
+  $au-slider-handle-hover-color: var(--df-color-primary-main-hovered-background) !default,
+  $au-slider-handle-focus-box-shadow: (
+    0 0 0 2px var(--df-body-bg),
+    0 0 0 4px var(--df-color-primary-main-default-border)
+  )
+  !default,
+  $au-slider-handle-focus-hover-box-shadow: (
+    0 0 0 2px var(--df-body-bg),
+    0 0 0 4px var(--df-color-primary-main-hovered-border)
+  )
+  !default,
+  $au-slider-label-now-font-weight: var(--df-typo-weight-medium) !default,
+  $au-slider-label-vertical-min-top: calc(100% - 0.5rem) !default,
+  $au-slider-label-vertical-max-top: 0.25rem !default,
+  $au-slider-disabled-color: var(--df-color-disabled-main-foreground) !default,
+  $au-slider-disabled-background-color: var(--df-color-disabled-main-background) !default,
+  $au-slider-tick-neutral-color: var(--df-color-neutral-main-default-border) !default,
+  $au-slider-tick-disabled-color: var(--df-color-disabled-main-border) !default,
+  $au-slider-tick-selected-color: var(--df-color-primary-main-default-border) !default,
+  $au-slider-tick-fill-color: var(--df-color-neutral-alt-default-background) !default,
+  $au-slider-progress-color: var(--df-color-primary-main-default-background) !default,
+
+  $au-tree-expand-icon-color-default: var(--df-color-primary-alt-default-foreground) !default,
+  $au-tree-expand-icon-color-hover: var(--df-color-primary-alt-hovered-foreground) !default,
+  $au-tree-expand-icon-background-color-hover: var(--df-color-primary-alt-hovered-background) !default,
+  $au-tree-expand-icon-margin-inline-end: var(--df-spacing-3) !default
+);

package/scss/bootstrap/_helpers.scss

@@ -0,0 +1,12 @@
+@import 'bootstrap/scss/helpers/clearfix';
+@import 'helpers/color-bg';
+@import 'bootstrap/scss/helpers/focus-ring';
+@import 'bootstrap/scss/helpers/ratio';
+@import 'bootstrap/scss/helpers/position';
+@import 'bootstrap/scss/helpers/stacks';
+@import 'bootstrap/scss/helpers/visually-hidden';
+@import 'bootstrap/scss/helpers/stretched-link';
+@import 'bootstrap/scss/helpers/text-truncation';
+@import 'bootstrap/scss/helpers/vr';
+
+// we do not support colored links or icon-link

package/scss/bootstrap/_maps.scss

@@ -0,0 +1,68 @@
+@use 'sass:map';
+// stylelint-disable scss/dollar-variable-pattern
+
+// Re-assigned maps
+// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
+
+// scss-docs-start theme-colors-rgb
+// $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
+// scss-docs-end theme-colors-rgb
+
+// Utilities maps
+// Extends the default `$theme-colors` maps to help create our utilities.
+
+// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
+// scss-docs-start utilities-colors
+$utilities-colors: $theme-colors-rgb !default;
+// scss-docs-end utilities-colors
+
+// scss-docs-start utilities-text-colors
+$utilities-text: $utilities-colors !default;
+
+// black and white do not use the neutral css vars but direct values instead..
+// this is for applications supporting dark mode to choose between black or neutral, white or neutral-alt
+// text does not have a neutral-soft variant, as there is no associated token
+
+// $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
+$utilities-text-colors: map.merge(
+  map-loop($utilities-text, rgba-css-var, '$key', 'text'),
+  (
+    'black': #000000,
+    'white': #ffffff,
+    'body': var(--df-color-inert-neutral-main-foreground),
+    'alt-body': var(--df-color-inert-neutral-alt-foreground),
+    'neutral-alt': var(--df-color-neutral-main-default-foreground)
+  )
+) !default;
+// scss-docs-end utilities-text-colors
+
+// scss-docs-start utilities-bg-colors
+$utilities-bg: $utilities-colors !default;
+
+$utilities-bg-colors: map.merge(
+  map-loop($utilities-bg, rgba-css-var, '$key', 'bg'),
+  (
+    'black': #000000,
+    'white': #ffffff,
+    'body': var(--df-color-inert-neutral-pageBackground),
+    'alt-body': var(--df-color-inert-neutral-alt-background),
+    'neutral-alt': var(--df-color-neutral-alt-default-background),
+    'neutral-soft': var(--df-color-neutral-soft-default-background)
+  )
+) !default;
+// scss-docs-end utilities-bg-colors
+
+// scss-docs-start utilities-border-colors
+$utilities-border: $utilities-colors !default;
+$utilities-border-colors: map.merge(
+  map-loop($utilities-border, rgba-css-var, '$key', 'border'),
+  (
+    'black': #000000,
+    'white': #ffffff
+  )
+) !default;
+// scss-docs-end utilities-border-colors
+
+// $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
+
+// $gutters: $spacers !default;

package/scss/bootstrap/_mixins-override.scss

@@ -0,0 +1,69 @@
+@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);
+    }
+  }
+}
+
+@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);
+    }
+  }
+}
+
+@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);
+    }
+  }
+}
+
+@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);
+    }
+  }
+}
+
+@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);
+    }
+  }
+}
+
+@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);
+    }
+  }
+}

package/scss/bootstrap/_rtl-styles-override.scss

@@ -0,0 +1,111 @@
+@use 'sass:map';
+
+@if $df-enable-rtl {
+  [dir='rtl'] body {
+    text-align: right;
+    // Navbar overrides
+    .nav {
+      padding-right: 0;
+    }
+    .navbar-nav {
+      padding-right: 0;
+    }
+
+    // Accordion overrides
+    .accordion-button {
+      text-align: right;
+      &::after {
+        margin-right: auto;
+        margin-left: 0;
+      }
+    }
+
+    // Alert overrides
+    .alert-dismissible .btn-close {
+      left: 0;
+      right: auto;
+    }
+
+    .list-group,
+    .list-unstyled,
+    .pagination {
+      padding-right: 0;
+    }
+
+    .dropdown-toggle {
+      &::after {
+        margin-left: 0;
+        margin-right: $caret-spacing;
+      }
+    }
+    .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle),
+    .btn-group > .btn-group:not(:last-child) > .btn {
+      border-radius: 0 $border-radius $border-radius 0;
+    }
+
+    .btn-group > .btn:last-child:not(:first-child),
+    .btn-group > .dropdown-toggle:not(:first-child) {
+      border-radius: $border-radius 0 0 $border-radius;
+    }
+
+    .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
+      border-radius: $border-radius 0 0 $border-radius;
+    }
+
+    // stylelint-disable declaration-no-important
+    @each $breakpoint in map.keys($grid-breakpoints) {
+      @include media-breakpoint-up($breakpoint) {
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        @each $prop, $abbrev in (margin: m, padding: p) {
+          @each $size, $length in $spacers {
+            .#{$abbrev}e#{$infix}-#{$size} {
+              #{$prop}-right: 0 !important;
+              #{$prop}-left: $length !important;
+            }
+            .#{$abbrev}s#{$infix}-#{$size} {
+              #{$prop}-left: 0 !important;
+              #{$prop}-right: $length !important;
+            }
+            #{$abbrev}x#{$infix}-#{$size} {
+              #{$prop}-left: $length !important;
+              #{$prop}-right: $length !important;
+            }
+          }
+        }
+
+        .me#{$infix}-auto {
+          margin-right: 0 !important;
+          margin-left: auto !important;
+        }
+        .ms#{$infix}-auto {
+          margin-right: auto !important;
+          margin-left: 0 !important;
+        }
+        .mx#{$infix}-auto {
+          margin-right: auto !important;
+          margin-left: auto !important;
+        }
+      }
+    }
+
+    @each $breakpoint in map.keys($grid-breakpoints) {
+      @include media-breakpoint-up($breakpoint) {
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        .text#{$infix}-right {
+          text-align: left !important;
+        }
+        .text#{$infix}-left {
+          text-align: right !important;
+        }
+        .float#{$infix}-left {
+          float: right !important;
+        }
+        .float#{$infix}-right {
+          float: left !important;
+        }
+      }
+    }
+  }
+}

package/scss/bootstrap/_utilities-override.scss

@@ -0,0 +1,127 @@
+@use 'sass:map';
+
+// stylelint-disable-next-line scss/dollar-variable-pattern, scss/dollar-variable-default
+$utilities: map.merge(
+  $utilities,
+  (
+    'swatch': (
+      property: background-color,
+      class: swatch,
+      values: $grays
+    ),
+    'width': map.merge(
+        map.get($utilities, 'width'),
+        (
+          responsive: true
+        )
+      ),
+    'height': map.merge(
+        map.get($utilities, 'height'),
+        (
+          responsive: true
+        )
+      ),
+    'rounded': (
+      property: border-radius,
+      class: rounded,
+      values: (
+        null: var(--df-border-radius),
+        0: 0,
+        1: var(--df-border-radius-sm),
+        2: var(--df-border-radius),
+        3: var(--df-border-radius-lg),
+        4: var(--df-border-radius-xl),
+        5: var(--df-border-radius-xxl),
+        circle: 50%,
+        pill: var(--df-border-radius-pill),
+        sm: var(--df-borderRadius-main-small),
+        lg: var(--df-borderRadius-main-large)
+      )
+    ),
+    'rounded-top': (
+      property: border-top-left-radius border-top-right-radius,
+      class: rounded-top,
+      values: (
+        null: var(--df-border-radius),
+        0: 0,
+        1: var(--df-border-radius-sm),
+        2: var(--df-border-radius),
+        3: var(--df-border-radius-lg),
+        4: var(--df-border-radius-xl),
+        5: var(--df-border-radius-xxl),
+        circle: 50%,
+        pill: var(--df-border-radius-pill),
+        sm: var(--df-borderRadius-main-small),
+        lg: var(--df-borderRadius-main-large)
+      )
+    ),
+    'rounded-end': (
+      property: border-top-right-radius border-bottom-right-radius,
+      class: rounded-end,
+      values: (
+        null: var(--df-border-radius),
+        0: 0,
+        1: var(--df-border-radius-sm),
+        2: var(--df-border-radius),
+        3: var(--df-border-radius-lg),
+        4: var(--df-border-radius-xl),
+        5: var(--df-border-radius-xxl),
+        circle: 50%,
+        pill: var(--df-border-radius-pill),
+        sm: var(--df-borderRadius-main-small),
+        lg: var(--df-borderRadius-main-large)
+      )
+    ),
+    'rounded-bottom': (
+      property: border-bottom-right-radius border-bottom-left-radius,
+      class: rounded-bottom,
+      values: (
+        null: var(--df-border-radius),
+        0: 0,
+        1: var(--df-border-radius-sm),
+        2: var(--df-border-radius),
+        3: var(--df-border-radius-lg),
+        4: var(--df-border-radius-xl),
+        5: var(--df-border-radius-xxl),
+        circle: 50%,
+        pill: var(--df-border-radius-pill),
+        sm: var(--df-borderRadius-main-small),
+        lg: var(--df-borderRadius-main-large)
+      )
+    ),
+    'rounded-start': (
+      property: border-bottom-left-radius border-top-left-radius,
+      class: rounded-start,
+      values: (
+        null: var(--df-border-radius),
+        0: 0,
+        1: var(--df-border-radius-sm),
+        2: var(--df-border-radius),
+        3: var(--df-border-radius-lg),
+        4: var(--df-border-radius-xl),
+        5: var(--df-border-radius-xxl),
+        circle: 50%,
+        pill: var(--df-border-radius-pill),
+        sm: var(--df-borderRadius-main-small),
+        lg: var(--df-borderRadius-main-large)
+      )
+    ),
+    'link-underline': (),
+    'link-underline-opacity': (),
+    'color': (
+      property: color,
+      class: text,
+      local-vars: (
+        'text-opacity': 1
+      ),
+      values: map.merge(
+          $utilities-text-colors,
+          (
+            // deprecated, overriden until we provide a schematic and an alternative
+            'muted': var(--df-color-subtext-foreground),
+            'reset': inherit
+          )
+        )
+    )
+  )
+);