This commit is contained in:
Ahmed Bouhuolia
2025-08-06 16:13:24 +02:00
parent 6393f30735
commit ffff3a6872
30 changed files with 243 additions and 106 deletions

View File

@@ -19,8 +19,10 @@ const CardRoot = styled.div`
export const CardFooterActions = styled.div`
--x-color-border: #e0e7ea;
--x-color-border: rgba(255, 255, 255, 0.25);
.bp4-dark & {
--x-color-border: rgba(255, 255, 255, 0.25);
}
padding-top: 16px;
border-top: 1px solid var(--x-color-border);
margin-top: 30px;

View File

@@ -23,27 +23,22 @@ export function DataTableEditable({
const DatatableEditableRoot = styled.div`
--x-table-background: #fff;
--x-table-border: #d2dce2;
--x-table-background: var(--color-dark-gray1);
--x-table-border: rgba(255, 255, 255, 0.1);
--x-table-head-border: #d2dce2;
--x-table-head-background: #f2f3fb;
--x-table-head-background: var(--color-dark-gray2);
--x-table-head-border: rgba(255, 255, 255, 0.1);
--x-table-head-text: #415060;
--x-table-head-text: rgba(--color-light-gray1);
--x-color-table-body-input-text: #222;
--x-color-table-body-input-text: var(--color-light-gray2);
--x-color-table-cell-border: #d8d8d8;
--x-color-table-cell-border: rgba(255, 255, 255, 0.1);
.bp4-dark & {
--x-table-background: var(--color-dark-gray1);
--x-table-border: rgba(255, 255, 255, 0.1);
--x-table-head-background: var(--color-dark-gray2);
--x-table-head-border: rgba(255, 255, 255, 0.1);
--x-table-head-text: rgba(--color-light-gray1);
--x-color-table-body-input-text: var(--color-light-gray2);
--x-color-table-cell-border: rgba(255, 255, 255, 0.1);
}
.bp4-form-group {
margin-bottom: 0;
}

View File

@@ -2,11 +2,12 @@
.root {
--x-color-background: var(--color-white);
--x-color-background: transparent;
--x-color-border: var(--color-dark-gray1);
--x-color-border: rgba(255, 255, 255, 0.2);
:global(.bp4-dark) {
--x-color-background: transparent;
--x-color-border: var(--color-dark-gray1);
}
&:global(.bp4-navbar){
background-color: var(--x-color-background);
box-shadow: 0 1px 0 var(--x-color-border);

View File

@@ -65,8 +65,10 @@ function SubTitle({ children }) {
const SubTitleHead = styled.div`
--x-color-text: #666;
--x-color-text: rgba(255, 255, 255, 0.6);
.bp4-dark & {
--x-color-text: rgba(255, 255, 255, 0.6);
}
color: var(--x-color-text);
font-size: 12px;
font-weight: 400;

View File

@@ -22,10 +22,11 @@ const SelectButton = styled(Button)`
--x-color-select-border: #ced4da;
--x-color-select-caret: #8d8d8d;
--x-color-select-background: rgba(17, 20, 24, 0.3);
--x-color-select-border: rgba(255, 255, 255, 0.15);
--x-color-select-caret: rgba(255, 255, 255, 0.25);
.bp4-dark & {
--x-color-select-background: rgba(17, 20, 24, 0.3);
--x-color-select-border: rgba(255, 255, 255, 0.15);
--x-color-select-caret: rgba(255, 255, 255, 0.25);
}
outline: none;
box-shadow: 0 0 0 transparent;
border: 1px solid var(--x-color-select-border);

View File

@@ -16,9 +16,10 @@ const FormTopBarRoot = styled(Navbar)`
--color-form-topbar-background: #fff;
--color-form-topbar-border: #c7d5db;
--color-form-topbar-background: var(--color-dark-gray1);
--color-form-topbar-border: rgba(255, 255, 255, 0.15);
.bp4-dark & {
--color-form-topbar-background: var(--color-dark-gray1);
--color-form-topbar-border: rgba(255, 255, 255, 0.15);
}
height: 35px;
padding: 0 20px;

View File

@@ -41,7 +41,9 @@ PageFormBody.displayName = 'PageFormBody';
* Page form footer.
* @returns {React.ReactNode}
*/
const PageFormFooter: FC<{ children: React.ReactNode } & SystemProps> = ({ children }) => {
const PageFormFooter: FC<{ children: React.ReactNode } & SystemProps> = ({
children,
}) => {
return <x.div>{children} </x.div>;
};
@@ -51,9 +53,10 @@ const footerActionsStyle = `
--x-color-background: #fff;
--x-color-border: rgb(210, 221, 226);
--x-color-background: var(--color-dark-gray1);
--x-color-border: rgba(255, 255, 255, 0.1);
.bp4-dark & {
--x-color-background: var(--color-dark-gray1);
--x-color-border: rgba(255, 255, 255, 0.1);
}
width: 100%;
background: var(--x-color-background);
padding: 14px 20px;

View File

@@ -4,11 +4,11 @@
--x-color-background: #fff;
--x-color-border: #d2dce2;
--x-color-background: var(--color-dark-gray1);
--x-color-border: rgba(255, 255, 255, 0.1);
:global(.bp4-dark) & {
--x-color-background: var(--color-dark-gray1);
--x-color-border: rgba(255, 255, 255, 0.1);
}
background-color: var(--x-color-background);
border: 1px solid var(--x-color-border);
padding: 10px;
}