@clickhouse/click-ui 0.0.0

package/app/src/styles/variables.dark.css

@@ -0,0 +1,135 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 24 May 2023 07:49:29 GMT
+ */
+
+:root {
+  --click-checkbox-color-label-disabled: #a0a0a0;
+  --click-checkbox-color-label-off: #696e79;
+  --click-checkbox-color-check-disabled: #c0c0c0;
+  --click-feedback-color-neutral-foreground: var(--palette-neutral-300);
+  --click-feedback-color-neutral-background: var(--palette-neutral-700);
+  --click-feedback-color-danger-foreground: var(--palette-danger-300);
+  --click-feedback-color-danger-background: var(--palette-danger-800);
+  --click-feedback-color-warning-foreground: var(--palette-warning-400);
+  --click-feedback-color-warning-background: var(--palette-warning-800);
+  --click-feedback-color-success-foreground: var(--palette-success-300);
+  --click-feedback-color-success-background: var(--palette-success-800);
+  --click-feedback-color-info-foreground: var(--palette-info-200);
+  --click-feedback-color-info-background: var(--palette-info-600);
+  --click-global-color-outline-default: var(--palette-brand-300);
+  --click-global-color-accent-default: var(--palette-brand-300);
+  --click-global-color-stroke-muted: lch(27.5 0 0 / 0.3);
+  --click-global-color-stroke-default: lch(27.5 0 0 / 0.3);
+  --click-global-color-text-link-hover: var(--palette-brand-100);
+  --click-global-color-text-link-default: var(--palette-brand-300);
+  --click-global-color-text-muted: var(--palette-slate-300);
+  --click-global-color-text-default: var(--palette-neutral-0);
+  --click-global-color-background-muted: var(--palette-neutral-725);
+  --click-global-color-background-default: var(--palette-neutral-750);
+  --click-switch-color-indicator-disabled: var(--palette-neutral-600);
+  --click-switch-color-indicator-active: var(--palette-slate-900);
+  --click-switch-color-indicator-default: var(--palette-neutral-400);
+  --click-switch-color-stroke-disabled: var(--palette-neutral-400);
+  --click-switch-color-background-disabled-checked: var(--palette-neutral-500);
+  --click-switch-color-background-active: var(--palette-brand-300);
+  --click-switch-color-background-default: var(--palette-slate-800);
+  --click-sidebar-main-color-item-background-active: lch(27.5 0 0 / 0.6);
+  --click-sidebar-main-color-item-background-default: var(--palette-utility-transparent);
+  --click-popover-color-background-default: lch(17.8 0 0);
+  --click-field-color-label-disabled: var(--palette-neutral-400);
+  --click-field-color-stroke-disabled: var(--palette-neutral-700);
+  --click-field-color-text-disabled: var(--palette-neutral-500);
+  --click-field-color-text-default: var(--palette-slate-100);
+  --click-field-color-background-disabled: var(--palette-neutral-700);
+  --click-field-color-background-default: var(--palette-neutral-725);
+  --click-context-menu-color-text-disabled: var(--palette-neutral-300);
+  --click-codeblock-color-stroke-inline: lch(32.9 0 0);
+  --click-codeblock-color-stroke-default: lch(32.9 0 0);
+  --click-codeblock-color-button-hover: var(--palette-neutral-0);
+  --click-codeblock-color-button-default: var(--palette-neutral-800);
+  --click-codeblock-color-text-default: var(--palette-neutral-0);
+  --click-codeblock-color-background-default: var(--palette-neutral-725);
+  --click-checkbox-color-check-default: var(--palette-neutral-0);
+  --click-checkbox-color-stroke-disabled: var(--palette-neutral-600);
+  --click-checkbox-color-background-disabled-checked: var(--palette-neutral-700);
+  --click-checkbox-color-background-active: var(--palette-slate-900);
+  --click-button-group-color-text-active: var(--palette-neutral-0);
+  --click-button-group-color-background-active: lch(23.4 0 0);
+  --click-button-group-color-background-hover: lch(19.3 0 0);
+  --click-button-split-primary-background-action-default: lch(89.5 60.4 102);
+  --click-button-basic-color-danger-background-hover: var(--palette-danger-700);
+  --click-button-basic-color-secondary-stroke-active: lch(23.3 2.63 306);
+  --click-button-basic-color-secondary-stroke-hover: var(--palette-slate-500);
+  --click-button-basic-color-secondary-stroke-default: var(--palette-neutral-700);
+  --click-button-basic-color-primary-stroke-hover: var(--palette-brand-300);
+  --click-button-basic-color-primary-background-active: lch(90.5 61.1 102);
+  --click-button-basic-color-primary-background-hover: lch(98.5 46.2 102);
+  --click-table-color-cell-stroke: var(--click-global-color-stroke-default);
+  --click-table-color-row-text: var(--click-global-color-text-default);
+  --click-table-color-row-background: var(--click-global-color-background-default);
+  --click-table-color-header-text: var(--click-global-color-text-default);
+  --click-table-color-header-background: var(--click-global-color-background-muted);
+  --click-grid-color-stroke-cell-stroke: var(--click-global-color-stroke-default);
+  --click-grid-color-text-row-default: var(--click-global-color-text-default);
+  --click-grid-color-text-header-default: var(--click-global-color-text-muted);
+  --click-grid-color-background-row-default: var(--click-global-color-background-default);
+  --click-grid-color-background-header-default: lch(16.1 0 0 / 0.7);
+  --click-feedback-color-neutral-stroke: var(--click-global-color-stroke-default);
+  --click-switch-color-stroke-active: var(--click-checkbox-color-background-active);
+  --click-switch-color-stroke-default: var(--click-global-color-stroke-default);
+  --click-sidebar-sql-sidebar-color-stroke-default: var(--click-global-color-stroke-default);
+  --click-sidebar-sql-sidebar-color-background-default: var(--click-global-color-background-muted);
+  --click-sidebar-main-color-stroke-default: var(--click-global-color-stroke-default);
+  --click-sidebar-main-color-text-muted: var(--click-global-color-text-muted);
+  --click-sidebar-main-color-text-default: var(--click-global-color-text-default);
+  --click-sidebar-main-color-item-text-muted: var(--click-global-color-text-muted);
+  --click-sidebar-main-color-item-text-default: var(--click-global-color-text-default);
+  --click-sidebar-main-color-item-background-hover: lch(19.1 0 0);
+  --click-sidebar-main-color-background-default: var(--click-global-color-background-default);
+  --click-field-color-label-active: var(--click-global-color-text-default);
+  --click-field-color-label-default: var(--click-global-color-text-muted);
+  --click-field-color-stroke-active: var(--click-global-color-accent-default);
+  --click-field-color-stroke-default: lch(31.1 0 0 / 0.3);
+  --click-field-color-text-active: var(--click-global-color-text-default);
+  --click-field-color-background-active: var(--click-global-color-background-default);
+  --click-context-menu-stroke-default: var(--click-global-color-stroke-default);
+  --click-context-menu-color-background-hover: lch(23.5 0 0);
+  --click-context-menu-color-background-default: var(--click-popover-color-background-default);
+  --click-context-menu-color-text-muted: var(--click-global-color-text-muted);
+  --click-context-menu-color-text-default: var(--click-global-color-text-default);
+  --click-codeblock-color-background-inline: var(--click-global-color-background-muted);
+  --click-checkbox-color-label-default: var(--click-global-color-text-default);
+  --click-checkbox-color-stroke-active: var(--click-checkbox-color-background-active);
+  --click-checkbox-color-stroke-default: var(--click-global-color-stroke-default);
+  --click-checkbox-color-background-default: var(--click-field-color-background-default);
+  --click-button-group-color-stroke-panel: var(--click-global-color-stroke-default);
+  --click-button-group-color-text-default: var(--click-global-color-text-default);
+  --click-button-group-color-background-default: var(--click-global-color-background-muted);
+  --click-button-split-primary-background-main-active: lch(82.8 55.9 102);
+  --click-button-split-primary-background-main-hover: lch(90.1 42.3 102);
+  --click-button-basic-color-danger-text-default: var(--click-feedback-color-danger-foreground);
+  --click-button-basic-color-danger-background-active: var(--click-button-basic-color-danger-background-hover);
+  --click-button-basic-color-danger-background-default: var(--click-feedback-color-danger-background);
+  --click-button-basic-color-disabled-text-default: var(--click-field-color-text-disabled);
+  --click-button-basic-color-disabled-background-default: var(--click-field-color-background-disabled);
+  --click-button-basic-color-secondary-text-default: var(--click-global-color-text-default);
+  --click-button-basic-color-secondary-background-hover: var(--click-global-color-background-muted);
+  --click-button-basic-color-secondary-background-default: var(--click-global-color-background-default);
+  --click-button-basic-color-primary-stroke-default: var(--click-global-color-accent-default);
+  --click-button-basic-color-primary-text-default: var(--click-global-color-background-default);
+  --click-button-basic-color-primary-background-default: var(--click-global-color-accent-default);
+  --click-field-color-stroke-hover: lch(34.5 0 0 / 0.3);
+  --click-context-menu-color-background-active: var(--click-context-menu-color-background-hover);
+  --click-button-group-color-text-hover: var(--click-button-group-color-text-default);
+  --click-button-group-color-background-panel: var(--click-button-group-color-background-default);
+  --click-button-split-primary-text-default: var(--click-button-basic-color-primary-text-default);
+  --click-button-split-primary-background-action-active: lch(72.9 49.2 102);
+  --click-button-split-primary-background-action-hover: lch(82.9 38.9 102);
+  --click-button-split-primary-background-main-default: lch(89.5 60.4 102);
+  --click-button-split-primary-stroke-active: lch(83.1 56.1 102);
+  --click-button-split-primary-stroke-default: lch(97.9 62.7 102);
+  --click-button-basic-color-secondary-background-active: lch(20.3 0 0);
+  --click-button-basic-color-primary-stroke-active: var(--click-button-split-primary-background-main-active);
+  --click-button-split-primary-stroke-hover: lch(84.6 35 102);
+}

