From 2342c3efa06c2d1fdb4cc90731a1ad81217023c3 Mon Sep 17 00:00:00 2001
From: Akash Kava <39438041+ackava@users.noreply.github.com>
Date: Thu, 1 Feb 2024 11:37:58 +0530
Subject: [PATCH] Increasing specificity

---
 src/styled.ts                             |  9 ++++++--
 src/styles/data-buttons.ts                | 26 +++++++++++++++++++++++
 src/styles/layouts/data-grid/data-grid.ts |  2 +-
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/styled.ts b/src/styled.ts
index bae16f5..1c9ce47 100644
--- a/src/styled.ts
+++ b/src/styled.ts
@@ -135,13 +135,14 @@ export type IStyleFragmentSet = {
 }
 
 const styles: IStyleFragmentSet[] = [];
+const lowestStyles: IStyleFragmentSet[] = [];
 const lowStyles: IStyleFragmentSet[] = [];
 const highStyles: IStyleFragmentSet[] = [];
 
 const styled = {
 
     get styles() {
-        return [... lowStyles, ... styles, ... highStyles];
+        return [ ... lowestStyles, ... lowStyles, ... styles, ... highStyles];
     },
 
     css: (t: TemplateStringsArray, ... a: any[]) => {
@@ -156,7 +157,11 @@ const styled = {
         return StyleFragment.newStyle( { content: r });
     },
 
-    add(x: IStyleFragmentSet, priority: "high" | "normal" | "low" = "normal") {
+    add(x: IStyleFragmentSet, priority: "high" | "normal" | "low" | "lowest" = "normal") {
+        if (priority === "lowest") {
+            lowestStyles.push(x);
+            return;
+        }
         if (priority === "low") {
             lowStyles.push(x);
             return;
diff --git a/src/styles/data-buttons.ts b/src/styles/data-buttons.ts
index 47b459e..6e68eaa 100644
--- a/src/styles/data-buttons.ts
+++ b/src/styles/data-buttons.ts
@@ -40,6 +40,32 @@ const createButton = (
     };
 };
 
+const createButtonDisplay = (
+    {
+        name,
+    }: { name: string }) => {
+
+    return {
+        [name + "icon-button"]: styled.css `
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        `,
+    };
+};
+
+styled.add({
+    "button[data-layout]": {
+        ... createButtonDisplay({ name: ""}),
+        ... createButtonDisplay({ name: "accent-"}),
+        ... createButtonDisplay({ name: "stop-"}),
+        ... createButtonDisplay({ name: "go-"}),
+        ... createButtonDisplay({ name: "accept-"}),
+        ... createButtonDisplay({ name: "warning-"}),
+        ... createButtonDisplay({ name: "reject-"}),
+    }
+}, "lowest");
+
 styled.add({
 
     "data-layout": {
diff --git a/src/styles/layouts/data-grid/data-grid.ts b/src/styles/layouts/data-grid/data-grid.ts
index 630e82c..5cc07e6 100644
--- a/src/styles/layouts/data-grid/data-grid.ts
+++ b/src/styles/layouts/data-grid/data-grid.ts
@@ -12,7 +12,7 @@ styled.add({
             padding: ${vars.spacing};
 
 
-            & > *, & > button {
+            & > *, & > button, & > button {
                 padding: ${vars.spacing};
                 display: table-cell;
                 vertical-align: top;