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

package/styles/scss/utilities/_common.utilities.scss

@@ -1,205 +0,0 @@
-@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;
-
-// To be used to remove the unit of a number (12px -> 12)
-@function strip-units($number) {
-  @return math.div($number, ($number * 0 + 1));
-}
-
-@function from-rgb($colors) {
-  @if meta.type-of($colors) == 'color' {
-    $red: color.red($colors);
-    $green: color.green($colors);
-    $blue: color.blue($colors);
-    @return rgb($red, $green, $blue);
-  } @else if meta.type-of($colors) == 'list' and list.length($colors) == 3 {
-    // $colors-bis: list.join($colors, ' ');
-    $red: list.nth($colors, 1);
-    $green: list.nth($colors, 2);
-    $blue: list.nth($colors, 3);
-    $color-values: $red + ' ' + $green + ' ' + $blue;
-    @return rgb($red, $green, $blue);
-  } @else {
-    @if meta.type-of($colors) == 'string' and $colors == 'var(--#{$prefix}white-rgb)' {
-      @return $white;
-    }
-    @error "Invalid value for $colors in function from-rgb().";
-  }
-  @return $colors;
-}
-
-// stylelint-disable scss/dollar-variable-pattern
-// TODO change so that we do not put the rgb in the target as the function
-// is explicit...
-@function shades-rgba-css-var-with-opacity($color, $target: '', $isText: false) {
-  $shade: map.get($shade-maps, #{$color});
-  $target-opacity: $target + '-opacity';
-  @if not $shade {
-    @return rgba(var(--#{$prefix}#{$color}-500-rgb), var(--#{$prefix}#{$target-opacity}));
-  }
-  $var: map.get($shade, $target);
-  @if not var {
-    @return rgba(var(--#{$prefix}#{$color}-500-rgb), 1);
-  }
-  @if $isText == true {
-    $var: str-replace($var, ')', '-color)');
-  }
-  $var: str-replace($var, ')', '-rgb)');
-  @return rgba($var, var(--#{$prefix}#{$target-opacity}));
-}
-
-// This function is a temporary solution.
-// The first parameter is to for the new branding system, the other ones for the old one.
-// It will be removed when the old branding will be removed, the var will be used directly in the code.
-@function shades-css-var-brand2023($variableName, $color, $target: '', $isText: false, $isAlternative: false) {
-  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-    @return 'var(--#{$prefix}#{$variableName})';
-  } @else {
-    @return shades-css-var($color, $target, $isText, $isAlternative);
-  }
-}
-
-@function shades-css-var($color, $target: '', $isText: false, $isAlternative: false) {
-  @if $isAlternative == true {
-    $color: $color + '-mirror';
-  }
-  $shade: map.get($shade-maps, #{$color});
-  @if not $shade {
-    @return var(--#{$prefix}#{$color}-500);
-  }
-  $var: map.get($shade, $target);
-  @if not $var {
-    @return var(--#{$prefix}#{$color}-500);
-  }
-  @if $isText == true {
-    $var: str-replace($var, ')', '-color)');
-  }
-  @return $var;
-}
-
-// This function is a temporary solution.
-// The first parameter is to for the new branding system, the other ones for the old one.
-// It will be removed when the old branding will be removed, the var will be used directly in the code.
-@function shades-rgb-css-var-brand2023($variableName, $color, $target: '', $isText: false) {
-  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-    @return 'var(--#{$prefix}#{$variableName})';
-  } @else {
-    @return shades-rgb-css-var($color, $target, $isText);
-  }
-}
-
-@function shades-rgb-css-var($color, $target: '', $isText: false) {
-  $var: shades-css-var($color, $target, $isText);
-  $var: str-replace($var, ')', '-rgb)');
-  @return $var;
-}
-
-// This function is a temporary solution.
-// The first parameter is to for the new branding system, the other ones for the old one.
-// It will be removed when the old branding will be removed, the var will be used directly in the code.
-@function variable-switch-brand2023($variableName, $value) {
-  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-    @return 'var(--#{$prefix}#{$variableName})';
-  } @else {
-    @return $value;
-  }
-}
-
-@function rgba-css-var($identifier, $target) {
-  @if $identifier == 'alt-body' and $target == 'bg' {
-    @return rgba(var(--#{$prefix}alt-body), var(--#{$prefix}#{$target}-opacity));
-  }
-  @if $identifier == 'body' and $target == 'bg' {
-    @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
-  }
-  @if $target == 'text' {
-    @return rgba(#{shades-rgb-css-var($identifier, 'text-color')}, var(--#{$prefix}#{$target}-opacity));
-  } @else {
-    @return rgba(#{shades-rgb-css-var($identifier, 'bg-color')}, var(--#{$prefix}#{$target}-opacity));
-  }
-}
-
-@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;
-}
-
-// This function is a temporary solution.
-// Old way of computing sizing was through rations, new way is to use tokens
-// It will be adapted when switching to new branding only
-@function get-sizing-brand2023($extension, $ratio, $font-size-to-scale: $font-size-base, $body: false) {
-  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-    @if $body {
-      @return map.get($df-size-ratios-font-body, $extension);
-    } @else {
-      @return map.get($df-size-ratios-font, $extension);
-    }
-  } @else {
-    @return calc($ratio * $font-size-to-scale);
-  }
-}

package/styles/scss/utilities/_form.mixins.scss

@@ -1,26 +0,0 @@
-$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/styles/scss/utilities/_rgb.scss

@@ -1,10 +0,0 @@
-@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/tokens/style-dictionary/index.d.ts

@@ -1,60 +0,0 @@
-/**
- * Design Factory custom Style-Dictionary transforms
- */
-declare const transforms: {
-    /**
-     * Transform used to quote wrap font-family tokens.
-     * This is required as the font-family tokens exported from the Figma Plugin do not have the proper $type.
-     */
-    readonly fontFamily: "@design-factory/font-family";
-    /**
-     * Transform used to map font-weight tokens into useable css values.
-     * This is required as the font-weight tokens exported from the Figma Plugin do not have the proper $type.
-     */
-    readonly fontWeight: "@design-factory/font-weight";
-    /**
-     * Transform used to create token names based on DF token naming convention.
-     */
-    readonly tokenName: "@design-factory/token-name";
-};
-/**
- * Design Factory custom Style-Dictionary transform group
- */
-declare const transformGroups: {
-    /**
-     * Transform group that applies standard scss transforms and custom Design Factory transforms.
-     */
-    readonly designFactory: "@design-factory";
-};
-/**
- * Design Factory custom Style-Dictionary filters
- */
-declare const filters: {
-    /**
-     * Filter removing invalid font-weight tokens. Should be used with {@link formats.scssVars}
-     */
-    readonly scssVars: "@design-factory/scss-vars-filter";
-    /**
-     * Filter removing invalid font-weight tokens and t0 tokens. Should be used with {@link formats.cssRoot}
-     */
-    readonly cssRoot: "@design-factory/root-filter";
-};
-/**
- * Design Factory custom Style-Dictionary formats
- */
-declare const formats: {
-    /**
-     * Format to print a sass file containing tokens as sass variables. Should be used with {@link filters.scssVars}
-     */
-    readonly scssVars: "@design-factory/scss-vars";
-    /**
-     * Format to print a css file printing tokens as css variables. Should be used with {@link filters.cssRoot}
-     */
-    readonly cssRoot: "@design-factory/css-root";
-};
-/**
- * Registers Design Factory custom transforms, formats and filters with Style Dictionary.
- */
-declare const registerDf: () => void;
-
-export { filters, formats, registerDf, transformGroups, transforms };