@aleph-alpha/ui-library 1.13.0 → 1.14.0

package/src/theme/Background.stories.ts

@@ -46,48 +46,97 @@ export const Surface: Story = {
         <script>${copyScript}</script>
         
         <div class="mb-6">
-          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">surface</h2>
-          <p class="text-sm text-content-on-surface-muted">Background colors for main application surfaces. Click class name to copy.</p>
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">Surface Backgrounds</h2>
+          <p class="text-sm text-content-on-surface-muted">Reference for surface-layer tokens used across app layouts, overlays, and dialogs.</p>
         </div>
-        
-        <div class="flex flex-wrap gap-6">
-          <div class="flex flex-col items-center gap-1.5">
-            <div class="w-16 h-16 rounded-md bg-background-surface-primary border border-border-surface-default"></div>
-            <div class="text-center">
-              <span class="text-xs text-content-on-surface-primary block font-medium">primary</span>
-              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-surface-primary', this)">bg-background-surface-primary</code>
+
+        <div class="mb-8">
+          <h3 class="text-sm font-semibold text-content-on-surface-primary mb-1">Background Surfaces</h3>
+          <p class="text-xs text-content-on-surface-muted mb-3">Base and sheet-level surfaces for pages, panels, and subtle inner containers. Token group: <code>background.surface</code></p>
+          <div class="flex flex-wrap gap-6">
+            <div class="flex flex-col items-center gap-1.5">
+              <div class="w-16 h-16 rounded-md bg-background-surface-primary border border-border-surface-default"></div>
+              <div class="text-center">
+                <span class="text-xs text-content-on-surface-primary block font-medium">primary</span>
+                <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-surface-primary', this)">bg-background-surface-primary</code>
+              </div>
             </div>
-          </div>
-          
-          <div class="flex flex-col items-center gap-1.5">
-            <div class="w-16 h-16 rounded-md bg-background-surface-secondary border border-border-surface-default"></div>
-            <div class="text-center">
-              <span class="text-xs text-content-on-surface-primary block font-medium">secondary</span>
-              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-surface-secondary', this)">bg-background-surface-secondary</code>
+
+            <div class="flex flex-col items-center gap-1.5">
+              <div class="w-16 h-16 rounded-md bg-background-surface-secondary border border-border-surface-default"></div>
+              <div class="text-center">
+                <span class="text-xs text-content-on-surface-primary block font-medium">secondary</span>
+                <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-surface-secondary', this)">bg-background-surface-secondary</code>
+              </div>
             </div>
-          </div>
-          
-          <div class="flex flex-col items-center gap-1.5">
-            <div class="w-16 h-16 rounded-md bg-background-surface-muted border border-border-surface-default"></div>
-            <div class="text-center">
-              <span class="text-xs text-content-on-surface-primary block font-medium">muted</span>
-              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-surface-muted', this)">bg-background-surface-muted</code>
+
+            <div class="flex flex-col items-center gap-1.5">
+              <div class="w-16 h-16 rounded-md bg-background-surface-muted border border-border-surface-default"></div>
+              <div class="text-center">
+                <span class="text-xs text-content-on-surface-primary block font-medium">muted</span>
+                <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-surface-muted', this)">bg-background-surface-muted</code>
+              </div>
+            </div>
+
+            <div class="flex flex-col items-center gap-1.5">
+              <div class="w-16 h-16 rounded-md bg-background-surface-selected border border-border-surface-default"></div>
+              <div class="text-center">
+                <span class="text-xs text-content-on-surface-primary block font-medium">selected</span>
+                <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-surface-selected', this)">bg-background-surface-selected</code>
+              </div>
             </div>
+
+            <div class="flex flex-col items-center gap-1.5">
+              <div class="w-16 h-16 rounded-md bg-background-surface-inverse border border-border-surface-default"></div>
+              <div class="text-center">
+                <span class="text-xs text-content-on-surface-primary block font-medium">inverse</span>
+                <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-surface-inverse', this)">bg-background-surface-inverse</code>
+              </div>
+            </div>
+
           </div>
-          
-          <div class="flex flex-col items-center gap-1.5">
-            <div class="w-16 h-16 rounded-md bg-background-surface-selected border border-border-surface-default"></div>
-            <div class="text-center">
-              <span class="text-xs text-content-on-surface-primary block font-medium">selected</span>
-              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-surface-selected', this)">bg-background-surface-selected</code>
+        </div>
+
+        <div>
+          <h3 class="text-sm font-semibold text-content-on-surface-primary mb-1">Overlay Surfaces</h3>
+          <p class="text-xs text-content-on-surface-muted mb-3">Backdrop layers for transparent overlays and modal dimming. Token group: <code>overlay.surface</code></p>
+          <div class="flex flex-wrap gap-6">
+            <div class="flex flex-col items-center gap-1.5">
+              <div class="w-16 h-16 rounded-md bg-overlay-surface-transparent border border-border-surface-default"></div>
+              <div class="text-center">
+                <span class="text-xs text-content-on-surface-primary block font-medium">transparent</span>
+                <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-overlay-surface-transparent', this)">bg-overlay-surface-transparent</code>
+              </div>
+            </div>
+
+            <div class="flex flex-col items-center gap-1.5">
+              <div class="w-16 h-16 rounded-md bg-overlay-surface-modal-overlay border border-border-surface-default"></div>
+              <div class="text-center">
+                <span class="text-xs text-content-on-surface-primary block font-medium">modal overlay</span>
+                <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-overlay-surface-modal-overlay', this)">bg-overlay-surface-modal-overlay</code>
+              </div>
             </div>
           </div>
-          
-          <div class="flex flex-col items-center gap-1.5">
-            <div class="w-16 h-16 rounded-md bg-background-surface-inverse border border-border-surface-default"></div>
-            <div class="text-center">
-              <span class="text-xs text-content-on-surface-primary block font-medium">inverse</span>
-              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-surface-inverse', this)">bg-background-surface-inverse</code>
+        </div>
+
+        <div class="mt-8">
+          <h3 class="text-sm font-semibold text-content-on-surface-primary mb-1">Floating Surfaces</h3>
+          <p class="text-xs text-content-on-surface-muted mb-3">Top-layer containers for floating UI (menus, popovers) and modal/dialog surfaces.</p>
+          <div class="flex flex-wrap gap-6">
+            <div class="flex flex-col items-center gap-1.5">
+              <div class="w-16 h-16 rounded-md bg-background-surface-modal border border-border-surface-default shadow-lg"></div>
+              <div class="text-center">
+                <span class="text-xs text-content-on-surface-primary block font-medium">modal</span>
+                <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-surface-modal', this)">bg-background-surface-modal</code>
+              </div>
+            </div>
+
+            <div class="flex flex-col items-center gap-1.5">
+              <div class="w-16 h-16 rounded-md bg-background-surface-floating border border-border-surface-default shadow-xs"></div>
+              <div class="text-center">
+                <span class="text-xs text-content-on-surface-primary block font-medium">floating</span>
+                <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-surface-floating', this)">bg-background-surface-floating</code>
+              </div>
             </div>
           </div>
         </div>

package/src/theme/Extended.stories.ts

@@ -188,10 +188,10 @@ export const Extended5: Story = {
         </div>
         
         <div class="flex flex-col items-start gap-1.5">
-          <div class="w-16 h-16 rounded-md bg-extended-extended-53 border border-border-surface-default"></div>
+          <div class="w-16 h-16 rounded-md bg-extended-extended-5 border border-border-surface-default"></div>
           <div class="text-left">
             <span class="text-xs text-content-on-surface-primary block font-medium">extended-5</span>
-            <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-extended-extended-53', this)">bg-extended-extended-53</code>
+            <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-extended-extended-5', this)">bg-extended-extended-5</code>
           </div>
         </div>
       </div>
@@ -255,10 +255,10 @@ export const AllExtended: Story = {
           </div>
           
           <div class="flex flex-col items-center gap-1.5">
-            <div class="w-16 h-16 rounded-md bg-extended-extended-53 border border-border-surface-default"></div>
+            <div class="w-16 h-16 rounded-md bg-extended-extended-5 border border-border-surface-default"></div>
             <div class="text-center">
               <span class="text-xs text-content-on-surface-primary block font-medium">extended-5</span>
-              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-extended-extended-53', this)">bg-extended-extended-53</code>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-extended-extended-5', this)">bg-extended-extended-5</code>
             </div>
           </div>
         </div>

package/tokens.json

@@ -5029,6 +5029,15 @@
           }
         },
         "sand": {
+          "0": {
+            "value": "#fdfdfa",
+            "type": "color",
+            "$extensions": {
+              "com.figma.scopes": [
+                "ALL_SCOPES"
+              ]
+            }
+          },
           "25": {
             "value": "#f6f6f1",
             "type": "color",
@@ -5958,6 +5967,24 @@
             ]
           },
           "description": "Used in UI elements that have background color variable in light mode and input/30 variable in dark mode"
