@x12i/tokens 0.0.0-stage → 1.0.0

package/src/dtcg/semantic/base.json

@@ -0,0 +1,113 @@
+{
+  "$description": "Semantic tokens that do not change with theme or density.",
+  "text": {
+    "display": {
+      "size": { "$type": "dimension", "$value": "{font.size.48}" },
+      "lineHeight": { "$type": "dimension", "$value": "{font.lineHeight.56}" },
+      "weight": { "$type": "fontWeight", "$value": "{font.weight.semibold}" }
+    },
+    "h1": {
+      "size": { "$type": "dimension", "$value": "{font.size.30}" },
+      "lineHeight": { "$type": "dimension", "$value": "{font.lineHeight.38}" },
+      "weight": { "$type": "fontWeight", "$value": "{font.weight.semibold}" }
+    },
+    "h2": {
+      "size": { "$type": "dimension", "$value": "{font.size.24}" },
+      "lineHeight": { "$type": "dimension", "$value": "{font.lineHeight.32}" },
+      "weight": { "$type": "fontWeight", "$value": "{font.weight.semibold}" }
+    },
+    "h3": {
+      "size": { "$type": "dimension", "$value": "{font.size.20}" },
+      "lineHeight": { "$type": "dimension", "$value": "{font.lineHeight.28}" },
+      "weight": { "$type": "fontWeight", "$value": "{font.weight.semibold}" }
+    },
+    "h4": {
+      "size": { "$type": "dimension", "$value": "{font.size.16}" },
+      "lineHeight": { "$type": "dimension", "$value": "{font.lineHeight.24}" },
+      "weight": { "$type": "fontWeight", "$value": "{font.weight.semibold}" }
+    },
+    "body": {
+      "size": { "$type": "dimension", "$value": "{font.size.14}" },
+      "lineHeight": { "$type": "dimension", "$value": "{font.lineHeight.22}" },
+      "weight": { "$type": "fontWeight", "$value": "{font.weight.regular}" }
+    },
+    "label": {
+      "size": { "$type": "dimension", "$value": "{font.size.13}" },
+      "lineHeight": { "$type": "dimension", "$value": "{font.lineHeight.20}" },
+      "weight": { "$type": "fontWeight", "$value": "{font.weight.medium}" }
+    },
+    "caption": {
+      "size": { "$type": "dimension", "$value": "{font.size.12}" },
+      "lineHeight": { "$type": "dimension", "$value": "{font.lineHeight.16}" },
+      "weight": { "$type": "fontWeight", "$value": "{font.weight.regular}" }
+    },
+    "code": {
+      "size": { "$type": "dimension", "$value": "{font.size.13}" },
+      "lineHeight": { "$type": "dimension", "$value": "{font.lineHeight.20}" },
+      "weight": { "$type": "fontWeight", "$value": "{font.weight.regular}" }
+    }
+  },
+  "radius": {
+    "$type": "dimension",
+    "control": { "$value": "{radius.6}" },
+    "panel": { "$value": "{radius.8}" },
+    "overlay": { "$value": "{radius.12}" },
+    "pill": { "$value": "{radius.full}" }
+  },
+  "border": {
+    "width": {
+      "$type": "dimension",
+      "default": { "$value": "{border.width.1}" },
+      "emphasis": { "$value": "{border.width.2}" },
+      "focus": { "$value": "{border.width.2}" }
+    }
+  },
+  "size": {
+    "$type": "dimension",
+    "icon": {
+      "xs": { "$value": "{size.12}" },
+      "sm": { "$value": "{size.16}" },
+      "md": { "$value": "{size.20}" },
+      "lg": { "$value": "{size.24}" }
+    },
+    "target": {
+      "min": { "$value": "{size.24}" },
+      "touch": { "$value": "{size.44}" }
+    }
+  },
+  "icon": {
+    "strokeWidth": { "$type": "number", "$value": 1.5 }
+  },
+  "duration": {
+    "$type": "duration",
+    "instant": { "$value": "90ms" },
+    "fast": { "$value": "150ms" },
+    "base": { "$value": "240ms" },
+    "slow": { "$value": "400ms" }
+  },
+  "easing": {
+    "$type": "cubicBezier",
+    "standard": { "$value": [0.2, 0, 0, 1] },
+    "enter": { "$value": [0, 0, 0, 1] },
+    "exit": { "$value": [0.3, 0, 1, 1] }
+  },
+  "z": {
+    "$type": "number",
+    "base": { "$value": 0 },
+    "sticky": { "$value": 10 },
+    "dropdown": { "$value": 100 },
+    "overlay": { "$value": 200 },
+    "modal": { "$value": 300 },
+    "toast": { "$value": 400 },
+    "tooltip": { "$value": 500 }
+  },
+  "breakpoint": {
+    "$type": "dimension",
+    "xs": { "$value": "480px" },
+    "sm": { "$value": "640px" },
+    "md": { "$value": "768px" },
+    "lg": { "$value": "1024px" },
+    "xl": { "$value": "1280px" },
+    "2xl": { "$value": "1536px" }
+  }
+}

