@pinuts/bsr-uikit-relaunch 0.0.3

package/dist/styles/form.module.scss

@@ -0,0 +1,252 @@
+@use 'sass:math';
+@import "./variables/variables";
+
+// GENERAL INPUT STYLES
+.topRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 $base-gap * 4 0 $base-gap * 0.5;
+
+  .label {
+    font-family: "TradeGothic";
+    font-size: $input-label-font-size;
+    font-weight: $fontweight-bold;
+    line-height: $input-label-line-height;
+    letter-spacing: $letter-spacing-xs;
+    color: #5f6a72;
+    margin-bottom: 0;
+
+    .required {
+      margin-inline-start: $base-gap;
+    }
+
+    &.labelFocused, .required {
+      color: $bsr-black-90;
+    }
+  }
+
+  .infoRow {
+    display: flex;
+    gap: $base-gap;
+    position: relative;
+
+    .info, .success {
+      display: flex;
+      height: 18px;
+      position: relative;
+
+      .tooltip {
+        display: flex;
+        visibility: hidden;
+        position: absolute;
+        max-width: 350px;
+        width: max-content;
+        padding: $base-gap * 4;
+        align-items: center;
+        gap: $base-gap * 4;
+        align-self: stretch;
+        bottom: 30px;
+        left: -32px;
+        border-radius: $base-gap;
+        background: $bsr-white-100;
+        box-shadow: $bsr-shadow-default;
+
+        &::after {
+          content: "";
+          width: 20px;
+          height: 20px;
+          border-radius: $base-gap;
+          background: $bsr-white-100;
+          position: absolute;
+          bottom: -10px;
+          left: 30px;
+          transform: rotate(45deg);
+        }
+
+        &.adjustRight {
+          left: auto;
+          right: -40px;
+
+          &::after {
+            content: "";
+            bottom: -10px;
+            right: 40px;
+            left: initial;
+          }
+        }
+
+        &:hover {
+          visibility: visible;
+        }
+
+        &.bottom {
+          bottom: initial;
+          top: 35px;
+
+          &::after {
+            bottom: initial;
+            top: -10px;
+          }
+        }
+      }
+
+      &:hover {
+        .tooltip {
+          display: flex;
+          visibility: visible;
+        }
+      }
+    }
+  }
+}
+
+.input,
+.select,
+.textarea {
+  font-family: "TradeGothicNextLT";
+  font-size: $inputField-font-size;
+  font-weight: $fontweight-normal;
+  line-height: $inputField-line-height;
+  letter-spacing: $letter-spacing-xs;
+  color: $bsr-grey-100;
+  background: $bsr-white-100;
+  border: $bsr-border-width-m solid $bsr-border-color-default;
+  border-radius: $border-radius-sm;
+  padding: ($base-gap * 2) ($base-gap * 4);
+  gap: ($base-gap * 2);
+  align-items: flex-start;
+  align-self: stretch;
+
+  &:focus, &:focus-visible, &:active {
+    color: $bsr-black-90;
+    border-color: currentColor;
+    outline: $bsr-border-width-m solid currentColor;
+  }
+}
+
+// SELECT INPUT
+.select {
+  appearance:none;
+  background-image: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 12 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 0.75L6 5.25L10.5 0.75' stroke='%231E1E1E' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  background-position-x: calc(100% - #{$base-gap * 4});
+  background-position-y: center;
+  background-repeat: no-repeat;
+
+
+  &:focus-visible {
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 12 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 5.25L6 0.75L10.5 5.25' stroke='%231E1E1E' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  }
+}
+
+
+// TEXT INPUT
+.formInput {
+  display: flex;
+  flex-direction: column;
+  gap: ($base-gap * 2);
+  margin-bottom: $base-gap * 5;
+
+  ul {
+    list-style-type: none;
+    list-style: none;
+
+    li {
+      list-style-type: none;
+      list-style: none;
+    }
+  }
+
+  &.error {
+    input {
+      color: $error;
+      border-color: transparent;
+      outline: $bsr-border-width-l solid $bsr-border-color-error;
+    }
+
+    .errorMessage {
+      color: $error;
+      display: flex;
+      align-items: center;
+      font-size: $input-label-font-size;
+      line-height: $input-label-line-height;
+
+      .errorMessageIcon {
+        align-self: flex-start;
+        min-width: 18px;
+        margin-inline-end: $base-gap * 2;
+        // transform: translateY($base-gap);
+      }
+    }
+  }
+
+  .helperText {
+      color: $bsr-black-60;
+      font-size: $input-label-font-size;
+      line-height: $input-label-line-height;
+  }
+
+  [aria-disabled="true"] {
+    input, label {
+      color: $bsr-black-40;
+      border-color: $bsr-black-40;
+      pointer-events: none;
+    }
+
+    input {
+      background: $bsr-black-10;
+    }
+  }
+}
+
+// GROUP INPUT
+.groupInputList {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: $base-gap * 2 $base-gap * 5;
+  flex-wrap: wrap;
+
+  li {
+    display: inline-flex;
+    align-items: center;
+  }
+}
+
+// RADIO INPUT
+input[type="radio"] {
+  height: $base-gap * 6;
+  width: $base-gap * 6;
+  position: relative;
+  appearance: none;
+  border-radius: 5000px;
+  border-color: black;
+  outline: 3.4px solid white;
+  outline-offset: $bsr-border-width-m * -1 - 3px;
+  margin-right: $base-gap * 3;
+
+  &:hover, &:active, &:focus-visible, &:focus {
+    cursor: pointer;
+    background-color: $bsr-grey-100;
+    border-width: 2px;
+    outline: 2px solid white;
+    outline-offset: -4px;
+  }
+
+  &:checked {
+    background-color: $bsr-orange-100;
+  }
+
+  + label {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .formInput.error & {
+    border-color: $error;
+    border-width: 2px;
+    outline: 2px solid white;
+    outline-offset: $bsr-border-width-m * -1 - 3px;
+  }
+}

package/dist/styles/main.scss

@@ -0,0 +1,18 @@
+@use 'sass:math';
+@import "./variables/variables";
+@import "./ariakit_combobox";
+
+.sr-only {
+  display: none;
+}
+
+[aria-disabled="true"] {
+  input, label {
+    color: $bsr-black-40;
+    border-color: $bsr-black-40;
+    pointer-events: none;
+  }
+  input {
+    background: $bsr-black-10;
+  }
+}

package/dist/styles/module-variables.scss

@@ -0,0 +1,13 @@
+// Das sind die Variablen, die in den Modulen importiert werden.
+// Das sind nur dummy-Werte, die später überschrieben werden.
+// In den Modulen darf auf keinen Falls das Bootstrap und/oder die globalen variables.scss importiert werden!!!
+// in dieser Datei darf kein !default oder !important verwendet werden, da die Variablen überschrieben werden müssen.
+$bsr-blau: #0071BC;
+$bsr-pink: #D6007E;
+$bsr-rot: #E60000;
+$focus-shadow: 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 5px rgba($bsr-blau, 0.35);
+$focus-shadow-danger: 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 5px rgba($bsr-pink, 0.35);
+$step-shadow: -1px -2px 1px -2px #FFFFFF, 0px 0px 0px 5px rgba($bsr-blau, 0.35);
+$bsr-bg-grey:  #F2F2F2;
+$danger: rgba(214, 0, 126, 1);
+$gray: $bsr-bg-grey;

package/dist/styles/variables/_borders.scss

@@ -0,0 +1,26 @@
+$bsr-border-width-s: 1px;
+$bsr-border-width-m: 1.4px;
+$bsr-border-width-l: 2px;
+$bsr-border-width-xl: 3px;
+
+$bsr-border-color-default: $bsr-grey-100;
+$bsr-border-color-active: $dark;
+$bsr-border-color-filled: $dark;
+$bsr-border-color-disabled: $bsr-black-40;
+$bsr-border-color-error: $danger;
+
+$bsr-border-color-primary: $primary;
+$bsr-border-color-secondary: $secondary;
+$bsr-border-color-success: $success;
+$bsr-border-color-warning: $warning;
+$bsr-border-color-danger: $danger;
+$bsr-border-color-info: $info;
+$bsr-border-color-dark: $dark;
+
+$border-radius-sm: 4px;
+$border-radius: 12px;
+$border-radius-lg: 20px;
+
+$bsr-underline-width: 1.4px;
+
+$box-border-radius: $base-gap * 3;

package/dist/styles/variables/_buttons.scss

@@ -0,0 +1,147 @@
+$btn-border-radius: $border-radius-lg;
+$btn-padding-x: $base-gap * 6;
+$btn-padding-y: calc($base-gap * 2 - 1px);
+
+.btn {
+    text-decoration: underline;
+    text-decoration-color: transparent;
+    transition-duration: 0.15s;
+    transition-timing-function: ease-in-out;
+    display: inline-flex;
+    align-items: center;
+    border-width: $bsr-border-width-m;
+
+    &[class*="btn-outline-"]:not([class*="btn-outline-light"]){
+        --bs-btn-bg: #{$bsr-white-100};
+
+        &:hover:not([aria-disabled="true"]){
+            border-color: $bsr-white-100;
+        }
+    }
+    &[class*="btn-outline-light"]:hover {
+        background-color: $bsr-white-100;;
+        color: $text-secondary;
+        border-color: $bsr-white-100;
+    }
+
+    &:hover {
+        text-decoration-color: currentColor;
+        
+        &:not([class*="btn-outline-"]):not([class*="teaserBtnAtom"]):not([class*="editingBtnAtom"]):not([class*="iconOnlyBtnAtom"]) {
+
+            background-color: $bsr-white-100;
+            color: $bsr-brick-100;
+            border-color: var(--bs-btn-bg);
+            
+            &[class*="btn-light"] {
+                background-color: $bsr-brick-100;
+                color: $bsr-white-100;
+            }
+
+            &[aria-disabled="true"]:not([class*="btn-outline-light"]) {
+                background-color: $bsr-black-90;
+                color: $bsr-white-100;
+                border-color: $bsr-black-90;
+            }
+        }
+
+    }
+
+    &:active {
+            text-decoration: none;
+    }
+
+    &[aria-disabled="true"], .disabled, &:disabled {
+        text-decoration: none;
+
+        @each $color, $value in $theme-colors {
+            @if $color == "light" {
+                &.btn-#{$color} {
+                    background-color: $value;
+                    border-color: currentColor;
+                    color: $bsr-brick-100;
+                    opacity: .4;
+                    cursor: not-allowed;
+                }
+
+                &.btn-outline-#{$color} {
+                    background-color: transparent;
+                    border-color: $value;
+                    color: $value;
+                    opacity: .4;
+                    cursor: not-allowed;
+                }
+            } @else {
+                &.btn-#{$color} {
+                    background-color: shade-color($value, 100%) !important;
+                    border-color: shade-color($value, 100%);
+                    color: color-contrast(shade-color($value, 100%), $bsr-black-90, $bsr-white-100);
+                    opacity: .4;
+                    cursor: not-allowed;
+                }
+
+                &.btn-outline-#{$color} {
+                    background-color: transparent;
+                    border-color: shade-color($value, 100%);
+                    color: shade-color($value, 100%);
+                    opacity: .4;
+                    cursor: not-allowed;
+                }
+            }
+        }
+    }
+}
+
+.btn.btn-light {
+    --bs-btn-color: #{$bsr-brick-100};
+    &:hover {
+        &[aria-disabled="true"]{
+            background-color: $bsr-white-100 !important;
+            color: $bsr-brick-100 !important;
+            border-color: $bsr-brick-100 !important;
+        }
+    }
+}
+
+.btn.btn-outline-light {
+    --bs-btn-hover-color: #{$bsr-brick-100} !important;
+    background: $bsr-brick-100;
+
+    &.btn:active {
+        --bs-btn-active-color: #{$bsr-brick-100};
+    }
+}
+
+.btn[class*="editingBtnAtom"] {
+    font-size: $editingBtn-font-size;
+    line-height: $editingBtnAtom-line-height;
+    letter-spacing: $letter-spacing-xs;
+    font-weight: $fontweight-bold;
+    &[aria-disabled="true"] {
+        opacity: 0.4;
+    }
+}
+
+.btn[class*="iconOnlyBtnAtom"]:not([class*="btn-outline-brick"]) {
+    padding: 0;
+    background-color: $secondary !important;
+    color: $light !important;
+    border-color: $secondary !important;
+    text-decoration: none;
+
+    &:hover,
+    &:focus,
+    &:active {
+        background-color: $white !important;
+        color: $text-secondary !important;
+        border-color: $secondary !important;
+        text-decoration: underline;
+        border-width: $bsr-border-width-m !important;
+    }
+
+    &:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+}

