ada-ui 4.6.0 → 5.0.0

package/scss/ada.blue.scss

@@ -1,107 +1,31 @@
 @import "ada.theme-base";
 
-.primary {
-  @extend %colourShades;
-
-  // old one, more blue-greenish
-  //--h: 197;
-  //--s: 100%;
-  //--l: 19%;
-  //--h-light: 197;
-  //--s-light: 100%;
-  //--l-light: 40%;
-
-  --h: 205;
-  --s: 80%;
-  --l: 23%;
-  --h-light: 205;
-  --s-light: 80%;
-  --l-light: 40%;
-
-  --h-fg: var(--h);
-  --s-fg: 100%;
-  --l-fg: 89%;
-}
-
 :root {
+  //Defaults to primary color
   @extend .primary;
-  // old one, more blue-greenish
-  //--bg: hsl(197, 80%, 7%);
-  --bg: hsl(207, 61%, 7%);
 }
 
-.shade1 {
+.primary {
   @extend %colourShades;
-
-  --h: 198;
-  --s: 90%;
-  --l: 30%;
-  --h-light: 198;
-  --s-light: 90%;
-  --l-light: 58%;
-
-  --h-fg: var(--h);
-  --s-fg: 100%;
-  --l-fg: 89%;
+  --hue: 246;
 }
 
-.shade2 {
+.shade1 {
   @extend %colourShades;
-
-  // old one, more blue-greenish
-  //--h: 165;
-  //--s: 90%;
-  //--l: 20%;
-  //--h-light: 165;
-  //--s-light: 90%;
-  //--l-light: 40%;
-
-  --h: 185;
-  --s: 50%;
-  --l: 30%;
-  --h-light: 185;
-  --s-light: 50%;
-  --l-light: 50%;
-
-  --h-fg: var(--h);
-  --s-fg: 100%;
-  --l-fg: 89%;
+  --hue: 225;
 }
 
-.accent {
+.shade3 {
   @extend %colourShades;
+  --hue: 165;
+}
 
-  // old one
-  //--h: 11;
-  //--s: 74%;
-  //--l: 45%;
-  //--h-light: 10;
-  //--s-light: 89%;
-  //--l-light: 56%;
-
-  --h: 146;
-  --s: 58%;
-  --l: 20%;
-  --h-light: 146;
-  --s-light: 58%;
-  --l-light: 48%;
-
-  --h-fg: var(--h);
-  --s-fg: 100%;
-  --l-fg: 89%;
+.shade2 {
+  @extend %colourShades;
+  --hue: 190;
 }
 
 .warn {
   @extend %colourShades;
-
-  --h: 0;
-  --s: 100%;
-  --l: 28%;
-  --h-light: 0;
-  --s-light: 85%;
-  --l-light: 48%;
-
-  --h-fg: var(--h);
-  --s-fg: 100%;
-  --l-fg: 89%;
+  --hue: 29;
 }

package/scss/ada.green.scss

@@ -1,90 +1 @@
-@import "ada.theme-base";
-
-.primary {
-  @extend %colourShades;
-
-  --h: 105;
-  --s: 50%;
-  --l: 24%;
-  --h-light: 102;
-  --s-light: 72%;
-  //actual, designer-correct
-  //--l-light: 49%;
-  --l-light: 34%;
-
-  --h-fg: var(--h);
-  --s-fg: 100%;
-  --l-fg: 89%;
-}
-
-:root {
-  @extend .primary;
-  --bg: hsl(135, 34%, 12%);
-}
-
-.shade1 {
-  @extend %colourShades;
-  --h: 150;
-  --s: 70%;
-  --l: 20%;
-  --h-light: 133;
-  --s-light: 82%;
-  //actual, designer-correct
-  //--l-light: 43%;
-  --l-light: 30%;
-
-  --h-fg: var(--h);
-  --s-fg: 100%;
-  --l-fg: 89%;
-}
-
-.shade2 {
-  @extend %colourShades;
-  --h: 168;
-  --s: 57%;
-  --l: 32%;
-  --h-light: 167;
-  --s-light: 68%;
-  //actual, designer-correct
-  //--l-light: 59%;
-  --l-light: 40%;
-
-  // darker version
-  //--h: 165;
-  //--s: 66%;
-  //--l: 24%;
-
-  --h-fg: var(--h);
-  --s-fg: 100%;
-  --l-fg: 89%;
-}
-
-.accent {
-  @extend %colourShades;
-
-  --h: 11;
-  --s: 74%;
-  --l: 45%;
-  --h-light: 10;
-  --s-light: 89%;
-  --l-light: 56%;
-
-  --h-fg: var(--h);
-  --s-fg: 100%;
-  --l-fg: 89%;
-}
-
-.warn {
-  @extend %colourShades;
-
-  --h: 0;
-  --s: 100%;
-  --l: 28%;
-  --h-light: 0;
-  --s-light: 85%;
-  --l-light: 48%;
-
-  --h-fg: var(--h);
-  --s-fg: 100%;
-  --l-fg: 89%;
-}
+//wip

package/scss/ada.scss

@@ -1,53 +1,7 @@
-$font-family: "Open Sans", sans-serif !default;
-$box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
-
-@mixin desktop() {
-  @media screen and (min-width: 1200px) {
-    @content;
-  }
-}
-
-@mixin tablet() {
-  @media screen and (max-width: 1199px) {
-    @content;
-  }
-}
-
-*,
-::before,
-::after {
-  box-sizing: border-box;
-}
-
-html {
-  font-size: 14px;
-  font-family: $font-family;
-  font-weight: 400;
-  @include tablet {
-    font-size: 12px;
-  }
-}
-
-html,
-body {
-  height: 100%;
-  min-height: 100%;
-  margin: 0;
-  padding: 0;
-  background: var(--bg);
-  color: var(--fg);
-}
-
-body {
-  font-size: 1rem;
-  -webkit-tap-highlight-color: transparent;
-  padding: 0.5rem;
-}
-
+@import "reset";
+@import "global";
 @import "typography";
-@import "button";
+@import "command";
 @import "input";
 @import "panel";
-@import "commands";
-@import "tile";
 @import "spinner";

package/scss/deprecated/_ada.blue-old.scss

@@ -0,0 +1,111 @@
+@import "ada.theme-base";
+
+.primary {
+  @extend %colourShades;
+
+  // old one, more blue-greenish
+  //--h: 197;
+  //--s: 100%;
+  //--l: 19%;
+  //--h-light: 197;
+  //--s-light: 100%;
+  //--l-light: 40%;
+
+  --h: 205;
+  --s: 80%;
+  --l: 23%;
+  --h-light: 205;
+  --s-light: 80%;
+  --l-light: 40%;
+
+  --h-fg: var(--h);
+  --s-fg: 100%;
+  --l-fg: 89%;
+
+  //lch test
+  //--default: lch(26 29 260);
+  //--default-alpha70: lch(18 20 260);
+}
+
+:root {
+  @extend .primary;
+  // old one, more blue-greenish
+  //--bg: hsl(197, 80%, 7%);
+  --bg: hsl(207, 61%, 7%);
+}
+
+.shade1 {
+  @extend %colourShades;
+
+  --h: 198;
+  --s: 90%;
+  --l: 30%;
+  --h-light: 198;
+  --s-light: 90%;
+  --l-light: 58%;
+
+  --h-fg: var(--h);
+  --s-fg: 100%;
+  --l-fg: 89%;
+}
+
+.shade2 {
+  @extend %colourShades;
+
+  // old one, more blue-greenish
+  //--h: 165;
+  //--s: 90%;
+  //--l: 20%;
+  //--h-light: 165;
+  //--s-light: 90%;
+  //--l-light: 40%;
+
+  --h: 185;
+  --s: 50%;
+  --l: 30%;
+  --h-light: 185;
+  --s-light: 50%;
+  --l-light: 50%;
+
+  --h-fg: var(--h);
+  --s-fg: 100%;
+  --l-fg: 89%;
+}
+
+.accent {
+  @extend %colourShades;
+
+  // old one
+  //--h: 11;
+  //--s: 74%;
+  //--l: 45%;
+  //--h-light: 10;
+  //--s-light: 89%;
+  //--l-light: 56%;
+
+  --h: 146;
+  --s: 58%;
+  --l: 20%;
+  --h-light: 146;
+  --s-light: 58%;
+  --l-light: 48%;
+
+  --h-fg: var(--h);
+  --s-fg: 100%;
+  --l-fg: 89%;
+}
+
+.warn {
+  @extend %colourShades;
+
+  --h: 0;
+  --s: 100%;
+  --l: 28%;
+  --h-light: 0;
+  --s-light: 85%;
+  --l-light: 48%;
+
+  --h-fg: var(--h);
+  --s-fg: 100%;
+  --l-fg: 89%;
+}

package/scss/deprecated/_ada.green-old.scss

@@ -0,0 +1,90 @@
+@import "ada.theme-base";
+
+.primary {
+  @extend %colourShades;
+
+  --h: 105;
+  --s: 50%;
+  --l: 24%;
+  --h-light: 102;
+  --s-light: 72%;
+  //actual, designer-correct
+  //--l-light: 49%;
+  --l-light: 34%;
+
+  --h-fg: var(--h);
+  --s-fg: 100%;
+  --l-fg: 89%;
+}
+
+:root {
+  @extend .primary;
+  --bg: hsl(135, 34%, 12%);
+}
+
+.shade1 {
+  @extend %colourShades;
+  --h: 150;
+  --s: 70%;
+  --l: 20%;
+  --h-light: 133;
+  --s-light: 82%;
+  //actual, designer-correct
+  //--l-light: 43%;
+  --l-light: 30%;
+
+  --h-fg: var(--h);
+  --s-fg: 100%;
+  --l-fg: 89%;
+}
+
+.shade2 {
+  @extend %colourShades;
+  --h: 168;
+  --s: 57%;
+  --l: 32%;
+  --h-light: 167;
+  --s-light: 68%;
+  //actual, designer-correct
+  //--l-light: 59%;
+  --l-light: 40%;
+
+  // darker version
+  //--h: 165;
+  //--s: 66%;
+  //--l: 24%;
+
+  --h-fg: var(--h);
+  --s-fg: 100%;
+  --l-fg: 89%;
+}
+
+.accent {
+  @extend %colourShades;
+
+  --h: 11;
+  --s: 74%;
+  --l: 45%;
+  --h-light: 10;
+  --s-light: 89%;
+  --l-light: 56%;
+
+  --h-fg: var(--h);
+  --s-fg: 100%;
+  --l-fg: 89%;
+}
+
+.warn {
+  @extend %colourShades;
+
+  --h: 0;
+  --s: 100%;
+  --l: 28%;
+  --h-light: 0;
+  --s-light: 85%;
+  --l-light: 48%;
+
+  --h-fg: var(--h);
+  --s-fg: 100%;
+  --l-fg: 89%;
+}

package/scss/deprecated/_button.scss

@@ -0,0 +1,92 @@
+//Moved to _command.scss
+//@mixin button {
+//overflow: hidden;
+//outline: none;
+//color: var(--fg100);
+//font-family: inherit;
+//cursor: pointer;
+//user-select: none;
+//vertical-align: middle;
+//transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
+
+//&:disabled {
+//opacity: 0.4;
+//filter: saturate(0.6);
+//cursor: default;
+//pointer-events: none;
+//}
+//}
+
+.button {
+  @include button;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  border-radius: 0.3rem;
+  box-shadow: var(--box-shadow);
+  border: var(--border-width-sm) solid var(--bg700);
+  background-color: transparent;
+  min-height: min-content;
+  padding: 0.6rem 1rem;
+  font-size: 1.1rem;
+
+  &.fill {
+    background-color: var(--bg800);
+  }
+  &:focus {
+    border: var(--border-width-sm) solid var(--bg600);
+  }
+  &:hover {
+    // stays after click on touch devices
+    // TODO: only for non-touch devices
+    // /*background-color: var(--bg700);*/
+  }
+  &:active {
+    background-color: var(--light);
+    border: var(--border-width-sm) solid var(--default-alpha40);
+  }
+}
+
+.button-compound {
+  display: inline-flex;
+  gap: var(--gap-sm);
+  box-shadow: var(--box-shadow);
+
+  & > .button {
+    @extend .fill;
+    box-shadow: none;
+
+    // Use color level from new lch palette instead of alpha
+    //&.dim {
+    //background-color: var(--default-alpha40);
+    //&:focus {
+    //border-color: var(--bg700);
+    //}
+
+    //&:active {
+    //background-color: var(--bg700);
+    //}
+    //}
+
+    &:empty {
+      width: 3rem;
+    }
+
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      border-right: none;
+    }
+
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+      border-left: none;
+      border-right: none;
+    }
+
+    &:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-left: none;
+    }
+  }
+}

