Refactoring presets (#8)

src/theme/decorations/borders.ts

@@ -1,15 +1,24 @@
-export type TBorderPresetNames = "default";
+import type { TPreset, TStyle } from "../";
 
 export type TBorder = {
-  preset?: TBorderPresetNames;
-  borderStyle?: string;
-  borderWidth?: string;
+  preset?: TPreset;
+  styles?: TStyle[];
 };
 
 const defaultBorder: TBorder = {
-  preset: "default",
-  borderStyle: "solid",
-  borderWidth: "1px",
+  preset: {
+    type: "border",
+    name: "default",
+  },
+  styles: [
+    {
+      state: "default",
+      css: {
+        borderStyle: "solid",
+        borderWidth: "1px",
+      },
+    },
+  ],
 };
 
 const borders: TBorder[] = [defaultBorder];

src/theme/decorations/buttons.ts

@@ -0,0 +1,28 @@
+import type { TPreset, TStyle } from "../";
+
+export type TButton = {
+  preset?: TPreset;
+  styles?: TStyle[];
+};
+
+const defaultButton: TButton = {
+  preset: {
+    type: "button",
+    name: "default",
+  },
+  styles: [
+    {
+      state: "default",
+      presets: [
+        {
+          type: "border",
+          name: "default",
+        },
+      ],
+    },
+  ],
+};
+
+const buttons: TButton[] = [defaultButton];
+
+export default buttons;

src/theme/decorations/decorations.ts

@@ -1,33 +1,22 @@
-import type { TBorder, TBorderPresetNames } from "./borders";
+import type { TBorder } from "./borders";
 import { default as borders } from "./borders";
 
-import type { TPatternify, TPatternifyPresetNames } from "./patternify";
-import { default as patternify } from "./patternify";
+import type { TButton } from "./buttons";
+import { default as buttons } from "./buttons";
 
-import type { TLinkStyle } from "./link";
-import { default as linkStyles } from "./link";
-
-/**
- * // NOTE: Experimental
- * Tries to achieve something like `useDecoration('link', 'default')` and `useDecoration('borders', 'heavy')`
- * However link styling is so complex it needs a special hook `useLinkStyle` to put together the styles.
- * For simple styling it works for now.
- */
-export type TDecoration = {
-  type?: "borders" | "patternify";
-  preset?: TBorderPresetNames & TPatternifyPresetNames;
-};
+import type { TLink } from "./links";
+import { default as links } from "./links";
 
 export type TDecorations = {
   borders?: TBorder[];
-  patternify?: TPatternify[];
-  links?: TLinkStyle[];
+  links?: TLink[];
+  buttons?: TButton[];
 };
 
 const decorations: TDecorations = {
   borders: borders,
-  patternify: patternify,
-  links: linkStyles,
+  links: links,
+  buttons: buttons,
 };
 
 export default decorations;

src/theme/decorations/index.ts

@@ -1,8 +1,11 @@
-export type { TDecorations, TDecoration } from "./decorations";
-export { default as decorations } from "./decorations";
+export type { TBorder } from "./borders";
+export { default as borders } from "./borders";
+
+export type { TButton } from "./buttons";
+export { default as buttons } from "./buttons";
 
-export type {
-  TLinkStylePresetNames,
-  TLinkStyle,
-  TLinkTypePresetNames,
-} from "./link";
+export type { TLink } from "./links";
+export { default as links } from "./links";
+
+export type { TDecorations } from "./decorations";
+export { default as decorations } from "./decorations";

src/theme/decorations/links.ts

@@ -0,0 +1,67 @@
+import type { TPreset, TStyle } from "../";
+
+export type TLink = {
+  preset?: TPreset;
+  styles?: TStyle[];
+};
+
+/**
+ * Defines the default link style.
+ */
+const defaultLink: TLink = {
+  preset: {
+    type: "link",
+    name: "default",
+  },
+  styles: [
+    {
+      state: "default",
+      presets: [
+        {
+          type: "colorPair",
+          name: "default",
+        },
+      ],
+      css: {
+        textDecoration: "underline",
+      },
+    },
+    {
+      state: "active",
+      presets: [
+        {
+          type: "colorPair",
+          name: "inverted",
+        },
+      ],
+      css: {
+        textDecoration: "line-through",
+      },
+    },
+    {
+      state: "visited",
+      presets: [
+        {
+          type: "colorPair",
+          name: "default",
+        },
+      ],
+      css: {
+        textDecorationColor: "red",
+      },
+    },
+    {
+      state: "hidden",
+      css: {
+        display: "none",
+      },
+    },
+  ],
+};
+
+/**
+ * Defines the available link styles.
+ */
+const links: TLink[] = [defaultLink];
+
+export default links;

src/theme/index.ts

@@ -22,13 +22,9 @@ export type {
   THeadingsSettings,
   TSpacingPresetNames,
   THeadingsPresetNames,
-  TLinkStylePresetNames,
-  TLinkStyle,
   TColorPair,
   TColorPairNames,
-  TLinkTypePresetNames,
   TDecorations,
-  TDecoration,
   TState,
   TPreset,
   TStyle,

src/theme/theme.ts

@@ -29,13 +29,7 @@ import type {
 } from "./colors";
 import { colors, colorPairs } from "./colors";
 
-import type {
-  TDecorations,
-  TDecoration,
-  TLinkStylePresetNames,
-  TLinkStyle,
-  TLinkTypePresetNames,
-} from "./decorations";
+import type { TDecorations } from "./decorations";
 import { decorations } from "./decorations";
 
 /**
@@ -194,11 +188,7 @@ export type {
   THeadings,
   THeadingsSettings,
   THeadingsPresetNames,
-  TLinkStylePresetNames,
-  TLinkStyle,
   TColorPair,
   TColorPairNames,
-  TLinkTypePresetNames,
   TDecorations,
-  TDecoration,
 };