@dodlhuat/basix 1.0.0

package/css/alert.css

@@ -0,0 +1,57 @@
+:root {
+  --primary-text: #1E1F24;
+  --secondary-text: #62636C;
+  --divider: #D8D9E0;
+  --accent-text: #3D63DD;
+  --error: #D64545;
+  --warning: #C28A00;
+  --success: #2E8B57;
+  --secondary-background: #E7E8EC;
+  --background: #F9F9FB;
+  --accent-color: #3D63DD;
+  --accent-color-lighten: #87A5EF;
+  --accent-color-text: #D8D9E0;
+  --disabled: #D8D9E0;
+}
+
+[data-theme=dark] {
+  --primary-text: #EEEEF0;
+  --secondary-text: #B2B3BD;
+  --divider: #393A40;
+  --accent-text: #0E496D;
+  --error: #FF6B6B;
+  --warning: #F7B500;
+  --success: #5CC689;
+  --background: #111113;
+  --secondary-background: #19191B;
+  --accent-color: #1B7BB4;
+  --accent-color-lighten: #175982;
+  --accent-color-text: #B2B3BD;
+  --disabled: #303136;
+}
+
+.alert {
+  border-radius: 0.4rem;
+  padding: 0.5rem;
+  border-left: 0.5rem solid;
+  color: var(--primary-text);
+  box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
+}
+
+.alert-error {
+  background: var(--error);
+  border-left: 0.5rem solid color-mix(in srgb, var(--error) 80%, black);
+  color: var(--divider);
+}
+
+.alert-warning {
+  background: var(--warning);
+  border-left: 0.5rem solid color-mix(in srgb, var(--warning) 80%, black);
+  color: var(--divider);
+}
+
+.alert-success {
+  background: var(--success);
+  border-left: 0.5rem solid color-mix(in srgb, var(--success) 80%, black);
+  color: var(--divider);
+}/*# sourceMappingURL=alert.css.map */

package/css/alert.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["properties.scss","alert.css","alert.scss","parameters.scss"],"names":[],"mappings":"AAAA;EACE,uBAAA;EACA,yBAAA;EACA,kBAAA;EACA,sBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,+BAAA;EACA,qBAAA;EACA,uBAAA;EACA,+BAAA;EACA,4BAAA;EACA,mBAAA;ACCF;;ADEA;EACE,uBAAA;EACA,yBAAA;EACA,kBAAA;EACA,sBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,qBAAA;EACA,+BAAA;EACA,uBAAA;EACA,+BAAA;EACA,4BAAA;EACA,mBAAA;ACCF;;AC3BA;EACE,qBCHc;EDId,eAAA;EACA,yBAAA;EACA,0BAAA;EACA,4CCLO;AFmCT;;AC3BA;EACE,wBAAA;EACA,qEAAA;EACA,qBAAA;AD8BF;;AC3BA;EACE,0BAAA;EACA,uEAAA;EACA,qBAAA;AD8BF;;AC3BA;EACE,0BAAA;EACA,uEAAA;EACA,qBAAA;AD8BF","file":"alert.css"}

package/css/alert.scss

