@pinuts/bsr-uikit-relaunch 0.0.3

package/dist/styles/_ariakit_combobox.scss

@@ -0,0 +1,279 @@
+@import "./variables/variables";
+
+
+.comboboxWrapper {
+    position: relative;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+
+    .combobox {
+        border: 0;
+        outline: 0;
+        width: 100%;
+        padding-left: 0;
+        padding-right: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+        border-radius: $base-gap;
+        text-overflow: ellipsis;
+    }
+
+    .combobox:focus{
+        border:  $bsr-black-90;
+    }
+
+    .combobox[data-focus-visible] {
+        outline: $bsr-black-90;
+    }
+
+    input {
+        height: 100%;
+        text-overflow: ellipsis;
+    }
+
+    input:focus {
+        border:  $bsr-black-90;
+    }
+
+    button {
+        height: 100%;
+        //width: $input-button-width;
+        border-radius: 0.125rem;
+        padding: 0px !important;
+        background-color: transparent !important;
+
+        &.comboboxCancel {
+            svg {
+                width: 1.25rem;
+                height: 100%;
+                color: $bsr-grey-100;
+                stroke-width:1.25pt;
+            }
+            &:focus {
+                background-color: transparent !important;
+            }
+        }
+
+        &:active {
+            box-shadow: none !important;
+        }
+    }
+
+    // BMSK-AddresdField
+    &.focused, &:focus, &:focus-within {
+        box-shadow: $bsr-shadow-default !important;
+        background-color: $white;
+    }  
+
+    &.dark {
+        background-color: $bsr-light-brown-100;
+    }
+}
+
+.comboboxCancel {
+    width: fit-content;
+    background-color: transparent !important;
+    svg {
+        width: 1.25rem;
+        height: 100%;
+        color: $bsr-grey-100;
+        stroke-width: 1.25pt;
+    }
+}
+
+.comboboxPopoverWrapper {
+
+    // popover darf kein outline haben
+    :focus-visible {
+        outline: 0;
+        border: 0;
+    }
+
+    .popover {
+        position: absolute;
+        top: -3px;
+        left: 0;
+        z-index: 1000;
+        display: block;
+        max-width: none;
+        box-shadow: $bsr-shadow-default;
+        border-radius: $border-radius;
+    }
+
+    div[role="listbox"] {
+        overflow-x: hidden;
+        border-radius: $border-radius;
+        border-color: currentColor;
+        //max-height: min(var(--popover-available-height, $popover-max-height), $popover-max-height);
+        //max-height: $popover-max-height;
+        padding: 0.3rem;
+
+        div[role="option"] {
+            font-weight: $sub-headline-font-size;
+            white-space: normal;
+
+            &:active, &:hover {
+                color: $bsr-black-90 !important;
+            }
+
+            &[aria-selected=true], &[aria-selected=true].selected {
+                box-shadow: 0 0 0 2px #fff, 0 0 0 4px $primary;
+                border-color: $primary;
+                outline: 0;
+
+                &:active, &:hover {
+                    color: $white;
+                }
+            }
+
+            &[aria-selected=true].selected {
+                background-color: $primary !important;
+                color: $white;
+            }
+            &.selected {
+                box-shadow: none;
+                background-color: $primary !important;
+                color: $white;
+
+                &:hover {
+                    color: $white !important;
+                }
+                &::after {
+                    content: "✔";
+                    margin-inline-start: 0.5rem;
+                }
+            }
+        }
+    }
+}
+
+.rowDark {
+    .comboboxWrapper {
+        .comboboxArrow, .comboboxCancel {
+            background-color: transparent;
+        }
+    }
+}
+
+.disabled {
+    pointer-events: none;
+    background-color:  $bsr-grey-100;
+}
+
+// Tags for MultiSelectField
+.tagGrid {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    height: fit-content;
+    min-height: 3rem;
+    padding: 0;
+
+    &.focused, &:focus-within, &:focus {
+        box-shadow: $bsr-shadow-default !important;
+        background-color: $white;
+    }
+
+    .inputRow {
+        width: 100%;
+        overflow: auto;
+        display: flex;
+        flex-wrap: wrap;
+        max-height: 3rem;
+
+        .tag {
+            background-color: $bsr-grey-100;
+            border: 0;
+            border-radius: 1rem;
+            margin-inline: 0.25rem;
+            margin-block: 0.25rem;
+
+            &:first-child {
+                margin-inline-start: 0.5rem;;
+            }
+        }
+
+        .tagRemove {
+            padding-inline-start: 0.5rem;
+            font-weight: 600;
+            font-size: 0.8rem;
+        }
+        
+        .combobox {
+            border: 0;
+            padding: 0.375rem 0.75rem;
+            border-radius: 0.25rem;
+            flex-grow: 1;
+
+            &:focus, &:active, &:hover {
+                outline: none;
+            }
+        }
+    }
+}
+
+.comboboxMultiSelectPopover {
+    position: relative;
+    top: -2px;
+    z-index: 10000;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    overscroll-behavior: contain;
+    //border: 1px solid $popover-border-color !important;
+    border-radius: $border-radius;
+
+    background-color: $white;
+    padding: 0.4rem;
+    padding-top: 0.4rem;
+    color: hsl(204 4% 0%);
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    //box-shadow: $popover-box-shadow;
+    //max-height: $popover-max-height;
+
+    div[data-active-item=true] {
+        box-shadow: $bsr-shadow-default;
+        border-color: $primary;
+        outline: 0;
+    }
+    div[role=option] {
+        
+        font-weight: 600;
+        border-radius: 0.25rem;
+        padding: 0.25rem;
+
+        &:focus, &:hover {
+            background-color: $bsr-brown-100;
+            color: $bsr-black-90;
+            cursor: pointer;
+        }
+
+        &[aria-selected=true] {
+            background-color: $primary;
+            color: $white;
+            border-color: $primary;
+            outline: 0;
+        }
+
+        &:not(:last-child) {
+            margin-bottom: 0.25rem;
+        }
+
+        &[aria-selected="true"].selected {
+            &::after {
+                content: "✔";
+                margin-inline-start: 0.5rem;
+            }
+        }
+    }   
+}
+
+.pagination {
+    button[role="combobox"]{
+        height: fit-content;
+    }
+}

