ui-foundations 0.3.2 → 0.4.1

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

@@ -0,0 +1,715 @@
+{
+  "$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}"
+      },
+      "Border": {
+        "Color Default": {
+          "$type": "color",
+          "$value": "{Color.Border.Default}"
+        },
+        "Color Hover": {
+          "$type": "color",
+          "$value": "{Color.Border.Brand}"
+        },
+        "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}"
+        }
+      },
+      "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}"
+        }
+      },
+      "Text Color Placeholder": {
+        "$type": "color",
+        "$value": "{Color.Text.Subtle}"
+      },
+      "Height Min": {
+        "$type": "dimension",
+        "$value": {
+          "value": 40,
+          "unit": "px"
+        }
+      }
+    },
+    "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}"
+    },
+    "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}"
+    },
+    "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}"
+    },
+    "Text Color Disabled": {
+      "$type": "color",
+      "$value": "{Color.Text.Disabled}"
+    },
+    "Border Color Disabled": {
+      "$type": "color",
+      "$value": "{Color.Border.Disabled}"
+    },
+    "Container Background Disabled": {
+      "$type": "color",
+      "$value": "{Color.Fill.Disabled}"
+    },
+    "Overlay Hover": {
+      "$type": "color",
+      "$value": "{Color.Transparent}"
+    },
+    "Overlay Active": {
+      "$type": "color",
+      "$value": "{Color.Transparent}"
+    },
+    "Height": {
+      "$type": "dimension",
+      "$value": {
+        "value": 40,
+        "unit": "px"
+      }
+    },
+    "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}"
+        }
+      },
+      "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}"
+      },
+      "Border Size Hover": {
+        "$type": "number",
+        "$value": "{Size.Border.200}"
+      },
+      "Border Size Disabled": {
+        "$type": "number",
+        "$value": "{Size.Border.000}"
+      },
+      "Border Size Default": {
+        "$type": "number",
+        "$value": "{Size.Border.100}"
+      }
+    },
+    "Radio": {
+      "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}"
+      },
+      "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 Focus": {
+          "$type": "color",
+          "$value": "{Color.Border.Brand}"
+        },
+        "Color Disabled": {
+          "$type": "color",
+          "$value": "{Color.Border.Disabled}"
+        }
+      },
+      "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}"
+        }
+      },
+      "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}"
+      }
+    }
+  },
+  "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}"
+    }
+  },
+  "Badge": {
+    "Default": {
+      "Container": {
+        "Background": {
+          "$type": "color",
+          "$value": "{Color.Fill.Subtle}"
+        }
+      },
+      "Text Color": {
+        "$type": "color",
+        "$value": "{Color.Text.Default}"
+      }
+    },
+    "Brand": {
+      "Container": {
+        "Background": {
+          "$type": "color",
+          "$value": "{Color.Fill.Brand}"
+        }
+      },
+      "Text Color": {
+        "$type": "color",
+        "$value": "{Color.Text.Inverse}"
+      }
+    },
+    "Success": {
+      "Container": {
+        "Background": {
+          "$type": "color",
+          "$value": "{Color.Fill.Success}"
+        }
+      },
+      "Text Color": {
+        "$type": "color",
+        "$value": "{Color.Text.Inverse}"
+      }
+    },
+    "Danger": {
+      "Container": {
+        "Background": {
+          "$type": "color",
+          "$value": "{Color.Fill.Danger}"
+        }
+      },
+      "Text Color": {
+        "$type": "color",
+        "$value": "{Color.Text.Inverse}"
+      }
+    },
+    "Border Radius": {
+      "$type": "number",
+      "$value": "{Size.Radius.Full}"
+    },
+    "Font Family": {
+      "$type": "fontFamily",
+      "$value": "{Typography.Label.Font Family}"
+    },
+    "Font Weight": {
+      "$type": "fontWeight",
+      "$value": "{Font.Weight.700}"
+    },
+    "Font Size Sm": {
+      "$type": "number",
+      "$value": "{Font.Size.xs}"
+    },
+    "Font Size Md": {
+      "$type": "number",
+      "$value": "{Font.Size.sm}"
+    },
+    "Line Height Sm": {
+      "$type": "number",
+      "$value": "{Line Height.xs}"
+    },
+    "Line Height Md": {
+      "$type": "number",
+      "$value": "{Line Height.sm}"
+    },
+    "Padding Inline Sm": {
+      "$type": "number",
+      "$value": "{Size.Spacing.200}"
+    },
+    "Padding Inline Md": {
+      "$type": "number",
+      "$value": "{Size.Spacing.300}"
+    },
+    "Padding Block Sm": {
+      "$type": "number",
+      "$value": "{Size.Spacing.000}"
+    },
+    "Padding Block Md": {
+      "$type": "number",
+      "$value": "{Size.Spacing.100}"
+    },
+    "Gap": {
+      "$type": "number",
+      "$value": "{Size.Spacing.100}"
+    }
+  }
+}