@dodlhuat/basix 1.1.1 → 1.2.1

package/css/accordion.scss

@@ -1,87 +1,86 @@
-@use "properties";
-@use "parameters" as *;
-
-.accordion {
-  margin: 0 auto;
-  border: 1px solid var(--divider);
-  border-radius: $border-radius;
-  overflow: hidden;
-}
-
-.accordion-item {
-  border-bottom: 1px solid var(--divider);
-}
-
-.accordion-item:last-child {
-  border-bottom: none;
-}
-
-.accordion-input {
-  display: none;
-}
-
-.accordion-label {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: calc($spacing * 0.85) calc($spacing * 1.25);
-  background: transparent;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 160ms ease,
-              color 160ms ease;
-  user-select: none;
-  -webkit-tap-highlight-color: transparent;
-
-  &:hover {
-    background: var(--hover);
-  }
-
-  &:active {
-    background: var(--hover);
-  }
-}
-
-.accordion-label::after {
-  content: '';
-  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 250ms cubic-bezier(0.4, 0, 0.2, 1),
-              border-color 160ms ease;
-  margin-left: $spacing;
-  flex-shrink: 0;
-}
-
-.accordion-input:checked + .accordion-label {
-  color: var(--accent-color);
-
-  &::after {
-    transform: rotate(-135deg);
-    border-color: var(--accent-color);
-  }
-}
-
-.accordion-content {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);
-  overflow: hidden;
-}
-
-.accordion-body {
-  min-height: 0;
-}
-
-.accordion-body > div {
-  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;
-}
+@use "properties";
+@use "parameters" as *;
+
+.accordion {
+  margin: 0 auto;
+  border: 1px solid var(--divider);
+  border-radius: $border-radius;
+  overflow: hidden;
+}
+
+.accordion-item {
+  border-bottom: 1px solid var(--divider);
+
+  &:last-child { border-bottom: none; }
+}
+
+// Hidden checkbox toggle
+.accordion-toggle {
+  display: none;
+}
+
+// Clickable header / trigger
+.accordion-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: calc($spacing * 0.85) calc($spacing * 1.25);
+  background: transparent;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 160ms ease, color 160ms ease;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+
+  &:hover  { background: var(--hover); }
+  &:active { background: var(--hover); }
+
+  &::after {
+    content: '';
+    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 250ms cubic-bezier(0.4, 0, 0.2, 1),
+                border-color 160ms ease;
+    margin-left: $spacing;
+    flex-shrink: 0;
+  }
+}
+
+// Active state
+.accordion-toggle:checked + .accordion-header {
+  color: var(--accent-color);
+
+  &::after {
+    transform: rotate(-135deg);
+    border-color: var(--accent-color);
+  }
+}
+
+// Grid wrapper — animates height via grid-template-rows
+.accordion-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+
+.accordion-toggle:checked ~ .accordion-content {
+  grid-template-rows: 1fr;
+}
+
+// Inner body — min-height:0 is required for grid 0fr to collapse
+.accordion-body {
+  min-height: 0;
+  padding: 0;
+  overflow: hidden;
+
+  > * {
+    padding: 0 calc($spacing * 1.25) calc($spacing * 1.25);
+    color: var(--secondary-text);
+    font-size: 0.9rem;
+    line-height: 1.6;
+  }
+}

package/css/alert.scss

