@kb.ui/tokens 0.10.3 → 0.11.0

package/tokens.json

@@ -644,6 +644,18 @@
     "min-item-width": {
       "$type": "dimension",
       "$value": "18.75rem"
+    },
+    "min-item-width-sm": {
+      "$type": "dimension",
+      "$value": "14rem"
+    },
+    "min-item-width-md": {
+      "$type": "dimension",
+      "$value": "{grid.min-item-width}"
+    },
+    "min-item-width-lg": {
+      "$type": "dimension",
+      "$value": "24rem"
     }
   },
   "button": {
@@ -862,6 +874,14 @@
     "footer-padding": {
       "$type": "string",
       "$value": "0px"
+    },
+    "drawer-motion-duration": {
+      "$type": "duration",
+      "$value": "{motion.duration.slow}"
+    },
+    "drawer-motion-easing": {
+      "$type": "cubicBezier",
+      "$value": "{motion.easing.standard}"
     }
   },
   "panel": {
@@ -1660,6 +1680,241 @@
     "radius": {
       "$type": "dimension",
       "$value": "{radius.sm}"
+    },
+    "block-radius": {
+      "$type": "dimension",
+      "$value": "{radius.lg}"
+    },
+    "block-background": {
+      "$type": "color",
+      "$value": "{material.field-bg}"
+    },
+    "block-face": {
+      "$type": "gradient",
+      "$value": "{material.recessed-face}"
+    },
+    "block-border": {
+      "$type": "color",
+      "$value": "{color.border}"
+    },
+    "block-shadow": {
+      "$type": "shadow",
+      "$value": "{material.panel-shadow}"
+    },
+    "block-padding-block": {
+      "$type": "dimension",
+      "$value": "{space.4}"
+    },
+    "block-padding-inline": {
+      "$type": "dimension",
+      "$value": "{space.4}"
+    },
+    "block-font-size": {
+      "$type": "dimension",
+      "$value": "{text.small-size}"
+    },
+    "block-leading": {
+      "$type": "number",
+      "$value": "1.65"
+    },
+    "block-max-height": {
+      "$type": "dimension",
+      "$value": "22rem"
+    },
+    "collapsed-max-height": {
+      "$type": "dimension",
+      "$value": "9.5rem"
+    },
+    "header-background": {
+      "$type": "color",
+      "$value": "{color.surface}"
+    },
+    "header-face": {
+      "$type": "gradient",
+      "$value": "linear-gradient(180deg, {material.raised-top}, {color.surface})",
+      "$extensions": {
+        "kb.dark": "linear-gradient(180deg, color-mix(in srgb, {material.raised-top} 45%, {color.surface}), {color.surface})"
+      }
+    },
+    "header-shadow": {
+      "$type": "shadow",
+      "$value": "{material.inlay-shadow}"
+    },
+    "header-padding-block": {
+      "$type": "dimension",
+      "$value": "{space.2}"
+    },
+    "header-padding-inline": {
+      "$type": "dimension",
+      "$value": "{space.4}"
+    },
+    "header-gap": {
+      "$type": "dimension",
+      "$value": "{space.3}"
+    },
+    "title-size": {
+      "$type": "dimension",
+      "$value": "{text.caption-size}"
+    },
+    "badge-padding-block": {
+      "$type": "dimension",
+      "$value": "2px"
+    },
+    "badge-padding-inline": {
+      "$type": "dimension",
+      "$value": "{space.2}"
+    },
+    "badge-radius": {
+      "$type": "dimension",
+      "$value": "{radius.sm}"
+    },
+    "action-height": {
+      "$type": "dimension",
+      "$value": "1.75rem"
+    },
+    "action-padding-inline": {
+      "$type": "dimension",
+      "$value": "{space.2}"
+    },
+    "action-gap": {
+      "$type": "dimension",
+      "$value": "{space.1}"
+    },
+    "action-radius": {
+      "$type": "dimension",
+      "$value": "{radius.md}"
+    },
+    "toggle-min-width": {
+      "$type": "dimension",
+      "$value": "7.5rem"
+    },
+    "copy-min-width": {
+      "$type": "dimension",
+      "$value": "6.5rem"
+    },
+    "motion-duration": {
+      "$type": "duration",
+      "$value": "{motion.duration.slow}"
+    },
+    "motion-easing": {
+      "$type": "cubicBezier",
+      "$value": "{motion.easing.standard}"
+    },
+    "gutter-width": {
+      "$type": "dimension",
+      "$value": "2.5rem"
+    },
+    "gutter-gap": {
+      "$type": "dimension",
+      "$value": "{space.3}"
+    },
+    "gutter-color": {
+      "$type": "color",
+      "$value": "{color.muted}"
+    },
+    "gutter-border": {
+      "$type": "color",
+      "$value": "{material.soft-border}"
+    },
+    "line-padding-inline": {
+      "$type": "dimension",
+      "$value": "{space.4}"
+    },
+    "line-highlight-background": {
+      "$type": "color",
+      "$value": "#f4e6df",
+      "$extensions": {
+        "kb.dark": "#2a201b",
+        "kb.forced": "Mark"
+      }
+    },
+    "line-highlight-border": {
+      "$type": "color",
+      "$value": "{color.accent}",
+      "$extensions": {
+        "kb.forced": "Highlight"
+      }
+    },
+    "syntax": {
+      "keyword": {
+        "$type": "color",
+        "$value": "#9a3412",
+        "$extensions": {
+          "kb.dark": "#ff9e7d",
+          "kb.forced": "CanvasText"
+        }
+      },
+      "string": {
+        "$type": "color",
+        "$value": "#1b5e43",
+        "$extensions": {
+          "kb.dark": "#8fd4b5",
+          "kb.forced": "CanvasText"
+        }
+      },
+      "comment": {
+        "$type": "color",
+        "$value": "{color.muted}",
+        "$extensions": {
+          "kb.forced": "GrayText"
+        }
+      },
+      "number": {
+        "$type": "color",
+        "$value": "#7c470b",
+        "$extensions": {
+          "kb.dark": "#f2c46d",
+          "kb.forced": "CanvasText"
+        }
+      },
+      "tag": {
+        "$type": "color",
+        "$value": "#1d4f73",
+        "$extensions": {
+          "kb.dark": "#8cc4f0",
+          "kb.forced": "CanvasText"
+        }
+      },
+      "attribute": {
+        "$type": "color",
+        "$value": "#6d452b",
+        "$extensions": {
+          "kb.dark": "#e5b899",
+          "kb.forced": "CanvasText"
+        }
+      },
+      "type": {
+        "$type": "color",
+        "$value": "#5b378a",
+        "$extensions": {
+          "kb.dark": "#cfaef2",
+          "kb.forced": "CanvasText"
+        }
+      },
+      "function": {
+        "$type": "color",
+        "$value": "#175966",
+        "$extensions": {
+          "kb.dark": "#7fd1de",
+          "kb.forced": "CanvasText"
+        }
+      },
+      "operator": {
+        "$type": "color",
+        "$value": "#47505e",
+        "$extensions": {
+          "kb.dark": "#c8d0dc",
+          "kb.forced": "CanvasText"
+        }
+      },
+      "property": {
+        "$type": "color",
+        "$value": "#1f5173",
+        "$extensions": {
+          "kb.dark": "#9ac7eb",
+          "kb.forced": "CanvasText"
+        }
+      }
     }
   },
   "container": {
@@ -1779,5 +2034,741 @@
       "$type": "dimension",
       "$value": "{space.2}"
     }
