@dodlhuat/basix 1.3.3 → 1.3.4

package/README.md

@@ -1,4 +1,4 @@
-# Basix 1.3.3
+# Basix 1.3.4
 
 Basix is intended as a starter for the rapid development of a design. Each design element can be added individually to
 include only the data required. It is using plain javascript / typescript and therefore is not dependent on any plugin.

package/css/badge.scss

@@ -97,3 +97,11 @@
     &.badge-error   { background: var(--error); }
   }
 }
+
+[data-theme="dark"] {
+  .badge-solid {
+    &.badge-success { color: var(--background); }
+    &.badge-warning { color: var(--background); }
+    &.badge-error   { color: var(--background); }
+  }
+}

package/css/button.scss

@@ -60,7 +60,7 @@ button,
   }
 
   &.active {
-    background: var(--divider);
+    background: var(--accent-color-tint);
     color: var(--accent-color);
   }
 
@@ -172,29 +172,75 @@ button.button-error {
 
   .button-success,
   button.button-success {
-    @include button-variant-dark(var(--success));
+    color: var(--background);
+    &:hover:not(:disabled) { background: color-mix(in srgb, var(--success) 82%, white); }
+    &:active:not(:disabled) { background: color-mix(in srgb, var(--success) 70%, white); }
+    &.is-loading::after { color: var(--background); }
   }
 
   .button-warning,
   button.button-warning {
-    @include button-variant-dark(var(--warning));
+    color: var(--background);
+    &:hover:not(:disabled) { background: color-mix(in srgb, var(--warning) 82%, white); }
+    &:active:not(:disabled) { background: color-mix(in srgb, var(--warning) 70%, white); }
+    &.is-loading::after { color: var(--background); }
   }
 
   .button-error,
   button.button-error {
-    @include button-variant-dark(var(--error));
+    color: var(--background);
+    &:hover:not(:disabled) { background: color-mix(in srgb, var(--error) 82%, white); }
+    &:active:not(:disabled) { background: color-mix(in srgb, var(--error) 70%, white); }
+    &.is-loading::after { color: var(--background); }
   }
 
-  .button-primary,
-  button.button-primary,
-  .button-success,
-  button.button-success,
-  .button-warning,
-  button.button-warning,
-  .button-error,
-  button.button-error {
-    &.is-loading::after {
-      color: var(--primary-text);
-    }
+  .button-primary.is-loading::after,
+  button.button-primary.is-loading::after {
+    color: var(--primary-text);
+  }
+}
+
+// Size variants
+.button-sm,
+button.button-sm {
+  padding: calc($spacing * 0.35) calc($spacing * 0.75);
+  font-size: 0.8125rem;
+}
+
+.button-lg,
+button.button-lg {
+  padding: calc($spacing * 0.8) calc($spacing * 1.75);
+  font-size: 1.0625rem;
+}
+
+// Outline variant
+.button-outline,
+button.button-outline {
+  background: transparent;
+  border: 1px solid var(--divider);
+  color: var(--primary-text);
+
+  &:hover:not(:disabled) {
+    background: var(--hover);
+    border-color: color-mix(in srgb, var(--divider) 50%, var(--primary-text));
   }
+
+  &:active:not(:disabled) {
+    background: var(--secondary-background);
+  }
+}
+
+// Icon-only button — square, equal padding
+.button-icon,
+button.button-icon {
+  padding: calc($spacing * 0.5);
+  width: 2.25rem;
+  height: 2.25rem;
+  flex-shrink: 0;
+}
+
+// Pill variant
+.button-pill,
+button.button-pill {
+  border-radius: $radius-xl;
 }

package/css/chips.scss

@@ -39,6 +39,16 @@
         outline: none;
         @include focus-glow();
       }
+
+      &.selected {
+        background: color-mix(in srgb, var(--accent-color) 12%, var(--background));
+        color: var(--accent-color);
+        border-color: color-mix(in srgb, var(--accent-color) 25%, transparent);
+
+        &:hover {
+          background: color-mix(in srgb, var(--accent-color) 18%, var(--background));
+        }
+      }
     }
 
     &.closeable {

package/css/colors.scss

@@ -30,4 +30,8 @@ body {
 
 .default-bg {
   background: var(--divider);
+}
+
+.info-bg {
+  background: var(--accent-color);
 }

package/css/docs.scss

@@ -191,10 +191,6 @@
 
     code {
         font-size: 0.8em;
-        background: var(--secondary-background);
-        border: 1px solid var(--divider);
-        border-radius: 0.25rem;
-        padding: 0.1em 0.35em;
     }
 
     .docs-demo {

package/css/dropdown.scss

@@ -14,6 +14,20 @@
     }
   }
 
+  &.drop-up {
+    > .dropdown-menu {
+      top: auto;
+      bottom: 100%;
+      margin-top: 0;
+      margin-bottom: 6px;
+      transform: translateY(8px);
+    }
+
+    &.active > .dropdown-menu {
+      transform: translateY(0);
+    }
+  }
+
   .dropdown-menu {
     position: absolute;
     top: 100%;

package/css/modal.scss

@@ -88,6 +88,27 @@
   }
 }
 
