@moderneinc/biome-plugins 0.0.1

package/README.md

@@ -0,0 +1,47 @@
+# @moderneinc/biome-plugins
+
+Biome GritQL lint plugins for enforcing Moderne design token usage in styled components.
+
+## Plugins
+
+| Plugin | Description |
+|--------|-------------|
+| `no-hardcoded-colors` | Flags hex colors — use `semanticColors.*` or `colors.*` tokens |
+| `no-hardcoded-font-sizes` | Flags numeric font sizes — use `theme.typography.pxToRem()` or `typography.fontSize.*` |
+| `no-hardcoded-font-weights` | Flags numeric font weights — use `typography.fontWeight.*` tokens |
+| `no-hardcoded-spacing` | Flags hardcoded spacing — use `theme.spacing()` or `spacing.*` tokens |
+| `no-hardcoded-shadows` | Flags hardcoded box shadows — use `shadows.*` tokens |
+| `no-pxToRem-non-font` | Flags `pxToRem()` on non-fontSize properties |
+| `no-hardcoded-border-radius` | Flags hardcoded border radius — use `borderRadius.*` tokens |
+| `no-hardcoded-mui-classes` | Flags hardcoded `.Mui*` class selectors — use `*Classes` imports |
+| `no-css-variables` | Flags `var(--)` usage — import tokens directly |
+
+## Usage
+
+Install the package:
+
+```sh
+npm install --save-dev @moderneinc/biome-plugins
+```
+
+Add the plugin paths to your `biome.json`:
+
+```json
+{
+  "plugins": [
+    "./node_modules/@moderneinc/biome-plugins/plugins/no-hardcoded-colors.grit",
+    "./node_modules/@moderneinc/biome-plugins/plugins/no-hardcoded-font-sizes.grit",
+    "./node_modules/@moderneinc/biome-plugins/plugins/no-hardcoded-font-weights.grit",
+    "./node_modules/@moderneinc/biome-plugins/plugins/no-hardcoded-spacing.grit",
+    "./node_modules/@moderneinc/biome-plugins/plugins/no-hardcoded-shadows.grit",
+    "./node_modules/@moderneinc/biome-plugins/plugins/no-pxToRem-non-font.grit",
+    "./node_modules/@moderneinc/biome-plugins/plugins/no-hardcoded-border-radius.grit",
+    "./node_modules/@moderneinc/biome-plugins/plugins/no-hardcoded-mui-classes.grit",
+    "./node_modules/@moderneinc/biome-plugins/plugins/no-css-variables.grit"
+  ]
+}
+```
+
+## Requirements
+
+- [Biome](https://biomejs.dev/) v2.0+ with GritQL plugin support

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@moderneinc/biome-plugins",
+  "version": "0.0.1",
+  "description": "Biome GritQL lint plugins for Moderne design token enforcement",
+  "type": "module",
+  "files": [
+    "plugins",
+    "README.md"
+  ],
+  "keywords": [
+    "biome",
+    "gritql",
+    "lint",
+    "design-tokens",
+    "moderne"
+  ],
+  "author": "Moderne",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/moderneinc/neo-design.git"
+  }
+}

package/plugins/no-css-variables.grit

@@ -0,0 +1,8 @@
+`$prop: $val` where {
+  $val <: r"['\x22].*var\(--.*['\x22]",
+  register_diagnostic(
+    span = $val,
+    message = "CSS variable usage in styled component. Import tokens directly from @moderneinc/neo-design instead of using var(--...).",
+    severity = "warn"
+  )
+}

package/plugins/no-hardcoded-border-radius.grit

@@ -0,0 +1,13 @@
+`$prop: $val` where {
+  $prop <: or {
+    `borderRadius`,
+    `borderTopLeftRadius`, `borderTopRightRadius`,
+    `borderBottomLeftRadius`, `borderBottomRightRadius`
+  },
+  $val <: r"^[1-9][0-9]*$",
+  register_diagnostic(
+    span = $val,
+    message = "Hardcoded border radius. Use borderRadius.* tokens from @moderneinc/neo-design (xXS=2, xS=4, s=8, m=12, l=20, xL=30, full=999).",
+    severity = "warn"
+  )
+}

