@flux-ui/components 3.0.0-next.8 → 3.0.0

package/src/css/mixin/tree-node.scss

@@ -0,0 +1,94 @@
+@mixin tree-node-classes() {
+    // Wrapper for guide lines + expand button — no internal gap so lines align perfectly
+    .treeNodeLineArea {
+        display: flex;
+        align-self: stretch;
+        flex-shrink: 0;
+    }
+
+    // Vertical guide line for each ancestor level
+    .treeIndent {
+        position: relative;
+        width: 20px;
+        align-self: stretch;
+        flex-shrink: 0;
+        pointer-events: none;
+
+        &.hasLine::before {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 9px;
+            width: 1px;
+            content: '';
+            background: var(--surface-stroke);
+        }
+    }
+
+    // Connector from parent to current node, with rounded elbow
+    .treeConnector {
+        position: relative;
+        width: 20px;
+        align-self: stretch;
+        flex-shrink: 0;
+        pointer-events: none;
+
+        // Non-last siblings: full-height vertical continuation line
+        &:not(.isLast)::before {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 9px;
+            width: 1px;
+            content: '';
+            background: var(--surface-stroke);
+        }
+
+        // Rounded elbow: vertical segment from top to midpoint, curves right to expand area
+        // Overlaps the ::before vertical line for non-last nodes (same position, same color)
+        &::after {
+            position: absolute;
+            top: 0;
+            bottom: 50%;
+            left: 9px;
+            right: 0;
+            content: '';
+            border-left: 1px solid var(--surface-stroke);
+            border-bottom: 1px solid var(--surface-stroke);
+            border-bottom-left-radius: 6px;
+        }
+    }
+
+    .treeNodeExpand {
+        display: flex;
+        width: 16px;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
+        color: var(--foreground-secondary);
+
+        &:not(:empty) {
+            cursor: pointer;
+        }
+    }
+
+    .treeNodeColorDot {
+        display: block;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+    }
+
+    .treeNodeIcon {
+        color: var(--foreground-secondary);
+        flex-shrink: 0;
+    }
+
+    .treeNodeLabel {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}

package/src/css/reset.scss

@@ -9,11 +9,6 @@
         margin: 0;
     }
 
-    // Keyword animations.
-    //html {
-    //    interpolate-size: allow-keywords;
-    //}
-
     body {
         // Accessible line-height.
         line-height: 1.5;
@@ -71,105 +66,3 @@
         isolation: isolate;
     }
 }
-
-//@layer flux-reset {
-//    *,
-//    *::before,
-//    *::after {
-//        box-sizing: border-box;
-//    }
-//
-//    html {
-//        line-height: 1.6;
-//        -webkit-text-size-adjust: 100%;
-//        -webkit-tap-highlight-color: rgb(0 0 0 / 0);
-//        -moz-tab-size: 4;
-//        tab-size: 4;
-//    }
-//
-//    body {
-//        margin: 0;
-//        padding: 0;
-//        line-height: inherit;
-//    }
-//
-//    blockquote,
-//    dl,
-//    dd,
-//    h1,
-//    h2,
-//    h3,
-//    h4,
-//    h5,
-//    h6,
-//    hr,
-//    figure,
-//    p,
-//    pre {
-//        margin: 0;
-//    }
-//
-//    h1,
-//    h2,
-//    h3,
-//    h4,
-//    h5,
-//    h6 {
-//        font-size: inherit;
-//        font-weight: inherit;
-//    }
-//
-//    ul,
-//    ol {
-//        margin: 0;
-//    }
-//
-//    code,
-//    kbd,
-//    samp,
-//    pre {
-//        font-family: monospace;
-//        font-size: 1em;
-//    }
-//
-//    small {
-//        font-size: 80%;
-//    }
-//
-//    sub,
-//    sup {
-//        position: relative;
-//        font-size: 75%;
-//        line-height: 0;
-//        vertical-align: baseline;
-//    }
-//
-//    sub {
-//        bottom: -0.25em;
-//    }
-//
-//    sup {
-//        top: -0.5em;
-//    }
-//
-//    button,
-//    select {
-//        text-transform: none;
-//    }
-//
-//    button,
-//    input,
-//    textarea {
-//        font: inherit;
-//    }
-//
-//    a {
-//        color: inherit;
-//        text-decoration: none;
-//    }
-//
-//    b,
-//    strong {
-//        font-weight: bolder;
-//    }
-//}

package/src/css/typography.scss

@@ -1,13 +1,13 @@
 @layer flux-base {
     h1, h2, h3, h4, h5, h6 {
-        font-weight: 700;
+        font-weight: 600;
         line-height: 1.6;
         text-wrap: balance;
     }
 
     h1 {
         color: var(--foreground-prominent);
-        font-size: 30px;
+        font-size: 27px;
     }
 
     h2 {
@@ -33,10 +33,13 @@
     }
 
     a:not([class]), a[class=""] {
-        color: rgb(var(--primary-7));
+        align-self: start;
+        color: var(--primary-600);
         text-decoration: underline;
+        text-decoration-color: currentColor;
+        text-decoration-skip: auto;
         text-decoration-thickness: 1px;
-        text-underline-offset: 4px;
+        text-underline-offset: 2px;
 
         &:hover {
             text-decoration: none;
@@ -44,14 +47,18 @@
     }
 
     p {
-        line-height: 1.8;
+        line-height: 1.6;
+    }
+
+    small {
+        font-size: 14px;
     }
 
     blockquote {
         position: relative;
-        margin: 0 0 0 30px;
+        margin-left: 30px;
         padding: 15px 21px;
-        background: rgb(var(--gray-2));
+        background: var(--gray-100);
         border-radius: var(--radius);
 
         &::before {
@@ -59,7 +66,7 @@
             top: 5px;
             left: -27px;
             content: '”';
-            color: rgb(var(--primary-7));
+            color: var(--primary-600);
             font-size: 39px;
             font-weight: 700;
         }
@@ -71,7 +78,7 @@
 
     img:not([class]) {
         height: unset;
-        border-radius: calc(var(--radius) / 2);
+        border-radius: var(--radius-half);
         outline: 1px solid rgb(0 0 0 / .025);
         outline-offset: -1px;
     }