+// Coloured variants — border echoes the type colour, close icon and header text go white
+.modal-success { border-color: color-mix(in srgb, var(--success)      35%, transparent); }
+.modal-error   { border-color: color-mix(in srgb, var(--error)        35%, transparent); }
+.modal-warning { border-color: color-mix(in srgb, var(--warning)      35%, transparent); }
+.modal-info    { border-color: color-mix(in srgb, var(--accent-color) 35%, transparent); }
+
+.modal-success,
+.modal-error,
+.modal-warning,
+.modal-info {
+  .close {
+    color: rgba(255, 255, 255, 0.8);
+    &:hover { color: #fff; }
+  }
+
+  .header {
+    color: #fff;
+    border-bottom-color: rgba(255, 255, 255, 0.2);
+  }
+}
+
 @media screen and (max-width: 768px) {
   .modal-wrapper.is-visible .modal {
     transform: translateY(0);

package/css/sidebar-nav.scss

@@ -57,6 +57,10 @@
   svg { display: block; }
 }
 
+.sidebar-close {
+  display: none;
+}
+
 @media (max-width: 768px) {
   .sidebar-toggle {
     display: flex;
@@ -77,4 +81,25 @@
   .sidebar-main {
     margin-left: 0;
   }
+
+  .sidebar-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    bottom: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--secondary-background);
+    border: none;
+    border-radius: $border-radius;
+    padding: 0.5rem 1.25rem;
+    cursor: pointer;
+    color: var(--primary-text);
+    gap: 0.4rem;
+    font-size: 0.875rem;
+    white-space: nowrap;
+
+    &:hover { background: var(--divider); }
+  }
 }

package/css/style.css

@@ -131,6 +131,10 @@ body {
   background: var(--divider);
 }
 
+.info-bg {
+  background: var(--accent-color);
+}
+
 html, body {
   overflow: auto;
 }
@@ -285,12 +289,13 @@ p {
 }
 
 code {
-  font-family: "Courier New", Courier, monospace;
+  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
   font-size: 0.875em;
-  background: var(--secondary-background);
-  border: 1px solid var(--divider);
-  padding: 0.15em 0.4em;
-  border-radius: 0.2rem;
+  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent-color) 20%, transparent);
+  color: var(--accent-color);
+  padding: 0.2em 0.45em;
+  border-radius: 0.4rem;
 }
 
 pre code {
@@ -405,7 +410,7 @@ ul li {
   list-style-type: disc;
 }
 ul li li {
-  list-style-type: circle;
+  list-style-type: "· ";
 }
 
 ol li {
@@ -415,8 +420,37 @@ ol li li {
   list-style-type: lower-latin;
 }
 
+li::marker {
+  color: var(--secondary-text);
+}
+
+ol li::marker {
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  font-size: 0.875em;
+}
+
 li + li {
-  margin-top: 0.25em;
+  margin-top: 0.4em;
+}
+
+dl {
+  margin-bottom: 0.6666666667rem;
+}
+
+dt {
+  font-weight: 600;
+  color: var(--primary-text);
+  margin-top: 0.5rem;
+}
+dt:first-child {
+  margin-top: 0;
+}
+
+dd {
+  padding-left: 1.5rem;
+  color: var(--secondary-text);
+  margin-top: 0.15em;
 }
 
 hr {
@@ -1661,7 +1695,7 @@ button:focus-visible,
 }
 button.active,
 .button.active {
-  background: var(--divider);
+  background: var(--accent-color-tint);
   color: var(--accent-color);
 }
 button:disabled,
@@ -1808,7 +1842,7 @@ button.button-error:active:not(:disabled) {
 }
 [data-theme=dark] .button-success,
 [data-theme=dark] button.button-success {
-  color: var(--primary-text);
+  color: var(--background);
 }
 [data-theme=dark] .button-success:hover:not(:disabled),
 [data-theme=dark] button.button-success:hover:not(:disabled) {
@@ -1818,9 +1852,13 @@ button.button-error:active:not(:disabled) {
 [data-theme=dark] button.button-success:active:not(:disabled) {
   background: color-mix(in srgb, var(--success) 70%, white);
 }
+[data-theme=dark] .button-success.is-loading::after,
+[data-theme=dark] button.button-success.is-loading::after {
+  color: var(--background);
+}
 [data-theme=dark] .button-warning,
 [data-theme=dark] button.button-warning {
-  color: var(--primary-text);
+  color: var(--background);
 }
 [data-theme=dark] .button-warning:hover:not(:disabled),
 [data-theme=dark] button.button-warning:hover:not(:disabled) {
@@ -1830,9 +1868,13 @@ button.button-error:active:not(:disabled) {
 [data-theme=dark] button.button-warning:active:not(:disabled) {
   background: color-mix(in srgb, var(--warning) 70%, white);
 }
+[data-theme=dark] .button-warning.is-loading::after,
+[data-theme=dark] button.button-warning.is-loading::after {
+  color: var(--background);
+}
 [data-theme=dark] .button-error,
 [data-theme=dark] button.button-error {
-  color: var(--primary-text);
+  color: var(--background);
 }
 [data-theme=dark] .button-error:hover:not(:disabled),
 [data-theme=dark] button.button-error:hover:not(:disabled) {
@@ -1842,17 +1884,56 @@ button.button-error:active:not(:disabled) {
 [data-theme=dark] button.button-error:active:not(:disabled) {
   background: color-mix(in srgb, var(--error) 70%, white);
 }
-[data-theme=dark] .button-primary.is-loading::after,
-[data-theme=dark] button.button-primary.is-loading::after,
-[data-theme=dark] .button-success.is-loading::after,
-[data-theme=dark] button.button-success.is-loading::after,
-[data-theme=dark] .button-warning.is-loading::after,
-[data-theme=dark] button.button-warning.is-loading::after,
 [data-theme=dark] .button-error.is-loading::after,
 [data-theme=dark] button.button-error.is-loading::after {
+  color: var(--background);
+}
+[data-theme=dark] .button-primary.is-loading::after,
+[data-theme=dark] button.button-primary.is-loading::after {
   color: var(--primary-text);
 }
 
+.button-sm,
+button.button-sm {
+  padding: 0.35rem 0.75rem;
+  font-size: 0.8125rem;
+}
+
+.button-lg,
+button.button-lg {
+  padding: 0.8rem 1.75rem;
+  font-size: 1.0625rem;
+}
+
+.button-outline,
+button.button-outline {
+  background: transparent;
+  border: 1px solid var(--divider);
+  color: var(--primary-text);
+}
+.button-outline:hover:not(:disabled),
+button.button-outline:hover:not(:disabled) {
+  background: var(--hover);
+  border-color: color-mix(in srgb, var(--divider) 50%, var(--primary-text));
+}
+.button-outline:active:not(:disabled),
+button.button-outline:active:not(:disabled) {
+  background: var(--secondary-background);
+}
+
+.button-icon,
+button.button-icon {
+  padding: 0.5rem;
+  width: 2.25rem;
+  height: 2.25rem;
+  flex-shrink: 0;
+}
+
+.button-pill,
+button.button-pill {
+  border-radius: 1.6rem;
+}
+
 .modal-wrapper {
   position: fixed;
   inset: 0;
@@ -1932,6 +2013,42 @@ button.button-error:active:not(:disabled) {
   gap: 0.5rem;
 }
 
+.modal-success {
+  border-color: color-mix(in srgb, var(--success) 35%, transparent);
+}
+
+.modal-error {
+  border-color: color-mix(in srgb, var(--error) 35%, transparent);
+}
+
+.modal-warning {
+  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
+}
+
+.modal-info {
+  border-color: color-mix(in srgb, var(--accent-color) 35%, transparent);
+}
+
+.modal-success .close,
+.modal-error .close,
+.modal-warning .close,
+.modal-info .close {
+  color: rgba(255, 255, 255, 0.8);
+}
+.modal-success .close:hover,
+.modal-error .close:hover,
+.modal-warning .close:hover,
+.modal-info .close:hover {
+  color: #fff;
+}
+.modal-success .header,
+.modal-error .header,
+.modal-warning .header,
+.modal-info .header {
+  color: #fff;
+  border-bottom-color: rgba(255, 255, 255, 0.2);
+}
+
 @media screen and (max-width: 768px) {
   .modal-wrapper.is-visible .modal {
     transform: translateY(0);
@@ -3319,6 +3436,14 @@ nav li + li .push-menu-item {
   outline: none;
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 35%, transparent);
 }
+.chips .chip.clickable.selected {
+  background: color-mix(in srgb, var(--accent-color) 12%, var(--background));
+  color: var(--accent-color);
+  border-color: color-mix(in srgb, var(--accent-color) 25%, transparent);
+}
+.chips .chip.clickable.selected:hover {
+  background: color-mix(in srgb, var(--accent-color) 18%, var(--background));
+}
 .chips .chip.closeable {
   padding-right: 1.8rem;
 }
@@ -3505,6 +3630,16 @@ nav li + li .push-menu-item {
   background: var(--error);
 }
 
+[data-theme=dark] .badge-solid.badge-success {
+  color: var(--background);
+}
+[data-theme=dark] .badge-solid.badge-warning {
+  color: var(--background);
+}
+[data-theme=dark] .badge-solid.badge-error {
+  color: var(--background);
+}
+
 @keyframes stepper-pulse {
   0% {
     box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color) 35%, transparent);
@@ -4528,6 +4663,7 @@ body {
 
 .tabs-list {
   display: flex;
+  align-items: center;
   margin: 0;
   padding: 0;
   overflow-x: auto;
@@ -4538,6 +4674,7 @@ body {
 }
 
 .tab-item {
+  margin-top: 0;
   padding: 0.75rem 1.25rem;
   cursor: pointer;
   font-size: 0.875rem;
@@ -4556,6 +4693,11 @@ body {
   font-weight: 600;
   border-bottom-color: var(--accent-color);
 }
+.tab-item:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: -2px;
+  border-radius: 0.4rem 0.4rem 0 0;
+}
 
 .tabs-content {
   padding: 1.5rem;
@@ -4575,6 +4717,7 @@ body {
 }
 .tabs-container.tabs-vertical .tabs-list {
   flex-direction: column;
+  align-items: stretch;
 }
 .tabs-container.tabs-vertical .tab-item {
   width: 100%;
@@ -4586,6 +4729,9 @@ body {
   border-left-color: var(--accent-color);
   font-weight: 600;
 }
+.tabs-container.tabs-vertical .tab-item:focus-visible {
+  border-radius: 0 0.4rem 0.4rem 0;
+}
 .tabs-container.tabs-vertical .tabs-content {
   flex: 1;
 }
@@ -4612,8 +4758,33 @@ body {
   color: #fff;
   border-bottom-color: transparent;
 }
+.tabs-container.tabs-pills .tab-item:focus-visible {
+  border-radius: 2rem;
+}
 
 @media (max-width: 768px) {
+  .tab-item {
+    padding: 0.875rem 1.25rem;
+  }
+  .tabs-content {
+    padding: 1rem;
+  }
+  .tabs-header {
+    position: relative;
+  }
+  .tabs-header::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 1px;
+    width: 2.5rem;
+    background: linear-gradient(to right, transparent, var(--primary-bg));
+    pointer-events: none;
+  }
+  .tabs-container.tabs-pills .tabs-header::after {
+    bottom: 0;
+  }
   .tabs-container.tabs-vertical {
     flex-direction: column;
   }
@@ -4625,6 +4796,7 @@ body {
   .tabs-container.tabs-vertical .tabs-list {
     flex-direction: row;
     overflow-x: auto;
+    align-items: center;
   }
   .tabs-container.tabs-vertical .tab-item {
     width: auto;
@@ -5463,6 +5635,16 @@ body {
   pointer-events: auto;
   transform: translateY(0);
 }
+.dropdown-container.drop-up > .dropdown-menu {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: 6px;
+  transform: translateY(8px);
+}
+.dropdown-container.drop-up.active > .dropdown-menu {
+  transform: translateY(0);
+}
 .dropdown-container .dropdown-menu {
   position: absolute;
   top: 100%;
@@ -8479,6 +8661,10 @@ body {
   display: block;
 }
 
+.sidebar-close {
+  display: none;
+}
+
 @media (max-width: 768px) {
   .sidebar-toggle {
     display: flex;
@@ -8496,6 +8682,27 @@ body {
   .sidebar-main {
     margin-left: 0;
   }
+  .sidebar-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    bottom: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--secondary-background);
+    border: none;
+    border-radius: 0.4rem;
+    padding: 0.5rem 1.25rem;
+    cursor: pointer;
+    color: var(--primary-text);
+    gap: 0.4rem;
+    font-size: 0.875rem;
+    white-space: nowrap;
+  }
+  .sidebar-close:hover {
+    background: var(--divider);
+  }
 }
 .sidebar-nav .docs-sidebar-logo {
   display: flex;
@@ -8678,10 +8885,6 @@ body {
 }
 .docs-content code {
   font-size: 0.8em;
-  background: var(--secondary-background);
-  border: 1px solid var(--divider);
-  border-radius: 0.25rem;
-  padding: 0.1em 0.35em;
 }
 .docs-content .docs-demo {
   background: var(--secondary-background);