@revikornmann/muka-ui 0.2.1

package/tokens/t4-components/segmentgroup.json

@@ -0,0 +1,108 @@
+{
+  "$schema": {
+    "$type": "other",
+    "$value": "https://design-tokens.org/schemas/1.0/schema.json"
+  },
+  "segmentgroup": {
+    "container": {
+      "background": {
+        "$type": "color",
+        "$value": "{color.surface.level2}"
+      },
+      "radius": {
+        "$type": "borderRadius",
+        "$value": "{border.radius.full}"
+      },
+      "padding": {
+        "$type": "dimension",
+        "$value": "{spacing.1}"
+      },
+      "shadow": {
+        "$type": "boxShadow",
+        "$value": "{shadow.sunken}"
+      }
+    },
+    "segment": {
+      "color": {
+        "selected": {
+          "background": {
+            "$type": "color",
+            "$value": "{color.surface.level3}"
+          },
+          "foreground": {
+            "$type": "color",
+            "$value": "{color.text.default.default}"
+          }
+        },
+        "unselected": {
+          "background": {
+            "$type": "color",
+            "$value": "transparent"
+          },
+          "foreground": {
+            "$type": "color",
+            "$value": "{color.text.subtle.default}"
+          }
+        },
+        "hover": {
+          "foreground": {
+            "$type": "color",
+            "$value": "{color.text.default.default}"
+          }
+        }
+      },
+      "shadow": {
+        "selected": {
+          "$type": "boxShadow",
+          "$value": "{shadow.level1}"
+        },
+        "unselected": {
+          "$type": "boxShadow",
+          "$value": "none"
+        }
+      },
+      "radius": {
+        "$type": "borderRadius",
+        "$value": "{border.radius.xl}"
+      },
+      "padding": {
+        "sm": {
+          "x": {
+            "$type": "dimension",
+            "$value": "{spacing.4}"
+          },
+          "y": {
+            "$type": "dimension",
+            "$value": "0"
+          }
+        },
+        "md": {
+          "x": {
+            "$type": "dimension",
+            "$value": "{spacing.5}"
+          },
+          "y": {
+            "$type": "dimension",
+            "$value": "{spacing.2}"
+          }
+        },
+        "lg": {
+          "x": {
+            "$type": "dimension",
+            "$value": "{spacing.6}"
+          },
+          "y": {
+            "$type": "dimension",
+            "$value": "{spacing.2}"
+          }
+        }
+      },
+      "height": {
+        "sm": {
+          "$type": "dimension",
+          "$value": "{font.size.2xl}"
+        }
+      }
+    }
+  }
+}

package/tokens/t4-components/select.json

