@se-studio/project-build 1.0.51 → 1.0.53

package/skills/se-marketing-sites/styling-system/SKILL.md

@@ -0,0 +1,118 @@
+---
+name: styling-system
+description: Reference guide for the marketing site styling system, including typography, colors, grids, and RTF classes.
+license: Private
+metadata:
+  author: se-core-product
+  version: "1.1.0"
+---
+
+# Styling System
+
+This project uses a customized Tailwind CSS setup where the configuration is driven by `tailwind.config.json` in each app. This JSON file acts as the source of truth for design tokens, including colors, typography, spacing, and breakpoints.
+
+## Configuration Source
+
+The `tailwind.config.json` file in your app's root directory defines the following:
+
+*   **`colorOptions`**: Defines the project's color palette.
+*   **`fontTable`**: Defines typography styles, responsive scaling, and font families.
+*   **`sizes`**: Defines breakpoints, grid columns, gaps, and margins.
+
+These configurations are processed by the build system to generate utility classes and TypeScript helpers.
+
+## Typography
+
+Typography utility classes (e.g., `h1`, `h2`, `p1`, `p2`) are automatically generated from the `fontTable` in `tailwind.config.json`.
+
+### generated Utilities
+
+Classes are generated for each key in `fontTable.styles`. Common keys include:
+
+*   **Headings**: `h1`, `h2`, `h3`, `h4`, `h5`, `h6`
+*   **Body**: `p1`, `p2`, `p3`, `p4`
+*   **Special**: `quote`, `button`, `nav`, etc. (varies by project)
+
+Styles are responsive and scale automatically based on the breakpoints defined in the config (e.g., `laptop`, `desktop`).
+
+### Best Practice: Dynamic Sizing
+
+Use `getSizingInformation(index)` to dynamically assign the correct heading class based on the component's position on the page or the CMS configuration.
+
+```typescript
+// Example usage in a component renderer
+const { Element, sizingInformation } = getSizingInformation(size, index);
+<Element className={sizingInformation.h1}>{title}</Element>
+```
+
+## Colors
+
+Colors are defined in `colorOptions` within `tailwind.config.json`. The build system generates TypeScript helpers in `@/generated/colors` to access these colors safely.
+
+### Helper Functions
+
+1.  **`lookupColourString(colorName, property)`**:
+    Get a single class for a specific property.
+    ```typescript
+    // Returns "text-primary-blue" (if 'Primary Blue' exists in config)
+    lookupColourString('Primary Blue', 'text')
+    // Returns "bg-light-gray" (if 'Light Gray' exists in config)
+    lookupColourString('Light Gray', 'bg')
+    ```
+
+2.  **`lookupColourClassNames(bgColor, textColor)`**:
+    Get background AND text classes, handling automatic contrast if text color is omitted (based on `colorOpposites` in config).
+    ```typescript
+    // Returns "bg-primary-blue text-white" (if White is opposite of Primary Blue)
+    lookupColourClassNames('Primary Blue')
+    ```
+
+## Grid System
+
+The grid system is defined in the `sizes` object of `tailwind.config.json`. It specifies the number of columns, margins, and gaps for each breakpoint.
+
+### Standard Breakpoints
+
+While configurable, most projects use:
+*   `mobile`: Default (0px+)
+*   `tablet`: ~768px+
+*   `laptop`: ~1024px+
+*   `desktop`: ~1440px+
+
+### Layout Helpers
+
+Common layout patterns using Tailwind grid utilities:
+
+*   **Full Width**: `col-span-full`
+*   **Centered Content**: `col-span-full laptop:col-start-2 laptop:col-span-10` (assuming 12 columns on laptop)
+*   **Split 50/50**:
+    *   Left: `col-span-full laptop:col-span-6`
+    *   Right: `col-span-full laptop:col-span-6`
+
+## Rich Text (RTF) Classes
+
+Rich text styling is handled via custom utility classes defined in `src/app/globals.css`. These classes map raw HTML elements (from the CMS rich text field) to the project's typography utilities.
+
+Common conventions for RTF classes (check your specific `globals.css`):
+
+*   **`.rtf-standard` / `.content-rich-text`**: Default styling for body content.
+*   **`.rtf-legal`**: Styling for terms and conditions (often smaller text, decimal lists).
+*   **`.rtf-article`**: Editorial styling (often larger text, specific spacing).
+*   **`.rtf-core`**: Minimal styling reset.
+
+**Usage**:
+Wrap the `RtfOrString` component with the appropriate class:
+```tsx
+<div className="rtf-standard">
+  <RtfOrString data={richTextData} />
+</div>
+```
+
+## Global Styles
+
+Project-specific global styles, animations, and custom utility classes are located in `src/app/globals.css`. This file imports the generated Tailwind CSS and defines:
+
+*   Root variables (if any)
+*   Animation keyframes
+*   Custom component classes (e.g., `.btn-primary`)
+*   Rich Text Formatting classes