WIP 3dbutton

llama_forge_rs/public/3dbutton.md

@@ -2,20 +2,16 @@
 <div>
   <div>
     <button class="button" style="margin-right: 1em; margin-bottom: 1em;">
-      <span>A</span>
+      <span>+</span>
     </button>
 
     <button class="button" style="margin-right: 1em;">
-      <span>BB</span>
+      <span>TEST !</span>
     </button>
     <button class="button">
-      <span>CCCC</span>
+      <span>-</span>
     </button>
   </div>
-  <div>
-    <button class="button" style="margin-right: 1em;">
-      <span>DDDDDDDDDDDDDDDDDDDDDDDDDDD</span>
-    </button>
 </div>
 ```
 
@@ -37,11 +33,13 @@ body {
 }
 
 .button {
+  --cr-shadow-color: rgba(5, 5, 235, 0.75);
   --fl-shadow-color: rgba(5, 5, 5, 1);
   --str-shadow-color: rgba(5, 5, 5, 0.5);
   --shadow-color: rgba(5, 5, 5, 0.25);
   --lt-shadow-color: rgba(5, 5, 5, 0.1);
   
+  --cr-highlight-color: rgba(55, 55, 255, 0.25);
   --highlight-color: rgba(255, 255, 255, 0.25);
   --fl-highlight-color: rgba(255, 255, 255, 1);
   
@@ -55,10 +53,12 @@ body {
   padding: 1em 1.5em;
   -webkit-tap-highlight-color: transparent;
   background-color: rgba(0, 0, 0, 0.75);
+  // outline to in shadow (fixed) [curvature of background surface]
   box-shadow:
-    -0.15em -0.15em 0.15em -0.075em var(--shadow-color),
-    0.15em -0.15em 0.15em -0.075em var(--lt-shadow-color),
-    0.0375em 0.0375em 0.0675em 0 var(--lt-shadow-color);
+    -0.15em -0.15em 0.15em -0.075em var(--shadow-color),  // tl
+    0.15em -0.15em 0.15em -0.075em var(--shadow-color),   // tr
+    -0.15em 0.15em 0.15em -0.075em var(--shadow-color),   // bl
+    0.0375em 0.0375em 0.0675em 0 var(--lt-shadow-color);  // br // why different ? (improves perspective shadow feel?)
 
   &::before,
   &::after {
@@ -71,35 +71,40 @@ body {
   &::before {
     z-index: 1;
     inset: 0.025em;
+    // outline shadow perspective
     box-shadow: 
-      0 0.05em 0.05em -0.01em var(--fl-shadow-color),
-      0 0.01em 0.01em -0.01em var(--str-shadow-color),
-      0.15em 0.3em 0.1em -0.01em var(--shadow-color);
+      // 0 0.05em 0.05em -0.01em var(--fl-shadow-color),   // perspective gap btm (opt)
+      // 0 0.01em 0.01em -0.01em var(--str-shadow-color),  // perspective gap btm (opt)
+      0.15em 0.3em 0.1em -0.01em var(--shadow-color);      // button shadow itself
   }
 
   &::after {
     z-index: 2;
     inset: 0.0125em;
+    // main button color
     background-image: linear-gradient(
       135deg,
       rgb(230, 230, 230),
       rgb(180, 180, 180)
     );
     clip-path: inset(0 round 999vw);
+    // inline shadows
     box-shadow: 
+       // inline-perspective shadow
       0 0 0 0 inset var(--shadow-color), 
-      -0.05em -0.05em 0.05em 0 inset var(--shadow-color),
-      0 0 0.05em 0.2em inset var(--highlight-color),
-      // 0.025em 0.05em 0.1em 0 inset var(--fl-highlight-color),
-      -0.075em -0.25em 0.25em 0.1em inset var(--shadow-color);
+      
+      // Rounding of the button itself
+      -0.05em -0.05em 0.05em 0 inset var(--shadow-color), // button bottom
+      0 0 0.05em 0.2em inset var(--highlight-color), // button top
+      -0.075em -0.25em 0.25em 0.1em inset var(--shadow-color); // side
   }
 
   &:hover {
-    
     &::before {
+      // outline shadow perspective
       box-shadow: 
-        0 0.05em 0.0em -0.01em var(--fl-shadow-color),
-        0 0.01em 0.01em -0.01em var(--str-shadow-color),
+        // 0 0.05em 0.0em -0.01em var(--fl-shadow-color),
+        //0 0.01em 0.01em -0.01em var(--str-shadow-color),
         0.1em 0.2em 0.066em -0.01em var(--shadow-color);
     }
 
@@ -115,6 +120,7 @@ body {
 
   &:active {
     &::before {
+      // outline shadow perspective
       box-shadow: none;
     }
 
@@ -155,3 +161,45 @@ body {
   }
 }
 ```
+
+# interface
+
+- brainstorm:
+  - example  button equivalent?:
+    - "3ds hover:3ds-depth-100 active:3ds-depth-200 active:3ds-backlight-red"
+  - general config:
+    - "3ds-light-angle-[120deg]"   (day night cycle) 🤯
+    - "3ds-component-red"
+    - "3ds-surface-green"
+    - "3ds-view-angle-[120deg]" ???? (rotatable perspective???) (possible???)
+    - "3ds-ambient-occlusion" ?
+    - "3ds-gap-light?"
+    - "3ds-inline-outline-ratio?"
+    - "sizes? (increased em size)"
+  - open questions:
+    - how to make text work ? 3ds-text required?
+    - depth levels ?
+      - make virtual height configurable as well?????
+      - would need to compute level/ratio when outline shadow disappears
+    - shrinking looks weird for components that are much wider than they are high and vice-versa
+
+# Wants
+- depth
+
+- component color
+- mounting surface color
+- text color ? (needed?)
+
+- nesting?
+
+## Shadow types?
+
+outline-depth-shadow (fixed)
+
+
+inline-depth-shadow
+- ambient occlusion(bot+top) + highlight
+
+
+inline-perspective-shadow
+outline-perspective-shadow

llama_forge_rs/style/main.scss

@@ -1 +1,7 @@
-@use 'tailwind'
+@use 'tailwind';
+
+@layer components {
+  .btn-example {
+    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
+  }
+}