@solidxai/core-ui 0.1.14-beta.4 → 0.1.14-beta.9

package/dist/resources/themes/solid-dark-modern/theme-variables.css

@@ -0,0 +1,27 @@
+:root {
+  --solid-surface-2: #1d1713;
+  --solid-interactive-bg: #f28c28;
+  --solid-focus-ring: rgba(242, 140, 40, 0.24);
+  --accent: #261d18;
+  --accent-foreground: #fde7cf;
+  --primary: #f28c28;
+  --primary-foreground: #1a120d;
+  --ring: rgba(242, 140, 40, 0.24);
+  --primary-color: var(--primary);
+  --primary-color-text: var(--primary-foreground);
+  --focus-ring: 0 0 0 0.2rem var(--ring, rgba(242, 140, 40, 0.24));
+  --primary-light-color: rgba(242, 140, 40, 0.14);
+  --highlight-bg: rgba(242, 140, 40, 0.16);
+  --highlight-text-color: #ffd8af;
+  --solid-dashboard-welcome-bg: #120e0c;
+  --solid-admin-card-color-1: #f28c28;
+  --solid-admin-card-color-2: #da7415;
+  --solid-admin-card-color-3: #ffb56b;
+  --sidebar-background: #14100d;
+  --sidebar-foreground: #f3dfc7;
+  --sidebar-border: #30241d;
+  --sidebar-accent: #1d1612;
+  --sidebar-accent-foreground: #fff2df;
+  --sidebar-primary: #f28c28;
+  --sidebar-primary-foreground: #1a120d;
+}

package/dist/resources/themes/solid-dark-modern/theme.css

