@ponchia/ui 0.11.0 → 0.13.0

package/tokens/index.js

@@ -33,10 +33,17 @@ export const cssVars = {
     '--space-lg': '1.35rem',
     '--space-xl': '1.75rem',
     '--space-2xl': '2.5rem',
+    // Half steps on the 0.25rem unit, for dense tool chrome: 2, 3, 6 and 10px
+    // at a 16px root, the gaps a toolbar, a row or a node header needs and the
+    // t-shirt scale skips. Named by units, so --space-1-5 is 1.5 x --space-2xs.
+    '--space-0-5': '0.125rem',
+    '--space-0-75': '0.1875rem',
+    '--space-1-5': '0.375rem',
+    '--space-2-5': '0.625rem',
     // Tap targets. Both floors are clamped in px against the rem so they cannot
     // shrink below the standard when a host re-points the root font size —
-    // Bronto's own base sets `html { font-size: 0.9375rem }`, under which a bare
-    // 2.9rem is 43.5px, half a pixel short of the target floor.
+    // under a 15px root a bare 2.9rem is 43.5px, half a pixel short of the
+    // target floor.
     // `--tap-target` is the WCAG 2.5.5 (AAA) / iOS-HIG / Material 44px target
     // every coarse-pointer control floats to. `--tap-target-min` is the WCAG
     // 2.5.8 (AA) 24px minimum, for controls that only have to clear the smaller
@@ -85,6 +92,27 @@ export const cssVars = {
     '--z-overlay': '30',
     '--z-popover': '50',
     '--z-toast': '60',
+    // A workspace's named layers: a tool drawn over a canvas stacks chrome,
+    // panels, dialogs, menus, toasts, tooltips and presentation chrome. Where a
+    // page layer already means the same thing the workspace name aliases it,
+    // so the two scales cannot disagree. A menu sits above a dialog because a
+    // dialog opens menus; presentation chrome sits above everything it drives.
+    '--z-canvas': 'var(--z-base)',
+    '--z-chrome': 'var(--z-sticky)',
+    '--z-panel': '25',
+    '--z-modal': 'var(--z-overlay)',
+    '--z-menu': 'var(--z-popover)',
+    '--z-tooltip': '70',
+    '--z-navigation': '80',
+    // Zoom. --ui-px is one screen pixel. On a page these are plain px; inside
+    // a scaled surface marked [data-ui-zoom] (css/tokens.css) they are
+    // re-declared in --ui-px, 1px divided by the host's --ui-zoom, so hairlines
+    // and focus rings stay visible zoomed out and crisp zoomed in.
+    '--ui-zoom': '1',
+    '--ui-px': '1px',
+    '--hairline': '1px',
+    '--focus-ring-width': '2px',
+    '--focus-ring-offset': '2px',
     '--accent-1': 'color-mix(in oklch, var(--accent) 8%, var(--accent-ramp-end))',
     '--accent-2': 'color-mix(in oklch, var(--accent) 16%, var(--accent-ramp-end))',
     '--accent-3': 'color-mix(in oklch, var(--accent) 32%, var(--accent-ramp-end))',

package/tokens/index.json

@@ -14,6 +14,10 @@
       "--space-lg": "1.35rem",
       "--space-xl": "1.75rem",
       "--space-2xl": "2.5rem",
+      "--space-0-5": "0.125rem",
+      "--space-0-75": "0.1875rem",
+      "--space-1-5": "0.375rem",
+      "--space-2-5": "0.625rem",
       "--tap-target": "max(44px, 2.9rem)",
       "--tap-target-min": "max(24px, 1.6rem)",
       "--safe-area-top": "env(safe-area-inset-top, 0px)",
@@ -48,6 +52,18 @@
       "--z-overlay": "30",
       "--z-popover": "50",
       "--z-toast": "60",
+      "--z-canvas": "var(--z-base)",
+      "--z-chrome": "var(--z-sticky)",
+      "--z-panel": "25",
+      "--z-modal": "var(--z-overlay)",
+      "--z-menu": "var(--z-popover)",
+      "--z-tooltip": "70",
+      "--z-navigation": "80",
+      "--ui-zoom": "1",
+      "--ui-px": "1px",
+      "--hairline": "1px",
+      "--focus-ring-width": "2px",
+      "--focus-ring-offset": "2px",
       "--accent-1": "color-mix(in oklch, var(--accent) 8%, var(--accent-ramp-end))",
       "--accent-2": "color-mix(in oklch, var(--accent) 16%, var(--accent-ramp-end))",
       "--accent-3": "color-mix(in oklch, var(--accent) 32%, var(--accent-ramp-end))",
@@ -165,6 +181,10 @@
       "space-lg": "1.35rem",
       "space-xl": "1.75rem",
       "space-2xl": "2.5rem",
+      "space-0-5": "0.125rem",
+      "space-0-75": "0.1875rem",
+      "space-1-5": "0.375rem",
+      "space-2-5": "0.625rem",
       "tap-target": "max(44px, 2.9rem)",
       "tap-target-min": "max(24px, 1.6rem)",
       "safe-area-top": "env(safe-area-inset-top, 0px)",
@@ -199,6 +219,18 @@
       "z-overlay": "30",
       "z-popover": "50",
       "z-toast": "60",
+      "z-canvas": "var(--z-base)",
+      "z-chrome": "var(--z-sticky)",
+      "z-panel": "25",
+      "z-modal": "var(--z-overlay)",
+      "z-menu": "var(--z-popover)",
+      "z-tooltip": "70",
+      "z-navigation": "80",
+      "ui-zoom": "1",
+      "ui-px": "1px",
+      "hairline": "1px",
+      "focus-ring-width": "2px",
+      "focus-ring-offset": "2px",
       "accent-1": "color-mix(in oklch, var(--accent) 8%, var(--accent-ramp-end))",
       "accent-2": "color-mix(in oklch, var(--accent) 16%, var(--accent-ramp-end))",
       "accent-3": "color-mix(in oklch, var(--accent) 32%, var(--accent-ramp-end))",

package/tokens/mermaid.js

@@ -60,34 +60,34 @@ export const mermaid = {
     tagLabelColor: '#0a0a0a',
     tagLabelBackground: '#ececea',
     tagLabelBorder: '#d8d8d4',
-    pie1: '#d71921',
-    pie2: '#e69f00',
-    pie3: '#56b4e9',
-    pie4: '#009e73',
-    pie5: '#f0e442',
-    pie6: '#0072b2',
-    pie7: '#cc79a7',
-    pie8: '#4d5358',
-    pie9: '#d71921',
-    pie10: '#e69f00',
-    pie11: '#56b4e9',
-    pie12: '#009e73',
-    git0: '#d71921',
-    git1: '#e69f00',
-    git2: '#56b4e9',
-    git3: '#009e73',
-    git4: '#f0e442',
-    git5: '#0072b2',
-    git6: '#cc79a7',
-    git7: '#4d5358',
-    fillType0: '#d71921',
-    fillType1: '#e69f00',
-    fillType2: '#56b4e9',
-    fillType3: '#009e73',
-    fillType4: '#f0e442',
-    fillType5: '#0072b2',
-    fillType6: '#cc79a7',
-    fillType7: '#4d5358',
+    pie1: '#2a78d6',
+    pie2: '#eb6834',
+    pie3: '#1baf7a',
+    pie4: '#eda100',
+    pie5: '#e87ba4',
+    pie6: '#008300',
+    pie7: '#4a3aa7',
+    pie8: '#e34948',
+    pie9: '#2a78d6',
+    pie10: '#eb6834',
+    pie11: '#1baf7a',
+    pie12: '#eda100',
+    git0: '#2a78d6',
+    git1: '#eb6834',
+    git2: '#1baf7a',
+    git3: '#eda100',
+    git4: '#e87ba4',
+    git5: '#008300',
+    git6: '#4a3aa7',
+    git7: '#e34948',
+    fillType0: '#2a78d6',
+    fillType1: '#eb6834',
+    fillType2: '#1baf7a',
+    fillType3: '#eda100',
+    fillType4: '#e87ba4',
+    fillType5: '#008300',
+    fillType6: '#4a3aa7',
+    fillType7: '#e34948',
   },
   dark: {
     darkMode: true,
@@ -141,34 +141,34 @@ export const mermaid = {
     tagLabelColor: '#e6e6e6',
     tagLabelBackground: '#242424',
     tagLabelBorder: '#383838',
-    pie1: '#ff3b41',
-    pie2: '#e69f00',
-    pie3: '#56b4e9',
-    pie4: '#009e73',
-    pie5: '#f0e442',
-    pie6: '#0072b2',
-    pie7: '#cc79a7',
-    pie8: '#4d5358',
-    pie9: '#ff3b41',
-    pie10: '#e69f00',
-    pie11: '#56b4e9',
-    pie12: '#009e73',
-    git0: '#ff3b41',
-    git1: '#e69f00',
-    git2: '#56b4e9',
-    git3: '#009e73',
-    git4: '#f0e442',
-    git5: '#0072b2',
-    git6: '#cc79a7',
-    git7: '#4d5358',
-    fillType0: '#ff3b41',
-    fillType1: '#e69f00',
-    fillType2: '#56b4e9',
-    fillType3: '#009e73',
-    fillType4: '#f0e442',
-    fillType5: '#0072b2',
-    fillType6: '#cc79a7',
-    fillType7: '#4d5358',
+    pie1: '#3987e5',
+    pie2: '#d95926',
+    pie3: '#199e70',
+    pie4: '#c98500',
+    pie5: '#d55181',
+    pie6: '#008300',
+    pie7: '#9085e9',
+    pie8: '#e66767',
+    pie9: '#3987e5',
+    pie10: '#d95926',
+    pie11: '#199e70',
+    pie12: '#c98500',
+    git0: '#3987e5',
+    git1: '#d95926',
+    git2: '#199e70',
+    git3: '#c98500',
+    git4: '#d55181',
+    git5: '#008300',
+    git6: '#9085e9',
+    git7: '#e66767',
+    fillType0: '#3987e5',
+    fillType1: '#d95926',
+    fillType2: '#199e70',
+    fillType3: '#c98500',
+    fillType4: '#d55181',
+    fillType5: '#008300',
+    fillType6: '#9085e9',
+    fillType7: '#e66767',
   },
 };
 

package/tokens/mermaid.json

@@ -51,34 +51,34 @@
     "tagLabelColor": "#0a0a0a",
     "tagLabelBackground": "#ececea",
     "tagLabelBorder": "#d8d8d4",
-    "pie1": "#d71921",
-    "pie2": "#e69f00",
-    "pie3": "#56b4e9",
-    "pie4": "#009e73",
-    "pie5": "#f0e442",
-    "pie6": "#0072b2",
-    "pie7": "#cc79a7",
-    "pie8": "#4d5358",
-    "pie9": "#d71921",
-    "pie10": "#e69f00",
-    "pie11": "#56b4e9",
-    "pie12": "#009e73",
-    "git0": "#d71921",
-    "git1": "#e69f00",
-    "git2": "#56b4e9",
-    "git3": "#009e73",
-    "git4": "#f0e442",
-    "git5": "#0072b2",
-    "git6": "#cc79a7",
-    "git7": "#4d5358",
-    "fillType0": "#d71921",
-    "fillType1": "#e69f00",
-    "fillType2": "#56b4e9",
-    "fillType3": "#009e73",
-    "fillType4": "#f0e442",
-    "fillType5": "#0072b2",
-    "fillType6": "#cc79a7",
-    "fillType7": "#4d5358"
+    "pie1": "#2a78d6",
+    "pie2": "#eb6834",
+    "pie3": "#1baf7a",
+    "pie4": "#eda100",
+    "pie5": "#e87ba4",
+    "pie6": "#008300",
+    "pie7": "#4a3aa7",
+    "pie8": "#e34948",
+    "pie9": "#2a78d6",
+    "pie10": "#eb6834",
+    "pie11": "#1baf7a",
+    "pie12": "#eda100",
+    "git0": "#2a78d6",
+    "git1": "#eb6834",
+    "git2": "#1baf7a",
+    "git3": "#eda100",
+    "git4": "#e87ba4",
+    "git5": "#008300",
+    "git6": "#4a3aa7",
+    "git7": "#e34948",
+    "fillType0": "#2a78d6",
+    "fillType1": "#eb6834",
+    "fillType2": "#1baf7a",
+    "fillType3": "#eda100",
+    "fillType4": "#e87ba4",
+    "fillType5": "#008300",
+    "fillType6": "#4a3aa7",
+    "fillType7": "#e34948"
   },
   "dark": {
     "darkMode": true,
@@ -131,33 +131,33 @@
     "tagLabelColor": "#e6e6e6",
     "tagLabelBackground": "#242424",
     "tagLabelBorder": "#383838",
-    "pie1": "#ff3b41",
-    "pie2": "#e69f00",
-    "pie3": "#56b4e9",
-    "pie4": "#009e73",
-    "pie5": "#f0e442",
-    "pie6": "#0072b2",
-    "pie7": "#cc79a7",
-    "pie8": "#4d5358",
-    "pie9": "#ff3b41",
-    "pie10": "#e69f00",
-    "pie11": "#56b4e9",
-    "pie12": "#009e73",
-    "git0": "#ff3b41",
-    "git1": "#e69f00",
-    "git2": "#56b4e9",
-    "git3": "#009e73",
-    "git4": "#f0e442",
-    "git5": "#0072b2",
-    "git6": "#cc79a7",
-    "git7": "#4d5358",
-    "fillType0": "#ff3b41",
-    "fillType1": "#e69f00",
-    "fillType2": "#56b4e9",
-    "fillType3": "#009e73",
-    "fillType4": "#f0e442",
-    "fillType5": "#0072b2",
-    "fillType6": "#cc79a7",
-    "fillType7": "#4d5358"
+    "pie1": "#3987e5",
+    "pie2": "#d95926",
+    "pie3": "#199e70",
+    "pie4": "#c98500",
+    "pie5": "#d55181",
+    "pie6": "#008300",
+    "pie7": "#9085e9",
+    "pie8": "#e66767",
+    "pie9": "#3987e5",
+    "pie10": "#d95926",
+    "pie11": "#199e70",
+    "pie12": "#c98500",
+    "git0": "#3987e5",
+    "git1": "#d95926",
+    "git2": "#199e70",
+    "git3": "#c98500",
+    "git4": "#d55181",
+    "git5": "#008300",
+    "git6": "#9085e9",
+    "git7": "#e66767",
+    "fillType0": "#3987e5",
+    "fillType1": "#d95926",
+    "fillType2": "#199e70",
+    "fillType3": "#c98500",
+    "fillType4": "#d55181",
+    "fillType5": "#008300",
+    "fillType6": "#9085e9",
+    "fillType7": "#e66767"
   }
 }