@@ -0,0 +1,120 @@
+{
+  "$schema": {
+    "$type": "other",
+    "$value": "https://design-tokens.org/schemas/1.0/schema.json"
+  },
+  "select": {
+    "field": {
+      "color": {
+        "default": {
+          "background": {
+            "$type": "color",
+            "$value": "{color.surface.level3}"
+          },
+          "foreground": {
+            "$type": "color",
+            "$value": "{color.text.default.default}"
+          },
+          "border": {
+            "$type": "color",
+            "$value": "{color.border.contrast}"
+          }
+        },
+        "hover": {
+          "background": {
+            "$type": "color",
+            "$value": "{color.surface.level3}"
+          },
+          "foreground": {
+            "$type": "color",
+            "$value": "{color.text.default.default}"
+          },
+          "border": {
+            "$type": "color",
+            "$value": "{color.border.contrast}"
+          }
+        },
+        "focus": {
+          "background": {
+            "$type": "color",
+            "$value": "{color.surface.level3}"
+          },
+          "foreground": {
+            "$type": "color",
+            "$value": "{color.text.default.default}"
+          },
+          "border": {
+            "$type": "color",
+            "$value": "{color.action.default}"
+          }
+        },
+        "error": {
+          "background": {
+            "$type": "color",
+            "$value": "{color.surface.level3}"
+          },
+          "foreground": {
+            "$type": "color",
+            "$value": "{color.text.default.default}"
+          },
+          "border": {
+            "$type": "color",
+            "$value": "{color.state.error.contrast}"
+          }
+        },
+        "disabled": {
+          "background": {
+            "$type": "color",
+            "$value": "{color.surface.level1}"
+          },
+          "foreground": {
+            "$type": "color",
+            "$value": "{color.text.subtle.default}"
+          },
+          "border": {
+            "$type": "color",
+            "$value": "{color.border.default}"
+          }
+        }
+      },
+      "radius": {
+        "sm": {
+          "$type": "borderRadius",
+          "$value": "{border.radius.sm}"
+        },
+        "md": {
+          "$type": "borderRadius",
+          "$value": "{border.radius.md}"
+        },
+        "lg": {
+          "$type": "borderRadius",
+          "$value": "{border.radius.lg}"
+        }
+      },
+      "padding": {
+        "x": {
+          "$type": "dimension",
+          "$value": "{spacing.3}"
+        },
+        "y": {
+          "$type": "dimension",
+          "$value": "{spacing.2}"
+        }
+      },
+      "height": {
+        "sm": {
+          "$type": "dimension",
+          "$value": "{size.2xl}"
+        },
+        "default": {
+          "$type": "dimension",
+          "$value": "{size.3xl}"
+        },
+        "lg": {
+          "$type": "dimension",
+          "$value": "{size.4xl}"
+        }
+      }
+    }
+  }
+}

package/tokens/t4-components/separator.json

@@ -0,0 +1,36 @@
+{
+  "$schema": {
+    "$type": "other",
+    "$value": "https://design-tokens.org/schemas/1.0/schema.json"
+  },
+  "separator": {
+    "color": {
+      "default": {
+        "$type": "color",
+        "$value": "{color.border.default}"
+      },
+      "contrast": {
+        "$type": "color",
+        "$value": "{color.border.contrast}"
+      }
+    },
+    "width": {
+      "$type": "borderWidth",
+      "$value": "{size.4xs}"
+    },
+    "spacing": {
+      "sm": {
+        "$type": "dimension",
+        "$value": "{spacing.2}"
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "{spacing.4}"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "{spacing.6}"
+      }
+    }
+  }
+}

package/tokens/t4-components/table.json

@@ -0,0 +1,62 @@
+{
+  "table": {
+    "cell": {
+      "padding": {
+        "x": {
+          "sm": {
+            "$type": "spacing",
+            "$value": "{spacing.2}"
+          },
+          "md": {
+            "$type": "spacing",
+            "$value": "{spacing.3}"
+          },
+          "lg": {
+            "$type": "spacing",
+            "$value": "{spacing.4}"
+          }
+        },
+        "y": {
+          "sm": {
+            "$type": "spacing",
+            "$value": "{spacing.2}"
+          },
+          "md": {
+            "$type": "spacing",
+            "$value": "{spacing.3}"
+          },
+          "lg": {
+            "$type": "spacing",
+            "$value": "{spacing.4}"
+          }
+        }
+      }
+    },
+    "row": {
+      "selected": {
+        "background": {
+          "$type": "color",
+          "$value": "{color.state.info.background}"
+        }
+      }
+    },
+    "pagination": {
+      "padding": {
+        "$type": "spacing",
+        "$value": "{spacing.3}"
+      },
+      "gap": {
+        "$type": "spacing",
+        "$value": "{spacing.4}"
+      },
+      "background": {
+        "$type": "color",
+        "$value": "{color.surface.level1}"
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{color.border.default}"
+      }
+    }
+  }
+}

package/tokens/t4-components/tabs.json

