<commit_before>module Style
    exposing
        ( Model
        , Variation
        , Element
        , Colors
        , Shadow
        , Visibility
        , TextDecoration
        , Alignment
        , VerticalAlignment
        , BackgroundImage
        , Transform
        , Filter
        , Floating
        , BorderStyle
        , Flow
        , Layout
        , Text
        , Whitespace
        , Anchor
        , RelativeTo
        , Repeat
        , Animation
        , Trigger
        , MediaQuery
        , flowUp
        , flowDown
        , flowRight
        , flowLeft
        , textLayout
        , tableLayout
        , top
        , bottom
        , left
        , right
        , all
        , topBottom
        , leftRight
        , leftRightAndTopBottom
        , allButTop
        , allButLeft
        , allButRight
        , allButBottom
        , normal
        , pre
        , preWrap
        , preLine
        , noWrap
        , alignLeft
        , alignRight
        , justify
        , justifyAll
        , alignCenter
        , verticalCenter
        , verticalStretch
        , alignTop
        , alignBottom
        , topLeft
        , bottomRight
        , topRight
        , bottomLeft
        , currentPosition
        , parent
        , screen
        , hidden
        , visible
        , opacity
        , transparency
        , auto
        , px
        , percent
        , solid
        , dotted
        , dashed
        , floatLeft
        , floatRight
        , floatTopLeft
        , floatTopRight
        , scale
        , translate
        , rotate
        , repeat
        , repeatX
        , repeatY
        , space
        , round
        , noRepeat
        , filterUrl
        , blur
        , brightness
        , contrast
        , grayscale
        , hueRotate
        , invert
        , opacityFilter
        , saturate
        , sepia
        , shadow
        , insetShadow
        , textShadow
        , dropShadow
        , on
        , onWith
        , animate
        , animateOn
        , hover
        , focus
        , checked
        , empty
        , variation
        , mediaQuery
        )

{-| A different take on styling.

This module is focused around composing a style.


@docs Model, empty

@docs Variation, variation


# Layouts

Layouts affect how children are arranged.  It is one of the principles of the library that layout is controlled by the parent element.

@docs Layout, textLayout, tableLayout

@docs Flow, flowUp, flowDown, flowRight, flowLeft

@docs Alignment, alignLeft, alignRight, justify, justifyAll, alignCenter

@docs VerticalAlignment, verticalCenter, verticalStretch, alignTop, alignBottom


# Colors

@docs Colors


# Float & Inline

@docs Floating, floatLeft, floatRight, floatTopLeft, floatTopRight


# Visibility

@docs Visibility, hidden, opacity, transparency, visible


# Units

Most values in this library have one set of units chosen and built in to the library.

However, `width` and `height` values can be pixels, percent, or auto.

@docs percent, px, auto


# Positioning

The coordinates for the `position` value in the style model are x and y coordinates where right and down are the positive directions, same as the standard coordinate system for svg.

These coordinates are always rendered in pixels.

@docs RelativeTo, parent, currentPosition, screen

@docs Anchor, topLeft, topRight, bottomLeft, bottomRight


# A Note on Padding and Margins

In CSS `padding` and `margin` are interesting when you have a parent and a child element.  You now have two ways of specifying the spacing of the child element within the parent.  Either the `margin` on the child or the `padding` on the parent.  This causes anxiety in the developer.

In the effort of having only one good way to accomplish something, we only allow the `padding` property to be set.

We introduce the `spacing` attribute, which sets the spacing between all _child_ elements (using the margin property).

> __Some exceptions__
>
> `inline` elements are not affected by spacing.
>
> Floating elements will only respect certain spacing values.


# Padding, Spacing, and Borders

Padding, spacing, and border widths are all specified by a tuple of four floats that represent (top, right, bottom, left).  These are all rendered as `px` values.

The following are convenience functions for setting these values.

@docs all, top, bottom, left, right, topBottom, leftRight, leftRightAndTopBottom, allButTop, allButLeft, allButRight, allButBottom

## Borderstyles


@docs BorderStyle, solid, dotted, dashed


# Text/Font

@docs Whitespace, normal, pre, preLine, preWrap, noWrap


# Background Images

@docs BackgroundImage, Repeat, repeat, repeatX, repeatY, noRepeat, round, space


# Shadows

@docs Shadow, shadow, insetShadow, textShadow, dropShadow


# Transforms

@docs Transform, translate, rotate, scale

# Filters

@docs Filter, filterUrl, blur, brightness, contrast, grayscale, hueRotate, invert, opacityFilter, saturate, sepia



# Animations
@docs Animation, on, onWith, animate, animateOn

Animation triggers.

@docs Trigger, hover, focus, checked


# Media Queries

@docs mediaQuery

# Element
@docs Element






-}