@@ -0,0 +1,600 @@
+@import url("/themes/solid-dark-purple/theme.css");
+@import url("/themes/solid-dark-modern/theme-variables.css");
+
+@layer solid-theme {
+  .solid-auth-theme-wrapper.center .solid-center-layout {
+    width: min(520px, calc(100vw - 32px)) !important;
+  }
+
+  body,
+  #root,
+  .layout-wrapper,
+  .layout-main-container,
+  .main-content,
+  .page-parent-wrapper,
+  .solid-list-page-wrapper,
+  .solid-form-page-wrapper {
+    background:
+      radial-gradient(circle at top right, rgba(249, 115, 22, 0.08), transparent 24%),
+      linear-gradient(180deg, #0c1018 0%, #121826 100%);
+  }
+
+  .layout-topbar {
+    background: rgba(13, 18, 28, 0.92);
+    border-bottom: 1px solid rgba(58, 68, 92, 0.5);
+    backdrop-filter: blur(20px);
+    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
+  }
+
+  .page-parent-wrapper,
+  .solid-list-page-wrapper,
+  .solid-form-wrapper,
+  .solid-list-content {
+    background: transparent;
+  }
+
+  .solid-sidebar,
+  aside.solid-sidebar,
+  .solid-sidebar.is-open,
+  .solid-sidebar.is-collapsed {
+    background: #111621 !important;
+    color: #f2f4f8 !important;
+    border-right: 1px solid rgba(51, 61, 84, 0.56) !important;
+    box-shadow: none !important;
+  }
+
+  .solid-sidebar-header,
+  .solid-sidebar-search-wrap,
+  .solid-sidebar-tree-wrap,
+  .solid-sidebar-footer {
+    background: transparent !important;
+    border-color: rgba(58, 68, 92, 0.34) !important;
+  }
+
+  .solid-sidebar-header {
+    padding: 18px 16px 12px;
+  }
+
+  .solid-sidebar-search-wrap,
+  .solid-sidebar-footer {
+    padding-left: 14px;
+    padding-right: 14px;
+  }
+
+  .solid-workspace-trigger,
+  .solid-sidebar-search,
+  .solid-sidebar-footer .userProfile,
+  .solid-sidebar-external-trigger {
+    background: #191f2d !important;
+    border: 1px solid rgba(58, 68, 92, 0.56) !important;
+    border-radius: 14px !important;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+  }
+
+  .solid-workspace-avatar,
+  .solid-workspace-item-avatar {
+    background: linear-gradient(135deg, #ffb56b, #f28c28) !important;
+    color: #1a120d !important;
+  }
+
+  .solid-workspace-label-top,
+  .solid-sidebar-search::placeholder {
+    color: rgba(171, 180, 201, 0.72) !important;
+  }
+
+  .solid-workspace-label,
+  .solid-workspace-item-label,
+  .solid-sidebar-tree-link,
+  .solid-sidebar-tree-parent,
+  .solid-sidebar-tree-label,
+  .solid-sidebar-tree-toggle,
+  .solid-sidebar-mobile-action {
+    color: #eef2f8 !important;
+  }
+
+  .solid-sidebar-tree-wrap {
+    padding: 10px 14px 14px;
+  }
+
+  .solid-sidebar-tree-row {
+    min-height: 44px;
+    padding: 0 14px;
+    margin-bottom: 8px;
+    border-radius: 14px !important;
+    border: 1px solid transparent !important;
+    gap: 10px;
+    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
+  }
+
+  .solid-sidebar-tree-row:hover {
+    background: #1a2232 !important;
+    border-color: rgba(76, 90, 121, 0.58) !important;
+    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.16);
+  }
+
+  .solid-sidebar-tree-row.is-active {
+    background: #20293b !important;
+    border-color: rgba(249, 115, 22, 0.3) !important;
+    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.22) !important;
+    position: relative;
+  }
+
+  .solid-sidebar-tree-row.is-active .solid-sidebar-tree-label,
+  .solid-sidebar-tree-row.is-active .solid-sidebar-tree-link,
+  .solid-sidebar-tree-row.is-active .solid-sidebar-tree-parent,
+  .solid-sidebar-tree-row.is-active .solid-sidebar-tree-toggle {
+    color: #fff2df !important;
+    font-weight: 700 !important;
+  }
+
+  .solid-sidebar-tree-row.is-active::before {
+    content: "";
+    position: absolute;
+    left: 6px;
+    top: 8px;
+    bottom: 8px;
+    width: 3px;
+    border-radius: 999px;
+    background: linear-gradient(180deg, #ffb56b 0%, #f28c28 100%);
+  }
+
+  .solid-sidebar-tree-toggle {
+    width: 30px;
+    height: 30px;
+    border-radius: 10px;
+  }
+
+  .solid-sidebar-tree-toggle:hover {
+    background: rgba(242, 140, 40, 0.08);
+  }
+
+  .solid-collapsed-item {
+    border-radius: 16px;
+    border: 1px solid rgba(58, 68, 92, 0.5);
+    background: rgba(255, 255, 255, 0.03);
+  }
+
+  .solid-collapsed-item.is-active {
+    background: rgba(242, 140, 40, 0.16);
+    color: #fff2df;
+    border-color: rgba(242, 140, 40, 0.2);
+  }
+
+  .solid-list-surface,
+  .solid-form-section,
+  .solid-card-view-card,
+  .solid-kanban-card,
+  .p-card {
+    background: #2c3448;
+    border: 1px solid rgba(65, 76, 104, 0.7);
+    border-radius: 20px;
+    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.24);
+    overflow: hidden;
+  }
+
+  .solid-list-toolbar {
+    padding: 22px 24px 16px;
+    border-bottom: 1px solid rgba(65, 76, 104, 0.62);
+    background: #2c3448;
+  }
+
+  .solid-list-toolbar .view-title,
+  .form-wrapper-title,
+  .view-title {
+    font-size: 1.08rem;
+    font-weight: 800;
+    line-height: 1.2;
+    color: #f6f7fb;
+    letter-spacing: -0.02em;
+  }
+
+  .solid-list-toolbar .solid-list-toolbar-actions,
+  .solid-form-toolbar-actions,
+  .solid-header-buttons-wrapper {
+    gap: 0.6rem !important;
+  }
+
+  .solid-list-toolbar .solid-global-search-element,
+  .solid-kanban-toolbar .solid-global-search-element,
+  .solid-tree-toolbar .solid-global-search-element {
+    height: 44px;
+    border: 1px solid rgba(65, 76, 104, 0.72);
+    border-radius: 12px;
+    background: #1f2738;
+    padding-left: 12px;
+    box-shadow: none;
+  }
+
+  .solid-list-toolbar .solid-global-search-element:focus-within,
+  .solid-kanban-toolbar .solid-global-search-element:focus-within,
+  .solid-tree-toolbar .solid-global-search-element:focus-within {
+    border-color: #f28c28;
+    box-shadow: 0 0 0 4px rgba(242, 140, 40, 0.14);
+  }
+
+  .solid-list-toolbar .solid-global-search-element input,
+  .solid-kanban-toolbar .solid-global-search-element input,
+  .solid-tree-toolbar .solid-global-search-element input {
+    height: 40px;
+    font-size: 13px;
+    color: #eef2f8;
+  }
+
+  .solid-list-toolbar .solid-global-search-element input::placeholder,
+  .solid-kanban-toolbar .solid-global-search-element input::placeholder,
+  .solid-tree-toolbar .solid-global-search-element input::placeholder {
+    color: #aeb6c9;
+  }
+
+  .solid-list-toolbar .custom-filter-button,
+  .solid-list-toolbar .solid-icon-button,
+  .solid-header-cog-trigger,
+  .solid-form-toolbar-actions .solid-icon-button {
+    border: 1px solid rgba(65, 76, 104, 0.72) !important;
+    background: #1f2738 !important;
+    color: #eef2f8 !important;
+    border-radius: 12px !important;
+    box-shadow: none;
+  }
+
+  .solid-list-toolbar .p-button,
+  .solid-list-toolbar .solid-btn,
+  .solid-form-toolbar-actions .p-button,
+  .solid-form-toolbar-actions .solid-btn {
+    height: 40px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 700;
+  }
+
+  .p-button:not(.p-button-text):not(.p-button-link) {
+    background: #f28c28;
+    border-color: #f28c28;
+    color: #1a120d;
+    box-shadow: 0 10px 20px rgba(242, 140, 40, 0.2);
+  }
+
+  .p-button:not(.p-button-text):not(.p-button-link):hover {
+    background: #da7415;
+    border-color: #da7415;
+  }
+
+  .p-button.p-button-secondary,
+  .p-button.p-button-outlined {
+    background: #1f2738;
+    color: #eef2f8;
+    border-color: rgba(65, 76, 104, 0.72);
+    box-shadow: none;
+  }
+
+  .p-inputtext,
+  .p-dropdown,
+  .p-multiselect,
+  .p-inputnumber-input,
+  .p-password-input,
+  .p-inputtextarea,
+  .p-autocomplete .p-inputtext,
+  .p-calendar .p-inputtext,
+  .p-treeselect,
+  .p-cascadeselect {
+    min-height: 46px;
+    border-radius: 12px !important;
+    border: 1px solid rgba(65, 76, 104, 0.72) !important;
+    background: #31384d !important;
+    color: #f3f5fa !important;
+    box-shadow: none !important;
+  }
+
+  .p-inputtext::placeholder,
+  .p-inputtextarea::placeholder,
+  .p-autocomplete-input::placeholder {
+    color: #aeb6c9 !important;
+  }
+
+  .p-inputtext:enabled:hover,
+  .p-dropdown:not(.p-disabled):hover,
+  .p-multiselect:not(.p-disabled):hover,
+  .p-treeselect:not(.p-disabled):hover,
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: rgba(242, 140, 40, 0.3) !important;
+  }
+
+  .p-inputtext:enabled:focus,
+  .p-inputtextarea:enabled:focus,
+  .p-dropdown:not(.p-disabled).p-focus,
+  .p-multiselect:not(.p-disabled).p-focus,
+  .p-treeselect:not(.p-disabled).p-focus,
+  .p-cascadeselect:not(.p-disabled).p-focus,
+  .p-autocomplete:not(.p-disabled).p-focus .p-inputtext,
+  .p-calendar:not(.p-disabled).p-focus .p-inputtext {
+    border-color: #f28c28 !important;
+    box-shadow: 0 0 0 4px rgba(242, 140, 40, 0.14) !important;
+  }
+
+  .p-dropdown .p-dropdown-trigger,
+  .p-multiselect .p-multiselect-trigger,
+  .p-treeselect .p-treeselect-trigger,
+  .p-cascadeselect .p-cascadeselect-trigger {
+    width: 2.75rem;
+    color: #b7bfd2 !important;
+  }
+
+  .p-dropdown-panel,
+  .p-multiselect-panel,
+  .p-autocomplete-panel,
+  .p-datepicker,
+  .p-datepicker:not(.p-datepicker-inline),
+  .p-treeselect-panel,
+  .p-cascadeselect-panel {
+    background: #2c3448 !important;
+    color: #f3f5fa !important;
+    border: 1px solid rgba(65, 76, 104, 0.72) !important;
+    border-radius: 14px !important;
+    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.28) !important;
+  }
+
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item,
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item,
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item,
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treenode-content,
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    border-radius: 10px;
+    margin: 4px 8px;
+    color: #f3f5fa !important;
+  }
+
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight,
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight,
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight,
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    background: rgba(242, 140, 40, 0.16) !important;
+    color: #ffd8af !important;
+  }
+
+  .solid-form-section {
+    --solid-form-control-bg: rgba(255, 255, 255, 0.04);
+    --solid-form-control-bg-disabled: rgba(51, 65, 85, 0.24);
+  }
+
+  .solid-form-header {
+    padding: 22px 24px 16px;
+    background: #2c3448;
+    border-bottom: 1px solid rgba(65, 76, 104, 0.62);
+  }
+
+  .solid-form-wrapper .page-header.solid-list-toolbar {
+    background: transparent;
+    border-bottom: 0;
+    box-shadow: none;
+  }
+
+  .solid-form-toolbar-row {
+    align-items: center;
+  }
+
+  .solid-form-toolbar-left {
+    gap: 0.9rem;
+  }
+
+  .solid-form-content,
+  .solid-form-wrapper .solid-form-content.solid-form-view,
+  .solid-form-wrapper .solid-form-content.solid-form-edit {
+    padding: 24px;
+    background: linear-gradient(180deg, #20283a 0%, #1b2232 100%);
+  }
+
+  .form-field-label {
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: #b5bdd1;
+    margin-bottom: 0.5rem;
+  }
+
+  .solid-form-content .p-inputtext,
+  .solid-form-content .p-dropdown,
+  .solid-form-content .p-multiselect,
+  .solid-form-content .p-inputnumber-input,
+  .solid-form-content .solid-standard-autocomplete .p-inputtext,
+  .solid-form-content .solid-standard-autocomplete .p-autocomplete-dropdown.p-button,
+  .solid-form-content .react-datepicker-wrapper input,
+  .solid-form-content .solid-input,
+  .solid-form-content .solid-select,
+  .solid-form-content .solid-autocomplete-control {
+    min-height: 46px;
+  }
+
+  .solid-form-content .p-dropdown:not(.p-disabled).p-focus,
+  .solid-form-content .p-multiselect:not(.p-disabled).p-focus,
+  .solid-form-content .p-inputtext:enabled:focus,
+  .solid-form-content .solid-standard-autocomplete.p-inputwrapper-focus .p-inputtext,
+  .solid-form-content .solid-standard-autocomplete.p-inputwrapper-focus .p-autocomplete-dropdown.p-button {
+    border-color: #f28c28;
+    box-shadow: 0 0 0 4px rgba(242, 140, 40, 0.14);
+  }
+
+  .solid-notebook-tablist {
+    border-bottom: 0;
+    gap: 0.4rem;
+    padding: 6px;
+    background: #1f2738;
+    border: 1px solid rgba(65, 76, 104, 0.72);
+    border-radius: 14px;
+  }
+
+  .solid-notebook-tab-trigger {
+    padding: 10px 14px;
+    border: 1px solid transparent;
+    border-radius: 10px;
+    margin-bottom: 0;
+    color: #aeb6c9;
+    background: transparent;
+  }
+
+  .solid-notebook-tab-trigger:hover {
+    color: #eff6ff;
+    background: rgba(242, 140, 40, 0.08);
+  }
+
+  .solid-notebook-tab-trigger.active {
+    color: #eff6ff;
+    border-color: rgba(242, 140, 40, 0.18);
+    background: #2b1d15;
+    box-shadow: 0 4px 12px rgba(2, 6, 23, 0.2);
+  }
+
+  .solid-list-table-area {
+    padding: 4px 16px 16px;
+  }
+
+  .solid-list-table-area > .solid-data-table-root {
+    background: transparent;
+  }
+
+  .solid-data-table-viewport {
+    background: #20283a !important;
+    border: 1px solid rgba(65, 76, 104, 0.72) !important;
+    border-radius: 14px !important;
+  }
+
+  .solid-data-table-viewport {
+    padding: 6px 0 10px;
+  }
+
+  .solid-datatable-wrapper table {
+    border-collapse: separate;
+    border-spacing: 0 12px;
+  }
+
+  .solid-data-table-head {
+    background: transparent;
+    box-shadow: none;
+    top: 10px;
+  }
+
+  .solid-data-table-th {
+    border-bottom: 0;
+    color: #c8a989;
+    font-size: 10.5px;
+    font-weight: 800;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    padding-bottom: 0.8rem;
+  }
+
+  .solid-datatable-wrapper .p-datatable .p-datatable-thead > tr > th {
+    background: #20283a;
+    color: #b6bed0;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    border-bottom: 1px solid rgba(65, 76, 104, 0.62);
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
+  .solid-datatable-wrapper .p-datatable .p-datatable-tbody > tr {
+    background: rgba(44, 52, 72, 0.96);
+    color: #f3f5fa;
+  }
+
+  .solid-data-table-row {
+    border-top: 0;
+    background: transparent;
+  }
+
+  .solid-data-table-td {
+    background: #2c3448;
+    border-top: 1px solid rgba(65, 76, 104, 0.46);
+    border-bottom: 1px solid rgba(65, 76, 104, 0.46);
+    box-shadow: none;
+  }
+
+  .solid-data-table-td:first-child {
+    border-left: 1px solid rgba(65, 76, 104, 0.46);
+    border-top-left-radius: 14px;
+    border-bottom-left-radius: 14px;
+  }
+
+  .solid-data-table-td:last-child {
+    border-right: 1px solid rgba(65, 76, 104, 0.46);
+    border-top-right-radius: 14px;
+    border-bottom-right-radius: 14px;
+  }
+
+  .solid-data-table-row:hover .solid-data-table-td {
+    background: #31384d;
+    border-color: rgba(249, 115, 22, 0.22);
+    transform: none;
+  }
+
+  .solid-data-table-row:has(input[type="checkbox"]:checked) .solid-data-table-td {
+    background: #353d52;
+    border-color: rgba(249, 115, 22, 0.24);
+  }
+
+  .solid-table-paginator {
+    margin-top: 14px;
+    border-radius: 14px;
+    border: 1px solid rgba(65, 76, 104, 0.72) !important;
+    background: #20283a;
+    box-shadow: none;
+    padding: 6px;
+  }
+
+  .solid-paginator-btn,
+  .solid-paginator-select {
+    border-radius: 12px !important;
+  }
+
+  .solid-form-content {
+    position: relative;
+  }
+
+  .solid-form-content::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 22px;
+    border: 1px solid rgba(65, 76, 104, 0.38);
+    pointer-events: none;
+  }
+
+  .solid-form-content > .flex,
+  .solid-form-content > .p-tabview,
+  .solid-form-content > .p-panel,
+  .solid-form-content > .p-fieldset,
+  .solid-form-content > .solid-layout-accordion {
+    background: rgba(44, 52, 72, 0.94);
+    border: 1px solid rgba(65, 76, 104, 0.56);
+    border-radius: 16px;
+    padding: 16px;
+    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.16);
+  }
+
+  .solid-form-content .p-panel,
+  .solid-form-content .p-fieldset,
+  .solid-form-content .p-accordion .p-accordion-header .p-accordion-header-link,
+  .solid-form-content .p-accordion .p-accordion-content {
+    border-radius: 16px;
+  }
+
+  .solid-datatable-wrapper .p-datatable .p-datatable-tbody > tr > td {
+    border-bottom: 1px solid rgba(86, 62, 46, 0.16);
+    padding-top: 0.95rem;
+    padding-bottom: 0.95rem;
+  }
+
+  .solid-datatable-wrapper .p-datatable .p-datatable-tbody > tr:hover,
+  .solid-datatable-wrapper .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
+    background: rgba(242, 140, 40, 0.08);
+  }
+
+  .solid-datatable-wrapper .p-datatable .p-datatable-tbody > tr.p-highlight,
+  .solid-datatable-wrapper .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: rgba(242, 140, 40, 0.16);
+    color: #ffd8af;
+  }
+}

