@ponchia/ui 0.12.0 → 0.13.0

package/tokens/index.d.ts

@@ -3,7 +3,7 @@
 
 export type ThemeName = 'light' | 'dark';
 
-export type GlobalTokenName = '--radius-xl' | '--radius-lg' | '--radius-md' | '--radius-sm' | '--radius-pill' | '--space-2xs' | '--space-xs' | '--space-sm' | '--space-md' | '--space-lg' | '--space-xl' | '--space-2xl' | '--tap-target' | '--tap-target-min' | '--safe-area-top' | '--safe-area-right' | '--safe-area-bottom' | '--safe-area-left' | '--mono' | '--sans' | '--dot-font' | '--display' | '--display-weight' | '--display-weight-strong' | '--text-2xs' | '--text-xs' | '--text-sm' | '--text-base' | '--text-lg' | '--text-xl' | '--tracking-wide' | '--tracking-wider' | '--ease-standard' | '--ease-spring' | '--ease-out' | '--duration-fast' | '--duration-base' | '--duration-slow' | '--dot-size' | '--dot-gap' | '--z-base' | '--z-raised' | '--z-sticky' | '--z-overlay' | '--z-popover' | '--z-toast' | '--accent-1' | '--accent-2' | '--accent-3' | '--accent-4' | '--accent-5' | '--accent-6' | '--surface-1' | '--surface-2' | '--surface-3' | '--surface-4' | '--surface-5' | '--surface-6' | '--bronto-color-bg' | '--bronto-color-surface' | '--bronto-color-surface-raised' | '--bronto-color-border' | '--bronto-color-border-strong' | '--bronto-color-text' | '--bronto-color-text-muted' | '--bronto-color-action' | '--bronto-color-on-action' | '--bronto-color-focus' | '--bronto-color-success' | '--bronto-color-warning' | '--bronto-color-danger' | '--bronto-color-info' | '--surface' | '--surface-raised' | '--surface-muted' | '--border' | '--border-strong';
+export type GlobalTokenName = '--radius-xl' | '--radius-lg' | '--radius-md' | '--radius-sm' | '--radius-pill' | '--space-2xs' | '--space-xs' | '--space-sm' | '--space-md' | '--space-lg' | '--space-xl' | '--space-2xl' | '--space-0-5' | '--space-0-75' | '--space-1-5' | '--space-2-5' | '--tap-target' | '--tap-target-min' | '--safe-area-top' | '--safe-area-right' | '--safe-area-bottom' | '--safe-area-left' | '--mono' | '--sans' | '--dot-font' | '--display' | '--display-weight' | '--display-weight-strong' | '--text-2xs' | '--text-xs' | '--text-sm' | '--text-base' | '--text-lg' | '--text-xl' | '--tracking-wide' | '--tracking-wider' | '--ease-standard' | '--ease-spring' | '--ease-out' | '--duration-fast' | '--duration-base' | '--duration-slow' | '--dot-size' | '--dot-gap' | '--z-base' | '--z-raised' | '--z-sticky' | '--z-overlay' | '--z-popover' | '--z-toast' | '--z-canvas' | '--z-chrome' | '--z-panel' | '--z-modal' | '--z-menu' | '--z-tooltip' | '--z-navigation' | '--ui-zoom' | '--ui-px' | '--hairline' | '--focus-ring-width' | '--focus-ring-offset' | '--accent-1' | '--accent-2' | '--accent-3' | '--accent-4' | '--accent-5' | '--accent-6' | '--surface-1' | '--surface-2' | '--surface-3' | '--surface-4' | '--surface-5' | '--surface-6' | '--bronto-color-bg' | '--bronto-color-surface' | '--bronto-color-surface-raised' | '--bronto-color-border' | '--bronto-color-border-strong' | '--bronto-color-text' | '--bronto-color-text-muted' | '--bronto-color-action' | '--bronto-color-on-action' | '--bronto-color-focus' | '--bronto-color-success' | '--bronto-color-warning' | '--bronto-color-danger' | '--bronto-color-info' | '--surface' | '--surface-raised' | '--surface-muted' | '--border' | '--border-strong';
 export type LightTokenName = '--bg' | '--bg-elevated' | '--bg-accent' | '--panel' | '--panel-strong' | '--panel-soft' | '--line' | '--line-strong' | '--text' | '--text-soft' | '--text-dim' | '--accent' | '--accent-ramp-end' | '--accent-strong' | '--accent-text' | '--on-accent' | '--accent-soft' | '--success' | '--success-soft' | '--warning' | '--warning-soft' | '--danger' | '--danger-soft' | '--info' | '--info-soft' | '--code-bg' | '--button-text' | '--field-dot' | '--field-dot-hot' | '--field-dot-accent' | '--focus-ring' | '--shadow' | '--shadow-raised';
 export type DarkTokenName = '--bg' | '--bg-elevated' | '--bg-accent' | '--panel' | '--panel-strong' | '--panel-soft' | '--line' | '--line-strong' | '--text' | '--text-soft' | '--text-dim' | '--accent' | '--accent-ramp-end' | '--accent-strong' | '--accent-text' | '--on-accent' | '--accent-soft' | '--success' | '--success-soft' | '--warning' | '--warning-soft' | '--danger' | '--danger-soft' | '--info' | '--info-soft' | '--code-bg' | '--button-text' | '--field-dot' | '--field-dot-hot' | '--field-dot-accent' | '--focus-ring' | '--shadow' | '--shadow-raised';
 
