@vueless/storybook 1.1.3-beta.0 → 1.1.3-beta.10

package/.storybook-ts/themes/preview.css

@@ -0,0 +1,612 @@
+@import "tailwindcss";
+@import "vueless";
+
+/* -------------------- Storybook Preview UI -------------------- */
+/* -------------------- General -------------------- */
+
+::-webkit-scrollbar {
+  width: 0.75rem; /* w-3 */
+  height: 0.75rem; /* h-3 */
+}
+
+::-webkit-scrollbar-track {
+  transition: all 0.2s; /* transition */
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 0.125rem; /* rounded-xs */
+  transition: all 0.2s; /* transition */
+}
+
+.light::-webkit-scrollbar-track,
+.light ::-webkit-scrollbar-track {
+  background-color: #f9fafb; /* bg-gray-50 */
+}
+
+.light::-webkit-scrollbar-track:hover,
+.light ::-webkit-scrollbar-track:hover {
+  background-color: #e5e7eb; /* hover:bg-gray-200 */
+}
+
+.light::-webkit-scrollbar-thumb,
+.light ::-webkit-scrollbar-thumb {
+  background-color: #9ca3af; /* bg-gray-400 */
+}
+
+.light::-webkit-scrollbar-thumb:hover,
+.light ::-webkit-scrollbar-thumb:hover {
+  background-color: #6b7280; /* hover:bg-gray-500 */
+}
+
+.dark::-webkit-scrollbar-track,
+.dark ::-webkit-scrollbar-track {
+  background-color: #030712; /* bg-gray-950 */
+}
+
+.dark::-webkit-scrollbar-track:hover,
+.dark ::-webkit-scrollbar-track:hover {
+  background-color: #1f2937; /* hover:bg-gray-800 */
+}
+
+.dark::-webkit-scrollbar-thumb,
+.dark ::-webkit-scrollbar-thumb {
+  background-color: #4b5563; /* bg-gray-600 */
+}
+
+.dark::-webkit-scrollbar-thumb:hover,
+.dark ::-webkit-scrollbar-thumb:hover {
+  background-color: #6b7280; /* hover:bg-gray-500 */
+}
+
+@supports (-moz-appearance: none) {
+  .light * {
+    scrollbar-width: thin;
+    scrollbar-color: #9ca3af #f9fafb; /* thumb color track color */
+  }
+
+  .dark * {
+    scrollbar-width: thin;
+    scrollbar-color: #4b5563 #030712; /* thumb color track color */
+  }
+}
+
+html.dark {
+  background-color: #030712; /* bg-gray-950 */
+}
+
+html.light {
+  background-color: #f9fafb; /* bg-gray-50 */
+}
+
+html.vl-dark #storybook-root {
+  background-color: #111827; /* bg-gray-900 */
+}
+
+body {
+  font-family: Roboto, sans-serif;
+}
+
+.light .sbdocs .sbdocs-content > h1,
+.light .sbdocs .sbdocs-content > h2,
+.light .sbdocs .sbdocs-content > h3,
+.light .sbdocs .sbdocs-content > .sb-anchor > h3,
+.light .sbdocs .sbdocs-content > .sb-anchor > p,
+.light .sbdocs .sbdocs-content > ul > li,
+.light .sbdocs .sbdocs-content > p,
+.light .sbdocs .sbdocs-content > table th,
+.light .sbdocs .sbdocs-content > table td {
+  color: #111827 !important; /* !text-gray-900 */
+}
+
+.dark .sbdocs .sbdocs-content > h1,
+.dark .sbdocs .sbdocs-content > h2,
+.dark .sbdocs .sbdocs-content > h3,
+.dark .sbdocs .sbdocs-content > .sb-anchor > h3,
+.dark .sbdocs .sbdocs-content > .sb-anchor > p,
+.dark .sbdocs .sbdocs-content > ul > li,
+.dark .sbdocs .sbdocs-content > p,
+.dark .sbdocs .sbdocs-content > table th,
+.dark .sbdocs .sbdocs-content > table td {
+  color: #e5e7eb !important; /* !text-gray-200 */
+}
+
+.sbdocs .sbdocs-content > table tr {
+  border-style: none; /* border-none */
+}
+
+.sbdocs .sbdocs-content > table th,
+.sbdocs .sbdocs-content > table td {
+  border-left-width: 0; /* border-l-0 */
+  border-top-width: 0;  /* border-t-0 */
+  text-align: left;       /* text-left */
+}
+
+.sbdocs .sbdocs-content > table th:last-child,
+.sbdocs .sbdocs-content > table td:last-child {
+  border-right-width: 0; /* border-r-0 */
+}
+
+.sbdocs .sbdocs-content > table tbody tr:last-child td {
+  border-bottom-width: 0; /* border-b-0 */
+}
+
+.light .sbdocs .sbdocs-content > table th {
+  background-color: #f3f4f6; /* bg-gray-100 */
+  border-color: #e5e7eb;     /* border-gray-200 */
+}
+
+.light .sbdocs .sbdocs-content > table td {
+  background-color: #ffffff; /* bg-white */
+  border-color: #e5e7eb;     /* border-gray-200 */
+}
+
+.light .sbdocs .sbdocs-content > table {
+  border-radius: 0.5rem;            /* rounded-lg */
+  outline: 1px solid #e5e7eb;       /* outline-1 outline-gray-200 */
+  overflow: hidden;                 /* overflow-hidden */
+}
+
+.dark .sbdocs .sbdocs-content > table th {
+  background-color: #1f2937; /* bg-gray-800 */
+  border-color: #374151;     /* border-gray-700 */
+}
+
+.dark .sbdocs .sbdocs-content > table td {
+  background-color: #111827; /* bg-gray-900 */
+  border-color: #374151;     /* border-gray-700 */
+}
+
+.dark .sbdocs .sbdocs-content > table {
+  border-radius: 0.5rem;            /* rounded-lg */
+  outline: 1px solid #374151;       /* outline-1 outline-gray-700 */
+  overflow: hidden;                 /* overflow-hidden */
+}
+
+/* -------------------- Storybook preview skeleton -------------------- */
+
+.light .sb-preparing-docs,
+.light .sb-preparing-story {
+  background-color: #f9fafb; /* bg-gray-50 */
+}
+
+.light .sb-previewBlock {
+  background-color: #ffffff;       /* bg-white */
+  border-color: #e5e7eb;           /* border-gray-200 */
+  border-radius: 0.5rem;           /* rounded-lg */
+  box-shadow: none !important;
+}
+
+.light .sb-previewBlock_header {
+  border-style: solid;             /* border-solid */
+  border-bottom-width: 1px;        /* border-b */
+  border-bottom-color: #e5e7eb !important; /* !border-b-gray-200 */
+  box-shadow: none !important;
+}
+
+.light .sb-previewBlock_icon {
+  background-color: #d1d5db; /* bg-gray-300 */
+}
+
+.light .sb-argstableBlock-body {
+  border-radius: 0.125rem; /* rounded-sm */
+  box-shadow: rgb(0 0 0 / 5%) 0 1px 3px 1px, rgb(0 0 0 / 4%) 0 0 0 1px;
+}
+
+.light .sb-argstableBlock-body td {
+  background-color: #ffffff;       /* bg-white */
+  border-style: solid;             /* border-solid */
+  border-bottom-width: 1px;        /* border-b */
+  border-bottom-color: #e5e7eb !important; /* !border-b-gray-200 */
+}
+
+.light .sb-argstableBlock-body tr:last-child td {
+  border-bottom-width: 0px; /* border-b-0 */
+}
+
+.light .sb-argstableBlock span,
+.light .sb-argstableBlock button {
+  background-color: #e5e7eb; /* bg-gray-200 */
+}
+
+.dark .sb-preparing-docs,
+.dark .sb-preparing-story {
+  background-color: #030712; /* bg-gray-950 */
+}
+
+.dark .sb-previewBlock {
+  background-color: #111827;       /* bg-gray-900 */
+  border-color: #1f2937;           /* border-gray-800 */
+  border-radius: 0.5rem;           /* rounded-lg */
+  box-shadow: none !important;
+}
+
+.dark .sb-previewBlock_header {
+  border-style: solid;             /* border-solid */
+  border-bottom-width: 1px;        /* border-b */
+  border-bottom-color: #1f2937 !important; /* !border-b-gray-800 */
+  box-shadow: none !important;
+}
+
+.dark .sb-previewBlock_icon {
+  background-color: #374151; /* bg-gray-700 */
+}
+
+.dark .sb-argstableBlock-body {
+  border-radius: 0.125rem; /* rounded-sm */
+  box-shadow: rgb(255 255 255 / 10%) 0 1px 3px 1px, rgb(255 255 255 / 7%) 0 0 0 1px;
+}
+
+.dark .sb-argstableBlock-body td {
+  background-color: #111827;       /* bg-gray-900 */
+  border-style: solid;             /* border-solid */
+  border-bottom-width: 1px;        /* border-b */
+  border-bottom-color: #1f2937 !important; /* !border-b-gray-800 */
+}
+
+.dark .sb-argstableBlock-body tr:last-child td {
+  border-bottom-width: 0px; /* border-b-0 */
+}
+
+.dark .sb-argstableBlock span,
+.dark .sb-argstableBlock button {
+  background-color: #374151; /* bg-gray-700 */
+}
+
+/* -------------------- All docs block -------------------- */
+
+.dark .sbdocs {
+  background-color: #030712; /* bg-gray-950 */
+}
+
+/* -------------------- Main story -------------------- */
+
+.sb-anchor {
+  margin-top: 0.5rem; /* mt-2 */
+}
+
+.sb-anchor > p {
+  margin-top: -0.5rem; /* mt-2 */
+  margin-bottom: -0.5rem; /* -mt-2 */
+}
+
+.dark .sb-anchor > p > a {
+  color: #4ade80; /* text-green-400 */
+  text-decoration: underline dashed #4ade80;
+}
+
+.light .sb-anchor > p > a {
+  color: #16a34a; /* text-green-600 */
+  text-decoration: underline dashed #16a34a;
+}
+
+.sb-bar,
+.docs-story {
+  background-color: #ffffff; /* bg-white */
+}
+
+.vl-dark .sb-bar,
+.vl-dark .docs-story,
+.vl-dark .docs-story + div {
+  background-color: #111827 !important; /* !bg-gray-900 */
+}
+
+/* prevents showing scrollbar in buttons stories */
+.docs-story > div > div {
+  overflow-y: hidden;
+}
+
+.sb-bar {
+  border-width: 0; /* border-0 */
+}
+
+.dark .sb-bar {
+  border-bottom: 1px solid #d1d5db; /* border-b border-gray-300 */
+  box-shadow: none !important;
+}
+
+.vl-dark .sb-bar {
+  border-bottom: 1px solid #1f2937; /* border-b border-gray-800 */
+  box-shadow: none !important;
+}
+
+.sbdocs.sbdocs-preview .prismjs {
+  border-top: 1px solid #374151; /* border-t border-t-gray-700 */
+  background-color: #1f2937; /* bg-gray-800 */
+}
+
+.vl-dark .docblock-code-toggle {
+  background-color: #1f2937; /* bg-gray-800 */
+  border-color: #1f2937;     /* border-gray-800 */
+  color: #9ca3af;            /* text-gray-400 */
+}
+
+.vl-light .docblock-code-toggle {
+  border: 1px solid #d1d5db !important; /* !border border-gray-300 */
+}
+
+.vl-dark .docblock-code-toggle {
+  border: 1px solid #374151 !important; /* !border border-gray-700 */
+}
+
+.docblock-code-toggle,
+.docblock-source > div > button,
+.docs-story > div > button,
+.docs-story + div > div > button {
+  margin: 0 4px 4px 0 !important;
+  border-radius: 8px !important;
+  box-shadow: none !important;
+}
+
+.docblock-code-toggle,
+.docblock-source > div,
+.docs-story > div,
+.docs-story + div > div {
+  background: transparent !important;
+}
+
+.sbdocs-preview {
+  border-radius: 8px !important;
+  box-shadow: none !important;
+}
+
+.dark .sbdocs.sbdocs-preview,
+.vl-dark .sbdocs.sbdocs-preview {
+  border-color: #1f2937; /* border-gray-800 */
+}
+
+/* -------------------- Args table -------------------- */
+
+@media screen and (max-width: 600px) {
+  div:has(> .docblock-argstable) {
+    margin-bottom: 2.5rem !important;
+    overflow-x: scroll;
+  }
+
+  .docblock-argstable {
+    margin-bottom: 0 !important;
+  }
+}
+
+.dark .docblock-argstable,
+.dark .docblock-argstable-head th {
+  color: rgb(229, 231, 235) !important; /* text-gray-200 */
+}
+
+.docblock-argstable-body {
+  border-radius: 0.5rem; /* rounded-lg */
+  filter: none !important;
+}
+
+.docblock-argstable-body tr td {
+  border-radius: 0 !important; /* !rounded-none */
+}
+
+.docblock-argstable-body tr:not([title]) > td {
+  background-color: #fff !important; /* bg-white */
+}
+
+.dark .docblock-argstable-body tr > td {
+  border-top: 1px solid rgb(31, 41, 55) !important;
+  border-bottom: 1px solid rgb(31, 41, 55) !important; /* border-b border-gray-800 */
+  background-color: rgb(17, 24, 39) !important; /* bg-gray-900 */
+  border-inline-start-style: solid;
+  border-inline-start-width: 0;
+  border-inline-end-style: solid;
+  border-inline-end-width: 0;
+}
+
+.dark .docblock-argstable-body tr > td:first-child,
+.dark .docblock-argstable-body tr > td:last-child {
+  border-inline-start-color: rgb(31, 41, 55) !important; /* border-s-gray-800 */
+  border-inline-end-color: rgb(31, 41, 55) !important; /* border-s-gray-800 */
+}
+
+.dark .docblock-argstable-body {
+  border-bottom: 1px solid rgb(31, 41, 55); /* border-b-gray-800 */
+}
+
+.dark .docblock-argstable-body tr[title] > td {
+  background-color: rgb(31, 41, 55) !important;
+  color: rgb(156, 163, 175) !important; /* text-gray-400 */
+}
+
+.dark .docblock-argstable-body tr[title] > td svg {
+  color: rgb(156, 163, 175) !important;  /* text-gray-400 */
+}
+
+.light .sbdocs .sbdocs-content code,
+.light .docblock-argstable-body tr > td > div + div > span[class],
+.light .docblock-argstable-body tr > td > div + div > div > span,
+.light .docblock-argstable-body tr > td:nth-child(2) > div > div > span[class],
+.light .docblock-argstable-body tr > td:nth-child(3) > div > span[class],
+.light .docblock-argstable-body tr > td:nth-child(3) > span[class] {
+  background-color: rgb(243, 244, 246); /* bg-gray-100 */
+  border-color: rgb(229, 231, 235); /* border-gray-200 */
+  color: rgb(31, 41, 55); /* text-gray-800 */
+}
+
+.dark .rejt-value-node:hover .rejt-value,
+.dark .sbdocs .sbdocs-content code,
+.dark .docblock-argstable-body tr > td > div + div > span[class],
+.dark .docblock-argstable-body tr > td > div + div > div > span,
+.dark .docblock-argstable-body tr > td:nth-child(2) > div > div > span[class],
+.dark .docblock-argstable-body tr > td:nth-child(3) > div > span[class],
+.dark .docblock-argstable-body tr > td:nth-child(3) > span[class] {
+  background-color: rgb(31, 41, 55); /* bg-gray-800 */
+  border-color: rgba(55, 65, 81, 0.5); /* border-gray-700/50 */
+  color: rgb(156, 163, 175); /* text-gray-400 */
+  border-radius: 4px !important;
+}
+
+.dark .sb-story code,
+.light .sb-story code {
+  background-color: inherit !important;
+  color: inherit !important;
+  border-radius: 4px !important;
+}
+
+.dark .docblock-argstable-body tr > td > div + div > span:not([class]) {
+  color: rgb(156, 163, 175); /* text-gray-400 */
+}
+
+.dark .docblock-argstable-body tr > td .rejt-edit-form,
+.dark .docblock-argstable-body tr > td input:not([type="checkbox"]),
+.dark .docblock-argstable-body tr > td textarea,
+.dark .docblock-argstable-body tr > td select,
+.dark .docblock-argstable-body tr > td:nth-child(4) button {
+  color: rgb(229, 231, 235); /* text-gray-200 */
+  background-color: rgb(31, 41, 55); /* bg-gray-800 */
+  border: 1px solid rgba(55, 65, 81, 0.5); /* border-gray-700/50 */
+  font-size: 13px;
+  box-shadow: none !important;
+  color-scheme: dark;
+}
+
+.dark .docblock-argstable-body tr > td .rejt-edit-form:hover,
+.dark .docblock-argstable-body tr > td input:hover,
+.dark .docblock-argstable-body tr > td textarea:hover,
+.dark .docblock-argstable-body tr > td select:hover,
+.dark .docblock-argstable-body tr > td:nth-child(4) button:hover {
+  border: 1px solid #4b5563; /* border-gray-600 */
+}
+
+.dark .docblock-argstable-body tr > td .rejt-edit-form:focus,
+.dark .docblock-argstable-body tr > td input:focus,
+.dark .docblock-argstable-body tr > td textarea:focus,
+.dark .docblock-argstable-body tr > td select:focus,
+.dark .docblock-argstable-body tr > td:nth-child(4) button:focus {
+  border: 1px solid rgb(107, 114, 128); /* border-gray-500 */
+}
+
+.docblock-argstable-body tr > td .rejt-add-value-node button {
+  padding-left: 0.375rem; /* px-1.5 */
+  padding-right: 0.375rem;
+  padding-top: 0.125rem; /* py-0.5 */
+  padding-bottom: 0.125rem;
+  line-height: 1;
+}
+
+.light .docblock-argstable-body tr > td .rejt-add-value-node button[type="submit"] {
+  background-color: #fff;
+}
+
+.light .docblock-argstable-body tr > td .rejt-edit-form,
+.light .docblock-argstable-body tr > td input:not([type="checkbox"]),
+.light .docblock-argstable-body tr > td textarea,
+.light .docblock-argstable-body tr > td select,
+.light .docblock-argstable-body tr > td:nth-child(4) button {
+  color: rgb(17, 24, 39); /* text-gray-900 */
+  border: 1px solid rgb(209, 213, 219); /* border-gray-300 */
+  font-size: 13px;
+  box-shadow: none !important;
+}
+
+.light .docblock-argstable-body tr > td .rejt-edit-form:hover,
+.light .docblock-argstable-body tr > td input:hover,
+.light .docblock-argstable-body tr > td textarea:hover,
+.light .docblock-argstable-body tr > td select:hover,
+.light .docblock-argstable-body tr > td:nth-child(4) button:hover {
+  border: 1px solid rgb(156, 163, 175); /* border-gray-400 */
+}
+
+.light .docblock-argstable-body tr > td .rejt-edit-form:focus,
+.light .docblock-argstable-body tr > td input:focus,
+.light .docblock-argstable-body tr > td textarea:focus,
+.light .docblock-argstable-body tr > td select:focus,
+.light .docblock-argstable-body tr > td:nth-child(4) button:focus {
+  border: 1px solid rgb(107, 114, 128); /* border-gray-500 */
+}
+
+.dark .docblock-argstable-body label[aria-disabled] {
+  background-color: rgb(31, 41, 55); /* bg-gray-800 */
+}
+
+.dark .docblock-argstable-body label[aria-disabled] span {
+  color: rgb(229, 231, 235); /* text-gray-200 */
+}
+
+.dark .docblock-argstable-body [type='checkbox'],
+.dark .docblock-argstable-body [type='radio'] {
+  border: 1px solid rgb(55, 65, 81) !important; /* border-gray-700 */
+  box-shadow: none !important;
+}
+
+.dark .docblock-argstable-body [type='radio']:checked {
+  background-color: rgb(17, 24, 39); /* bg-gray-900 */
+}
+
+.light .docblock-argstable-body [type='radio']:checked {
+  background-color: rgb(17, 24, 39) !important; /* bg-gray-900 */
+}
+
+.docblock-argstable [type='checkbox']:focus,
+.docblock-argstable [type='radio']:focus {
+  outline-color: rgb(209, 213, 219) !important; /* ring-gray-300 */
+}
+
+.dark .rejt-name,
+.dark .rejt-collapsed-text {
+  color: rgb(156, 163, 175) !important; /* text-gray-400 */
+}
+
+.dark .rejt-value {
+  color: rgb(229, 231, 235) !important; /* text-gray-200 */
+}
+
+/* -------------------- Code block and user markdown -------------------- */
+
+#storybook-docs h2 {
+  margin-top: 2rem;          /* mt-8 */
+  margin-bottom: 1.5rem;     /* mb-6 */
+  padding-bottom: 0.5rem;    /* pb-2 */
+  font-weight: 700;          /* font-bold */
+}
+
+.dark h2 {
+  border-bottom-color: rgb(31, 41, 55); /* border-b-gray-800 */
+}
+
+.docblock-source {
+  background-color: rgb(31, 41, 55) !important; /* !bg-gray-800 */
+  border-color: rgb(31, 41, 55);               /* border-gray-800 */
+  box-shadow: none !important;
+  border-radius: 8px !important;
+}
+
+.dark .docblock-source {
+  background-color: rgb(17, 24, 39) !important; /* !bg-gray-900 */
+  border-color: rgb(31, 41, 55) !important;     /* !border-gray-800 */
+}
+
+.dark .docblock-source button {
+  background-color: rgb(31, 41, 55);       /* bg-gray-800 */
+  border-color: rgb(31, 41, 55);           /* border-gray-800 */
+  color: rgb(156, 163, 175);               /* text-gray-400 */
+  border-top-left-radius: 0;    /* rounded-tl-none */
+}
+
+.dark a.sbdocs.sbdocs-a {
+  color: #6b7280; /* text-gray-500 */
+}
+
+.light a.sbdocs.sbdocs-a {
+  color: #6b7280; /* text-gray-500 */
+}
+
+.light a.sbdocs.sbdocs-a:hover,
+.dark a.sbdocs.sbdocs-a:hover{
+  text-decoration: underline dashed #6b7280; /* text-gray-500 */
+  text-underline-offset: 3px;
+}
+
+/* -------------------- Storybook story preview -------------------- */
+
+.vl-dark {
+  min-height: 100%;                  /* min-h-full */
+  background-color: rgb(17, 24, 39); /* bg-gray-900 */
+}
+
+.vl-light {
+  min-height: 100%;           /* min-h-full */
+  background-color: #ffffff;  /* bg-white */
+}

