elbe-ui 0.2.5 → 0.2.14

package/style/color_style.scss

@@ -0,0 +1,148 @@
+@function contrast($colorA, $colorB) {
+  $yiqA: calc(
+    ((red($colorA) * 299) + (green($colorA) * 587) + (blue($colorA) * 114)) /
+      1000
+  );
+  $yiqB: calc(
+    ((red($colorB) * 299) + (green($colorB) * 587) + (blue($colorB) * 114)) /
+      1000
+  );
+  @return abs($yiqA - $yiqB);
+}
+
+@function mg($map, $value) {
+  @return map-get($map, $value);
+}
+
+@function ifn($a, $b) {
+  @return if($a ==null, $b, $a);
+}
+
+@function inter($colorA, $colorB: #888888, $weight: 50%) {
+  @return mix($colorA, $colorB, $weight);
+}
+
+@mixin colored($back, $front, $border) {
+  color: $front;
+  background-color: $back;
+  border-color: $border;
+}
+
+@mixin blinking($length: 1s) {
+  animation: blinker $length linear infinite;
+}
+
+@keyframes blinker {
+  50% {
+    opacity: 0;
+  }
+}
+
+// SHOW WHEN THE STYLES ARE NOT BEING USED WITHIN A MODE
+@each $style, $s_colors in $c-styles {
+  .#{$style} {
+    @include blinking();
+    @include colored(rgb(255, 55, 0), white, transparent);
+  }
+}
+
+//COLORS
+
+@each $mode, $m_colors in $c-modes {
+  .#{$mode} {
+    $mode_back: mg($m_colors, back);
+    $mode_front: mg($m_colors, front);
+    $mode_border: mg($m_colors, border);
+    @include colored($mode_back, $mode_front, $mode_border);
+
+    .plain {
+      @include colored(transparent, $mode_front, $mode_border);
+    }
+
+    .plain-opaque {
+      @include colored($mode_back, $mode_front, $mode_border);
+    }
+
+    & {
+      --c-mode: #{$mode};
+    }
+
+    @each $style, $s_colors in $c-styles {
+      $back: mg($s_colors, back);
+      $border: ifn(mg($s_colors, border), $back);
+
+      $effectiveBack: ifn(
+        if(mg($s_colors, back) == transparent, $mode_back, mg($s_colors, back)),
+        $mode_back
+      );
+      $front: ifn(
+        mg($s_colors, front),
+        if(contrast($mode_front, $effectiveBack) > 128, $mode_front, $mode_back)
+      );
+
+      & {
+        --c-#{$style}: #{$back};
+      }
+
+      .#{$style} {
+        animation: none;
+
+        @include colored($back, $front, $border);
+
+        &.minor {
+          $mback: inter(mg($s_colors, back), mg($m_colors, back), 25%);
+          $mfront: mg($s_colors, back);
+          $mborder: ifn(mg($s_colors, border), $mfront);
+
+          @include colored($mback, $mfront, $mborder);
+
+          &.hovered {
+            $hback: inter($mback, $mfront, 90%);
+            @include colored($hback, $mfront, $mborder);
+          }
+
+          &.pressed {
+            $pback: inter($mback, $mfront, 75%);
+            @include colored($pback, $mfront, $mborder);
+          }
+
+          &.disabled {
+            $disback: grayscale($mback);
+            $disfront: grayscale($mfront);
+            $disborder: if($mborder ==null, null, grayscale($mborder));
+
+            @include colored($disback, $disfront, $disborder);
+          }
+        }
+
+        &.hovered {
+          $hback: inter($back, $front, 95%);
+          $hborder: if(
+            $border ==transparent,
+            transparent,
+            inter($border, $front, 95%)
+          );
+          @include colored($hback, $front, $hborder);
+        }
+
+        &.pressed {
+          $pback: inter($back, $front, 85%);
+          $pborder: if(
+            $border ==transparent,
+            transparent,
+            inter($border, $front, 85%)
+          );
+          @include colored($pback, $front, $pborder);
+        }
+
+        &.disabled {
+          @include colored(
+            grayscale($back),
+            grayscale($front),
+            grayscale($back)
+          );
+        }
+      }
+    }
+  }
+}

package/style/components.scss