package/dist/styles/variables/_colors.scss

@@ -0,0 +1,109 @@
+/* colors
+================================================== */
+
+$min-contrast-ratio: 4.5;
+
+// Primary
+$bsr-orange-100: #F66504;
+$bsr-orange-90: #F6741D;
+$bsr-orange-80: #F68234;
+$bsr-orange-70: #F6914D;
+$bsr-orange-60: #F69F64;
+$bsr-orange-50: #F5AC7C;
+
+// Secondary
+$bsr-brick-100: #D74116;
+
+// Black & White
+$bsr-black-90: #1E1E1E;
+$bsr-white-100: #FFFFFF;
+
+// Additional
+$bsr-red-orange-100: #E5271A;
+$bsr-bright-blue-100: #0092BD;
+$bsr-blue-100: #0055AA;
+$bsr-light-green-100: #94C11C;
+$bsr-green-100: #018850;
+$bsr-yellow-100: #fdc900;
+$bsr-sun-orange-100: #E9530E;
+$bsr-rust-orange-100: #BD461E;
+$bsr-brown-100: #712d24;
+$bsr-light-brown-100: #7A4A39;
+$bsr-grey-100: #5f6a72;
+$bsr-red-100: #E42C1B;
+
+// Neutrals
+$bsr-black-60: #808080;
+$bsr-black-50: #A0A0A0;
+$bsr-black-40: #B4B4B4;
+$bsr-black-30: #CACACA;
+$bsr-black-20: #DDDDDD;
+$bsr-black-10: #EEEEEE;
+
+// Theme colors
+$primary: $bsr-orange-100;
+$secondary: $bsr-brick-100;
+$success: $bsr-green-100;
+$info: $bsr-bright-blue-100;
+$warning: $bsr-yellow-100;
+$danger: $bsr-red-orange-100;
+$error: $bsr-red-100;
+$light: $bsr-white-100;
+$dark: $bsr-black-90;
+$white: $bsr-white-100;
+$black: $bsr-black-90;
+
+$colors: (
+    "primary":    $primary,
+    "secondary":  $secondary,
+    "success":    $success,
+    "info":       $info,
+    "warning":    $warning,
+    "danger":     $danger,
+    "light":      $light,
+    "dark":       $dark,
+);
+
+$theme-colors: (
+    "primary":    $primary,
+    "primary-100":$primary,
+    "primary-90": $bsr-orange-90,
+    "primary-80": $bsr-orange-80,
+    "primary-70": $bsr-orange-70,
+    "primary-60": $bsr-orange-60,
+    "primary-50": $bsr-orange-50,
+    "secondary":  $secondary,
+    "success":    $success,
+    "info":       $info,
+    "warning":    $warning,
+    "danger":     $danger,
+    "light":      $light,
+    "dark":       $dark,
+    "black":      $bsr-black-90,
+    "white":      $bsr-white-100,
+    "brick":      $bsr-brick-100,
+    "bright-blue":$bsr-bright-blue-100,
+    "blue":       $bsr-blue-100,
+    "light-green":$bsr-light-green-100,
+    "green":      $bsr-green-100,
+    "yellow":     $bsr-yellow-100,
+    "orange":    $bsr-orange-100,
+    "sun-orange": $bsr-sun-orange-100,
+    "rust-orange":$bsr-rust-orange-100,
+    "brown":      $bsr-brown-100,
+    "light-brown":$bsr-light-brown-100,
+    "grey":       $bsr-grey-100,
+);
+
+// Text colors
+$text-dark: $bsr-black-90;
+$text-light: $bsr-white-100;
+$text-primary: $bsr-orange-100;
+$text-secondary: $bsr-brick-100;
+
+:export {
+    grey100: $bsr-grey-100;
+    white: $bsr-white-100;
+}
+// Background-shadow (Modal)
+$modal-bg-color: rgb(30, 30, 30, 0.8); // #1E1E1ECC

