@dodlhuat/basix 1.0.0 → 1.1.0

package/css/carousel.scss

@@ -1,87 +1,123 @@
-@use "properties";
-@use "parameters" as *;
-
-.carousel {
-  position: relative;
-  width: 100%;
-  margin: 0 auto;
-  overflow: hidden;
-  border-radius: 8px;
-  box-shadow: $shadow;
-}
-
-.carousel-track-container {
-  overflow: hidden;
-  width: 100%;
-}
-
-.carousel-track {
-  display: flex;
-  transition: transform 0.4s ease-in-out;
-  width: 100%;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-.carousel-slide {
-  min-width: 100%;
-  box-sizing: border-box;
-  min-height: 400px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 2rem;
-  user-select: none;
-}
-
-.carousel-button {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10;
-  transition: background 0.3s;
-  padding: 10px;
-}
-
-.carousel-button:hover {
-  background: var(--secondary-background);
-}
-
-.carousel-button--left {
-  left: 10px;
-}
-
-.carousel-button--right {
-  right: 10px;
-}
-
-.carousel-nav {
-  display: flex;
-  justify-content: center;
-  padding: 10px 0;
-  position: absolute;
-  bottom: 10px;
-  width: 100%;
-  z-index: 10;
-}
-
-.carousel-indicator {
-  padding: 0;
-  border: none;
-  width: 20px;
-  height: 5px;
-  background: var(--disabled);
-  margin: 0 5px;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background 0.3s;
-}
-
-.carousel-indicator.current-slide {
-  background: var(--accent-color);
-}
+@use "properties";
+@use "parameters" as *;
+
+.carousel {
+  position: relative;
+  width: 100%;
+  margin: 0 auto;
+  overflow: hidden;
+  border-radius: $border-radius;
+  box-shadow: $shadow;
+  background: var(--secondary-background);
+
+  // Gradient scrim so controls are readable over any slide content
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 96px;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.38), transparent);
+    pointer-events: none;
+    z-index: 5;
+  }
+}
+
+.carousel-track-container {
+  overflow: hidden;
+  width: 100%;
+}
+
+.carousel-track {
+  display: flex;
+  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.carousel-slide {
+  min-width: 100%;
+  box-sizing: border-box;
+  min-height: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2rem;
+  user-select: none;
+}
+
+// Prev / next buttons — glass pill, always visible
+.carousel-button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  border: none;
+  background: rgba(0, 0, 0, 0.32);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  color: rgba(255, 255, 255, 0.92);
+  opacity: 0.85;
+  transition: background 0.2s ease,
+              transform 0.2s ease,
+              opacity 0.2s ease;
+  -webkit-tap-highlight-color: transparent;
+
+  .icon {
+    font-size: 1.5rem;
+    line-height: 1;
+  }
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.55);
+    opacity: 1;
+    transform: translateY(-50%) scale(1.08);
+  }
+
+  &:active {
+    transform: translateY(-50%) scale(0.93);
+  }
+}
+
+.carousel-button--left  { left:  calc($spacing * 0.75); }
+.carousel-button--right { right: calc($spacing * 0.75); }
+
+// Dot navigation
+.carousel-nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: calc($spacing * 0.75) 0;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  z-index: 10;
+}
+
+.carousel-indicator {
+  padding: 0;
+  border: none;
+  width: calc($spacing * 0.5);
+  height: 4px;
+  background: rgba(255, 255, 255, 0.4);
+  margin: 0 calc($spacing / 5);
+  border-radius: 99px;
+  cursor: pointer;
+  transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+              background 0.25s ease;
+
+  &.current-slide {
+    width: calc($spacing * 1.5);
+    background: white;
+  }
+}

package/css/chart.scss

@@ -1,14 +1,13 @@
+@use "properties";
+
 :root {
-  --chart-bg: #ffffff;
+  /* Data-viz palette — intentional, not overridden by theme */
   --zone-left-bg: #e0f7fa;
   --zone-mid-bg: #fff9c4;
   --zone-right-bg: #d0f7db;
   --grid-line-color: #bdbdbd;
-  --row-hover-bg: #f5f5f5;
   --line-color: #1976d2;
   --point-color: #d32f2f;
-  --text-color: #333;
-  --font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }
 
 #chart-container {
@@ -69,7 +68,7 @@
   top: 10px;
   transform: translateX(-50%);
   font-size: 10px;
-  color: #666;
+  color: var(--secondary-text);
 }
 
 /* Content Layer */
@@ -90,7 +89,7 @@
 }
 
 .chart-row:hover {
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: var(--hover);
 }
 
 .row-info {
@@ -98,7 +97,7 @@
   /* Fixed width for info column */
   flex-shrink: 0;
   font-size: 11px;
-  color: var(--text-color);
+  color: var(--primary-text);
   z-index: 3;
   /* Above lines */
 }
@@ -110,7 +109,7 @@
 
 .row-meta {
   font-size: 10px;
-  color: #777;
+  color: var(--secondary-text);
 }
 
 /* SVG Layer for Line */
@@ -144,14 +143,13 @@
 /* Tooltip Styles */
 .chart-tooltip {
   position: absolute;
-  background-color: rgba(0, 0, 0, 0.8);
-  color: white;
+  background-color: var(--primary-text);
+  color: var(--background);
   padding: 8px 12px;
   border-radius: 4px;
   font-size: 12px;
   pointer-events: none;
   z-index: 10000;
-  /* Ensure it's on top of everything */
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   white-space: nowrap;
 }

package/css/chat-bubbles.scss

@@ -6,13 +6,13 @@
   display: flex;
   flex-direction: column;
   padding: $spacing;