package/src/dtcg/semantic/density/comfortable.json

@@ -0,0 +1,26 @@
+{
+  "$description": "Comfortable density: one step larger than default.",
+  "size": {
+    "control": {
+      "$type": "dimension",
+      "xs": { "$value": "{size.28}" },
+      "sm": { "$value": "{size.32}" },
+      "md": { "$value": "{size.40}" },
+      "lg": { "$value": "{size.48}" },
+      "xl": { "$value": "{size.56}" }
+    }
+  },
+  "space": {
+    "control": {
+      "inline": {
+        "$type": "dimension",
+        "xs": { "$value": "{space.3}" },
+        "sm": { "$value": "{space.3}" },
+        "md": { "$value": "{space.4}" },
+        "lg": { "$value": "{space.5}" },
+        "xl": { "$value": "{space.6}" }
+      },
+      "gap": { "$type": "dimension", "$value": "{space.3}" }
+    }
+  }
+}

package/src/dtcg/semantic/density/compact.json

@@ -0,0 +1,26 @@
+{
+  "$description": "Compact density: one step smaller than default.",
+  "size": {
+    "control": {
+      "$type": "dimension",
+      "xs": { "$value": "{size.20}" },
+      "sm": { "$value": "{size.24}" },
+      "md": { "$value": "{size.28}" },
+      "lg": { "$value": "{size.32}" },
+      "xl": { "$value": "{size.40}" }
+    }
+  },
+  "space": {
+    "control": {
+      "inline": {
+        "$type": "dimension",
+        "xs": { "$value": "{space.1}" },
+        "sm": { "$value": "{space.1}" },
+        "md": { "$value": "{space.2}" },
+        "lg": { "$value": "{space.3}" },
+        "xl": { "$value": "{space.4}" }
+      },
+      "gap": { "$type": "dimension", "$value": "{space.1}" }
+    }
+  }
+}

package/src/dtcg/semantic/density/default.json

@@ -0,0 +1,26 @@
+{
+  "$description": "Default density. Compact removes one step from control height and padding; comfortable adds one.",
+  "size": {
+    "control": {
+      "$type": "dimension",
+      "xs": { "$value": "{size.24}" },
+      "sm": { "$value": "{size.28}" },
+      "md": { "$value": "{size.32}" },
+      "lg": { "$value": "{size.40}" },
+      "xl": { "$value": "{size.48}" }
+    }
+  },
+  "space": {
+    "control": {
+      "inline": {
+        "$type": "dimension",
+        "xs": { "$value": "{space.2}" },
+        "sm": { "$value": "{space.2}" },
+        "md": { "$value": "{space.3}" },
+        "lg": { "$value": "{space.4}" },
+        "xl": { "$value": "{space.5}" }
+      },
+      "gap": { "$type": "dimension", "$value": "{space.2}" }
+    }
+  }
+}

package/src/dtcg/semantic/themes/dark.json

