scu-web-components 0.0.14 → 0.0.17

package/dist/tokens/source/cssApi.css

@@ -1,4 +1,28 @@
 
+/* START preColorPatternHook */
+
+.scw-theme-primary,
+[scw-theme-primary],
+.scw-theme-primary [element],
+[scw-theme-primary] [element],
+[element][color=primary] {
+  --scw-color-01: var( --scw-color-primary-01 );
+  --scw-color-02: var( --scw-color-primary-02 );
+  --scw-color-03: var( --scw-color-primary-03 );
+  --scw-color-04: var( --scw-color-primary-04 );
+  --scw-color-05: var( --scw-color-primary-05 );
+  --scw-color: var( --scw-color-primary );
+  --scw-color-06: var( --scw-color-primary-06 );
+  --scw-color-07: var( --scw-color-primary-07 );
+  --scw-color-08: var( --scw-color-primary-08 );
+  --scw-color-09: var( --scw-color-primary-09 );
+  --scw-color-092: var( --scw-color-primary-092 );
+  --scw-color-095: var( --scw-color-primary-095 ); 
+}
+
+/* END preColorPatternHook */
+
+
 .scw-background-color-primary-01,
 [scw-background-color-primary-01] {
   --background-color: var( --scw-color-01 , var( --scw-color-primary-01 ));
@@ -623,6 +647,32 @@
   background-color: var( --scw-color-095 , var( --scw-color-primary-095 ));
 }
 
+/* START preColorPatternHook */
+
+.scw-theme-grey,
+[scw-theme-grey],
+.scw-theme-grey [element],
+[scw-theme-grey] [element],
+[element][color=grey] {
+  --scw-color-00: var( --scw-color-grey-00 );
+  --scw-color-01: var( --scw-color-grey-01 );
+  --scw-color-02: var( --scw-color-grey-02 );
+  --scw-color-03: var( --scw-color-grey-03 );
+  --scw-color-04: var( --scw-color-grey-04 );
+  --scw-color-05: var( --scw-color-grey-05 );
+  --scw-color: var( --scw-color-grey );
+  --scw-color-06: var( --scw-color-grey-06 );
+  --scw-color-07: var( --scw-color-grey-07 );
+  --scw-color-08: var( --scw-color-grey-08 );
+  --scw-color-09: var( --scw-color-grey-09 );
+  --scw-color-092: var( --scw-color-grey-092 );
+  --scw-color-095: var( --scw-color-grey-095 );
+  --scw-color-10: var( --scw-color-grey-10 ); 
+}
+
+/* END preColorPatternHook */
+
+
 .scw-background-color-grey-00,
 [scw-background-color-grey-00] {
   --background-color: var( --scw-color-grey-00 );
@@ -1351,6 +1401,21 @@
   background-color: var( --scw-color-grey-10 );
 }
 
+/* START preColorPatternHook */
+
+.scw-theme-error,
+[scw-theme-error],
+.scw-theme-error [element],
+[scw-theme-error] [element],
+[element][color=error] {
+  --scw-color: var( --scw-color-error );
+  --scw-color-light: var( --scw-color-error-light );
+  --scw-color-dark: var( --scw-color-error-dark ); 
+}
+
+/* END preColorPatternHook */
+
+
 .scw-background-color-error,
 [scw-background-color-error] {
   --background-color: var( --scw-color , var( --scw-color-error ));
@@ -1507,6 +1572,21 @@
   background-color: var( --scw-color-dark , var( --scw-color-error-dark ));
 }
 
+/* START preColorPatternHook */
+
+.scw-theme-warning,
+[scw-theme-warning],
+.scw-theme-warning [element],
+[scw-theme-warning] [element],
+[element][color=warning] {
+  --scw-color: var( --scw-color-warning );
+  --scw-color-light: var( --scw-color-warning-light );
+  --scw-color-dark: var( --scw-color-warning-dark ); 
+}
+
+/* END preColorPatternHook */
+
+
 .scw-background-color-warning,
 [scw-background-color-warning] {
   --background-color: var( --scw-color , var( --scw-color-warning ));
@@ -1663,6 +1743,21 @@
   background-color: var( --scw-color-dark , var( --scw-color-warning-dark ));
 }
 
+/* START preColorPatternHook */
+
+.scw-theme-success,
+[scw-theme-success],
+.scw-theme-success [element],
+[scw-theme-success] [element],
+[element][color=success] {
+  --scw-color: var( --scw-color-success );
+  --scw-color-light: var( --scw-color-success-light );
+  --scw-color-dark: var( --scw-color-success-dark ); 
+}
+
+/* END preColorPatternHook */
+
+
 .scw-background-color-success,
 [scw-background-color-success] {
   --background-color: var( --scw-color , var( --scw-color-success ));
@@ -1819,6 +1914,21 @@
   background-color: var( --scw-color-dark , var( --scw-color-success-dark ));
 }
 
