ui-foundations 0.3.2 → 0.6.0

package/dist/tokens/json/components-ui.tokens.json

@@ -0,0 +1,713 @@
+{
+  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
+  "Button": {
+    "Border Size Hover": {
+      "$type": "number",
+      "$value": "{Size.Border.100}"
+    },
+    "Solid": {
+      "Border": {
+        "Color Default": {
+          "$type": "color",
+          "$value": "{Color.Border.Brand}"
+        },
+        "Color Hover": {
+          "$type": "color",
+          "$value": "{Color.Border.Brand}"
+        },
+        "Color Active": {
+          "$type": "color",
+          "$value": "{Color.Border.Brand}"
+        },
+        "Color Focus": {
+          "$type": "color",
+          "$value": "{Color.Border.Brand}"
+        }
+      },
+      "Text Color Default": {
+        "$type": "color",
+        "$value": "{Color.Text.Inverse}"
+      },
+      "Container": {
+        "Background Default": {
+          "$type": "color",
+          "$value": "{Color.Fill.Brand}"
+        },
+        "Background Hover": {
+          "$type": "color",
+          "$value": "{Color.Fill.Brand}"
+        },
+        "Background Active": {
+          "$type": "color",
+          "$value": "{Color.Fill.Brand}"
+        },
+        "Background Focus": {
+          "$type": "color",
+          "$value": "{Color.Fill.Brand}"
+        }
+      },
+      "Text Color Hover": {
+        "$type": "color",
+        "$value": "{Color.Text.Inverse}"
+      },
+      "Text Color Active": {
+        "$type": "color",
+        "$value": "{Color.Text.Inverse}"
+      }
+    },
+    "Outline": {
+      "Border": {
+        "Color Default": {
+          "$type": "color",
+          "$value": "{Color.Border.Brand}"
+        },
+        "Color Hover": {
+          "$type": "color",
+          "$value": "{Color.Border.Brand}"
+        },
+        "Color Active": {
+          "$type": "color",
+          "$value": "{Color.Border.Brand}"
+        },
+        "Color Focus": {
+          "$type": "color",
+          "$value": "{Color.Border.Brand}"
+        }
+      },
+      "Text Color Default": {
+        "$type": "color",
+        "$value": "{Color.Text.Brand}"
+      },
+      "Container": {
+        "Background Default": {
+          "$type": "color",
+          "$value": "{Color.Fill.Surface}"
+        },
+        "Background Active": {
+          "$type": "color",
+          "$value": "{Color.Fill.Surface}"
+        },
+        "Background Hover": {
+          "$type": "color",
+          "$value": "{Color.Fill.Surface}"
+        },
+        "Background Focus": {
+          "$type": "color",
+          "$value": "{Color.Fill.Surface}"
+        }
+      },
+      "Text Color Hover": {
+        "$type": "color",
+        "$value": "{Color.Text.Brand}"
+      },
+      "Text Color Active": {
+        "$type": "color",
+        "$value": "{Color.Text.Brand}"
+      }
+    },
+    "Ghost": {
+      "Container": {
+        "Background Default": {
+          "$type": "color",
+          "$value": "{Color.Fill.Surface}"
+        },
+        "Background Hover": {
+          "$type": "color",
+          "$value": "{Color.Fill.Surface}"
+        },
+        "Background Focus": {
+          "$type": "color",
+          "$value": "{Color.Fill.Surface}"
+        },
+        "Background Active": {
+          "$type": "color",
+          "$value": "{Color.Fill.Surface}"
+        }
+      },
+      "Border": {
+        "Color Default": {
+          "$type": "color",
+          "$value": "{Color.Transparent}"
+        },
+        "Color Hover": {
+          "$type": "color",
+          "$value": "{Color.Transparent}"
+        },
+        "Color Focus": {
+          "$type": "color",
+          "$value": "{Color.Transparent}"
+        },
+        "Color Active": {
+          "$type": "color",
+          "$value": "{Color.Transparent}"
+        }
+      },
+      "Text Color Default": {
+        "$type": "color",
+        "$value": "{Color.Text.Brand}"
+      },
+      "Text Color Hover": {
+        "$type": "color",
+        "$value": "{Color.Text.Brand}"
+      },
+      "Text Color Active": {
+        "$type": "color",
+        "$value": "{Color.Text.Brand}"
+      }
+    },
+    "Border Size Default": {
+      "$type": "number",
+      "$value": "{Size.Border.100}"
+    },
+    "Font Family": {
+      "$type": "fontFamily",
+      "$value": "{Brand.Font.Lead}"
+    },
+    "Line Height": {
+      "$type": "number",
+      "$value": "{Typography.Label.Line Height}"
+    },
+    "Border Radius": {
+      "$type": "number",
+      "$value": "{Brand.Corner.Button}"
+    },
+    "Font Weight": {
+      "$type": "fontWeight",
+      "$value": "{Typography.Label.Font Weight}"
+    },
+    "Font Size": {
+      "$type": "number",
+      "$value": "{Typography.Label.Font Size}"
+    },
+    "Padding Inline": {
+      "$type": "number",
+      "$value": "{Size.Spacing.400}"
+    },
+    "Gap": {
+      "$type": "number",
+      "$value": "{Size.Spacing.200}"
+    },
+    "Padding Block": {
+      "$type": "number",
+      "$value": "{Size.Spacing.200}"
+    },
+    "Container Background Disabled": {
+      "$type": "color",
+      "$value": "{Color.Fill.Disabled}"
+    },
+    "Border Color Disabled": {
+      "$type": "color",
+      "$value": "{Color.Border.Disabled}"
+    },
+    "Text Color Disabled": {
+      "$type": "color",
+      "$value": "{Color.Text.Disabled}"
+    },
+    "Border Size Active": {
+      "$type": "number",
+      "$value": "{Size.Border.200}"
+    },
+    "Overlay Hover": {
+      "$type": "color",
+      "$value": "{Color.Overlay.Hover}"
+    },
+    "Overlay Active": {
+      "$type": "color",
+      "$value": "{Color.Overlay.Active}"
+    },
+    "Padding Inline Icon Only": {
+      "$type": "number",
+      "$value": "{Size.Spacing.200}"
+    },
+    "Height Min": {
+      "$type": "dimension",
+      "$value": {
+        "value": 40,
+        "unit": "px"
+      }
+    },
+    "Group": {
+      "Gap": {
+        "$type": "number",
+        "$value": "{Size.Spacing.200}"
+      }
+    },
+    "Width Min": {
+      "$type": "dimension",
+      "$value": {
+        "value": 40,
+        "unit": "px"
+      }
+    }
+  },
+  "Modal": {
+    "Backdrop": {
+      "Color": {
+        "$type": "color",
+        "$value": "{Color.Overlay.Backdrop}"
+      }
+    },
+    "Surface": {
+      "Color": {
+        "$type": "color",
+        "$value": "{Color.Fill.Surface}"
+      },
+      "Border Radius": {
+        "$type": "number",
+        "$value": "{Brand.Corner.Modal}"
+      }
+    }
+  },
+  "Input": {
+    "Text": {
+      "Text Color Default": {
+        "$type": "color",
+        "$value": "{Color.Text.Default}"
+      },
+      "Text Color Hover": {
+        "$type": "color",
+        "$value": "{Color.Text.Default}"
+      },
+      "Text Color Active": {
+        "$type": "color",
+        "$value": "{Color.Text.Default}"
+      },
+      "Text Color Disabled": {
+        "$type": "color",
+        "$value": "{Color.Text.Disabled}"
+      },
+      "Text Color Placeholder": {
+        "$type": "color",
+        "$value": "{Color.Text.Subtle}"
+      }
+    },
+    "Border": {
+      "Border Color Default": {
+        "$type": "color",
+        "$value": "{Color.Border.Default}"
+      },
+      "Border Color Hover": {
+        "$type": "color",
+        "$value": "{Color.Border.Brand}"
+      },
+      "Border Color Active": {
+        "$type": "color",
+        "$value": "{Color.Border.Brand}"
+      },
+      "Border Color Focus": {
+        "$type": "color",
+        "$value": "{Color.Border.Brand}"
+      },
+      "Border Size Default": {
+        "$type": "number",
+        "$value": "{Size.Border.100}"
+      },
+      "Border Size Hover": {
+        "$type": "number",
+        "$value": "{Size.Border.100}"
+      },
+      "Border Size Active": {
+        "$type": "number",
+        "$value": "{Size.Border.200}"
+      },
+      "Border Radius": {
+        "$type": "number",
+        "$value": "{Brand.Corner.Input}"
+      },
+      "Border Color Disabled": {
+        "$type": "color",
+        "$value": "{Color.Border.Disabled}"
+      },
+      "Border Color Invalid": {
+        "$type": "color",
+        "$value": "{Color.Border.Danger}"
+      },
+      "Border Color Valid": {
+        "$type": "color",
+        "$value": "{Color.Border.Strong}"
+      }
+    },
+    "Font Family": {
+      "$type": "fontFamily",
+      "$value": "{Brand.Font.Base}"
+    },
+    "Font Weight": {
+      "$type": "fontWeight",
+      "$value": "{Typography.Body.Font Weight}"
+    },
+    "Font Size": {
+      "$type": "number",
+      "$value": "{Typography.Label.Font Size}"
+    },
+    "Line Height": {
+      "$type": "number",
+      "$value": "{Typography.Body.Line Height}"
+    },
+    "Container": {
+      "Background Default": {
+        "$type": "color",
+        "$value": "{Color.Fill.Surface}"
+      },
+      "Background Hover": {
+        "$type": "color",
+        "$value": "{Color.Fill.Surface}"
+      },
+      "Background Focus": {
+        "$type": "color",
+        "$value": "{Color.Fill.Surface}"
+      },
+      "Background Active": {
+        "$type": "color",
+        "$value": "{Color.Fill.Surface}"
+      },
+      "Background Disabled": {
+        "$type": "color",
+        "$value": "{Color.Fill.Disabled}"
+      }
+    },
+    "Padding Inline": {
+      "$type": "number",
+      "$value": "{Size.Spacing.200}"
+    },
+    "Padding Inline Icon Only": {
+      "$type": "number",
+      "$value": "{Size.Spacing.200}"
+    },
+    "Padding Block": {
+      "$type": "number",
+      "$value": "{Size.Spacing.200}"
+    },
+    "Gap": {
+      "$type": "number",
+      "$value": "{Size.Spacing.200}"
+    },
+    "Overlay Hover": {
+      "$type": "color",
+      "$value": "{Color.Transparent}"
+    },
+    "Overlay Active": {
+      "$type": "color",
+      "$value": "{Color.Transparent}"
+    },
+    "Height": {
+      "$type": "dimension",
+      "$value": {
+        "value": 40,
+        "unit": "px"
+      }
+    },
+    "Height Min": {
+      "$type": "dimension",
+      "$value": {
+        "value": 40,
+        "unit": "px"
+      }
+    }
+  },
+  "Form": {
+    "Group": {
+      "Gap": {
+        "$type": "number",
+        "$value": "{Size.Spacing.400}"
+      },
+      "Title Color": {
+        "$type": "color",
+        "$value": "{Color.Text.Default}"
+      }
+    },
+    "Padding Inline": {
+      "$type": "number",
+      "$value": "{Size.Spacing.400}"
+    },
+    "Padding Block": {
+      "$type": "number",
+      "$value": "{Size.Spacing.400}"
+    },
+    "Border Radius": {
+      "$type": "number",
+      "$value": "{Brand.Corner.Card}"
+    },
+    "Gap": {
+      "$type": "number",
+      "$value": "{Size.Spacing.400}"
+    },
+    "Field": {
+      "Gap": {
+        "$type": "number",
+        "$value": "{Size.Spacing.200}"
+      },
+      "Helper Text Color Default": {
+        "$type": "color",
+        "$value": "{Color.Text.Subtle}"
+      },
+      "Helper Text Color Invalid": {
+        "$type": "color",
+        "$value": "{Color.Text.Danger}"
+      }
+    },
+    "Container Background": {
+      "$type": "color",
+      "$value": "{Color.Fill.Surface}"
+    },
+    "Container Border Color": {
+      "$type": "color",
+      "$value": "{Color.Border.Subtle}"
+    },
+    "Border Size": {
+      "$type": "number",
+      "$value": "{Size.Border.100}"
+    }
+  },
+  "Checkbox": {
+    "Text Color Default": {
+      "$type": "color",
+      "$value": "{Color.Text.Default}"
+    },
+    "Text Color Hover": {
+      "$type": "color",
+      "$value": "{Color.Text.Strong}"
+    },
+    "Text Color Active": {
+      "$type": "color",
+      "$value": "{Color.Text.Inverse}"
+    },
+    "Border": {
+      "Color Default": {
+        "$type": "color",
+        "$value": "{Color.Border.Subtle}"
+      },
+      "Color Hover": {
+        "$type": "color",
+        "$value": "{Color.Border.Strong}"
+      },
+      "Color Active": {
+        "$type": "color",
+        "$value": "{Color.Border.Brand}"
+      },
+      "Color Focus": {
+        "$type": "color",
+        "$value": "{Color.Border.Brand}"
+      },
+      "Color Invalid": {
+        "$type": "color",
+        "$value": "{Color.Border.Danger}"
+      },
+      "Color Valid": {
+        "$type": "color",
+        "$value": "{Color.Border.Strong}"
+      },
+      "Color Disabled": {
+        "$type": "color",
+        "$value": "{Color.Border.Disabled}"
+      },
+      "Size Hover": {
+        "$type": "number",
+        "$value": "{Size.Border.200}"
+      },
+      "Size Disabled": {
+        "$type": "number",
+        "$value": "{Size.Border.000}"
+      },
+      "Size Default": {
+        "$type": "number",
+        "$value": "{Size.Border.100}"
+      }
+    },
+    "Container": {
+      "Background Default": {
+        "$type": "color",
+        "$value": "{Color.Fill.Surface}"
+      },
+      "Background Hover": {
+        "$type": "color",
+        "$value": "{Color.Fill.Surface}"
+      },
+      "Background Focus": {
+        "$type": "color",
+        "$value": "{Color.Fill.Surface}"
+      },
+      "Background Active": {
+        "$type": "color",
+        "$value": "{Color.Fill.Brand}"
+      },
+      "Background Disabled": {
+        "$type": "color",
+        "$value": "{Color.Fill.Disabled}"
+      }
+    },
+    "Text Color Disabled": {
+      "$type": "color",
+      "$value": "{Color.Text.Disabled}"
+    }
+  },
+  "Radio": {
+    "Text Color Default": {
+      "$type": "color",
+      "$value": "{Color.Text.Default}"
+    },
+    "Text Color Disabled": {
+      "$type": "color",
+      "$value": "{Color.Text.Disabled}"
+    },
+    "Border": {
+      "Color Default": {
+        "$type": "color",
+        "$value": "{Color.Border.Subtle}"
+      },
+      "Color Hover": {
+        "$type": "color",
+        "$value": "{Color.Border.Strong}"
+      },
+      "Color Active": {
+        "$type": "color",
+        "$value": "{Color.Border.Brand}"
+      },
+      "Color Disabled": {
+        "$type": "color",
+        "$value": "{Color.Border.Disabled}"
+      }
+    },
+    "Container": {
+      "Background Default": {
+        "$type": "color",
+        "$value": "{Color.Fill.Surface}"
+      },
+      "Background Disabled": {
+        "$type": "color",
+        "$value": "{Color.Fill.Disabled}"
+      }
+    },
+    "Border Size Default": {
+      "$type": "number",
+      "$value": "{Size.Border.100}"
+    },
+    "Border Size Hover": {
+      "$type": "number",
+      "$value": "{Size.Border.200}"
+    },
+    "Border Size Disabled": {
+      "$type": "number",
+      "$value": "{Size.Border.000}"
+    }
+  },
+  "Badge": {
+    "Default": {
+      "Text Color": {
+        "$type": "color",
+        "$value": "{Color.Text.Default}"
+      },
+      "Border Color": {
+        "$type": "color",
+        "$value": "{Color.Transparent}"
+      },
+      "Container": {
+        "Background": {
+          "$type": "color",
+          "$value": "{Color.Fill.Subtle}"
+        }
+      }
+    },
+    "Brand": {
+      "Text Color": {
+        "$type": "color",
+        "$value": "{Color.Text.Inverse}"
+      },
+      "Border Color": {
+        "$type": "color",
+        "$value": "{Color.Transparent}"
+      },
+      "Container": {
+        "Background": {
+          "$type": "color",
+          "$value": "{Color.Fill.Brand}"
+        }
+      }
+    },
+    "Success": {
+      "Text Color": {
+        "$type": "color",
+        "$value": "{Color.Text.Inverse}"
+      },
+      "Border Color": {
+        "$type": "color",
+        "$value": "{Color.Transparent}"
+      },
+      "Container": {
+        "Background": {
+          "$type": "color",
+          "$value": "{Color.Fill.Success}"
+        }
+      }
+    },
+    "Font Family": {
+      "$type": "fontFamily",
+      "$value": "{Brand.Font.Lead}"
+    },
+    "Font Weight": {
+      "$type": "fontWeight",
+      "$value": "{Typography.Label.Font Weight}"
+    },
+    "Font Size": {
+      "$type": "number",
+      "$value": "{Typography.Label.Font Size}"
+    },
+    "Line Height": {
+      "$type": "number",
+      "$value": "{Typography.Label.Line Height}"
+    },
+    "Border Size Default": {
+      "$type": "number",
+      "$value": "{Size.Border.100}"
+    },
+    "Border Radius": {
+      "$type": "number",
+      "$value": "{Brand.Corner.Input}"
+    },
+    "Padding Inline": {
+      "$type": "number",
+      "$value": "{Size.Spacing.400}"
+    },
+    "Padding Inline Icon Only": {
+      "$type": "number",
+      "$value": "{Size.Spacing.200}"
+    },
+    "Padding Block": {
+      "$type": "number",
+      "$value": "{Size.Spacing.200}"
+    },
+    "Gap": {
+      "$type": "number",
+      "$value": "{Size.Spacing.200}"
+    },
+    "Height Min": {
+      "$type": "dimension",
+      "$value": {
+        "value": 40,
+        "unit": "px"
+      }
+    },
+    "Width Min": {
+      "$type": "dimension",
+      "$value": {
+        "value": 40,
+        "unit": "px"
+      }
+    },
+    "Danger": {
+      "Container": {
+        "Background": {
+          "$type": "color",
+          "$value": "{Color.Fill.Danger}"
+        },
+        "Border Color": {
+          "$type": "color",
+          "$value": "{Color.Transparent}"
+        }
+      },
+      "Text Color": {
+        "$type": "color",
+        "$value": "{Color.Text.Inverse}"
+      }
+    }
+  }
+}