@dodlhuat/basix 1.0.0 → 1.1.1

package/README.md

@@ -1,4 +1,4 @@
-# Basix 1.0.0
+# Basix 1.1.0
 
 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/accordion.scss

@@ -6,7 +6,6 @@
   border: 1px solid var(--divider);
   border-radius: $border-radius;
   overflow: hidden;
-  box-shadow: $shadow;
 }
 
 .accordion-item {
@@ -25,42 +24,50 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: $spacing calc($spacing * 1.5);
-  background: var(--divider);
-  font-weight: 600;
+  padding: calc($spacing * 0.85) calc($spacing * 1.25);
+  background: transparent;
+  font-weight: 500;
   cursor: pointer;
-  transition: background-color 0.2s ease;
+  transition: background 160ms ease,
+              color 160ms ease;
   user-select: none;
-}
+  -webkit-tap-highlight-color: transparent;
+
+  &:hover {
+    background: var(--hover);
+  }
 
-.accordion-label:hover {
-  background: var(--accent-color-lighten);
+  &:active {
+    background: var(--hover);
+  }
 }
 
 .accordion-label::after {
   content: '';
-  width: 10px;
-  height: 10px;
-  border-right: 2px solid currentColor;
-  border-bottom: 2px solid currentColor;
+  width: 8px;
+  height: 8px;
+  border-right: 1.5px solid var(--secondary-text);
+  border-bottom: 1.5px solid var(--secondary-text);
   transform: rotate(45deg);
-  transition: transform 0.3s ease;
+  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
+              border-color 160ms ease;
   margin-left: $spacing;
+  flex-shrink: 0;
 }
 
 .accordion-input:checked + .accordion-label {
-  background: var(--accent-color);
-  color: var(--acc-accent);
-}
+  color: var(--accent-color);
 
-.accordion-input:checked + .accordion-label::after {
-  transform: rotate(-135deg);
+  &::after {
+    transform: rotate(-135deg);
+    border-color: var(--accent-color);
+  }
 }
 
 .accordion-content {
   display: grid;
   grid-template-rows: 0fr;
-  transition: grid-template-rows 0.3s ease-out;
+  transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
 }
 
@@ -69,10 +76,12 @@
 }
 
 .accordion-body > div {
-  padding: calc($spacing * 1.5);
-  border-top: 1px solid transparent;
+  padding: 0 calc($spacing * 1.25) calc($spacing * 1.25);
+  color: var(--secondary-text);
+  font-size: 0.9rem;
+  line-height: 1.6;
 }
 
 .accordion-input:checked ~ .accordion-content {
   grid-template-rows: 1fr;
-}
+}

package/css/alert.scss

@@ -1,23 +1,43 @@
 @use "properties";
 @use "parameters" as *;
 
-$alert-border-width: calc($spacing / 2);
-$alert-border-darken: 20%;
+$alert-border-width: 4px;
 