@@ -0,0 +1,86 @@
+@use "properties";
+@use "parameters" as *;
+
+$alert-border-width: calc($spacing / 2);
+$alert-border-darken: 20%;
+
+@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;
+}
+
+.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;
+  color: var(--primary-text);
+  box-shadow: $shadow;
+  line-height: 1.5;
+
+  &-default {
+    background: var(--secondary-background);
+    border-left-color: var(--divider);
+    color: var(--primary-text);
+  }
+
+  &-info {
+    @include alert-variant(var(--accent-color));
+  }
+
+  &-success {
+    @include alert-variant(var(--success));
+  }
+
+  &-warning {
+    @include alert-variant(var(--warning));
+  }
+
+  &-error {
+    @include alert-variant(var(--error));
+  }
+
+  &-dismissible {
+    padding-right: calc($spacing * 5);
+
+    .alert-close {
+      position: absolute;
+      top: 50%;
+      right: calc($spacing * 1.5);
+      transform: translateY(-50%);
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      padding: calc($spacing) calc($spacing * 1.5) calc($spacing) calc($spacing * 1.5 + $alert-border-width);
+      color: inherit;
+      opacity: 0.7;
+      transition: opacity 0.2s ease;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  .alert-icon {
+    margin-right: calc($spacing / 2);
+    vertical-align: middle;
+  }
+}
+
+[data-theme="dark"] {
+  .alert {
+    &-default {
+      background: var(--secondary-background);
+      border-left-color: var(--divider);
+    }
+
+    &-info,
+    &-success,
+    &-warning,
+    &-error {
+      filter: brightness(0.9);
+    }
+  }
+}

package/css/button.css

@@ -0,0 +1,69 @@
+:root {
+  --primary-text: #1E1F24;
+  --secondary-text: #62636C;
+  --divider: #D8D9E0;
+  --accent-text: #3D63DD;
+  --error: #D64545;
+  --warning: #C28A00;
+  --success: #2E8B57;
+  --secondary-background: #E7E8EC;
+  --background: #F9F9FB;
+  --accent-color: #3D63DD;
+  --accent-color-lighten: #87A5EF;
+  --accent-color-text: #D8D9E0;
+  --disabled: #D8D9E0;
+}
+
+[data-theme=dark] {
+  --primary-text: #EEEEF0;
+  --secondary-text: #B2B3BD;
+  --divider: #393A40;
+  --accent-text: #0E496D;
+  --error: #FF6B6B;
+  --warning: #F7B500;
+  --success: #5CC689;
+  --background: #111113;
+  --secondary-background: #19191B;
+  --accent-color: #1B7BB4;
+  --accent-color-lighten: #175982;
+  --accent-color-text: #B2B3BD;
+  --disabled: #303136;
+}
+
+button, .button {
+  padding: 1rem 2rem;
+  border-radius: 0.4rem;
+  background: var(--divider);
+  color: var(--primary-text);
+  border: none;
+  cursor: pointer;
+}
+button.active, .button.active {
+  background: var(--accent-color-lighten);
+}
+button.button-primary, .button.button-primary {
+  background: var(--accent-color);
+  color: var(--divider);
+}
+button:hover, .button:hover {
+  filter: brightness(115%);
+}
+button.button-success, .button.button-success {
+  background: var(--success);
+  color: var(--divider);
+}
+button.button-warning, .button.button-warning {
+  background: var(--warning);
+  color: var(--divider);
+}
+button.button-error, .button.button-error {
+  background: var(--error);
+  color: var(--divider);
+}
+
+[data-theme=dark] button:hover, [data-theme=dark] .button:hover {
+  filter: brightness(85%);
+}
+[data-theme=dark] button.button-primary, [data-theme=dark] .button.button-primary {
+  color: var(--primary-text);
+}/*# sourceMappingURL=button.css.map */

package/css/button.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["properties.scss","button.css","button.scss","parameters.scss"],"names":[],"mappings":"AAAA;EACE,uBAAA;EACA,yBAAA;EACA,kBAAA;EACA,sBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,+BAAA;EACA,qBAAA;EACA,uBAAA;EACA,+BAAA;EACA,4BAAA;EACA,mBAAA;ACCF;;ADEA;EACE,uBAAA;EACA,yBAAA;EACA,kBAAA;EACA,sBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,qBAAA;EACA,+BAAA;EACA,uBAAA;EACA,+BAAA;EACA,4BAAA;EACA,mBAAA;ACCF;;AC3BA;EACE,kBAAA;EACA,qBCJc;EDKd,0BAAA;EACA,0BAAA;EACA,YAAA;EACA,eAAA;AD8BF;AC5BE;EACE,uCAAA;AD8BJ;AC3BE;EACE,+BAAA;EACA,qBAAA;AD6BJ;AC1BE;EACE,wBAAA;AD4BJ;ACzBE;EACE,0BAAA;EACA,qBAAA;AD2BJ;ACxBE;EACE,0BAAA;EACA,qBAAA;AD0BJ;ACvBE;EACE,wBAAA;EACA,qBAAA;ADyBJ;;ACnBI;EACE,uBAAA;ADsBN;ACnBI;EACE,0BAAA;ADqBN","file":"button.css"}

package/css/button.scss

@@ -0,0 +1,102 @@
+@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);
+  }
+}

package/css/card.css