package/tokens/resolved.json

@@ -141,6 +141,10 @@
     "--space-lg": "1.35rem",
     "--space-xl": "1.75rem",
     "--space-2xl": "2.5rem",
+    "--space-0-5": "0.125rem",
+    "--space-0-75": "0.1875rem",
+    "--space-1-5": "0.375rem",
+    "--space-2-5": "0.625rem",
     "--tap-target": "max(44px, 2.9rem)",
     "--tap-target-min": "max(24px, 1.6rem)",
     "--safe-area-top": "env(safe-area-inset-top, 0px)",
@@ -174,6 +178,18 @@
     "--z-sticky": "20",
     "--z-overlay": "30",
     "--z-popover": "50",
-    "--z-toast": "60"
+    "--z-toast": "60",
+    "--z-canvas": "0",
+    "--z-chrome": "20",
+    "--z-panel": "25",
+    "--z-modal": "30",
+    "--z-menu": "50",
+    "--z-tooltip": "70",
+    "--z-navigation": "80",
+    "--ui-zoom": "1",
+    "--ui-px": "1px",
+    "--hairline": "1px",
+    "--focus-ring-width": "2px",
+    "--focus-ring-offset": "2px"
   }
 }

package/tokens/tokens.dtcg.json

@@ -179,6 +179,58 @@
             "authoredValue": "2.5rem"
           }
         }
