@depict-ai/react-ui 0.0.80 → 0.0.81

package/dist/styles/helpers/color_inference.scss

@@ -1,112 +0,0 @@
-@use "sass:map";
-@use "sass:color";
-@use "./utils";
-
-@function get-possible-inferred-or-merged-something($default-values-map, $user-overrides-map, $type, $state) {
-  $value-from-merged-map: map.get(map.get(map.deep-merge($default-values-map, $user-overrides-map), $type), $state);
-  // If the color is specified as override, just return it.
-  @if map.has-key($user-overrides-map, $type) and map.has-key(map.get($user-overrides-map, $type), $state) {
-    @return $value-from-merged-map;
-  }
-  $infer-defaults-return-value: infer-defaults($user-overrides-map, $type);
-  $safe-overrides-map: map.get($infer-defaults-return-value, "map");
-  $changed-direction: map.get($infer-defaults-return-value, "changed-direction");
-  // If we don't have overrides or don't have a "default" override, don't infer and return from the merged map.
-  @if (not map.has-key($safe-overrides-map, $type)) or (not map.has-key(map.get($safe-overrides-map, $type), "default"))
-  {
-    @return $value-from-merged-map;
-  }
-
-  // If the color is specified as override NOW, just return it.
-  @if map.has-key($safe-overrides-map, $type) and map.has-key(map.get($safe-overrides-map, $type), $state) {
-    @return map.get(map.get($safe-overrides-map, $type), $state);
-  }
-
-  // We're good to infer
-  $our-color: map.get(map.get($safe-overrides-map, $type), "default");
-  $direction-to-go: if(
-    not $changed-direction,
-    if(color.lightness($our-color) >= 50%, "darken", "lighten"),
-    $changed-direction
-  );
-
-  //"hover": get-merged($base-colors-defaults, $base-colors, 600),
-  //"pressed": get-merged($base-colors-defaults, $base-colors, 1000),
-  //"disabled": get-merged($base-colors-defaults, $base-colors, 400),
-  @if $direction-to-go == "darken" {
-    @if $state == "hover" {
-      @return color.adjust($our-color, $lightness: -12%, $saturation: -7%);
-    } @else if $state == "pressed" {
-      @return color.adjust($our-color, $lightness: -20%, $saturation: -10%);
-    } @else if $state == "disabled" {
-      @return color.adjust($our-color, $lightness: -30%, $saturation: -5%);
-    }
-  } @else {
-    @if $state == "hover" {
-      @return color.adjust($our-color, $lightness: 10%, $saturation: 5%);
-    } @else if $state == "pressed" {
-      @return color.adjust($our-color, $lightness: 20%);
-    } @else if $state == "disabled" {
-      @return color.adjust($our-color, $lightness: 30%);
-    }
-  }
-}
-
-@function infer-defaults($user-overrides-map, $type) {
-  @if (not map.has-key($user-overrides-map, "base")) or
-    (not map.has-key(map.get($user-overrides-map, "base"), "default"))
-  {
-    // If no base to fallback this function is useless
-    @return ("map": $user-overrides-map, "changed-direction": false);
-  }
-  // Check if have default
-  @if (not map.has-key($user-overrides-map, $type)) or (not map.has-key(map.get($user-overrides-map, $type), "default"))
-  {
-    $default-color: map.get(map.get($user-overrides-map, "base"), "default");
-    // it's important to always go in the same direction with our inference but since
-    // default color is the same for base, neutral and subtle we don't need to preserve the direction somewhere else, it will automatically be consistent
-    $changed-color: black;
-    $changed-direction: false;
-    @if $type == "neutral" {
-      @if color.lightness($default-color) >= 50% {
-        $changed-color: color.adjust($default-color, $lightness: -25%, $saturation: -10%);
-        $changed-direction: "darken";
-      } @else {
-        $changed-color: color.adjust($default-color, $lightness: 25%);
-        $changed-direction: "lighten";
-      }
-    } @else if $type == "subtle" {
-      @if color.lightness($default-color) >= 50% {
-        // Please never change lightness by more than 50% as the distance won't be the same between neutral and subtle anymore
-        // If you do, find out the max change possible for a certain color and only change neutral half of that (I think that's like using color.scale but that function doesn't work in the black-direction IIRC?)
-        $changed-color: color.adjust($default-color, $lightness: -30%, $saturation: -20%);
-        $changed-direction: "darken";
-      } @else {
-        $changed-color: color.adjust(
-          $default-color,
-          $lightness: 30%,
-          $saturation:
-            if((color.saturation($default-color)) < 30% and (color.saturation($default-color) > 2%), 20%, -20%)
-        );
-        $changed-direction: "lighten";
-      }
-    } @else if $type == "inverse" {
-      // Invert color and ensure saturation is same as input color
-      $changed-color: color.change(color.invert($default-color), $saturation: color.saturation($default-color));
-    } @else {
-      @debug "Unknown type: #{$type}";
-    }
-    // Merge in default
-    $modified-map: map.deep-merge(
-      $user-overrides-map,
-      (
-        $type: (
-          "default": $changed-color,
-        ),
-      )
-    );
-    @return ("map": $modified-map, "changed-direction": $changed-direction);
-  }
-
-  @return ("map": $user-overrides-map, "changed-direction": false);
-}

