Increasing specificity

web-atoms · Feb 1, 2024 · 2342c3e · 2342c3e
1 parent 8d497d9
commit 2342c3e
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 3 deletions.
diff --git 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
@@ -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
@@ -12,7 +12,7 @@ styled.add({
             padding: ${vars.spacing};
 
 
-            & > *, & > button {
+            & > *, & > button, & > button {
                 padding: ${vars.spacing};
                 display: table-cell;
                 vertical-align: top;