Gs/transition by property model

.gitignore

@@ -44,3 +44,7 @@ cabal.project.local~
 db*
 *.DS_Store
 static.out
+
+# Generated test files
+test-output.html
+test-transition.html

ClasshSS.cabal

@@ -26,14 +26,15 @@ extra-doc-files:    CHANGELOG.md
 -- extra-source-files:
 
 common warnings
-    ghc-options: -Wall
+    ghc-options: -Wall 
 
 library
     import:           warnings
     exposed-modules: Classh
                      Classh.Box
                      Classh.Box.Border
                      Classh.Box.DivInt
+                     Classh.Box.Gradient
                      Classh.Box.Margin
                      Classh.Box.Padding
                      Classh.Box.Placement
@@ -93,7 +94,8 @@ library
                      Classh.TextPosition.WhiteSpace
                      Classh.TextPosition.WordBreak
                      Classh.TextPosition.Wrap
-
+                     Classh.WithTransition
+
 
     default-extensions:
         OverloadedStrings
@@ -115,3 +117,63 @@ library
     hs-source-dirs:   src
     ghc-options: -Wall -Werror -O -threaded -fno-show-valid-hole-fits
     default-language: Haskell2010
+
+test-suite transition-test
+    import:           warnings
+    type:             exitcode-stdio-1.0
+    hs-source-dirs:   test
+    main-is:          TransitionTest.hs
+    build-depends:    base
+                    , ClasshSS
+                    , data-default
+                    , lens
+                    , text
+    default-language: Haskell2010
+
+test-suite comprehensive-test
+    import:           warnings
+    type:             exitcode-stdio-1.0
+    hs-source-dirs:   test
+    main-is:          ComprehensiveTest.hs
+    build-depends:    base
+                    , ClasshSS
+                    , data-default
+                    , lens
+                    , text
+    default-language: Haskell2010
+
+test-suite generate-html-test
+    import:           warnings
+    type:             exitcode-stdio-1.0
+    hs-source-dirs:   test
+    main-is:          GenerateHTMLTest.hs
+    build-depends:    base
+                    , ClasshSS
+                    , data-default
+                    , lens
+                    , text
+    default-language: Haskell2010
+
+test-suite transform-test
+    import:           warnings
+    type:             exitcode-stdio-1.0
+    hs-source-dirs:   test
+    main-is:          TransformTest.hs
+    build-depends:    base
+                    , ClasshSS
+                    , data-default
+                    , lens
+                    , text
+    default-language: Haskell2010
+
+test-suite gradient-test
+    import:           warnings
+    type:             exitcode-stdio-1.0
+    hs-source-dirs:   test
+    main-is:          GradientTest.hs
+    build-depends:    base
+                    , ClasshSS
+                    , data-default
+                    , lens
+                    , text
+    default-language: Haskell2010

README.md

@@ -1,4 +1,111 @@
-# ClashSS
-typify CSS so that Style or Class tags do not overlap in obvious but easy to miss ways
+# ClasshSS
 
-Note: use Scrappy for bundled files and fetched files to further detect clashes
+Type-safe CSS-in-Haskell built on Tailwind CSS. Generates class strings with compile-time validation.
+
+## Overview
+
+ClasshSS is a library that generates Tailwind CSS class strings in Haskell with compile-time type safety. It provides two main configuration types:
+
+- `BoxConfig` - Element styling (layout, colors, borders, shadows, spacing)
+- `TextConfigTW` - Text styling (font, size, weight, color)
+
+The library generates `Text` values containing Tailwind classes. These work with any DOM library (Reflex.Dom, Lucid, Blaze, IHP, etc.).
+
+## Installation
+
+Add to your `.cabal` file:
+```cabal
+build-depends:
+    classhss
+```
+
+Or with Stack, add to `stack.yaml`:
+```yaml
+extra-deps:
+  - classhss-0.1.0.0
+```
+
+## Quick Start
+
+```haskell
+{-# LANGUAGE TemplateHaskell #-}
+
+import Classh
+import Reflex.Dom.Core
+
+-- Simple styled div
+myDiv :: DomBuilder t m => m ()
+myDiv = elClass "div" $(classh'
+  [ bgColor .~~ Blue C500
+  , p .~~ TWSize 4
+  , br .~~ R_Md
+  ]) $ text "Hello, ClasshSS!"
+```
+
+### Four Operators
+
+- `.~~` - Constant value (no responsive, no states)
+- `.|~` - Responsive values (mobile-first breakpoints)
+- `.~^` - State-based values (hover, focus, active) with transitions
+- `.~` - Direct setter (mainly for `custom` field)
+
+## Complete Example
+
+See **[docs/EXAMPLE.md](docs/EXAMPLE.md)** for a comprehensive example showing:
+- BoxConfig applied to elements via `classh'`
+- TextConfigTW for text styling (via `textS` from reflex-classh)
+- TextPosition for text positioning (via `textPosition` from reflex-classh)
+- Responsive design with `.|~`
+- State-based transitions with `.~^`
+- Grid positioning
+- Transform composition
+
+## Migrating from Tailwind
+
+If you're familiar with Tailwind CSS, see **[docs/MIGRATION_FROM_TAILWIND.md](docs/MIGRATION_FROM_TAILWIND.md)** for:
+- Class name mappings (e.g., `bg-blue-500` → `bgColor .~~ Blue C500`)
+- How to translate responsive patterns
+- How to translate hover/focus states
+- Common migration patterns
+
+## API Documentation
+
+For complete API reference:
+- Run `cabal haddock` to generate documentation
+- See Haddock comments in source files (especially `src/Classh.hs`)
+- The main module Haddock includes the comprehensive example
+
+## Why ClasshSS?
+
+- **Type safety** - Invalid CSS won't compile
+- **No conflicts** - Can't accidentally set overlapping properties
+- **Responsive by default** - Easy mobile-first design
+- **Transitions built-in** - Type-safe hover/focus states
+- **Tailwind familiar** - If you know Tailwind, you know ClasshSS
+
+## Important Notes
+
+### Type Separation
+
+You cannot mix `BoxConfig` and `TextConfigTW` in the same `classh'` call. This is enforced by the type system:
+
+```haskell
+-- ERROR: Won't compile!
+$(classh' [ bgColor .~~ Blue C500, text_color .~~ White ])
+
+-- CORRECT: Separate configs, nested elements
+elClass "div" $(classh' [bgColor .~~ Blue C500]) $
+  textS $(classhText [text_color .~~ White]) "Text"
+```
+
+### Avoid Flexbox
+
+ClasshSS recommends using CSS Grid instead of flexbox due to flexbox's non-deterministic sizing behavior. Use the `custom` field only as a last resort.
+
+### The `custom` Field
+
+The `custom` field bypasses type safety and can override type-safe properties. Only use it when absolutely necessary, and place it **first** in your config list so type-safe properties take precedence.
+
+## License
+
+BSD-style