import Html
import Time exposing (Time)
import Color exposing (Color)
import Style.Model


{-| The full model for a style.

Some properties are mandatory makes our styles predictable.

-}
type alias Model =
    { layout : Layout
    , visibility : Visibility
    , relativeTo : RelativeTo
    , anchor : Anchor
    , position : ( Float, Float )
    , cursor : String
    , width : Length
    , height : Length
    , colors : Colors
    , spacing : ( Float, Float, Float, Float )
    , padding : ( Float, Float, Float, Float )
    , text : Text
    , borderStyle : BorderStyle
    , borderWidth : ( Float, Float, Float, Float )
    , cornerRadius : ( Float, Float, Float, Float )
    , backgroundImage : Maybe BackgroundImage
    , float : Maybe Floating
    , inline : Bool
    , shadows : List Shadow
    , transforms : List Transform
    , filters : List Filter
    , properties : List ( String, String )
    , animations :
        List Animation
    , media : List MediaQuery
    }


{-| -}
empty : Model
empty =
    { layout = textLayout
    , visibility = visible
    , relativeTo = currentPosition
    , anchor = topLeft
    , position = ( 0, 0 )
    , colors =
        { background = Color.rgba 255 255 255 0
        , text = Color.black
        , border = Color.grey
        }
    , text =
        { font = "georgia"
        , size = 16
        , characterOffset = Nothing
        , lineHeight = 1.7
        , align = alignLeft
        , whitespace = normal
        }
    , borderStyle = solid
    , borderWidth = all 0
    , cornerRadius = all 0
    , cursor = "auto"
    , width = auto
    , height = auto
    , padding = all 0
    , spacing = all 0
    , float = Nothing
    , inline = False
    , backgroundImage = Nothing
    , shadows = []
    , transforms = []
    , filters = []
    , animations = []
    , media = []
    , properties = []
    }


{-| A `Variation` is a style where all the properties are optional.

This is used to construct animations and transitions.

Only properties that make sense in that context are present.


-}
type alias Variation =
    { visibility : Maybe Visibility
    , position : Maybe ( Float, Float )
    , cursor : Maybe String
    , width : Maybe Length
    , height : Maybe Length
    , colors : Maybe Colors
    , padding : Maybe ( Float, Float, Float, Float )
    , spacing : Maybe ( Float, Float, Float, Float )
    , text : Maybe Text
    , borderStyle : Maybe BorderStyle
    , borderWidth : Maybe ( Float, Float, Float, Float )
    , cornerRadius : Maybe ( Float, Float, Float, Float )
    , backgroundImagePosition : Maybe ( Float, Float )
    , shadows : List Shadow
    , transforms : List Transform
    , filters : List Filter
    , properties : List ( String, String )
    }


{-| An empty `Variation`
-}
variation : Variation
variation =
    { visibility = Nothing
    , position = Nothing
    , colors = Nothing
    , text = Nothing
    , borderStyle = Nothing
    , borderWidth = Nothing
    , cornerRadius = Nothing
    , cursor = Nothing
    , width = Nothing
    , height = Nothing
    , padding = Nothing
    , spacing = Nothing
    , backgroundImagePosition = Nothing
    , shadows = []
    , transforms = []
    , filters = []
    , properties = []
    }


{-|
-}
type alias Element msg =
    ( List Style.Model.StyleDefinition, Html.Html msg )


{-| -}
type alias Animation =
    Style.Model.Animated Variation


{-| -}
type alias Trigger =
    Style.Model.Trigger


{-| -}
type alias MediaQuery =
    Style.Model.MediaQuery Variation


{-| Colors are bound together in a record.  This is useful for creating palettes of colors.

-}
type alias Colors =
    { background : Color
    , text : Color
    , border : Color
    }


