[Concept] : [AstroVE] : Style Sheet

[h0lybyte]

Core Concept/Theory A clear and concise description of what the concept is. Ex. It would be cool if [...]

The style sheet would be under the packages/astro-ve/src/lib/style.ts

I will build out the whole style interface and have it be the single source of truth for the tailwindcss.

The color and style variables will follow a straightforward template approach, with a substring of dyn attached to the end, to represent dynamic colors.

I am still working out the interface and style class but this should ease management of the global styles.

I will update this issue ticket with more information as I am working out the kinks.

---

Alternative Ideas Is there any other way this concept could be used?

If there are any other ideas, I will add them here.

---

Alternative Examples/Sources Are there any other references that you can provide?

No alternative examples or sources as of right now.

---

Additional information Add any other context or examples of this concept here.

Additional information will be linked to this issue ticket.

[h0lybyte]

Here is the updated markdown template for the code base.

KBVE Style Management Library

The KBVE Style Management Library provides a TypeScript-based framework for managing and applying dynamic styles within applications. It leverages interfaces and classes to create a flexible system for handling style variables and their transformations.

Interfaces

IKBVEStyleSheet

Represents the base contract for a style sheet within the KBVE framework, defining how style variables can be retrieved and manipulated.

• Methods:
  • getVariable(name: string, dyn?: boolean): IVariableProcessor: Retrieves a variable processor for the specified variable name. Optionally, a dynamic flag (dyn) can be specified to modify the variable name retrieval process.

IVariableProcessor

Defines the operations that can be performed on a style variable.

• Properties:
  • variable: string: The current value of the style variable.
• Methods:
  • getText(): string: Returns the textual representation of the variable.
  • setTransparent(percentage: number): IVariableProcessor: Modifies the variable to apply a transparency based on the specified percentage and returns the processor for chaining.

Classes

KBVEStyleManager

Implements IKBVEStyleSheet, providing the core functionality for managing style variables.

• Private Properties:
  • variables: { [key: string]: string }: A key-value store of style variable names to their corresponding values.
• Public Methods:
  • getVariable(name: string, dyn: boolean = false): Implements the interface method to retrieve and process style variables.
• Private Methods:
  • replaceHyphensWithSpaces(inputString: string): Utility method for formatting variable names.
  • applyTransparency(variable: string, percentage: number): Applies transparency to a variable based on a given percentage.

DynamicKBVEStyleManager

Extends KBVEStyleManager to override the getVariable method, enabling automatic dynamic variable processing.

• Public Methods:
  • getVariable(name: string): Overrides the parent method to always retrieve variables in their dynamic form.

Exported Instances

• style: An instance of KBVEStyleManager for default style management.
• dynStyle: An instance of DynamicKBVEStyleManager for dynamic style management.

This library offers a structured approach to handling styles, allowing for both static and dynamic manipulation of style variables. Its architecture facilitates easy integration and extension within TypeScript applications.

[h0lybyte]

Adding these today, some of which are already in place.

• Animations.
• Slider Button.
• Hero Card Element.
• WASM PlaceHolder Element.

[h0lybyte]

Going to expand this stylesheet with additional libraries, these will be:

• framer-motion
• clsx
• tailwind-merge

I will split the branches up, adding these three inside of one patch and then integration examples with each one via additional patches.

[h0lybyte]

Going to rebuild the whole Astro VE library as

@kbve/astropad within the next month and then release it as a NPM. I am thinking of a couple more edge cases that I need to resolve before starting this adventure.

[h0lybyte]

We can close out this, as there is no point with the new tailwind system v4.

Best to just keep the customization within the scope of tailwind and extending it out any further is pointless.