diff --git a/examples/docs/app/Route/Blog.elm b/examples/docs/app/Route/Blog.elm index a58e3826..7492cb48 100644 --- a/examples/docs/app/Route/Blog.elm +++ b/examples/docs/app/Route/Blog.elm @@ -14,6 +14,7 @@ import Route exposing (Route) import RouteBuilder exposing (App, StatelessRoute) import Shared import Tailwind.Breakpoints as Bp +import Tailwind.Theme as Theme import Tailwind.Utilities as Tw import View exposing (View) @@ -65,7 +66,7 @@ view app shared = [ div [ css [ Tw.relative - , Tw.bg_gray_100 + , Tw.bg_color Theme.gray_100 , Tw.min_h_screen , Tw.pt_16 , Tw.pb_20 @@ -113,7 +114,7 @@ view app shared = [ Tw.text_3xl , Tw.tracking_tight , Tw.font_extrabold - , Tw.text_gray_900 + , Tw.text_color Theme.gray_900 , Bp.sm [ Tw.text_4xl ] @@ -126,7 +127,7 @@ view app shared = , Tw.max_w_2xl , Tw.mx_auto , Tw.text_xl - , Tw.text_gray_500 + , Tw.text_color Theme.gray_500 , Bp.sm [ Tw.mt_4 ] @@ -202,7 +203,7 @@ blogCard ( route_, info ) = [ div [ css [ Tw.flex_1 - , Tw.bg_white + , Tw.bg_color Theme.white , Tw.p_6 , Tw.flex , Tw.flex_col @@ -224,7 +225,7 @@ blogCard ( route_, info ) = [ css [ Tw.text_xl , Tw.font_semibold - , Tw.text_gray_900 + , Tw.text_color Theme.gray_900 ] ] [ text info.title ] @@ -232,7 +233,7 @@ blogCard ( route_, info ) = [ css [ Tw.mt_3 , Tw.text_base - , Tw.text_gray_500 + , Tw.text_color Theme.gray_500 ] ] [ text info.description ] @@ -252,7 +253,7 @@ blogCard ( route_, info ) = [ Tw.flex , Tw.space_x_1 , Tw.text_sm - , Tw.text_gray_400 + , Tw.text_color Theme.gray_400 ] ] [ time diff --git a/examples/docs/app/Route/Blog/Slug_.elm b/examples/docs/app/Route/Blog/Slug_.elm index bdfac4d7..e5ab15bd 100644 --- a/examples/docs/app/Route/Blog/Slug_.elm +++ b/examples/docs/app/Route/Blog/Slug_.elm @@ -24,6 +24,7 @@ import Shared import SiteOld import StructuredData import Tailwind.Breakpoints as Bp +import Tailwind.Theme as Theme import Tailwind.Utilities as Tw import TailwindMarkdownRenderer import View exposing (View) @@ -153,7 +154,7 @@ authorView author app = [ css [ Tw.text_sm , Tw.font_medium - , Tw.text_gray_900 + , Tw.text_color Theme.gray_900 ] ] [ span @@ -166,8 +167,8 @@ authorView author app = [ Tw.flex , Tw.space_x_1 , Tw.text_sm - , Tw.text_gray_500 - , Tw.text_gray_400 + , Tw.text_color Theme.gray_500 + , Tw.text_color Theme.gray_400 ] ] [ time diff --git a/examples/docs/app/Route/Docs/Section__.elm b/examples/docs/app/Route/Docs/Section__.elm index 98118e2e..17d062cc 100644 --- a/examples/docs/app/Route/Docs/Section__.elm +++ b/examples/docs/app/Route/Docs/Section__.elm @@ -24,6 +24,7 @@ import RouteBuilder exposing (App, StatelessRoute) import Shared import TableOfContents import Tailwind.Breakpoints as Bp +import Tailwind.Theme as Theme import Tailwind.Utilities as Tw import TailwindMarkdownRenderer import Url @@ -263,9 +264,9 @@ view app sharedModel = , css [ Tw.text_sm , Css.hover - [ Tw.text_gray_800 |> Css.important + [ Tw.text_color Theme.gray_800 |> Css.important ] - , Tw.text_gray_500 |> Css.important + , Tw.text_color Theme.gray_500 |> Css.important , Tw.flex , Tw.items_center , Tw.float_right diff --git a/examples/docs/app/Route/Index.elm b/examples/docs/app/Route/Index.elm index 15a1ed51..ee62d275 100644 --- a/examples/docs/app/Route/Index.elm +++ b/examples/docs/app/Route/Index.elm @@ -18,6 +18,7 @@ import SiteOld import Svg.Styled exposing (path, svg) import Svg.Styled.Attributes as SvgAttr import Tailwind.Breakpoints as Bp +import Tailwind.Theme as Theme import Tailwind.Utilities as Tw import View exposing (View) import View.CodeTab as CodeTab @@ -109,7 +110,7 @@ landingView = --, Tw.bg_gradient_to_b , Tw.bg_gradient_to_b - , Tw.from_gray_100 + , Tw.from_color Theme.gray_100 ] ] [] @@ -321,15 +322,15 @@ firstSection info = , Tw.items_center , Tw.justify_center , Tw.bg_gradient_to_r - , Tw.from_blue_600 - , Tw.to_blue_700 + , Tw.from_color Theme.blue_600 + , Tw.to_color Theme.blue_700 ] ] [ svg [ SvgAttr.css [ Tw.h_6 , Tw.w_6 - , Tw.text_white + , Tw.text_color Theme.white ] , SvgAttr.fill "none" , SvgAttr.viewBox "0 0 24 24" @@ -356,7 +357,7 @@ firstSection info = [ Tw.text_3xl , Tw.font_extrabold , Tw.tracking_tight - , Tw.text_gray_900 + , Tw.text_color Theme.gray_900 ] ] [ text info.heading ] @@ -364,7 +365,7 @@ firstSection info = [ css [ Tw.mt_4 , Tw.text_lg - , Tw.text_gray_500 + , Tw.text_color Theme.gray_500 ] ] [ text info.body ] @@ -379,18 +380,18 @@ firstSection info = , Tw.px_4 , Tw.py_2 , Tw.border - , Tw.border_transparent + , Tw.border_color Theme.transparent , Tw.text_base , Tw.font_medium , Tw.rounded_md , Tw.shadow_sm - , Tw.text_white + , Tw.text_color Theme.white , Tw.bg_gradient_to_r - , Tw.from_blue_600 - , Tw.to_blue_700 + , Tw.from_color Theme.blue_600 + , Tw.to_color Theme.blue_700 , Css.hover - [ Tw.from_blue_700 - , Tw.to_blue_800 + [ Tw.from_color Theme.blue_700 + , Tw.to_color Theme.blue_800 ] ] ] diff --git a/examples/docs/app/Route/Showcase.elm b/examples/docs/app/Route/Showcase.elm index ac939d9e..a4fb436a 100644 --- a/examples/docs/app/Route/Showcase.elm +++ b/examples/docs/app/Route/Showcase.elm @@ -14,6 +14,7 @@ import RouteBuilder exposing (App, StatefulRoute) import Shared import Showcase import Tailwind.Breakpoints as Bp +import Tailwind.Theme as Theme import Tailwind.Utilities as Tw import View exposing (View) @@ -151,7 +152,7 @@ showcaseItem item = , Tw.aspect_w_10 , Tw.aspect_h_7 , Tw.rounded_lg - , Tw.bg_gray_100 + , Tw.bg_color Theme.gray_100 , Tw.overflow_hidden --, Bp.focus-within @@ -211,7 +212,7 @@ showcaseItem item = , Tw.block , Tw.text_sm , Tw.font_medium - , Tw.text_gray_900 + , Tw.text_color Theme.gray_900 , Tw.truncate --, Tw.pointer_events_none @@ -226,7 +227,7 @@ showcaseItem item = [ Tw.block , Tw.text_sm , Tw.font_medium - , Tw.text_gray_500 + , Tw.text_color Theme.gray_500 --, Tw.pointer_events_none ] @@ -273,7 +274,7 @@ topSection = [ Tw.mt_4 , Tw.text_lg , Tw.leading_6 - , Tw.text_gray_500 + , Tw.text_color Theme.gray_500 ] ] [ text "Check out some projects from the elm-pages community." ] @@ -290,13 +291,13 @@ topSection = , Tw.px_5 , Tw.py_3 , Tw.border - , Tw.border_transparent - , Tw.text_white + , Tw.border_color Theme.transparent + , Tw.text_color Theme.white , Tw.font_medium , Tw.rounded_md - , Tw.bg_blue_800 + , Tw.bg_color Theme.blue_800 , Css.hover - [ Tw.bg_blue_600 + [ Tw.bg_color Theme.blue_600 ] , Bp.sm [ Tw.w_auto diff --git a/examples/docs/elm.json b/examples/docs/elm.json index eda985fc..b117f238 100644 --- a/examples/docs/elm.json +++ b/examples/docs/elm.json @@ -15,7 +15,7 @@ "danyx23/elm-mimetype": "4.0.1", "dillonkearns/elm-bcp47-language-tag": "1.0.1", "dillonkearns/elm-date-or-date-time": "2.0.0", - "dillonkearns/elm-markdown": "7.0.0", + "dillonkearns/elm-markdown": "7.0.1", "dillonkearns/elm-oembed": "1.0.0", "dillonkearns/elm-rss": "2.0.3", "dillonkearns/elm-sitemap": "1.0.2", @@ -32,23 +32,23 @@ "elm/virtual-dom": "1.0.3", "elm-community/dict-extra": "2.4.0", "elm-community/json-extra": "4.3.0", - "elm-community/list-extra": "8.6.0", + "elm-community/list-extra": "8.7.0", "jluckyiv/elm-utc-date-strings": "1.0.0", "justinmimbs/date": "4.0.1", "lamdera/codecs": "1.0.0", "lamdera/core": "1.0.0", - "matheus23/elm-default-tailwind-modules": "2.0.3", - "mdgriffith/elm-codegen": "2.0.0", + "matheus23/elm-default-tailwind-modules": "4.0.1", + "mdgriffith/elm-codegen": "2.1.0", "miniBill/elm-codec": "2.0.0", "noahzgordon/elm-color-extra": "1.0.2", "pablohirafuji/elm-syntax-highlight": "3.4.1", "robinheghan/fnv1a": "1.0.0", "robinheghan/murmur3": "1.0.0", - "rtfeldman/elm-css": "17.1.1", + "rtfeldman/elm-css": "18.0.0", "rtfeldman/elm-iso8601-date-strings": "1.1.4", "the-sett/elm-pretty-printer": "3.0.0", "the-sett/elm-syntax-dsl": "6.0.2", - "turboMaCk/non-empty-list-alias": "1.3.0", + "turboMaCk/non-empty-list-alias": "1.3.1", "vito/elm-ansi": "10.0.1" }, "indirect": { @@ -61,7 +61,8 @@ "fredcy/elm-parseint": "2.0.1", "justinmimbs/time-extra": "1.1.1", "lazamar/dict-parser": "1.0.2", - "miniBill/elm-unicode": "1.0.2", + "matheus23/elm-tailwind-modules-base": "1.0.0", + "miniBill/elm-unicode": "1.0.3", "rtfeldman/elm-hex": "1.0.0", "ryannhg/date-format": "2.3.0", "stil4m/elm-syntax": "7.2.9", diff --git a/examples/docs/src/NextPrevious.elm b/examples/docs/src/NextPrevious.elm index 48918254..babb81b7 100644 --- a/examples/docs/src/NextPrevious.elm +++ b/examples/docs/src/NextPrevious.elm @@ -6,6 +6,7 @@ import Html.Styled.Attributes as Attr exposing (css) import Route import Svg.Styled exposing (path, svg) import Svg.Styled.Attributes as SvgAttr +import Tailwind.Theme as Theme import Tailwind.Utilities as Tw @@ -84,12 +85,12 @@ linkStyle = , Tw.p_4 , Tw.neg_m_4 , Tw.no_underline |> Css.important - , Tw.text_gray_600 |> Css.important + , Tw.text_color Theme.gray_600 |> Css.important , Tw.flex , Tw.items_center , Tw.mr_2 , Css.hover - [ Tw.text_blue_700 |> Css.important + [ Tw.text_color Theme.blue_700 |> Css.important ] ] diff --git a/examples/docs/src/TableOfContents.elm b/examples/docs/src/TableOfContents.elm index bbc86775..28b749c1 100644 --- a/examples/docs/src/TableOfContents.elm +++ b/examples/docs/src/TableOfContents.elm @@ -10,6 +10,7 @@ import List.Extra import Markdown.Block as Block exposing (Block, Inline) import Markdown.Parser import Tailwind.Breakpoints as Bp +import Tailwind.Theme as Theme import Tailwind.Utilities as Tw @@ -196,7 +197,7 @@ surround showMobileMenu onDocsPage children = aside [ css [ Tw.h_screen - , Tw.bg_white + , Tw.bg_color Theme.white , Tw.flex_shrink_0 , Tw.top_0 , Tw.pt_16 @@ -226,7 +227,7 @@ surround showMobileMenu onDocsPage children = ] [ div [ css - [ Tw.border_gray_200 + [ Tw.border_color Theme.gray_200 , Tw.w_full , Tw.p_4 , Tw.pb_40 @@ -266,7 +267,7 @@ level1Entry current (Entry data children) = li [ css [ Tw.space_y_3 - , Tw.text_gray_900 + , Tw.text_color Theme.gray_900 , Tw.rounded_lg ] ] @@ -299,17 +300,17 @@ item isCurrent href body = , Tw.outline_none , if isCurrent then Css.batch - [ Tw.bg_gray_200 + [ Tw.bg_color Theme.gray_200 , Tw.font_semibold ] else Css.batch [ Css.hover - [ Tw.text_black - , Tw.bg_gray_100 + [ Tw.text_color Theme.black + , Tw.bg_color Theme.gray_100 ] - , Tw.text_gray_500 + , Tw.text_color Theme.gray_500 ] ] ] diff --git a/examples/docs/src/TailwindMarkdownRenderer.elm b/examples/docs/src/TailwindMarkdownRenderer.elm index a9869d3a..0add6c55 100644 --- a/examples/docs/src/TailwindMarkdownRenderer.elm +++ b/examples/docs/src/TailwindMarkdownRenderer.elm @@ -9,6 +9,7 @@ import Markdown.Html import Markdown.Renderer import Oembed import SyntaxHighlight +import Tailwind.Theme as Theme import Tailwind.Utilities as Tw @@ -249,7 +250,7 @@ heading { level, rawText, children } = [ Attr.class "anchor-icon" , css [ Tw.ml_2 - , Tw.text_gray_500 + , Tw.text_color Theme.gray_500 , Tw.select_none ] ] diff --git a/examples/docs/src/View/CodeTab.elm b/examples/docs/src/View/CodeTab.elm index a1e071f8..4cc271fe 100644 --- a/examples/docs/src/View/CodeTab.elm +++ b/examples/docs/src/View/CodeTab.elm @@ -4,6 +4,7 @@ import Css import Html.Styled as Html exposing (..) import Html.Styled.Attributes as Attr exposing (..) import SyntaxHighlight +import Tailwind.Theme as Theme import Tailwind.Utilities as Tw @@ -13,7 +14,7 @@ view tab = [ css [ Tw.rounded_xl , Tw.shadow_2xl - , Tw.bg_black + , Tw.bg_color Theme.black , Tw.rounded_lg , Tw.shadow_lg ] @@ -42,8 +43,8 @@ iconArea = , Tw.h_3 , Tw.border_2 , Tw.rounded_full - , Tw.border_red_500 - , Tw.bg_red_500 + , Tw.border_color Theme.red_500 + , Tw.bg_color Theme.red_500 ] ] [] @@ -53,8 +54,8 @@ iconArea = , Tw.h_3 , Tw.border_2 , Tw.rounded_full - , Tw.border_yellow_400 - , Tw.bg_yellow_400 + , Tw.border_color Theme.yellow_400 + , Tw.bg_color Theme.yellow_400 ] ] [] @@ -64,8 +65,8 @@ iconArea = , Tw.h_3 , Tw.border_2 , Tw.rounded_full - , Tw.border_green_400 - , Tw.bg_green_400 + , Tw.border_color Theme.green_400 + , Tw.bg_color Theme.green_400 ] ] [] @@ -84,7 +85,7 @@ elmCodeBlock elmCode = codeTabs : ( String, String ) -> Html msg codeTabs fileName = - ul [ css [ Tw.flex, Tw.text_sm, Tw.text_blue_200 ], Attr.style "transform" "translateY(0%) translateZ(0px);" ] + ul [ css [ Tw.flex, Tw.text_sm, Tw.text_color Theme.blue_200 ], Attr.style "transform" "translateY(0%) translateZ(0px);" ] [ codeTab 0 True fileName ] @@ -97,18 +98,18 @@ codeTab index isCurrent ( fileName, fileContents ) = [ Attr.type_ "button" , css [ Tw.border - , Tw.border_transparent + , Tw.border_color Theme.transparent , Tw.py_2 , Tw.px_4 , Tw.font_medium - , Tw.text_blue_200 + , Tw.text_color Theme.blue_200 , if isCurrent then - Tw.bg_blue_800 + Tw.bg_color Theme.blue_800 else - Tw.bg_transparent + Tw.bg_color Theme.transparent , Css.focus [ Tw.outline_none ] - , Css.hover [ Tw.text_blue_100 ] + , Css.hover [ Tw.text_color Theme.blue_100 ] ] ] [ text fileName ] diff --git a/examples/docs/src/View/Header.elm b/examples/docs/src/View/Header.elm index 758716b1..479cf666 100644 --- a/examples/docs/src/View/Header.elm +++ b/examples/docs/src/View/Header.elm @@ -8,6 +8,7 @@ import Path exposing (Path) import Svg.Styled exposing (path, svg) import Svg.Styled.Attributes as SvgAttr import Tailwind.Breakpoints as Bp +import Tailwind.Theme as Theme import Tailwind.Utilities as Tw @@ -17,7 +18,7 @@ view toggleMobileMenuMsg stars currentPath = [ css [ Tw.flex , Tw.items_center - , Tw.bg_white + , Tw.bg_color Theme.white , Tw.z_20 , Tw.sticky , Tw.top_0 @@ -25,7 +26,7 @@ view toggleMobileMenuMsg stars currentPath = , Tw.right_0 , Tw.h_16 , Tw.border_b - , Tw.border_gray_200 + , Tw.border_color Theme.gray_200 , Tw.px_6 --, Bp.dark @@ -48,7 +49,7 @@ view toggleMobileMenuMsg stars currentPath = [ a [ css [ Tw.no_underline - , Tw.text_current + , Tw.text_color Theme.current , Tw.flex , Tw.items_center , Css.hover @@ -90,21 +91,21 @@ view toggleMobileMenuMsg stars currentPath = , Tw.items_center , Tw.px_1 , Tw.border - , Tw.border_gray_300 + , Tw.border_color Theme.gray_300 , Tw.shadow_sm , Tw.text_sm , Tw.rounded_md - , Tw.text_gray_700 - , Tw.bg_white + , Tw.text_color Theme.gray_700 + , Tw.bg_color Theme.white , Bp.md [ Tw.hidden ] , Css.focus [ Tw.outline_none , Tw.ring_2 , Tw.ring_offset_2 - , Tw.ring_blue_500 + , Tw.ring_color Theme.blue_500 ] , Css.hover - [ Tw.bg_gray_50 + [ Tw.bg_color Theme.gray_50 ] ] ] @@ -156,17 +157,17 @@ linkInner currentPagePath linkTo name = , Tw.p_2 , if isCurrentPath then Css.batch - [ Tw.text_blue_600 + [ Tw.text_color Theme.blue_600 , Css.hover - [ Tw.text_blue_700 + [ Tw.text_color Theme.blue_700 ] ] else Css.batch - [ Tw.text_gray_600 + [ Tw.text_color Theme.gray_600 , Css.hover - [ Tw.text_gray_900 + [ Tw.text_color Theme.gray_900 ] ] ]