@@ -0,0 +1,96 @@
+{
+  "$schema": {
+    "$type": "other",
+    "$value": "https://design-tokens.org/schemas/1.0/schema.json"
+  },
+  "tabs": {
+    "trigger": {
+      "color": {
+        "default": {
+          "background": {
+            "$type": "color",
+            "$value": "{color.surface.level2}"
+          },
+          "foreground": {
+            "$type": "color",
+            "$value": "{color.text.default.default}"
+          },
+          "border": {
+            "$type": "color",
+            "$value": "{color.border.contrast}"
+          }
+        },
+        "hover": {
+          "background": {
+            "$type": "color",
+            "$value": "{color.surface.level2}"
+          },
+          "foreground": {
+            "$type": "color",
+            "$value": "{color.text.default.default}"
+          },
+          "border": {
+            "$type": "color",
+            "$value": "{color.border.contrast}"
+          }
+        },
+        "current": {
+          "background": {
+            "$type": "color",
+            "$value": "{color.surface.level3}"
+          },
+          "foreground": {
+            "$type": "color",
+            "$value": "{input.field.color.default.foreground}"
+          },
+          "border": {
+            "$type": "color",
+            "$value": "{color.border.contrast}"
+          }
+        },
+        "disabled": {
+          "foreground": {
+            "$type": "color",
+            "$value": "{color.text.muted.default}"
+          },
+          "background": {
+            "$type": "color",
+            "$value": "{color.surface.level2}"
+          },
+          "border": {
+            "$type": "color",
+            "$value": "{color.border.contrast}"
+          }
+        }
+      },
+      "padding": {
+        "x": {
+          "$type": "dimension",
+          "$value": "{spacing.3}"
+        },
+        "y": {
+          "$type": "dimension",
+          "$value": "{spacing.2}"
+        }
+      },
+      "height": {
+        "$type": "dimension",
+        "$value": "{input.field.height.lg}"
+      },
+      "radius": {
+        "$type": "dimension",
+        "$value": "{input.field.radius.lg}"
+      }
+    },
+    "panel": {
+      "background": {
+        "$type": "color",
+        "$value": "{color.surface.level3}"
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{color.border.contrast}"
+      }
+    }
+  }
+}

package/tokens/t4-components/toast.json

@@ -0,0 +1,104 @@
+{
+  "$schema": {
+    "$type": "other",
+    "$value": "https://design-tokens.org/schemas/1.0/schema.json"
+  },
+  "toast": {
+    "color": {
+      "info": {
+        "background": {
+          "$type": "color",
+          "$value": "{color.surface.inverse}"
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "{color.text.default.inverse}"
+        },
+        "accent": {
+          "$type": "color",
+          "$value": "{alias.color.state.info.muted}"
+        }
+      },
+      "success": {
+        "background": {
+          "$type": "color",
+          "$value": "{color.surface.inverse}"
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "{color.text.default.inverse}"
+        },
+        "accent": {
+          "$type": "color",
+          "$value": "{alias.color.state.success.muted}"
+        }
+      },
+      "warning": {
+        "background": {
+          "$type": "color",
+          "$value": "{color.surface.inverse}"
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "{color.text.default.inverse}"
+        },
+        "accent": {
+          "$type": "color",
+          "$value": "{alias.color.state.warning.muted}"
+        }
+      },
+      "error": {
+        "background": {
+          "$type": "color",
+          "$value": "{color.surface.inverse}"
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "{color.text.default.inverse}"
+        },
+        "accent": {
+          "$type": "color",
+          "$value": "{alias.color.state.error.muted}"
+        }
+      }
+    },
+    "padding": {
+      "x": {
+        "$type": "dimension",
+        "$value": "{spacing.4}"
+      },
+      "y": {
+        "$type": "dimension",
+        "$value": "{spacing.3}"
+      }
+    },
+    "radius": {
+      "$type": "borderRadius",
+      "$value": "{alias.radius.lg}"
+    },
+    "gap": {
+      "$type": "dimension",
+      "$value": "{spacing.3}"
+    },
+    "icon": {
+      "size": {
+        "$type": "dimension",
+        "$value": "{size.md}"
+      }
+    },
+    "shadow": {
+      "$type": "boxShadow",
+      "$value": "{shadow.level3}"
+    },
+    "width": {
+      "min": {
+        "$type": "dimension",
+        "$value": "280px"
+      },
+      "max": {
+        "$type": "dimension",
+        "$value": "420px"
+      }
+    }
+  }
+}

