ada-ui 0.0.0-20240120121659 → 0.0.0-beta-v5-20240723120941

package/scss/_reset.scss

@@ -1,353 +1,84 @@
-/*
-! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
-*/
-
-/*
-1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
-2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
-*/
-
 *,
 ::before,
 ::after {
   box-sizing: border-box;
-  /* 1 */
   border-width: 0;
-  /* 2 */
   border-style: solid;
-  /* 2 */
   border-color: currentColor;
-  /* 2 */
-}
-
-::before,
-::after {
-  --tw-content: "";
 }
 
-/*
-1. Use a consistent sensible line-height in all browsers.
-2. Prevent adjustments of font size after orientation changes in iOS.
-3. Use a more readable tab size.
-4. Use the user's configured `sans` font-family by default.
-5. Use the user's configured `sans` font-feature-settings by default.
-6. Use the user's configured `sans` font-variation-settings by default.
-7. Disable tap highlights on iOS
-*/
-
-html,
-:host {
-  line-height: 1.5;
-  /* 1 */
-  -webkit-text-size-adjust: 100%;
-  /* 2 */
-  -moz-tab-size: 4;
-  /* 3 */
-  -o-tab-size: 4;
-  tab-size: 4;
-  /* 3 */
-  font-family: var(--font-base, Roboto);
-  /* 4 */
-  font-feature-settings: normal;
-  /* 5 */
-  font-variation-settings: normal;
-  /* 6 */
-  -webkit-tap-highlight-color: transparent;
-  /* 7 */
+html {
+  -webkit-text-size-adjust: 100%; // Prevent adjustments of font size after orientation changes in iOS.
+  -webkit-tap-highlight-color: transparent; // Disable tap highlights on iOS
 }
 
-/*
-1. Remove the margin in all browsers.
-2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
-*/
-
 body {
   margin: 0;
-  /* 1 */
-  line-height: inherit;
-  /* 2 */
 }
 
-/*
-1. Add the correct height in Firefox.
-2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-3. Ensure horizontal rules are visible by default.
-*/
-
-hr {
-  height: 0;
-  /* 1 */
-  color: inherit;
-  /* 2 */
-  border-top-width: 1px;
-  /* 3 */
-}
-
-/*
-Add the correct text decoration in Chrome, Edge, and Safari.
-*/
-
-abbr:where([title]) {
-  -webkit-text-decoration: underline dotted;
-  text-decoration: underline dotted;
-}
-
-/*
-Remove the default font size and weight for headings.
-*/
-
 h1,
 h2,
 h3,
 h4,
 h5,
-h6 {
+h6,
+p,
+pre {
   font-size: inherit;
   font-weight: inherit;
+  margin: 0;
 }
 
-/*
-Reset links to optimize for opt-in styling instead of opt-out.
-*/
-
 a {
   color: inherit;
   text-decoration: inherit;
 }
 
-/*
-Add the correct font weight in Edge and Safari.
-*/
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/*
-1. Use the user's configured `mono` font-family by default.
-2. Use the user's configured `mono` font-feature-settings by default.
-3. Use the user's configured `mono` font-variation-settings by default.
-4. Correct the odd `em` font sizing in all browsers.
-*/
-
-code,
-kbd,
-samp,
-pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    "Liberation Mono", "Courier New", monospace;
-  /* 1 */
-  font-feature-settings: normal;
-  /* 2 */
-  font-variation-settings: normal;
-  /* 3 */
-  font-size: 1em;
-  /* 4 */
-}
-
-/*
-Add the correct font size in all browsers.
-*/
-
-small {
-  font-size: 80%;
-}
-
-/*
-Prevent `sub` and `sup` elements from affecting the line height in all browsers.
-*/
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/*
-1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-3. Remove gaps between table borders by default.
-*/
-
-table {
-  text-indent: 0;
-  /* 1 */
-  border-color: inherit;
-  /* 2 */
-  border-collapse: collapse;
-  /* 3 */
-}
-
-/*
-1. Change the font styles in all browsers.
-2. Remove the margin in Firefox and Safari.
-3. Remove default padding in all browsers.
-*/
-
 button,
 input,
-optgroup,
 select,
 textarea {
   font-family: inherit;
-  /* 1 */
   font-feature-settings: inherit;
-  /* 1 */
   font-variation-settings: inherit;
-  /* 1 */
   font-size: 100%;
-  /* 1 */
   font-weight: inherit;
-  /* 1 */
-  line-height: inherit;
-  /* 1 */
   color: inherit;
-  /* 1 */
   margin: 0;
-  /* 2 */
   padding: 0;
-  /* 3 */
 }
 
-/*
-Remove the inheritance of text transform in Edge and Firefox.
-*/
-
 button,
 select {
   text-transform: none;
 }
 
-/*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Remove default button styles.
-*/
-
 button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
   -webkit-appearance: button;
-  /* 1 */
   background-color: transparent;
-  /* 2 */
   background-image: none;
-  /* 2 */
 }
 
-/*
-Use the modern Firefox focus style for all focusable elements.
-*/
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+:disabled {
+  cursor: default;
+}
 
 :-moz-focusring {
   outline: auto;
 }
 
-/*
-Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
-*/
-
 :-moz-ui-invalid {
   box-shadow: none;
 }
 
