@clickhouse/click-ui 0.0.0

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

@@ -0,0 +1,203 @@
+/**
+ * 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-slate-700);
+  --click-feedback-color-neutral-background: var(--palette-slate-100);
+  --click-feedback-color-danger-foreground: var(--palette-danger-600);
+  --click-feedback-color-danger-background: var(--palette-danger-50);
+  --click-feedback-color-warning-foreground: var(--palette-warning-700);
+  --click-feedback-color-warning-background: var(--palette-warning-50);
+  --click-feedback-color-success-foreground: var(--palette-success-600);
+  --click-feedback-color-success-background: var(--palette-success-50);
+  --click-feedback-color-info-foreground: var(--palette-info-400);
+  --click-feedback-color-info-background: var(--palette-info-50);
+  --click-global-color-outline-default: var(--palette-info-400);
+  --click-global-color-accent-default: var(--palette-neutral-900);
+  --click-global-color-stroke-muted: lch(91.6 1.1 266 / 0.3);
+  --click-global-color-stroke-default: lch(91.6 1.1 266 / 0.3);
+  --click-global-color-text-link-hover: var(--palette-info-600);
+  --click-global-color-text-link-default: var(--palette-info-400);
+  --click-global-color-text-muted: var(--palette-slate-600);
+  --click-global-color-text-default: var(--palette-slate-900);
+  --click-global-color-background-muted: var(--palette-slate-50);
+  --click-global-color-background-default: var(--palette-neutral-0);
+  --click-tabs-basic-color-accent-hover: var(--palette-utility-transparent);
+  --click-tabs-basic-color-background-selected: var(--palette-utility-transparent);
+  --click-tabs-basic-color-background-default: var(--palette-utility-transparent);
+  --click-switch-color-indicator-disabled: var(--palette-neutral-400);
+  --click-switch-color-indicator-active: var(--palette-neutral-0);
+  --click-switch-color-indicator-default: var(--palette-neutral-400);
+  --click-switch-color-stroke-disabled: var(--palette-neutral-300);
+  --click-switch-color-background-disabled-checked: var(--palette-neutral-200);
+  --click-switch-color-background-active: var(--palette-neutral-900);
+  --click-switch-color-background-default: var(--palette-slate-50);
+  --click-sidebar-main-color-item-background-hover: lch(91.6 1.1 266 / 0.6);
+  --click-sidebar-main-color-item-background-active: lch(91.6 1.1 266 / 0.6);
+  --click-sidebar-main-color-item-background-default: var(--palette-utility-transparent);
+  --click-field-color-label-default: var(--palette-slate-600);
+  --click-field-color-stroke-hover: lch(83.8 2.3 258);
+  --click-field-color-stroke-disabled: var(--palette-neutral-200);
+  --click-field-color-text-disabled: var(--palette-neutral-400);
+  --click-field-color-text-default: var(--palette-slate-800);
+  --click-field-color-background-disabled: var(--palette-neutral-200);
+  --click-context-menu-color-text-disabled: var(--palette-neutral-300);
+  --click-codeblock-color-button-foreground-default: var(--palette-neutral-0);
+  --click-codeblock-color-button-background-hover: var(--palette-slate-700);
+  --click-codeblock-color-text-default: var(--palette-neutral-0);
+  --click-codeblock-color-background-default: var(--palette-slate-800);
+  --click-checkbox-color-check-default: var(--palette-neutral-0);
+  --click-checkbox-color-stroke-disabled: var(--palette-neutral-300);
+  --click-checkbox-color-background-disabled-checked: var(--palette-neutral-200);
+  --click-checkbox-color-background-active: var(--palette-slate-900);
+  --click-checkbox-color-background-default: var(--palette-slate-50);
+  --click-button-group-color-text-active: var(--palette-neutral-900);
+  --click-button-group-color-text-default: var(--palette-slate-900);
+  --click-button-group-color-background-default: var(--palette-neutral-0);
+  --click-button-split-primary-background-action-active: lch(3.47 0.72 305);
+  --click-button-split-primary-background-action-default: lch(6.35 1.32 305);
+  --click-button-basic-color-danger-background-active: var(--palette-danger-100);
+  --click-button-basic-color-danger-background-hover: var(--palette-danger-200);
+  --click-button-basic-color-disabled-text-default: var(--palette-neutral-400);
+  --click-button-basic-color-disabled-background-default: var(--palette-neutral-200);
+  --click-button-basic-color-secondary-stroke-active: lch(83.8 2.3 258);
+  --click-button-basic-color-secondary-stroke-hover: var(--palette-slate-100);
+  --click-button-basic-color-secondary-background-default: var(--palette-utility-transparent);
+  --click-button-basic-color-primary-text-default: var(--palette-neutral-0);
+  --click-button-basic-color-primary-background-active: lch(6.42 1.33 305);
+  --click-button-basic-color-primary-background-hover: lch(55.8 3.66 267);
+  --click-button-basic-color-primary-background-default: var(--palette-slate-800);
+  --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(97.2 1.57 272 / 0.7);
+  --click-feedback-color-neutral-stroke: var(--click-global-color-stroke-default);
+  --click-tabs-file-tabs-color-stroke-default: var(--click-global-color-stroke-default);
+  --click-tabs-file-tabs-color-text-active: var(--click-global-color-text-default);
+  --click-tabs-file-tabs-color-text-hover: var(--click-global-color-text-default);
+  --click-tabs-file-tabs-color-text-default: var(--click-global-color-text-muted);
+  --click-tabs-file-tabs-color-background-hover: var(--click-global-color-background-default);
+  --click-tabs-file-tabs-color-background-default: var(--click-global-color-background-muted);
+  --click-tabs-basic-color-accent-selected: var(--click-global-color-accent-default);
+  --click-tabs-basic-color-accent-default: var(--click-tabs-basic-color-background-default);
+  --click-tabs-basic-color-text-hover: var(--click-global-color-text-default);
+  --click-tabs-basic-color-text-default: var(--click-global-color-text-muted);
+  --click-tabs-basic-color-background-hover: var(--click-global-color-background-muted);
+  --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-background-default: var(--click-global-color-background-default);
+  --click-popover-color-background-default: lch(100 0 0);
+  --click-field-color-placeholder: var(--click-global-color-text-muted);
+  --click-field-color-label-error: var(--click-feedback-color-danger-foreground);
+  --click-field-color-label-disabled: var(--click-field-color-text-disabled);
+  --click-field-color-stroke-error: var(--click-feedback-color-danger-foreground);
+  --click-field-color-stroke-default: lch(92 1.05 266 / 0.3);
+  --click-field-color-text-error: var(--click-feedback-color-danger-foreground);
+  --click-field-color-text-hover: var(--click-field-color-text-default);
+  --click-field-color-text-active: var(--click-global-color-text-default);
+  --click-field-color-background-hover: var(--click-global-color-background-muted);
+  --click-field-color-background-active: var(--click-global-color-background-default);
+  --click-field-color-background-default: var(--click-global-color-background-muted);
+  --click-context-menu-stroke-default: var(--click-global-color-stroke-default);
+  --click-context-menu-color-background-hover: lch(97.5 1.43 272);
+  --click-context-menu-color-text-active: var(--click-global-color-text-default);
+  --click-context-menu-color-text-hover: var(--click-global-color-text-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-context-menu-button-stroke-default: var(--click-global-color-stroke-default);
+  --click-context-menu-button-label-default: var(--click-global-color-text-default);
+  --click-context-menu-button-background-default: var(--click-global-color-background-muted);
+  --click-codeblock-color-stroke-inline: lch(93.3 0.88 266 / 0.3);
+  --click-codeblock-color-stroke-default: lch(35.4 2.22 306);
+  --click-codeblock-color-button-background-default: var(--click-codeblock-color-background-default);
+  --click-codeblock-color-text-inline: 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-card-color-stroke-disabled: var(--click-field-color-stroke-disabled);
+  --click-card-color-stroke-active: lch(87 1.05 266 / 0.3);
+  --click-card-color-stroke-hover: var(--click-global-color-stroke-default);
+  --click-card-color-stroke-default: var(--click-global-color-stroke-default);
+  --click-card-color-link-active: var(--click-global-color-text-default);
+  --click-card-color-link-hover: var(--click-global-color-text-link-default);
+  --click-card-color-link-default: var(--click-global-color-text-default);
+  --click-card-color-description-active: var(--click-global-color-text-muted);
+  --click-card-color-description-hover: var(--click-global-color-text-muted);
+  --click-card-color-description-default: var(--click-global-color-text-muted);
+  --click-card-color-title-disabled: var(--click-button-basic-color-disabled-text-default);
+  --click-card-color-title-active: var(--click-global-color-text-default);
+  --click-card-color-title-hover: var(--click-global-color-text-default);
+  --click-card-color-title-default: var(--click-global-color-text-default);
+  --click-card-color-background-disabled: var(--click-button-basic-color-disabled-background-default);
+  --click-card-color-background-active: lch(92.4 1.49 272);
+  --click-card-color-background-hover: var(--click-global-color-background-muted);
+  --click-card-color-background-default: var(--click-global-color-background-default);
+  --click-button-group-color-stroke-panel: var(--click-global-color-stroke-default);
+  --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-main-active: lch(5.87 1.22 305);
+  --click-button-split-primary-background-main-hover: lch(51.1 3.35 267);
+  --click-button-split-primary-background-main-default: lch(17.6 2.54 306);
+  --click-button-split-primary-stroke-active: lch(16.4 2.36 306);
+  --click-button-split-primary-stroke-default: lch(23.3 2.63 306);
+  --click-button-basic-color-danger-text-default: var(--click-feedback-color-danger-foreground);
+  --click-button-basic-color-danger-background-default: var(--click-feedback-color-danger-background);
+  --click-button-basic-color-secondary-text-default: var(--click-global-color-text-default);
+  --click-button-basic-color-secondary-stroke-default: var(--click-global-color-stroke-default);
+  --click-button-basic-color-secondary-background-hover: var(--click-global-color-background-muted);
+  --click-button-basic-color-primary-stroke-active: var(--click-button-basic-color-primary-background-active);
+  --click-button-basic-color-primary-stroke-hover: var(--click-button-basic-color-primary-background-hover);
+  --click-button-basic-color-primary-stroke-default: var(--click-button-basic-color-primary-background-default);
+  --click-big-stat-color-large-value-default: var(--click-global-color-text-default);
+  --click-big-stat-color-label-default: var(--click-global-color-text-muted);
+  --click-big-stat-color-background-default: var(--click-global-color-background-default);
+  --click-big-stat-color-stroke-default: var(--click-global-color-stroke-default);
+  --click-badge-color-stroke-danger: var(--click-feedback-color-danger-background);
+  --click-badge-color-stroke-neutral: var(--click-feedback-color-neutral-background);
+  --click-badge-color-stroke-success: var(--click-feedback-color-success-background);
+  --click-badge-color-stroke-default: var(--click-global-color-stroke-default);
+  --click-badge-color-text-disabled: var(--click-button-basic-color-disabled-text-default);
+  --click-badge-color-text-danger: var(--click-feedback-color-danger-foreground);
+  --click-badge-color-text-neutral: var(--click-feedback-color-neutral-foreground);
+  --click-badge-color-text-success: var(--click-feedback-color-success-foreground);
+  --click-badge-color-text-default: var(--click-global-color-text-muted);
+  --click-badge-color-background-danger: var(--click-feedback-color-danger-background);
+  --click-badge-color-background-neutral: var(--click-feedback-color-neutral-background);
+  --click-badge-color-background-success: var(--click-feedback-color-success-background);
+  --click-badge-color-background-default: var(--click-global-color-background-default);
+  --click-tabs-file-tabs-color-background-active: var(--click-tabs-file-tabs-color-background-hover);
+  --click-tabs-basic-color-text-selected: var(--click-tabs-basic-color-text-hover);
+  --click-field-color-label-active: var(--click-field-color-text-active);
+  --click-field-color-stroke-active: var(--click-field-color-text-active);
+  --click-context-menu-color-background-active: var(--click-context-menu-color-background-hover);
+  --click-context-menu-color-background-default: var(--click-popover-color-background-default);
+  --click-card-color-link-disabled: var(--click-card-color-title-disabled);
+  --click-card-color-description-disabled: var(--click-card-color-title-disabled);
+  --click-button-group-color-background-hover: lch(68.1 1.1 272);
+  --click-button-split-primary-background-action-hover: lch(48.5 3.18 267);
+  --click-button-basic-color-secondary-background-active: lch(92.4 1.49 272);
+  --click-badge-color-stroke-disabled: lch(84.4 0 0);
+  --click-badge-color-background-disabled: var(--click-card-color-background-disabled);
+  --click-button-group-color-background-active: lch(78.5 1.27 272);
+  --click-button-split-primary-stroke-hover: lch(53.6 2.86 267);
+}

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

@@ -0,0 +1,478 @@
+{
+  "click": {
+    "badge": {
+      "color": {
+        "background": {
+          "default": "#ffffff",
+          "success": "#e0f8e7",
+          "neutral": "#e6e7e9",
+          "danger": "#ffdddd",
+          "disabled": "#dfdfdf"
+        },
+        "text": {
+          "default": "#696e79",
+          "success": "#1c8439",
+          "neutral": "#53575f",
+          "danger": "#c10000",
+          "disabled": "#a0a0a0"
+        },
+        "stroke": {
+          "default": "lch(91.6 1.1 266 / 0.3)",
+          "success": "#e0f8e7",
+          "neutral": "#e6e7e9",
+          "danger": "#ffdddd",
+          "disabled": "lch(84.4 0 0)"
+        }
+      }
+    },
+    "big-stat": {
+      "color": {
+        "stroke": {
+          "default": "lch(91.6 1.1 266 / 0.3)"
+        },
+        "background": {
+          "default": "#ffffff"
+        },
+        "label": {
+          "default": "#696e79"
+        },
+        "large-value": {
+          "default": "#161517"
+        }
+      }
+    },
+    "button": {
+      "basic": {
+        "color": {
+          "primary": {
+            "background": {
+              "default": "#302e32",
+              "hover": "lch(55.8 3.66 267)",
+              "active": "lch(6.42 1.33 305)"
+            },
+            "text": {
+              "default": "#ffffff"
+            },
+            "stroke": {
+              "default": "#302e32",
+              "hover": "lch(55.8 3.66 267)",
+              "active": "lch(6.42 1.33 305)"
+            }
+          },
+          "secondary": {
+            "background": {
+              "default": "rgba(0,0,0,0)",
+              "hover": "#f6f7fa",
+              "active": "lch(92.4 1.49 272)"
+            },
+            "stroke": {
+              "default": "lch(91.6 1.1 266 / 0.3)",
+              "hover": "#e6e7e9",
+              "active": "lch(83.8 2.3 258)"
+            },
+            "text": {
+              "default": "#161517"
+            }
+          },
+          "disabled": {
+            "background": {
+              "default": "#dfdfdf"
+            },
+            "text": {
+              "default": "#a0a0a0"
+            }
+          },
+          "danger": {
+            "background": {
+              "default": "#ffdddd",
+              "hover": "#ff9898",
+              "active": "#ffbaba"
+            },
+            "text": {
+              "default": "#c10000"
+            }
+          }
+        }
+      },
+      "split": {
+        "primary": {
+          "stroke": {
+            "default": "lch(23.3 2.63 306)",
+            "active": "lch(16.4 2.36 306)",
+            "hover": "lch(53.6 2.86 267)"
+          },
+          "background": {
+            "main": {
+              "default": "lch(17.6 2.54 306)",
+              "hover": "lch(51.1 3.35 267)",
+              "active": "lch(5.87 1.22 305)"
+            },
+            "action": {
+              "default": "lch(6.35 1.32 305)",
+              "hover": "lch(48.5 3.18 267)",
+              "active": "lch(3.47 0.72 305)"
+            }
+          },
+          "text": {
+            "default": "#ffffff"
+          }
+        }
+      },
+      "group": {
+        "color": {
+          "background": {
+            "default": "#ffffff",
+            "hover": "lch(68.1 1.1 272)",
+            "active": "lch(78.5 1.27 272)",
+            "panel": "#ffffff"
+          },
+          "text": {
+            "default": "#161517",
+            "hover": "#161517",
+            "active": "#151515"
+          },
+          "stroke": {
+            "panel": "lch(91.6 1.1 266 / 0.3)"
+          }
+        }
+      }
+    },
+    "card": {
+      "color": {
+        "background": {
+          "default": "#ffffff",
+          "hover": "#f6f7fa",
+          "active": "lch(92.4 1.49 272)",
+          "disabled": "#dfdfdf"
+        },
+        "title": {
+          "default": "#161517",
+          "hover": "#161517",
+          "active": "#161517",
+          "disabled": "#a0a0a0"
+        },
+        "description": {
+          "default": "#696e79",
+          "hover": "#696e79",
+          "active": "#696e79",
+          "disabled": "#a0a0a0"
+        },
+        "link": {
+          "default": "#161517",
+          "hover": "#135be6",
+          "active": "#161517",
+          "disabled": "#a0a0a0"
+        },
+        "stroke": {
+          "default": "lch(91.6 1.1 266 / 0.3)",
+          "hover": "lch(91.6 1.1 266 / 0.3)",
+          "active": "lch(87 1.05 266 / 0.3)",
+          "disabled": "#dfdfdf"
+        }
+      }
+    },
+    "checkbox": {
+      "color": {
+        "background": {
+          "default": "#f6f7fa",
+          "active": "#161517",
+          "disabled-checked": "#dfdfdf",
+          "disabled-unchecked": "#dfdfdf"
+        },
+        "stroke": {
+          "default": "lch(91.6 1.1 266 / 0.3)",
+          "active": "#161517",
+          "disabled": "#c0c0c0"
+        },
+        "check": {
+          "default": "#ffffff",
+          "active": "#ffffff",
+          "disabled": "#a0a0a0"
+        },
+        "label": {
+          "default": "#161517",
+          "off": "#696e79",
+          "disabled": "#a0a0a0"
+        }
+      }
+    },
+    "codeblock": {
+      "color": {
+        "background": {
+          "default": "#302e32",
+          "inline": "#f6f7fa"
+        },
+        "text": {
+          "default": "#ffffff",
+          "inline": "#161517"
+        },
+        "button": {
+          "background": {
+            "default": "#302e32",
+            "hover": "#53575f"
+          },
+          "foreground": {
+            "default": "#ffffff"
+          }
+        },
+        "stroke": {
+          "default": "lch(35.4 2.22 306)",
+          "inline": "lch(93.3 0.88 266 / 0.3)"
+        }
+      }
+    },
+    "context-menu": {
+      "button": {
+        "background": {
+          "default": "#f6f7fa"
+        },
+        "label": {
+          "default": "#161517"
+        },
+        "stroke": {
+          "default": "lch(91.6 1.1 266 / 0.3)"
+        }
+      },
+      "color": {
+        "text": {
+          "default": "#161517",
+          "disabled": "#c0c0c0",
+          "muted": "#696e79",
+          "hover": "#161517",
+          "active": "#161517"
+        },
+        "background": {
+          "default": "lch(100 0 0)",
+          "hover": "lch(97.5 1.43 272)",
+          "active": "lch(97.5 1.43 272)"
+        }
+      },
+      "stroke": {
+        "default": "lch(91.6 1.1 266 / 0.3)"
+      }
+    },
+    "field": {
+      "color": {
+        "background": {
+          "default": "#f6f7fa",
+          "active": "#ffffff",
+          "disabled": "#dfdfdf",
+          "hover": "#f6f7fa"
+        },
+        "text": {
+          "default": "#302e32",
+          "active": "#161517",
+          "disabled": "#a0a0a0",
+          "hover": "#302e32",
+          "error": "#c10000"
+        },
+        "stroke": {
+          "default": "lch(92 1.05 266 / 0.3)",
+          "active": "#161517",
+          "disabled": "#dfdfdf",
+          "hover": "lch(83.8 2.3 258)",
+          "error": "#c10000"
+        },
+        "label": {
+          "default": "#696e79",
+          "active": "#161517",
+          "disabled": "#a0a0a0",
+          "error": "#c10000"
+        },
+        "placeholder": "#696e79"
+      }
+    },
+    "popover": {
+      "color": {
+        "background": {
+          "default": "lch(100 0 0)"
+        }
+      }
+    },
+    "sidebar": {
+      "main": {
+        "color": {
+          "background": {
+            "default": "#ffffff"
+          },
+          "item": {
+            "background": {
+              "default": "rgba(0,0,0,0)",
+              "active": "lch(91.6 1.1 266 / 0.6)",
+              "hover": "lch(91.6 1.1 266 / 0.6)"
+            },
+            "text": {
+              "default": "#161517",
+              "muted": "#696e79"
+            }
+          },
+          "text": {
+            "default": "#161517",
+            "muted": "#696e79"
+          },
+          "stroke": {
+            "default": "lch(91.6 1.1 266 / 0.3)"
+          }
+        }
+      },
+      "sql-sidebar": {
+        "color": {
+          "background": {
+            "default": "#f6f7fa"
+          },
+          "stroke": {
+            "default": "lch(91.6 1.1 266 / 0.3)"
+          }
+        }
+      }
+    },
+    "switch": {
+      "color": {
+        "background": {
+          "default": "#f6f7fa",
+          "active": "#151515",
+          "disabled": "#dfdfdf"
+        },
+        "stroke": {
+          "default": "lch(91.6 1.1 266 / 0.3)",
+          "active": "#161517",
+          "disabled": "#c0c0c0"
+        },
+        "indicator": {
+          "default": "#a0a0a0",
+          "active": "#ffffff",
+          "disabled": "#a0a0a0"
+        }
+      }
+    },
+    "tabs": {
+      "basic": {
+        "color": {
+          "background": {
+            "default": "rgba(0,0,0,0)",
+            "hover": "#f6f7fa",
+            "selected": "rgba(0,0,0,0)"
+          },
+          "text": {
+            "default": "#696e79",
+            "hover": "#161517",
+            "selected": "#161517"
+          },
+          "accent": {
+            "default": "rgba(0,0,0,0)",
+            "hover": "rgba(0,0,0,0)",
+            "selected": "#151515"
+          }
+        }
+      },
+      "file-tabs": {
+        "color": {
+          "background": {
+            "default": "#f6f7fa",
+            "hover": "#ffffff",
+            "active": "#ffffff"
+          },
+          "text": {
+            "default": "#696e79",
+            "hover": "#161517",
+            "active": "#161517"
+          },
+          "stroke": {
+            "default": "lch(91.6 1.1 266 / 0.3)"
+          }
+        }
+      }
+    },
+    "global": {
+      "color": {
+        "background": {
+          "default": "#ffffff",
+          "muted": "#f6f7fa"
+        },
+        "text": {
+          "default": "#161517",
+          "muted": "#696e79",
+          "link": {
+            "default": "#135be6",
+            "hover": "#092e73"
+          }
+        },
+        "stroke": {
+          "default": "lch(91.6 1.1 266 / 0.3)",
+          "muted": "lch(91.6 1.1 266 / 0.3)"
+        },
+        "accent": {
+          "default": "#151515"
+        },
+        "outline": {
+          "default": "#135be6"
+        }
+      }
+    },
+    "feedback": {
+      "color": {
+        "info": {
+          "background": "#dae6fc",
+          "foreground": "#135be6"
+        },
+        "success": {
+          "background": "#e0f8e7",
+          "foreground": "#1c8439"
+        },
+        "warning": {
+          "background": "#ffedd8",
+          "foreground": "#9e5600"
+        },
+        "danger": {
+          "background": "#ffdddd",
+          "foreground": "#c10000"
+        },
+        "neutral": {
+          "background": "#e6e7e9",
+          "foreground": "#53575f",
+          "stroke": "lch(91.6 1.1 266 / 0.3)"
+        }
+      }
+    },
+    "grid": {
+      "color": {
+        "background": {
+          "header": {
+            "default": "lch(97.2 1.57 272 / 0.7)"
+          },
+          "row": {
+            "default": "#ffffff"
+          }
+        },
+        "text": {
+          "header": {
+            "default": "#696e79"
+          },
+          "row": {
+            "default": "#161517"
+          }
+        },
+        "stroke": {
+          "cell": {
+            "stroke": "lch(91.6 1.1 266 / 0.3)"
+          }
+        }
+      }
+    },
+    "table": {
+      "color": {
+        "header": {
+          "background": "#f6f7fa",
+          "text": "#161517"
+        },
+        "row": {
+          "background": "#ffffff",
+          "text": "#161517"
+        },
+        "cell": {
+          "stroke": "lch(91.6 1.1 266 / 0.3)"
+        }
+      }
+    }
+  }
+}

package/app/tokens/themes/$metadata.json

@@ -0,0 +1,9 @@
+{
+  "tokenSetOrder": [
+    "primitives",
+    "component",
+    "light",
+    "dark",
+    "classic"
+  ]
+}