+        },
+        "floating": {
+          "value": "{colors.background.surface.floating-light}",
+          "type": "color",
+          "$extensions": {
+            "com.figma.scopes": [
+              "ALL_SCOPES"
+            ]
+          }
+        },
+        "modal": {
+          "value": "{colors.background.surface.modal-light}",
+          "type": "color",
+          "$extensions": {
+            "com.figma.scopes": [
+              "ALL_SCOPES"
+            ]
+          }
         }
       },
       "button": {
@@ -6297,6 +6324,16 @@
           ]
         },
         "description": "Data visualization colors"
+      },
+      "extended-5": {
+        "value": "{colors.extended.extended-5-light}",
+        "type": "color",
+        "$extensions": {
+          "com.figma.scopes": [
+            "ALL_SCOPES"
+          ]
+        },
+        "description": "Data visualization colors"
       }
     },
     "overlay": {
@@ -6430,6 +6467,24 @@
             ]
           },
           "description": "Used in UI elements that have background color variable in light mode and input/30 variable in dark mode"
+        },
+        "floating": {
+          "value": "{colors.background.surface.floating-dark}",
+          "type": "color",
+          "$extensions": {
+            "com.figma.scopes": [
+              "ALL_SCOPES"
+            ]
+          }
+        },
+        "modal": {
+          "value": "{colors.background.surface.modal-dark}",
+          "type": "color",
+          "$extensions": {
+            "com.figma.scopes": [
+              "ALL_SCOPES"
+            ]
+          }
         }
       },
       "button": {
@@ -6769,6 +6824,16 @@
           ]
         },
         "description": "Data visualization colors"
