@clickhouse/click-ui 0.0.1 → 0.0.3

package/tokens/themes/classic.json

@@ -53,6 +53,498 @@
           }
         }
       }
+    },
+    "button": {
+      "basic": {
+        "color": {
+          "primary": {
+            "background": {
+              "default": {
+                "value": "{palette.warning.500}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{palette.slate.700}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{palette.slate.900}",
+                "type": "color"
+              }
+            },
+            "stroke": {
+              "default": {
+                "value": "{click.button.basic.color.primary.background.default}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{click.button.basic.color.primary.background.hover}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{click.button.basic.color.primary.background.active}",
+                "type": "color"
+              }
+            },
+            "text": {
+              "default": {
+                "value": "{palette.neutral.900}",
+                "type": "color"
+              }
+            }
+          },
+          "secondary": {
+            "background": {
+              "default": {
+                "value": "{palette.utility.transparent}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{click.global.color.background.muted}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{click.button.basic.color.secondary.background.hover}",
+                "type": "color",
+                "$extensions": {
+                  "studio.tokens": {
+                    "modify": {
+                      "type": "darken",
+                      "value": "0.02",
+                      "space": "lch"
+                    }
+                  }
+                }
+              }
+            },
+            "stroke": {
+              "default": {
+                "value": "{click.global.color.stroke.default}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{palette.slate.100}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{palette.slate.200}",
+                "type": "color"
+              }
+            },
+            "text": {
+              "default": {
+                "value": "{click.global.color.text.default}",
+                "type": "color"
+              }
+            }
+          },
+          "disabled": {
+            "background": {
+              "default": {
+                "value": "{palette.neutral.200}",
+                "type": "color"
+              }
+            },
+            "text": {
+              "default": {
+                "value": "{palette.neutral.400}",
+                "type": "color"
+              }
+            }
+          },
+          "danger": {
+            "background": {
+              "default": {
+                "value": "{click.feedback.color.danger.background}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{palette.danger.200}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{palette.danger.100}",
+                "type": "color"
+              }
+            },
+            "text": {
+              "default": {
+                "value": "{click.feedback.color.danger.foreground}",
+                "type": "color"
+              }
+            }
+          }
+        }
+      },
+      "group": {
+        "color": {
+          "background": {
+            "default": {
+              "value": "{palette.neutral.0}",
+              "type": "color"
+            },
+            "hover": {
+              "value": "{click.button.basic.color.secondary.background.hover}",
+              "type": "color"
+            },
+            "active": {
+              "value": "{click.button.basic.color.secondary.background.active}",
+              "type": "color"
+            },
+            "panel": {
+              "value": "{click.button.group.color.background.default}",
+              "type": "color"
+            }
+          },
+          "text": {
+            "default": {
+              "value": "{palette.slate.900}",
+              "type": "color"
+            },
+            "hover": {
+              "value": "{click.button.group.color.text.default}",
+              "type": "color"
+            },
+            "active": {
+              "value": "{palette.neutral.900}",
+              "type": "color"
+            }
+          },
+          "stroke": {
+            "panel": {
+              "value": "{click.global.color.stroke.default}",
+              "type": "color"
+            }
+          }
+        }
+      },
+      "split": {
+        "primary": {
+          "stroke": {
+            "default": {
+              "value": "{click.button.basic.color.primary.background.default}",
+              "type": "color",
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "lighten",
+                    "value": "0.05",
+                    "space": "lch"
+                  }
+                }
+              }
+            },
+            "active": {
+              "value": "{click.button.basic.color.primary.background.default}",
+              "type": "color",
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "darken",
+                    "value": "0.15",
+                    "space": "lch"
+                  }
+                }
+              }
+            },
+            "hover": {
+              "value": "{click.button.split.primary.background.action.hover}",
+              "type": "color",
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "lighten",
+                    "value": "0.1",
+                    "space": "lch"
+                  }
+                }
+              }
+            }
+          },
+          "background": {
+            "main": {
+              "default": {
+                "value": "{click.button.basic.color.primary.background.default}",
+                "type": "color",
+                "$extensions": {
+                  "studio.tokens": {
+                    "modify": {
+                      "type": "darken",
+                      "value": "0.085",
+                      "space": "lch"
+                    }
+                  }
+                }
+              },
+              "hover": {
+                "value": "{click.button.basic.color.primary.background.hover}",
+                "type": "color",
+                "$extensions": {
+                  "studio.tokens": {
+                    "modify": {
+                      "type": "darken",
+                      "value": "0.085",
+                      "space": "lch"
+                    }
+                  }
+                }
+              },
+              "active": {
+                "value": "{click.button.basic.color.primary.background.active}",
+                "type": "color",
+                "$extensions": {
+                  "studio.tokens": {
+                    "modify": {
+                      "type": "darken",
+                      "value": "0.085",
+                      "space": "lch"
+                    }
+                  }
+                }
+              }
+            },
+            "action": {
+              "default": {
+                "value": "{palette.slate.900}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{click.button.split.primary.background.main.hover}",
+                "type": "color",
+                "$extensions": {
+                  "studio.tokens": {
+                    "modify": {
+                      "type": "darken",
+                      "value": "0.05",
+                      "space": "lch"
+                    }
+                  }
+                }
+              },
+              "active": {
+                "value": "{palette.slate.900}",
+                "type": "color",
+                "$extensions": {
+                  "studio.tokens": {
+                    "modify": {
+                      "type": "darken",
+                      "value": "0.5",
+                      "space": "lch"
+                    }
+                  }
+                }
+              }
+            }
+          },
+          "text": {
+            "default": {
+              "value": "{click.button.basic.color.primary.text.default}",
+              "type": "color"
+            }
+          }
+        }
+      },
+      "iconButton": {
+        "color": {
+          "primary": {
+            "background": {
+              "default": {
+                "value": "{palette.utility.transparent}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{click.global.color.background.muted}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{click.global.color.background.muted}",
+                "type": "color",
+                "$extensions": {
+                  "studio.tokens": {
+                    "modify": {
+                      "type": "darken",
+                      "value": "0.1",
+                      "space": "srgb"
+                    }
+                  }
+                }
+              }
+            },
+            "stroke": {
+              "default": {
+                "value": "{click.button.iconButton.color.primary.background.default}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{click.button.iconButton.color.primary.background.hover}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{click.button.iconButton.color.primary.background.active}",
+                "type": "color"
+              }
+            },
+            "text": {
+              "default": {
+                "value": "{click.global.color.text.default}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{click.global.color.text.default}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{click.global.color.text.default}",
+                "type": "color"
+              }
+            }
+          },
+          "secondary": {
+            "background": {
+              "default": {
+                "value": "{click.button.basic.color.primary.background.default}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{click.button.basic.color.primary.background.hover}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{click.button.basic.color.primary.background.active}",
+                "type": "color",
+                "$extensions": {
+                  "studio.tokens": {
+                    "modify": {
+                      "type": "darken",
+                      "value": "0.05",
+                      "space": "lch"
+                    }
+                  }
+                }
+              }
+            },
+            "stroke": {
+              "default": {
+                "value": "{click.button.iconButton.color.primary.background.default}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{click.button.iconButton.color.secondary.background.hover}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{click.button.iconButton.color.secondary.background.active}",
+                "type": "color"
+              }
+            },
+            "text": {
+              "default": {
+                "value": "{click.button.basic.color.primary.text.default}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{click.button.basic.color.primary.text.default}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{click.button.basic.color.primary.text.default}",
+                "type": "color"
+              }
+            }
+          },
+          "disabled": {
+            "background": {
+              "default": {
+                "value": "{palette.neutral.200}",
+                "type": "color"
+              }
+            },
+            "text": {
+              "default": {
+                "value": "{palette.neutral.400}",
+                "type": "color"
+              }
+            }
+          },
+          "danger": {
+            "background": {
+              "default": {
+                "value": "{click.feedback.color.danger.background}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{palette.danger.200}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{palette.danger.100}",
+                "type": "color"
+              }
+            },
+            "text": {
+              "default": {
+                "value": "{click.feedback.color.danger.foreground}",
+                "type": "color"
+              }
+            }
+          }
+        }
+      },
+      "alignedLeft": {
+        "color": {
+          "background": {
+            "default": {
+              "value": "{palette.utility.transparent}",
+              "type": "color"
+            },
+            "hover": {
+              "value": "{click.global.color.background.muted}",
+              "type": "color"
+            },
+            "active": {
+              "value": "{click.button.basic.color.secondary.background.hover}",
+              "type": "color",
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "darken",
+                    "value": "0.02",
+                    "space": "lch"
+                  }
+                }
+              }
+            }
+          },
+          "stroke": {
+            "default": {
+              "value": "{click.global.color.stroke.default}",
+              "type": "color"
+            },
+            "hover": {
+              "value": "{palette.slate.100}",
+              "type": "color"
+            },
+            "active": {
+              "value": "{palette.slate.200}",
+              "type": "color"
+            }
+          },
+          "text": {
+            "default": {
+              "value": "{click.global.color.text.default}",
+              "type": "color"
+            },
+            "hover": {
+              "value": "{click.button.alignedLeft.color.text.default}",
+              "type": "color"
+            },
+            "active": {
+              "value": "{click.button.alignedLeft.color.text.default}",
+              "type": "color"
+            }
+          }
+        }
+      }
     }
   }
 }