@dodlhuat/basix 1.0.0 → 1.1.1

package/css/code-viewer.scss

@@ -1,98 +1,73 @@
-
-.code-display {
-  background: #1e1e1e;
-  border-radius: 8px;
-  overflow: hidden;
-  margin: 20px 0;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.code-header {
-  background: #2d2d2d;
-  padding: 10px 15px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #3d3d3d;
-}
-
-.code-language {
-  color: #888;
-  font-size: 12px;
-  text-transform: uppercase;
-  font-weight: 600;
-}
-
-.copy-button {
-  background: #4a4a4a;
-  color: #fff;
-  border: none;
-  padding: 6px 12px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 12px;
-  transition: background 0.2s;
-}
-
-.copy-button:hover {
-  background: #5a5a5a;
-}
-
-.copy-button.copied {
-  background: #28a745;
-}
-
-.code-content {
-  padding: 15px;
-  overflow-x: auto;
-}
-
-.code-content pre {
-  margin: 0;
-  font-family: 'Courier New', Courier, monospace;
-  font-size: 14px;
-  line-height: 1.5;
-  color: #d4d4d4;
-}
-
-/* Syntax Highlighting */
-.keyword {
-  color: #569cd6;
-}
-
-.string {
-  color: #ce9178;
-}
-
-.comment {
-  color: #6a9955;
-  font-style: italic;
-}
-
-.function {
-  color: #dcdcaa;
-}
-
-.number {
-  color: #b5cea8;
-}
-
-.property {
-  color: #9cdcfe;
-}
-
-.tag {
-  color: #4ec9b0;
-}
-
-.attribute {
-  color: #9cdcfe;
-}
-
-.selector {
-  color: #d7ba7d;
-}
-
-.punctuation {
-  color: #d4d4d4;
-}
+@use "properties";
+@use "parameters" as *;
+
+// Structural chrome uses design tokens.
+// Syntax highlight colors are intentional VS Code palette — left as-is.
+
+.code-display {
+  background: #1e1e1e;
+  border-radius: $border-radius;
+  overflow: hidden;
+  margin: $spacing * 1.25 0;
+  box-shadow: $shadow;
+}
+
+.code-header {
+  background: #2d2d2d;
+  padding: calc($spacing * 0.6) $spacing;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #3d3d3d;
+}
+
+.code-language {
+  color: #888;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+.copy-button {
+  background: #4a4a4a;
+  color: #fff;
+  border: none;
+  padding: calc($spacing * 0.375) calc($spacing * 0.75);
+  border-radius: calc($border-radius / 2);
+  cursor: pointer;
+  font-size: 0.75rem;
+  transition: background 0.2s;
+}
+
+.copy-button:hover {
+  background: #5a5a5a;
+}
+
+.copy-button.copied {
+  background: var(--success);
+}
+
+.code-content {
+  padding: $spacing;
+  overflow-x: auto;
+}
+
+.code-content pre {
+  margin: 0;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: #d4d4d4;
+}
+
+/* Syntax Highlighting — VS Code Dark+ palette */
+.keyword   { color: #569cd6; }
+.string    { color: #ce9178; }
+.comment   { color: #6a9955; font-style: italic; }
+.function  { color: #dcdcaa; }
+.number    { color: #b5cea8; }
+.property  { color: #9cdcfe; }
+.tag       { color: #4ec9b0; }
+.attribute { color: #9cdcfe; }
+.selector  { color: #d7ba7d; }
+.punctuation { color: #d4d4d4; }

package/css/datepicker.scss

@@ -266,6 +266,26 @@
   }
 }
 
+/* Set Button */
+.datepicker-set-btn {
+  width: 100%;
+  padding: calc($spacing / 2) $spacing;
+  margin-top: $spacing;
+  background-color: var(--accent-color);
+  color: var(--accent-color-text);
+  border: none;
+  border-radius: $border-radius;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s;
+
+  &:hover {
+    opacity: 0.9;
+  }
+}
+
 /* Mobile Responsiveness */
 @media (max-width: 640px) {
   .datepicker-backdrop {

package/css/dropdown.scss

@@ -1,137 +1,151 @@
-@use "parameters" as *;
-@use "properties";
-
-.dropdown-container {
-  position: relative;
-  display: inline-block;
-
-  &.active {
-    > .dropdown-menu {
-      opacity: 1;
-      display: block;
-      transform: translateY(0);
-    }
-  }
-
-  .dropdown-menu {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    margin-top: 8px;
-    background: var(--background);
-    border-radius: 8px;
-    box-shadow: $shadow;
-    min-width: 220px;
-    padding: 8px 0;
-    list-style: none;
-    opacity: 0;
-    display: none;
-    transform: translateY(-10px);
-    transition:
-      opacity 0.2s,
-      transform 0.2s;
-    z-index: 100;
-
-    li {
-      position: relative;
-      list-style: none;
-
-      &.open {
-        > .dropdown-item {
-          background-color: var(--background);
-          color: var(--accent-color);
-
-          &.has-children::after {
-            transform: rotate(90deg);
-          }
-        }
-
-        > ul {
-          opacity: 1;
-          display: block;
-          transform: translateX(0);
-        }
-      }
-    }
-
-    ul {
-      position: absolute;
-      top: 0;
-      left: 100%;
-      margin-left: 4px;
-      background-color: var(--background);
-      border-radius: 8px;
-      box-shadow: $shadow;
-      min-width: 220px;
-      padding: 8px 0;
-      list-style: none;
-      opacity: 0;
-      display: none;
-      transform: translateX(-10px);
-      transition:
-        opacity 0.2s,
-        transform 0.2s;
-    }
-  }
-
-  .dropdown-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px 16px;
-    color: var(--primary-text);
-    text-decoration: none;
-    font-size: 14px;
-    cursor: pointer;
-    transition: background-color 0.2s;
-    user-select: none;
-
-    &:hover {
-      background-color: var(--background);
-      color: var(--accent-color);
-    }
-
-    &.has-children::after {
-      content: "›";
-      font-size: 16px;
-      font-weight: bold;
-      margin-left: 10px;
-      transition: transform 0.2s;
-    }
-  }
-
-  @media (max-width: 768px) {
-    .dropdown-menu {
-      width: 100%;
-      min-width: 250px;
-
-      ul {
-        position: static;
-        box-shadow: none;
-        background-color: transparent;
-        transform: none;
-        margin-left: 0;
-        padding-left: 15px;
-        border-left: 2px solid var(--secondary-text);
-        border-radius: 0;
-        opacity: 0;
-        display: none;
-        transition: none;
-      }
-
-      li.open > ul {
-        display: block;
-        opacity: 1;
-        transform: none;
-      }
-    }
-
-    .dropdown-item.has-children::after {
-      transform: rotate(90deg);
-    }
-
-    .dropdown-menu li.open > .dropdown-item.has-children::after {
-      transform: rotate(-90deg);
-    }
-  }
-}
+@use "parameters" as *;
+@use "properties";
+
+.dropdown-container {
+  position: relative;
+  display: inline-block;
+
+  &.active {
+    > .dropdown-menu {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+      transform: translateY(0);
+    }
+  }
+
+  .dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 6px;
+    background: var(--background);
+    border: 1px solid var(--divider);
+    border-radius: $border-radius;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
+    min-width: 220px;
+    padding: calc($spacing / 2) 0;
+    list-style: none;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transform: translateY(-8px);
+    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
+    z-index: 100;
+
+    li {
+      position: relative;
+      list-style: none;
+
+      &.open {
+        > .dropdown-item {
+          background-color: var(--secondary-background);
+          color: var(--accent-color);
+
+          &.has-children::after {
+            transform: rotate(45deg);
+          }
+        }
+
+        > ul {
+          opacity: 1;
+          visibility: visible;
+          pointer-events: auto;
+          transform: translateX(0);
+        }
+      }
+    }
+
+    ul {
+      position: absolute;
+      top: 0;
+      left: 100%;
+      margin-left: 4px;
+      background-color: var(--background);
+      border: 1px solid var(--divider);
+      border-radius: $border-radius;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
+      min-width: 220px;
+      padding: calc($spacing / 2) 0;
+      list-style: none;
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+      transform: translateX(-8px);
+      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
+    }
+  }
+
+  .dropdown-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.6rem $spacing;
+    color: var(--primary-text);
+    text-decoration: none;
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease;
+    user-select: none;
+
+    &:hover {
+      background-color: var(--secondary-background);
+      color: var(--accent-color);
+    }
+
+    &.has-children::after {
+      content: '';
+      display: inline-block;
+      flex-shrink: 0;
+      width: 0.35rem;
+      height: 0.35rem;
+      border-right: 1.5px solid currentColor;
+      border-bottom: 1.5px solid currentColor;
+      transform: rotate(-45deg);
+      margin-left: calc($spacing / 2);
+      transition: transform 0.2s ease;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .dropdown-menu {
+      width: 100%;
+      min-width: 250px;
+
+      ul {
+        position: static;
+        box-shadow: none;
+        border: none;
+        border-left: 2px solid var(--divider);
+        border-radius: 0;
+        background-color: transparent;
+        transform: none;
+        margin-left: 0;
+        padding-left: $spacing;
+        max-height: 0;
+        overflow: hidden;
+        opacity: 1;
+        visibility: visible;
+        pointer-events: none;
+        padding-top: 0;
+        padding-bottom: 0;
+        transition: max-height 0.25s ease, padding 0.25s ease;
+      }
+
+      li.open > ul {
+        max-height: 600px;
+        padding-top: calc($spacing / 4);
+        padding-bottom: calc($spacing / 4);
+        pointer-events: auto;
+      }
+    }
+
+    .dropdown-item.has-children::after {
+      transform: rotate(45deg);
+    }
+
+    .dropdown-menu li.open > .dropdown-item.has-children::after {
+      transform: rotate(-135deg);
+    }
+  }
+}

package/css/editor.scss

@@ -1,9 +1,12 @@
+@use "properties";
+@use "parameters" as *;
+
 /* ── Editor Component ───────────────────────────────────────────────── */
 
 .editor {
   background: var(--secondary-background);
   border: 1px solid var(--divider);
-  border-radius: 0.5rem;
+  border-radius: $border-radius;
   box-shadow: 0 1px 3px rgba(56, 65, 74, 0.08), 0 1px 2px rgba(56, 65, 74, 0.06);
   display: flex;
   flex-direction: column;
@@ -35,7 +38,7 @@
     height: 2rem;
     padding: 0;
     border: none;
-    border-radius: 0.25rem;
+    border-radius: calc($border-radius / 2);
     background: transparent;
     color: var(--secondary-text);
     cursor: pointer;
@@ -170,7 +173,7 @@
   img {
     max-width: 100%;
     height: auto;
-    border-radius: 0.35rem;
+    border-radius: calc($border-radius * 0.875);
     margin: 0.5rem 0;
   }
 
@@ -212,7 +215,7 @@
     border-color: var(--divider);
     background: var(--background);
     color: var(--primary-text);
-    border-radius: 0.3rem;
+    border-radius: calc($border-radius * 0.75);
     padding: 0.75rem;
     tab-size: 2;
   }
@@ -275,7 +278,7 @@
     padding: 0.35rem 0.5rem;
     font-size: 0.75rem;
     font-weight: 500;
-    border-radius: 0.25rem;
+    border-radius: calc($border-radius / 2);
     background: var(--divider);
     color: var(--primary-text);
     border: none;
@@ -294,7 +297,7 @@
   padding: 0.75rem;
   background: var(--background);
   border: 1px solid var(--divider);
-  border-radius: 0.3rem;
+  border-radius: calc($border-radius * 0.75);
   line-height: 1.6;
   font-size: 0.9rem;
   color: var(--primary-text);