@ambita/design-system 4.0.5 → 5.0.1

package/dist/css/colors-css-variables.scss

@@ -1,65 +0,0 @@
-@import './colors-scss-variables';
-
-/* Do not use if you need IE11 support */
-:root {
-  /* Purple */
-  --aux-purple: #{$aux-purple};
-  --aux-purple-1: #{$aux-purple-1};
-  --aux-purple-2: #{$aux-purple-2};
-  --aux-purple-3: #{$aux-purple-3};
-  --aux-purple-4: #{$aux-purple-4};
-  --aux-purple-5: #{$aux-purple-5};
-  --aux-purple-6: #{$aux-purple-6};
-  --aux-purple-7: #{$aux-purple-7};
-  --aux-purple-8: #{$aux-purple-8};
-
-  /* Dark Purple */
-  --aux-dark-purple: #{$aux-dark-purple};
-  --aux-dark-purple-1: #{$aux-dark-purple-1};
-  --aux-dark-purple-2: #{$aux-dark-purple-2};
-  --aux-dark-purple-3: #{$aux-dark-purple-3};
-  --aux-dark-purple-4: #{$aux-dark-purple-4};
-  --aux-dark-purple-5: #{$aux-dark-purple-5};
-  --aux-dark-purple-6: #{$aux-dark-purple-6};
-  --aux-dark-purple-7: #{$aux-dark-purple-7};
-  --aux-dark-purple-8: #{$aux-dark-purple-8};
-
-  /* Mint green */
-  --aux-mint: #{$aux-mint};
-  --aux-mint-1: #{$aux-mint-1};
-  --aux-mint-2: #{$aux-mint-2};
-  --aux-mint-3: #{$aux-mint-3};
-  --aux-mint-4: #{$aux-mint-4};
-  --aux-mint-5: #{$aux-mint-5};
-  --aux-mint-6: #{$aux-mint-6};
-  --aux-mint-7: #{$aux-mint-7};
-  --aux-mint-8: #{$aux-mint-8};
-
-  /* Grey */
-  --aux-grey-1: #{$aux-grey-1};
-  --aux-grey-2: #{$aux-grey-2};
-  --aux-grey-3: #{$aux-grey-3};
-  --aux-grey-4: #{$aux-grey-4};
-  --aux-grey-5: #{$aux-grey-5};
-  --aux-grey-6: #{$aux-grey-6};
-
-  /* Supports */
-  --aux-red: #{$aux-red};
-  --aux-red-1: #{$aux-red-1};
-
-  --aux-blue: #{$aux-blue};
-  --aux-blue-2: #{$aux-blue-2};
-
-  --aux-yellow: #{$aux-yellow};
-  --aux-yellow-1: #{$aux-yellow-1};
-  --aux-yellow-2: #{$aux-yellow-2};
-
-  --aux-green: #{$aux-green};
-  --aux-white: #{$aux-white};
-  --aux-black: #{$aux-black};
-  --aux-focus: #{$aux-focus};
-
-  /* Borders */
-  --aux-border-1-grey-1: 1px solid #{$aux-grey-1};
-  --aux-border-2-grey-1: 2px solid #{$aux-grey-1};
-}

package/dist/css/colors-scss-variables.scss

@@ -1,60 +0,0 @@
-// Purple
-$aux-purple: #8237dc;
-$aux-purple-1: #e6d7f8;
-$aux-purple-2: #cdaff1;
-$aux-purple-3: #b487ea;
-$aux-purple-4: #9b5fe3;
-$aux-purple-5: #682cb0;
-$aux-purple-6: #4e2184;
-$aux-purple-7: #341658;
-$aux-purple-8: #1a0b2c;
-
-// Dark Purple
-$aux-dark-purple: #360076;
-$aux-dark-purple-1: #d8cde6;
-$aux-dark-purple-2: #b098c6;
-$aux-dark-purple-3: #8666ac;
-$aux-dark-purple-4: #5f3591;
-$aux-dark-purple-5: #2d1c5b;
-$aux-dark-purple-6: #200e47;
-$aux-dark-purple-7: #1a0f2e;
-$aux-dark-purple-8: #110b18;
-
-// Mint
-$aux-mint: #34d9c3;
-$aux-mint-1: #d8efee;
-$aux-mint-2: #b5e1dd;
-$aux-mint-3: #93d4d0;
-$aux-mint-4: #72cac3;
-$aux-mint-5: #26ae9b;
-$aux-mint-6: #218376;
-$aux-mint-7: #14584e;
-$aux-mint-8: #0a2b26;
-
-// Grey
-$aux-grey-1: #e1e1e1;
-$aux-grey-2: #d2d2d2;
-$aux-grey-3: #bebebe;
-$aux-grey-4: #afafaf;
-$aux-grey-5: #555555;
-$aux-grey-6: #333333;
-
-// Supports
-$aux-red: #ac1631;
-$aux-red-1: #ffe5e5;
-
-$aux-blue: #0067a3;
-$aux-blue-2: #c2e0f2;
-
-$aux-yellow: #ecd025;
-$aux-yellow-1: #fff3a8;
-$aux-yellow-2: #f2c94c;
-
-$aux-green: #5cb85c;
-$aux-white: #fff;
-$aux-black: #000;
-$aux-focus: #003eff;
-
-// Borders
-$aux-border-1-grey-1: 1px solid $aux-grey-1;
-$aux-border-2-grey-1: 2px solid $aux-grey-1;