package/dist/styles/variables/_focus.scss

@@ -0,0 +1,9 @@
+/*********
+FOCUS
+*********/
+
+@mixin buttonFocus {
+  outline: solid 2px #000!important;
+  border: none;
+  box-shadow: none;
+}

package/dist/styles/variables/_fonts.scss

@@ -0,0 +1,101 @@
+$fontsize-base: 18px;
+
+// Font sizes
+$h1-fontsize: 48px;
+$h2-fontsize: 36px;
+$h3-fontsize: 28px;
+
+$h1-fontsize-sm: 32px;
+$h2-fontsize-sm: 24px;
+$h3-fontsize-sm: 20px;
+
+$sub-headline-font-size: 24px;
+$sub-headline-font-size-sm: 18px;
+
+$quote-font-size: 28px;
+$quote-font-size-sm: 22px;
+
+$intro-text-font-size: 20px;
+$intro-text-font-size-sm: 18px;
+
+$copy-text-small-font-size: 16px;
+
+$label-forms-font-size: 14px;
+$supporting-text-font-size: 14px;
+
+$nav-e1-font-size: 20px;
+$nav-e1-font-size-sm: 18px;
+
+$nav-e2-font-size: 20px;
+$nav-e2-font-size-sm: 18px;
+
+$nav-e3-font-size: 16px;
+
+$navigation-navLinks-font-size: 20px;
+$navigation-additionalLinks-font-size: 14px;
+
+$inputField-font-size: 18px;
+$input-label-font-size: 14px;
+$editingBtn-font-size: 14px;
+$textlink-subline-font-size: 14px;
+
+$listItem-font-size: 18px;
+
+// Line heights
+$lineheight-base: 26px;
+
+$h1-lineheight: 56px;
+$h2-lineheight: 52px;
+$h3-lineheight: 36px;
+
+$h1-lineheight-sm: 40px;
+$h2-lineheight-sm: 32px;
+$h3-lineheight-sm: 28px;
+
+$sub-headline-line-height: 36px;
+$sub-headline-line-height-sm: 28px;
+
+$quote-line-height: 36px;
+$quote-line-height-sm: 30px;
+
+$intro-text-line-height: 28px;
+$intro-text-line-height-sm: 26px;
+
+$copy-text-default-line-height: 26px;
+
+$copy-text-small-line-height: 24px;
+
+$label-forms-line-height: 20px;
+
+$supporting-text-line-height: 20px;
+
+$nav-e1-line-height: 24px;
+
+$nav-e2-line-height: 24px;
+
+$nav-e3-line-height: 20px;
+$nav-e3-line-height-sm: 22px;
+
+$button-text-line-height: 24px;
+
+$navigation-navLinks-line-height: 24px;
+$navigation-additionalLinks-line-height: 20px;
+
+$inputField-line-height: 26px;
+$input-label-line-height: 20px;
+$editingBtnAtom-line-height: 20px;
+$textlink-line-height: 26px;
+
+$listItem-line-height: 26px;
+
+// Font weights
+$fontweight-normal: 400;
+$fontweight-bold: 700;
+
+// Letter spacing
+$letter-spacing-xs: 0.2px;
+$letter-spacing-sm: 0.32px;
+$letter-spacing-md: 0.4px;
+$letter-spacing-lg: 1px;
+
+$letter-spacing-button-text: 0.036px;