NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-11-24 08:53:33 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #297 from NoRedInk/tessa/use-color-library

Browse Source 
Use palette rather than color
This commit is contained in:
Brooke 2019-08-14 10:55:57 -07:00 committed by GitHub
commit 4e9f9774b9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 70 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Makefile
View File

@ -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

2
elm.json
View File

@ -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": {

82
package-lock.json generated
View File

@ -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
}
}
},

2
script/format-axe-report.sh
View File

@ -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

38
src/Nri/Ui/Colors/Extra.elm
View File

@ -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

2
src/Nri/Ui/Modal/V5.elm
View File

@ -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
{-| -}

15
src/Nri/Ui/Modal/V6.elm
View File

@ -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 =

4
src/Nri/Ui/SlideModal/V2.elm
View File

@ -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

2
src/Nri/Ui/SortableTable/V1.elm
View File

@ -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

2
src/Nri/Ui/SortableTable/V2.elm
View File

@ -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

8
styleguide-app/Examples/Colors.elm
View File

@ -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

4
styleguide-app/elm.json
View File

@ -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": {}
}
}
}