@revikornmann/muka-ui 0.2.3 → 0.3.0

package/tokens/t4-components/chip.json

@@ -4,17 +4,227 @@
       "height": {
         "sm": {
           "$type": "sizing",
-          "$value": "{size.2xl}"
+          "$value": "{size.xl}"
         },
         "md": {
           "$type": "sizing",
-          "$value": "{size.3xl}"
+          "$value": "{size.2xl}"
         },
         "lg": {
           "$type": "sizing",
-          "$value": "{size.4xl}"
+          "$value": "{size.3xl}"
+        }
+      }
+    },
+    "gap": {
+      "sm": {
+        "$type": "spacing",
+        "$value": "{spacing.1}"
+      },
+      "md": {
+        "$type": "spacing",
+        "$value": "{spacing.2}"
+      },
+      "lg": {
+        "$type": "spacing",
+        "$value": "{spacing.2}"
+      }
+    },
+    "padding": {
+      "label": {
+        "sm": {
+          "$type": "spacing",
+          "$value": "{spacing.3}"
+        },
+        "md": {
+          "$type": "spacing",
+          "$value": "{spacing.4}"
+        },
+        "lg": {
+          "$type": "spacing",
+          "$value": "{spacing.4}"
+        }
+      },
+      "leading": {
+        "sm": {
+          "$type": "spacing",
+          "$value": "{spacing.2}"
+        },
+        "md": {
+          "$type": "spacing",
+          "$value": "{spacing.3}"
+        },
+        "lg": {
+          "$type": "spacing",
+          "$value": "{spacing.3}"
+        }
+      },
+      "trailing": {
+        "sm": {
+          "$type": "spacing",
+          "$value": "2px"
+        },
+        "md": {
+          "$type": "spacing",
+          "$value": "{spacing.1}"
+        },
+        "lg": {
+          "$type": "spacing",
+          "$value": "{spacing.1}"
+        }
+      }
+    },
+    "dismiss": {
+      "default": {
+        "background": {
+          "default": {
+            "$type": "color",
+            "$value": "{alias.color.state.neutral.surface.level1}"
+          },
+          "hover": {
+            "$type": "color",
+            "$value": "{alias.color.state.neutral.surface.level2}"
+          },
+          "pressed": {
+            "$type": "color",
+            "$value": "{alias.color.state.neutral.surface.level3}"
+          }
+        },
+        "foreground": {
+          "default": {
+            "$type": "color",
+            "$value": "{alias.color.state.neutral.contrast}"
+          },
+          "hover": {
+            "$type": "color",
+            "$value": "{alias.color.state.neutral.contrast}"
+          },
+          "pressed": {
+            "$type": "color",
+            "$value": "{alias.color.state.neutral.contrast}"
+          }
+        }
+      },
+      "success": {
+        "background": {
+          "default": {
+            "$type": "color",
+            "$value": "{alias.color.state.success.surface.level1}"
+          },
+          "hover": {
+            "$type": "color",
+            "$value": "{alias.color.state.success.surface.level2}"
+          },
+          "pressed": {
+            "$type": "color",
+            "$value": "{alias.color.state.success.surface.level3}"
+          }
+        },
+        "foreground": {
+          "default": {
+            "$type": "color",
+            "$value": "{alias.color.state.success.contrast}"
+          },
+          "hover": {
+            "$type": "color",
+            "$value": "{alias.color.state.success.contrast}"
+          },
+          "pressed": {
+            "$type": "color",
+            "$value": "{alias.color.state.success.contrast}"
+          }
+        }
+      },
+      "warning": {
+        "background": {
+          "default": {
+            "$type": "color",
+            "$value": "{alias.color.state.warning.surface.level1}"
+          },
+          "hover": {
+            "$type": "color",
+            "$value": "{alias.color.state.warning.surface.level2}"
+          },
+          "pressed": {
+            "$type": "color",
+            "$value": "{alias.color.state.warning.surface.level3}"
+          }
+        },
+        "foreground": {
+          "default": {
+            "$type": "color",
+            "$value": "{alias.color.state.warning.contrast}"
+          },
+          "hover": {
+            "$type": "color",
+            "$value": "{alias.color.state.warning.contrast}"
+          },
+          "pressed": {
+            "$type": "color",
+            "$value": "{alias.color.state.warning.contrast}"
+          }
+        }
+      },
+      "error": {
+        "background": {
+          "default": {
+            "$type": "color",
+            "$value": "{alias.color.state.error.surface.level1}"
+          },
+          "hover": {
+            "$type": "color",
+            "$value": "{alias.color.state.error.surface.level2}"
+          },
+          "pressed": {
+            "$type": "color",
+            "$value": "{alias.color.state.error.surface.level3}"
+          }
+        },
+        "foreground": {
+          "default": {
+            "$type": "color",
+            "$value": "{alias.color.state.error.contrast}"
+          },
+          "hover": {
+            "$type": "color",
+            "$value": "{alias.color.state.error.contrast}"
+          },
+          "pressed": {
+            "$type": "color",
+            "$value": "{alias.color.state.error.contrast}"
+          }
+        }
+      },
+      "info": {
+        "background": {
+          "default": {
+            "$type": "color",
+            "$value": "{alias.color.state.info.surface.level1}"
+          },
+          "hover": {
+            "$type": "color",
+            "$value": "{alias.color.state.info.surface.level2}"
+          },
+          "pressed": {
+            "$type": "color",
+            "$value": "{alias.color.state.info.surface.level3}"
+          }
+        },
+        "foreground": {
+          "default": {
+            "$type": "color",
+            "$value": "{alias.color.state.info.contrast}"
+          },
+          "hover": {
+            "$type": "color",
+            "$value": "{alias.color.state.info.contrast}"
+          },
+          "pressed": {
+            "$type": "color",
+            "$value": "{alias.color.state.info.contrast}"
+          }
         }
       }
     }
   }
-}
+}

package/tokens/t4-components/datatable.json

@@ -0,0 +1,104 @@
+{
+  "datatable": {
+    "header": {
+      "background": {
+        "$type": "color",
+        "$value": "{color.surface.level1}"
+      },
+      "foreground": {
+        "$type": "color",
+        "$value": "{color.text.default.default}"
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{color.border.default}"
+      }
+    },
+    "row": {
+      "background": {
+        "$type": "color",
+        "$value": "{color.surface.level3}"
+      },
+      "foreground": {
+        "$type": "color",
+        "$value": "{color.text.default.default}"
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{color.border.default}"
+      },
+      "hover": {
+        "background": {
+          "$type": "color",
+          "$value": "{color.surface.hover}"
+        }
+      },
+      "pressed": {
+        "background": {
+          "$type": "color",
+          "$value": "{color.surface.pressed}"
+        }
+      },
+      "selected": {
+        "background": {
+          "$type": "color",
+          "$value": "{color.state.info.background}"
+        }
+      }
+    },
+    "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}"
+          }
+        }
+      },
+      "min-height": {
+        "$type": "sizing",
+        "$value": "{size.2xl}"
+      }
+    },
+    "divider": {
+      "color": {
+        "$type": "color",
+        "$value": "{color.border.default}"
+      }
+    },
+    "selection": {
+      "column-width": {
+        "$type": "sizing",
+        "$value": "{size.5xl}"
+      }
+    },
+    "focus": {
+      "ring": {
+        "$type": "color",
+        "$value": "{color.border.focus}"
+      }
+    }
+  }
+}