@devexpress/design-tokens-internal 261.0.2 → 261.0.3

package/tokens/components/core/checkbox/fluent.json

@@ -0,0 +1,384 @@
+{
+  "checkbox": {
+    "color": {
+      "checked": {
+        "default": {
+          "bg": {
+            "rest": {
+              "$type": "color",
+              "$value": "{color.surface.primary.default.rest}"
+            },
+            "hovered": {
+              "$type": "color",
+              "$value": "{color.surface.primary.default.hovered}"
+            },
+            "active": {
+              "$type": "color",
+              "$value": "{color.surface.primary.default.active}"
+            },
+            "read-only": {
+              "$type": "color",
+              "$value": "{color.content.neutral.subdued.disabled}"
+            },
+            "disabled": {
+              "$type": "color",
+              "$value": "{color.surface.transparent.rest}"
+            }
+          },
+          "border": {
+            "rest": {
+              "$type": "color",
+              "$value": "{color.border.transparent.rest}"
+            },
+            "disabled": {
+              "$type": "color",
+              "$value": "{color.border.neutral.accessible.disabled}"
+            },
+            "hovered": {
+              "$type": "color",
+              "$value": "{color.border.primary.compound.hovered}"
+            },
+            "active": {
+              "$type": "color",
+              "$value": "{color.border.primary.compound.active}"
+            },
+            "read-only": {
+              "$type": "color",
+              "$value": "{color.border.neutral.accessible.disabled}"
+            }
+          },
+          "icon": {
+            "rest": {
+              "$type": "color",
+              "$value": "{color.content.neutral.default.inverted.rest}"
+            },
+            "disabled": {
+              "$type": "color",
+              "$value": "{color.content.neutral.default.disabled}"
+            }
+          }
+        },
+        "on-surface": {
+          "bg": {
+            "rest": {
+              "$type": "color",
+              "$value": "{color.surface.neutral.default.on-surface.rest}"
+            },
+            "read-only": {
+              "$type": "color",
+              "$value": "{color.content.neutral.subdued.disabled}"
+            },
+            "disabled": {
+              "$type": "color",
+              "$value": "{color.surface.transparent.rest}"
+            }
+          },
+          "border": {
+            "rest": {
+              "$type": "color",
+              "$value": "{color.border.neutral.compound.on-surface.rest}"
+            },
+            "disabled": {
+              "$type": "color",
+              "$value": "{color.border.neutral.compound.on-surface.disabled}"
+            },
+            "read-only": {
+              "$type": "color",
+              "$value": "{color.border.transparent.rest}"
+            }
+          },
+          "icon": {
+            "rest": {
+              "$type": "color",
+              "$value": "{color.content.primary.default.rest}"
+            },
+            "disabled": {
+              "$type": "color",
+              "$value": "{color.content.neutral.compound.on-surface.disabled}"
+            },
+            "read-only": {
+              "$type": "color",
+              "$value": "{color.content.neutral.default.on-surface.rest}"
+            }
+          }
+        }
+      },
+      "unchecked": {
+        "default": {
+          "bg": {
+            "rest": {
+              "$type": "color",
+              "$value": "{color.surface.transparent.rest}"
+            }
+          },
+          "border": {
+            "rest": {
+              "$type": "color",
+              "$value": "{color.border.neutral.accessible.rest}"
+            },
+            "hovered": {
+              "$type": "color",
+              "$value": "{color.border.neutral.accessible.hovered}"
+            },
+            "active": {
+              "$type": "color",
+              "$value": "{color.border.neutral.accessible.active}"
+            },
+            "read-only": {
+              "$type": "color",
+              "$value": "{color.border.neutral.accessible.disabled}"
+            },
+            "disabled": {
+              "$type": "color",
+              "$value": "{color.border.neutral.accessible.disabled}"
+            }
+          },
+          "icon": {
+            "rest": {
+              "$type": "color",
+              "$value": "{color.content.transparent.rest}"
+            }
+          }
+        },
+        "on-surface": {
+          "bg": {
+            "rest": {
+              "$type": "color",
+              "$value": "{color.surface.transparent.rest}"
+            }
+          },
+          "border": {
+            "rest": {
+              "$type": "color",
+              "$value": "{color.border.neutral.compound.on-surface.rest}"
+            },
+            "read-only": {
+              "$type": "color",
+              "$value": "{color.border.neutral.compound.on-surface.disabled}"
+            },
+            "disabled": {
+              "$type": "color",
+              "$value": "{color.border.neutral.compound.on-surface.disabled}"
+            }
+          },
+          "icon": {
+            "rest": {
+              "$type": "color",
+              "$value": "{color.content.transparent.rest}"
+            }
+          }
+        }
+      },
+      "indeterminate": {
+        "default": {
+          "bg": {
+            "rest": {
+              "$type": "color",
+              "$value": "{color.surface.transparent.rest}"
+            },
+            "read-only": {
+              "$type": "color",
+              "$value": "{color.surface.neutral.default.rest}"
+            }
+          },
+          "border": {
+            "rest": {
+              "$type": "color",
+              "$value": "{color.border.primary.compound.rest}"
+            },
+            "hovered": {
+              "$type": "color",
+              "$value": "{color.border.primary.compound.hovered}"
+            },
+            "active": {
+              "$type": "color",
+              "$value": "{color.border.primary.compound.active}"
+            },
+            "read-only": {
+              "$type": "color",
+              "$value": "{color.border.neutral.accessible.disabled}"
+            },
+            "disabled": {
+              "$type": "color",
+              "$value": "{color.border.neutral.accessible.disabled}"
+            }
+          },
+          "icon": {
+            "rest": {
+              "$type": "color",
+              "$value": "{color.content.primary.compound.rest}"
+            },
+            "hovered": {
+              "$type": "color",
+              "$value": "{color.content.primary.compound.hovered}"
+            },
+            "active": {
+              "$type": "color",
+              "$value": "{color.content.primary.compound.active}"
+            },
+            "disabled": {
+              "$type": "color",
+              "$value": "{color.content.neutral.default.disabled}"
+            }
+          }
+        },
+        "on-surface": {
+          "bg": {
+            "rest": {
+              "$type": "color",
+              "$value": "{color.surface.transparent.rest}"
+            }
+          },
+          "border": {
+            "rest": {
+              "$type": "color",
+              "$value": "{color.border.neutral.compound.on-surface.rest}"
+            },
+            "read-only": {
+              "$type": "color",
+              "$value": "{color.border.neutral.compound.on-surface.disabled}"
+            },
+            "disabled": {
+              "$type": "color",
+              "$value": "{color.border.neutral.compound.on-surface.disabled}"
+            }
+          },
+          "icon": {
+            "rest": {
+              "$type": "color",
+              "$value": "{color.content.neutral.default.on-surface.rest}"
+            },
+            "disabled": {
+              "$type": "color",
+              "$value": "{color.content.neutral.default.on-surface.disabled}"
+            }
+          }
+        }
+      }
+    },
+    "layout": {
+      "checkbox": {
+        "horizontal": {
+          "small": {
+            "$type": "number",
+            "$value": "{spacing.10}"
+          },
+          "medium": {
+            "$type": "number",
+            "$value": "{spacing.10}"
+          },
+          "large": {
+            "$type": "number",
+            "$value": "{spacing.10}"
+          }
+        },
+        "vertical": {
+          "small": {
+            "$type": "number",
+            "$value": "{spacing.10}"
+          },
+          "medium": {
+            "$type": "number",
+            "$value": "{spacing.10}"
+          },
+          "large": {
+            "$type": "number",
+            "$value": "{spacing.10}"
+          }
+        }
+      },
+      "inner-box": {
+        "vertical": {
+          "small": {
+            "$type": "number",
+            "$value": "{spacing.40}"
+          },
+          "medium": {
+            "$type": "number",
+            "$value": "{spacing.80}"
+          },
+          "large": {
+            "$type": "number",
+            "$value": "{spacing.100}"
+          }
+        }
+      },
+      "outer-box": {
+        "horizontal": {
+          "small": {
+            "$type": "number",
+            "$value": "{spacing.40}"
+          },
+          "medium": {
+            "$type": "number",
+            "$value": "{spacing.80}"
+          },
+          "large": {
+            "$type": "number",
+            "$value": "{spacing.100}"
+          }
+        },
+        "gap": {
+          "small": {
+            "$type": "number",
+            "$value": "{spacing.80}"
+          },
+          "medium": {
+            "$type": "number",
+            "$value": "{spacing.80}"
+          },
+          "large": {
+            "$type": "number",
+            "$value": "{spacing.120}"
+          }
+        }
+      },
+      "text-box": {
+        "vertical": {
+          "small": {
+            "$type": "number",
+            "$value": "{spacing.40}"
+          },
+          "medium": {
+            "$type": "number",
+            "$value": "{spacing.60}"
+          },
+          "large": {
+            "$type": "number",
+            "$value": "{spacing.90}"
+          }
+        }
+      }
+    },
+    "borders": {
+      "border-radius": {
+        "small": {
+          "$type": "number",
+          "$value": "{border-radius.20}"
+        },
+        "medium": {
+          "$type": "number",
+          "$value": "{border-radius.20}"
+        },
+        "large": {
+          "$type": "number",
+          "$value": "{border-radius.20}"
+        }
+      },
+      "border-width": {
+        "small": {
+          "$type": "number",
+          "$value": "{border-width.10}"
+        },
+        "medium": {
+          "$type": "number",
+          "$value": "{border-width.10}"
+        },
+        "large": {
+          "$type": "number",
+          "$value": "{border-width.10}"
+        }
+      }
+    }
+  }
+}