@@ -0,0 +1,93 @@
+{
+  "$description": "Dark theme. Elevation is a lighter surface, not a shadow (spec section 3).",
+  "color": {
+    "$type": "color",
+    "bg": {
+      "canvas": { "$value": "{color.neutral.1}" },
+      "surface": { "$value": "{color.neutral.2}" },
+      "raised": { "$value": "{color.neutral.3}" },
+      "overlay": { "$value": "{color.neutral.4}" },
+      "inverse": { "$value": "{color.neutral.12}" }
+    },
+    "border": {
+      "subtle": { "$value": "{color.neutral.4}" },
+      "default": { "$value": "{color.neutral.8}" },
+      "strong": { "$value": "{color.neutral.9}" },
+      "focus": { "$value": "{color.accent.9}" }
+    },
+    "text": {
+      "primary": { "$value": "{color.neutral.12}" },
+      "secondary": { "$value": "{color.neutral.10}" },
+      "tertiary": { "$value": "{color.neutral.9}" },
+      "disabled": { "$value": "{color.neutral.6}" },
+      "inverse": { "$value": "{color.neutral.1}" },
+      "link": { "$value": "{color.accent.10}" }
+    },
+    "accent": {
+      "default": { "$value": "{color.accent.8}" },
+      "hover": { "$value": "{color.accent.7}" },
+      "active": { "$value": "{color.accent.6}" },
+      "subtle": { "$value": "{color.accent.3}" },
+      "on-accent": { "$value": "{color.white}" }
+    },
+    "status": {
+      "success": {
+        "background": { "$value": "{color.success.2}" },
+        "foreground": { "$value": "{color.success.10}" },
+        "border": { "$value": "{color.success.6}" }
+      },
+      "warning": {
+        "background": { "$value": "{color.warning.2}" },
+        "foreground": { "$value": "{color.warning.10}" },
+        "border": { "$value": "{color.warning.6}" }
+      },
+      "danger": {
+        "background": { "$value": "{color.danger.2}" },
+        "foreground": { "$value": "{color.danger.10}" },
+        "border": { "$value": "{color.danger.6}" }
+      },
+      "info": {
+        "background": { "$value": "{color.info.2}" },
+        "foreground": { "$value": "{color.info.10}" },
+        "border": { "$value": "{color.info.6}" }
+      }
+    },
+    "chart": {
+      "axis": { "$value": "{color.neutral.10}" },
+      "grid": { "$value": "{color.neutral.4}" },
+      "muted": { "$value": "{color.neutral.8}" },
+      "reference": { "$value": "{color.neutral.9}" },
+      "categorical": {
+        "1": { "$value": "{color.categorical.dark.1}" },
+        "2": { "$value": "{color.categorical.dark.2}" },
+        "3": { "$value": "{color.categorical.dark.3}" },
+        "4": { "$value": "{color.categorical.dark.4}" },
+        "5": { "$value": "{color.categorical.dark.5}" },
+        "6": { "$value": "{color.categorical.dark.6}" },
+        "7": { "$value": "{color.categorical.dark.7}" },
+        "8": { "$value": "{color.categorical.dark.8}" }
+      },
+      "good": { "$value": "{color.success.8}" },
+      "warning": { "$value": "{color.warning.8}" },
+      "critical": { "$value": "{color.danger.8}" }
+    },
+    "selection": { "$value": "{color.accent.4}" },
+    "highlight": { "$value": "{color.warning.4}" },
+    "scrim": { "$value": "#000000b3" }
+  },
+  "shadow": {
+    "$type": "shadow",
+    "raised": {
+      "$value": { "color": "#ffffff14", "offsetX": "0px", "offsetY": "0px", "blur": "0px", "spread": "1px" }
+    },
+    "overlay": {
+      "$value": { "color": "#00000080", "offsetX": "0px", "offsetY": "8px", "blur": "24px", "spread": "0px" }
+    },
+    "modal": {
+      "$value": { "color": "#000000a6", "offsetX": "0px", "offsetY": "16px", "blur": "48px", "spread": "0px" }
+    },
+    "toast": {
+      "$value": { "color": "#00000080", "offsetX": "0px", "offsetY": "8px", "blur": "24px", "spread": "0px" }
+    }
+  }
+}

package/src/dtcg/semantic/themes/hc.json

