added sliders

Author: zesameri

css/grid.css

@@ -114,6 +114,75 @@ h1 {
   gap: 8px;
   flex-wrap: wrap;
 }
+.tone-ramp-wrap {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border: 1px solid var(--panel-border);
+  border-radius: 4px;
+  background: var(--panel-bg);
+}
+.tone-ramp-label {
+  flex: 0 0 auto;
+  font-size: 12px;
+  color: var(--label);
+}
+.tone-ramp {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  gap: 4px;
+}
+.tone-ramp button {
+  flex: 1;
+  min-width: 0;
+  height: 28px;
+  border: 1px solid var(--swatch-item-border);
+  border-radius: 3px;
+  padding: 0;
+  cursor: pointer;
+  touch-action: manipulation;
+}
+.tone-ramp button[aria-selected="true"] {
+  outline: 2px solid var(--select-outline);
+  outline-offset: 2px;
+}
+.grid-sizing {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 16px;
+  padding: 8px 10px;
+  border: 1px solid var(--panel-border);
+  border-radius: 4px;
+  background: var(--panel-bg);
+}
+.grid-sizing-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1 1 180px;
+  min-width: 0;
+  font-size: 12px;
+  color: var(--label);
+  cursor: default;
+}
+.grid-sizing-label span {
+  flex: 0 0 6.5em;
+}
+.grid-sizing-label input[type="range"] {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  cursor: pointer;
+  accent-color: #c0c0c0;
+}
+.grid-sizing-label output {
+  flex: 0 0 2.5em;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  color: var(--muted);
+}
 .grid-wrap {
   width: 100%;
   aspect-ratio: 1;
@@ -132,11 +201,7 @@ table {
   user-select: none;
   -webkit-user-select: none;
 }
-tr {
-  height: calc(100% / 24);
-}
 td {
-  width: calc(100% / 24);
   padding: 0;
   border: 1px solid var(--cell-border);
   cursor: crosshair;

grid.html

@@ -48,6 +48,11 @@
     <symbol id="icon-square" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
       <rect width="18" height="18" x="3" y="3" rx="2"/>
     </symbol>
+    <symbol id="icon-ramp" viewBox="0 0 24 24" fill="currentColor" stroke="none">
+      <rect x="3" y="5" width="4" height="14" opacity="1"/>
+      <rect x="10" y="5" width="4" height="14" opacity="0.55"/>
+      <rect x="17" y="5" width="4" height="14" opacity="0.15"/>
+    </symbol>
     <symbol id="icon-save" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
       <path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/>
       <path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"/>
@@ -99,6 +104,9 @@ <h1>Color Grid</h1>
               <button type="button" class="tool tool-icon" id="dropperBtn" aria-label="Pick color" title="Pick color" aria-expanded="false" aria-haspopup="dialog">
                 <svg viewBox="0 0 24 24" aria-hidden="true"><use href="#icon-pipette"/></svg>
               </button>
+              <button type="button" class="tool tool-icon" id="rampBtn" aria-pressed="false" aria-label="Ramp to black" title="Ramp to black — drag on grid">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><use href="#icon-ramp"/></svg>
+              </button>
               <button type="button" class="tool tool-icon" id="eraserBtn" aria-pressed="false" aria-label="Eraser" title="Eraser">
                 <svg viewBox="0 0 24 24" aria-hidden="true"><use href="#icon-eraser"/></svg>
               </button>
@@ -113,6 +121,22 @@ <h1>Color Grid</h1>
               </button>
           </div>
         </div>
+        <div class="tone-ramp-wrap">
+          <span class="tone-ramp-label">To black</span>
+          <div class="tone-ramp" id="toneRamp" role="listbox" aria-label="Five steps from color to black"></div>
+        </div>
+        <div class="grid-sizing" aria-label="Silver grid sizing">
+          <label class="grid-sizing-label">
+            <span>Silver columns</span>
+            <input type="range" id="silverColSize" min="0.25" max="3" step="0.05" value="1" aria-valuemin="0.25" aria-valuemax="3" aria-valuenow="1">
+            <output id="silverColSizeVal" for="silverColSize">1×</output>
+          </label>
+          <label class="grid-sizing-label">
+            <span>Silver rows</span>
+            <input type="range" id="silverRowSize" min="0.25" max="3" step="0.05" value="1" aria-valuemin="0.25" aria-valuemax="3" aria-valuenow="1">
+            <output id="silverRowSizeVal" for="silverRowSize">1×</output>
+          </label>
+        </div>
       </section>
       <section class="palette-panel">
         <section class="recent-section" aria-label="Recently used colors">