package/scss/{_commands.scss → deprecated/_commands.scss}

@@ -8,7 +8,7 @@
   font-size: 1.1rem;
   border-style: solid;
   border-color: transparent;
-  border-width: 0 0 0 2px;
+  border-width: 0 0 0 var(--border-width);
   padding: 0.2rem 0.4rem 0.2rem 1rem;
 
   &.flash {
@@ -16,11 +16,11 @@
   }
 
   &:focus {
-    border-color: var(--light-alpha70);
+    border-color: var(--bg600);
   }
 
   &:active {
-    background-color: var(--light-alpha70);
+    background-color: var(--bg600);
     animation-play-state: paused;
   }
 }
@@ -28,26 +28,20 @@
 .commands {
   position: relative;
   display: grid;
-  gap: 6px;
-  margin: 0.5rem;
+  gap: var(--command-gap);
 
   &:before,
   &:after {
-    box-shadow: $box-shadow;
+    box-shadow: var(--box-shadow);
     position: absolute;
     content: "";
-    background: var(--default-alpha70);
+    background: var(--bg900);
   }
 
   &:not(.vertical) {
-    @extend %h2;
     grid-auto-flow: column;
-    text-align: center;
-    align-items: center;
-    line-height: 3.6rem;
-    height: 3.6rem;
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
+    padding-left: calc(1rem + var(--command-gap));
+    padding-right: calc(1rem + var(--command-gap));
 
     &:before,
     &:after {
@@ -74,8 +68,8 @@
   &.vertical {
     grid-auto-flow: row;
     min-width: 12rem;
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
+    padding-top: calc(1rem + var(--command-gap));
+    padding-bottom: calc(1rem + var(--command-gap));
 
     &:before,
     &:after {
@@ -97,13 +91,24 @@
     > div {
       min-height: 3.6rem;
     }
+
+    // attempt for mobile view
+    //@media screen and (max-width: 768px) {
+    //min-width: 2rem;
+    //width: 3.6rem;
+    //> button,
+    //> div {
+    //min-width: auto;
+    //color: transparent;
+    //}
+    //}
   }
 
   > button,
   > div {
     box-sizing: border-box;
-    background-color: var(--default-alpha70);
-    box-shadow: $box-shadow;
+    background-color: var(--bg900);
+    box-shadow: var(--box-shadow);
   }
 
   > button {
@@ -115,8 +120,9 @@
   }
 }
 
-@keyframes flash {
-  50% {
-    background-color: var(--light-alpha70);
-  }
-}
+//Old, has been moved to _command.scss
+//@keyframes flash {
+//50% {
+//background-color: var(--bg600);
+//}
+//}