@@ -0,0 +1,93 @@
+{
+  "$description": "High contrast theme. Black canvas, white text, bright accents. Text pairs target 7:1.",
+  "color": {
+    "$type": "color",
+    "bg": {
+      "canvas": { "$value": "{color.black}" },
+      "surface": { "$value": "{color.black}" },
+      "raised": { "$value": "{color.neutral.1}" },
+      "overlay": { "$value": "{color.neutral.2}" },
+      "inverse": { "$value": "{color.white}" }
+    },
+    "border": {
+      "subtle": { "$value": "{color.neutral.8}" },
+      "default": { "$value": "{color.neutral.10}" },
+      "strong": { "$value": "{color.white}" },
+      "focus": { "$value": "{color.warning.10}" }
+    },
+    "text": {
+      "primary": { "$value": "{color.white}" },
+      "secondary": { "$value": "{color.neutral.11}" },
+      "tertiary": { "$value": "{color.neutral.10}" },
+      "disabled": { "$value": "{color.neutral.8}" },
+      "inverse": { "$value": "{color.black}" },
+      "link": { "$value": "{color.accent.10}" }
+    },
+    "accent": {
+      "default": { "$value": "{color.accent.10}" },
+      "hover": { "$value": "{color.accent.11}" },
+      "active": { "$value": "{color.accent.12}" },
+      "subtle": { "$value": "{color.accent.1}" },
+      "on-accent": { "$value": "{color.black}" }
+    },
+    "status": {
+      "success": {
+        "background": { "$value": "{color.black}" },
+        "foreground": { "$value": "{color.success.10}" },
+        "border": { "$value": "{color.success.10}" }
+      },
+      "warning": {
+        "background": { "$value": "{color.black}" },
+        "foreground": { "$value": "{color.warning.10}" },
+        "border": { "$value": "{color.warning.10}" }
+      },
+      "danger": {
+        "background": { "$value": "{color.black}" },
+        "foreground": { "$value": "{color.danger.10}" },
+        "border": { "$value": "{color.danger.10}" }
+      },
+      "info": {
+        "background": { "$value": "{color.black}" },
+        "foreground": { "$value": "{color.info.10}" },
+        "border": { "$value": "{color.info.10}" }
+      }
+    },
+    "chart": {
+      "axis": { "$value": "{color.neutral.11}" },
+      "grid": { "$value": "{color.neutral.6}" },
+      "muted": { "$value": "{color.neutral.9}" },
+      "reference": { "$value": "{color.neutral.10}" },
+      "categorical": {
+        "1": { "$value": "{color.categorical.dark.1}" },
+        "2": { "$value": "{color.categorical.dark.2}" },
+        "3": { "$value": "{color.categorical.dark.3}" },
+        "4": { "$value": "{color.categorical.dark.4}" },
+        "5": { "$value": "{color.categorical.dark.5}" },
+        "6": { "$value": "{color.categorical.dark.6}" },
+        "7": { "$value": "{color.categorical.dark.7}" },
+        "8": { "$value": "{color.categorical.dark.8}" }
+      },
+      "good": { "$value": "{color.success.10}" },
+      "warning": { "$value": "{color.warning.10}" },
+      "critical": { "$value": "{color.danger.10}" }
+    },
+    "selection": { "$value": "{color.accent.5}" },
+    "highlight": { "$value": "{color.warning.5}" },
+    "scrim": { "$value": "#000000e6" }
+  },
+  "shadow": {
+    "$type": "shadow",
+    "raised": {
+      "$value": { "color": "#00000000", "offsetX": "0px", "offsetY": "0px", "blur": "0px", "spread": "0px" }
+    },
+    "overlay": {
+      "$value": { "color": "#00000000", "offsetX": "0px", "offsetY": "0px", "blur": "0px", "spread": "0px" }
+    },
+    "modal": {
+      "$value": { "color": "#00000000", "offsetX": "0px", "offsetY": "0px", "blur": "0px", "spread": "0px" }
+    },
+    "toast": {
+      "$value": { "color": "#00000000", "offsetX": "0px", "offsetY": "0px", "blur": "0px", "spread": "0px" }
+    }
+  }
+}

package/src/dtcg/semantic/themes/light.json

