Skip to content

Commit 3696373

Browse files
heliacerheliacer
committed
Zinc Theme
1 parent 58ae479 commit 3696373

17 files changed

+1429
-250
lines changed

‎examples/demo/App.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -252,7 +252,7 @@ class App extends React.Component<any, { layoutFile: string | null, model: Model
252252
var component = node.getComponent();
253253

254254
if (component === "json") {
255-
return (<JsonView model={this.state.model!}/>);
255+
return (<JsonView model={this.state.model!} />);
256256
}
257257
else if (component === "simpleform") {
258258
return <SimpleForm />
@@ -423,10 +423,10 @@ class App extends React.Component<any, { layoutFile: string | null, model: Model
423423
let contents: React.ReactNode = "loading ...";
424424
if (this.state.model !== null) {
425425
contents = <Layout
426-
ref={this.layoutRef}
427-
model={this.state.model}
428-
popoutWindowName="Demo Popout"
429-
factory={this.factory}
426+
ref={this.layoutRef}
427+
model={this.state.model}
428+
popoutWindowName="Demo Popout"
429+
factory={this.factory}
430430
onAction={this.onAction}
431431
onModelChange={this.onModelChange}
432432
onRenderTab={this.onRenderTab}
@@ -510,6 +510,7 @@ class App extends React.Component<any, { layoutFile: string | null, model: Model
510510
<option value="gray">Gray</option>
511511
<option value="dark">Dark</option>
512512
<option value="rounded">Rounded</option>
513+
<option value="zinc">Zinc</option>
513514
</select>
514515
{/* <button className="toolbar_control" style={{ marginLeft: 5 }} onClick={this.onNewWindow}>New Window</button> */}
515516
<button className="toolbar_control" style={{ marginLeft: 5 }} onClick={this.onShowLayoutClick}>Show Layout JSON in Console</button>

‎examples/demo/zinc.css

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
:root {
2+
/* Zinc color palette */
3+
--zinc-50: #fafafa;
4+
--zinc-100: #f4f4f5;
5+
--zinc-200: #e4e4e7;
6+
--zinc-300: #d4d4d8;
7+
--zinc-400: #a1a1aa;
8+
--zinc-500: #71717a;
9+
--zinc-600: #52525b;
10+
--zinc-700: #3f3f46;
11+
--zinc-800: #27272a;
12+
--zinc-900: #18181b;
13+
--zinc-950: #09090b;
14+
}
15+
16+
html,
17+
body {
18+
height: 100%;
19+
margin: 0;
20+
padding: 0;
21+
overflow: hidden;
22+
font-size: medium;
23+
font-family: Roboto, Arial, sans-serif;
24+
background-color: white
25+
}
26+
27+
#container {
28+
left: 10px;
29+
top: 10px;
30+
right: 10px;
31+
bottom: 10px;
32+
position: absolute;
33+
display: flex;
34+
overflow: hidden;
35+
background-color: white
36+
}
37+
38+
/* Scrollbar */
39+
40+
::-webkit-scrollbar {
41+
width: 6px;
42+
height: 6px;
43+
}
44+
45+
::-webkit-scrollbar-button {
46+
width: 0px;
47+
height: 0px;
48+
}
49+
50+
::-webkit-scrollbar-thumb {
51+
cursor: pointer;
52+
background: var(--zinc-200);
53+
border: 4px solid transparent;
54+
border-radius: 5px;
55+
}
56+
57+
::-webkit-scrollbar-thumb:active {
58+
background: var(--zinc-300);
59+
}
60+
61+
::-webkit-scrollbar-track {
62+
background: transparent;
63+
}
64+
65+
::-webkit-scrollbar-corner {
66+
background: transparent;
67+
}
68+
69+
70+
71+
.flexlayout {
72+
--color-icon: gray !important;
73+
/* To justify the color "gray" used by the separate .svg icons */
74+
}
75+
76+
.app {
77+
display: flex;
78+
flex-direction: column;
79+
flex-grow: 1;
80+
}
81+
82+
.toolbar {
83+
margin-bottom: 8px;
84+
display: flex;
85+
align-items: center;
86+
color: var(--zinc-950);
87+
}
88+
89+
.toolbar select,
90+
.toolbar button {
91+
cursor: pointer;
92+
text-wrap: nowrap;
93+
border: 1px solid var(--zinc-200);
94+
background-color: var(--zinc-100);
95+
border-radius: 5px;
96+
}
97+
98+
.toolbar button {
99+
padding: 5px 10px;
100+
}
101+
102+
.toolbar select {
103+
padding: 4px 10px;
104+
}
105+
106+
.drag-from {
107+
height: auto !important;
108+
background-color: var(--zinc-950) !important;
109+
color: var(--zinc-50);
110+
}
111+
112+
.contents {
113+
display: flex;
114+
flex-grow: 1;
115+
position: relative;
116+
}
117+
118+
/* simple_bundled table styling */
119+
.simple_table {
120+
background-color: var(--zinc-50);
121+
color: var(--zinc-950);
122+
border-collapse: collapse;
123+
}
124+
125+
.simple_table th {
126+
color: var(--zinc-950);
127+
background-color: var(--zinc-50);
128+
padding: 4px;
129+
border-bottom-color: transparent;
130+
text-align: left;
131+
width: 100px;
132+
min-width: 100px;
133+
}
134+
135+
.simple_table td {
136+
border-right: 1px solid var(--zinc-300);
137+
border-bottom: 1px solid var(--zinc-300);
138+
padding: 4px;
139+
}
140+
141+
.simple_table tr:nth-child(even) {
142+
background: var(--zinc-200);
143+
}
144+
145+
.simple_table tr:nth-child(odd) {
146+
background: var(--zinc-100);
147+
}
148+
149+
.MuiDataGrid-container--top [role=row],
150+
.MuiDataGrid-container--bottom [role=row] {
151+
background-color: var(--zinc-100) !important;
152+
}
153+
154+
* {
155+
--DataGrid-rowBorderColor: var(--zinc-200) !important;
156+
}
157+
158+
.MuiDataGrid-withBorderColor {
159+
border-color: var(--zinc-200) !important;
160+
}
161+
162+
.MuiDataGrid-root,
163+
.MuiDataGrid-root p {
164+
border: none !important;
165+
color: var(--zinc-950) !important;
166+
167+
}
168+
169+
.MuiDataGrid-root button {
170+
color: var(--zinc-950) !important;
171+
}
172+
173+
.MuiDataGrid-columnSeparator--resizable:hover {
174+
color: var(--zinc-950) !important;
175+
}
176+
177+
p {
178+
color: var(--zinc-50) !important;
179+
}
180+
181+
.ag-theme-alpine,
182+
.ag-theme-alpine-dark,
183+
.ag-theme-alpine-auto-dark {
184+
--ag-background-color: transparent !important;
185+
--ag-foreground-color: var(--zinc-100);
186+
--ag-border-color: var(--zinc-300) !important;
187+
--ag-header-background-color: transparent;
188+
--ag-odd-row-background-color: var(--zinc-200);
189+
--ag-checkbox-unchecked-color: var(--zinc-950);
190+
}
191+
192+
.ag-theme-alpine * {
193+
color: var(--zinc-950) !important;
194+
}
195+
196+
.ag-row {
197+
border-color: var(--zinc-300);
198+
}
199+
200+
.token.operator,
201+
.token.entity,
202+
.token.url,
203+
.token.variable {
204+
background-color: transparent !important;
205+
}

‎package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@
3232
"build:demo": "webpack",
3333
"lint:eslint": "eslint src/*",
3434
"doc": "typedoc --out typedoc --exclude \"**/examples/**/*.tsx\" --excludeInternal --disableSources --excludePrivate --excludeProtected --readme none ./src",
35-
"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"
35+
"css": "sass --no-source-map style:style",
36+
"css:dev": "sass --no-source-map --watch style:style"
3637
},
3738
"author": "Caplin Systems Ltd",
3839
"repository": "https://github.com/caplin/FlexLayout",
@@ -77,6 +78,5 @@
7778
"webpack-dev-server": "^5.0.4",
7879
"@mui/x-data-grid": "^7.15.0"
7980
},
80-
"dependencies": {
81-
}
82-
}
81+
"dependencies": {}
82+
}

0 commit comments

Comments
 (0)