+      },
+      "extended-5": {
+        "value": "{colors.extended.extended-5-dark}",
+        "type": "color",
+        "$extensions": {
+          "com.figma.scopes": [
+            "ALL_SCOPES"
+          ]
+        },
+        "description": "Data visualization colors"
       }
     },
     "overlay": {
@@ -7035,6 +7100,42 @@
                 "SHAPE_FILL"
               ]
             }
+          },
+          "floating-light": {
+            "value": "{tailwind.colors.base.white}",
+            "type": "color",
+            "$extensions": {
+              "com.figma.scopes": [
+                "ALL_SCOPES"
+              ]
+            }
+          },
+          "floating-dark": {
+            "value": "{tailwind.colors.neutral.700}",
+            "type": "color",
+            "$extensions": {
+              "com.figma.scopes": [
+                "ALL_SCOPES"
+              ]
+            }
+          },
+          "modal-light": {
+            "value": "{tailwind.colors.neutral.50}",
+            "type": "color",
+            "$extensions": {
+              "com.figma.scopes": [
+                "ALL_SCOPES"
+              ]
+            }
+          },
+          "modal-dark": {
+            "value": "{tailwind.colors.neutral.800}",
+            "type": "color",
+            "$extensions": {
+              "com.figma.scopes": [
+                "ALL_SCOPES"
+              ]
+            }
           }
         },
         "input": {
@@ -9240,11 +9341,47 @@
                 "SHAPE_FILL"
               ]
             }
+          },
+          "floating-light": {
+            "value": "{aa.colors.sand.0}",
+            "type": "color",
+            "$extensions": {
+              "com.figma.scopes": [
+                "ALL_SCOPES"
+              ]
+            }
+          },
+          "floating-dark": {
+            "value": "{aa.colors.basalt.700}",
+            "type": "color",
+            "$extensions": {
+              "com.figma.scopes": [
+                "ALL_SCOPES"
+              ]
+            }
+          },
+          "modal-light": {
+            "value": "{aa.colors.sand.25}",
+            "type": "color",
+            "$extensions": {
+              "com.figma.scopes": [
+                "ALL_SCOPES"
+              ]
+            }
+          },
+          "modal-dark": {
+            "value": "{aa.colors.basalt.800}",
+            "type": "color",
+            "$extensions": {
+              "com.figma.scopes": [
+                "ALL_SCOPES"
+              ]
+            }
           }
         },
         "input": {
           "default-light": {
-            "value": "{aa.colors.alpha.white.50}",
+            "value": "{aa.colors.alpha.white.80}",
             "type": "color",
             "$extensions": {
               "com.figma.scopes": [
@@ -9254,7 +9391,7 @@
             }
           },
           "default-dark": {
-            "value": "{aa.colors.alpha.black.10}",
+            "value": "{aa.colors.alpha.black.20}",
             "type": "color",
             "$extensions": {
               "com.figma.scopes": [
@@ -9526,7 +9663,7 @@
             }
           },
           "error-dark": {
-            "value": "{aa.colors.red.100}",
+            "value": "{aa.colors.red.200}",
             "type": "color",
             "$extensions": {
               "com.figma.scopes": [
@@ -9535,7 +9672,7 @@
             }
           },
           "error-light": {
-            "value": "{aa.colors.red.800}",
+            "value": "{aa.colors.red.700}",
             "type": "color",
             "$extensions": {
               "com.figma.scopes": [
@@ -9658,7 +9795,7 @@
             }
           },
           "error-dark": {
-            "value": "{aa.colors.red.300}",
+            "value": "{aa.colors.red.200}",
             "type": "color",
             "$extensions": {
               "com.figma.scopes": [
@@ -9667,7 +9804,7 @@
             }
           },
           "error-light": {
-            "value": "{aa.colors.red.600}",
+            "value": "{aa.colors.red.700}",
             "type": "color",
             "$extensions": {
               "com.figma.scopes": [
@@ -9894,7 +10031,7 @@
             }
           },
           "modal-overlay-light": {
-            "value": "{aa.colors.sand.900}",
+            "value": "{aa.colors.alpha.black.60}",
             "type": "color",
             "$extensions": {
               "com.figma.scopes": [
@@ -9904,7 +10041,7 @@
             }
           },
           "modal-overlay-dark": {
-            "value": "{aa.colors.basalt.900}",
+            "value": "{aa.colors.alpha.black.60}",
             "type": "color",
             "$extensions": {
               "com.figma.scopes": [