npm - @multiplatform.one/theme - Versions diffs - 6.0.0 - Mend

@multiplatform.one/theme 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (67) hide show

package/CHANGELOG.md +18 -0
package/LICENSE +201 -0
package/package.json +85 -0
package/src/audit/baselines/home-login.json +171 -0
package/src/audit/baselines/home-login.png +0 -0
package/src/audit/baselines/home-pokemon.json +355 -0
package/src/audit/baselines/home-pokemon.png +0 -0
package/src/audit/baselines/home.json +194 -0
package/src/audit/baselines/home.png +0 -0
package/src/audit/baselines/pokemon.json +251 -0
package/src/audit/baselines/pokemon.png +0 -0
package/src/audit/constraintAudit.ts +874 -0
package/src/audit/diffReport.spec.ts +191 -0
package/src/audit/diffReport.ts +344 -0
package/src/audit/index.ts +10 -0
package/src/font.ts +49 -0
package/src/fonts/createFontLoader.ts +15 -0
package/src/fonts/createFontLoader.web.ts +9 -0
package/src/fonts/index.ts +2 -0
package/src/fonts/types.ts +13 -0
package/src/index.ts +3 -0
package/src/theme/Intent.tsx +30 -0
package/src/theme/Preset.tsx +93 -0
package/src/theme/PresetContext.ts +27 -0
package/src/theme/Tint.tsx +44 -0
package/src/theme/__snapshots__/resolveKnobs.spec.ts.snap +69 -0
package/src/theme/animations/css.ts +25 -0
package/src/theme/animations/index.ts +1 -0
package/src/theme/animations/index.web.ts +1 -0
package/src/theme/animations/reactNative.ts +54 -0
package/src/theme/colorRules.spec.ts +195 -0
package/src/theme/colorRules.ts +166 -0
package/src/theme/cookies.spec.ts +185 -0
package/src/theme/cookies.ts +209 -0
package/src/theme/createDefaultThemeConfig.ts +86 -0
package/src/theme/createThemes.ts +286 -0
package/src/theme/devtools/ColorLineVisualizer.tsx +261 -0
package/src/theme/devtools/ThemeDevtoolsPanel.tsx +1657 -0
package/src/theme/devtools/buildSnapshot.spec.ts +113 -0
package/src/theme/devtools/buildSnapshot.ts +103 -0
package/src/theme/devtools/knobIcons.tsx +217 -0
package/src/theme/devtools/vizConstants.spec.ts +58 -0
package/src/theme/devtools/vizConstants.ts +28 -0
package/src/theme/index.ts +21 -0
package/src/theme/intent.spec.tsx +276 -0
package/src/theme/intents.ts +22 -0
package/src/theme/knobs.ts +147 -0
package/src/theme/pokemonScreen.spec.ts +109 -0
package/src/theme/preset.spec.tsx +242 -0
package/src/theme/preset.types.ts +22 -0
package/src/theme/presets.spec.ts +252 -0
package/src/theme/presets.ts +49 -0
package/src/theme/recipes.ts +69 -0
package/src/theme/resolveKnobs.spec.ts +571 -0
package/src/theme/resolveKnobs.ts +226 -0
package/src/theme/shared.spec.ts +84 -0
package/src/theme/shared.tsx +131 -0
package/src/theme/theme.native.tsx +65 -0
package/src/theme/theme.tsx +190 -0
package/src/theme/tint.spec.tsx +179 -0
package/src/theme/useColorScale.native.ts +7 -0
package/src/theme/useColorScale.ts +29 -0
package/src/theme/useResolvedKnobs.ts +121 -0
package/src/theme/useTheme.native.ts +49 -0
package/src/theme/useTheme.ts +213 -0
package/tsconfig.json +11 -0
package/vitest.config.mjs +9 -0

package/src/audit/baselines/home-pokemon.json ADDED Viewed

