Zinc Theme

examples/demo/App.tsx

@@ -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 />
@@ -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}
@@ -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>

examples/demo/zinc.css

@@ -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;
+}

package.json

@@ -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",
@@ -77,6 +78,5 @@
         "webpack-dev-server": "^5.0.4",
         "@mui/x-data-grid": "^7.15.0"
     },
-    "dependencies": {
-    }
-}
+    "dependencies": {}
+}