@@ -14,7 +14,7 @@ export declare const cssVars: {
   dark: Record<DarkTokenName, string>;
 };
 
-export type ScaleKey = 'radius-xl' | 'radius-lg' | 'radius-md' | 'radius-sm' | 'radius-pill' | 'space-2xs' | 'space-xs' | 'space-sm' | 'space-md' | 'space-lg' | 'space-xl' | 'space-2xl' | 'tap-target' | 'tap-target-min' | 'safe-area-top' | 'safe-area-right' | 'safe-area-bottom' | 'safe-area-left' | 'mono' | 'sans' | 'dot-font' | 'display' | 'display-weight' | 'display-weight-strong' | 'text-2xs' | 'text-xs' | 'text-sm' | 'text-base' | 'text-lg' | 'text-xl' | 'tracking-wide' | 'tracking-wider' | 'ease-standard' | 'ease-spring' | 'ease-out' | 'duration-fast' | 'duration-base' | 'duration-slow' | 'dot-size' | 'dot-gap' | 'z-base' | 'z-raised' | 'z-sticky' | 'z-overlay' | 'z-popover' | 'z-toast' | 'accent-1' | 'accent-2' | 'accent-3' | 'accent-4' | 'accent-5' | 'accent-6' | 'surface-1' | 'surface-2' | 'surface-3' | 'surface-4' | 'surface-5' | 'surface-6' | 'bronto-color-bg' | 'bronto-color-surface' | 'bronto-color-surface-raised' | 'bronto-color-border' | 'bronto-color-border-strong' | 'bronto-color-text' | 'bronto-color-text-muted' | 'bronto-color-action' | 'bronto-color-on-action' | 'bronto-color-focus' | 'bronto-color-success' | 'bronto-color-warning' | 'bronto-color-danger' | 'bronto-color-info' | 'surface' | 'surface-raised' | 'surface-muted' | 'border' | 'border-strong';
+export type ScaleKey = 'radius-xl' | 'radius-lg' | 'radius-md' | 'radius-sm' | 'radius-pill' | 'space-2xs' | 'space-xs' | 'space-sm' | 'space-md' | 'space-lg' | 'space-xl' | 'space-2xl' | 'space-0-5' | 'space-0-75' | 'space-1-5' | 'space-2-5' | 'tap-target' | 'tap-target-min' | 'safe-area-top' | 'safe-area-right' | 'safe-area-bottom' | 'safe-area-left' | 'mono' | 'sans' | 'dot-font' | 'display' | 'display-weight' | 'display-weight-strong' | 'text-2xs' | 'text-xs' | 'text-sm' | 'text-base' | 'text-lg' | 'text-xl' | 'tracking-wide' | 'tracking-wider' | 'ease-standard' | 'ease-spring' | 'ease-out' | 'duration-fast' | 'duration-base' | 'duration-slow' | 'dot-size' | 'dot-gap' | 'z-base' | 'z-raised' | 'z-sticky' | 'z-overlay' | 'z-popover' | 'z-toast' | 'z-canvas' | 'z-chrome' | 'z-panel' | 'z-modal' | 'z-menu' | 'z-tooltip' | 'z-navigation' | 'ui-zoom' | 'ui-px' | 'hairline' | 'focus-ring-width' | 'focus-ring-offset' | 'accent-1' | 'accent-2' | 'accent-3' | 'accent-4' | 'accent-5' | 'accent-6' | 'surface-1' | 'surface-2' | 'surface-3' | 'surface-4' | 'surface-5' | 'surface-6' | 'bronto-color-bg' | 'bronto-color-surface' | 'bronto-color-surface-raised' | 'bronto-color-border' | 'bronto-color-border-strong' | 'bronto-color-text' | 'bronto-color-text-muted' | 'bronto-color-action' | 'bronto-color-on-action' | 'bronto-color-focus' | 'bronto-color-success' | 'bronto-color-warning' | 'bronto-color-danger' | 'bronto-color-info' | 'surface' | 'surface-raised' | 'surface-muted' | 'border' | 'border-strong';
 export type ColorKey = 'bg' | 'bg-elevated' | 'bg-accent' | 'panel' | 'panel-strong' | 'panel-soft' | 'line' | 'line-strong' | 'text' | 'text-soft' | 'text-dim' | 'accent' | 'accent-ramp-end' | 'accent-strong' | 'accent-text' | 'on-accent' | 'accent-soft' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'danger' | 'danger-soft' | 'info' | 'info-soft' | 'code-bg' | 'button-text' | 'field-dot' | 'field-dot-hot' | 'field-dot-accent' | 'focus-ring' | 'shadow' | 'shadow-raised';
 
 /** Ergonomic view derived from {@link cssVars} (`--` prefix stripped). */

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/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"
+          }
+        }
       }
     }
   },