@@ -0,0 +1,355 @@
+{
+  "url": "http://localhost:3000/pokemon",
+  "timestamp": "2026-03-25T05:33:41.560Z",
+  "preset": "unknown",
+  "scheme": "light",
+  "summary": {
+    "totalElements": 36,
+    "auditedElements": 13,
+    "totalViolations": 3,
+    "byProperty": {
+      "borderRadius": 1,
+      "borderWidth": 0,
+      "gap": 2,
+      "padding": 1,
+      "fontWeight": 0,
+      "fontFamily": 0,
+      "inlineColor": 1
+    }
+  },
+  "violations": [
+    {
+      "label": "div",
+      "tag": "div",
+      "id": "",
+      "classes": [],
+      "violations": [
+        "inlineColor: backgroundColor=\"rgba(60, 100, 200, 0.65)\" bypasses theme tokens"
+      ],
+      "inlineColor": {
+        "value": "backgroundColor: rgba(60, 100, 200, 0.65)",
+        "knob": "off-scale (hardcoded)",
+        "offScale": true
+      }
+    },
+    {
+      "label": "button.is_Button.is_View._outlineColor-0focus-visible-outlineColo114[role=button]",
+      "tag": "button",
+      "id": "",
+      "classes": [
+        "is_Button",
+        "is_View",
+        "_outlineColor-0focus-visible-outlineColo114",
+        "_outlineStyle-0focus-visible-solid",
+        "_outlineWidth-0focus-visible-2px"
+      ],
+      "violations": [
+        "borderRadius: 100000px is off-scale (no matching token)",
+        "rowGap: 9px is off-scale (no matching token)"
+      ],
+      "borderRadius": {
+        "value": 100000,
+        "unit": "px",
+        "knob": "off-scale",
+        "offScale": true
+      },
+      "borderWidth": {
+        "value": 1,
+        "unit": "px",
+        "knob": "medium",
+        "offScale": false
+      },
+      "rowGap": {
+        "value": 9,
+        "unit": "px",
+        "knob": "off-scale",
+        "offScale": true
+      }
+    },
+    {
+      "label": "button.is_Button.is_View._outlineColor-0focus-visible-outlineColo114[role=button]",
+      "tag": "button",
+      "id": "",
+      "classes": [
+        "is_Button",
+        "is_View",
+        "_outlineColor-0focus-visible-outlineColo114",
+        "_outlineStyle-0focus-visible-solid",
+        "_outlineWidth-0focus-visible-2px"
+      ],
+      "violations": [
+        "rowGap: 5px is off-scale (no matching token)",
+        "paddingRight: 7px is off-scale (no matching token)",
+        "paddingLeft: 7px is off-scale (no matching token)"
+      ],
+      "borderRadius": {
+        "value": 5,
+        "unit": "px",
+        "knob": "small",
+        "offScale": false
+      },
+      "borderWidth": {
+        "value": 1,
+        "unit": "px",
+        "knob": "medium",
+        "offScale": false
+      },
+      "rowGap": {
+        "value": 5,
+        "unit": "px",
+        "knob": "off-scale",
+        "offScale": true
+      },
+      "paddingRight": {
+        "value": 7,
+        "unit": "px",
+        "knob": "off-scale",
+        "offScale": true
+      },
+      "paddingLeft": {
+        "value": 7,
+        "unit": "px",
+        "knob": "off-scale",
+        "offScale": true
+      }
+    }
+  ],
+  "elements": [
+    {
+      "label": "div",
+      "tag": "div",
+      "id": "",
+      "classes": [],
+      "violations": [
+        "inlineColor: backgroundColor=\"rgba(60, 100, 200, 0.65)\" bypasses theme tokens"
+      ],
+      "inlineColor": {
+        "value": "backgroundColor: rgba(60, 100, 200, 0.65)",
+        "knob": "off-scale (hardcoded)",
+        "offScale": true
+      }
+    },
+    {
+      "label": "span._dsp_contents.t_unmounted.font_body",
+      "tag": "span",
+      "id": "",
+      "classes": ["_dsp_contents", "t_unmounted", "font_body"],
+      "violations": [],
+      "fontFamily": {
+        "value": "Inter, -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
+        "knob": "sans-serif ($body/$heading)",
+        "offScale": false
+      }
+    },
+    {
+      "label": "nav.is_View",
+      "tag": "nav",
+      "id": "",
+      "classes": ["is_View"],
+      "violations": [],
+      "borderWidth": {
+        "value": 1,
+        "unit": "px",
+        "knob": "medium",
+        "offScale": false
+      }
+    },
+    {
+      "label": "div.is_View",
+      "tag": "div",
+      "id": "",
+      "classes": ["is_View"],
+      "violations": [],
+      "rowGap": {
+        "value": 13,
+        "unit": "px",
+        "knob": "medium",
+        "offScale": false
+      }
+    },
+    {
+      "label": "button.is_Button.is_View._outlineColor-0focus-visible-outlineColo114[role=button]",
+      "tag": "button",
+      "id": "",
+      "classes": [
+        "is_Button",
+        "is_View",
+        "_outlineColor-0focus-visible-outlineColo114",
+        "_outlineStyle-0focus-visible-solid",
+        "_outlineWidth-0focus-visible-2px"
+      ],
+      "violations": [
+        "borderRadius: 100000px is off-scale (no matching token)",
+        "rowGap: 9px is off-scale (no matching token)"
+      ],
+      "borderRadius": {
+        "value": 100000,
+        "unit": "px",
+        "knob": "off-scale",
+        "offScale": true
+      },
+      "borderWidth": {
+        "value": 1,
+        "unit": "px",
+        "knob": "medium",
+        "offScale": false
+      },
+      "rowGap": {
+        "value": 9,
+        "unit": "px",
+        "knob": "off-scale",
+        "offScale": true
+      }
+    },
+    {
+      "label": "div.is_View",
+      "tag": "div",
+      "id": "",
+      "classes": ["is_View"],
+      "violations": [],
+      "rowGap": {
+        "value": 13,
+        "unit": "px",
+        "knob": "medium",
+        "offScale": false
+      }
+    },
+    {
+      "label": "button.is_Button.is_View._outlineColor-0focus-visible-outlineColo114[role=button]",
+      "tag": "button",
+      "id": "",
+      "classes": [
+        "is_Button",
+        "is_View",
+        "_outlineColor-0focus-visible-outlineColo114",
+        "_outlineStyle-0focus-visible-solid",
+        "_outlineWidth-0focus-visible-2px"
+      ],
+      "violations": [
+        "rowGap: 5px is off-scale (no matching token)",
+        "paddingRight: 7px is off-scale (no matching token)",
+        "paddingLeft: 7px is off-scale (no matching token)"
+      ],
+      "borderRadius": {
+        "value": 5,
+        "unit": "px",
+        "knob": "small",
+        "offScale": false
+      },
+      "borderWidth": {
+        "value": 1,
+        "unit": "px",
+        "knob": "medium",
+        "offScale": false
+      },
+      "rowGap": {
+        "value": 5,
+        "unit": "px",
+        "knob": "off-scale",
+        "offScale": true
+      },
+      "paddingRight": {
+        "value": 7,
+        "unit": "px",
+        "knob": "off-scale",
+        "offScale": true
+      },
+      "paddingLeft": {
+        "value": 7,
+        "unit": "px",
+        "knob": "off-scale",
+        "offScale": true
+      }
+    },
+    {
+      "label": "div.is_View",
+      "tag": "div",
+      "id": "",
+      "classes": ["is_View"],
+      "violations": [],
+      "rowGap": {
+        "value": 18,
+        "unit": "px",
+        "knob": "large",
+        "offScale": false
+      }
+    },
+    {
+      "label": "div.is_View",
+      "tag": "div",
+      "id": "",
+      "classes": ["is_View"],
+      "violations": [],
+      "rowGap": {
+        "value": 13,
+        "unit": "px",
+        "knob": "medium",
+        "offScale": false
+      }
+    },
+    {
+      "label": "h1.is_H1.is_Text.font_heading[role=heading]",
+      "tag": "h1",
+      "id": "",
+      "classes": ["is_H1", "is_Text", "font_heading"],
+      "violations": [],
+      "fontWeight": {
+        "value": 700,
+        "unit": "px",
+        "knob": "bold",
+        "offScale": false
+      }
+    },
+    {
+      "label": "button.is_Toggle.is_View._outlineColor-0focus-visible-outlineColo114",
+      "tag": "button",
+      "id": "",
+      "classes": [
+        "is_Toggle",
+        "is_View",
+        "_outlineColor-0focus-visible-outlineColo114",
+        "_outlineWidth-0focus-visible-2px",
+        "_outlineStyle-0focus-visible-solid"
+      ],
+      "violations": [],
+      "borderWidth": {
+        "value": 1,
+        "unit": "px",
+        "knob": "medium",
+        "offScale": false
+      }
+    },
+    {
+      "label": "button.is_Toggle.is_View._outlineColor-0focus-visible-outlineColo114",
+      "tag": "button",
+      "id": "",
+      "classes": [
+        "is_Toggle",
+        "is_View",
+        "_outlineColor-0focus-visible-outlineColo114",
+        "_outlineWidth-0focus-visible-2px",
+        "_outlineStyle-0focus-visible-solid"
+      ],
+      "violations": [],
+      "borderWidth": {
+        "value": 1,
+        "unit": "px",
+        "knob": "medium",
+        "offScale": false
+      }
+    },
+    {
+      "label": "div.is_View[data-testid=pokemon-list]",
+      "tag": "div",
+      "id": "",
+      "classes": ["is_View"],
+      "violations": [],
+      "rowGap": {
+        "value": 13,
+        "unit": "px",
+        "knob": "medium",
+        "offScale": false
+      }
+    }
+  ]
+}

