ada-ui 4.6.0 → 5.0.0

package/scss/{_spinner-lab.scss → deprecated/_spinner-lab.scss}

@@ -19,7 +19,7 @@
     border-style: solid;
     border-width: 0.05em;
     border-radius: 50%;
-    border-color: var(--light-alpha40) transparent;
+    border-color: var(--bg700) transparent;
     animation: 6s 0.5s inset1-test ease-in-out infinite;
     box-shadow: 0px 12px 10px -12px #000a, 0px -12px 10px -12px #000a;
   }
@@ -34,7 +34,7 @@
     border-style: solid;
     border-width: 0.05em;
     border-radius: 50%;
-    border-color: transparent var(--light-alpha70);
+    border-color: transparent var(--bg600);
     animation: 6s 0.5s inset2-test ease-in-out infinite;
     box-shadow: 12px 0px 10px -12px #000a, -12px 0px 10px -12px #000a;
   }
@@ -159,7 +159,7 @@ $amount: 0.2em;
     width: 0.6em;
     height: 0.6em;
     border-radius: 50%;
-    background: var(--light-alpha40);
+    background: var(--bg700);
     animation: 1.5s 0.1s swing ease-in-out infinite;
     box-sizing: border-box;
   }
@@ -170,8 +170,8 @@ $amount: 0.2em;
     width: 1em;
     height: 1em;
     border-radius: 50%;
-    box-shadow: $box-shadow;
-    border: 0.1em solid var(--light-alpha70);
+    box-shadow: var(--box-shadow);
+    border: 0.1em solid var(--bg600);
     animation: 1.5s swing ease-in-out infinite;
     box-sizing: border-box;
   }
@@ -197,9 +197,9 @@ $amount: 0.2em;
   border-style: solid;
   border-width: 0.3em;
   border-radius: 50%;
-  border-color: transparent var(--default);
+  border-color: transparent var(--bg800);
   animation: 4s rotateOuter linear infinite;
-  box-shadow: inset $box-shadow;
+  box-shadow: inset var(--box-shadow);
 
   &:before {
     content: "";
@@ -210,10 +210,10 @@ $amount: 0.2em;
     bottom: 0.2em;
     border-style: inherit;
     border-width: inherit;
-    border-color: transparent var(--light-alpha70);
+    border-color: transparent var(--bg600);
     border-radius: inherit;
     animation: 2s rotateInner linear infinite;
-    box-shadow: inset $box-shadow;
+    box-shadow: inset var(--box-shadow);
   }
   &:after {
     content: "";
@@ -224,7 +224,7 @@ $amount: 0.2em;
     bottom: 0.7em;
     border-style: inherit;
     border-width: inherit;
-    border-color: transparent var(--light-alpha40);
+    border-color: transparent var(--bg700);
     border-radius: inherit;
     animation: 4s rotateCenter linear infinite;
   }

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

@@ -3,9 +3,13 @@
 .tile {
   @extend .panel;
   background: var(--tile-background);
-  margin: 0.8rem;
 
   > header {
+    //@extend %h4; --> TODO use font-size token
+    @extend %header;
+    font-weight: 400;
+    font-size: 1.2rem;
+
     &:before {
       @include corner("top-left", "light");
     }
@@ -28,7 +32,7 @@
   }
 
   &.inset {
-    box-shadow: inset $box-shadow;
+    box-shadow: inset var(--box-shadow);
 
     > header {
       text-shadow: none;
@@ -51,12 +55,10 @@
   display: inline-grid;
   grid-template-columns: 1fr auto;
   align-items: stretch;
-  column-gap: 4px;
+  column-gap: var(--gap-sm);
   position: relative;
-  margin: 0.8rem;
 
   > .tile {
-    margin: 0;
     border-radius: 0.3rem 0 0 0.3rem;
 
     > header {
@@ -78,7 +80,7 @@
   > aside {
     display: grid;
     grid-auto-flow: column;
-    gap: 4px;
+    gap: var(--gap-sm);
 
     > button {
       @include command;
@@ -87,11 +89,11 @@
       min-width: 3rem;
 
       &:focus {
-        border-color: var(--light-alpha40);
+        border-color: var(--bg700);
       }
 
       &:active {
-        background-color: var(--light-alpha40);
+        background-color: var(--bg700);
       }
 
       &:last-of-type {

package/scss/_button.scss

@@ -1,52 +0,0 @@
-@mixin button {
-  overflow: hidden;
-  outline: none;
-  color: var(--fg);
-  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: $box-shadow;
-  border: 1px solid var(--light-alpha40);
-  background-color: transparent;
-  min-height: min-content;
-  min-width: 8rem;
-  padding: 0.8rem 1.6rem;
-  margin: 0.8rem;
-  font-size: 1.1rem;
-
-  &.small {
-    min-width: 0;
-    padding: 0.8rem;
-  }
-  &.fill {
-    background-color: var(--default);
-  }
-  &:focus {
-    border: 1px solid var(--light-alpha70);
-  }
-  &:hover {
-    // stays after click on touch devices
-    // TODO: only for non-touch devices
-    // /*background-color: var(--light-alpha40);*/
-  }
-  &:active {
-    background-color: var(--light);
-    border: 1px solid var(--default-alpha40);
-  }
-}

package/scss/_corner.scss

@@ -1,47 +0,0 @@
-@mixin corner($location, $style: "default") {
-  --border-width: 2px;
-
-  content: "";
-  border-style: solid;
-  border-color: var(--default);
-  position: absolute;
-  height: 1rem;
-  width: 1rem;
-  z-index: 2;
-
-  @if $style == "light" {
-    --border-width: 1px;
-
-    border-color: var(--light-alpha40);
-    height: 0.75rem;
-    width: 0.75rem;
-  }
-
-  @if $location == "top-left" {
-    border-width: var(--border-width) 0 0 var(--border-width);
-    border-radius: 0.3rem 0 0 0;
-    left: 0;
-    top: 0;
-  }
-
-  @if $location == "top-right" {
-    border-width: var(--border-width) var(--border-width) 0 0;
-    border-radius: 0 0.3rem 0 0;
-    right: 0;
-    top: 0;
-  }
-
-  @if $location == "bottom-left" {
-    border-width: 0 0 var(--border-width) var(--border-width);
-    border-radius: 0 0 0 0.3rem;
-    left: 0;
-    bottom: 0;
-  }
-
-  @if $location == "bottom-right" {
-    border-width: 0 var(--border-width) var(--border-width) 0;
-    border-radius: 0 0 0.3rem 0;
-    right: 0;
-    bottom: 0;
-  }
-}