+  },
+  "spinner": {
+    "size": {
+      "sm": {
+        "$type": "dimension",
+        "$value": "0.875rem"
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "1.125rem"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "1.5rem"
+      }
+    },
+    "stroke-width": {
+      "$type": "dimension",
+      "$value": "2px"
+    },
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.2}"
+    },
+    "duration": {
+      "$type": "duration",
+      "$value": "760ms"
+    },
+    "easing": {
+      "$type": "string",
+      "$value": "linear"
+    },
+    "track-opacity": {
+      "$type": "number",
+      "$value": "0.22"
+    },
+    "orbit-duration": {
+      "$type": "duration",
+      "$value": "1140ms"
+    },
+    "pulse-duration": {
+      "$type": "duration",
+      "$value": "960ms"
+    },
+    "pulse-easing": {
+      "$type": "cubicBezier",
+      "$value": "{motion.easing.smooth}"
+    },
+    "stagger": {
+      "$type": "duration",
+      "$value": "140ms"
+    },
+    "glow": {
+      "$type": "dimension",
+      "$value": "6px"
+    },
+    "pill-padding-block": {
+      "$type": "dimension",
+      "$value": "{space.1}"
+    },
+    "pill-padding-inline": {
+      "$type": "dimension",
+      "$value": "{space.3}"
+    },
+    "pill-radius": {
+      "$type": "dimension",
+      "$value": "{radius.full}"
+    }
+  },
+  "skeleton": {
+    "radius": {
+      "sm": {
+        "$type": "dimension",
+        "$value": "{radius.sm}"
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "{radius.md}"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "{radius.lg}"
+      },
+      "full": {
+        "$type": "dimension",
+        "$value": "{radius.full}"
+      }
+    },
+    "height": {
+      "sm": {
+        "$type": "dimension",
+        "$value": "0.75rem"
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "1rem"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "1.5rem"
+      }
+    },
+    "block-height": {
+      "$type": "dimension",
+      "$value": "5.5rem"
+    },
+    "avatar-size": {
+      "sm": {
+        "$type": "dimension",
+        "$value": "2rem"
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "2.5rem"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "3.5rem"
+      }
+    },
+    "pill-width": {
+      "$type": "dimension",
+      "$value": "5.5rem"
+    },
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.2}"
+    },
+    "base": {
+      "$type": "color",
+      "$value": "{color.surface}"
+    },
+    "highlight": {
+      "$type": "color",
+      "$value": "{material.raised-top}"
+    },
+    "sheen": {
+      "$type": "color",
+      "$value": "{material.soft-sheen}"
+    },
+    "border": {
+      "$type": "color",
+      "$value": "{material.soft-border}"
+    },
+    "duration": {
+      "$type": "duration",
+      "$value": "1600ms"
+    },
+    "pulse-duration": {
+      "$type": "duration",
+      "$value": "1800ms"
+    },
+    "stagger": {
+      "$type": "duration",
+      "$value": "120ms"
+    },
+    "easing": {
+      "$type": "cubicBezier",
+      "$value": "{motion.easing.smooth}"
+    }
+  },
+  "emptystate": {
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.lg}"
+    },
+    "padding": {
+      "sm": {
+        "$type": "dimension",
+        "$value": "{space.4}"
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "{space.6}"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "{space.8}"
+      }
+    },
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.4}"
+    },
+    "header-gap": {
+      "$type": "dimension",
+      "$value": "{space.1}"
+    },
+    "actions-gap": {
+      "$type": "dimension",
+      "$value": "{space.2}"
+    },
+    "max-width": {
+      "$type": "dimension",
+      "$value": "32rem"
+    },
+    "icon-size": {
+      "sm": {
+        "$type": "dimension",
+        "$value": "2.25rem"
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "2.75rem"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "3.25rem"
+      }
+    },
+    "icon-glyph-size": {
+      "sm": {
+        "$type": "dimension",
+        "$value": "1rem"
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "1.25rem"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "1.5rem"
+      }
+    },
+    "icon-radius": {
+      "$type": "dimension",
+      "$value": "{radius.md}"
+    },
+    "background": {
+      "$type": "color",
+      "$value": "{material.surface-bg}"
+    },
+    "border": {
+      "$type": "color",
+      "$value": "{color.border}"
+    },
+    "shadow": {
+      "$type": "shadow",
+      "$value": "{material.panel-shadow}"
+    }
+  },
+  "toast": {
+    "width": {
+      "$type": "dimension",
+      "$value": "24rem"
+    },
+    "gutter": {
+      "$type": "dimension",
+      "$value": "{space.4}"
+    },
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.3}"
+    },
+    "padding": {
+      "$type": "dimension",
+      "$value": "{space.4}"
+    },
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.lg}"
+    },
+    "background": {
+      "$type": "color",
+      "$value": "{material.surface-bg}"
+    },
+    "color": {
+      "$type": "color",
+      "$value": "{color.fg}"
+    },
+    "border": {
+      "$type": "color",
+      "$value": "{color.border}"
+    },
+    "shadow": {
+      "$type": "shadow",
+      "$value": "{material.float-shadow}"
+    },
+    "control-size": {
+      "$type": "dimension",
+      "$value": "{space.8}"
+    },
+    "motion-duration": {
+      "$type": "duration",
+      "$value": "240ms"
+    },
+    "z-index": {
+      "$type": "number",
+      "$value": "1000"
+    },
+    "exit-duration": {
+      "$type": "duration",
+      "$value": "160ms"
+    },
+    "motion-easing": {
+      "$type": "cubicBezier",
+      "$value": "cubic-bezier(0.16, 1, 0.3, 1)"
+    },
+    "enter-offset": {
+      "$type": "dimension",
+      "$value": "{space.3}"
+    },
+    "enter-scale": {
+      "$type": "number",
+      "$value": "0.985"
+    }
+  },
+  "image": {
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.lg}"
+    },
+    "border": {
+      "$type": "color",
+      "$value": "{material.soft-border}"
+    },
+    "background": {
+      "$type": "color",
+      "$value": "{color.surface}"
+    },
+    "color": {
+      "$type": "color",
+      "$value": "{color.muted}"
+    },
+    "ratio": {
+      "$type": "number",
+      "$value": "4 / 3"
+    },
+    "icon-size": {
+      "$type": "dimension",
+      "$value": "{space.8}"
+    },
+    "fallback-padding": {
+      "$type": "dimension",
+      "$value": "{space.3}"
+    }
+  },
+  "avatar": {
+    "size": {
+      "$type": "dimension",
+      "$value": "2.75rem"
+    },
+    "size-xs": {
+      "$type": "dimension",
+      "$value": "{space.6}"
+    },
+    "size-sm": {
+      "$type": "dimension",
+      "$value": "{space.8}"
+    },
+    "size-lg": {
+      "$type": "dimension",
+      "$value": "3.5rem"
+    },
+    "size-xl": {
+      "$type": "dimension",
+      "$value": "5rem"
+    },
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.full}"
+    },
+    "square-radius": {
+      "$type": "dimension",
+      "$value": "{radius.lg}"
+    },
+    "font-size": {
+      "$type": "dimension",
+      "$value": "{text.body-size}"
+    },
+    "font-size-xs": {
+      "$type": "dimension",
+      "$value": "{text.caption-size}"
+    },
+    "font-size-sm": {
+      "$type": "dimension",
+      "$value": "{text.small-size}"
+    },
+    "font-size-lg": {
+      "$type": "dimension",
+      "$value": "{size.lg}"
+    },
+    "font-size-xl": {
+      "$type": "dimension",
+      "$value": "{text.h2-size}"
+    },
+    "font-weight": {
+      "$type": "fontWeight",
+      "$value": "{font.weight.strong}"
+    },
+    "tracking": {
+      "$type": "dimension",
+      "$value": "-0.02em"
+    },
+    "background": {
+      "$type": "color",
+      "$value": "{color.surface}"
+    },
+    "color": {
+      "$type": "color",
+      "$value": "{color.fg}"
+    },
+    "border": {
+      "$type": "color",
+      "$value": "{material.soft-border}"
+    },
+    "shadow": {
+      "$type": "shadow",
+      "$value": "{material.inlay-shadow}"
+    }
+  },
+  "thumbnail": {
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.3}"
+    },
+    "caption-gap": {
+      "$type": "dimension",
+      "$value": "{space.1}"
+    },
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.lg}"
+    },
+    "color": {
+      "$type": "color",
+      "$value": "{color.fg}"
+    },
+    "muted": {
+      "$type": "color",
+      "$value": "{color.muted}"
+    },
+    "title-size": {
+      "$type": "dimension",
+      "$value": "{text.body-size}"
+    },
+    "description-size": {
+      "$type": "dimension",
+      "$value": "{text.small-size}"
+    }
+  },
+  "collection": {
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.3}"
+    },
+    "cell-padding": {
+      "$type": "dimension",
+      "$value": "{space.3}"
+    },
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.md}"
+    },
+    "border": {
+      "$type": "color",
+      "$value": "{color.border}"
+    },
+    "header-background": {
+      "$type": "color",
+      "$value": "{color.surface}"
+    },
+    "selected-background": {
+      "$type": "color",
+      "$value": "{color.surface}"
+    },
+    "table-min-width": {
+      "$type": "dimension",
+      "$value": "36rem"
+    }
+  },
+  "copyabletext": {
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.3}"
+    },
+    "padding": {
+      "$type": "dimension",
+      "$value": "{space.3}"
+    },
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.lg}"
+    },
+    "border": {
+      "$type": "color",
+      "$value": "{color.border}"
+    },
+    "background": {
+      "$type": "color",
+      "$value": "{color.surface}"
+    },
+    "target-size": {
+      "$type": "dimension",
+      "$value": "{button.height.md}"
+    },
+    "copy-min-width": {
+      "$type": "dimension",
+      "$value": "5.5rem"
+    },
+    "value-color": {
+      "$type": "color",
+      "$value": "{color.fg}"
+    },
+    "highlight-background": {
+      "$type": "color",
+      "$value": "color-mix(in srgb, {color.warning} 16%, {color.surface})"
+    }
+  },
+  "disclosure": {
+    "padding": {
+      "$type": "dimension",
+      "$value": "{space.4}"
+    },
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.md}"
+    },
+    "background": {
+      "$type": "color",
+      "$value": "{color.bg}"
+    },
+    "color": {
+      "$type": "color",
+      "$value": "{color.fg}"
+    },
+    "border": {
+      "$type": "color",
+      "$value": "{color.border}"
+    },
+    "trigger-height": {
+      "$type": "dimension",
+      "$value": "2.75rem"
+    },
+    "motion-duration": {
+      "$type": "duration",
+      "$value": "{motion.duration.slow}"
+    },
+    "motion-easing": {
+      "$type": "cubicBezier",
+      "$value": "{motion.easing.standard}"
+    }
+  },
+  "accordion": {
+    "padding": {
+      "$type": "dimension",
+      "$value": "{space.4}"
+    },
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.md}"
+    },
+    "background": {
+      "$type": "color",
+      "$value": "{color.bg}"
+    },
+    "color": {
+      "$type": "color",
+      "$value": "{color.fg}"
+    },
+    "border": {
+      "$type": "color",
+      "$value": "{color.border}"
+    },
+    "trigger-height": {
+      "$type": "dimension",
+      "$value": "2.75rem"
+    },
+    "motion-duration": {
+      "$type": "duration",
+      "$value": "{motion.duration.slow}"
+    },
+    "motion-easing": {
+      "$type": "cubicBezier",
+      "$value": "{motion.easing.standard}"
+    }
+  },
+  "popover": {
+    "width": {
+      "$type": "dimension",
+      "$value": "20rem"
+    },
+    "padding": {
+      "$type": "dimension",
+      "$value": "{space.4}"
+    },
+    "background": {
+      "$type": "color",
+      "$value": "{popup.background}"
+    },
+    "color": {
+      "$type": "color",
+      "$value": "{color.fg}"
+    },
+    "border": {
+      "$type": "color",
+      "$value": "{popup.border}"
+    },
+    "radius": {
+      "$type": "dimension",
+      "$value": "{popup.radius}"
+    },
+    "shadow": {
+      "$type": "shadow",
+      "$value": "{popup.shadow}"
+    },
+    "motion-duration": {
+      "$type": "duration",
+      "$value": "{motion.duration.base}"
+    },
+    "motion-easing": {
+      "$type": "cubicBezier",
+      "$value": "{motion.easing.standard}"
+    },
+    "enter-scale": {
+      "$type": "number",
+      "$value": "0.98"
+    },
+    "enter-offset": {
+      "$type": "dimension",
+      "$value": "{space.1}"
+    }
+  },
+  "tabs": {
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.md}"
+    },
+    "list-padding": {
+      "$type": "dimension",
+      "$value": "3px"
+    },
+    "tab-height": {
+      "sm": {
+        "$type": "dimension",
+        "$value": "{button.height.sm}"
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "{button.height.md}"
+      }
+    },
+    "indicator-thickness": {
+      "$type": "dimension",
+      "$value": "2px"
+    },
+    "panel-padding": {
+      "$type": "dimension",
+      "$value": "{space.4}"
+    }
+  },
+  "table": {
+    "background": {
+      "$type": "color",
+      "$value": "{color.bg}"
+    },
+    "header-background": {
+      "$type": "color",
+      "$value": "{color.surface}"
+    },
+    "selected-background": {
+      "$type": "color",
+      "$value": "{color.surface}"
+    },
+    "border": {
+      "$type": "color",
+      "$value": "{color.border}"
+    },
+    "cell-padding-block": {
+      "$type": "dimension",
+      "$value": "{space.3}"
+    },
+    "cell-padding-inline": {
+      "$type": "dimension",
+      "$value": "{space.4}"
+    },
+    "dense-padding-block": {
+      "$type": "dimension",
+      "$value": "{space.1}"
+    },
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.md}"
+    },
+    "sort-target": {
+      "$type": "dimension",
+      "$value": "{space.6}"
+    }
+  },
+  "descriptionlist": {
+    "term-width": {
+      "$type": "dimension",
+      "$value": "12rem"
+    },
+    "padding-block": {
+      "$type": "dimension",
+      "$value": "{space.3}"
+    },
+    "dense-padding-block": {
+      "$type": "dimension",
+      "$value": "{space.1}"
+    },
+    "column-gap": {
+      "$type": "dimension",
+      "$value": "{space.6}"
+    },
+    "row-gap": {
+      "$type": "dimension",
+      "$value": "{space.2}"
+    }
+  },
+  "collectionrow": {
+    "padding-block": {
+      "$type": "dimension",
+      "$value": "{space.3}"
+    },
+    "padding-inline": {
+      "$type": "dimension",
+      "$value": "{space.4}"
+    },
+    "dense-padding-block": {
+      "$type": "dimension",
+      "$value": "{space.1}"
+    },
+    "leading-width": {
+      "$type": "dimension",
+      "$value": "3rem"
+    },
+    "aside-width": {
+      "$type": "dimension",
+      "$value": "12rem"
+    },
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.3}"
+    }
   }
 }