@preference-sl/pref-viewer 2.16.0-beta.1 → 2.16.0-beta.10

package/src/styles.js

@@ -3,22 +3,6 @@ export const PrefViewerStyleVariables = {
     fontFamily: "'Roboto', ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji",
 };
 
-// Default palette colors for illumination color picker
-export const DEFAULT_ILLUMINATION_PALETTE = [
-    "#ffffff", // White
-    "#ff6700", // Orange (default)
-    "#ff0000", // Red
-    "#00ff00", // Green
-    "#0000ff", // Blue
-    "#ffff00", // Yellow
-    "#ff00ff", // Magenta
-    "#00ffff", // Cyan
-    "#ffb6c1", // Light Pink
-    "#98fb98", // Light Green
-    "#87ceeb", // Light Blue
-    "#dda0dd", // Plum
-];
-
 export const PrefViewerStyles = `
     :host .pref-viewer-wrapper {
         display: grid !important;
@@ -106,7 +90,6 @@ export const PrefViewer3DStyles = `
         position: relative;
         outline: none;
         box-sizing: border-box;
-        background: #ffffff;
     }
 `;
 
@@ -121,7 +104,8 @@ export const PrefViewerMenu3DStyles = `
         --text-color: #ffffff;
         --muted-color: #b2b2b2;
         --accent-color: ${PrefViewerStyleVariables.colorPrimary};
-        --status-color: #ffb0b0;
+
+        --separator-border: 1px solid rgba(255, 255, 255, 0.1);
         
         --toggle-margin: 16px;
         --toggle-bg-color: rgba(19, 21, 28, 0.6);