package/src/audit/baselines/home-pokemon.png ADDED Viewed

Binary file

package/src/audit/baselines/home.json ADDED Viewed

@@ -0,0 +1,194 @@
+{
+  "url": "http://localhost:3000/",
+  "timestamp": "2026-03-25T06:05:33.532Z",
+  "preset": "unknown",
+  "scheme": "light",
+  "summary": {
+    "totalElements": 34,
+    "auditedElements": 10,
+    "totalViolations": 0,
+    "byProperty": {
+      "borderRadius": 0,
+      "borderWidth": 0,
+      "gap": 0,
+      "padding": 0,
+      "fontWeight": 0,
+      "fontFamily": 0,
+      "inlineColor": 0
+    }
+  },
+  "violations": [],
+  "elements": [
+    {
+      "label": "span._dsp_contents.font_body",
+      "tag": "span",
+      "id": "",
+      "classes": ["_dsp_contents", "font_body"],
+      "violations": [],
+      "fontFamily": {
+        "value": "Inter, -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
+        "knob": "sans-serif ($body/$heading)",
+        "offScale": false
+      }
+    },
+    {
+      "label": "nav.is_View",
+      "tag": "nav",
+      "id": "",
+      "classes": ["is_View"],
+      "violations": [],
+      "borderWidth": {
+        "value": 1,
+        "unit": "px",
+        "knob": "medium",
+        "offScale": false
+      }
+    },
+    {
+      "label": "div.is_View",
+      "tag": "div",
+      "id": "",
+      "classes": ["is_View"],
+      "violations": [],
+      "rowGap": {
+        "value": 13,
+        "unit": "px",
+        "knob": "medium",
+        "offScale": false
+      }
+    },
+    {
+      "label": "h4.is_H4.is_Text.font_heading",
+      "tag": "h4",
+      "id": "",
+      "classes": ["is_H4", "is_Text", "font_heading"],
+      "violations": [],
+      "fontWeight": {
+        "value": 700,
+        "unit": "px",
+        "knob": "bold",
+        "offScale": false
+      }
+    },
+    {
+      "label": "div.t_unmounted.is_View",
+      "tag": "div",
+      "id": "",
+      "classes": ["t_unmounted", "is_View"],
+      "violations": [],
+      "borderRadius": {
+        "value": 9,
+        "unit": "px",
+        "knob": "medium",
+        "offScale": false
+      },
+      "borderWidth": {
+        "value": 1,
+        "unit": "px",
+        "knob": "medium",
+        "offScale": false
+      }
+    },
+    {
+      "label": "div.is_GroupFrame.is_View._outlineStyle-none[role=tablist]",
+      "tag": "div",
+      "id": "",
+      "classes": ["is_GroupFrame", "is_View", "_outlineStyle-none"],
+      "violations": [],
+      "borderRadius": {
+        "value": 9,
+        "unit": "px",
+        "knob": "medium",
+        "offScale": false
+      },
+      "rowGap": {
+        "value": 13,
+        "unit": "px",
+        "knob": "medium",
+        "offScale": false
+      }
+    },
+    {
+      "label": "div.is_View",
+      "tag": "div",
+      "id": "",
+      "classes": ["is_View"],
+      "violations": [],
+      "rowGap": {
+        "value": 13,
+        "unit": "px",
+        "knob": "medium",
+        "offScale": false
+      }
+    },
+    {
+      "label": "button.is_Button.is_View._outlineColor-0focus-visible-outlineColo114[role=button]",
+      "tag": "button",
+      "id": "",
+      "classes": [
+        "is_Button",
+        "is_View",
+        "_outlineColor-0focus-visible-outlineColo114",
+        "_outlineStyle-0focus-visible-solid",
+        "_outlineWidth-0focus-visible-2px"
+      ],
+      "violations": [],
+      "borderRadius": {
+        "value": 5,
+        "unit": "px",
+        "knob": "small",
+        "offScale": false
+      },
+      "borderWidth": {
+        "value": 1,
+        "unit": "px",
+        "knob": "medium",
+        "offScale": false
+      },
+      "rowGap": {
+        "value": 5,
+        "unit": "px",
+        "knob": "size-token(5px)",
+        "offScale": false
+      },
+      "paddingRight": {
+        "value": 7,
+        "unit": "px",
+        "knob": "size-token(7px)",
+        "offScale": false
+      },
+      "paddingLeft": {
+        "value": 7,
+        "unit": "px",
+        "knob": "size-token(7px)",
+        "offScale": false
+      }
+    },
+    {
+      "label": "span.is_SizableText.is_Text.font_body",
+      "tag": "span",
+      "id": "",
+      "classes": ["is_SizableText", "is_Text", "font_body", "_textOverflow-ellipsis"],
+      "violations": [],
+      "fontWeight": {
+        "value": 300,
+        "unit": "px",
+        "knob": "light",
+        "offScale": false
+      }
+    },
+    {
+      "label": "div.is_View",
+      "tag": "div",
+      "id": "",
+      "classes": ["is_View"],
+      "violations": [],
+      "rowGap": {
+        "value": 13,
+        "unit": "px",
+        "knob": "medium",
+        "offScale": false
+      }
+    }
+  ]
+}

package/src/audit/baselines/home.png ADDED Viewed

Binary file