package/tokens/t4-components/toggle.json

@@ -0,0 +1,56 @@
+{
+  "$schema": {
+    "$type": "other",
+    "$value": "https://design-tokens.org/schemas/1.0/schema.json"
+  },
+  "toggle": {
+    "track": {
+      "width": {
+        "$type": "dimension",
+        "$value": "{size.5xl}"
+      },
+      "height": {
+        "$type": "dimension",
+        "$value": "{size.2xl}"
+      },
+      "radius": {
+        "$type": "borderRadius",
+        "$value": "{border.radius.full}"
+      },
+      "color": {
+        "off": {
+          "$type": "color",
+          "$value": "{color.surface.sunken}"
+        },
+        "on": {
+          "$type": "color",
+          "$value": "{color.action.default}"
+        },
+        "disabled": {
+          "$type": "color",
+          "$value": "{color.surface.level1}"
+        }
+      }
+    },
+    "knob": {
+      "size": {
+        "$type": "dimension",
+        "$value": "{size.xl}"
+      },
+      "offset": {
+        "$type": "dimension",
+        "$value": "{spacing.1}"
+      },
+      "color": {
+        "default": {
+          "$type": "color",
+          "$value": "{color.surface.level3}"
+        },
+        "disabled": {
+          "$type": "color",
+          "$value": "{color.surface.level2}"
+        }
+      }
+    }
+  }
+}

package/tokens/t4-components/topbar.json

@@ -0,0 +1,112 @@
+{
+  "$schema": {
+    "$type": "other",
+    "$value": "https://design-tokens.org/schemas/1.0/schema.json"
+  },
+  "topbar": {
+    "color": {
+      "background": {
+        "$type": "color",
+        "$value": "{color.surface.level3}"
+      },
+      "foreground": {
+        "$type": "color",
+        "$value": "{color.text.default.default}"
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{color.border.default}"
+      }
+    },
+    "height": {
+      "sm": {
+        "$type": "dimension",
+        "$value": "64px"
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "80px"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "80px"
+      }
+    },
+    "padding": {
+      "x": {
+        "sm": {
+          "$type": "dimension",
+          "$value": "{spacing.3}"
+        },
+        "md": {
+          "$type": "dimension",
+          "$value": "{spacing.3}"
+        },
+        "lg": {
+          "$type": "dimension",
+          "$value": "{spacing.6}"
+        }
+      }
+    },
+    "title": {
+      "max-width": {
+        "$type": "dimension",
+        "$value": "197px"
+      }
+    },
+    "icon": {
+      "size": {
+        "sm": {
+          "$type": "dimension",
+          "$value": "24px"
+        },
+        "md": {
+          "$type": "dimension",
+          "$value": "32px"
+        },
+        "lg": {
+          "$type": "dimension",
+          "$value": "32px"
+        }
+      }
+    },
+    "button": {
+      "size": {
+        "sm": {
+          "$type": "dimension",
+          "$value": "48px"
+        },
+        "md": {
+          "$type": "dimension",
+          "$value": "64px"
+        },
+        "lg": {
+          "$type": "dimension",
+          "$value": "64px"
+        }
+      }
+    },
+    "drag-handle": {
+      "width": {
+        "$type": "dimension",
+        "$value": "54px"
+      },
+      "height": {
+        "$type": "dimension",
+        "$value": "4px"
+      },
+      "color": {
+        "$type": "color",
+        "$value": "{color.border.default}"
+      },
+      "padding-y": {
+        "$type": "dimension",
+        "$value": "{spacing.3}"
+      },
+      "radius": {
+        "$type": "borderRadius",
+        "$value": "{border.radius.full}"
+      }
+    }
+  }
+}