package/app/src/styles/variables.dark.json

@@ -0,0 +1,339 @@
+{
+  "click": {
+    "button": {
+      "basic": {
+        "color": {
+          "primary": {
+            "background": {
+              "default": "#fcff74",
+              "hover": "lch(98.5 46.2 102)",
+              "active": "lch(90.5 61.1 102)"
+            },
+            "text": {
+              "default": "#1F1F1C"
+            },
+            "stroke": {
+              "default": "#fcff74",
+              "hover": "#fcff74",
+              "active": "lch(82.8 55.9 102)"
+            }
+          },
+          "secondary": {
+            "background": {
+              "default": "#1F1F1C",
+              "hover": "#282828",
+              "active": "lch(20.3 0 0)"
+            },
+            "stroke": {
+              "default": "#414141",
+              "hover": "#808691",
+              "active": "lch(23.3 2.63 306)"
+            },
+            "text": {
+              "default": "#ffffff"
+            }
+          },
+          "disabled": {
+            "background": {
+              "default": "#414141"
+            },
+            "text": {
+              "default": "#808080"
+            }
+          },
+          "danger": {
+            "background": {
+              "default": "#610000",
+              "hover": "#910000",
+              "active": "#910000"
+            },
+            "text": {
+              "default": "#ff7575"
+            }
+          }
+        }
+      },
+      "split": {
+        "primary": {
+          "stroke": {
+            "default": "lch(97.9 62.7 102)",
+            "active": "lch(83.1 56.1 102)",
+            "hover": "lch(84.6 35 102)"
+          },
+          "background": {
+            "main": {
+              "default": "lch(89.5 60.4 102)",
+              "hover": "lch(90.1 42.3 102)",
+              "active": "lch(82.8 55.9 102)"
+            },
+            "action": {
+              "default": "lch(89.5 60.4 102)",
+              "hover": "lch(82.9 38.9 102)",
+              "active": "lch(72.9 49.2 102)"
+            }
+          },
+          "text": {
+            "default": "#1F1F1C"
+          }
+        }
+      },
+      "group": {
+        "color": {
+          "background": {
+            "default": "#282828",
+            "hover": "lch(19.3 0 0)",
+            "active": "lch(23.4 0 0)",
+            "panel": "#282828"
+          },
+          "text": {
+            "default": "#ffffff",
+            "hover": "#ffffff",
+            "active": "#ffffff"
+          },
+          "stroke": {
+            "panel": "lch(27.5 0 0 / 0.3)"
+          }
+        }
+      }
+    },
+    "checkbox": {
+      "color": {
+        "background": {
+          "default": "#282828",
+          "active": "#fcff74",
+          "disabled-checked": "#414141"
+        },
+        "stroke": {
+          "default": "lch(27.5 0 0 / 0.3)",
+          "active": "#fcff74",
+          "disabled": "#606060"
+        },
+        "check": {
+          "default": "#ffffff",
+          "active": "#151515",
+          "disabled": "#c0c0c0"
+        },
+        "label": {
+          "default": "#ffffff",
+          "off": "#696e79",
+          "disabled": "#a0a0a0"
+        }
+      }
+    },
+    "codeblock": {
+      "color": {
+        "background": {
+          "default": "#282828",
+          "inline": "#282828"
+        },
+        "text": {
+          "default": "#ffffff"
+        },
+        "button": {
+          "default": "#1d1d1d",
+          "hover": "#ffffff"
+        },
+        "stroke": {
+          "default": "lch(32.9 0 0)",
+          "inline": "lch(32.9 0 0)"
+        }
+      }
+    },
+    "context-menu": {
+      "color": {
+        "text": {
+          "default": "#ffffff",
+          "disabled": "#c0c0c0",
+          "muted": "#b3b6bd"
+        },
+        "background": {
+          "default": "lch(17.8 0 0)",
+          "hover": "lch(23.5 0 0)",
+          "active": "lch(23.5 0 0)"
+        }
+      },
+      "stroke": {
+        "default": "lch(27.5 0 0 / 0.3)"
+      }
+    },
+    "field": {
+      "color": {
+        "background": {
+          "default": "#282828",
+          "active": "#1F1F1C",
+          "disabled": "#414141"
+        },
+        "text": {
+          "default": "#e6e7e9",
+          "active": "#ffffff",
+          "disabled": "#808080"
+        },
+        "stroke": {
+          "default": "lch(31.1 0 0 / 0.3)",
+          "active": "#fcff74",
+          "disabled": "#414141",
+          "hover": "lch(34.5 0 0 / 0.3)"
+        },
+        "label": {
+          "default": "#b3b6bd",
+          "active": "#ffffff",
+          "disabled": "#a0a0a0"
+        }
+      }
+    },
+    "popover": {
+      "color": {
+        "background": {
+          "default": "lch(17.8 0 0)"
+        }
+      }
+    },
+    "sidebar": {
+      "main": {
+        "color": {
+          "background": {
+            "default": "#1F1F1C"
+          },
+          "item": {
+            "background": {
+              "default": "rgba(0,0,0,0)",
+              "active": "lch(27.5 0 0 / 0.6)",
+              "hover": "lch(19.1 0 0)"
+            },
+            "text": {
+              "default": "#ffffff",
+              "muted": "#b3b6bd"
+            }
+          },
+          "text": {
+            "default": "#ffffff",
+            "muted": "#b3b6bd"
+          },
+          "stroke": {
+            "default": "lch(27.5 0 0 / 0.3)"
+          }
+        }
+      },
+      "sql-sidebar": {
+        "color": {
+          "background": {
+            "default": "#282828"
+          },
+          "stroke": {
+            "default": "lch(27.5 0 0 / 0.3)"
+          }
+        }
+      }
+    },
+    "switch": {
+      "color": {
+        "background": {
+          "default": "#302e32",
+          "active": "#fcff74",
+          "disabled": "#808080"
+        },
+        "stroke": {
+          "default": "lch(27.5 0 0 / 0.3)",
+          "active": "#fcff74",
+          "disabled": "#a0a0a0"
+        },
+        "indicator": {
+          "default": "#a0a0a0",
+          "active": "#161517",
+          "disabled": "#606060"
+        }
+      }
+    },
+    "global": {
+      "color": {
+        "background": {
+          "default": "#1F1F1C",
+          "muted": "#282828"
+        },
+        "text": {
+          "default": "#ffffff",
+          "muted": "#b3b6bd",
+          "link": {
+            "default": "#fcff74",
+            "hover": "#feffba"
+          }
+        },
+        "stroke": {
+          "default": "lch(27.5 0 0 / 0.3)",
+          "muted": "lch(27.5 0 0 / 0.3)"
+        },
+        "accent": {
+          "default": "#fcff74"
+        },
+        "outline": {
+          "default": "#fcff74"
+        }
+      }
+    },
+    "feedback": {
+      "color": {
+        "info": {
+          "background": "#092e73",
+          "foreground": "#91b3f6"
+        },
+        "success": {
+          "background": "#0e421d",
+          "foreground": "#81e59d"
+        },
+        "warning": {
+          "background": "#4f2b00",
+          "foreground": "#ff9416"
+        },
+        "danger": {
+          "background": "#610000",
+          "foreground": "#ff7575"
+        },
+        "neutral": {
+          "background": "#414141",
+          "foreground": "#c0c0c0",
+          "stroke": "lch(27.5 0 0 / 0.3)"
+        }
+      }
+    },
+    "grid": {
+      "color": {
+        "background": {
+          "header": {
+            "default": "lch(16.1 0 0 / 0.7)"
+          },
+          "row": {
+            "default": "#1F1F1C"
+          }
+        },
+        "text": {
+          "header": {
+            "default": "#b3b6bd"
+          },
+          "row": {
+            "default": "#ffffff"
+          }
+        },
+        "stroke": {
+          "cell": {
+            "stroke": "lch(27.5 0 0 / 0.3)"
+          }
+        }
+      }
+    },
+    "table": {
+      "color": {
+        "header": {
+          "background": "#282828",
+          "text": "#ffffff"
+        },
+        "row": {
+          "background": "#1F1F1C",
+          "text": "#ffffff"
+        },
+        "cell": {
+          "stroke": "lch(27.5 0 0 / 0.3)"
+        }
+      }
+    }
+  }
+}