+/* START preColorPatternHook */
+
+.scw-theme-information,
+[scw-theme-information],
+.scw-theme-information [element],
+[scw-theme-information] [element],
+[element][color=information] {
+  --scw-color: var( --scw-color-information );
+  --scw-color-light: var( --scw-color-information-light );
+  --scw-color-dark: var( --scw-color-information-dark ); 
+}
+
+/* END preColorPatternHook */
+
+
 .scw-background-color-information,
 [scw-background-color-information] {
   --background-color: var( --scw-color , var( --scw-color-information ));
@@ -2079,6 +2189,30 @@
   background-color: var( --scw-color-secondary );
 }
 
+/* START preColorPatternHook */
+
+.scw-theme-mortgage,
+[scw-theme-mortgage],
+.scw-theme-mortgage [element],
+[scw-theme-mortgage] [element],
+[element][color=mortgage] {
+  --scw-color-01: var( --scw-color-mortgage-01 );
+  --scw-color-02: var( --scw-color-mortgage-02 );
+  --scw-color-03: var( --scw-color-mortgage-03 );
+  --scw-color-04: var( --scw-color-mortgage-04 );
+  --scw-color-05: var( --scw-color-mortgage-05 );
+  --scw-color: var( --scw-color-mortgage );
+  --scw-color-06: var( --scw-color-mortgage-06 );
+  --scw-color-07: var( --scw-color-mortgage-07 );
+  --scw-color-08: var( --scw-color-mortgage-08 );
+  --scw-color-09: var( --scw-color-mortgage-09 );
+  --scw-color-092: var( --scw-color-mortgage-092 );
+  --scw-color-095: var( --scw-color-mortgage-095 ); 
+}
+
+/* END preColorPatternHook */
+
+
 .scw-background-color-mortgage-01,
 [scw-background-color-mortgage-01] {
   --background-color: var( --scw-color-01 , var( --scw-color-mortgage-01 ));
@@ -2703,6 +2837,30 @@
   background-color: var( --scw-color-095 , var( --scw-color-mortgage-095 ));
 }
 
+/* START preColorPatternHook */
+
+.scw-theme-investments,
+[scw-theme-investments],
+.scw-theme-investments [element],
+[scw-theme-investments] [element],
+[element][color=investments] {
+  --scw-color-01: var( --scw-color-investments-01 );
+  --scw-color-02: var( --scw-color-investments-02 );
+  --scw-color-03: var( --scw-color-investments-03 );
+  --scw-color-04: var( --scw-color-investments-04 );
+  --scw-color-05: var( --scw-color-investments-05 );
+  --scw-color: var( --scw-color-investments );
+  --scw-color-06: var( --scw-color-investments-06 );
+  --scw-color-07: var( --scw-color-investments-07 );
+  --scw-color-08: var( --scw-color-investments-08 );
+  --scw-color-09: var( --scw-color-investments-09 );
+  --scw-color-092: var( --scw-color-investments-092 );
+  --scw-color-095: var( --scw-color-investments-095 ); 
+}
+
+/* END preColorPatternHook */
+
+
 .scw-background-color-investments-01,
 [scw-background-color-investments-01] {
   --background-color: var( --scw-color-01 , var( --scw-color-investments-01 ));
@@ -3327,6 +3485,30 @@
   background-color: var( --scw-color-095 , var( --scw-color-investments-095 ));
 }
 
+/* START preColorPatternHook */
+
+.scw-theme-credit-cards,
+[scw-theme-credit-cards],
+.scw-theme-credit-cards [element],
+[scw-theme-credit-cards] [element],
+[element][color=credit-cards] {
+  --scw-color-01: var( --scw-color-credit-cards-01 );
+  --scw-color-02: var( --scw-color-credit-cards-02 );
+  --scw-color-03: var( --scw-color-credit-cards-03 );
+  --scw-color-04: var( --scw-color-credit-cards-04 );
+  --scw-color-05: var( --scw-color-credit-cards-05 );
+  --scw-color: var( --scw-color-credit-cards );
+  --scw-color-06: var( --scw-color-credit-cards-06 );
+  --scw-color-07: var( --scw-color-credit-cards-07 );
+  --scw-color-08: var( --scw-color-credit-cards-08 );
+  --scw-color-09: var( --scw-color-credit-cards-09 );
+  --scw-color-092: var( --scw-color-credit-cards-092 );
+  --scw-color-095: var( --scw-color-credit-cards-095 ); 
+}
+
+/* END preColorPatternHook */
+
+
 .scw-background-color-credit-cards-01,
 [scw-background-color-credit-cards-01] {
   --background-color: var( --scw-color-01 , var( --scw-color-credit-cards-01 ));
@@ -3951,6 +4133,30 @@
   background-color: var( --scw-color-095 , var( --scw-color-credit-cards-095 ));
 }
 