-  gap: 10px;
+  gap: calc($spacing / 2);
 }
 
 .message {
   max-width: 75%;
   padding: $spacing calc($spacing * 1.5);
-  border-radius: 8px;
+  border-radius: $border-radius;
   position: relative;
   line-height: calc($spacing * 1.2);
   color: var(--primary-text);

package/css/checkbox.scss

@@ -1,55 +1,72 @@
-@use "properties";
-@use "parameters" as *;
-
-.styled-checkbox {
-  position: absolute;
-  opacity: 0;
-  width: auto;
-
-  & + label {
-    position: relative;
-    cursor: pointer;
-    padding: 0;
-    display: flex;
-    margin-bottom: calc($spacing / 2);
-  }
-
-  & + label::before {
-    content: '';
-    margin-right: 10px;
-    display: inline-block;
-    width: $spacing;
-    height: $spacing;
-    transition: border 0.3s;
-    border: 2px solid rgba(0, 0, 0, 0.25);
-    margin-top: 2px;
-  }
-
-  &:hover + label::before {
-    border-color: rgba(0, 0, 0, 0.5);
-  }
-
-  &:checked + label::before {
-    background: var(--accent-color);
-  }
-
-  &:disabled + label {
-    color: var(--disabled);
-    cursor: auto;
-  }
-
-  &:disabled + label::before {
-    box-shadow: none;
-    background: var(--disabled);
-  }
-
-  &:checked + label::after {
-    content: url("../icons/checkmark-outline.svg");
-    filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(180deg) brightness(101%) contrast(101%);
-    position: absolute;
-    left: 2px;
-    top: 2px;
-    width: $spacing;
-    height: $spacing;
-  }
-}
+@use "properties";
+@use "parameters" as *;
+
+.styled-checkbox {
+  position: absolute;
+  opacity: 0;
+  width: auto;
+
+  & + label {
+    position: relative;
+    cursor: pointer;
+    padding: 0;
+    display: flex;
+    margin-bottom: calc($spacing / 2);
+  }
+
+  & + label::before {
+    content: '';
+    margin-right: 10px;
+    display: inline-block;
+    flex-shrink: 0;
+    width: $spacing;
+    height: $spacing;
+    border: 2px solid var(--divider);
+    border-radius: calc($border-radius / 2);
+    background-color: var(--background);
+    margin-top: 2px;
+    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+  }
+
+  &:hover + label::before {
+    border-color: var(--accent-color);
+  }
+
+  &:focus-visible + label::before {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent);
+    border-color: var(--accent-color);
+  }
+
+  &:checked + label::before {
+    background-color: var(--accent-color);
+    border-color: var(--accent-color);
+  }
+
+  &:checked + label::after {
+    content: '';
+    position: absolute;
+    left: calc(2px + 0.5rem);
+    top: calc(4px + $spacing / 2);
+    width: calc($spacing * 0.28);
+    height: calc($spacing * 0.5);
+    border-right: 2px solid white;
+    border-bottom: 2px solid white;
+    transform: translate(-50%, -62%) rotate(45deg);
+  }
+
+  &:disabled + label {
+    color: var(--secondary-text);
+    cursor: not-allowed;
+  }
+
+  &:disabled + label::before {
+    background-color: var(--secondary-background);
+    border-color: var(--disabled);
+    box-shadow: none;
+  }
+
+  &:disabled:checked + label::before {
+    background-color: var(--disabled);
+    border-color: var(--disabled);
+  }
+}

package/css/chips.scss

@@ -1,52 +1,52 @@
-@use "properties";
-
-.chips {
-  .chip {
-    margin: 0 5px 3px 0;
-    display: inline-block;
-    background: var(--divider);
-    padding: 5px 13px;
-    border-radius: 32px;
-    font-size: 13px;
-    position: relative;
-
-    &.clickable {
-      cursor: pointer;
-
-      &:hover {
-        filter: brightness(105%);
-      }
-    }
-
-    &.closeable {
-      padding-right: 33px;
-
-      button {
-        padding: 0;
-        background: var(--divider);
-        color: var(--secondary-text);
-        display: inline-block;
-        border: 0;
-        height: 20px;
-        width: 20px;
-        border-radius: 50%;
-        margin: 0 -4px 0 4px;
-        cursor: pointer;
-
-        position: absolute;
-        right: 13px;
-
-        &:hover {
-          filter: brightness(105%);
-        }
-
-        .icon {
-          font-size: 15px;
-          top: 1px;
-          position: relative;
-        }
-      }
-    }
-  }
-
-}
+@use "properties";
+@use "parameters" as *;
+
+.chips {
+  .chip {
+    margin: 0 calc($spacing / 4) calc($spacing / 5) 0;
+    display: inline-block;
+    background: var(--divider);
+    padding: calc($spacing * 0.3) calc($spacing * 0.8);
+    border-radius: calc($border-radius * 4);
+    font-size: 0.8125rem;
+    position: relative;
+
+    &.clickable {
+      cursor: pointer;
+
+      &:hover {
+        filter: brightness(105%);
+      }
+    }
+
+    &.closeable {
+      padding-right: calc($spacing * 2);
+
+      button {
+        padding: 0;
+        background: var(--divider);
+        color: var(--secondary-text);
+        display: inline-block;
+        border: 0;
+        height: calc($spacing * 1.25);
+        width: calc($spacing * 1.25);
+        border-radius: 50%;
+        margin: 0 calc($spacing * -0.25) 0 calc($spacing / 4);
+        cursor: pointer;
+
+        position: absolute;
+        right: calc($spacing * 0.8);
+
+        &:hover {
+          filter: brightness(105%);
+        }
+
+        .icon {
+          font-size: 0.9rem;
+          top: 1px;
+          position: relative;
+        }
+      }
+    }
+  }
+}