-/*
-Add the correct vertical alignment in Chrome and Firefox.
-*/
-
-progress {
-  vertical-align: baseline;
-}
-
-/*
-Correct the cursor style of increment and decrement buttons in Safari.
-*/
-
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/*
-1. Correct the odd appearance in Chrome and Safari.
-2. Correct the outline style in Safari.
-*/
-
-[type="search"] {
-  -webkit-appearance: textfield;
-  /* 1 */
-  outline-offset: -2px;
-  /* 2 */
-}
-
-/*
-Remove the inner padding in Chrome and Safari on macOS.
-*/
-
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Change font properties to `inherit` in Safari.
-*/
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  /* 1 */
-  font: inherit;
-  /* 2 */
-}
-
-/*
-Add the correct display in Chrome and Safari.
-*/
-
-summary {
-  display: list-item;
-}
-
-/*
-Removes the default spacing and border for appropriate elements.
-*/
-
-blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
-  margin: 0;
-}
-
-fieldset {
-  margin: 0;
-  padding: 0;
-}
-
-legend {
-  padding: 0;
-}
-
 ol,
 ul,
 menu {
@@ -355,93 +86,3 @@ menu {
   margin: 0;
   padding: 0;
 }
-
-/*
-Reset default styling for dialogs.
-*/
-
-dialog {
-  padding: 0;
-}
-
-/*
-Prevent resizing textareas horizontally by default.
-*/
-
-textarea {
-  resize: vertical;
-}
-
-/*
-1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-2. Set the default placeholder color to the user's configured gray 400 color.
-*/
-
-input::-moz-placeholder,
-textarea::-moz-placeholder {
-  opacity: 1;
-  /* 1 */
-  color: #9ca3af;
-  /* 2 */
-}
-
-input::placeholder,
-textarea::placeholder {
-  opacity: 1;
-  /* 1 */
-  color: #9ca3af;
-  /* 2 */
-}
-
-/*
-Set the default cursor for buttons.
-*/
-
-button,
-[role="button"] {
-  cursor: pointer;
-}
-
-/*
-Make sure disabled buttons don't get the pointer cursor.
-*/
-
-:disabled {
-  cursor: default;
-}
-
-/*
-1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
-2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
-   This can trigger a poorly considered lint error in some tools but is included by design.
-*/
-
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block;
-  /* 1 */
-  vertical-align: middle;
-  /* 2 */
-}
-
-/*
-Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
-*/
-
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
-
-/* Make elements with the HTML hidden attribute stay hidden by default */
-
-[hidden] {
-  display: none;
-}

package/scss/_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/_spinner.scss

@@ -1,5 +1,4 @@
 .spinner {
-  margin: 0.3rem;
   display: inline-grid;
   justify-items: center;
   align-items: center;
@@ -19,7 +18,7 @@
     border-style: solid;
     border-width: 0.05em;
     border-radius: 50%;
-    border-color: var(--light-alpha40) transparent;
+    border-color: var(--bg800) transparent;
     animation: 4s 0.5s inset1 ease-in-out infinite;
     box-shadow: 0px 12px 10px -12px #000a, 0px -12px 10px -12px #000a;
   }
@@ -34,7 +33,7 @@
     border-style: solid;
     border-width: 0.05em;
     border-radius: 50%;
-    border-color: transparent var(--light-alpha70);
+    border-color: transparent var(--bg600);
     animation: 4s 0.5s inset2 ease-in-out infinite;
     box-shadow: 12px 0px 10px -12px #000a, -12px 0px 10px -12px #000a;
   }

package/scss/_tile.scss

@@ -3,10 +3,13 @@
 .tile {
   @extend .panel;
   background: var(--tile-background);
-  margin: 0.8rem;
 
   > header {
-    @extend %h4;
+    //@extend %h4; --> TODO use font-size token
+    @extend %header;
+    font-weight: 400;
+    font-size: 1.2rem;
+
     &:before {
       @include corner("top-left", "light");
     }
@@ -29,7 +32,7 @@
   }
 
   &.inset {
-    box-shadow: inset $box-shadow;
+    box-shadow: inset var(--box-shadow);
 
     > header {
       text-shadow: none;
@@ -52,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 {
@@ -79,7 +80,7 @@
   > aside {
     display: grid;
     grid-auto-flow: column;
-    gap: 4px;
+    gap: var(--gap-sm);
 
     > button {
       @include command;
@@ -88,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/_typography.scss

@@ -1,32 +1,17 @@
-%h1 {
-  @extend %header;
-  font-size: 3rem;
-}
-
-%h2 {
-  @extend %header;
-  font-size: 2rem;
-}
-
-%h3 {
-  @extend %header;
-  font-size: 1.5rem;
-}
-
-%h4 {
-  @extend %header;
-  font-weight: 400;
-  font-size: 1.2rem;
-}
-
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
 %header {
   font-weight: 300;
-  text-shadow: 0 0 4px var(--light-alpha40);
-  color: var(--fg);
+  text-shadow: 0 0 4px var(--bg700);
+  color: var(--fg100);
 }
 
 h1 {
-  @extend %h1;
+  font-size: 3rem;
   margin: 1rem 0 2rem 0;
 
   &.m-0 {
@@ -35,7 +20,7 @@ h1 {
 }
 
 h2 {
-  @extend %h2;
+  font-size: 2rem;
   margin: 1rem 0 1.5rem 0;
 
   &.m-0 {
@@ -44,7 +29,7 @@ h2 {
 }
 
 h3 {
-  @extend %h3;
+  font-size: 1.5rem;
   margin: 0.5rem 0 1.5rem 0;
 
   &.m-0 {
@@ -53,7 +38,7 @@ h3 {
 }
 
 h4 {
-  @extend %h4;
+  font-size: 1.2rem;
   margin: 0.5rem 0 0.5rem 0;
 
   &.m-0 {