package/dist/resources/themes/solid-light-enterprise/theme-variables.css

@@ -0,0 +1,28 @@
+:root {
+  --solid-surface-2: #eef3f8;
+  --solid-interactive-bg: #2f6fed;
+  --solid-focus-ring: rgba(47, 111, 237, 0.22);
+  --accent: #edf4ff;
+  --accent-foreground: #224a8d;
+  --primary: #2f6fed;
+  --primary-foreground: #f8fbff;
+  --ring: rgba(47, 111, 237, 0.22);
+  --sidebar-primary: #203654;
+  --primary-color: var(--primary);
+  --primary-color-text: var(--primary-foreground);
+  --focus-ring: 0 0 0 0.2rem var(--ring, rgba(47, 111, 237, 0.22));
+  --primary-light-color: #d9e6ff;
+  --highlight-text-color: color-mix(in srgb, var(--primary-color, var(--primary)) 74%, #11243d);
+  --highlight-bg: rgba(47, 111, 237, 0.1);
+  --solid-dashboard-welcome-bg: #f4f8fc;
+  --solid-admin-card-color-1: #2f6fed;
+  --solid-admin-card-color-2: #1d4fae;
+  --solid-admin-card-color-3: #5b92ff;
+  --sidebar-background: #eef3f9;
+  --sidebar-foreground: #2c425b;
+  --sidebar-border: #cfdbe8;
+  --sidebar-accent: #e2ebf5;
+  --sidebar-accent-foreground: #1f3652;
+  --sidebar-primary: #2f6fed;
+  --sidebar-primary-foreground: #f8fbff;
+}