{-| -}
type alias BackgroundImage =<commit_msg>Colors -> ColorPalette<commit_after>module Style
    exposing
        ( Model
        , Variation
        , Element
        , Colors
        , Shadow
        , Visibility
        , TextDecoration
        , Alignment
        , VerticalAlignment
        , BackgroundImage
        , Transform
        , Filter
        , Floating
        , BorderStyle
        , Flow
        , Layout
        , Text
        , Whitespace
        , Anchor
        , RelativeTo
        , Repeat
        , Animation
        , Trigger
        , MediaQuery
        , flowUp
        , flowDown
        , flowRight
        , flowLeft
        , textLayout
        , tableLayout
        , top
        , bottom
        , left
        , right
        , all
        , topBottom
        , leftRight
        , leftRightAndTopBottom
        , allButTop
        , allButLeft
        , allButRight
        , allButBottom
        , normal
        , pre
        , preWrap
        , preLine
        , noWrap
        , alignLeft
        , alignRight
        , justify
        , justifyAll
        , alignCenter
        , verticalCenter
        , verticalStretch
        , alignTop
        , alignBottom
        , topLeft
        , bottomRight
        , topRight
        , bottomLeft
        , currentPosition
        , parent
        , screen
        , hidden
        , visible
        , opacity
        , transparency
        , auto
        , px
        , percent
        , solid
        , dotted
        , dashed
        , floatLeft
        , floatRight
        , floatTopLeft
        , floatTopRight
        , scale
        , translate
        , rotate
        , repeat
        , repeatX
        , repeatY
        , space
        , round
        , noRepeat
        , filterUrl
        , blur
        , brightness
        , contrast
        , grayscale
        , hueRotate
        , invert
        , opacityFilter
        , saturate
        , sepia
        , shadow
        , insetShadow
        , textShadow
        , dropShadow
        , on
        , onWith
        , animate
        , animateOn
        , hover
        , focus
        , checked
        , empty
        , variation
        , mediaQuery
        )

{-| A different take on styling.

This module is focused around composing a style.


@docs Model, empty

@docs Variation, variation


# Layouts

Layouts affect how children are arranged.  It is one of the principles of the library that layout is controlled by the parent element.

@docs Layout, textLayout, tableLayout

@docs Flow, flowUp, flowDown, flowRight, flowLeft

@docs Alignment, alignLeft, alignRight, justify, justifyAll, alignCenter

@docs VerticalAlignment, verticalCenter, verticalStretch, alignTop, alignBottom


# Colors

@docs Colors


# Float & Inline

@docs Floating, floatLeft, floatRight, floatTopLeft, floatTopRight


# Visibility

@docs Visibility, hidden, opacity, transparency, visible


# Units

Most values in this library have one set of units chosen and built in to the library.

However, `width` and `height` values can be pixels, percent, or auto.

@docs percent, px, auto


# Positioning

The coordinates for the `position` value in the style model are x and y coordinates where right and down are the positive directions, same as the standard coordinate system for svg.

These coordinates are always rendered in pixels.

@docs RelativeTo, parent, currentPosition, screen

@docs Anchor, topLeft, topRight, bottomLeft, bottomRight


# A Note on Padding and Margins

In CSS `padding` and `margin` are interesting when you have a parent and a child element.  You now have two ways of specifying the spacing of the child element within the parent.  Either the `margin` on the child or the `padding` on the parent.  This causes anxiety in the developer.

In the effort of having only one good way to accomplish something, we only allow the `padding` property to be set.

We introduce the `spacing` attribute, which sets the spacing between all _child_ elements (using the margin property).

> __Some exceptions__
>
> `inline` elements are not affected by spacing.
>
> Floating elements will only respect certain spacing values.


# Padding, Spacing, and Borders

Padding, spacing, and border widths are all specified by a tuple of four floats that represent (top, right, bottom, left).  These are all rendered as `px` values.

The following are convenience functions for setting these values.

@docs all, top, bottom, left, right, topBottom, leftRight, leftRightAndTopBottom, allButTop, allButLeft, allButRight, allButBottom

## Borderstyles


@docs BorderStyle, solid, dotted, dashed


# Text/Font

@docs Whitespace, normal, pre, preLine, preWrap, noWrap


# Background Images

@docs BackgroundImage, Repeat, repeat, repeatX, repeatY, noRepeat, round, space


# Shadows

@docs Shadow, shadow, insetShadow, textShadow, dropShadow


# Transforms

@docs Transform, translate, rotate, scale

# Filters

@docs Filter, filterUrl, blur, brightness, contrast, grayscale, hueRotate, invert, opacityFilter, saturate, sepia



# Animations
@docs Animation, on, onWith, animate, animateOn

Animation triggers.

@docs Trigger, hover, focus, checked


# Media Queries

@docs mediaQuery

# Element
@docs Element






-}

