enhancements: small design tweaks & color balances

packages/core/src/attachment/attachment.css

@@ -93,6 +93,7 @@
 .f-attachment__text-meta {
     max-width: 100%;
     font-weight: var(--f-font-weight-normal);
+    color: var(--f-color-text-weakest);
 }
 
 .f-attachment__text-meta span {

packages/core/src/audio/audio.css

@@ -78,6 +78,8 @@
     height: 100%;   
     z-index: 5;
     -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
     background: transparent;
 }
 
@@ -107,3 +109,19 @@
     border: none;
     background: transparent;
 }
+
+.f-audio-waveform input[type="range"].f-audio-waveform__range::-moz-range-thumb {
+    height: var(--f-audio-waveform-pin-height);
+    width: var(--f-audio-waveform-pin-width);
+    border: none;
+    border-radius: var(--f-radius);
+    background-color: var(--f-audio-waveform-active);
+    box-shadow: none;
+    cursor: pointer;
+}
+
+.f-audio-waveform input[type="range"].f-audio-waveform__range::-moz-range-track {
+    background: transparent;
+    border: none;
+    height: 100%;
+}

packages/core/src/drag/drag-element.tsx

@@ -3,6 +3,7 @@ import { classNames, CoreViewProps, getButton, mergeRefs, useDrag, View } from '
 
 export type DragElementProps = {
     id?: string
+    onlyIndentDataAttr?: boolean
     indent?: number
     noDrop?: boolean
     noDrag?: boolean
@@ -12,15 +13,15 @@ export type DragElementProps = {
 } & Omit<CoreViewProps, 'indent'>
 
 export const DragElement = forwardRef((props: DragElementProps, ref) => {
-    const { id, indent = 0, noIndent, noDrop, noDrag, noFocus, style = {}, dragThreshold = 3, ...rest } = props
+    const { id, indent = 0, noIndent, onlyIndentDataAttr, noDrop, noDrag, noFocus, style = {}, dragThreshold = 3, ...rest } = props
     const fallbackDisplay = useMemo(() => style.display, [style])
     const { onMouseDown, onMouseUp, onMouseDownExplicit, getCache } = useDrag()
     const elementRef = useRef(null)
     const styles = useMemo(
         () => ({
             ...style,
-            width: indent ? `calc(100% - var(--f-drag-indent) * ${indent})` : '100%',
-            marginLeft: indent && !noIndent ? `calc(var(--f-drag-indent) * ${indent})` : undefined,
+            width: indent && !onlyIndentDataAttr ? `calc(100% - var(--f-drag-indent) * ${indent})` : '100%',
+            marginLeft: indent && !noIndent && !onlyIndentDataAttr ? `calc(var(--f-drag-indent) * ${indent})` : undefined,
         }),
         [style, indent]
     )

packages/core/src/select/select.css

@@ -1,6 +1,6 @@
 :root {
     --f-select-width: 300px;
-    --f-select-color: var(--f-color-text);
+    --f-select-color: var(--f-color-text-weak);
     --f-select-color-placeholder: var(--f-color-text-weakest);
     --f-select-color-disabled: var(--f-color-text-weakest);
     --f-select-color-selected: var(--f-color-accent);

packages/core/src/tooltip/tooltip.css

@@ -46,6 +46,7 @@
 .f-tooltip-content .f-text,
 .f-tooltip-content .f-heading {
     color: inherit;
+    text-align: center;
 }
 
 .f-tooltip-content .f-text {