+      },
+      "0-5": {
+        "$type": "dimension",
+        "$value": {
+          "value": 0.125,
+          "unit": "rem"
+        },
+        "$extensions": {
+          "com.ponchia.css": {
+            "variable": "--space-0-5",
+            "authoredValue": "0.125rem"
+          }
+        }
+      },
+      "0-75": {
+        "$type": "dimension",
+        "$value": {
+          "value": 0.1875,
+          "unit": "rem"
+        },
+        "$extensions": {
+          "com.ponchia.css": {
+            "variable": "--space-0-75",
+            "authoredValue": "0.1875rem"
+          }
+        }
+      },
+      "1-5": {
+        "$type": "dimension",
+        "$value": {
+          "value": 0.375,
+          "unit": "rem"
+        },
+        "$extensions": {
+          "com.ponchia.css": {
+            "variable": "--space-1-5",
+            "authoredValue": "0.375rem"
+          }
+        }
+      },
+      "2-5": {
+        "$type": "dimension",
+        "$value": {
+          "value": 0.625,
+          "unit": "rem"
+        },
+        "$extensions": {
+          "com.ponchia.css": {
+            "variable": "--space-2-5",
+            "authoredValue": "0.625rem"
+          }
+        }
       }
     },
     "mono": {
@@ -534,6 +586,144 @@
             "authoredValue": "60"
           }
         }