import Html
import Time exposing (Time)
import Color exposing (Color)
import Style.Model


{-| The full model for a style.

Some properties are mandatory makes our styles predictable.

-}
type alias Model =
    { layout : Layout
    , visibility : Visibility
    , relativeTo : RelativeTo
    , anchor : Anchor
    , position : ( Float, Float )
    , cursor : String
    , width : Length
    , height : Length
    , colors : ColorPalette
    , spacing : ( Float, Float, Float, Float )
    , padding : ( Float, Float, Float, Float )
    , text : Text
    , borderStyle : BorderStyle
    , borderWidth : ( Float, Float, Float, Float )
    , cornerRadius : ( Float, Float, Float, Float )
    , backgroundImage : Maybe BackgroundImage
    , float : Maybe Floating
    , inline : Bool
    , shadows : List Shadow
    , transforms : List Transform
    , filters : List Filter
    , properties : List ( String, String )
    , animations :
        List Animation
    , media : List MediaQuery
    }


{-| -}
empty : Model
empty =
    { layout = textLayout
    , visibility = visible
    , relativeTo = currentPosition
    , anchor = topLeft
    , position = ( 0, 0 )
    , colors =
        { background = Color.rgba 255 255 255 0
        , text = Color.black
        , border = Color.grey
        }
    , text =
        { font = "georgia"
        , size = 16
        , characterOffset = Nothing
        , lineHeight = 1.7
        , align = alignLeft
        , whitespace = normal
        }
    , borderStyle = solid
    , borderWidth = all 0
    , cornerRadius = all 0
    , cursor = "auto"
    , width = auto
    , height = auto
    , padding = all 0
    , spacing = all 0
    , float = Nothing
    , inline = False
    , backgroundImage = Nothing
    , shadows = []
    , transforms = []
    , filters = []
    , animations = []
    , media = []
    , properties = []
    }


{-| A `Variation` is a style where all the properties are optional.

This is used to construct animations and transitions.

Only properties that make sense in that context are present.


-}
type alias Variation =
    { visibility : Maybe Visibility
    , position : Maybe ( Float, Float )
    , cursor : Maybe String
    , width : Maybe Length
    , height : Maybe Length
    , colors : Maybe ColorPalette
    , padding : Maybe ( Float, Float, Float, Float )
    , spacing : Maybe ( Float, Float, Float, Float )
    , text : Maybe Text
    , borderStyle : Maybe BorderStyle
    , borderWidth : Maybe ( Float, Float, Float, Float )
    , cornerRadius : Maybe ( Float, Float, Float, Float )
    , backgroundImagePosition : Maybe ( Float, Float )
    , shadows : List Shadow
    , transforms : List Transform
    , filters : List Filter
    , properties : List ( String, String )
    }


{-| An empty `Variation`
-}
variation : Variation
variation =
    { visibility = Nothing
    , position = Nothing
    , colors = Nothing
    , text = Nothing
    , borderStyle = Nothing
    , borderWidth = Nothing
    , cornerRadius = Nothing
    , cursor = Nothing
    , width = Nothing
    , height = Nothing
    , padding = Nothing
    , spacing = Nothing
    , backgroundImagePosition = Nothing
    , shadows = []
    , transforms = []
    , filters = []
    , properties = []
    }


{-|
-}
type alias Element msg =
    ( List Style.Model.StyleDefinition, Html.Html msg )


{-| -}
type alias Animation =
    Style.Model.Animated Variation


{-| -}
type alias Trigger =
    Style.Model.Trigger


{-| -}
type alias MediaQuery =
    Style.Model.MediaQuery Variation


{-|
-}
type alias ColorPalette =
    { background : Color
    , text : Color
    , border : Color
    }


{-| -}
type alias BackgroundImage =
{'fraction_non_alphanumeric': 0.07646530428924321, 'fraction_numerical': 0.0022456770716370988, 'mean_word_length': 2.1814609751741383, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 14, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6560193', 'n_tokens_mistral': 5007, 'n_tokens_neox': 4765, 'n_words': 1722}