@nationaldesignstudio/react 0.5.1 → 0.5.2

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

@@ -1,651 +0,0 @@
-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