package/plugins/no-hardcoded-colors.grit

@@ -0,0 +1,12 @@
+`$prop: $val` where {
+  $prop <: or {
+    `color`, `backgroundColor`, `borderColor`,
+    `outlineColor`, `fill`, `stroke`
+  },
+  $val <: r"['\x22]#[0-9a-fA-F]{3,8}['\x22]",
+  register_diagnostic(
+    span = $val,
+    message = "Hardcoded hex color. Use semanticColors.* or colors.* from @moderneinc/neo-design instead.",
+    severity = "warn"
+  )
+}

package/plugins/no-hardcoded-font-sizes.grit

@@ -0,0 +1,8 @@
+`fontSize: $val` where {
+  $val <: r"^\d+$",
+  register_diagnostic(
+    span = $val,
+    message = "Hardcoded font size. Use theme.typography.pxToRem() or typography.fontSize.* from @moderneinc/neo-design instead.",
+    severity = "warn"
+  )
+}

package/plugins/no-hardcoded-font-weights.grit

@@ -0,0 +1,8 @@
+`fontWeight: $val` where {
+  $val <: or { `300`, `400`, `500`, `600`, `700`, `800`, `900` },
+  register_diagnostic(
+    span = $val,
+    message = "Hardcoded font weight. Use typography.fontWeight.* from @moderneinc/neo-design (light=300, regular=400, medium=500, semibold=600, bold=700).",
+    severity = "warn"
+  )
+}

package/plugins/no-hardcoded-mui-classes.grit

@@ -0,0 +1,8 @@
+`$key: $val` where {
+  $key <: r"'[^']*\.Mui[A-Z][^']*'",
+  register_diagnostic(
+    span = $key,
+    message = "Hardcoded MUI class selector. Use imported *Classes constants instead (e.g., `[`& .${checkboxClasses.root}`]`).",
+    severity = "warn"
+  )
+}

package/plugins/no-hardcoded-shadows.grit

@@ -0,0 +1,8 @@
+`boxShadow: $val` where {
+  $val <: r"'[^']*\d+px[^']*'",
+  register_diagnostic(
+    span = $val,
+    message = "Hardcoded box shadow. Use shadows.* from @moderneinc/neo-design (e.g., shadows.neutralSmall, shadows.dropdown).",
+    severity = "warn"
+  )
+}

package/plugins/no-hardcoded-spacing.grit

@@ -0,0 +1,16 @@
+`$prop: $val` where {
+  $prop <: or {
+    `padding`, `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`,
+    `paddingInline`, `paddingBlock`, `paddingInlineStart`, `paddingInlineEnd`,
+    `margin`, `marginTop`, `marginRight`, `marginBottom`, `marginLeft`,
+    `marginInline`, `marginBlock`, `marginInlineStart`, `marginInlineEnd`,
+    `gap`, `rowGap`, `columnGap`,
+    `top`, `right`, `bottom`, `left`
+  },
+  $val <: r"^[2-9]$|^[1-9][0-9]+$",
+  register_diagnostic(
+    span = $val,
+    message = "Hardcoded spacing value. Use theme.spacing() or spacing.* tokens from @moderneinc/neo-design instead.",
+    severity = "warn"
+  )
+}

package/plugins/no-pxToRem-non-font.grit

@@ -0,0 +1,9 @@
+`$prop: $val` where {
+  $prop <: not `fontSize`,
+  $val <: contains `$_.pxToRem($_)`,
+  register_diagnostic(
+    span = $val,
+    message = "pxToRem() is only for fontSize. Use numeric values, theme.spacing(), or design tokens directly.",
+    severity = "warn"
+  )
+}