@@ -1,138 +1,138 @@
-@use "properties";
-@use "parameters" as *;
-
-$alert-border-width: 4px;
-
-@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 * 0.75) $spacing calc($spacing * 0.75) calc($spacing + $alert-border-width);
-  border-left: $alert-border-width solid transparent;
-  color: var(--primary-text);
-  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);
-    border-left-color: var(--divider);
-    color: var(--primary-text);
-  }
-
-  &-info {
-    @include alert-variant(
-      var(--accent-color),
-      color-mix(in srgb, var(--accent-color) 8%, var(--background))
-    );
-  }
-
-  &-success {
-    @include alert-variant(
-      var(--success),
-      color-mix(in srgb, var(--success) 8%, var(--background))
-    );
-  }
-
-  &-warning {
-    @include alert-variant(
-      var(--warning),
-      color-mix(in srgb, var(--warning) 8%, var(--background))
-    );
-  }
-
-  &-error {
-    @include alert-variant(
-      var(--error),
-      color-mix(in srgb, var(--error) 8%, var(--background))
-    );
-  }
-
-  &-dismissible {
-    padding-right: calc($spacing * 3);
-
-    .alert-close {
-      position: absolute;
-      top: 50%;
-      right: calc($spacing * 0.75);
-      transform: translateY(-50%);
-      background: transparent;
-      border: none;
-      border-radius: $border-radius;
-      cursor: pointer;
-      padding: calc($spacing / 4) calc($spacing / 2);
-      color: inherit;
-      opacity: 0.5;
-      transition: opacity 0.2s ease, background 0.2s ease;
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-
-  .alert-icon {
-    width: 1.1em;
-    height: 1.1em;
-    margin-right: calc($spacing / 2);
-    vertical-align: -0.15em;
-    fill: currentColor;
-  }
-}
-
-[data-theme="dark"] {
-  .alert {
-    &-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))
-      );
-    }
-
-    &-error {
-      @include alert-variant(
-        var(--error),
-        color-mix(in srgb, var(--error) 10%, var(--background))
-      );
-    }
-  }
+@use "properties";
+@use "parameters" as *;
+
+$alert-border-width: 4px;
+
+@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 * 0.75) $spacing calc($spacing * 0.75) calc($spacing + $alert-border-width);
+  border-left: $alert-border-width solid transparent;
+  color: var(--primary-text);
+  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);
+    border-left-color: var(--divider);
+    color: var(--primary-text);
+  }
+
+  &-info {
+    @include alert-variant(
+      var(--accent-color),
+      color-mix(in srgb, var(--accent-color) 8%, var(--background))
+    );
+  }
+
+  &-success {
+    @include alert-variant(
+      var(--success),
+      color-mix(in srgb, var(--success) 8%, var(--background))
+    );
+  }
+
+  &-warning {
+    @include alert-variant(
+      var(--warning),
+      color-mix(in srgb, var(--warning) 8%, var(--background))
+    );
+  }
+
+  &-error {
+    @include alert-variant(
+      var(--error),
+      color-mix(in srgb, var(--error) 8%, var(--background))
+    );
+  }
+
+  &-dismissible {
+    padding-right: calc($spacing * 3);
+
+    .alert-close {
+      position: absolute;
+      top: 50%;
+      right: calc($spacing * 0.75);
+      transform: translateY(-50%);
+      background: transparent;
+      border: none;
+      border-radius: $border-radius;
+      cursor: pointer;
+      padding: calc($spacing / 4) calc($spacing / 2);
+      color: inherit;
+      opacity: 0.5;
+      transition: opacity 0.2s ease, background 0.2s ease;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  .alert-icon {
+    width: 1.1em;
+    height: 1.1em;
+    margin-right: calc($spacing / 2);
+    vertical-align: -0.15em;
+    fill: currentColor;
+  }
+}
+
+[data-theme="dark"] {
+  .alert {
+    &-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))
+      );
+    }
+
+    &-error {
+      @include alert-variant(
+        var(--error),
+        color-mix(in srgb, var(--error) 10%, var(--background))
+      );
+    }
+  }
 }

package/css/badge.scss

@@ -0,0 +1,104 @@
+@use "properties";
+@use "parameters" as *;
+
+@mixin badge-variant($color, $bg) {
+  background: $bg;
+  color: $color;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: calc($spacing * 0.3);
+  padding: calc($spacing * 0.15) calc($spacing * 0.5);
+  border-radius: calc($border-radius * 4);
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.4;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  vertical-align: middle;
+  border: 1px solid transparent;
+
+  // Default — neutral
+  background: var(--secondary-background);
+  color: var(--secondary-text);
+
+  &-info {
+    @include badge-variant(
+      var(--accent-color),
+      color-mix(in srgb, var(--accent-color) 12%, var(--background))
+    );
+    border-color: color-mix(in srgb, var(--accent-color) 20%, transparent);
+  }
+
+  &-success {
+    @include badge-variant(
+      var(--success),
+      color-mix(in srgb, var(--success) 12%, var(--background))
+    );
+    border-color: color-mix(in srgb, var(--success) 20%, transparent);
+  }
+
+  &-warning {
+    @include badge-variant(
+      var(--warning),
+      color-mix(in srgb, var(--warning) 12%, var(--background))
+    );
+    border-color: color-mix(in srgb, var(--warning) 20%, transparent);
+  }
+
+  &-error {
+    @include badge-variant(
+      var(--error),
+      color-mix(in srgb, var(--error) 12%, var(--background))
+    );
+    border-color: color-mix(in srgb, var(--error) 20%, transparent);
+  }
+
+  // Solid filled
+  &-solid {
+    &.badge-info    { background: var(--accent-color); color: #fff; border-color: transparent; }
+    &.badge-success { background: var(--success);      color: #fff; border-color: transparent; }
+    &.badge-warning { background: var(--warning);      color: #fff; border-color: transparent; }
+    &.badge-error   { background: var(--error);        color: #fff; border-color: transparent; }
+  }
+
+  // Outline only
+  &-outline {
+    background: transparent;
+    border-color: var(--divider);
+    color: var(--secondary-text);
+
+    &.badge-info    { border-color: var(--accent-color); color: var(--accent-color); }
+    &.badge-success { border-color: var(--success);      color: var(--success); }
+    &.badge-warning { border-color: var(--warning);      color: var(--warning); }
+    &.badge-error   { border-color: var(--error);        color: var(--error); }
+  }
+
+  // Sizes
+  &-sm {
+    padding: calc($spacing * 0.1) calc($spacing * 0.35);
+    font-size: 0.6875rem;
+  }
+
+  &-lg {
+    padding: calc($spacing * 0.25) calc($spacing * 0.65);
+    font-size: 0.875rem;
+  }
+
+  // Dot indicator — no text
+  &-dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    padding: 0;
+    border-radius: 50%;
+    background: var(--divider);
+    border: none;
+
+    &.badge-info    { background: var(--accent-color); }
+    &.badge-success { background: var(--success); }
+    &.badge-warning { background: var(--warning); }
+    &.badge-error   { background: var(--error); }
+  }
+}