-@mixin alert-variant($bg-color, $text-color: var(--divider)) {
-  background: $bg-color;
-  border-left-color: color-mix(in srgb, $bg-color 80%, black);
-  color: $text-color;
+@mixin alert-variant($accent, $bg-tint) {
+  background: $bg-tint;
+  border-left-color: $accent;
+  color: var(--primary-text);
+
+  strong {
+    color: $accent;
+  }
+
+  .alert-icon {
+    fill: $accent;
+  }
+
+  .alert-close:hover {
+    background: color-mix(in srgb, $accent 12%, transparent);
+  }
 }
 
 .alert {
   position: relative;
   border-radius: $border-radius;
-  padding: calc($spacing) calc($spacing) calc($spacing) calc($spacing + $alert-border-width);
-  border-left: $alert-border-width solid;
+  padding: calc($spacing * 0.75) $spacing calc($spacing * 0.75) calc($spacing + $alert-border-width);
+  border-left: $alert-border-width solid transparent;
   color: var(--primary-text);
-  box-shadow: $shadow;
-  line-height: 1.5;
+  line-height: 1.6;
+  font-size: 0.9rem;
+
+  & + & {
+    margin-top: calc($spacing / 2);
+  }
+
+  strong {
+    font-weight: 600;
+    letter-spacing: -0.01em;
+  }
 
   &-default {
     background: var(--secondary-background);
@@ -26,36 +46,49 @@ $alert-border-darken: 20%;
   }
 
   &-info {
-    @include alert-variant(var(--accent-color));
+    @include alert-variant(
+      var(--accent-color),
+      color-mix(in srgb, var(--accent-color) 8%, var(--background))
+    );
   }
 
   &-success {
-    @include alert-variant(var(--success));
+    @include alert-variant(
+      var(--success),
+      color-mix(in srgb, var(--success) 8%, var(--background))
+    );
   }
 
   &-warning {
-    @include alert-variant(var(--warning));
+    @include alert-variant(
+      var(--warning),
+      color-mix(in srgb, var(--warning) 8%, var(--background))
+    );
   }
 
   &-error {
-    @include alert-variant(var(--error));
+    @include alert-variant(
+      var(--error),
+      color-mix(in srgb, var(--error) 8%, var(--background))
+    );
   }
 
   &-dismissible {
-    padding-right: calc($spacing * 5);
+    padding-right: calc($spacing * 3);
 
     .alert-close {
       position: absolute;
       top: 50%;
-      right: calc($spacing * 1.5);
+      right: calc($spacing * 0.75);
       transform: translateY(-50%);
       background: transparent;
       border: none;
+      border-radius: $border-radius;
       cursor: pointer;
-      padding: calc($spacing) calc($spacing * 1.5) calc($spacing) calc($spacing * 1.5 + $alert-border-width);
+      padding: calc($spacing / 4) calc($spacing / 2);
       color: inherit;
-      opacity: 0.7;
-      transition: opacity 0.2s ease;
+      opacity: 0.5;
+      transition: opacity 0.2s ease, background 0.2s ease;
 
       &:hover {
         opacity: 1;
@@ -64,23 +97,42 @@ $alert-border-darken: 20%;
   }
 
   .alert-icon {
+    width: 1.1em;
+    height: 1.1em;
     margin-right: calc($spacing / 2);
-    vertical-align: middle;
+    vertical-align: -0.15em;
+    fill: currentColor;
   }
 }
 
 [data-theme="dark"] {
   .alert {
-    &-default {
-      background: var(--secondary-background);
-      border-left-color: var(--divider);
+    &-info {
+      @include alert-variant(
+        var(--accent-color),
+        color-mix(in srgb, var(--accent-color) 10%, var(--background))
+      );
+    }
+
+    &-success {
+      @include alert-variant(
+        var(--success),
+        color-mix(in srgb, var(--success) 10%, var(--background))
+      );
+    }
+
+    &-warning {
+      @include alert-variant(
+        var(--warning),
+        color-mix(in srgb, var(--warning) 10%, var(--background))
+      );
     }
 
-    &-info,
-    &-success,
-    &-warning,
     &-error {
-      filter: brightness(0.9);
+      @include alert-variant(
+        var(--error),
+        color-mix(in srgb, var(--error) 10%, var(--background))
+      );
     }
   }
 }

package/css/button.scss

@@ -1,102 +1,151 @@
-@use "properties";
-@use "parameters" as *;
-
-// Base button styles
-button,
-.button {
-  padding: $spacing $spacing * 2;
-  border-radius: $border-radius;
-  background: var(--divider);
-  color: var(--primary-text);
-  border: none;
-  cursor: pointer;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: 1;
-  transition: filter 0.2s ease;
-
-  // Hover state
-  &:hover:not(:disabled) {
-    filter: brightness(115%);
-  }
-
-  // Focus state for accessibility
-  &:focus-visible {
-    outline: 2px solid var(--accent-color);
-    outline-offset: 2px;
-  }
-
-  // Active state
-  &.active {
-    background: var(--accent-color-lighten);
-  }
-
-  // Disabled state
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-}
-
-// Button variants
-.button-primary,
-button.button-primary {
-  background: var(--accent-color);
-  color: var(--divider);
-}
-
-.button-success,
-button.button-success {
-  background: var(--success);
-  color: var(--divider);
-}
-
-.button-warning,
-button.button-warning {
-  background: var(--warning);
-  color: var(--divider);
-}
-
-.button-error,
-button.button-error {
-  background: var(--error);
-  color: var(--divider);
-}
-
-// Button group
-.button-group {
-  display: inline-flex;
-  gap: 0;
-
-  button,
-  .button {
-    border-radius: 0;
-
-    &:first-child {
-      border-radius: $border-radius 0 0 $border-radius;
-    }
-
-    &:last-child {
-      border-radius: 0 $border-radius $border-radius 0;
-    }
-
-    &:only-child {
-      border-radius: $border-radius;
-    }
-  }
-}
-
-// Dark theme overrides
-[data-theme="dark"] {
-  button,
-  .button {
-    &:hover:not(:disabled) {
-      filter: brightness(85%);
-    }
-  }
-
-  .button-primary,
-  button.button-primary {
-    color: var(--primary-text);
-  }
-}
+@use "properties";
+@use "parameters" as *;
+
+@mixin button-variant($bg) {
+  background: $bg;
+  color: var(--background);
+
+  &:hover:not(:disabled) {
+    background: color-mix(in srgb, $bg 85%, black);
+  }
+
+  &:active:not(:disabled) {
+    background: color-mix(in srgb, $bg 75%, black);
+  }
+}
+
+@mixin button-variant-dark($bg) {
+  color: var(--primary-text);
+
+  &:hover:not(:disabled) {
+    background: color-mix(in srgb, $bg 82%, white);
+  }
+
+  &:active:not(:disabled) {
+    background: color-mix(in srgb, $bg 70%, white);
+  }
+}
+
+button,
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc($spacing / 3);
+  padding: calc($spacing * 0.6) calc($spacing * 1.25);
+  border-radius: $border-radius;
+  background: var(--secondary-background);
+  color: var(--primary-text);
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
+
+  &:hover:not(:disabled) {
+    background: var(--divider);
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(0.97);
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 35%, transparent);
+  }
+
+  &.active {
+    background: var(--divider);
+    color: var(--accent-color);
+  }
+
+  &:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+}
+
+.button-primary,
+button.button-primary {
+  @include button-variant(var(--accent-color));
+}
+
+.button-success,
+button.button-success {
+  @include button-variant(var(--success));
+}
+
+.button-warning,
+button.button-warning {
+  @include button-variant(var(--warning));
+}
+
+.button-error,
+button.button-error {
+  @include button-variant(var(--error));
+}
+
+.button-group {
+  display: inline-flex;
+
+  button,
+  .button {
+    border-radius: 0;
+    position: relative;
+
+    &:not(:last-child)::after {
+      content: "";
+      position: absolute;
+      right: 0;
+      top: 20%;
+      height: 60%;
+      width: 1px;
+      background: color-mix(in srgb, currentColor 15%, transparent);
+    }
+
+    &:first-child {
+      border-radius: $border-radius 0 0 $border-radius;
+    }
+
+    &:last-child {
+      border-radius: 0 $border-radius $border-radius 0;
+    }
+
+    &:only-child {
+      border-radius: $border-radius;
+    }
+  }
+}
+
+[data-theme="dark"] {
+  button,
+  .button {
+    &:hover:not(:disabled) {
+      background: var(--divider);
+    }
+  }
+
+  .button-primary,
+  button.button-primary {
+    @include button-variant-dark(var(--accent-color));
+  }
+
+  .button-success,
+  button.button-success {
+    @include button-variant-dark(var(--success));
+  }
+
+  .button-warning,
+  button.button-warning {
+    @include button-variant-dark(var(--warning));
+  }
+
+  .button-error,
+  button.button-error {
+    @include button-variant-dark(var(--error));
+  }
+}

package/css/card.scss

@@ -10,26 +10,26 @@
   padding: $spacing;
   position: relative;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  &.row {
+    flex-direction: row;
+  }
 
   // Card header
-  .header {
+  .card-header {
     border-bottom: 1px solid var(--divider);
-    margin: -$spacing -$spacing $spacing -$spacing;
+    margin: (-$spacing) (-$spacing) $spacing (-$spacing);
     padding: $spacing;
   }
 
   // Card footer
-  .footer {
+  .card-footer {
     border-top: 1px solid var(--divider);
-    margin: $spacing -$spacing -$spacing -$spacing;
+    margin: auto (-$spacing) (-$spacing) (-$spacing);
     padding: $spacing;
   }
-
-  // Card body/content
-  .body,
-  .content {
-    padding: 0;
-  }
 }
 
 // Card variants
@@ -46,7 +46,7 @@
   transition: box-shadow 0.3s ease, transform 0.3s ease;
 
   &:hover {
-    box-shadow: 0 4px 8px rgba(56, 65, 74, 0.2);
+    box-shadow: 0 4px 8px var(--divider);
     transform: translateY(-2px);
   }
 }
@@ -63,4 +63,3 @@
 .card-padding-lg {
   padding: calc($spacing * 2);
 }
-