@design-factory/styles 21.0.0-next.0

package/scss/themes/brand2023/_variables.scss

@@ -0,0 +1,315 @@
+@use 'sass:map';
+@use 'sass:color';
+@import '../../utilities/rgb';
+@import '@design-factory/tokens/scss/vars-light';
+@import '@design-factory/tokens/scss/root';
+
+// stylelint-disable scss/dollar-variable-pattern
+// Variables
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+
+// Color system
+// stylelint-disable-next-line scss/dollar-variable-default
+$prefix: df-;
+
+// scss-docs-start gray-color-variables
+$white: #fff !default;
+$black: #000 !default; // changed
+
+// DF specific colors
+// Grey colors
+$gray-1000: $df-theme-neutral-110 !default;
+$gray-900: $df-theme-neutral-100 !default; // cloud-100
+$gray-800: $df-theme-neutral-90 !default;
+$gray-700: $df-theme-neutral-80 !default;
+$gray-600: $df-theme-neutral-70 !default;
+$gray-500: $df-theme-neutral-60 !default;
+$gray-400: $df-theme-neutral-50 !default;
+$gray-300: $df-theme-neutral-40 !default;
+$gray-200: $df-theme-neutral-30 !default;
+$gray-100: $df-theme-neutral-20 !default;
+$gray-50: $df-theme-neutral-10 !default;
+$gray-0: $df-theme-neutral-0 !default;
+// scss-docs-end gray-color-variables
+
+// scss-docs-start color-variables
+// TODO attention maybe init this from the shades
+$blue: $df-colorPalette-sky-60 !default;
+$indigo: #6610f2 !default; // not changed
+$purple: $df-colorPalette-violet-60 !default;
+$pink: $df-colorPalette-fuchsia-60 !default; // fuchsia
+$red: $df-colorPalette-crimson-60 !default;
+$orange: $df-colorPalette-pumpkin-40 !default; // orange 400
+$yellow: $df-colorPalette-canary-60 !default;
+$green: $df-colorPalette-forest-60 !default;
+$teal: $df-colorPalette-sky-60 !default; // put to blue, temporary ?
+$cyan: #009dd1 !default; // not changed
+
+// DF specific colors
+$dark-orange: $df-colorPalette-pumpkin-70 !default; // TODO verify usaged not changed
+$light-blue: #9bcaeb !default; // TODO verify this one
+$brown: #9e6900 !default; // not changed
+// scss-docs-end color-variables
+
+// scss-docs-start theme-color-variables
+$primary: $blue !default;
+$secondary: $gray-700 !default; // not changed
+$success: $df-theme-success-60 !default;
+$info: $blue !default; // Sky 60
+$warning: $df-theme-warning-40 !default; // Orange 400
+$danger: $df-theme-danger-60 !default; // Crimson 500
+$light: $gray-50 !default; // changed
+$dark: $gray-700 !default; // changed
+$dark-sky: $df-theme-primary-90 !default; // added
+$light-primary: $df-theme-primary-20 !default; // create
+$tip: $purple !default;
+$chromatic1: $yellow !default;
+$chromatic2: $pink !default;
+$pacific: $light-blue !default; // to removed ? where used ?
+// scss-docs-end theme-color-variables
+
+// scss-docs-start theme-colors-map
+$theme-colors: (
+  'primary': $primary,
+  'success': $success,
+  'info': $info,
+  'warning': $warning,
+  'danger': $danger,
+  'neutral': $dark,
+  'tip': $tip,
+  'chromatic1': $chromatic1,
+  'chromatic2': $chromatic2
+) !default;
+// scss-docs-end theme-colors-map
+
+// fusv-disable
+$blue-50: $df-colorPalette-sky-10 !default;
+$blue-100: $df-colorPalette-sky-20 !default;
+$blue-200: $df-colorPalette-sky-30 !default;
+$blue-300: $df-colorPalette-sky-40 !default;
+$blue-400: $df-colorPalette-sky-50 !default;
+$blue-500: $df-colorPalette-sky-60 !default;
+$blue-600: $df-colorPalette-sky-70 !default;
+$blue-700: $df-colorPalette-sky-80 !default;
+$blue-800: $df-colorPalette-sky-90 !default;
+$blue-900: $df-colorPalette-sky-100 !default;
+
+$primary-50: $df-theme-primary-10 !default;
+$primary-100: $df-theme-primary-20 !default;
+$primary-200: $df-theme-primary-30 !default;
+$primary-300: $df-theme-primary-40 !default;
+$primary-400: $df-theme-primary-50 !default;
+$primary-500: $df-theme-primary-60 !default;
+$primary-600: $df-theme-primary-70 !default;
+$primary-700: $df-theme-primary-80 !default;
+$primary-800: $df-theme-primary-90 !default;
+$primary-900: $df-theme-primary-100 !default;
+
+$info-50: $df-theme-info-10 !default;
+$info-100: $df-theme-info-20 !default;
+$info-200: $df-theme-info-30 !default;
+$info-300: $df-theme-info-40 !default;
+$info-400: $df-theme-info-50 !default;
+$info-500: $df-theme-info-60 !default;
+$info-600: $df-theme-info-70 !default;
+$info-700: $df-theme-info-80 !default;
+$info-800: $df-theme-info-90 !default;
+$info-900: $df-theme-info-100 !default;
+
+$purple-50: $df-colorPalette-violet-10 !default;
+$purple-100: $df-colorPalette-violet-20 !default;
+$purple-200: $df-colorPalette-violet-30 !default;
+$purple-300: $df-colorPalette-violet-40 !default;
+$purple-400: $df-colorPalette-violet-50 !default;
+$purple-500: $df-colorPalette-violet-60 !default;
+$purple-600: $df-colorPalette-violet-70 !default;
+$purple-700: $df-colorPalette-violet-80 !default;
+$purple-800: $df-colorPalette-violet-90 !default;
+$purple-900: $df-colorPalette-violet-100 !default;
+
+$pink-50: $df-colorPalette-fuchsia-10 !default;
+$pink-100: $df-colorPalette-fuchsia-20 !default;
+$pink-200: $df-colorPalette-fuchsia-30 !default;
+$pink-300: $df-colorPalette-fuchsia-40 !default;
+$pink-400: $df-colorPalette-fuchsia-50 !default;
+$pink-500: $df-colorPalette-fuchsia-60 !default;
+$pink-600: $df-colorPalette-fuchsia-70 !default;
+$pink-700: $df-colorPalette-fuchsia-80 !default;
+$pink-800: $df-colorPalette-fuchsia-90 !default;
+$pink-900: $df-colorPalette-fuchsia-100 !default;
+
+$red-50: $df-colorPalette-crimson-10 !default;
+$red-100: $df-colorPalette-crimson-20 !default;
+$red-200: $df-colorPalette-crimson-30 !default;
+$red-300: $df-colorPalette-crimson-40 !default;
+$red-400: $df-colorPalette-crimson-50 !default;
+$red-500: $df-colorPalette-crimson-60 !default;
+$red-600: $df-colorPalette-crimson-70 !default;
+$red-700: $df-colorPalette-crimson-80 !default;
+$red-800: $df-colorPalette-crimson-90 !default;
+$red-900: $df-colorPalette-crimson-100 !default;
+
+$orange-50: $df-colorPalette-pumpkin-10 !default;
+$orange-100: $df-colorPalette-pumpkin-20 !default;
+$orange-200: $df-colorPalette-pumpkin-30 !default;
+$orange-300: $df-colorPalette-pumpkin-40 !default;
+$orange-400: $df-colorPalette-pumpkin-50 !default;
+$orange-500: $df-colorPalette-pumpkin-60 !default;
+$orange-600: $df-colorPalette-pumpkin-70 !default;
+$orange-700: $df-colorPalette-pumpkin-80 !default;
+$orange-800: $df-colorPalette-pumpkin-90 !default;
+$orange-900: $df-colorPalette-pumpkin-100 !default;
+
+$yellow-50: $df-colorPalette-canary-10 !default;
+$yellow-100: $df-colorPalette-canary-20 !default;
+$yellow-200: $df-colorPalette-canary-30 !default;
+$yellow-300: $df-colorPalette-canary-40 !default;
+$yellow-400: $df-colorPalette-canary-50 !default;
+$yellow-500: $df-colorPalette-canary-60 !default;
+$yellow-600: $df-colorPalette-canary-70 !default;
+$yellow-700: $df-colorPalette-canary-80 !default;
+$yellow-800: $df-colorPalette-canary-90 !default;
+$yellow-900: $df-colorPalette-canary-100 !default;
+
+$green-50: $df-colorPalette-forest-10 !default;
+$green-100: $df-colorPalette-forest-20 !default;
+$green-200: $df-colorPalette-forest-30 !default;
+$green-300: $df-colorPalette-forest-40 !default;
+$green-400: $df-colorPalette-forest-50 !default;
+$green-500: $df-colorPalette-forest-60 !default;
+$green-600: $df-colorPalette-forest-70 !default;
+$green-700: $df-colorPalette-forest-80 !default;
+$green-800: $df-colorPalette-forest-90 !default;
+$green-900: $df-colorPalette-forest-100 !default;
+
+$teal-50: $df-colorPalette-sky-10 !default;
+$teal-100: $df-colorPalette-sky-20 !default;
+$teal-200: $df-colorPalette-sky-30 !default;
+$teal-300: $df-colorPalette-sky-40 !default;
+$teal-400: $df-colorPalette-sky-50 !default;
+$teal-500: $df-colorPalette-sky-60 !default;
+$teal-600: $df-colorPalette-sky-70 !default;
+$teal-700: $df-colorPalette-sky-80 !default;
+$teal-800: $df-colorPalette-sky-90 !default;
+$teal-900: $df-colorPalette-sky-100 !default;
+
+$danger-50: $df-theme-danger-10 !default;
+$danger-100: $df-theme-danger-20 !default;
+$danger-200: $df-theme-danger-30 !default;
+$danger-300: $df-theme-danger-40 !default;
+$danger-400: $df-theme-danger-50 !default;
+$danger-500: $df-theme-danger-60 !default;
+$danger-600: $df-theme-danger-70 !default;
+$danger-700: $df-theme-danger-80 !default;
+$danger-800: $df-theme-danger-90 !default;
+$danger-900: $df-theme-danger-100 !default;
+
+$warning-50: $df-theme-warning-10 !default;
+$warning-100: $df-theme-warning-20 !default;
+$warning-200: $df-theme-warning-30 !default;
+$warning-300: $df-theme-warning-40 !default;
+$warning-400: $df-theme-warning-50 !default;
+$warning-500: $df-theme-warning-60 !default;
+$warning-600: $df-theme-warning-70 !default;
+$warning-700: $df-theme-warning-80 !default;
+$warning-800: $df-theme-warning-90 !default;
+$warning-900: $df-theme-warning-100 !default;
+
+$success-50: $df-theme-success-10 !default;
+$success-100: $df-theme-success-20 !default;
+$success-200: $df-theme-success-30 !default;
+$success-300: $df-theme-success-40 !default;
+$success-400: $df-theme-success-50 !default;
+$success-500: $df-theme-success-60 !default;
+$success-600: $df-theme-success-70 !default;
+$success-700: $df-theme-success-80 !default;
+$success-800: $df-theme-success-90 !default;
+$success-900: $df-theme-success-100 !default;
+
+$dark-50: $gray-50 !default;
+$dark-100: $gray-100 !default;
+$dark-200: $gray-200 !default;
+$dark-300: $gray-300 !default;
+$dark-400: $gray-400 !default;
+$dark-500: $gray-500 !default;
+$dark-600: $gray-600 !default;
+$dark-700: $gray-700 !default;
+$dark-800: $gray-800 !default;
+$dark-900: $gray-900 !default;
+
+// scss-docs-start theme-bg-subtle-variables
+$primary-bg-subtle: var(--df-color-primary-subtle-background) !default;
+// TODO check where this is used in bootstrap
+$secondary-bg-subtle: var(--df-secondary-50) !default;
+$success-bg-subtle: var(--df-color-success-subtle-background) !default;
+$info-bg-subtle: var(--df-color-info-subtle-background) !default;
+$warning-bg-subtle: var(--df-color-warning-subtle-background) !default;
+$danger-bg-subtle: var(--df-color-danger-subtle-background) !default;
+// TODO check where this is used in bootstrap
+$light-bg-subtle: var(--df-white) !default;
+
+// scss-docs-end theme-bg-subtle-variables
+
+// scss-docs-start theme-border-subtle-variables
+// $primary-border-subtle:   tint-color($primary, 60%) !default;
+// $secondary-border-subtle: tint-color($secondary, 60%) !default;
+// $success-border-subtle:   tint-color($success, 60%) !default;
+// $info-border-subtle:      tint-color($info, 60%) !default;
+// $warning-border-subtle:   tint-color($warning, 60%) !default;
+// $danger-border-subtle:    tint-color($danger, 60%) !default;
+// $light-border-subtle:     $gray-200 !default;
+// $dark-border-subtle:      $gray-500 !default;
+// scss-docs-end theme-border-subtle-variables
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
+
+// scss-docs-start spacer-variables-maps
+$spacer: $df-spacing-5 !default;
+$spacers: () !default;
+
+$enable-negative-margins: false !default;
+
+@for $i from 0 through 12 {
+  $spacers: map.set($spacers, $i, var(--df-spacing-#{$i}));
+}
+
+@if $enable-negative-margins {
+  $negative-spacers: () !default;
+  @for $i from 1 through 12 {
+    $negative-spacers: map.set($negative-spacers, 'n' + $i, calc(-1 * var(--df-spacing-#{$i})));
+  }
+} @else {
+  $negative-spacers: null !default;
+}
+
+// scss-docs-end spacer-variables-maps
+
+$body-bg: $white !default;
+$body-color: $gray-900 !default;
+$color-contrast-dark: $body-color !default; // should be same as $body-color but not a CSS var
+$df-disabled-color: var(--df-gray-400) !default;
+$df-disabled-bg-color: var(--df-gray-200) !default;
+$input-btn-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, $primary) !default;
+
+$df-box-shadow: 0px 0px 8px 0px rgba($gray-600, 0.75) !default;
+$df-hover-bg-color: var(--df-primary-100) !default;
+
+// scss-docs-start border-radius-variables
+$border-radius: var(--df-borderRadius-main-medium) !default;
+$border-radius-sm: var(--df-borderRadius-main-small) !default;
+$border-radius-lg: var(--df-borderRadius-main-large) !default;
+$border-radius-pill: var(--df-borderRadius-main-rounded) !default;
+
+// scss-docs-start input-btn-variables
+$input-btn-padding-x: $df-spacing-4 !default;
+$input-btn-padding-x-sm: $df-spacing-3 !default;
+$input-btn-padding-x-lg: $df-spacing-5 !default;
+// scss-docs-end input-btn-variables

package/scss/utilities/_common.utilities.scss

@@ -0,0 +1,98 @@
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:string';
+@use 'sass:list';
+@use 'sass:meta';
+@import 'rgb';
+
+// This function currently change all the colors #ffffff #bbbbbb and #cccccc (that you should put in the svg) by the one given in input
+// I put f for fill value.
+@function df-getSVGasURL($svg, $fig-color, $border-color, $background-color) {
+  //add
+  //TODO add end of line and multiple space replacing...
+  $ret: str-replace($svg, '#bbbbbb', $border-color);
+  $ret: str-replace($ret, '#cccccc', $background-color);
+  $ret: str-replace($ret, '#ffffff', $fig-color);
+  $ret: str-replace($ret, '#', '%23');
+  $ret: str-replace($ret, '<', '%3C');
+  $ret: str-replace($ret, '>', '%3E');
+  @return url('data:image/svg+xml;charset=utf8,' + $ret);
+}
+
+//Default values
+$df-size-ratios: (
+  'sm': 0.875,
+  'md': 1,
+  'lg': 1.125,
+  'xl': 1.25
+) !default;
+
+$df-sizing-ratios: (
+  'sm': 0.7,
+  'lg': 1.9,
+  'xl': 1.9
+) !default;
+
+$df-box-shadow-transparent-amount: 0.8 !default;
+$df-box-shadow-color: #000 !default; // should be the same as $black
+
+$df-box-shadow: 0px 4px 8px 0px
+  color.adjust(
+    $color: $df-box-shadow-color,
+    $alpha: - $df-box-shadow-transparent-amount
+  ) !default;
+
+@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;
+}
+
+$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)
+) !default;
+
+// TODO consider fully removing this function to use the bs class fs- instead
+@function get-font-sizing($extension, $ratio, $font-size-to-scale: $font-size-base, $body: false) {
+  @return map.get($df-size-ratios-font, $extension);
+}

package/scss/utilities/_form.mixins.scss

@@ -0,0 +1,26 @@
+$df-check-label-adjust-padding-left: 0.125rem !default;
+// mixins for radio and checkbox position
+@mixin df-checkboxradio-pos($df-margin-bottom) {
+  display: inline-block;
+  position: relative;
+  &:not(.col-form-label) {
+    margin-bottom: $df-margin-bottom;
+  }
+  @include ltr {
+    padding-left: calc($form-check-padding-start + $df-check-label-adjust-padding-left); // add
+    margin-left: -$form-check-padding-start; // add
+  }
+
+  @include rtl {
+    padding-right: calc($form-check-padding-start + $df-check-label-adjust-padding-left); // add
+    margin-right: -$form-check-padding-start; // add
+  }
+
+  &::before {
+    // add
+    position: absolute; // idem as custom-control-input from bootstrap to hide the browser input (mandatory)
+    top: 50%; // New trick to use to center the icon with the title (works
+    // with the transform on the element and display: inline-block, position: relative on the parent)
+    transform: translateY(-50%);
+  }
+}

package/scss/utilities/_rgb.scss

@@ -0,0 +1,10 @@
+@use 'sass:meta';
+@use 'sass:color';
+
+// Override functions from BS
+@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);
+}

package/scss/utilities.scss

@@ -0,0 +1,5 @@
+@import './themes/brand2023/variables';
+@import './variables';
+@import 'bootstrap/scss/mixins/breakpoints';
+@import './components/dropdown/dropdown.mixins';
+@import './components/fonts/multi-lang.mixins';