package/dist/styles/_colors.scss

@@ -0,0 +1,165 @@
+// All HBS Colors
+$hbs-rot:rgba(227, 5, 19, 1);
+$hbs-rot-50: tint-color($hbs-rot, 50%);
+$hbs-rot-40: tint-color($hbs-rot, 60%);
+$hbs-rot-30: tint-color($hbs-rot, 70%);
+$hbs-rot-20: tint-color($hbs-rot, 80%);
+$hbs-rot-10: tint-color($hbs-rot, 90%);
+
+$hbs-orange:rgba(239, 124, 0, 1);
+$hbs-orange-50: tint-color($hbs-orange, 50%);
+$hbs-orange-40: tint-color($hbs-orange, 60%);
+$hbs-orange-30: tint-color($hbs-orange, 70%);
+$hbs-orange-20: tint-color($hbs-orange, 80%);
+$hbs-orange-10: tint-color($hbs-orange, 90%);
+
+$hbs-pink:rgba(214, 0, 126, 1);
+$hbs-pink-50: tint-color($hbs-pink, 50%);
+$hbs-pink-40: tint-color($hbs-pink, 60%);
+$hbs-pink-30: tint-color($hbs-pink, 70%);
+$hbs-pink-20: tint-color($hbs-pink, 80%);
+$hbs-pink-10: tint-color($hbs-pink, 90%);
+
+$hbs-lila:rgba(110, 53, 139, 1);
+$hbs-lila-50: tint-color($hbs-lila, 50%);
+$hbs-lila-40: tint-color($hbs-lila, 60%);
+$hbs-lila-30: tint-color($hbs-lila, 70%);
+$hbs-lila-20: tint-color($hbs-lila, 80%);
+$hbs-lila-10: tint-color($hbs-lila, 90%);
+
+$hbs-gruen: rgba(14, 150, 93, 1);
+$hbs-gruen-50: tint-color($hbs-gruen, 50%);
+$hbs-gruen-40: tint-color($hbs-gruen, 60%);
+$hbs-gruen-30: tint-color($hbs-gruen, 70%);
+$hbs-gruen-20: tint-color($hbs-gruen, 80%);
+$hbs-gruen-10: tint-color($hbs-gruen, 90%);
+
+$hbs-tuerkis:rgba(95, 187, 201, 1);
+$hbs-tuerkis-50: tint-color($hbs-tuerkis, 50%);
+$hbs-tuerkis-40: tint-color($hbs-tuerkis, 60%);
+$hbs-tuerkis-30: tint-color($hbs-tuerkis, 70%);
+$hbs-tuerkis-20: tint-color($hbs-tuerkis, 80%);
+$hbs-tuerkis-10: tint-color($hbs-tuerkis, 90%);
+
+$hbs-blau:rgb(0, 130, 173);
+$hbs-blau-50: tint-color($hbs-blau, 50%);
+$hbs-blau-40: tint-color($hbs-blau, 60%);
+$hbs-blau-30: tint-color($hbs-blau, 70%);
+$hbs-blau-20: tint-color($hbs-blau, 80%);
+$hbs-blau-10: tint-color($hbs-blau, 90%);
+
+$hbs-sand: rgba(228, 225, 205, 1);
+$hbs-sand-50: tint-color($hbs-sand, 50%);
+$hbs-sand-40: tint-color($hbs-sand, 60%);
+$hbs-sand-30: tint-color($hbs-sand, 70%);
+$hbs-sand-20: tint-color($hbs-sand, 80%);
+$hbs-sand-10: tint-color($hbs-sand, 90%);
+
+$hbs-schwarz: rgb(0, 0, 0);
+$hbs-schwarz-60: tint-color($hbs-schwarz, 40%);
+$hbs-schwarz-50: tint-color($hbs-schwarz, 50%);
+$hbs-schwarz-40: tint-color($hbs-schwarz, 60%);
+$hbs-schwarz-30: tint-color($hbs-schwarz, 70%);
+$hbs-schwarz-20: tint-color($hbs-schwarz, 80%);
+$hbs-schwarz-10: tint-color($hbs-schwarz, 90%);
+
+$hbs-white: rgba(255, 255, 255, 1);
+
+// for mapping
+// use bg-tuerkis or btn-blau etc...
+$hbs-colors: (
+    "rot": $hbs-rot,
+    "rot-50": $hbs-rot-50,
+    "rot-40": $hbs-rot-40,
+    "rot-30": $hbs-rot-30,
+    "rot-20": $hbs-rot-20,
+    "rot-10": $hbs-rot-10,
+
+    "orange": $hbs-orange,
+    "orange-50": $hbs-orange-50,
+    "orange-40": $hbs-orange-40,
+    "orange-30": $hbs-orange-30,
+    "orange-20": $hbs-orange-20,
+    "orange-10": $hbs-orange-10,
+
+    "pink": $hbs-pink,
+    "pink-50": $hbs-pink-50,
+    "pink-40": $hbs-pink-40,
+    "pink-30": $hbs-pink-30,
+    "pink-20": $hbs-pink-20,
+    "pink-10": $hbs-pink-10,
+
+    "lila": $hbs-lila,
+    "lila-50": $hbs-lila-50,
+    "lila-40": $hbs-lila-40,
+    "lila-30": $hbs-lila-30,
+    "lila-20": $hbs-lila-20,
+    "lila-10": $hbs-lila-10,
+
+    "tuerkis": $hbs-tuerkis,
+    "tuerkis-50": $hbs-tuerkis-50,
+    "tuerkis-40": $hbs-tuerkis-40,
+    "tuerkis-30": $hbs-tuerkis-30,
+    "tuerkis-20": $hbs-tuerkis-20,
+    "tuerkis-10": $hbs-tuerkis-10,
+
+    "blau": $hbs-blau,
+    "blau-50": $hbs-blau-50,
+    "blau-40": $hbs-blau-40,
+    "blau-30": $hbs-blau-30,
+    "blau-20": $hbs-blau-20,
+    "blau-10": $hbs-blau-10,
+
+    "sand": $hbs-sand,
+    "sand-50": $hbs-sand-50,
+    "sand-40": $hbs-sand-40,
+    "sand-30": $hbs-sand-30,
+    "sand-20": $hbs-sand-20,
+    "sand-10": $hbs-sand-10,
+
+    "schwarz": $hbs-schwarz,
+    "schwarz-60": $hbs-schwarz-60,
+    "schwarz-50": $hbs-schwarz-50, // a11y: not to be used as font color! contrast to white bg not enought accessible
+    "schwarz-40": $hbs-schwarz-40,
+    "schwarz-30": $hbs-schwarz-30,
+    "schwarz-20": $hbs-schwarz-20,
+    "schwarz-10": $hbs-schwarz-10,
+
+    "weiss": $hbs-white, // duplicate for consitency in naming
+    "white": $hbs-white,
+);
+$bsr-bg-grey:  #F2F2F2;
+$hbs-warning-bg: $hbs-orange-10;
+$hbs-danger-bg: $hbs-pink-10;
+
+//Theme Colors
+$primary: $hbs-rot;
+$secondary: $hbs-tuerkis;
+$success: rgba(14, 150, 93, 1);
+$info: $hbs-blau;
+$warning: $hbs-orange;
+$danger: $hbs-pink;
+$blue: $hbs-blau;
+$dark: $hbs-schwarz;
+$gray: rgb(102, 102, 102); // $hbs-schwarz-60;
+$white: $hbs-white;
+$text-color: $hbs-schwarz;
+// theme color remapping
+$theme-colors: (
+  "primary": $hbs-rot,
+  "secondary": $secondary,
+  "success": $hbs-gruen,
+  "warning": $hbs-orange,
+  "danger": $hbs-pink,
+  "info": $hbs-blau,
+  "blue": $hbs-blau,
+  "dark": $hbs-schwarz,
+  "gray": $gray,
+  "white": $hbs-white,
+  "text-color": $hbs-schwarz,
+);
+
+$hbs-success-lightest: tint-color($success, 80%);
+$hbs-danger-lightest: tint-color($danger, 80%);
+$hbs-warning-lightest: tint-color($warning, 80%);
+$hbs-info-lightest: tint-color($info, 80%);