@nationaldesignstudio/react 0.3.0 → 0.5.1

package/dist/packages/tokens/dist/semantic/spatial/base.js

@@ -0,0 +1,651 @@
+const i = {
+  semantic: {
+    spatial: {
+      $extensions: {
+        "nds.theme": {
+          category: "spatial",
+          name: "base"
+        },
+        "nds.figmaSync": {
+          collectionKey: "145a1dde6a2edbd03b4e1fe9bbc9269e90bfe5f1",
+          collectionName: "Spatial",
+          modeMapping: { modeName: "Default" }
+        }
+      },
+      grid: {
+        $extensions: {
+          "nds.grid": {
+            generateUtilities: !0
+          }
+        },
+        large: {
+          $extensions: {
+            "nds.breakpoint": {
+              name: "lg",
+              minWidth: "{primitive.breakpoint.lg}",
+              description: "Desktop (1440px+)"
+            }
+          },
+          margin: {
+            $type: "dimension",
+            $value: "{primitive.spacing.72}",
+            $description: "Outer margin for large breakpoint grid"
+          },
+          gutter: {
+            $type: "dimension",
+            $value: "{primitive.spacing.24}",
+            $description: "Gap between columns for large breakpoint"
+          },
+          columns: {
+            $type: "number",
+            $value: 24,
+            $description: "Number of columns for large breakpoint"
+          }
+        },
+        medium: {
+          $extensions: {
+            "nds.breakpoint": {
+              name: "md",
+              minWidth: "{primitive.breakpoint.md}",
+              description: "Tablet (768px - 1439px)"
+            }
+          },
+          margin: {
+            $type: "dimension",
+            $value: "{primitive.spacing.56}",
+            $description: "Outer margin for medium breakpoint grid"
+          },
+          gutter: {
+            $type: "dimension",
+            $value: "{primitive.spacing.20}",
+            $description: "Gap between columns for medium breakpoint"
+          },
+          columns: {
+            $type: "number",
+            $value: 12,
+            $description: "Number of columns for medium breakpoint"
+          }
+        },
+        small: {
+          $extensions: {
+            "nds.breakpoint": {
+              name: "sm",
+              minWidth: "{primitive.breakpoint.sm}",
+              description: "Mobile (< 768px)"
+            }
+          },
+          margin: {
+            $type: "dimension",
+            $value: "{primitive.spacing.24}",
+            $description: "Outer margin for small breakpoint grid"
+          },
+          gutter: {
+            $type: "dimension",
+            $value: "{primitive.spacing.12}",
+            $description: "Gap between columns for small breakpoint"
+          },
+          columns: {
+            $type: "number",
+            $value: 4,
+            $description: "Number of columns for small breakpoint"
+          }
+        }
+      },
+      section: {
+        large: {
+          gap: {
+            $type: "dimension",
+            $value: "{primitive.spacing.64}",
+            $description: "Gap between elements in large sections"
+          },
+          padding: {
+            $type: "dimension",
+            $value: "{primitive.spacing.128}",
+            $description: "Vertical padding for large sections"
+          }
+        },
+        medium: {
+          gap: {
+            $type: "dimension",
+            $value: "{primitive.spacing.56}",
+            $description: "Gap between elements in medium sections"
+          },
+          padding: {
+            $type: "dimension",
+            $value: "{primitive.spacing.96}",
+            $description: "Vertical padding for medium sections"
+          }
+        },
+        small: {
+          gap: {
+            $type: "dimension",
+            $value: "{primitive.spacing.32}",
+            $description: "Gap between elements in small sections"
+          },
+          padding: {
+            $type: "dimension",
+            $value: "{primitive.spacing.64}",
+            $description: "Vertical padding for small sections"
+          }
+        }
+      },
+      card: {
+        large: {
+          gap: {
+            $type: "dimension",
+            $value: "{primitive.spacing.10}",
+            $description: "Internal gap for large cards"
+          },
+          padding: {
+            $type: "dimension",
+            $value: "{primitive.spacing.24}",
+            $description: "Internal padding for large cards"
+          }
+        },
+        small: {
+          gap: {
+            $type: "dimension",
+            $value: "{primitive.spacing.12}",
+            $description: "Internal gap for small cards"
+          },
+          padding: {
+            $type: "dimension",
+            $value: "{primitive.spacing.16}",
+            $description: "Internal padding for small cards"
+          }
+        }
+      },
+      /**
+       * UI Control Tokens
+       *
+       * Spacing for form controls and UI elements.
+       */
+      ui: {
+        control: {
+          "vertical-padding": {
+            $type: "dimension",
+            $value: "{primitive.spacing.10}",
+            $description: "Vertical padding for form controls"
+          },
+          "horizontal-padding": {
+            $type: "dimension",
+            $value: "{primitive.spacing.16}",
+            $description: "Horizontal padding for form controls"
+          },
+          gap: {
+            $type: "dimension",
+            $value: "{primitive.spacing.8}",
+            $description: "Gap between control elements"
+          },
+          height: {
+            small: {
+              $type: "dimension",
+              $value: "{primitive.spacing.36}",
+              $description: "Height for small form controls"
+            },
+            medium: {
+              $type: "dimension",
+              $value: "{primitive.spacing.48}",
+              $description: "Height for medium form controls"
+            },
+            large: {
+              $type: "dimension",
+              $value: "{primitive.spacing.56}",
+              $description: "Height for large form controls"
+            }
+          },
+          "padding-x": {
+            small: {
+              $type: "dimension",
+              $value: "{primitive.spacing.12}",
+              $description: "Horizontal padding for small form controls"
+            },
+            medium: {
+              $type: "dimension",
+              $value: "{primitive.spacing.16}",
+              $description: "Horizontal padding for medium form controls"
+            },
+            large: {
+              $type: "dimension",
+              $value: "{primitive.spacing.20}",
+              $description: "Horizontal padding for large form controls"
+            }
+          },
+          "padding-y": {
+            small: {
+              $type: "dimension",
+              $value: "{primitive.spacing.8}",
+              $description: "Vertical padding for small form controls"
+            },
+            medium: {
+              $type: "dimension",
+              $value: "{primitive.spacing.10}",
+              $description: "Vertical padding for medium form controls"
+            },
+            large: {
+              $type: "dimension",
+              $value: "{primitive.spacing.12}",
+              $description: "Vertical padding for large form controls"
+            }
+          }
+        },
+        button: {
+          gap: {
+            "icon-text": {
+              $type: "dimension",
+              $value: "{primitive.spacing.6}",
+              $description: "Gap between button icon and text"
+            },
+            "button-group": {
+              $type: "dimension",
+              $value: "{primitive.spacing.12}",
+              $description: "Gap between buttons in a group"
+            }
+          },
+          // Figma Button sizes: sm=32px, default=36px, lg=40px
+          height: {
+            small: {
+              $type: "dimension",
+              $value: "{primitive.spacing.32}",
+              $description: "Height for small buttons (32px)"
+            },
+            medium: {
+              $type: "dimension",
+              $value: "{primitive.spacing.36}",
+              $description: "Height for medium/default buttons (36px)"
+            },
+            large: {
+              $type: "dimension",
+              $value: "{primitive.spacing.40}",
+              $description: "Height for large buttons (40px)"
+            }
+          },
+          "padding-x": {
+            small: {
+              $type: "dimension",
+              $value: "{primitive.spacing.12}",
+              $description: "Horizontal padding for small buttons (12px)"
+            },
+            medium: {
+              $type: "dimension",
+              $value: "{primitive.spacing.16}",
+              $description: "Horizontal padding for medium buttons (16px)"
+            },
+            large: {
+              $type: "dimension",
+              $value: "{primitive.spacing.24}",
+              $description: "Horizontal padding for large buttons (24px)"
+            }
+          },
+          "padding-y": {
+            small: {
+              $type: "dimension",
+              $value: "{primitive.spacing.8}",
+              $description: "Vertical padding for small buttons (8px)"
+            },
+            medium: {
+              $type: "dimension",
+              $value: "{primitive.spacing.8}",
+              $description: "Vertical padding for medium buttons (8px)"
+            },
+            large: {
+              $type: "dimension",
+              $value: "{primitive.spacing.10}",
+              $description: "Vertical padding for large buttons (10px)"
+            }
+          }
+        },
+        input: {
+          height: {
+            small: {
+              $type: "dimension",
+              $value: "{semantic.spatial.ui.control.height.small}",
+              $description: "Height for small input controls"
+            },
+            medium: {
+              $type: "dimension",
+              $value: "{semantic.spatial.ui.control.height.medium}",
+              $description: "Height for medium input controls"
+            },
+            large: {
+              $type: "dimension",
+              $value: "{semantic.spatial.ui.control.height.large}",
+              $description: "Height for large input controls"
+            }
+          },
+          "padding-x": {
+            small: {
+              $type: "dimension",
+              $value: "{semantic.spatial.ui.control.padding-x.small}",
+              $description: "Horizontal padding for small input controls"
+            },
+            medium: {
+              $type: "dimension",
+              $value: "{semantic.spatial.ui.control.padding-x.medium}",
+              $description: "Horizontal padding for medium input controls"
+            },
+            large: {
+              $type: "dimension",
+              $value: "{semantic.spatial.ui.control.padding-x.large}",
+              $description: "Horizontal padding for large input controls"
+            }
+          },
+          "padding-y": {
+            small: {
+              $type: "dimension",
+              $value: "{semantic.spatial.ui.control.padding-y.small}",
+              $description: "Vertical padding for small input controls"
+            },
+            medium: {
+              $type: "dimension",
+              $value: "{semantic.spatial.ui.control.padding-y.medium}",
+              $description: "Vertical padding for medium input controls"
+            },
+            large: {
+              $type: "dimension",
+              $value: "{semantic.spatial.ui.control.padding-y.large}",
+              $description: "Vertical padding for large input controls"
+            }
+          }
+        },
+        "input-group": {
+          height: {
+            small: {
+              $type: "dimension",
+              $value: "{semantic.spatial.ui.input.height.small}",
+              $description: "Height for small input groups"
+            },
+            medium: {
+              $type: "dimension",
+              $value: "{semantic.spatial.ui.input.height.medium}",
+              $description: "Height for medium input groups"
+            },
+            large: {
+              $type: "dimension",
+              $value: "{semantic.spatial.ui.input.height.large}",
+              $description: "Height for large input groups"
+            }
+          },
+          "padding-x": {
+            small: {
+              $type: "dimension",
+              $value: "{semantic.spatial.ui.input.padding-x.small}",
+              $description: "Horizontal padding for small input groups"
+            },
+            medium: {
+              $type: "dimension",
+              $value: "{semantic.spatial.ui.input.padding-x.medium}",
+              $description: "Horizontal padding for medium input groups"
+            },
+            large: {
+              $type: "dimension",
+              $value: "{semantic.spatial.ui.input.padding-x.large}",
+              $description: "Horizontal padding for large input groups"
+            }
+          },
+          "padding-y": {
+            small: {
+              $type: "dimension",
+              $value: "{semantic.spatial.ui.input.padding-y.small}",
+              $description: "Vertical padding for small input groups"
+            },
+            medium: {
+              $type: "dimension",
+              $value: "{semantic.spatial.ui.input.padding-y.medium}",
+              $description: "Vertical padding for medium input groups"
+            },
+            large: {
+              $type: "dimension",
+              $value: "{semantic.spatial.ui.input.padding-y.large}",
+              $description: "Vertical padding for large input groups"
+            }
+          },
+          gap: {
+            block: {
+              $type: "dimension",
+              $value: "{semantic.spatial.ui.control.gap}",
+              $description: "Gap between block addon and input in input group"
+            }
+          }
+        }
+      },
+      /**
+       * Component Spacing Tokens
+       *
+       * Spacing for specific components (padding, gap).
+       */
+      component: {
+        card: {
+          padding: {
+            small: {
+              $type: "dimension",
+              $value: "{primitive.spacing.24}",
+              $description: "Padding for small cards"
+            },
+            medium: {
+              $type: "dimension",
+              $value: "{primitive.spacing.32}",
+              $description: "Padding for medium cards"
+            },
+            large: {
+              $type: "dimension",
+              $value: "{primitive.spacing.40}",
+              $description: "Padding for large cards"
+            }
+          },
+          gap: {
+            $type: "dimension",
+            $value: "{primitive.spacing.24}",
+            $description: "Internal gap for cards"
+          }
+        },
+        feature: {
+          padding: {
+            small: {
+              $type: "dimension",
+              $value: "{primitive.spacing.32}",
+              $description: "Padding for small features"
+            },
+            medium: {
+              $type: "dimension",
+              $value: "{primitive.spacing.40}",
+              $description: "Padding for medium features"
+            },
+            large: {
+              $type: "dimension",
+              $value: "{primitive.spacing.48}",
+              $description: "Padding for large features"
+            }
+          },
+          gap: {
+            $type: "dimension",
+            $value: "{primitive.spacing.24}",
+            $description: "Gap between icon and content in features"
+          }
+        },
+        testimonial: {
+          padding: {
+            $type: "dimension",
+            $value: "{primitive.spacing.40}",
+            $description: "Padding for testimonials"
+          },
+          gap: {
+            $type: "dimension",
+            $value: "{primitive.spacing.24}",
+            $description: "Gap between quote and attribution"
+          }
+        },
+        form: {
+          gap: {
+            "field-field": {
+              $type: "dimension",
+              $value: "{primitive.spacing.20}",
+              $description: "Gap between form fields"
+            },
+            "label-field": {
+              $type: "dimension",
+              $value: "{primitive.spacing.8}",
+              $description: "Gap between label and field"
+            },
+            "field-button": {
+              $type: "dimension",
+              $value: "{primitive.spacing.24}",
+              $description: "Gap between field and submit button"
+            }
+          }
+        },
+        accordion: {
+          "padding-y": {
+            $type: "dimension",
+            $value: "{primitive.spacing.28}",
+            $description: "Vertical padding for accordion items"
+          }
+        },
+        tooltip: {
+          "padding-x": {
+            $type: "dimension",
+            $value: "{primitive.spacing.10}",
+            $description: "Horizontal padding for tooltip content"
+          },
+          "padding-y": {
+            $type: "dimension",
+            $value: "{primitive.spacing.6}",
+            $description: "Vertical padding for tooltip content"
+          }
+        },
+        /**
+         * Overlay Spacing Tokens
+         *
+         * Spacing for floating UI components (popover, modal, dropdown, menu).
+         */
+        overlay: {
+          padding: {
+            $type: "dimension",
+            $value: "{primitive.spacing.16}",
+            $description: "Padding for overlay containers (16px)"
+          },
+          gap: {
+            $type: "dimension",
+            $value: "{primitive.spacing.16}",
+            $description: "Gap between overlay content elements (16px)"
+          }
+        },
+        navbar: {
+          "padding-x": {
+            mobile: {
+              $type: "dimension",
+              $value: "{primitive.spacing.20}",
+              $description: "Horizontal padding for mobile navbar"
+            },
+            tablet: {
+              $type: "dimension",
+              $value: "{primitive.spacing.32}",
+              $description: "Horizontal padding for tablet navbar"
+            },
+            desktop: {
+              $type: "dimension",
+              $value: "{primitive.spacing.32}",
+              $description: "Horizontal padding for desktop navbar"
+            }
+          },
+          "padding-y": {
+            mobile: {
+              $type: "dimension",
+              $value: "{primitive.spacing.8}",
+              $description: "Vertical padding for mobile navbar"
+            },
+            tablet: {
+              $type: "dimension",
+              $value: "{primitive.spacing.16}",
+              $description: "Vertical padding for tablet navbar"
+            },
+            desktop: {
+              $type: "dimension",
+              $value: "{primitive.spacing.24}",
+              $description: "Vertical padding for desktop navbar"
+            }
+          },
+          gap: {
+            links: {
+              $type: "dimension",
+              $value: "{primitive.spacing.40}",
+              $description: "Gap between navbar links"
+            },
+            actions: {
+              $type: "dimension",
+              $value: "{primitive.spacing.8}",
+              $description: "Gap between navbar actions"
+            },
+            "mobile-menu": {
+              $type: "dimension",
+              $value: "{primitive.spacing.8}",
+              $description: "Gap in mobile menu items"
+            }
+          }
+        }
+      },
+      /**
+       * Prose Tokens
+       *
+       * Spacing for prose/content blocks.
+       */
+      prose: {
+        "heading-gap": {
+          $type: "dimension",
+          $value: "{primitive.spacing.36}",
+          $description: "Gap before headings in prose"
+        },
+        "block-gap": {
+          $type: "dimension",
+          $value: "{primitive.spacing.96}",
+          $description: "Gap between prose blocks"
+        }
+      },
+      /**
+       * Content Layout Tokens
+       *
+       * Responsive content width patterns for the 12-column grid.
+       * Generates utilities: grid-content-narrow, grid-content-medium, grid-content-wide
+       */
+      layout: {
+        narrow: {
+          $description: "Narrow centered content (reading/mission statements)",
+          large: {
+            span: { $type: "number", $value: 8 },
+            start: { $type: "number", $value: 3 }
+          },
+          medium: {
+            span: { $type: "number", $value: 8 },
+            start: { $type: "number", $value: 3 }
+          }
+        },
+        medium: {
+          $description: "Medium centered content (forms/general)",
+          large: {
+            span: { $type: "number", $value: 8 },
+            start: { $type: "number", $value: 3 }
+          },
+          medium: {
+            span: { $type: "number", $value: 10 },
+            start: { $type: "number", $value: 2 }
+          }
+        },
+        wide: {
+          $description: "Wide content (dashboards/tables)",
+          large: {
+            span: { $type: "number", $value: 10 },
+            start: { $type: "number", $value: 2 }
+          },
+          medium: {
+            span: { $type: "number", $value: 12 },
+            start: { $type: "number", $value: 1 }
+          }
+        }
+      }
+    }
+  }
+};
+export {
+  i as baseSpatialTokens
+};
+//# sourceMappingURL=base.js.map