Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Zinc Theme #462

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Zinc Theme #462

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3696373
Zinc Theme
heliacer Nov 9, 2024
f5781e6
fix contrast
Nov 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions examples/demo/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,7 @@ class App extends React.Component<any, { layoutFile: string | null, model: Model
var component = node.getComponent();

if (component === "json") {
return (<JsonView model={this.state.model!}/>);
return (<JsonView model={this.state.model!} />);
}
else if (component === "simpleform") {
return <SimpleForm />
Expand Down Expand Up @@ -423,10 +423,10 @@ class App extends React.Component<any, { layoutFile: string | null, model: Model
let contents: React.ReactNode = "loading ...";
if (this.state.model !== null) {
contents = <Layout
ref={this.layoutRef}
model={this.state.model}
popoutWindowName="Demo Popout"
factory={this.factory}
ref={this.layoutRef}
model={this.state.model}
popoutWindowName="Demo Popout"
factory={this.factory}
onAction={this.onAction}
onModelChange={this.onModelChange}
onRenderTab={this.onRenderTab}
Expand Down Expand Up @@ -510,6 +510,7 @@ class App extends React.Component<any, { layoutFile: string | null, model: Model
<option value="gray">Gray</option>
<option value="dark">Dark</option>
<option value="rounded">Rounded</option>
<option value="zinc">Zinc</option>
</select>
{/* <button className="toolbar_control" style={{ marginLeft: 5 }} onClick={this.onNewWindow}>New Window</button> */}
<button className="toolbar_control" style={{ marginLeft: 5 }} onClick={this.onShowLayoutClick}>Show Layout JSON in Console</button>
Expand Down
205 changes: 205 additions & 0 deletions examples/demo/zinc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,205 @@
:root {
/* Zinc color palette */
--zinc-50: #fafafa;
--zinc-100: #f4f4f5;
--zinc-200: #e4e4e7;
--zinc-300: #d4d4d8;
--zinc-400: #a1a1aa;
--zinc-500: #71717a;
--zinc-600: #52525b;
--zinc-700: #3f3f46;
--zinc-800: #27272a;
--zinc-900: #18181b;
--zinc-950: #09090b;
}

html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
font-size: medium;
font-family: Roboto, Arial, sans-serif;
background-color: white
}

#container {
left: 10px;
top: 10px;
right: 10px;
bottom: 10px;
position: absolute;
display: flex;
overflow: hidden;
background-color: white
}

/* Scrollbar */

::-webkit-scrollbar {
width: 6px;
height: 6px;
}

::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}

::-webkit-scrollbar-thumb {
cursor: pointer;
background: var(--zinc-200);
border: 4px solid transparent;
border-radius: 5px;
}

::-webkit-scrollbar-thumb:active {
background: var(--zinc-300);
}

::-webkit-scrollbar-track {
background: transparent;
}

::-webkit-scrollbar-corner {
background: transparent;
}



.flexlayout {
--color-icon: gray !important;
/* To justify the color "gray" used by the separate .svg icons */
}

.app {
display: flex;
flex-direction: column;
flex-grow: 1;
}

.toolbar {
margin-bottom: 8px;
display: flex;
align-items: center;
color: var(--zinc-950);
}

.toolbar select,
.toolbar button {
cursor: pointer;
text-wrap: nowrap;
border: 1px solid var(--zinc-200);
background-color: var(--zinc-100);
border-radius: 5px;
}

.toolbar button {
padding: 5px 10px;
}

.toolbar select {
padding: 4px 10px;
}

.drag-from {
height: auto !important;
background-color: var(--zinc-950) !important;
color: var(--zinc-50);
}

.contents {
display: flex;
flex-grow: 1;
position: relative;
}

/* simple_bundled table styling */
.simple_table {
background-color: var(--zinc-50);
color: var(--zinc-950);
border-collapse: collapse;
}

.simple_table th {
color: var(--zinc-950);
background-color: var(--zinc-50);
padding: 4px;
border-bottom-color: transparent;
text-align: left;
width: 100px;
min-width: 100px;
}

.simple_table td {
border-right: 1px solid var(--zinc-300);
border-bottom: 1px solid var(--zinc-300);
padding: 4px;
}

.simple_table tr:nth-child(even) {
background: var(--zinc-200);
}

.simple_table tr:nth-child(odd) {
background: var(--zinc-100);
}

.MuiDataGrid-container--top [role=row],
.MuiDataGrid-container--bottom [role=row] {
background-color: var(--zinc-100) !important;
}

* {
--DataGrid-rowBorderColor: var(--zinc-200) !important;
}

.MuiDataGrid-withBorderColor {
border-color: var(--zinc-200) !important;
}

.MuiDataGrid-root,
.MuiDataGrid-root p {
border: none !important;
color: var(--zinc-950) !important;

}

.MuiDataGrid-root button {
color: var(--zinc-950) !important;
}

.MuiDataGrid-columnSeparator--resizable:hover {
color: var(--zinc-950) !important;
}

p {
color: var(--zinc-50) !important;
}

.ag-theme-alpine,
.ag-theme-alpine-dark,
.ag-theme-alpine-auto-dark {
--ag-background-color: transparent !important;
--ag-foreground-color: var(--zinc-100);
--ag-border-color: var(--zinc-300) !important;
--ag-header-background-color: transparent;
--ag-odd-row-background-color: var(--zinc-200);
--ag-checkbox-unchecked-color: var(--zinc-950);
}

.ag-theme-alpine * {
color: var(--zinc-950) !important;
}

.ag-row {
border-color: var(--zinc-300);
}

.token.operator,
.token.entity,
.token.url,
.token.variable {
background-color: transparent !important;
}
8 changes: 4 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@
"build:demo": "webpack",
"lint:eslint": "eslint src/*",
"doc": "typedoc --out typedoc --exclude \"**/examples/**/*.tsx\" --excludeInternal --disableSources --excludePrivate --excludeProtected --readme none ./src",
"css": "sass style/rounded.scss style/rounded.css && sass style/underline.scss style/underline.css && sass style/gray.scss style/gray.css && sass style/light.scss style/light.css && sass style/light.scss test/style/light.css && sass style/dark.scss style/dark.css"
"css": "sass --no-source-map style:style",
"css:dev": "sass --no-source-map --watch style:style"
},
"author": "Caplin Systems Ltd",
"repository": "https://github.com/caplin/FlexLayout",
Expand Down Expand Up @@ -77,6 +78,5 @@
"webpack-dev-server": "^5.0.4",
"@mui/x-data-grid": "^7.15.0"
},
"dependencies": {
}
}
"dependencies": {}
}
Loading