npm - ui-foundations - Versions diffs - 0.4.1 → 0.7.0 - Mend

ui-foundations 0.4.1 → 0.7.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 (61) hide show

package/LICENSE +73 -0
package/README.md +49 -13
package/dist/core/index.css +1 -0
package/dist/macros/ui.njk +94 -0
package/dist/main.css +723 -138
package/dist/react/accordion.js +36 -0
package/dist/react/avatar.js +34 -0
package/dist/react/button.js +1 -12
package/dist/react/checkbox.js +3 -20
package/dist/react/divider.js +31 -0
package/dist/react/form.js +111 -0
package/dist/react/icon.js +1 -12
package/dist/react/index.js +7 -0
package/dist/react/input.js +7 -0
package/dist/react/radio.js +3 -20
package/dist/react/switch.js +3 -20
package/dist/react/tabs.js +72 -0
package/dist/react/textarea.js +45 -0
package/dist/react/tooltip.js +25 -0
package/dist/react/warn-dev.js +15 -0
package/dist/tokens/css/appearance-modes.tokens.mode-dark.css +12 -6
package/dist/tokens/css/appearance-modes.tokens.mode-light.css +7 -1
package/dist/tokens/css/components-ui.tokens.css +93 -73
package/dist/tokens/css/core-primitives.tokens.css +72 -1
package/dist/tokens/css/semantics-roles.tokens.css +1 -1
package/dist/tokens/css/themes-brands.tokens.brand-a.css +11 -11
package/dist/tokens/css/themes-brands.tokens.brand-b.css +1 -1
package/dist/tokens/css/themes-brands.tokens.brand-c.css +22 -0
package/dist/tokens/json/appearance-modes.tokens.mode-dark.json +24 -0
package/dist/tokens/json/appearance-modes.tokens.mode-light.json +24 -0
package/dist/tokens/json/components-ui.tokens.json +403 -269
package/dist/tokens/json/core-primitives.tokens.json +302 -0
package/dist/tokens/json/themes-brands.tokens.brand-a.json +10 -10
package/dist/tokens/json/themes-brands.tokens.brand-b.json +10 -10
package/dist/tokens/json/themes-brands.tokens.brand-c.json +81 -0
package/dist/tokens/tokens.yaml +2138 -578
package/dist/tokens/ts/appearance-modes.tokens.mode-dark.ts +12 -6
package/dist/tokens/ts/appearance-modes.tokens.mode-light.ts +7 -1
package/dist/tokens/ts/components-ui.tokens.ts +94 -74
package/dist/tokens/ts/core-primitives.tokens.ts +73 -2
package/dist/tokens/ts/semantics-roles.tokens.ts +1 -1
package/dist/tokens/ts/themes-brands.tokens.brand-a.ts +11 -11
package/dist/tokens/ts/themes-brands.tokens.brand-b.ts +1 -1
package/dist/tokens/ts/themes-brands.tokens.brand-c.ts +32 -0
package/dist/ui/index.css +7 -0
package/dist/ui/patterns/accordion.css +81 -0
package/dist/ui/patterns/avatar.css +57 -0
package/dist/ui/patterns/button.css +3 -3
package/dist/ui/patterns/checkbox.css +28 -28
package/dist/ui/patterns/divider.css +25 -0
package/dist/ui/patterns/form.css +112 -0
package/dist/ui/patterns/input.css +12 -12
package/dist/ui/patterns/label.css +1 -1
package/dist/ui/patterns/tabs.css +71 -0
package/dist/ui/patterns/textarea.css +50 -0
package/dist/ui/patterns/tooltip.css +64 -0
package/docs/agentic/README.md +1 -0
package/docs/agentic/skills/component-accessibility-audit.md +132 -0
package/docs/foundations/foundation-007-typography-selectors-and-specificity.md +1 -1
package/package.json +15 -3
package/dist/tokens/missing-tokens.json +0 -43

package/dist/tokens/json/core-primitives.tokens.json CHANGED Viewed

@@ -605,6 +605,48 @@
           "$value": "#00000000"
         }
       },