@@ -0,0 +1,144 @@
+:root {
+  --primary-text: #1E1F24;
+  --secondary-text: #62636C;
+  --divider: #D8D9E0;
+  --accent-text: #3D63DD;
+  --error: #D64545;
+  --warning: #C28A00;
+  --success: #2E8B57;
+  --secondary-background: #E7E8EC;
+  --background: #F9F9FB;
+  --accent-color: #3D63DD;
+  --accent-color-lighten: #87A5EF;
+  --accent-color-text: #D8D9E0;
+  --disabled: #D8D9E0;
+}
+
+[data-theme=dark] {
+  --primary-text: #EEEEF0;
+  --secondary-text: #B2B3BD;
+  --divider: #393A40;
+  --accent-text: #0E496D;
+  --error: #FF6B6B;
+  --warning: #F7B500;
+  --success: #5CC689;
+  --background: #111113;
+  --secondary-background: #19191B;
+  --accent-color: #1B7BB4;
+  --accent-color-lighten: #175982;
+  --accent-color-text: #B2B3BD;
+  --disabled: #303136;
+}
+
+html, body {
+  overflow: auto;
+}
+
+body {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  min-height: 100vh;
+}
+
+a {
+  cursor: pointer;
+}
+
+.content {
+  margin-left: 2rem;
+  margin-right: 2rem;
+  margin-top: 4rem;
+}
+
+.hidden {
+  display: none;
+}
+
+.float-right {
+  float: right;
+}
+
+.float-left {
+  float: left;
+}
+
+.block {
+  display: block;
+  width: 100%;
+}
+
+.vertical-align-center {
+  align-items: center;
+  display: flex;
+}
+
+.horizontal-align-center {
+  text-align: center;
+}
+
+.center {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+
+code.code {
+  background: var(--divider);
+  display: block;
+  font-family: monospace;
+  border-radius: 0.4rem;
+  font-size: 1.3rem;
+  margin: 1rem 0;
+}
+code.code .code-header {
+  display: block;
+  background: var(--disabled);
+  border-top-left-radius: 0.4rem;
+  border-top-right-radius: 0.4rem;
+  padding: 0.5rem 2rem;
+  color: var(--primary-text);
+  font-weight: bold;
+}
+code.code .code-content {
+  padding: 2rem;
+  white-space: break-spaces;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.spacing-right {
+  margin-right: 1rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.card {
+  box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
+  background: var(--secondary-background);
+  border-radius: 0.4rem;
+}
+.card .header {
+  border-bottom: 1px solid var(--divider);
+  position: relative;
+  width: 100%;
+  padding-right: 1rem;
+  left: -1rem;
+  padding-left: 1rem;
+  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+}
+.card .footer {
+  border-top: 1px solid var(--divider);
+  position: relative;
+  width: 100%;
+  padding-right: 1rem;
+  left: -1rem;
+  padding-left: 1rem;
+  margin-top: 1rem;
+  padding-top: 1rem;
+}/*# sourceMappingURL=card.css.map */

package/css/card.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["properties.scss","card.css","defaults.scss","parameters.scss","card.scss"],"names":[],"mappings":"AAAA;EACE,uBAAA;EACA,yBAAA;EACA,kBAAA;EACA,sBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,+BAAA;EACA,qBAAA;EACA,uBAAA;EACA,+BAAA;EACA,4BAAA;EACA,mBAAA;ACCF;;ADEA;EACE,uBAAA;EACA,yBAAA;EACA,kBAAA;EACA,sBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,qBAAA;EACA,+BAAA;EACA,uBAAA;EACA,+BAAA;EACA,4BAAA;EACA,mBAAA;ACCF;;AC3BA;EACE,cAAA;AD8BF;;AC3BA;EACE,kBAAA;EACA,YAAA;EACA,WAAA;EACA,iBAAA;AD8BF;;AC3BA;EACE,eAAA;AD8BF;;AC3BA;EACE,iBAAA;EACA,kBAAA;EACA,gBAAA;AD8BF;;AC3BA;EACE,aAAA;AD8BF;;AC3BA;EACE,YAAA;AD8BF;;AC3BA;EACE,WAAA;AD8BF;;AC3BA;EACE,cAAA;EACA,WAAA;AD8BF;;AC3BA;EACE,mBAAA;EACA,aAAA;AD8BF;;AC3BA;EACE,kBAAA;AD8BF;;AC3BA;EACE,mBAAA;EACA,uBAAA;EACA,aAAA;AD8BF;;AC3BA;EACE,0BAAA;EACA,cAAA;EACA,sBAAA;EACA,qBC3Dc;ED4Dd,iBAAA;EACA,cAAA;AD8BF;AC5BE;EACE,cAAA;EACA,2BAAA;EACA,8BClEY;EDmEZ,+BCnEY;EDoEZ,oBAAA;EACA,0BAAA;EACA,iBAAA;AD8BJ;AC3BE;EACE,aAAA;EACA,yBAAA;AD6BJ;;ACzBA;EACE,eAAA;AD4BF;;ACzBA;EACE,kBCrFQ;AFiHV;;ACzBA;EACE,aAAA;AD4BF;;AGjHA;EACE,4CDFO;ECGP,uCAAA;EACA,qBDNc;AF0HhB;AGlHE;EACE,uCAAA;EACA,kBAAA;EACA,WAAA;EACA,mBAAA;EACA,WAAA;EACA,kBAAA;EACA,mBAAA;EACA,oBAAA;AHoHJ;AGjHE;EACE,oCAAA;EACA,kBAAA;EACA,WAAA;EACA,mBAAA;EACA,WAAA;EACA,kBAAA;EACA,gBAAA;EACA,iBAAA;AHmHJ","file":"card.css"}

package/css/card.scss

@@ -0,0 +1,66 @@
+@use "properties";
+@use "defaults";
+@use "parameters" as *;
+
+// Base card styles
+.card {
+  box-shadow: $shadow;
+  background: var(--secondary-background);
+  border-radius: $border-radius;
+  padding: $spacing;
+  position: relative;
+  overflow: hidden;
+
+  // Card header
+  .header {
+    border-bottom: 1px solid var(--divider);
+    margin: -$spacing -$spacing $spacing -$spacing;
+    padding: $spacing;
+  }
+
+  // Card footer
+  .footer {
+    border-top: 1px solid var(--divider);
+    margin: $spacing -$spacing -$spacing -$spacing;
+    padding: $spacing;
+  }
+
+  // Card body/content
+  .body,
+  .content {
+    padding: 0;
+  }
+}
+
+// Card variants
+.card-flat {
+  box-shadow: none;
+  border: 1px solid var(--divider);
+}
+
+.card-bordered {
+  border: 1px solid var(--divider);
+}
+
+.card-hover {
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
+
+  &:hover {
+    box-shadow: 0 4px 8px rgba(56, 65, 74, 0.2);
+    transform: translateY(-2px);
+  }
+}
+
+// Utility modifiers for cards
+.card-padding-none {
+  padding: 0;
+}
+
+.card-padding-sm {
+  padding: calc($spacing / 2);
+}
+
+.card-padding-lg {
+  padding: calc($spacing * 2);
+}
+

package/css/carousel.css

@@ -0,0 +1,118 @@
+:root {
+  --primary-text: #1E1F24;
+  --secondary-text: #62636C;
+  --divider: #D8D9E0;
+  --accent-text: #3D63DD;
+  --error: #D64545;
+  --warning: #C28A00;
+  --success: #2E8B57;
+  --secondary-background: #E7E8EC;
+  --background: #F9F9FB;
+  --accent-color: #3D63DD;
+  --accent-color-lighten: #87A5EF;
+  --accent-color-text: #D8D9E0;
+  --disabled: #D8D9E0;
+}
+
+[data-theme=dark] {
+  --primary-text: #EEEEF0;
+  --secondary-text: #B2B3BD;
+  --divider: #393A40;
+  --accent-text: #0E496D;
+  --error: #FF6B6B;
+  --warning: #F7B500;
+  --success: #5CC689;
+  --background: #111113;
+  --secondary-background: #19191B;
+  --accent-color: #1B7BB4;
+  --accent-color-lighten: #175982;
+  --accent-color-text: #B2B3BD;
+  --disabled: #303136;
+}
+
+.carousel {
+  position: relative;
+  width: 100%;
+  margin: 0 auto;
+  overflow: hidden;
+  border-radius: 8px;
+  box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
+}
+
+.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;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          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);
+}/*# sourceMappingURL=carousel.css.map */