@@ -0,0 +1,450 @@
+// =============== MARKUP ===============
+
+i, .i {font-style: italic;}
+b, .b {font-weight: bold;}
+.u {text-decoration: underline;}
+.ni {font-style: normal;}
+.nb {font-weight: normal;}
+.nu {text-decoration: none;}
+.striked {text-decoration: line-through;}
+.code {font-family: monospace;}
+
+// =============== SPACING ===============
+
+.padded {padding: 1rem;}
+.padding-none {padding: 0rem;}
+
+.margined {margin: 1rem;}
+.margined-none {margin: 0rem;}
+
+// =============== FLEX-Layouts ===============
+
+.flex {
+  display: flex;
+  flex-direction: column;
+}
+
+@for $i from 1 through 12 {
+  .flex-#{$i} {
+    @extend .flex;
+    flex: $i;
+  }
+}
+
+.centered {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+
+  &.wrap {flex-wrap: wrap;}
+}
+
+.row-resp,
+.row-resp-rev {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: start;
+  gap: 1rem;
+
+  @media (max-width: 700px) {
+    & {
+      flex-direction: column;
+      justify-content: start;
+      align-items: stretch;
+    }
+
+    &.row-resp-rev {flex-direction: column-reverse;}
+  }
+}
+
+.gap-none {gap: 0;}
+.gap-quarter {gap: 0.25rem;}
+.gap-half {gap: 0.5rem;}
+.gap {gap: 1rem;}
+
+@for $i from 0 through 6 {
+  .gap-#{$i} {gap: #{$i}rem;}
+}
+
+$cross_modes: (stretch,start,end,center);
+@each $name in $cross_modes {
+  .cross-#{$name} {align-items: $name;}
+}
+
+$main_modes: (stretch,start,end,center,space-between);
+@each $name in $main_modes {
+  .main-#{$name} {justify-content: $name;}
+}
+
+// =============== conditionals ===============
+
+.if-wide {
+  @media (max-width: 700px) {
+    & {display: none;}
+  }
+}
+
+.if-narrow {
+  @media (min-width: 700px) {
+    & {display: none;}
+  }
+}
+
+// =============== element style ===============
+
+.sharp {border-radius: 0;}
+.rounded {border-radius: $g-radius;}
+.round {border-radius: 50%;}
+
+img.round,
+img.rounded {object-fit: cover;}
+
+.borderless {border: none;}
+.raised {box-shadow: 0 0.1rem 1rem #00000033;}
+
+.scrollbars-none {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {display: none;}
+}
+
+.pointer {cursor: pointer;}
+
+.text-centered {text-align: center;}
+.text-start {text-align: start;}
+.text-end {text-align: end;}
+
+body:has(dialog[open=""]) {overflow: hidden;}
+
+
+// =============== animations ===============
+
+.rotate-box {
+  @extend .rotate;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rotate {
+  animation: rotation 1.5s infinite linear;
+}
+
+@keyframes rotation {
+  from {transform: rotate(0deg);}
+  to {transform: rotate(359deg);}
+}
+
+// =============== COMPONENTS ===============
+
+.box {
+  @extend .padded;
+  @extend .text-m;
+  @extend .primary;
+
+  &.primary {@extend .primary;}
+  &.secondary {@extend .secondary;}
+  &.inverse {@extend .inverse;}
+}
+
+.card {
+  @extend .box;
+  border-width: 2px;
+  border-style: solid;
+  border-radius: $g-radius;
+  //overflow: hidden;
+}
+
+
+button {
+  @extend .card;
+  @extend .accent;
+  @extend .row;
+  @extend .text-m;
+  @extend .b;
+  justify-content: center;
+  padding: 0.25rem 0.75rem;
+  gap: 0.5rem;
+  min-height: 3rem;
+  cursor: pointer;
+
+  &:hover:not(&:disabled, .disabled) {
+    @extend .hovered;
+  }
+
+  &:active:not(&:disabled, .disabled) {
+    @extend .pressed;
+  }
+
+  &:disabled,
+  &.disabled {
+    @extend .disabled;
+    cursor: not-allowed;
+
+    &.action {
+      opacity: 0.7;
+      filter: grayscale(1);
+    }
+  }
+
+  & > .lucide {
+    & + div {
+      text-align: center;
+      flex: 1;
+      text-align: center;
+    }
+  }
+
+  &.text-left {
+    text-align: left;
+    div {
+      margin-left: 0.25rem;
+      text-align: left;
+    }
+  }
+}
+
+.icon {
+  aspect-ratio: 1;
+  border-radius: 25%;
+  object-fit: cover;
+}
+
+.toast {
+  @extend .card;
+  @extend .inverse;
+  @extend .b;
+  @extend .raised;
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 200;
+  left: 50%;
+  width: min(40rem, 90%);
+  transform: translateX(-50%);
+}
+
+select {
+  @extend .card;
+  padding: 0 0.75rem;
+  height: 3rem;
+  min-width: 12rem;
+  width: 100%;
+}
+
+textarea {
+  @extend .card;
+  height: 6rem;
+  padding: 0.6rem 0.75rem;
+  resize: vertical;
+  min-height: 3rem;
+  min-width: 12rem;
+  width: 100%;
+}
+
+
+dialog {
+  @extend .column;
+  @extend .cross-center;
+  @extend .main-center;
+
+  z-index: 100;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+
+  border: none;
+
+  pointer-events: none;
+
+  background-color: transparent;
+
+  transition: background-color 0.3s ease-in-out;
+  transition: backdrop-filter 0.3s ease-in-out;
+
+  & > * {
+    display: none;
+  }
+
+  &[open=""] {
+    background-color: rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(5px);
+    pointer-events: all;
+    & > * {
+      display: unset;
+    }
+  }
+}
+
+.expandable {
+  max-height: 0px;
+  transition: max-height 0.25s ease-out;
+  overflow: hidden;
+}
+
+.expandable:has(*) {
+  max-height: 500px;
+  transition: max-height 0.25s ease-in;
+}
+
+// =============== INPUTS ===============
+
+input[type="text"],
+input[type="number"],
+input[type="password"],
+input[type="email"],
+input[type="date"],
+input[type="time"] {
+  @extend .card;
+  padding: 0 0.75rem;
+  height: 3rem;
+  min-width: 12rem;
+  width: 100%;
+}
+
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+  width: 15rem;
+
+  &::-moz-range-track{
+    background-color: #707070;
+    border-radius: 100px;
+    border: none;
+    height: 0.5rem;
+  }
+
+  &::-webkit-slider-runnable-track
+  {
+    @extend .secondary;
+    border-radius: 100px;
+    border: none;
+    height: 0.5rem;
+  }
+
+  &::-webkit-slider-thumb
+  {
+    @extend .accent;
+    border: none;
+    -webkit-appearance: none; // Override default look
+    appearance: none;
+    margin-top: -6px;
+    border-radius: 100px;
+    height: 1.2rem;
+    width: 1.2rem;
+  }
+}
+
+
+input[type="checkbox"] {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+
+  font: inherit;
+  color: black;
+  //margin: 0.6rem 0.6rem;
+  width: 1.8rem;
+  height: 1.8rem;
+  border: 0.16em solid black;
+  border-radius: 25%;
+  transform: translateY(-0.075em);
+
+  display: grid;
+  place-content: center;
+  outline: none;
+}
+
+input[type="checkbox"]::before {
+  content: "";
+  width: 0.95rem;
+  height: 0.75rem;
+  clip-path: polygon(10% 41%, 37% 75%, 91% 0, 100% 13%, 38% 100%, 0 55%);
+  // check tick clip path outlined:
+  transform: scale(0);
+  transform-origin: center;
+  transition: 0.2s transform ease-in-out;
+  background-color: black;
+  //box-shadow: inset 1em 1em green;
+}
+
+input[type="checkbox"]:checked {
+  @extend .loud;
+  @extend .minor;
+  border-color: $c-accent !important;
+  &::before {
+    transform: scale(1);
+    background-color: $c-accent;
+  }
+}
+
+input[type="checkbox"]:focus {
+  outline: max(2px, 0.15em) solid blue;
+  outline-offset: 0;
+}
+
+input[type="checkbox"]:disabled {
+  //--form-control-color: var(--form-control-disabled);
+
+  color: gray;
+  cursor: not-allowed;
+}
+
+// =============== TOOLTIP ===============
+
+
+[data-tooltip]:hover:after {
+  opacity: 1;
+  transition: all 0.1s ease 0.8s;
+  visibility: visible;
+}
+
+[data-tooltip]:after {
+  @extend .inverse;
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: -1.6em;
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  box-shadow: 0 0.125rem 0.5rem 0.2rem #00000022;
+  padding: 0.25em 0.5em;
+  border-radius: 0.25em;
+  opacity: 0;
+  z-index: 999;
+  visibility: hidden;
+  pointer-events: none;
+}
+[data-tooltip] {
+  position: relative;
+}
+
+// =============== LAYOUT ===============
+
+
+.base-limited {
+  @extend .box;
+  max-width: 700px;
+  width: 100%;
+  margin: 0 auto;
+}

package/style/root.scss

@@ -0,0 +1,50 @@
+:root {
+  /*font-family: "apple color emoji", "segoe ui emoji", "noto color emoji",
+    "android emoji", "emojisymbols", "emojione mozilla", "twemoji mozilla",
+    "segoe ui symbol", $t-font-body;*/
+  font-family: $t-font-body, "Noto Color Emoji";
+  line-height: 1.3;
+
+  color: #222;
+  background-color: #ffffff;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+  box-sizing: border-box;
+  font-size: 16px;
+  border-collapse: separate;
+}
+
+@media (orientation: portrait) {
+  :root {
+    font-size: 13px;
+  }
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+  font-family: inherit;
+  font-weight: inherit;
+}
+
+body,
+#app,
+.elbe-base {
+  margin: 0;
+  display: block;
+  min-height: 100vh;
+  background-color: white;
+}
+
+body:has(.no-page-scroll) {
+  overflow: hidden;
+}
+
+.debug {
+  display: none;
+}

package/style/type_style.scss

@@ -0,0 +1,22 @@
+@each $style, $size in $t-styles {
+  .text-#{$style} {
+    font-size: $size;
+  }
+}
+
+@each $name, $size in $t-headers {
+  .header-#{$name} {
+    @extend .b;
+    line-height: 1;
+    font-size: $size;
+    font-family: $t-font-accent;
+  }
+
+  h#{$name} {
+    @extend .header-#{$name};
+  }
+}
+
+.text-accent {
+  font-family: $t-font-accent;
+}