package/.storybook-ts/themes/themeDark.ts

@@ -0,0 +1,45 @@
+import { create } from "storybook/theming/create";
+import type { ThemeVars } from "storybook/theming";
+
+export const themeDark: ThemeVars = create({
+  base: "dark",
+  // Typography
+  fontBase: '"Roboto", sans-serif',
+  fontCode: "monospace",
+
+  brandTitle: "Vueless UI",
+  brandUrl: "https://vueless.com",
+  brandImage: "./images/vueless-logo-dark.svg",
+  brandTarget: "_blank",
+
+  // Main colors
+  colorPrimary: "#e5e7eb", // gray-200
+  colorSecondary: "#374151", // gray-700
+
+  // UI
+  appBg: "#111827", // gray-900
+  appPreviewBg: "#111827", // gray-900
+  appBorderColor: "#111827", // gray-900
+  appBorderRadius: 0,
+
+  // Text colors
+  textColor: "#d1d5db", // gray-300
+  textInverseColor: "#1f2937", // gray-800
+
+  // Toolbar default and active colors
+  barTextColor: "#6b7280", // gray-500
+  barHoverColor: "#9ca3af", // gray-400
+  barSelectedColor: "#d1d5db", // gray-300
+  barBg: "#030712", // gray-950
+
+  // Form colors
+  inputBg: "#030712", // gray-950
+  inputBorder: "#4b5563", // gray-600
+  inputTextColor: "#f3f4f6", // gray-100
+  inputBorderRadius: 4,
+
+  buttonBg: "#1f2937", // gray-800
+  buttonBorder: "#1f2937", // gray-800
+  booleanBg: "#111827", // gray-900
+  booleanSelectedBg: "#1f2937", // gray-800
+});