@@ -154,6 +138,13 @@ export const PrefViewerMenu3DStyles = `
         --switch-control-width: calc((var(--switch-control-thumb-size) * 2) + (var(--switch-control-bar-spacing) * 2));
         --switch-control-height: calc(var(--switch-control-thumb-size) + (var(--switch-control-bar-spacing) * 2));
 
+        --slider-thumb-size: 18px;
+        --slider-thumb-color: #ffffff;
+        --slider-thumb-border: 1px solid rgba(0, 0, 0, 0.25);
+        --slider-thumb-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
+        --slider-bar-height: 12px;
+        --slider-bar-border: 1px solid rgba(255, 255, 255, 0.5);
+
         position: absolute;
         top: var(--toggle-margin);
         right: var(--toggle-margin);
@@ -223,7 +214,7 @@ export const PrefViewerMenu3DStyles = `
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-header {
-        margin-bottom: var(--panel-spacing-large);
+        margin-bottom: var(--panel-spacing);
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-header>.menu-title {
@@ -250,11 +241,11 @@ export const PrefViewerMenu3DStyles = `
         justify-content: space-between;
         gap: var(--panel-spacing-large);
         padding: var(--panel-spacing) 0;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        border-bottom: var(--separator-border);
     }
 
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch:last-child {
-        border-bottom: none;
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch:first-child {
+        border-top: var(--separator-border);
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch>.menu-switch-copy {
@@ -268,18 +259,6 @@ export const PrefViewerMenu3DStyles = `
         font-weight: var(--font-weight-medium);
     }
 
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch .menu-switch-title::after {
-        content: " *";
-        color: var(--accent-color);
-        font-weight: var(--font-weight-bold);
-        opacity: 0;
-    }
-
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch[data-pending] .menu-switch-title::after {
-        opacity: 1;
-        transition: opacity 0.2s ease;
-    }
-
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch small {
         color: var(--muted-color);
         font-size: var(--font-size-small);
@@ -353,80 +332,19 @@ export const PrefViewerMenu3DStyles = `
         gap: calc(var(--panel-spacing) / 2);
     }
 
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-footer>.menu-pending {
-        font-size: var(--font-size-small);
-        text-transform: uppercase;
-        letter-spacing: 0.08em;
-        color: var(--accent-color);
-        font-weight: var(--font-weight-medium);
-        display: block;
-        opacity: 1;
-        transition: opacity 0.2s ease;
-    }
-
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-footer>.menu-pending::before {
-        content: "* ";
-        font-size: var(--font-size-medium);
-        color: var(--accent-color);
-        font-weight: var(--font-weight-bold);
-    }
-
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-footer>.menu-pending[hidden] {
-        opacity: 0;
-    }
-
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-footer>.menu-status {
-        font-size: var(--font-size-small);
-        color: var(--status-color);
-        display: none;
-    }
-
-    pref-viewer-menu-3d[data-status="visible"]>.menu-wrapper>.menu-panel>.menu-footer>.menu-status {
-        display: block;
-    }
-
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-footer>.menu-apply {
-        border: none;
-        border-radius: var(--button-radius);
-        padding: round(down, calc(var(--panel-spacing) * 0.625), 1px) var(--panel-spacing);
-        font-size: var(--button-font-size);
-        font-weight: var(--button-font-weight);
-        background: var(--accent-color);
-        color: var(--button-font-color);
-        cursor: pointer;
-        transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
-    }
-
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-footer>.menu-apply:not(:disabled):hover {
-        box-shadow: var(--button-shadow);
-    }
-
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-footer>.menu-apply:disabled {
-        cursor: not-allowed;
-        opacity: 0.55;
-    }
-
-    pref-viewer-menu-3d[data-applying]>.menu-wrapper>.menu-panel>.menu-footer>.menu-apply {
-        opacity: 0.75;
-    }
-
-    /* Color Slider Styles */
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker {
         display: flex;
         flex-direction: column;
-        gap: 8px;
+        gap: calc(var(--panel-spacing) / 2);
         padding: var(--panel-spacing) 0;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker:last-child {
-        border-bottom: none;
+        border-bottom: var(--separator-border);
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker>.color-slider-row {
         display: flex;
         align-items: center;
         justify-content: space-between;
+        gap: calc(var(--panel-spacing) / 2);
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker>.color-slider-row>.color-picker-label {
@@ -436,10 +354,10 @@ export const PrefViewerMenu3DStyles = `
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker>.color-slider-row>.color-preview {
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-        border: 2px solid rgba(255, 255, 255, 0.3);
+        width: var(--switch-control-width);
+        align-self: stretch;
+        border-radius: calc(var(--slider-bar-height) / 2);
+        border: var(--slider-bar-border);
         flex-shrink: 0;
     }
 
@@ -447,35 +365,38 @@ export const PrefViewerMenu3DStyles = `
         -webkit-appearance: none;
         appearance: none;
         width: 100%;
-        height: 10px;
-        border-radius: 5px;
-        cursor: pointer;
+        height: var(--slider-bar-height);
+        box-sizing: border-box;
+        border-radius: calc(var(--slider-bar-height) / 2);
         background: linear-gradient(to right,
             hsl(0,100%,50%), hsl(30,100%,50%), hsl(60,100%,50%), hsl(90,100%,50%),
             hsl(120,100%,50%), hsl(150,100%,50%), hsl(180,100%,50%), hsl(210,100%,50%),
             hsl(240,100%,50%), hsl(270,100%,50%), hsl(300,100%,50%), hsl(330,100%,50%),
             hsl(360,100%,50%));
+        border: var(--slider-bar-border);
         outline: none;
+        margin: 0;
+        cursor: pointer;
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker>.color-slider::-webkit-slider-thumb {
         -webkit-appearance: none;
-        width: 16px;
-        height: 16px;
+        width: var(--slider-thumb-size);
+        height: var(--slider-thumb-size);
         border-radius: 50%;
-        background: white;
-        border: 2px solid rgba(0, 0, 0, 0.25);
-        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+        background: var(--slider-thumb-color);
+        border: var(--slider-thumb-border);
+        box-shadow: var(--slider-thumb-shadow);
         cursor: pointer;
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker>.color-slider::-moz-range-thumb {
-        width: 16px;
-        height: 16px;
+        width: var(--slider-thumb-size);
+        height: var(--slider-thumb-size);
         border-radius: 50%;
-        background: white;
-        border: 2px solid rgba(0, 0, 0, 0.25);
-        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+        background: var(--slider-thumb-color);
+        border: var(--slider-thumb-border);
+        box-shadow: var(--slider-thumb-shadow);
         cursor: pointer;
     }
 
@@ -487,23 +408,16 @@ export const PrefViewerMenu3DStyles = `
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider {
         display: flex;
         flex-direction: column;
-        gap: 8px;
+        gap: calc(var(--panel-spacing) / 2);
         padding: var(--panel-spacing) 0;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider[data-pending] .lighting-slider-label::after {
-        content: "•";
-        margin-left: 8px;
-        color: var(--accent-color);
-        font-size: 1.1em;
+        border-bottom: var(--separator-border);
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider-row {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        gap: 12px;
+        gap: calc(var(--panel-spacing) / 2);
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider-row>.lighting-slider-label {
@@ -523,37 +437,41 @@ export const PrefViewerMenu3DStyles = `
         -webkit-appearance: none;
         appearance: none;
         width: 100%;
-        height: 10px;
-        border-radius: 999px;
-        cursor: pointer;
-        background:
-            linear-gradient(to right,
-                rgba(255, 214, 120, 0.95) 0%,
-                rgba(255, 179, 71, 0.98) 20%,
-                rgba(255, 244, 214, 0.95) 50%,
-                rgba(118, 165, 255, 0.92) 80%,
-                rgba(56, 66, 115, 0.95) 100%);
+        box-sizing: border-box;
+        height: var(--slider-bar-height);
+        border-radius: calc(var(--slider-bar-height) / 2);
+        background: linear-gradient(to right,
+            rgba(56, 66, 115, 0.95) 0%,
+            rgba(118, 165, 255, 0.92) 10%,
+            rgba(255, 214, 120, 0.95) 30%,
+            rgba(255, 244, 214, 0.95) 50%,
+            rgba(255, 214, 120, 0.95) 70%,
+            rgba(118, 165, 255, 0.92) 90%,
+            rgba(56, 66, 115, 0.95) 100%);
+        border: var(--slider-bar-border);
         outline: none;
+        margin: 0;
+        cursor: pointer;
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider::-webkit-slider-thumb {
         -webkit-appearance: none;
-        width: 18px;
-        height: 18px;
+        width: var(--slider-thumb-size);
+        height: var(--slider-thumb-size);
         border-radius: 50%;
-        background: #ffffff;
-        border: 2px solid rgba(0, 0, 0, 0.24);
-        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
+        background: var(--slider-thumb-color);
+        border: var(--slider-thumb-border);
+        box-shadow: var(--slider-thumb-shadow);
         cursor: pointer;
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider::-moz-range-thumb {
-        width: 18px;
-        height: 18px;
+        width: var(--slider-thumb-size);
+        height: var(--slider-thumb-size);
         border-radius: 50%;
-        background: #ffffff;
-        border: 2px solid rgba(0, 0, 0, 0.24);
-        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
+        background: var(--slider-thumb-color);
+        border: var(--slider-thumb-border);
+        box-shadow: var(--slider-thumb-shadow);
         cursor: pointer;
     }
 
@@ -572,33 +490,23 @@ export const PrefViewerMenu3DStyles = `
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider-actions>.lighting-play-button {
         appearance: none;
-        border: 1px solid rgba(255, 255, 255, 0.18);
-        border-radius: 999px;
-        background: rgba(255, 255, 255, 0.08);
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        border-radius: var(--button-radius);
+        padding: calc(var(--panel-spacing) * 0.5) var(--panel-spacing);
         color: var(--text-color);
-        padding: 6px 12px;
         font-size: var(--font-size-small);
         font-weight: var(--font-weight-medium);
+        transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
         cursor: pointer;
-        transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider-actions>.lighting-play-button:hover,
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider-actions>.lighting-play-button:focus-visible {
-        background: rgba(255, 255, 255, 0.14);
-        border-color: rgba(255, 255, 255, 0.28);
-        transform: translateY(-1px);
+        background: rgba(255, 255, 255, 0.15);
+        border-color: rgba(255, 255, 255, 0.3);
         outline: none;
-    }
-
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider[data-playing] .lighting-slider {
-        background:
-            linear-gradient(to right,
-                rgba(255, 220, 132, 0.96) 0%,
-                rgba(255, 187, 88, 0.98) 18%,
-                rgba(255, 247, 226, 0.96) 50%,
-                rgba(112, 154, 255, 0.92) 82%,
-                rgba(45, 55, 102, 0.98) 100%);
+        box-shadow: var(--button-shadow);
     }
 `;
 

package/Readme.md

@@ -1,8 +0,0 @@
-# @preference-sl/pref-viewer
-
-A Web Component for visualizing GLTF models using Babylon.js.
-
-## Installation
-
-```bash
-npm install @preference-sl/pref-viewer