@@ -0,0 +1,93 @@
+{
+  "$description": "Light theme. Semantic roles every theme must define (spec section 3).",
+  "color": {
+    "$type": "color",
+    "bg": {
+      "canvas": { "$value": "{color.neutral.12}" },
+      "surface": { "$value": "{color.white}" },
+      "raised": { "$value": "{color.white}" },
+      "overlay": { "$value": "{color.white}" },
+      "inverse": { "$value": "{color.neutral.2}" }
+    },
+    "border": {
+      "subtle": { "$value": "{color.neutral.11}" },
+      "default": { "$value": "{color.neutral.8}" },
+      "strong": { "$value": "{color.neutral.7}" },
+      "focus": { "$value": "{color.accent.6}" }
+    },
+    "text": {
+      "primary": { "$value": "{color.neutral.2}" },
+      "secondary": { "$value": "{color.neutral.6}" },
+      "tertiary": { "$value": "{color.neutral.7}" },
+      "disabled": { "$value": "{color.neutral.9}" },
+      "inverse": { "$value": "{color.neutral.12}" },
+      "link": { "$value": "{color.accent.5}" }
+    },
+    "accent": {
+      "default": { "$value": "{color.accent.6}" },
+      "hover": { "$value": "{color.accent.5}" },
+      "active": { "$value": "{color.accent.4}" },
+      "subtle": { "$value": "{color.accent.11}" },
+      "on-accent": { "$value": "{color.white}" }
+    },
+    "status": {
+      "success": {
+        "background": { "$value": "{color.success.11}" },
+        "foreground": { "$value": "{color.success.3}" },
+        "border": { "$value": "{color.success.8}" }
+      },
+      "warning": {
+        "background": { "$value": "{color.warning.11}" },
+        "foreground": { "$value": "{color.warning.3}" },
+        "border": { "$value": "{color.warning.8}" }
+      },
+      "danger": {
+        "background": { "$value": "{color.danger.11}" },
+        "foreground": { "$value": "{color.danger.3}" },
+        "border": { "$value": "{color.danger.8}" }
+      },
+      "info": {
+        "background": { "$value": "{color.info.11}" },
+        "foreground": { "$value": "{color.info.3}" },
+        "border": { "$value": "{color.info.8}" }
+      }
+    },
+    "chart": {
+      "axis": { "$value": "{color.neutral.6}" },
+      "grid": { "$value": "{color.neutral.11}" },
+      "muted": { "$value": "{color.neutral.8}" },
+      "reference": { "$value": "{color.neutral.7}" },
+      "categorical": {
+        "1": { "$value": "{color.categorical.light.1}" },
+        "2": { "$value": "{color.categorical.light.2}" },
+        "3": { "$value": "{color.categorical.light.3}" },
+        "4": { "$value": "{color.categorical.light.4}" },
+        "5": { "$value": "{color.categorical.light.5}" },
+        "6": { "$value": "{color.categorical.light.6}" },
+        "7": { "$value": "{color.categorical.light.7}" },
+        "8": { "$value": "{color.categorical.light.8}" }
+      },
+      "good": { "$value": "{color.success.6}" },
+      "warning": { "$value": "{color.warning.6}" },
+      "critical": { "$value": "{color.danger.6}" }
+    },
+    "selection": { "$value": "{color.accent.10}" },
+    "highlight": { "$value": "{color.warning.10}" },
+    "scrim": { "$value": "#07090e80" }
+  },
+  "shadow": {
+    "$type": "shadow",
+    "raised": {
+      "$value": { "color": "#0f12171a", "offsetX": "0px", "offsetY": "1px", "blur": "3px", "spread": "0px" }
+    },
+    "overlay": {
+      "$value": { "color": "#0f121724", "offsetX": "0px", "offsetY": "6px", "blur": "16px", "spread": "-2px" }
+    },
+    "modal": {
+      "$value": { "color": "#0f12172e", "offsetX": "0px", "offsetY": "16px", "blur": "40px", "spread": "-4px" }
+    },
+    "toast": {
+      "$value": { "color": "#0f121729", "offsetX": "0px", "offsetY": "8px", "blur": "24px", "spread": "-4px" }
+    }
+  }
+}