+      "Alpha Inverse": {
+        "100": {
+          "$type": "color",
+          "$value": "#ffffff1a"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#ffffff33"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#ffffff4d"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#ffffff66"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#ffffff80"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#ffffff99"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#ffffffb2"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#ffffffcc"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#ffffffe5"
+        },
+        "000": {
+          "$type": "color",
+          "$value": "#ffffff00"
+        }
+      },
       "000": {
         "$type": "color",
         "$value": "#ffffff"
@@ -871,6 +913,266 @@
           "$value": "#181816"
         }
       }
+    },
+    "Brand C": {
+      "Blue": {
+        "10": {
+          "$type": "color",
+          "$value": "#1b115c"
+        },
+        "20": {
+          "$type": "color",
+          "$value": "#072d92"
+        },
+        "30": {
+          "$type": "color",
+          "$value": "#0a3cc2"
+        },
+        "40": {
+          "$type": "color",
+          "$value": "#0c4bf3"
+        },
+        "50": {
+          "$type": "color",
+          "$value": "#3567f6"
+        },
+        "60": {
+          "$type": "color",
+          "$value": "#6d93f8"
+        },
+        "70": {
+          "$type": "color",
+          "$value": "#94b0fa"
+        },
+        "80": {
+          "$type": "color",
+          "$value": "#b6c8fc"
+        },
+        "90": {
+          "$type": "color",
+          "$value": "#d8e2fd"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#1b115c"
+        }
+      },
+      "Coolblue": {
+        "10": {
+          "$type": "color",
+          "$value": "#054461"
+        },
+        "20": {
+          "$type": "color",
+          "$value": "#076692"
+        },
+        "30": {
+          "$type": "color",
+          "$value": "#0a88c2"
+        },
+        "40": {
+          "$type": "color",
+          "$value": "#0caaf3"
+        },
+        "50": {
+          "$type": "color",
+          "$value": "#38b9f5"
+        },
+        "60": {
+          "$type": "color",
+          "$value": "#70cbf4"
+        },
+        "70": {
+          "$type": "color",
+          "$value": "#a9dff8"
+        },
+        "80": {
+          "$type": "color",
+          "$value": "#c6eafb"
+        },
+        "90": {
+          "$type": "color",
+          "$value": "#e2f4fd"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#0b4461"
+        }
+      },
+      "Green": {
+        "10": {
+          "$type": "color",
+          "$value": "#05423d"
+        },
+        "20": {
+          "$type": "color",
+          "$value": "#246f49"
+        },
+        "30": {
+          "$type": "color",
+          "$value": "#2ba168"
+        },
+        "40": {
+          "$type": "color",
+          "$value": "#30b675"
+        },
+        "50": {
+          "$type": "color",
+          "$value": "#61c48d"
+        },
+        "60": {
+          "$type": "color",
+          "$value": "#87d2a6"
+        },
+        "70": {
+          "$type": "color",
+          "$value": "#a9e0bf"
+        },
+        "80": {
+          "$type": "color",
+          "$value": "#c5e4cd"
+        },
+        "90": {
+          "$type": "color",
+          "$value": "#dff6eb"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#effbf5"
+        }
+      },
+      "Red": {
+        "10": {
+          "$type": "color",
+          "$value": "#600609"
+        },
+        "20": {
+          "$type": "color",
+          "$value": "#90090e"
+        },
+        "30": {
+          "$type": "color",
+          "$value": "#c00c12"
+        },
+        "40": {
+          "$type": "color",
+          "$value": "#f00f17"
+        },
+        "50": {
+          "$type": "color",
+          "$value": "#f23a41"
+        },
+        "60": {
+          "$type": "color",
+          "$value": "#f66f74"
+        },
+        "70": {
+          "$type": "color",
+          "$value": "#f89699"
+        },
+        "80": {
+          "$type": "color",
+          "$value": "#fab7b9"
+        },
+        "90": {
+          "$type": "color",
+          "$value": "#fde2e3"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#feecec"
+        }
+      },
+      "Orange": {
+        "10": {
+          "$type": "color",
+          "$value": "#663d00"
+        },
+        "20": {
+          "$type": "color",
+          "$value": "#995c00"
+        },
+        "30": {
+          "$type": "color",
+          "$value": "#cc7a00"
+        },
+        "40": {
+          "$type": "color",
+          "$value": "#ff9900"
+        },
+        "50": {
+          "$type": "color",
+          "$value": "#ffab2e"
+        },
+        "60": {
+          "$type": "color",
+          "$value": "#ffc266"
+        },
+        "70": {
+          "$type": "color",
+          "$value": "#ffd28f"
+        },
+        "80": {
+          "$type": "color",
+          "$value": "#ffe0b2"
+        },
+        "90": {
+          "$type": "color",
+          "$value": "#ffefd6"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#fff7eb"
+        }
+      },
+      "Purple": {
+        "10": {
+          "$type": "color",
+          "$value": "#39115c"
+        },
+        "20": {
+          "$type": "color",
+          "$value": "#510792"
+        },
+        "30": {
+          "$type": "color",
+          "$value": "#6c0ac2"
+        },
+        "40": {
+          "$type": "color",
+          "$value": "#870cf3"
+        },
+        "50": {
+          "$type": "color",
+          "$value": "#9c35f6"
+        },
+        "60": {
+          "$type": "color",
+          "$value": "#b76df8"
+        },
+        "70": {
+          "$type": "color",
+          "$value": "#ca94fa"
+        },
+        "80": {
+          "$type": "color",
+          "$value": "#dbb6fc"
+        },
+        "90": {
+          "$type": "color",
+          "$value": "#ecd8fd"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#f5ecfe"
+        }
+      },
+      "Midnight": {
+        "10": {
+          "$type": "color",
+          "$value": "#0b092d"
+        }
+      }
     }
   },
   "Shadow": {

package/dist/tokens/json/themes-brands.tokens.brand-a.json CHANGED Viewed

@@ -5,36 +5,36 @@
       "Functional": {
         "Success": {
           "$type": "color",
-          "$value": "{Color.Brand A.Green.600}"
+          "$value": "{Color.Brand C.Green.30}"
         },
         "Danger": {
           "$type": "color",
-          "$value": "{Color.Brand A.Red.600}"
+          "$value": "{Color.Brand C.Red.30}"
         },
         "Base": {
           "$type": "color",
-          "$value": "{Color.Brand A.Green.700}"
+          "$value": "{Color.Brand C.Blue.10}"
         },
         "Base Dark": {
           "$type": "color",
-          "$value": "{Color.Brand A.Green.900}"
+          "$value": "{Color.Brand C.Midnight.10}"
         }
       },
       "Primary": {
         "$type": "color",
-        "$value": "{Color.Brand A.Sand.700}"
+        "$value": "{Color.Brand C.Blue.40}"
       },
       "Accent": {
         "$type": "color",
-        "$value": "{Color.Brand A.Green.400}"
+        "$value": "{Color.Brand C.Coolblue.60}"
       },
       "Primary Dark": {
         "$type": "color",
-        "$value": "{Color.Brand A.Sand.900}"
+        "$value": "{Color.Brand C.Blue.10}"
       },
       "Accent Dark": {
         "$type": "color",
-        "$value": "{Color.Brand A.Green.600}"
+        "$value": "{Color.Brand C.Coolblue.10}"
       },
       "Subtle": {
         "$type": "color",
@@ -62,11 +62,11 @@
     "Corner": {
       "Button": {
         "$type": "number",
-        "$value": "{Size.Radius.700}"
+        "$value": "{Size.Radius.full}"
       },
       "Card": {
         "$type": "number",
-        "$value": "{Size.Radius.200}"
+        "$value": "{Size.Radius.300}"
       },
       "Modal": {
         "$type": "number",

package/dist/tokens/json/themes-brands.tokens.brand-b.json CHANGED Viewed

@@ -5,36 +5,36 @@
       "Functional": {
         "Success": {
           "$type": "color",
-          "$value": "{Color.Brand A.Green.600}"
+          "$value": "{Color.Brand C.Green.30}"
         },
         "Danger": {
           "$type": "color",
-          "$value": "{Color.Brand A.Red.600}"
+          "$value": "{Color.Brand C.Red.30}"
         },
         "Base": {
           "$type": "color",
-          "$value": "{Color.Brand A.Green.700}"
+          "$value": "{Color.Brand C.Blue.10}"
         },
         "Base Dark": {
           "$type": "color",
-          "$value": "{Color.Brand A.Green.900}"
+          "$value": "{Color.Brand C.Midnight.10}"
         }
       },
       "Primary": {
         "$type": "color",
-        "$value": "{Color.Brand A.Sand.700}"
+        "$value": "{Color.Brand C.Blue.40}"
       },
       "Accent": {
         "$type": "color",
-        "$value": "{Color.Brand A.Green.400}"
+        "$value": "{Color.Brand C.Coolblue.60}"
       },
       "Primary Dark": {
         "$type": "color",
-        "$value": "{Color.Brand A.Sand.900}"
+        "$value": "{Color.Brand C.Blue.10}"
       },
       "Accent Dark": {
         "$type": "color",
-        "$value": "{Color.Brand A.Green.600}"
+        "$value": "{Color.Brand C.Coolblue.10}"
       },
       "Subtle": {
         "$type": "color",
@@ -62,11 +62,11 @@
     "Corner": {
       "Button": {
         "$type": "number",
-        "$value": "{Size.Radius.700}"
+        "$value": "{Size.Radius.full}"
       },
       "Card": {
         "$type": "number",
-        "$value": "{Size.Radius.200}"
+        "$value": "{Size.Radius.300}"
       },
       "Modal": {
         "$type": "number",

package/dist/tokens/json/themes-brands.tokens.brand-c.json ADDED Viewed

@@ -0,0 +1,81 @@
+{
+  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
+  "Brand": {
+    "Color": {
+      "Functional": {
+        "Success": {
+          "$type": "color",
+          "$value": "{Color.Brand C.Green.30}"
+        },
+        "Danger": {
+          "$type": "color",
+          "$value": "{Color.Brand C.Red.30}"
+        },
+        "Base": {
+          "$type": "color",
+          "$value": "{Color.Brand C.Blue.10}"
+        },
+        "Base Dark": {
+          "$type": "color",
+          "$value": "{Color.Brand C.Midnight.10}"
+        }
+      },
+      "Primary": {
+        "$type": "color",
+        "$value": "{Color.Brand C.Blue.40}"
+      },
+      "Accent": {
+        "$type": "color",
+        "$value": "{Color.Brand C.Coolblue.60}"
+      },
+      "Primary Dark": {
+        "$type": "color",
+        "$value": "{Color.Brand C.Blue.10}"
+      },
+      "Accent Dark": {
+        "$type": "color",
+        "$value": "{Color.Brand C.Coolblue.10}"
+      },
+      "Subtle": {
+        "$type": "color",
+        "$value": "{Color.Neutral.500}"
+      },
+      "Subtle Dark": {
+        "$type": "color",
+        "$value": "{Color.Neutral.800}"
+      },
+      "Subtle Light": {
+        "$type": "color",
+        "$value": "{Color.Neutral.200}"
+      }
+    },
+    "Font": {
+      "Base": {
+        "$type": "string",
+        "$value": "{Font.Family.Sans}"
+      },
+      "Lead": {
+        "$type": "string",
+        "$value": "{Font.Family.Serif}"
+      }
+    },
+    "Corner": {
+      "Button": {
+        "$type": "number",
+        "$value": "{Size.Radius.full}"
+      },
+      "Card": {
+        "$type": "number",
+        "$value": "{Size.Radius.300}"
+      },
+      "Modal": {
+        "$type": "number",
+        "$value": "{Size.Radius.400}"
+      },
+      "Input": {
+        "$type": "number",
+        "$value": "{Size.Radius.200}"
+      }
+    }
+  }
+}