package/.storybook-ts/themes/themeLight.ts

@@ -0,0 +1,45 @@
+import { create } from "storybook/theming/create";
+import type { ThemeVars } from "storybook/theming";
+
+export const themeLight: ThemeVars = create({
+  base: "light",
+  // Typography
+  fontBase: '"Roboto", sans-serif',
+  fontCode: "monospace",
+
+  brandTitle: "Vueless UI",
+  brandUrl: "https://vueless.com",
+  brandImage: "./images/vueless-logo-light.svg",
+  brandTarget: "_blank",
+
+  // Main colors
+  colorPrimary: "#111827", // gray-900
+  colorSecondary: "#6b7280", // gray-500
+
+  // UI
+  appBg: "#ffffff", // white
+  appPreviewBg: "#f9fafb", // gray-50
+  appBorderColor: "#d1d5db", // gray-300
+  appBorderRadius: 0,
+
+  // Text colors
+  textColor: "#111827", // gray-900
+  textInverseColor: "#111827", // gray-900
+
+  // Toolbar default and active colors
+  barTextColor: "#6b7280", // gray-500
+  barHoverColor: "#4b5563", // gray-600
+  barSelectedColor: "#374151", // gray-700
+  barBg: "#f9fafb", // gray-50
+
+  // Form colors
+  inputBg: "#ffffff", // white
+  inputBorder: "#d1d5db", // gray-300
+  inputTextColor: "#111827", // gray-900
+  inputBorderRadius: 4,
+
+  buttonBg: "#f3f4f6", // gray-100
+  buttonBorder: "#e5e7eb", // gray-200
+  booleanBg: "#f9fafb", // gray-50
+  booleanSelectedBg: "#e5e7eb", // gray-200
+});