package/tokens/components/core/collapse-button/fluent.json

@@ -0,0 +1,168 @@
+{
+  "collapse-button": {
+    "color": {
+      "default": {
+        "border": {
+          "rest": {
+            "$type": "color",
+            "$value": "{color.border.transparent.rest}"
+          }
+        },
+        "bg": {
+          "active": {
+            "$type": "color",
+            "$value": "{color.surface.neutral.default.active}"
+          },
+          "hovered": {
+            "$type": "color",
+            "$value": "{color.surface.neutral.default.hovered}"
+          },
+          "rest": {
+            "$type": "color",
+            "$value": "{color.surface.transparent.rest}"
+          }
+        },
+        "icon": {
+          "disabled": {
+            "$type": "color",
+            "$value": "{color.content.neutral.subdued.disabled}"
+          },
+          "rest": {
+            "$type": "color",
+            "$value": "{color.content.neutral.subdued.rest}"
+          },
+          "placeholder": {
+            "$type": "color",
+            "$value": "{color.content.transparent.rest}"
+          },
+          "active": {
+            "$type": "color",
+            "$value": "{color.content.neutral.default.active}"
+          },
+          "hovered": {
+            "$type": "color",
+            "$value": "{color.content.neutral.subdued.hovered}"
+          }
+        }
+      },
+      "on-surface": {
+        "bg": {
+          "rest": {
+            "$type": "color",
+            "$value": "{color.surface.neutral.alpha.on-surface.rest}"
+          },
+          "hovered": {
+            "$type": "color",
+            "$value": "{color.surface.neutral.alpha.on-surface.hovered}"
+          },
+          "active": {
+            "$type": "color",
+            "$value": "{color.surface.neutral.alpha.on-surface.active}"
+          },
+          "disabled": {
+            "$type": "color",
+            "$value": "{color.surface.neutral.alpha.on-surface.disabled}"
+          },
+          "placeholder": {
+            "$type": "color",
+            "$value": "{color.surface.transparent.rest}"
+          }
+        },
+        "border": {
+          "rest": {
+            "$type": "color",
+            "$value": "{color.surface.neutral.alpha.on-surface.rest}"
+          },
+          "placeholder": {
+            "$type": "color",
+            "$value": "{color.border.transparent.rest}"
+          }
+        },
+        "icon": {
+          "rest": {
+            "$type": "color",
+            "$value": "{color.content.neutral.default.on-surface.rest}"
+          },
+          "hovered": {
+            "$type": "color",
+            "$value": "{color.content.neutral.default.on-surface.hovered}"
+          },
+          "active": {
+            "$type": "color",
+            "$value": "{color.content.neutral.default.on-surface.active}"
+          },
+          "disabled": {
+            "$type": "color",
+            "$value": "{color.content.neutral.default.on-surface.disabled}"
+          },
+          "placeholder": {
+            "$type": "color",
+            "$value": "{color.content.transparent.rest}"
+          }
+        }
+      }
+    },
+    "borders": {
+      "border-radius": {
+        "medium": {
+          "$type": "number",
+          "$value": "{border-radius.40}"
+        },
+        "large": {
+          "$type": "number",
+          "$value": "{border-radius.40}"
+        },
+        "small": {
+          "$type": "number",
+          "$value": "{border-radius.40}"
+        }
+      },
+      "border-width": {
+        "medium": {
+          "$type": "number",
+          "$value": "{border-width.10}"
+        },
+        "small": {
+          "$type": "number",
+          "$value": "{border-width.10}"
+        },
+        "large": {
+          "$type": "number",
+          "$value": "{border-width.10}"
+        }
+      }
+    },
+    "layout": {
+      "inner-box": {
+        "vertical": {
+          "medium": {
+            "$type": "number",
+            "$value": "{spacing.50}"
+          },
+          "large": {
+            "$type": "number",
+            "$value": "{spacing.70}"
+          },
+          "small": {
+            "$type": "number",
+            "$value": "{spacing.30}"
+          }
+        },
+        "horizontal": {
+          "large": {
+            "$type": "number",
+            "$value": "{spacing.70}"
+          },
+          "medium": {
+            "$type": "number",
+            "$value": "{spacing.50}"
+          },
+          "small": {
+            "$type": "number",
+            "$value": "{spacing.30}"
+          }
+        }
+      }
+    }
+  }
+}