+/* START preColorPatternHook */
+
+.scw-theme-student,
+[scw-theme-student],
+.scw-theme-student [element],
+[scw-theme-student] [element],
+[element][color=student] {
+  --scw-color-01: var( --scw-color-student-01 );
+  --scw-color-02: var( --scw-color-student-02 );
+  --scw-color-03: var( --scw-color-student-03 );
+  --scw-color-04: var( --scw-color-student-04 );
+  --scw-color-05: var( --scw-color-student-05 );
+  --scw-color: var( --scw-color-student );
+  --scw-color-06: var( --scw-color-student-06 );
+  --scw-color-07: var( --scw-color-student-07 );
+  --scw-color-08: var( --scw-color-student-08 );
+  --scw-color-09: var( --scw-color-student-09 );
+  --scw-color-092: var( --scw-color-student-092 );
+  --scw-color-095: var( --scw-color-student-095 ); 
+}
+
+/* END preColorPatternHook */
+
+
 .scw-background-color-student-01,
 [scw-background-color-student-01] {
   --background-color: var( --scw-color-01 , var( --scw-color-student-01 ));
@@ -4575,6 +4781,30 @@
   background-color: var( --scw-color-095 , var( --scw-color-student-095 ));
 }
 
+/* START preColorPatternHook */
+
+.scw-theme-savings,
+[scw-theme-savings],
+.scw-theme-savings [element],
+[scw-theme-savings] [element],
+[element][color=savings] {
+  --scw-color-01: var( --scw-color-savings-01 );
+  --scw-color-02: var( --scw-color-savings-02 );
+  --scw-color-03: var( --scw-color-savings-03 );
+  --scw-color-04: var( --scw-color-savings-04 );
+  --scw-color-05: var( --scw-color-savings-05 );
+  --scw-color: var( --scw-color-savings );
+  --scw-color-06: var( --scw-color-savings-06 );
+  --scw-color-07: var( --scw-color-savings-07 );
+  --scw-color-08: var( --scw-color-savings-08 );
+  --scw-color-09: var( --scw-color-savings-09 );
+  --scw-color-092: var( --scw-color-savings-092 );
+  --scw-color-095: var( --scw-color-savings-095 ); 
+}
+
+/* END preColorPatternHook */
+
+
 .scw-background-color-savings-01,
 [scw-background-color-savings-01] {
   --background-color: var( --scw-color-01 , var( --scw-color-savings-01 ));
@@ -5199,6 +5429,30 @@
   background-color: var( --scw-color-095 , var( --scw-color-savings-095 ));
 }
 
+/* START preColorPatternHook */
+
+.scw-theme-checking,
+[scw-theme-checking],
+.scw-theme-checking [element],
+[scw-theme-checking] [element],
+[element][color=checking] {
+  --scw-color-01: var( --scw-color-checking-01 );
+  --scw-color-02: var( --scw-color-checking-02 );
+  --scw-color-03: var( --scw-color-checking-03 );
+  --scw-color-04: var( --scw-color-checking-04 );
+  --scw-color-05: var( --scw-color-checking-05 );
+  --scw-color: var( --scw-color-checking );
+  --scw-color-06: var( --scw-color-checking-06 );
+  --scw-color-07: var( --scw-color-checking-07 );
+  --scw-color-08: var( --scw-color-checking-08 );
+  --scw-color-09: var( --scw-color-checking-09 );
+  --scw-color-092: var( --scw-color-checking-092 );
+  --scw-color-095: var( --scw-color-checking-095 ); 
+}
+
+/* END preColorPatternHook */
+
+
 .scw-background-color-checking-01,
 [scw-background-color-checking-01] {
   --background-color: var( --scw-color-01 , var( --scw-color-checking-01 ));
@@ -5823,6 +6077,30 @@
   background-color: var( --scw-color-095 , var( --scw-color-checking-095 ));
 }
 
+/* START preColorPatternHook */
+
+.scw-theme-red-shoes,
+[scw-theme-red-shoes],
+.scw-theme-red-shoes [element],
+[scw-theme-red-shoes] [element],
+[element][color=red-shoes] {
+  --scw-color-01: var( --scw-color-red-shoes-01 );
+  --scw-color-02: var( --scw-color-red-shoes-02 );
+  --scw-color-03: var( --scw-color-red-shoes-03 );
+  --scw-color-04: var( --scw-color-red-shoes-04 );
+  --scw-color-05: var( --scw-color-red-shoes-05 );
+  --scw-color: var( --scw-color-red-shoes );
+  --scw-color-06: var( --scw-color-red-shoes-06 );
+  --scw-color-07: var( --scw-color-red-shoes-07 );
+  --scw-color-08: var( --scw-color-red-shoes-08 );
+  --scw-color-09: var( --scw-color-red-shoes-09 );
+  --scw-color-092: var( --scw-color-red-shoes-092 );
+  --scw-color-095: var( --scw-color-red-shoes-095 ); 
+}
+
+/* END preColorPatternHook */
+
+
 .scw-background-color-red-shoes-01,
 [scw-background-color-red-shoes-01] {
   --background-color: var( --scw-color-01 , var( --scw-color-red-shoes-01 ));
@@ -6447,6 +6725,30 @@
   background-color: var( --scw-color-095 , var( --scw-color-red-shoes-095 ));
 }
 
