lgimgui 0.1.0 → 0.1.1

package/demo/public/materials.json

@@ -164,38 +164,38 @@
     "control": {
       "cornerRadius": 10,
       "cornerRoundness": 2.5,
-      "refThickness": 7.48,
-      "refFactor": 1.19,
-      "refDispersion": 7.48,
+      "refThickness": 9.86,
+      "refFactor": 1.6,
+      "refDispersion": 30.61,
       "refFresnelRange": 10.51,
       "refFresnelHardness": 14.86,
       "refFresnelFactor": 14.41,
       "glareRange": 22.17,
       "glareHardness": 27.78,
-      "glareFactor": 22.400000000000002,
+      "glareFactor": 13.4,
       "glareConvergence": 25.44,
       "glareOppositeFactor": 37.33,
       "glareAngle": -42.329999999999984,
-      "blurRadius": 8,
-      "blurEdge": false,
+      "blurRadius": 17,
+      "blurEdge": true,
       "tint": {
-        "r": 255,
-        "g": 255,
-        "b": 255,
-        "a": 0.33502948831038176
+        "r": 218,
+        "g": 222,
+        "b": 226,
+        "a": 0.6697542779020738
       },
       "shadowExpand": 12.5,
-      "shadowFactor": 14.040000000000001,
+      "shadowFactor": 26.91,
       "shadowPosition": {
         "x": 0,
         "y": -4
       },
-      "borderWidth": 1.6,
+      "borderWidth": 1.1,
       "borderColor": {
-        "r": 255,
-        "g": 255,
-        "b": 255,
-        "a": 0.21926326609463961
+        "r": 115,
+        "g": 146,
+        "b": 177,
+        "a": 0.28902046013441024
       },
       "borderAdapt": false,
       "adaptTint": 100,
@@ -682,31 +682,71 @@
       "borderAdapt": false,
       "adaptTint": 100,
       "adaptShadow": 100
+    },
+    "control": {
+      "cornerRadius": 10,
+      "cornerRoundness": 2.5,
+      "refThickness": 7.48,
+      "refFactor": 1.19,
+      "refDispersion": 2.244,
+      "refFresnelRange": 10.51,
+      "refFresnelHardness": 14.86,
+      "refFresnelFactor": 0,
+      "glareRange": 22.17,
+      "glareHardness": 27.78,
+      "glareFactor": 0,
+      "glareConvergence": 25.44,
+      "glareOppositeFactor": 37.33,
+      "glareAngle": -42.329999999999984,
+      "blurRadius": 200,
+      "blurEdge": true,
+      "tint": {
+        "r": 241.8,
+        "g": 241.8,
+        "b": 241.8,
+        "a": 0.33502948831038176
+      },
+      "shadowExpand": 12.5,
+      "shadowFactor": 0,
+      "shadowPosition": {
+        "x": 0,
+        "y": -4
+      },
+      "borderWidth": 1.6,
+      "borderColor": {
+        "r": 255,
+        "g": 255,
+        "b": 255,
+        "a": 0.21926326609463961
+      },
+      "borderAdapt": false,
+      "adaptTint": 100,
+      "adaptShadow": 100
     }
   },
   "dark": {
     "control": {
       "cornerRadius": 60,
       "cornerRoundness": 5,
-      "refThickness": 14.51,
-      "refFactor": 1.32,
-      "refDispersion": 7.48,
-      "refFresnelRange": 10.51,
-      "refFresnelHardness": 14.86,
-      "refFresnelFactor": 11.528,
+      "refThickness": 9.48,
+      "refFactor": 1.65,
+      "refDispersion": 28.91,
+      "refFresnelRange": 16.82,
+      "refFresnelHardness": 19.7,
+      "refFresnelFactor": 18.71,
       "glareRange": 22.17,
       "glareHardness": 27.78,
-      "glareFactor": 16.8,
-      "glareConvergence": 25.44,
-      "glareOppositeFactor": 37.33,
+      "glareFactor": 23.51,
+      "glareConvergence": 32,
+      "glareOppositeFactor": 57.63,
       "glareAngle": -42.329999999999984,
-      "blurRadius": 8,
-      "blurEdge": false,
+      "blurRadius": 14,
+      "blurEdge": true,
       "tint": {
         "r": 28,
         "g": 28,
         "b": 34,
-        "a": 0.3522729205698886
+        "a": 0.44886246088942827
       },
       "shadowExpand": 12.5,
       "shadowFactor": 15.444000000000003,
@@ -714,12 +754,12 @@
         "x": 0,
         "y": -4
       },
-      "borderWidth": 1,
+      "borderWidth": 1.1,
       "borderColor": {
-        "r": 255,
-        "g": 255,
-        "b": 255,
-        "a": 0.21926326609463961
+        "r": 219,
+        "g": 222,
+        "b": 246,
+        "a": 0.14088337104868587
       },
       "borderAdapt": false,
       "adaptTint": 100,
@@ -804,6 +844,206 @@
       "borderAdapt": false,
       "adaptTint": 100,
       "adaptShadow": 100
+    },
+    "thin": {
+      "cornerRadius": 14,
+      "cornerRoundness": 5,
+      "refThickness": 4.1899999999999995,
+      "refFactor": 1.74,
+      "refDispersion": 21.38,
+      "refFresnelRange": 14.48,
+      "refFresnelHardness": 26.59,
+      "refFresnelFactor": 36.27,
+      "glareRange": 0,
+      "glareHardness": 0,
+      "glareFactor": 0,
+      "glareConvergence": 0,
+      "glareOppositeFactor": 0,
+      "glareAngle": 0,
+      "blurRadius": 16,
+      "blurEdge": true,
+      "tint": {
+        "r": 28,
+        "g": 28,
+        "b": 34,
+        "a": 0.38
+      },
+      "shadowExpand": 12,
+      "shadowFactor": 4.4,
+      "shadowPosition": {
+        "x": 0,
+        "y": -3
+      },
+      "borderWidth": 0,
+      "borderColor": {
+        "r": 255,
+        "g": 255,
+        "b": 255,
+        "a": 0.4
+      },
+      "borderAdapt": false,
+      "adaptTint": 100,
+      "adaptShadow": 100
+    },
+    "accent": {
+      "cornerRadius": 60,
+      "cornerRoundness": 7,
+      "refThickness": 3.89,
+      "refFactor": 1.1400000000000001,
+      "refDispersion": 9.8,
+      "refFresnelRange": 15.49,
+      "refFresnelHardness": 22.990000000000002,
+      "refFresnelFactor": 60.608000000000004,
+      "glareRange": 26.330000000000002,
+      "glareHardness": 28.7,
+      "glareFactor": 22.950000000000003,
+      "glareConvergence": 34.04,
+      "glareOppositeFactor": 77.3,
+      "glareAngle": 36.27000000000001,
+      "blurRadius": 18,
+      "blurEdge": true,
+      "tint": {
+        "r": 28,
+        "g": 28,
+        "b": 34,
+        "a": 0.48208989135374064
+      },
+      "shadowExpand": 7.67,
+      "shadowFactor": 11.66,
+      "shadowPosition": {
+        "x": 0,
+        "y": -4
+      },
+      "borderWidth": 1,
+      "borderColor": {
+        "r": 64,
+        "g": 68,
+        "b": 84,
+        "a": 0.2173581292722815
+      },
+      "borderAdapt": false,
+      "adaptTint": 100,
+      "adaptShadow": 100
+    },
+    "toolbar": {
+      "cornerRadius": 60,
+      "cornerRoundness": 5,
+      "refThickness": 5.3100000000000005,
+      "refFactor": 1.28,
+      "refDispersion": 5.8100000000000005,
+      "refFresnelRange": 3.19,
+      "refFresnelHardness": 12.68,
+      "refFresnelFactor": 80,
+      "glareRange": 0,
+      "glareHardness": 0,
+      "glareFactor": 0,
+      "glareConvergence": 0,
+      "glareOppositeFactor": 0,
+      "glareAngle": -180,
+      "blurRadius": 136,
+      "blurEdge": true,
+      "tint": {
+        "r": 28,
+        "g": 28,
+        "b": 34,
+        "a": 0.5503064861164135
+      },
+      "shadowExpand": 18.44,
+      "shadowFactor": 15.488000000000001,
+      "shadowPosition": {
+        "x": 0,
+        "y": -3.799999999999997
+      },
+      "borderWidth": 1,
+      "borderColor": {
+        "r": 255,
+        "g": 255,
+        "b": 255,
+        "a": 1
+      },
+      "borderAdapt": false,
+      "adaptTint": 100,
+      "adaptShadow": 100
+    },
+    "menu": {
+      "cornerRadius": 16,
+      "cornerRoundness": 5,
+      "refThickness": 25.54,
+      "refFactor": 1.08,
+      "refDispersion": 8.96,
+      "refFresnelRange": 15.42,
+      "refFresnelHardness": 52.88,
+      "refFresnelFactor": 80,
+      "glareRange": 19.64,
+      "glareHardness": 29.07,
+      "glareFactor": 16.357499999999998,
+      "glareConvergence": 0,
+      "glareOppositeFactor": 91.9,
+      "glareAngle": 166.93,
+      "blurRadius": 45,
+      "blurEdge": true,
+      "tint": {
+        "r": 28,
+        "g": 28,
+        "b": 34,
+        "a": 0.38
+      },
+      "shadowExpand": 24,
+      "shadowFactor": 20.834000000000003,
+      "shadowPosition": {
+        "x": 0,
+        "y": -10.399999999999999
+      },
+      "borderWidth": 1,
+      "borderColor": {
+        "r": 89,
+        "g": 85,
+        "b": 74,
+        "a": 0.6055977974285512
+      },
+      "borderAdapt": false,
+      "adaptTint": 100,
+      "adaptShadow": 100
+    },
+    "pane": {
+      "cornerRadius": 36,
+      "cornerRoundness": 5,
+      "refThickness": 29.03,
+      "refFactor": 2.05,
+      "refDispersion": 18.04,
+      "refFresnelRange": 3.43,
+      "refFresnelHardness": 12.61,
+      "refFresnelFactor": 80,
+      "glareRange": 0,
+      "glareHardness": 0,
+      "glareFactor": 0,
+      "glareConvergence": 0,
+      "glareOppositeFactor": 0,
+      "glareAngle": 0,
+      "blurRadius": 75,
+      "blurEdge": true,
+      "tint": {
+        "r": 28,
+        "g": 28,
+        "b": 34,
+        "a": 0.4774466063535341
+      },
+      "shadowExpand": 18.41,
+      "shadowFactor": 23.122,
+      "shadowPosition": {
+        "x": 0,
+        "y": -3
+      },
+      "borderWidth": 1,
+      "borderColor": {
+        "r": 255,
+        "g": 255,
+        "b": 255,
+        "a": 1
+      },
+      "borderAdapt": false,
+      "adaptTint": 100,
+      "adaptShadow": 100
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lgimgui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "liquid glass immediate mode gui for the browser",
   "type": "module",
   "main": "src/index.js",

package/src/widgets/controls.js

@@ -66,7 +66,7 @@ export function createControls(core, primitives, glassWidget) {
     const height = props.compact ? COMPACT_HEIGHT : props.h ?? BUTTON_HEIGHT
     const pad = props.pad ?? [0, labelText ? 16 : (height - 16) / 2]
     const content = buttonContent(labelText, props)
-    const layoutProps = { direction: 'row', gap: 6, align: 'center', justify: 'center', h: height, pad, w: props.w, fr: props.fr, minW: props.minW ?? height }
+    const layoutProps = { direction: 'row', gap: 6, align: 'center', justify: props.justify ?? 'center', h: height, pad, w: props.w, fr: props.fr, minW: props.minW ?? height }
     const inside = insideGlass()
     const ownGlass = props.glass ?? (!inside || (core.toolbarDepth > 0 && core.capsuleDepth === 0) || (props.primary && core.capsuleDepth === 0))
     if (!ownGlass) {