package/tokens/components/core/container-body/fluent.json

@@ -0,0 +1,90 @@
+{
+  "container-body": {
+    "color": {
+      "bg": {
+        "$type": "color",
+        "$value": "{color.surface.neutral.default.rest}"
+      }
+    },
+    "layout": {
+      "outer-box": {
+        "horizontal": {
+          "small": {
+            "$type": "number",
+            "$value": "{spacing.200}"
+          },
+          "medium": {
+            "$type": "number",
+            "$value": "{spacing.240}"
+          },
+          "large": {
+            "$type": "number",
+            "$value": "{spacing.280}"
+          }
+        },
+        "position-top": {
+          "vertical-end": {
+            "small": {
+              "$type": "number",
+              "$value": "{spacing.40}"
+            },
+            "medium": {
+              "$type": "number",
+              "$value": "{spacing.40}"
+            },
+            "large": {
+              "$type": "number",
+              "$value": "{spacing.40}"
+            }
+          }
+        },
+        "position-center": {
+          "vertical": {
+            "small": {
+              "$type": "number",
+              "$value": "{spacing.40}"
+            },
+            "medium": {
+              "$type": "number",
+              "$value": "{spacing.40}"
+            },
+            "large": {
+              "$type": "number",
+              "$value": "{spacing.40}"
+            }
+          }
+        },
+        "position-bottom": {
+          "vertical-start": {
+            "small": {
+              "$type": "number",
+              "$value": "{spacing.40}"
+            },
+            "medium": {
+              "$type": "number",
+              "$value": "{spacing.40}"
+            },
+            "large": {
+              "$type": "number",
+              "$value": "{spacing.40}"
+            }
+          }
+        },
+        "vertical": {
+          "small": {
+            "$type": "number",
+            "$value": "{spacing.200}"
+          },
+          "medium": {
+            "$type": "number",
+            "$value": "{spacing.240}"
+          },
+          "large": {
+            "$type": "number",
+            "$value": "{spacing.280}"
+          }
+        }
+      }
+    }
+  }
+}