package/dist/css/mixins.scss

@@ -1,147 +0,0 @@
-$aux-focus-indicator-style:
-  0 0 0 3px $aux-white,
-  0 0 0 6px $aux-focus;
-
-@mixin aux-focus-indicator {
-  & {
-    outline: none;
-  }
-
-  /**
-   * Safari does not support :focus-visible.
-   * Merging the rules below will break the
-   * focus functionality.
-   */
-  &:focus {
-    box-shadow: $aux-focus-indicator-style;
-  }
-
-  &:focus-visible {
-    /* This has to be slightly different from the focus rule above. */
-    box-shadow:
-      $aux-focus-indicator-style,
-      0 0 0 0px transparent;
-  }
-
-  .aux-validation-wrapper--haserror &:focus-visible {
-    /* This has to be slightly different from the focus rule above. */
-    box-shadow:
-      0 0 0px 1px $aux-red,
-      $aux-focus-indicator-style,
-      0 0 0 0px transparent;
-  }
-
-  &:focus:not(:focus-visible) {
-    box-shadow: none;
-  }
-}
-
-@mixin aux-visually-hidden {
-  clip: rect(0 0 0 0);
-  clip-path: inset(100%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
-@mixin aux-sr-only {
-  &:not(:focus):not(:active) {
-    @include aux-visually-hidden;
-  }
-}
-
-@mixin aux-input-error {
-  .aux-validation-wrapper--haserror & {
-    border-color: $aux-red;
-    box-shadow: 0 0 0px 1px $aux-red;
-  }
-}
-
-@mixin aux-input-radio-checkbox-error {
-  .aux-validation-wrapper--haserror input + label::before {
-    border-color: $aux-red;
-    box-shadow: 0 0 0px 1px $aux-red;
-  }
-
-  .aux-validation-wrapper--haserror input:focus-visible + label::before {
-    box-shadow:
-      0 0 0px 1px $aux-red,
-      $aux-focus-indicator-style;
-  }
-
-  .aux-validation-wrapper--haserror .aux-card-layout::before {
-    border-color: $aux-red;
-    box-shadow: 0 0 0px 1px $aux-red;
-  }
-}
-
-@mixin aux-card-layout {
-  cursor: pointer;
-  display: block;
-  padding-bottom: 11px;
-  padding-top: 15px;
-  padding-left: 47px;
-  padding-right: 15px;
-  box-shadow: 0 2px 5px $aux-grey-4;
-  width: fit-content;
-  width: 100%;
-  border-radius: 3px;
-  position: relative;
-  font-family: ff-din-round-web, sans-serif;
-
-  &::before {
-    content: '';
-    width: 20px;
-    height: 20px;
-    display: block;
-    border: 1px solid $aux-grey-5;
-    background: $aux-white;
-    position: absolute;
-    left: 15px;
-    cursor: pointer;
-  }
-
-  & + .aux-card-layout {
-    margin-top: 10px;
-  }
-
-  &--selected {
-    background: $aux-mint-1;
-    outline: 1px solid $aux-mint-6;
-  }
-
-  &--disabled {
-    cursor: default;
-
-    &::before {
-      cursor: default;
-      background: $aux-grey-3;
-      border: 1px solid $aux-grey-3;
-    }
-  }
-
-  &:not(.aux-card-layout--disabled):hover {
-    color: $aux-dark-purple;
-    &::before {
-      border-color: $aux-dark-purple;
-    }
-  }
-
-  &:not(.aux-card-layout--selected):not(.aux-card-layout--disabled):hover::before {
-    background-color: $aux-mint-1;
-  }
-
-  &:has(:focus-visible) {
-    box-shadow: $aux-focus-indicator-style;
-  }
-
-  & input {
-    @include aux-visually-hidden;
-  }
-}
-
-@mixin aux-card-layout--box-shadow {
-  box-shadow: 0 2px 5px $aux-grey-4;
-}