diff --git a/styles/src/styleTree/interactive.ts b/styles/src/styleTree/interactive.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2f7181900cf97bf776fbc2a85c578e0ddbdc59dc
--- /dev/null
+++ b/styles/src/styleTree/interactive.ts
@@ -0,0 +1,26 @@
+interface Interactive<T> {
+  default: T,
+  hover?: T,
+  clicked?: T,
+  disabled?: T,
+}
+
+export function interactive<T>(base: T, modifications: Partial<Interactive<T>>): Interactive<T> {
+  const interactiveObj: Interactive<T> = {
+    default: base,
+  };
+
+  if (modifications.hover !== undefined) {
+    interactiveObj.hover = { ...base, ...modifications.hover };
+  }
+
+  if (modifications.clicked !== undefined) {
+    interactiveObj.clicked = { ...base, ...modifications.clicked };
+  }
+
+  if (modifications.disabled !== undefined) {
+    interactiveObj.disabled = { ...base, ...modifications.disabled };
+  }
+
+  return interactiveObj;
+}
diff --git a/styles/src/styleTree/toggle.ts b/styles/src/styleTree/toggle.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0602ae6b598712719b5bf91cf18bf60a5b024bd5
--- /dev/null
+++ b/styles/src/styleTree/toggle.ts
@@ -0,0 +1,17 @@
+interface Toggleable<T> {
+  inactive: T
+  active: T,
+}
+
+export function toggleable<T>(inactive: T, modifications: Partial<Toggleable<T>>): Toggleable<T> {
+  let active: T = inactive;
+  if (modifications.active !== undefined) {
+    active = { ...inactive, ...modifications.active };
+  }
+  return {
+    inactive: inactive,
+    active: active
+  };
+
+  d
+}