+      },
+      "canvas": {
+        "$type": "number",
+        "$value": 0,
+        "$extensions": {
+          "com.ponchia.css": {
+            "variable": "--z-canvas",
+            "authoredValue": "var(--z-base)"
+          }
+        }
+      },
+      "chrome": {
+        "$type": "number",
+        "$value": 20,
+        "$extensions": {
+          "com.ponchia.css": {
+            "variable": "--z-chrome",
+            "authoredValue": "var(--z-sticky)"
+          }
+        }
+      },
+      "panel": {
+        "$type": "number",
+        "$value": 25,
+        "$extensions": {
+          "com.ponchia.css": {
+            "variable": "--z-panel",
+            "authoredValue": "25"
+          }
+        }
+      },
+      "modal": {
+        "$type": "number",
+        "$value": 30,
+        "$extensions": {
+          "com.ponchia.css": {
+            "variable": "--z-modal",
+            "authoredValue": "var(--z-overlay)"
+          }
+        }
+      },
+      "menu": {
+        "$type": "number",
+        "$value": 50,
+        "$extensions": {
+          "com.ponchia.css": {
+            "variable": "--z-menu",
+            "authoredValue": "var(--z-popover)"
+          }
+        }
+      },
+      "tooltip": {
+        "$type": "number",
+        "$value": 70,
+        "$extensions": {
+          "com.ponchia.css": {
+            "variable": "--z-tooltip",
+            "authoredValue": "70"
+          }
+        }
+      },
+      "navigation": {
+        "$type": "number",
+        "$value": 80,
+        "$extensions": {
+          "com.ponchia.css": {
+            "variable": "--z-navigation",
+            "authoredValue": "80"
+          }
+        }
+      }
+    },
+    "ui": {
+      "zoom": {
+        "$type": "number",
+        "$value": 1,
+        "$extensions": {
+          "com.ponchia.css": {
+            "variable": "--ui-zoom",
+            "authoredValue": "1"
+          }
+        }
+      },
+      "px": {
+        "$type": "dimension",
+        "$value": {
+          "value": 1,
+          "unit": "px"
+        },
+        "$extensions": {
+          "com.ponchia.css": {
+            "variable": "--ui-px",
+            "authoredValue": "1px"
+          }
+        }
+      }
+    },
+    "hairline": {
+      "DEFAULT": {
+        "$type": "dimension",
+        "$value": {
+          "value": 1,
+          "unit": "px"
+        },
+        "$extensions": {
+          "com.ponchia.css": {
+            "variable": "--hairline",
+            "authoredValue": "1px"
+          }
+        }
+      }
+    },
+    "focus": {
+      "ring-width": {
+        "$type": "dimension",
+        "$value": {
+          "value": 2,
+          "unit": "px"
+        },
+        "$extensions": {
+          "com.ponchia.css": {
+            "variable": "--focus-ring-width",
+            "authoredValue": "2px"
+          }
+        }
+      },
+      "ring-offset": {
+        "$type": "dimension",
+        "$value": {
+          "value": 2,
+          "unit": "px"
+        },
+        "$extensions": {
+          "com.ponchia.css": {
+            "variable": "--focus-ring-offset",
+            "authoredValue": "2px"
+          }
+        }
       }
     }
   },

package/tokens/vega.d.ts

@@ -23,11 +23,11 @@ export declare const vega: { light: VegaConfig; dark: VegaConfig };
  *  back to light. Spread into a spec's `config`, or pass to vega-embed. */
 export declare function brontoVegaConfig(theme?: 'light' | 'dark'): VegaConfig;
 
-/** The resolved accent hex (series 1 of `range.category`) for a theme — to spend the
- *  accent on one emphasised mark without hard-coding the palette index. */
+/** The resolved accent hex for a theme — to spend the accent on one emphasised
+ *  mark while the other marks stay neutral. */
 export declare function brontoVegaAccent(theme?: 'light' | 'dark'): string;
 
-/** The neutral series hex (last of `range.category`) for a theme. */
+/** The neutral ink hex for a theme (`--text-dim`). */
 export declare function brontoVegaNeutral(theme?: 'light' | 'dark'): string;
 
 declare const _default: typeof brontoVegaConfig;