package/css/carousel.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["properties.scss","carousel.css","carousel.scss","parameters.scss"],"names":[],"mappings":"AAAA;EACE,uBAAA;EACA,yBAAA;EACA,kBAAA;EACA,sBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,+BAAA;EACA,qBAAA;EACA,uBAAA;EACA,+BAAA;EACA,4BAAA;EACA,mBAAA;ACCF;;ADEA;EACE,uBAAA;EACA,yBAAA;EACA,kBAAA;EACA,sBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,qBAAA;EACA,+BAAA;EACA,uBAAA;EACA,+BAAA;EACA,4BAAA;EACA,mBAAA;ACCF;;AC3BA;EACE,kBAAA;EACA,WAAA;EACA,cAAA;EACA,gBAAA;EACA,kBAAA;EACA,4CCNO;AFoCT;;AC3BA;EACE,gBAAA;EACA,WAAA;AD8BF;;AC3BA;EACE,aAAA;EACA,sCAAA;EACA,WAAA;EACA,UAAA;EACA,SAAA;EACA,gBAAA;AD8BF;;AC3BA;EACE,eAAA;EACA,sBAAA;EACA,iBAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;EACA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;AD8BF;;AC3BA;EACE,kBAAA;EACA,QAAA;EACA,2BAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,2BAAA;EACA,aAAA;AD8BF;;AC3BA;EACE,uCAAA;AD8BF;;AC3BA;EACE,UAAA;AD8BF;;AC3BA;EACE,WAAA;AD8BF;;AC3BA;EACE,aAAA;EACA,uBAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,WAAA;EACA,WAAA;AD8BF;;AC3BA;EACE,UAAA;EACA,YAAA;EACA,WAAA;EACA,WAAA;EACA,2BAAA;EACA,aAAA;EACA,kBAAA;EACA,eAAA;EACA,2BAAA;AD8BF;;AC3BA;EACE,+BAAA;AD8BF","file":"carousel.css"}