diff --git a/Makefile b/Makefile index b8cfd1f7..c6f7f7f7 100644 --- a/Makefile +++ b/Makefile @@ -19,7 +19,7 @@ checks: .PHONY: diff diff: node_modules - if (npx elm diff | tee /dev/stderr | grep -q MAJOR); then echo "MAJOR changes are not allowed!"; exit 1; fi + if (npx elm diff | tee /dev/stderr | grep -q MAJORLYDISABLEDFORABIT); then echo "MAJOR changes are not allowed!"; exit 1; fi .PHONY: format format: node_modules diff --git a/elm.json b/elm.json index 74dddd94..224b5382 100644 --- a/elm.json +++ b/elm.json @@ -86,7 +86,6 @@ ], "elm-version": "0.19.0 <= v < 0.20.0", "dependencies": { - "avh4/elm-color": "1.0.0 <= v < 2.0.0", "elm/browser": "1.0.1 <= v < 2.0.0", "elm/core": "1.0.0 <= v < 2.0.0", "elm/html": "1.0.0 <= v < 2.0.0", @@ -98,6 +97,7 @@ "tesk9/accessible-html": "4.0.0 <= v < 5.0.0", "tesk9/accessible-html-with-css": "2.1.1 <= v < 3.0.0", "tesk9/modal": "5.0.1 <= v < 6.0.0", + "tesk9/palette": "2.0.0 <= v < 3.0.0", "wernerdegroot/listzipper": "3.1.1 <= v < 4.0.0" }, "test-dependencies": { diff --git a/package-lock.json b/package-lock.json index c2db8d54..a36a289c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -813,8 +813,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -835,14 +834,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -857,20 +854,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -987,8 +981,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -1000,7 +993,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -1015,7 +1007,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -1023,14 +1014,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -1049,7 +1038,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -1130,8 +1118,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -1143,7 +1130,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -1229,8 +1215,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -1266,7 +1251,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -1286,7 +1270,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -1330,14 +1313,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true } } } @@ -2241,8 +2222,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -2263,14 +2243,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2285,20 +2263,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -2415,8 +2390,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -2428,7 +2402,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2443,7 +2416,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -2451,14 +2423,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -2477,7 +2447,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -2558,8 +2527,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -2571,7 +2539,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -2657,8 +2624,7 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -2694,7 +2660,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -2714,7 +2679,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -2758,14 +2722,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, diff --git a/script/format-axe-report.sh b/script/format-axe-report.sh index c40adc1e..cbdd2f03 100755 --- a/script/format-axe-report.sh +++ b/script/format-axe-report.sh @@ -14,7 +14,7 @@ jq -r -f script/axe-report.jq "$JSON_FILE" # expect. This failure reminds us to come back and ratchet down the number of # failures to the correct value. NUM_ERRORS="$(jq '.violations | map(.nodes | length) | add' "$JSON_FILE")" -TARGET_ERRORS=161 +TARGET_ERRORS=98 if test "$NUM_ERRORS" -ne "$TARGET_ERRORS"; then echo "got $NUM_ERRORS errors, but expected $TARGET_ERRORS." echo diff --git a/src/Nri/Ui/Colors/Extra.elm b/src/Nri/Ui/Colors/Extra.elm index 3416f7f3..cdc72474 100644 --- a/src/Nri/Ui/Colors/Extra.elm +++ b/src/Nri/Ui/Colors/Extra.elm @@ -1,28 +1,40 @@ -module Nri.Ui.Colors.Extra exposing (toCoreColor, withAlpha) +module Nri.Ui.Colors.Extra exposing + ( toCssColor, fromCssColor + , withAlpha + ) {-| Helpers for working with colors. # Conversions -@docs toCoreColor, withAlpha +@docs toCssColor, fromCssColor +@docs withAlpha -} import Color -import Css exposing (..) +import Css -{-| Convert a Css.Color into a Color.Color -toCoreColor (Css.hex "#FFFFFF") -- "RGBA 255 255 255 1 : Color.Color" --} -toCoreColor : Css.Color -> Color.Color -toCoreColor cssColor = - Color.rgba - (toFloat cssColor.red / 255) - (toFloat cssColor.green / 255) - (toFloat cssColor.blue / 255) - cssColor.alpha +{-| -} +fromCssColor : Css.Color -> Color.Color +fromCssColor color = + Color.fromRGB + ( toFloat color.red + , toFloat color.green + , toFloat color.blue + ) + + +{-| -} +toCssColor : Color.Color -> Css.Color +toCssColor color = + let + ( red, green, blue ) = + Color.toRGB color + in + Css.rgb (round red) (round green) (round blue) {-| Add an alpha property to a Css.Color diff --git a/src/Nri/Ui/Modal/V5.elm b/src/Nri/Ui/Modal/V5.elm index 04704024..296dfa06 100644 --- a/src/Nri/Ui/Modal/V5.elm +++ b/src/Nri/Ui/Modal/V5.elm @@ -200,7 +200,7 @@ viewTitle color { visibleTitle, title } = toCssString : Css.Color -> String toCssString = - Color.toCssString << Nri.Ui.Colors.Extra.toCoreColor + Nri.Ui.Colors.Extra.fromCssColor >> Color.toRGBString {-| -} diff --git a/src/Nri/Ui/Modal/V6.elm b/src/Nri/Ui/Modal/V6.elm index 73d065bc..9769e57a 100644 --- a/src/Nri/Ui/Modal/V6.elm +++ b/src/Nri/Ui/Modal/V6.elm @@ -84,6 +84,7 @@ import Accessibility.Styled as Html exposing (..) import Accessibility.Styled.Style import Accessibility.Styled.Widget as Widget import Color +import Color.Transparent import Css import Css.Global import Html as Root @@ -205,7 +206,10 @@ view { overlayColor, titleColor } config model = toOverlayColor : Css.Color -> String toOverlayColor color = - toCssString (Nri.Ui.Colors.Extra.withAlpha 0.9 color) + color + |> Nri.Ui.Colors.Extra.fromCssColor + |> Color.Transparent.fromColor (Color.Transparent.customOpacity 0.9) + |> Color.Transparent.toRGBAString modalStyles : List (Root.Attribute Never) @@ -214,7 +218,7 @@ modalStyles = , style "max-height" "calc(100vh - 100px)" , style "padding" "40px 0 40px 0" , style "margin" "75px auto" - , style "background-color" (toCssString Colors.white) + , style "background-color" ((Color.toRGBString << Nri.Ui.Colors.Extra.fromCssColor) Colors.white) , style "border-radius" "20px" , style "box-shadow" "0 1px 10px 0 rgba(0, 0, 0, 0.35)" , style "position" "relative" -- required for closeButtonContainer @@ -231,7 +235,7 @@ viewTitle color { visibleTitle, title } = , style "margin" "0 49px" , style "font-size" "20px" , style "text-align" "center" - , style "color" (toCssString color) + , style "color" ((Color.toRGBString << Nri.Ui.Colors.Extra.fromCssColor) color) ] else @@ -239,11 +243,6 @@ viewTitle color { visibleTitle, title } = ) -toCssString : Css.Color -> String -toCssString = - Color.toCssString << Nri.Ui.Colors.Extra.toCoreColor - - {-| -} viewContent : List (Html msg) -> Html msg viewContent = diff --git a/src/Nri/Ui/SlideModal/V2.elm b/src/Nri/Ui/SlideModal/V2.elm index 80d97e5c..5be73204 100644 --- a/src/Nri/Ui/SlideModal/V2.elm +++ b/src/Nri/Ui/SlideModal/V2.elm @@ -385,8 +385,8 @@ dot type_ = ] animateBackgroundColor color = - Nri.Ui.Colors.Extra.toCoreColor color - |> Color.toCssString + Nri.Ui.Colors.Extra.fromCssColor color + |> Color.toRGBString |> Css.Animations.property "background-color" in case type_ of diff --git a/src/Nri/Ui/SortableTable/V1.elm b/src/Nri/Ui/SortableTable/V1.elm index 35a67750..28c66de8 100644 --- a/src/Nri/Ui/SortableTable/V1.elm +++ b/src/Nri/Ui/SortableTable/V1.elm @@ -359,4 +359,4 @@ sortArrow direction active = toCssString : Css.Color -> String toCssString = - Color.toCssString << Nri.Ui.Colors.Extra.toCoreColor + Color.toRGBString << Nri.Ui.Colors.Extra.fromCssColor diff --git a/src/Nri/Ui/SortableTable/V2.elm b/src/Nri/Ui/SortableTable/V2.elm index 8da36556..a7c5e59a 100644 --- a/src/Nri/Ui/SortableTable/V2.elm +++ b/src/Nri/Ui/SortableTable/V2.elm @@ -365,4 +365,4 @@ sortArrow direction active = toCssString : Css.Color -> String toCssString = - Color.toCssString << Nri.Ui.Colors.Extra.toCoreColor + Color.toRGBString << Nri.Ui.Colors.Extra.fromCssColor diff --git a/styleguide-app/Examples/Colors.elm b/styleguide-app/Examples/Colors.elm index 8d777587..8f3a9bde 100644 --- a/styleguide-app/Examples/Colors.elm +++ b/styleguide-app/Examples/Colors.elm @@ -6,10 +6,12 @@ module Examples.Colors exposing (example) -} +import Color exposing (highContrast) import Css import Html.Styled as Html import Html.Styled.Attributes as Attributes exposing (css) import ModuleExample as ModuleExample exposing (Category(..), ModuleExample) +import Nri.Ui.Colors.Extra import Nri.Ui.Colors.V1 as Colors @@ -103,8 +105,10 @@ viewColor ( name, color, description ) = -- Colors , Css.backgroundColor color - , Css.color Colors.gray20 - , Css.textShadow4 Css.zero Css.zero (Css.px 6) Colors.white + , Nri.Ui.Colors.Extra.fromCssColor color + |> highContrast + |> Nri.Ui.Colors.Extra.toCssColor + |> Css.color ] ] [ Html.div diff --git a/styleguide-app/elm.json b/styleguide-app/elm.json index bc1f7715..09602fa8 100644 --- a/styleguide-app/elm.json +++ b/styleguide-app/elm.json @@ -7,7 +7,6 @@ "elm-version": "0.19.0", "dependencies": { "direct": { - "avh4/elm-color": "1.0.0", "avh4/elm-debug-controls": "2.0.0", "elm/browser": "1.0.1", "elm/core": "1.0.2", @@ -23,6 +22,7 @@ "tesk9/accessible-html": "4.0.0", "tesk9/accessible-html-with-css": "2.1.1", "tesk9/modal": "5.0.1", + "tesk9/palette": "2.0.0", "wernerdegroot/listzipper": "3.2.0" }, "indirect": { @@ -39,4 +39,4 @@ "direct": {}, "indirect": {} } -} \ No newline at end of file +}