feat: Make spacing configurable Using spacing size tokens brings consistency and prevents future patches from breaking aesthetics (also less review cost).

Changes

11 changed files (+67/-35)

• src/styles.ts
  • @@ -33,11 +33,27 @@ --font-family-sans: var(--figspec-font-family-sans, system-ui, ui-sans-serif, sans-serif);
    --font-family-mono: var(--figspec-font-family-mono, monospace); --font-size: var(--figspec-font-size, 1rem); + /* Spacing */ + --spacing-base: var(--figspec-spacing-base, 10px); + --spacing-scale: var(--figspec-spacing-scale, 1.25); + + --spacing_0: var(--figspec-spacing_0, var(--spacing-base)); + --spacing_1: var(--figspec_spacing_1, calc(var(--spacing_0) * var(--spacing-scale))); + --spacing_2: var(--figspec_spacing_2, calc(var(--spacing_1) * var(--spacing-scale))); + --spacing_3: var(--figspec_spacing_3, calc(var(--spacing_2) * var(--spacing-scale))); + --spacing_4: var(--figspec_spacing_4, calc(var(--spacing_3) * var(--spacing-scale))); + --spacing_5: var(--figspec_spacing_5, calc(var(--spacing_4) * var(--spacing-scale))); + --spacing_-1: var(--figspec_spacing_-1, calc(var(--spacing_0) / var(--spacing-scale))); + --spacing_-2: var(--figspec_spacing_-2, calc(var(--spacing_-1) / var(--spacing-scale))); + --spacing_-3: var(--figspec_spacing_-3, calc(var(--spacing_-2) / var(--spacing-scale))); + --spacing_-4: var(--figspec_spacing_-4, calc(var(--spacing_-3) / var(--spacing-scale))); + --spacing_-5: var(--figspec_spacing_-5, calc(var(--spacing_-4) / var(--spacing-scale))); + /* Action */ --default-action-overlay: rgb(var(--color-gray-8) / 0.1); --default-action-border: rgb(var(--color-gray-5) / 0.5); - --default-action-horizontal-padding: 6px; - --default-action-vertical-padding: 4px; + --default-action-horizontal-padding: var(--spacing_-1); + --default-action-vertical-padding: var(--spacing_-2); --action-overlay: var(--figspec-action-overlay, var(--default-action-overlay)); --action-border: var(--figspec-action-border, var(--default-action-border));
  • @@ -101,8 +117,8 @@ --snackbar-radius: var(--figspec-snackbar-radius, 6px);
    --snackbar-font-size: var(--figspec-snackbar-font-size, calc(var(--font-size) * 0.9)); --snackbar-font-family: var(--figspec-snackbar-font-family, var(--font-family-sans)); --snackbar-shadow: var(--figspec-snackbar-shadow, 0 1px 3px rgb(0 0 0 / 0.3)); - --snackbar-margin: var(--figspec-snackbar-margin, 2px 4px); - --snackbar-padding: var(--figspec-snackbar-padding, 4px 8px); + --snackbar-margin: var(--figspec-snackbar-margin, var(--spacing_-3) var(--spacing_-2)); + --snackbar-padding: var(--figspec-snackbar-padding, var(--spacing_-2) var(--spacing_0)); --snackbar-border: var(--figspec-snackbar-border, none); --guide-thickness: var(--figspec-guide-thickness, 1.5px);
  • @@ -164,8 +180,8 @@ }
    @media (pointer: coarse) { :host { - --default-action-horizontal-padding: 8px; - --default-action-vertical-padding: 6px; + --default-action-horizontal-padding: var(--spacing_0); + --default-action-vertical-padding: var(--spacing_-1); } } `;
• src/ui/empty/empty.ts
  • @@ -5,11 +5,11 @@ export const styles = /* css */ `
    .em-container { margin: 0 auto; max-width: calc(var(--font-size) * 30); - margin-top: calc(var(--font-size) * 2); + margin-top: var(--spacing_3); display: flex; flex-direction: column; align-items: flex-start; - gap: 1em; + gap: var(--spacing_2); user-select: text; }
  • @@ -28,7 +28,7 @@ width: 100%;
    } .em-body p { margin: 0; - margin-bottom: calc(var(--font-size) * 1); + margin-bottom: var(--spacing_1); font-size: calc(var(--font-size) * 1); color: var(--subtle-fg);
  • @@ -39,7 +39,7 @@ display: block;
    width: 100%; font-family: var(--font-family-mono); font-size: calc(var(--font-size) * 0.9); - padding: 8px; + padding: var(--spacing_0); tab-size: 2; background-color: var(--code-bg);
• src/ui/fullscreenPanel/fullscreenPanel.ts
  • @@ -17,8 +17,8 @@ }
    .fp-close { position: absolute; - right: 8px; - top: 8px; + right: var(--spacing_-1); + top: var(--spacing_-1); background-color: inherit; border-radius: var(--panel-radii);
  • @@ -37,7 +37,7 @@
    .fp-body { max-width: 100%; max-height: 100%; - padding: 16px; + padding: var(--spacing_1); box-sizing: border-box; overflow-y: auto;
• src/ui/infoItems/infoItems.ts
  • @@ -11,7 +11,7 @@
    .ii-label { padding: 0; margin: 0; - margin-bottom: 4px; + margin-bottom: var(--spacing_-5); font-size: calc(var(--font-size) * 0.8); font-weight: bold;
  • @@ -21,7 +21,7 @@
    .ii-content { padding: 0; margin: 0; - margin-bottom: 24px; + margin-bottom: var(--spacing_3); font-size: var(--font-size); font-weight: normal;
• src/ui/inspectorPanel/cssCode.ts
  • @@ -11,7 +11,7 @@
    export const styles = /* css */ ` .cc-container { margin: 0; - padding: 8px; + padding: var(--spacing_-1); background: var(--code-bg); border-radius: var(--panel-radii);
  • @@ -33,7 +33,7 @@ display: inline-flex;
    width: var(--_size); height: var(--_size); border-radius: calc(var(--_size) / 6); - margin: 0 4px; + margin: 0 var(--spacing_-5); background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><rect x="0" y="0" width="10" height="10" fill="%23fff" /><rect x="5" y="0" width="5" height="5" fill="%23ccc" /><rect x="0" y="5" width="5" height="5" fill="%23ccc" /></svg>'); overflow: hidden;
• src/ui/inspectorPanel/inspectorPanel.ts
  • @@ -30,7 +30,7 @@ outline: none;
    } .ip-section { - padding: 16px; + padding: var(--spacing_1); border-bottom: var(--panel-border); }
  • @@ -38,7 +38,7 @@ .ip-section-heading {
    display: flex; align-items: center; margin: 0; - margin-bottom: 12px; + margin-bottom: var(--spacing_0); } .ip-section-heading-title {
  • @@ -49,16 +49,16 @@ margin: 0;
    } .ip-style-section { - margin-bottom: 12px; + margin-bottom: var(--spacing_0); } .ip-overview { display: flex; flex-wrap: wrap; align-items: center; - gap: 12px 24px; + gap: var(--spacing_1) var(--spacing_2); margin: 0; - margin-top: 16px; + margin-top: var(--spacing_2); } .ip-prop {
  • @@ -67,7 +67,7 @@ flex-direction: column;
    align-items: flex-start; justify-content: flex-start; margin: 0; - gap: 2px; + gap: var(--spacing_-4); } .ip-prop-label {
  • @@ -86,7 +86,7 @@
    .ip-text-content { display: block; width: 100%; - padding: 8px; + padding: var(--spacing_-1); box-sizing: border-box; font-family: var(--font-family-mono); font-size: calc(var(--font-size) * 0.8);
  • @@ -100,7 +100,7 @@
    .ip-options { display: flex; justify-content: flex-end; - margin-top: 8px; + margin-top: var(--spacing_-1); } .ip-pref-action {
• src/ui/menuBar/menuBar.ts
  • @@ -16,7 +16,7 @@ transform: translateY(0px);
    } .mb-menubar { - padding: 8px; + padding: var(--spacing_-3); display: flex; background-color: var(--bg);
  • @@ -41,9 +41,8 @@ .mb-actions {
    flex-grow: 0; flex-shrink: 0; display: flex; - gap: 8px; + gap: var(--spacing_-2); } - `; interface MenuBarProps {
• src/ui/preferencesPanel/choice.ts
  • @@ -24,7 +24,7 @@ display: grid;
    grid-template-columns: min-content minmax(0, 1fr); grid-template-rows: max-content max-content; align-items: center; - gap: 4px 8px; + gap: var(--spacing_-2) var(--spacing_-1); border: 1px solid var(--action-border); border: 1px solid transparent;
• src/ui/preferencesPanel/preferencesPanel.ts
  • @@ -14,8 +14,8 @@
    .pp-section-header { display: block; margin: 0; - margin-top: 2em; - margin-bottom: 1em; + margin-top: var(--spacing_5); + margin-bottom: var(--spacing_1); font-size: calc(var(--font-size) * 1.1); font-weight: bold; }
  • @@ -25,7 +25,7 @@ display: flex;
    flex-direction: column; align-items: stretch; justify-content: flex-start; - gap: 8px; + gap: var(--spacing_-2); } .pp-input {
  • @@ -50,7 +50,7 @@ }
    .pp-description, .pp-error { margin: 0; - margin-top: 1em; + margin-top: var(--spacing_0); font-size: calc(var(--font-size) * 0.8); color: var(--subtle-fg);
• src/ui/selectBox/selectBox.ts
  • @@ -3,8 +3,8 @@ import { compute, Signal } from "../../signal";
    export const styles = /* css */ ` .sl-wrapper { - --_caret-size: 10px; - --_caret-width: 8px; + --_caret-size: calc(var(--font-size) * 0.625); + --_caret-width: calc(var(--_caret-size) * 0.8); position: relative; display: inline-flex;
• website/index.html
  • @@ -202,6 +202,23 @@ <td><code>&lt;length&gt;</code></td>
    <td>Base font size. Default to <code>1rem</code>.</td> </tr> <tr> + <td><code>--figspec-spacing-base</code></td> + <td><code>&lt;length&gt;</code></td> + <td>Base spacing size.</td> + </tr> + <tr> + <td><code>--figspec-spacing-scale</code></td> + <td>Unit-less number</td> + <td>Size of spacing scales.</td> + </tr> + <tr> + <td> + <code>--figspec-spacing_{-5,-4,-3,-2,-1,0,1,2,3,4,5}</code> + </td> + <td><code>&lt;length&gt;</code></td> + <td>Spacing size values.</td> + </tr> + <tr> <td> <code>--figspec-action-overlay</code> </td>