+/* START preColorPatternHook */
+
+.scw-theme-business,
+[scw-theme-business],
+.scw-theme-business [element],
+[scw-theme-business] [element],
+[element][color=business] {
+  --scw-color-01: var( --scw-color-business-01 );
+  --scw-color-02: var( --scw-color-business-02 );
+  --scw-color-03: var( --scw-color-business-03 );
+  --scw-color-04: var( --scw-color-business-04 );
+  --scw-color-05: var( --scw-color-business-05 );
+  --scw-color: var( --scw-color-business );
+  --scw-color-06: var( --scw-color-business-06 );
+  --scw-color-07: var( --scw-color-business-07 );
+  --scw-color-08: var( --scw-color-business-08 );
+  --scw-color-09: var( --scw-color-business-09 );
+  --scw-color-092: var( --scw-color-business-092 );
+  --scw-color-095: var( --scw-color-business-095 ); 
+}
+
+/* END preColorPatternHook */
+
+
 .scw-background-color-business-01,
 [scw-background-color-business-01] {
   --background-color: var( --scw-color-01 , var( --scw-color-business-01 ));
@@ -7071,6 +7373,30 @@
   background-color: var( --scw-color-095 , var( --scw-color-business-095 ));
 }
 
+/* START preColorPatternHook */
+
+.scw-theme-personal,
+[scw-theme-personal],
+.scw-theme-personal [element],
+[scw-theme-personal] [element],
+[element][color=personal] {
+  --scw-color-01: var( --scw-color-personal-01 );
+  --scw-color-02: var( --scw-color-personal-02 );
+  --scw-color-03: var( --scw-color-personal-03 );
+  --scw-color-04: var( --scw-color-personal-04 );
+  --scw-color-05: var( --scw-color-personal-05 );
+  --scw-color: var( --scw-color-personal );
+  --scw-color-06: var( --scw-color-personal-06 );
+  --scw-color-07: var( --scw-color-personal-07 );
+  --scw-color-08: var( --scw-color-personal-08 );
+  --scw-color-09: var( --scw-color-personal-09 );
+  --scw-color-092: var( --scw-color-personal-092 );
+  --scw-color-095: var( --scw-color-personal-095 ); 
+}
+
+/* END preColorPatternHook */
+
+
 .scw-background-color-personal-01,
 [scw-background-color-personal-01] {
   --background-color: var( --scw-color-01 , var( --scw-color-personal-01 ));
@@ -7695,6 +8021,30 @@
   background-color: var( --scw-color-095 , var( --scw-color-personal-095 ));
 }
 
