@weeehaoooz/talos-ui 0.1.0

package/styles/_button-group.scss

@@ -0,0 +1,470 @@
+/* Talos UI Button Group Design System Styles */
+
+.talos-button-group {
+  display: inline-flex;
+  position: relative;
+  vertical-align: middle;
+
+  /* Sizing Controls for Group Items */
+  &.talos-button-group-sm {
+
+    >.talos-btn,
+    >button,
+    >a,
+    >.talos-button-group-item {
+      height: var(--talos-btn-height-sm, 2rem);
+      padding: 0 var(--talos-btn-padding-x-sm, 0.625rem);
+      font-size: var(--talos-btn-font-size-sm, 0.75rem);
+
+      &.talos-btn-icon {
+        width: var(--talos-btn-height-sm, 2rem);
+        padding: 0;
+      }
+    }
+  }
+
+  &.talos-button-group-md {
+
+    >.talos-btn,
+    >button,
+    >a,
+    >.talos-button-group-item {
+      height: var(--talos-btn-height-md, 2.25rem);
+      padding: 0 var(--talos-btn-padding-x-md, 0.875rem);
+      font-size: var(--talos-btn-font-size-md, 0.8125rem);
+
+      &.talos-btn-icon {
+        width: var(--talos-btn-height-md, 2.25rem);
+        padding: 0;
+      }
+    }
+  }
+
+  &.talos-button-group-lg {
+
+    >.talos-btn,
+    >button,
+    >a,
+    >.talos-button-group-item {
+      height: var(--talos-btn-height-lg, 2.625rem);
+      padding: 0 var(--talos-btn-padding-x-lg, 1.125rem);
+      font-size: var(--talos-btn-font-size-lg, 0.875rem);
+
+      &.talos-btn-icon {
+        width: var(--talos-btn-height-lg, 2.625rem);
+        padding: 0;
+      }
+    }
+  }
+
+  /* Horizontal orientation (Default) */
+  &.talos-button-group-horizontal {
+    flex-direction: row;
+    align-items: center;
+
+    /* Attached Border Overlaps & Radius rules */
+    &.talos-button-group-attached,
+    &.talos-button-group-outline {
+
+      >.talos-btn,
+      >button,
+      >a,
+      >.talos-button-group-item {
+        border-radius: 0;
+
+        &:not(:first-child) {
+          margin-left: -1px;
+        }
+
+        &:first-child {
+          border-top-left-radius: var(--talos-btn-border-radius, 0.375rem);
+          border-bottom-left-radius: var(--talos-btn-border-radius, 0.375rem);
+        }
+
+        &:last-child {
+          border-top-right-radius: var(--talos-btn-border-radius, 0.375rem);
+          border-bottom-right-radius: var(--talos-btn-border-radius, 0.375rem);
+        }
+      }
+
+      &.talos-button-group-pill {
+
+        >.talos-btn,
+        >button,
+        >a,
+        >.talos-button-group-item {
+          &:first-child {
+            border-top-left-radius: 9999px;
+            border-bottom-left-radius: 9999px;
+            padding-left: 1rem;
+          }
+
+          &:last-child {
+            border-top-right-radius: 9999px;
+            border-bottom-right-radius: 9999px;
+            padding-right: 1rem;
+          }
+        }
+      }
+    }
+  }
+
+  /* Vertical orientation */
+  &.talos-button-group-vertical {
+    flex-direction: column;
+    align-items: stretch;
+
+    >.talos-btn,
+    >button,
+    >a,
+    >.talos-button-group-item {
+      width: 100%;
+      padding-left: var(--talos-btn-padding-x-md, 0.875rem);
+      padding-right: var(--talos-btn-padding-x-md, 0.875rem);
+      justify-content: center;
+
+      &.talos-btn-sm {
+        padding-left: var(--talos-btn-padding-x-sm, 0.625rem);
+        padding-right: var(--talos-btn-padding-x-sm, 0.625rem);
+      }
+
+      &.talos-btn-lg {
+        padding-left: var(--talos-btn-padding-x-lg, 1.125rem);
+        padding-right: var(--talos-btn-padding-x-lg, 1.125rem);
+      }
+
+      &.talos-btn-icon {
+        width: auto;
+        min-width: var(--talos-btn-height-md, 2.25rem);
+
+        &.talos-btn-sm {
+          min-width: var(--talos-btn-height-sm, 2rem);
+        }
+
+        &.talos-btn-lg {
+          min-width: var(--talos-btn-height-lg, 2.625rem);
+        }
+      }
+    }
+
+    &.talos-button-group-attached,
+    &.talos-button-group-outline {
+
+      >.talos-btn,
+      >button,
+      >a,
+      >.talos-button-group-item {
+        border-radius: 0;
+
+        &:not(:first-child) {
+          margin-top: -1px;
+        }
+
+        &:first-child {
+          border-top-left-radius: var(--talos-btn-border-radius, 0.75rem);
+          border-top-right-radius: var(--talos-btn-border-radius, 0.75rem);
+          padding-top: 0.375rem;
+          min-height: calc(var(--talos-btn-height-md, 2.25rem) + 0.375rem);
+          height: auto;
+        }
+
+        &:last-child {
+          border-bottom-left-radius: var(--talos-btn-border-radius, 0.75rem);
+          border-bottom-right-radius: var(--talos-btn-border-radius, 0.75rem);
+          padding-bottom: 0.375rem;
+          min-height: calc(var(--talos-btn-height-md, 2.25rem) + 0.375rem);
+          height: auto;
+        }
+      }
+
+      /* Pill vertical styling - capsule caps with balanced top & bottom inset */
+      &.talos-button-group-pill {
+
+        >.talos-btn,
+        >button,
+        >a,
+        >.talos-button-group-item {
+          &:first-child {
+            border-top-left-radius: 9999px;
+            border-top-right-radius: 9999px;
+            padding-top: 0.625rem;
+            min-height: calc(var(--talos-btn-height-md, 2.25rem) + 0.5rem);
+            height: auto;
+          }
+
+          &:last-child {
+            border-bottom-left-radius: 9999px;
+            border-bottom-right-radius: 9999px;
+            padding-bottom: 0.625rem;
+            min-height: calc(var(--talos-btn-height-md, 2.25rem) + 0.5rem);
+            height: auto;
+          }
+        }
+      }
+    }
+
+    &.talos-button-group-segmented {
+      flex-direction: column;
+      align-items: stretch;
+      padding: 0.25rem;
+      gap: 0.25rem;
+    }
+  }
+
+  /* Z-Index elevation & alignment layering on interaction */
+  >.talos-btn,
+  >button,
+  >a,
+  >.talos-button-group-item {
+    position: relative;
+
+    &:hover:not(:disabled):not(.is-disabled) {
+      transform: none !important;
+    }
+
+    &:hover,
+    &:focus,
+    &:focus-visible,
+    &.is-active,
+    &.is-selected {
+      z-index: 2;
+    }
+  }
+
+  /* Segmented Track Styling */
+  &.talos-button-group-segmented {
+    background-color: var(--talos-bg-color, #f8fafc);
+    border: 1px solid var(--talos-border-color, #e2e8f0);
+    padding: 0.25rem;
+    border-radius: 0.5rem;
+    gap: 0.25rem;
+
+    &.talos-button-group-pill {
+      border-radius: 9999px;
+      padding: 0.25rem 0.375rem;
+
+      >.talos-btn,
+      >button,
+      >a,
+      >.talos-button-group-item {
+        border-radius: 9999px;
+      }
+    }
+
+    >.talos-btn,
+    >button,
+    >a,
+    >.talos-button-group-item {
+      border: 1px solid transparent;
+      background-color: transparent;
+      color: var(--talos-text-muted, #64748b);
+      font-weight: 500;
+      box-shadow: none;
+      border-radius: 0.375rem;
+      transition: background-color 0.18s ease-in-out, border-color 0.18s ease-in-out, color 0.18s ease-in-out, box-shadow 0.18s ease-in-out;
+
+      &.talos-btn-primary,
+      &.talos-btn-secondary,
+      &.talos-btn-outline,
+      &.talos-btn-ghost,
+      &.talos-btn-subtle {
+        background-color: transparent;
+        color: var(--talos-text-muted, #64748b);
+        border-color: transparent;
+        box-shadow: none;
+
+        svg {
+          color: currentColor;
+          stroke: currentColor;
+        }
+      }
+
+      &:hover:not(:disabled):not(.is-disabled):not(.is-active):not(.is-selected) {
+        color: var(--talos-text-color, #0f172a);
+        background-color: var(--talos-card-bg, rgba(255, 255, 255, 0.75));
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+
+        &.talos-btn-primary,
+        &.talos-btn-secondary,
+        &.talos-btn-outline,
+        &.talos-btn-ghost,
+        &.talos-btn-subtle {
+          color: var(--talos-text-color, #0f172a);
+          background-color: var(--talos-card-bg, rgba(255, 255, 255, 0.75));
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+        }
+      }
+
+      &.is-active,
+      &.is-selected {
+        background-color: var(--talos-primary-color, #2563eb);
+        color: #ffffff;
+        font-weight: 600;
+        border-color: transparent;
+        box-shadow: 0 3px 10px rgba(37, 99, 235, 0.32), 0 1px 3px rgba(0, 0, 0, 0.1);
+
+        &.talos-btn-primary,
+        &.talos-btn-secondary,
+        &.talos-btn-outline,
+        &.talos-btn-ghost,
+        &.talos-btn-subtle {
+          background-color: var(--talos-primary-color, #2563eb);
+          color: #ffffff;
+          box-shadow: 0 3px 10px rgba(37, 99, 235, 0.32), 0 1px 3px rgba(0, 0, 0, 0.1);
+
+          svg {
+            stroke: #ffffff;
+            color: #ffffff;
+          }
+        }
+
+        &:hover:not(:disabled):not(.is-disabled) {
+          background-color: var(--talos-primary-hover, #1d4ed8);
+          box-shadow: 0 4px 12px rgba(29, 78, 216, 0.4), 0 1px 3px rgba(0, 0, 0, 0.12);
+
+          &.talos-btn-primary,
+          &.talos-btn-secondary,
+          &.talos-btn-outline,
+          &.talos-btn-ghost,
+          &.talos-btn-subtle {
+            background-color: var(--talos-primary-hover, #1d4ed8);
+          }
+        }
+
+        svg {
+          stroke: #ffffff;
+          color: #ffffff;
+        }
+
+        .talos-badge {
+          background-color: rgba(255, 255, 255, 0.25);
+          color: #ffffff;
+        }
+      }
+    }
+
+    /* Subtle Segmented Active Variant */
+    &.talos-button-group-subtle {
+
+      >.talos-btn,
+      >button,
+      >a,
+      >.talos-button-group-item {
+
+        &.is-active,
+        &.is-selected {
+          background-color: var(--talos-card-bg, #ffffff);
+          color: var(--talos-primary-color, #2563eb);
+          font-weight: 700;
+          border-color: rgba(37, 99, 235, 0.15);
+          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+
+          &:hover:not(:disabled):not(.is-disabled) {
+            background-color: var(--talos-primary-light, #eff6ff);
+          }
+
+          svg {
+            stroke: var(--talos-primary-color, #2563eb);
+            color: var(--talos-primary-color, #2563eb);
+          }
+        }
+      }
+    }
+  }
+
+  /* Active & Hover Selection Styling for Attached/Outline Button Groups */
+  &.talos-button-group-attached,
+  &.talos-button-group-outline {
+
+    >.talos-btn,
+    >button,
+    >a,
+    >.talos-button-group-item {
+      &:hover:not(:disabled):not(.is-disabled):not(.is-active):not(.is-selected) {
+        background-color: var(--talos-btn-outline-hover-bg, #f8fafc);
+        color: var(--talos-text-color, #0f172a);
+        border-color: var(--talos-border-hover, #94a3b8);
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+        z-index: 2;
+      }
+
+      &.is-active,
+      &.is-selected {
+        background-color: var(--talos-primary-light, #eff6ff);
+        color: var(--talos-primary-color, #2563eb);
+        border-color: var(--talos-primary-color, #2563eb);
+        font-weight: 600;
+        z-index: 3;
+
+        &:hover:not(:disabled):not(.is-disabled) {
+          background-color: var(--talos-primary-light-hover, #dbeafe);
+          border-color: var(--talos-primary-hover, #1d4ed8);
+          color: var(--talos-primary-hover, #1d4ed8);
+        }
+      }
+    }
+  }
+}
+
+/* Badge helper elements inside buttons */
+.talos-btn-badge,
+.talos-btn .talos-btn-badge,
+.talos-btn > .talos-badge:not(.talos-badge-host > .talos-badge) {
+  position: static !important;
+  transform: none !important;
+  box-shadow: none !important;
+  pointer-events: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.125rem 0.45rem;
+  font-size: 0.725rem;
+  font-weight: 600;
+  line-height: 1;
+  border-radius: 9999px;
+  background-color: var(--talos-primary-color, #2563eb);
+  color: #ffffff;
+  margin-left: 0.375rem;
+
+  &.talos-badge-subtle,
+  &.talos-btn-badge--subtle {
+    background-color: var(--talos-primary-light, #eff6ff);
+    color: var(--talos-primary-color, #2563eb);
+  }
+
+  &.talos-badge-amber,
+  &.talos-btn-badge--amber {
+    background-color: #ffedd5;
+    color: #c2410c;
+  }
+
+  &.talos-badge-blue,
+  &.talos-btn-badge--blue {
+    background-color: #2563eb;
+    color: #ffffff;
+  }
+}
+
+[data-theme='dark'] {
+  .talos-btn-badge,
+  .talos-btn .talos-btn-badge,
+  .talos-btn > .talos-badge:not(.talos-badge-host > .talos-badge) {
+    &.talos-badge-subtle,
+    &.talos-btn-badge--subtle {
+      background-color: rgba(37, 99, 235, 0.2);
+      color: #60a5fa;
+    }
+
+    &.talos-badge-amber,
+    &.talos-btn-badge--amber {
+      background-color: rgba(245, 158, 11, 0.2);
+      color: #fbbf24;
+    }
+
+    &.talos-badge-blue,
+    &.talos-btn-badge--blue {
+      background-color: #2563eb;
+      color: #ffffff;
+    }
+  }
+}