package/dist/styles/helpers/custom_input.scss

@@ -1,194 +0,0 @@
-@use "sass:string";
-@use "sass:color";
-@use "supports-hover";
-@use "sass:map";
-@use "utils";
-@use "../components/PLP/Buttons";
-
-// https://selleo.com/til/posts/rc5qli22jp-pass-hex-color-to-fill-svg-in-background-url-scss
-@function escape-url-hex-color($hex_color) {
-  $ie-color-string: color.ie-hex-str($hex_color);
-  $string: string.quote($ie-color-string);
-  $color: string.slice($string, 4);
-  @return "%23" + $color;
-}
-
-@mixin custom_input(
-  $checkbox-background-color,
-  $checkbox-checked-background-color,
-  $checkbox-checkmark-color,
-  $checkbox-border-radius,
-  $checkbox-border,
-  $checkbox-left-offset,
-  $checkbox-top-offset,
-  $radio-border,
-  $radio-background-color,
-  $radio-selected-dot-color,
-  $radio-selected-dot-size,
-  $radio-selected-offset,
-  $hovered-checkbox-bg,
-  $hovered-checkbox-checked-background-color,
-  $hovered-checkbox-border,
-  $hovered-radio-border,
-  $input-row-height,
-  $largest-border-on-custom-input
-) {
-  $width-and-height: calc(
-    #{$input-row-height} - calc(#{$largest-border-on-custom-input} * 2)
-  ); // border is on both sides
-  /* Customize the label (the container) */
-  .input-row {
-    position: relative;
-    cursor: pointer;
-
-    .custom-indicator {
-      position: relative;
-      // space to text
-      margin-right: 10px;
-    }
-
-    /* Hide the browser's default radio/checkbox input element */
-    input {
-      position: absolute;
-      opacity: 0;
-      cursor: pointer;
-      height: 0;
-      width: 0;
-    }
-    /* Create the custom-indicator (hidden when not checked) */
-    .custom-indicator:after {
-      content: "";
-      position: absolute;
-      display: none;
-    }
-
-    /* Create a custom checkbox */
-    input[type="checkbox"] {
-      & ~ .custom-indicator {
-        padding: calc(#{$width-and-height} / 2);
-        background-color: $checkbox-background-color;
-        border-radius: $checkbox-border-radius;
-        &:not(.color) {
-          border: $checkbox-border;
-        }
-        &.color {
-          padding: calc(#{$input-row-height} / 2); // doesn't have border so needs more size
-          &.outline {
-            $border-width: 0.5px;
-            padding: calc(calc(#{$input-row-height} - calc(#{$border-width} * 2)) / 2);
-            border: $border-width solid #868689;
-          }
-        }
-      }
-      /* When the checkbox is checked, add a blue background */
-      &:checked ~ .custom-indicator {
-        // background-color: #000;
-        background-color: $checkbox-checked-background-color;
-        &:after {
-          background-image: url('data:image/svg+xml;utf8,<svg fill="#{escape-url-hex-color($checkbox-checkmark-color)}" width="12" height="10" viewBox="0 0 12 10" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.0001L10.6 0.600098L4 7.2001L1.4 4.6001L0 6.0001L4 10.0001L12 2.0001Z" /></svg>');
-          fill: #fff;
-          color: #fff;
-          position: absolute;
-          top: calc(50% + $checkbox-top-offset);
-          left: calc(50% + $checkbox-left-offset);
-          transform: translate(-50%, -50%);
-
-          display: block; // Show the custom-indicator when checked
-
-          /* Style the custom-indicator */
-          width: 12px;
-          height: 10px;
-        }
-        &.color:after {
-          // Force this to be white for color checkboxes
-          background-image: url('data:image/svg+xml;utf8,<svg fill="#{escape-url-hex-color(#fff)}" width="12" height="10" viewBox="0 0 12 10" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.0001L10.6 0.600098L4 7.2001L1.4 4.6001L0 6.0001L4 10.0001L12 2.0001Z" /></svg>');
-        }
-        &.color.check-dark:after {
-          background-image: url('data:image/svg+xml;utf8,<svg fill="#{escape-url-hex-color(#000)}" width="12" height="10" viewBox="0 0 12 10" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.0001L10.6 0.600098L4 7.2001L1.4 4.6001L0 6.0001L4 10.0001L12 2.0001Z" /></svg>');
-        }
-        &.color.check-multi:after {
-          background-image: url('data:image/svg+xml;utf8,<svg fill="#{escape-url-hex-color(#fff)}" width="12" height="10" viewBox="0 0 12 10" xmlns="http://www.w3.org/2000/svg"><path style="stroke:black;stroke-width:1px" d="M12 2.0001L10.6 0.600098L4 7.2001L1.4 4.6001L0 6.0001L4 10.0001L12 2.0001Z" /></svg>');
-        }
-      }
-      &:focus-visible ~ .custom-indicator {
-        background-color: $hovered-checkbox-bg;
-        &.color {
-          filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
-        }
-      }
-      &:checked:focus-visible ~ .custom-indicator {
-        background-color: $hovered-checkbox-checked-background-color;
-      }
-    }
-    @include supports-hover.supports-hover() {
-      &:hover input[type="checkbox"] {
-        & ~ .custom-indicator {
-          background-color: $hovered-checkbox-bg;
-          &:not(.color) {
-            border: $hovered-checkbox-border;
-            $hovered-border-width: get_border_width($hovered-checkbox-border);
-            $border-width: get_border_width($checkbox-border);
-            padding: calc(calc(#{$width-and-height} / 2) - calc(#{$hovered-border-width} - #{$border-width}));
-          }
-        }
-        &:checked ~ .custom-indicator {
-          background-color: $hovered-checkbox-checked-background-color;
-        }
-      }
-    }
-
-    /* Create a custom radio button */
-    input[type="radio"] {
-      ~ .custom-indicator {
-        padding: calc(#{$width-and-height} / 2);
-        border-radius: 50%;
-        border: $radio-border;
-        background-color: $radio-background-color;
-      }
-      &:checked ~ .custom-indicator {
-        background-color: transparent;
-        &:after {
-          display: block; // Show the custom-indicator when checked
-
-          /* Style the custom-indicator */
-          width: $radio-selected-dot-size;
-          height: $radio-selected-dot-size;
-          left: calc(50% + $radio-selected-offset);
-          top: calc(50% + $radio-selected-offset);
-          transform: translate(-50%, -50%);
-
-          // width: 8px;
-          // height: 8px;
-          // top: 6px;
-          // left: 6px;
-          background-color: $radio-selected-dot-color;
-          border-radius: 50%;
-        }
-      }
-      &:focus-visible ~ .custom-indicator {
-        @include utils.highlight-background($radio-background-color);
-      }
-      &:checked:focus-visible ~ .custom-indicator:after {
-        @include utils.highlight-background($radio-selected-dot-color, 15%, 25%);
-      }
-    }
-    @include supports-hover.supports-hover() {
-      &:hover input[type="radio"] ~ .custom-indicator {
-        border: $hovered-radio-border;
-        $hovered-border-width: get_border_width($hovered-radio-border);
-        $border-width: get_border_width($radio-border);
-        padding: calc(calc(#{$width-and-height} / 2) - calc(#{$hovered-border-width} - #{$border-width}));
-      }
-    }
-
-    @content;
-  }
-}
-
-@function get_border_width($border-declaration) {
-  @if $border-declaration == "none" or $border-declaration == "unset" {
-    @return 0px;
-  } @else {
-    @return nth($border-declaration, 1);
-  }
-}

package/dist/styles/helpers/supports-hover.scss

@@ -1,7 +0,0 @@
-/// Wraps @content in a media query that targets devices that support `:hover` in a non-fallback way.
-
-@mixin supports-hover {
-  @media not all and (hover: none) {
-    @content;
-  }
-}

package/dist/styles/helpers/utils.scss

@@ -1,110 +0,0 @@
-@use "sass:math";
-@use "sass:color";
-
-/// This mixin is used for the SortAndFilterModal and the SearchModal to color the backdrop behind the modal
-/// @param {Color} $background [rgba(0, 0, 0, 0.4)] - The background color of the backdrop, keep in mind it should be a transparent color
-/// @param {Number} $z-index - The z-index of the backdrop
-@mixin modal-backdrop($background: rgba(0, 0, 0, 0.4), $z-index) {
-  position: fixed;
-  background: $background;
-  z-index: $z-index;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  touch-action: none;
-}
-
-/// This mixin sets the background property to the provided color but darkens it by the provided amounts if it is brighter or darker than 50%
-/// The purpose is to really easily create i.e. hover effects
-/// @param {Color} $normal-background - The color to darken or lighten
-/// @param {Percentage} $darken-factor [10%] - The amount to darken the color by
-/// @param {Percentage} $lighten-factor [10%] - The amount to lighten the color by
-/// @param {Percentage} $saturation-factor [$darken-factor] - The amount to decrease saturation by when the color is darkened
-@mixin highlight-background(
-  $normal-background,
-  $darken-factor: 10%,
-  $lighten-factor: 10%,
-  $saturation-factor: $darken-factor
-) {
-  @if color.lightness($normal-background) >= 50% {
-    background: color.adjust($normal-background, $lightness: -$darken-factor, $saturation: -$saturation-factor);
-  } @else {
-    background: color.adjust($normal-background, $lightness: $lighten-factor);
-  }
-}
-
-/// Like highlight-background mixin but returns color value
-@function highlight-color(
-  $normal-background,
-  $darken-factor: 10%,
-  $lighten-factor: 10%,
-  $saturation-factor: $darken-factor
-) {
-  @if color.lightness($normal-background) >= 50% {
-    @return color.adjust($normal-background, $lightness: -$darken-factor, $saturation: -$saturation-factor);
-  } @else {
-    @return color.adjust($normal-background, $lightness: $lighten-factor);
-  }
-}
-
-// source of below: https://gist.github.com/mashirozx/c0691c3b8ed3f1f63722883649d41c18
-/// We can't (or couldn't) use flex gap due to poor compatibility, this mixin is used instead of it and generates margins. We recommend reading the source code and applying thinking to the margin situation that will result.
-@mixin _flex-gap($gap, $row: true, $use_nth_child: true) {
-  $margin: math.div($gap, 2);
-  $transform: -$margin;
-
-  @if $use_nth_child {
-    > * {
-      @if $row {
-        // modified to be worse by Daniel (probable broke row-reverse and order property) due to him being opinionated on avoiding negative margins when possible
-        &:not(:first-child) {
-          margin-left: $margin;
-        }
-        &:not(:last-child) {
-          margin-right: $margin;
-        }
-      } @else {
-        &:not(:first-child) {
-          margin-top: $margin;
-        }
-        &:not(:last-child) {
-          margin-bottom: $margin;
-        }
-      }
-    }
-  } @else {
-    @if $row {
-      margin-left: $transform;
-      margin-right: $transform;
-    } @else {
-      margin-top: $transform;
-      margin-bottom: $transform;
-    }
-    > * {
-      @if $row {
-        margin-left: $margin;
-        margin-right: $margin;
-      } @else {
-        margin-top: $margin;
-        margin-bottom: $margin;
-      }
-    }
-  }
-}
-
-@mixin flex-gap($gap, $flex-flow: "row nowrap") {
-  @if $flex-flow== "row nowrap" or $flex-flow== "row-reverse nowrap" {
-    @include _flex-gap($gap, true);
-  } @else if $flex-flow== "column nowrap" or $flex-flow== "column-reverse nowrap" {
-    @include _flex-gap($gap, false);
-  } @else if $flex-flow== "row wrap" or $flex-flow== "row-reverse wrap" {
-    @include _flex-gap($gap, true, false);
-    @include _flex-gap($gap, false, false);
-  } @else if $flex-flow== "column wrap" or $flex-flow== "column-reverse wrap" {
-    @include _flex-gap($gap, true, false);
-    @include _flex-gap($gap, false, false);
-  } @else {
-    @error "The second paramater $flex-flow is set to be '#{$flex-flow}', which is illegal.";
-  }
-}

package/dist/styles/package.json

@@ -1,31 +0,0 @@
-{
-  "name": "@depict-ai/plp-styling",
-  "packageManager": "yarn@3.2.2",
-  "scripts": {
-    "publish": "yarn npm publish"
-  },
-  "files": [
-    "components/",
-    "helpers/",
-    "index.scss",
-    "variables.scss"
-  ],
-  "sass": "index.scss",
-  "version": "0.0.20",
-  "description": "Depict PLP UI SCSS Styling",
-  "author": "Daniel Troger <daniel@depict.ai>",
-  "contributors": [
-    "Fabian Hedin <fabian@depict.ai>",
-    "Sverre Westerlund <sverre@depict.ai>",
-    "Joakim Olsson <joakim.olsson@depict.ai>",
-    "Arnaud Cortisse <arnaud@depict.ai>",
-    "Carl Riis <carl@depict.ai>"
-  ],
-  "license": "MIT",
-  "devDependencies": {
-    "sassdoc": "^2.7.4"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}