+/* START preColorPatternHook */
+
+.scw-theme-heloc,
+[scw-theme-heloc],
+.scw-theme-heloc [element],
+[scw-theme-heloc] [element],
+[element][color=heloc] {
+  --scw-color-01: var( --scw-color-heloc-01 );
+  --scw-color-02: var( --scw-color-heloc-02 );
+  --scw-color-03: var( --scw-color-heloc-03 );
+  --scw-color-04: var( --scw-color-heloc-04 );
+  --scw-color-05: var( --scw-color-heloc-05 );
+  --scw-color: var( --scw-color-heloc );
+  --scw-color-06: var( --scw-color-heloc-06 );
+  --scw-color-07: var( --scw-color-heloc-07 );
+  --scw-color-08: var( --scw-color-heloc-08 );
+  --scw-color-09: var( --scw-color-heloc-09 );
+  --scw-color-092: var( --scw-color-heloc-092 );
+  --scw-color-095: var( --scw-color-heloc-095 ); 
+}
+
+/* END preColorPatternHook */
+
+
 .scw-background-color-heloc-01,
 [scw-background-color-heloc-01] {
   --background-color: var( --scw-color-01 , var( --scw-color-heloc-01 ));

package/dist/tokens/source/cssApi.css.json

@@ -1,4 +1,10 @@
 {
+  "scw-theme-primary-hook": {
+    "scw-theme-primary": {
+      "selector": "scw-theme-primary",
+      "output": "\n.scw-theme-primary,\n[scw-theme-primary],\n.scw-theme-primary [element],\n[scw-theme-primary] [element],\n[element][color=primary] {\n  --scw-color-01: var( --scw-color-primary-01 );\n  --scw-color-02: var( --scw-color-primary-02 );\n  --scw-color-03: var( --scw-color-primary-03 );\n  --scw-color-04: var( --scw-color-primary-04 );\n  --scw-color-05: var( --scw-color-primary-05 );\n  --scw-color: var( --scw-color-primary );\n  --scw-color-06: var( --scw-color-primary-06 );\n  --scw-color-07: var( --scw-color-primary-07 );\n  --scw-color-08: var( --scw-color-primary-08 );\n  --scw-color-09: var( --scw-color-primary-09 );\n  --scw-color-092: var( --scw-color-primary-092 );\n  --scw-color-095: var( --scw-color-primary-095 ); \n}\n"
+    }
+  },
   "colors-primary-01": {
     "background-color": {
       "output": "\n.scw-background-color-primary-01,\n[scw-background-color-primary-01] {\n  --background-color: var( --scw-color-01 , var( --scw-color-primary-01 ));\n  background-color: var( --background-color );\n}",
@@ -623,6 +629,12 @@
       "selector": "scw-background-color-hover-primary-095"
     }
   },
+  "scw-theme-grey-hook": {
+    "scw-theme-grey": {
+      "selector": "scw-theme-grey",
+      "output": "\n.scw-theme-grey,\n[scw-theme-grey],\n.scw-theme-grey [element],\n[scw-theme-grey] [element],\n[element][color=grey] {\n  --scw-color-00: var( --scw-color-grey-00 );\n  --scw-color-01: var( --scw-color-grey-01 );\n  --scw-color-02: var( --scw-color-grey-02 );\n  --scw-color-03: var( --scw-color-grey-03 );\n  --scw-color-04: var( --scw-color-grey-04 );\n  --scw-color-05: var( --scw-color-grey-05 );\n  --scw-color: var( --scw-color-grey );\n  --scw-color-06: var( --scw-color-grey-06 );\n  --scw-color-07: var( --scw-color-grey-07 );\n  --scw-color-08: var( --scw-color-grey-08 );\n  --scw-color-09: var( --scw-color-grey-09 );\n  --scw-color-092: var( --scw-color-grey-092 );\n  --scw-color-095: var( --scw-color-grey-095 );\n  --scw-color-10: var( --scw-color-grey-10 ); \n}\n"
+    }
+  },
   "colors-grey-00": {
     "background-color": {
       "output": "\n.scw-background-color-grey-00,\n[scw-background-color-grey-00] {\n  --background-color: var( --scw-color-grey-00 );\n  background-color: var( --background-color );\n}",
@@ -1351,6 +1363,12 @@
       "selector": "scw-background-color-hover-grey-10"
     }
   },
+  "scw-theme-error-hook": {
+    "scw-theme-error": {
+      "selector": "scw-theme-error",
+      "output": "\n.scw-theme-error,\n[scw-theme-error],\n.scw-theme-error [element],\n[scw-theme-error] [element],\n[element][color=error] {\n  --scw-color: var( --scw-color-error );\n  --scw-color-light: var( --scw-color-error-light );\n  --scw-color-dark: var( --scw-color-error-dark ); \n}\n"
+    }
+  },
   "colors-error-": {
     "background-color": {
       "output": "\n.scw-background-color-error,\n[scw-background-color-error] {\n  --background-color: var( --scw-color , var( --scw-color-error ));\n  background-color: var( --background-color );\n}",
@@ -1507,6 +1525,12 @@
       "selector": "scw-background-color-hover-error-dark"
     }
   },
+  "scw-theme-warning-hook": {
+    "scw-theme-warning": {
+      "selector": "scw-theme-warning",
+      "output": "\n.scw-theme-warning,\n[scw-theme-warning],\n.scw-theme-warning [element],\n[scw-theme-warning] [element],\n[element][color=warning] {\n  --scw-color: var( --scw-color-warning );\n  --scw-color-light: var( --scw-color-warning-light );\n  --scw-color-dark: var( --scw-color-warning-dark ); \n}\n"
+    }
+  },
   "colors-warning-": {
     "background-color": {
       "output": "\n.scw-background-color-warning,\n[scw-background-color-warning] {\n  --background-color: var( --scw-color , var( --scw-color-warning ));\n  background-color: var( --background-color );\n}",
@@ -1663,6 +1687,12 @@
       "selector": "scw-background-color-hover-warning-dark"
     }
   },
+  "scw-theme-success-hook": {
+    "scw-theme-success": {
+      "selector": "scw-theme-success",
+      "output": "\n.scw-theme-success,\n[scw-theme-success],\n.scw-theme-success [element],\n[scw-theme-success] [element],\n[element][color=success] {\n  --scw-color: var( --scw-color-success );\n  --scw-color-light: var( --scw-color-success-light );\n  --scw-color-dark: var( --scw-color-success-dark ); \n}\n"
+    }
+  },
   "colors-success-": {
     "background-color": {
       "output": "\n.scw-background-color-success,\n[scw-background-color-success] {\n  --background-color: var( --scw-color , var( --scw-color-success ));\n  background-color: var( --background-color );\n}",
@@ -1819,6 +1849,12 @@
       "selector": "scw-background-color-hover-success-dark"
     }
   },
+  "scw-theme-information-hook": {
+    "scw-theme-information": {
+      "selector": "scw-theme-information",
+      "output": "\n.scw-theme-information,\n[scw-theme-information],\n.scw-theme-information [element],\n[scw-theme-information] [element],\n[element][color=information] {\n  --scw-color: var( --scw-color-information );\n  --scw-color-light: var( --scw-color-information-light );\n  --scw-color-dark: var( --scw-color-information-dark ); \n}\n"
+    }
+  },
   "colors-information-": {
     "background-color": {
       "output": "\n.scw-background-color-information,\n[scw-background-color-information] {\n  --background-color: var( --scw-color , var( --scw-color-information ));\n  background-color: var( --background-color );\n}",
@@ -2079,6 +2115,12 @@
       "selector": "scw-background-color-hover-secondary"
     }
   },
+  "scw-theme-mortgage-hook": {
+    "scw-theme-mortgage": {
+      "selector": "scw-theme-mortgage",
+      "output": "\n.scw-theme-mortgage,\n[scw-theme-mortgage],\n.scw-theme-mortgage [element],\n[scw-theme-mortgage] [element],\n[element][color=mortgage] {\n  --scw-color-01: var( --scw-color-mortgage-01 );\n  --scw-color-02: var( --scw-color-mortgage-02 );\n  --scw-color-03: var( --scw-color-mortgage-03 );\n  --scw-color-04: var( --scw-color-mortgage-04 );\n  --scw-color-05: var( --scw-color-mortgage-05 );\n  --scw-color: var( --scw-color-mortgage );\n  --scw-color-06: var( --scw-color-mortgage-06 );\n  --scw-color-07: var( --scw-color-mortgage-07 );\n  --scw-color-08: var( --scw-color-mortgage-08 );\n  --scw-color-09: var( --scw-color-mortgage-09 );\n  --scw-color-092: var( --scw-color-mortgage-092 );\n  --scw-color-095: var( --scw-color-mortgage-095 ); \n}\n"
+    }
+  },
   "colors-mortgage-01": {
     "background-color": {
       "output": "\n.scw-background-color-mortgage-01,\n[scw-background-color-mortgage-01] {\n  --background-color: var( --scw-color-01 , var( --scw-color-mortgage-01 ));\n  background-color: var( --background-color );\n}",
@@ -2703,6 +2745,12 @@
       "selector": "scw-background-color-hover-mortgage-095"
     }
   },
+  "scw-theme-investments-hook": {
+    "scw-theme-investments": {
+      "selector": "scw-theme-investments",
+      "output": "\n.scw-theme-investments,\n[scw-theme-investments],\n.scw-theme-investments [element],\n[scw-theme-investments] [element],\n[element][color=investments] {\n  --scw-color-01: var( --scw-color-investments-01 );\n  --scw-color-02: var( --scw-color-investments-02 );\n  --scw-color-03: var( --scw-color-investments-03 );\n  --scw-color-04: var( --scw-color-investments-04 );\n  --scw-color-05: var( --scw-color-investments-05 );\n  --scw-color: var( --scw-color-investments );\n  --scw-color-06: var( --scw-color-investments-06 );\n  --scw-color-07: var( --scw-color-investments-07 );\n  --scw-color-08: var( --scw-color-investments-08 );\n  --scw-color-09: var( --scw-color-investments-09 );\n  --scw-color-092: var( --scw-color-investments-092 );\n  --scw-color-095: var( --scw-color-investments-095 ); \n}\n"
+    }
+  },
   "colors-investments-01": {
     "background-color": {
       "output": "\n.scw-background-color-investments-01,\n[scw-background-color-investments-01] {\n  --background-color: var( --scw-color-01 , var( --scw-color-investments-01 ));\n  background-color: var( --background-color );\n}",
@@ -3327,6 +3375,12 @@
       "selector": "scw-background-color-hover-investments-095"
     }
   },
+  "scw-theme-credit-cards-hook": {
+    "scw-theme-credit-cards": {
+      "selector": "scw-theme-credit-cards",
+      "output": "\n.scw-theme-credit-cards,\n[scw-theme-credit-cards],\n.scw-theme-credit-cards [element],\n[scw-theme-credit-cards] [element],\n[element][color=credit-cards] {\n  --scw-color-01: var( --scw-color-credit-cards-01 );\n  --scw-color-02: var( --scw-color-credit-cards-02 );\n  --scw-color-03: var( --scw-color-credit-cards-03 );\n  --scw-color-04: var( --scw-color-credit-cards-04 );\n  --scw-color-05: var( --scw-color-credit-cards-05 );\n  --scw-color: var( --scw-color-credit-cards );\n  --scw-color-06: var( --scw-color-credit-cards-06 );\n  --scw-color-07: var( --scw-color-credit-cards-07 );\n  --scw-color-08: var( --scw-color-credit-cards-08 );\n  --scw-color-09: var( --scw-color-credit-cards-09 );\n  --scw-color-092: var( --scw-color-credit-cards-092 );\n  --scw-color-095: var( --scw-color-credit-cards-095 ); \n}\n"
+    }
+  },
   "colors-credit-cards-01": {
     "background-color": {
       "output": "\n.scw-background-color-credit-cards-01,\n[scw-background-color-credit-cards-01] {\n  --background-color: var( --scw-color-01 , var( --scw-color-credit-cards-01 ));\n  background-color: var( --background-color );\n}",
@@ -3951,6 +4005,12 @@
       "selector": "scw-background-color-hover-credit-cards-095"
     }
   },
+  "scw-theme-student-hook": {
+    "scw-theme-student": {
+      "selector": "scw-theme-student",
+      "output": "\n.scw-theme-student,\n[scw-theme-student],\n.scw-theme-student [element],\n[scw-theme-student] [element],\n[element][color=student] {\n  --scw-color-01: var( --scw-color-student-01 );\n  --scw-color-02: var( --scw-color-student-02 );\n  --scw-color-03: var( --scw-color-student-03 );\n  --scw-color-04: var( --scw-color-student-04 );\n  --scw-color-05: var( --scw-color-student-05 );\n  --scw-color: var( --scw-color-student );\n  --scw-color-06: var( --scw-color-student-06 );\n  --scw-color-07: var( --scw-color-student-07 );\n  --scw-color-08: var( --scw-color-student-08 );\n  --scw-color-09: var( --scw-color-student-09 );\n  --scw-color-092: var( --scw-color-student-092 );\n  --scw-color-095: var( --scw-color-student-095 ); \n}\n"
+    }
+  },
   "colors-student-01": {
     "background-color": {
       "output": "\n.scw-background-color-student-01,\n[scw-background-color-student-01] {\n  --background-color: var( --scw-color-01 , var( --scw-color-student-01 ));\n  background-color: var( --background-color );\n}",
@@ -4575,6 +4635,12 @@
       "selector": "scw-background-color-hover-student-095"
     }
   },
+  "scw-theme-savings-hook": {
+    "scw-theme-savings": {
+      "selector": "scw-theme-savings",
+      "output": "\n.scw-theme-savings,\n[scw-theme-savings],\n.scw-theme-savings [element],\n[scw-theme-savings] [element],\n[element][color=savings] {\n  --scw-color-01: var( --scw-color-savings-01 );\n  --scw-color-02: var( --scw-color-savings-02 );\n  --scw-color-03: var( --scw-color-savings-03 );\n  --scw-color-04: var( --scw-color-savings-04 );\n  --scw-color-05: var( --scw-color-savings-05 );\n  --scw-color: var( --scw-color-savings );\n  --scw-color-06: var( --scw-color-savings-06 );\n  --scw-color-07: var( --scw-color-savings-07 );\n  --scw-color-08: var( --scw-color-savings-08 );\n  --scw-color-09: var( --scw-color-savings-09 );\n  --scw-color-092: var( --scw-color-savings-092 );\n  --scw-color-095: var( --scw-color-savings-095 ); \n}\n"
+    }
+  },
   "colors-savings-01": {
     "background-color": {
       "output": "\n.scw-background-color-savings-01,\n[scw-background-color-savings-01] {\n  --background-color: var( --scw-color-01 , var( --scw-color-savings-01 ));\n  background-color: var( --background-color );\n}",
@@ -5199,6 +5265,12 @@
       "selector": "scw-background-color-hover-savings-095"
     }
   },
+  "scw-theme-checking-hook": {
+    "scw-theme-checking": {
+      "selector": "scw-theme-checking",
+      "output": "\n.scw-theme-checking,\n[scw-theme-checking],\n.scw-theme-checking [element],\n[scw-theme-checking] [element],\n[element][color=checking] {\n  --scw-color-01: var( --scw-color-checking-01 );\n  --scw-color-02: var( --scw-color-checking-02 );\n  --scw-color-03: var( --scw-color-checking-03 );\n  --scw-color-04: var( --scw-color-checking-04 );\n  --scw-color-05: var( --scw-color-checking-05 );\n  --scw-color: var( --scw-color-checking );\n  --scw-color-06: var( --scw-color-checking-06 );\n  --scw-color-07: var( --scw-color-checking-07 );\n  --scw-color-08: var( --scw-color-checking-08 );\n  --scw-color-09: var( --scw-color-checking-09 );\n  --scw-color-092: var( --scw-color-checking-092 );\n  --scw-color-095: var( --scw-color-checking-095 ); \n}\n"
+    }
+  },
   "colors-checking-01": {
     "background-color": {
       "output": "\n.scw-background-color-checking-01,\n[scw-background-color-checking-01] {\n  --background-color: var( --scw-color-01 , var( --scw-color-checking-01 ));\n  background-color: var( --background-color );\n}",
@@ -5823,6 +5895,12 @@
       "selector": "scw-background-color-hover-checking-095"
     }
   },
+  "scw-theme-red-shoes-hook": {
+    "scw-theme-red-shoes": {
+      "selector": "scw-theme-red-shoes",
+      "output": "\n.scw-theme-red-shoes,\n[scw-theme-red-shoes],\n.scw-theme-red-shoes [element],\n[scw-theme-red-shoes] [element],\n[element][color=red-shoes] {\n  --scw-color-01: var( --scw-color-red-shoes-01 );\n  --scw-color-02: var( --scw-color-red-shoes-02 );\n  --scw-color-03: var( --scw-color-red-shoes-03 );\n  --scw-color-04: var( --scw-color-red-shoes-04 );\n  --scw-color-05: var( --scw-color-red-shoes-05 );\n  --scw-color: var( --scw-color-red-shoes );\n  --scw-color-06: var( --scw-color-red-shoes-06 );\n  --scw-color-07: var( --scw-color-red-shoes-07 );\n  --scw-color-08: var( --scw-color-red-shoes-08 );\n  --scw-color-09: var( --scw-color-red-shoes-09 );\n  --scw-color-092: var( --scw-color-red-shoes-092 );\n  --scw-color-095: var( --scw-color-red-shoes-095 ); \n}\n"
+    }
+  },
   "colors-red-shoes-01": {
     "background-color": {
       "output": "\n.scw-background-color-red-shoes-01,\n[scw-background-color-red-shoes-01] {\n  --background-color: var( --scw-color-01 , var( --scw-color-red-shoes-01 ));\n  background-color: var( --background-color );\n}",
@@ -6447,6 +6525,12 @@
       "selector": "scw-background-color-hover-red-shoes-095"
     }
   },
+  "scw-theme-business-hook": {
+    "scw-theme-business": {
+      "selector": "scw-theme-business",
+      "output": "\n.scw-theme-business,\n[scw-theme-business],\n.scw-theme-business [element],\n[scw-theme-business] [element],\n[element][color=business] {\n  --scw-color-01: var( --scw-color-business-01 );\n  --scw-color-02: var( --scw-color-business-02 );\n  --scw-color-03: var( --scw-color-business-03 );\n  --scw-color-04: var( --scw-color-business-04 );\n  --scw-color-05: var( --scw-color-business-05 );\n  --scw-color: var( --scw-color-business );\n  --scw-color-06: var( --scw-color-business-06 );\n  --scw-color-07: var( --scw-color-business-07 );\n  --scw-color-08: var( --scw-color-business-08 );\n  --scw-color-09: var( --scw-color-business-09 );\n  --scw-color-092: var( --scw-color-business-092 );\n  --scw-color-095: var( --scw-color-business-095 ); \n}\n"
+    }
+  },
   "colors-business-01": {
     "background-color": {
       "output": "\n.scw-background-color-business-01,\n[scw-background-color-business-01] {\n  --background-color: var( --scw-color-01 , var( --scw-color-business-01 ));\n  background-color: var( --background-color );\n}",
@@ -7071,6 +7155,12 @@
       "selector": "scw-background-color-hover-business-095"
     }
   },
+  "scw-theme-personal-hook": {
+    "scw-theme-personal": {
+      "selector": "scw-theme-personal",
+      "output": "\n.scw-theme-personal,\n[scw-theme-personal],\n.scw-theme-personal [element],\n[scw-theme-personal] [element],\n[element][color=personal] {\n  --scw-color-01: var( --scw-color-personal-01 );\n  --scw-color-02: var( --scw-color-personal-02 );\n  --scw-color-03: var( --scw-color-personal-03 );\n  --scw-color-04: var( --scw-color-personal-04 );\n  --scw-color-05: var( --scw-color-personal-05 );\n  --scw-color: var( --scw-color-personal );\n  --scw-color-06: var( --scw-color-personal-06 );\n  --scw-color-07: var( --scw-color-personal-07 );\n  --scw-color-08: var( --scw-color-personal-08 );\n  --scw-color-09: var( --scw-color-personal-09 );\n  --scw-color-092: var( --scw-color-personal-092 );\n  --scw-color-095: var( --scw-color-personal-095 ); \n}\n"
+    }
+  },
   "colors-personal-01": {
     "background-color": {
       "output": "\n.scw-background-color-personal-01,\n[scw-background-color-personal-01] {\n  --background-color: var( --scw-color-01 , var( --scw-color-personal-01 ));\n  background-color: var( --background-color );\n}",
@@ -7695,6 +7785,12 @@
       "selector": "scw-background-color-hover-personal-095"
     }
   },
+  "scw-theme-heloc-hook": {
+    "scw-theme-heloc": {
+      "selector": "scw-theme-heloc",
+      "output": "\n.scw-theme-heloc,\n[scw-theme-heloc],\n.scw-theme-heloc [element],\n[scw-theme-heloc] [element],\n[element][color=heloc] {\n  --scw-color-01: var( --scw-color-heloc-01 );\n  --scw-color-02: var( --scw-color-heloc-02 );\n  --scw-color-03: var( --scw-color-heloc-03 );\n  --scw-color-04: var( --scw-color-heloc-04 );\n  --scw-color-05: var( --scw-color-heloc-05 );\n  --scw-color: var( --scw-color-heloc );\n  --scw-color-06: var( --scw-color-heloc-06 );\n  --scw-color-07: var( --scw-color-heloc-07 );\n  --scw-color-08: var( --scw-color-heloc-08 );\n  --scw-color-09: var( --scw-color-heloc-09 );\n  --scw-color-092: var( --scw-color-heloc-092 );\n  --scw-color-095: var( --scw-color-heloc-095 ); \n}\n"
+    }
+  },
   "colors-heloc-01": {
     "background-color": {
       "output": "\n.scw-background-color-heloc-01,\n[scw-background-color-heloc-01] {\n  --background-color: var( --scw-color-01 , var( --scw-color-heloc-01 ));\n  background-color: var( --background-color );\n}",