From 642f94aa87a8ff791ef15f8299638696199b2799 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Tue, 14 Nov 2023 16:18:12 -0600 Subject: [PATCH 1/6] docs(building-blocks): add wcag tool to stories --- packages/building-blocks/package.json | 1 + .../src/stories/ColorPalette.tsx | 56 ----- .../stories/color-stories/ColorPalette.tsx | 231 ++++++++++++++++++ .../color-stories/ColorPickerInput.story.tsx | 81 ++++++ .../SelectedColorOptions.story.tsx | 108 ++++++++ .../color-stories/WCAGChecker.story.tsx | 97 ++++++++ .../src/stories/index.story.tsx | 8 +- packages/building-blocks/src/types/hue.ts | 3 + yarn.lock | 36 +++ 9 files changed, 561 insertions(+), 60 deletions(-) delete mode 100644 packages/building-blocks/src/stories/ColorPalette.tsx create mode 100644 packages/building-blocks/src/stories/color-stories/ColorPalette.tsx create mode 100644 packages/building-blocks/src/stories/color-stories/ColorPickerInput.story.tsx create mode 100644 packages/building-blocks/src/stories/color-stories/SelectedColorOptions.story.tsx create mode 100644 packages/building-blocks/src/stories/color-stories/WCAGChecker.story.tsx create mode 100644 packages/building-blocks/src/types/hue.ts diff --git a/packages/building-blocks/package.json b/packages/building-blocks/package.json index 32331ea1b..106e90216 100644 --- a/packages/building-blocks/package.json +++ b/packages/building-blocks/package.json @@ -9,6 +9,7 @@ "module": "esm/index.js", "private": false, "dependencies": { + "color-contrast": "^1.0.0", "mapbox-gl": "npm:empty-npm-package@1.0.0", "maplibre-gl": "^2.1.9", "react-map-gl": "^7.0.15", diff --git a/packages/building-blocks/src/stories/ColorPalette.tsx b/packages/building-blocks/src/stories/ColorPalette.tsx deleted file mode 100644 index 7c8490b57..000000000 --- a/packages/building-blocks/src/stories/ColorPalette.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React from "react"; - -import styled from "styled-components"; -import { getMostReadableTextColor } from "@opentripplanner/core-utils/lib/route"; - -export interface Hue { - [key: number]: string; -} - -interface Props { - color: Hue; -} - -const ColorBlock = styled.div<{ hex: string }>` - align-items: center; - background-color: ${props => props.hex}; - color: ${props => getMostReadableTextColor(props.hex, "#ffffff")}; - text-shadow: ${props => - getMostReadableTextColor(props.hex, "#ffffff") === "#ffffff" - ? "1px 1px 2px black" - : ""}; - display: flex; - font-family: Arial, Helvetica, sans-serif; - height: 40px; - justify-content: space-between; - margin: 0; - padding: 10px; - width: 300px; - - &:first-of-type { - border-radius: 8px 8px 0 0; - } - &:last-of-type { - border-radius: 0 0 8px 8px; - } -`; - -const ColorPalette = ({ color }: Props): JSX.Element => { - const colorArray: Array = Object.entries(color); - - return ( - <> - {colorArray.map( - (hue: Hue): JSX.Element => { - return ( - -

{hue[0]}

-

{hue[1]}

- - ); - } - )} - - ); -}; -export default ColorPalette; diff --git a/packages/building-blocks/src/stories/color-stories/ColorPalette.tsx b/packages/building-blocks/src/stories/color-stories/ColorPalette.tsx new file mode 100644 index 000000000..325146abc --- /dev/null +++ b/packages/building-blocks/src/stories/color-stories/ColorPalette.tsx @@ -0,0 +1,231 @@ +import React, { useEffect, useState } from "react"; + +import styled, { css } from "styled-components"; +import { getMostReadableTextColor } from "@opentripplanner/core-utils/lib/route"; +import WcagChecker from "./WCAGChecker.story"; +import ColorPickerInput from "./ColorPickerInput.story"; +import blue from "../../colors/blue"; +import grey from "../../colors/grey"; +import SelectedColorOptions from "./SelectedColorOptions.story"; +import { Hue } from "../../types/hue"; + +interface Props { + color: Hue; + label: string; +} + +export const borderStyles = css` + border: 1px solid ${grey[100]}; + border-radius: 7px; +`; + +const Info = styled.div` + background-color: ${blue[50]}; + line-height: 1.5; + padding: 10px; + border-radius: 5px; + margin-bottom: 15px; + text-align: center; + + p { + margin: 0; + } + + a { + color: ${blue[700]}; + font-weight: 700; + text-decoration: none; + + &:hover { + color: ${blue[900]}; + } + } +`; + +const ColorContainer = styled.div` + display: flex; + gap: 15px; + font-family: Arial, Helvetica, sans-serif; + margin: 0 auto; +`; + +const ColorPaletteContainer = styled.div``; + +const ColorBlock = styled.div<{ hex: string }>` + align-items: center; + background-color: ${props => props.hex}; + color: ${props => getMostReadableTextColor(props.hex, "#ffffff")}; + text-shadow: ${props => + getMostReadableTextColor(props.hex, "#ffffff") === "#ffffff" + ? "1px 1px 2px black" + : ""}; + display: flex; + height: 40px; + justify-content: space-between; + margin: 0; + padding: 10px; + transition: all 0.2s ease-in; + width: 300px; + + &:first-of-type { + border-radius: 8px 8px 0 0; + } + &:last-of-type { + border-radius: 0 0 8px 8px; + } + + &:hover { + transform: scale(1.012); + transition: all 0.2s ease-in; + cursor: pointer; + } +`; + +const ColorPickForm = styled.form` + display: flex; + gap: 15px; + margin-bottom: 15px; +`; + +const WCAGContainer = styled.div` + max-width: 425px; +`; + +const ColorPalette = ({ color, label }: Props): JSX.Element => { + const colorArray: Array = Object.entries(color); + const [selectedColor, setSelectedColor] = useState(colorArray[0]); + const [foregroundColor, setForegroundColor] = useState(colorArray[0][1]); + const [foregroundColorInput, setForegroundColorInput] = useState( + colorArray[0][1] + ); + const [backgroundColorInput, setBackgroundColorInput] = useState("#FFFFFF"); + const [backgroundColor, setBackgroundColor] = useState("#FFFFFF"); + const [foregroundError, setForegroundError] = useState(false); + const [backgroundError, setBackgroundError] = useState(false); + + const REX_EXP = /(^#[0-9A-F]{6}$)/i; + + const isValidHexCode = code => { + let hexcode = code; + if (!code.startsWith("#")) hexcode = `#${code}`; + return REX_EXP.test(hexcode); + }; + + const backgroundHandleChange = event => { + const value = event.target.value; + setBackgroundColorInput(value); + }; + + const foregroundHandleChange = event => { + const value = event.target.value; + setForegroundColorInput(value); + }; + const hexArray = colorArray.map(x => x[1]); + const foregroundColorIsInPalette = () => { + if (foregroundColorInput && hexArray.includes(foregroundColorInput)) { + return `${label} ${ + colorArray[hexArray.indexOf(foregroundColorInput)][0] + }`; + } + return null; + }; + const backgroundColorIsInPalette = () => { + if (backgroundColorInput && hexArray.includes(backgroundColorInput)) { + return `${label} ${ + colorArray[hexArray.indexOf(backgroundColorInput)][0] + }`; + } + return null; + }; + const selectedColorReset = + selectedColor && + foregroundColorInput !== selectedColor[1] && + backgroundColorInput !== selectedColor[1]; + + useEffect(() => { + if (selectedColorReset) { + setSelectedColor(undefined); + } + if (!isValidHexCode(foregroundColorInput)) { + setForegroundError(true); + } else { + setForegroundError(false); + setForegroundColor(foregroundColorInput); + } + }, [foregroundColorInput]); + + useEffect(() => { + if (selectedColorReset) { + setSelectedColor(undefined); + } + if (!isValidHexCode(backgroundColorInput)) { + setBackgroundError(true); + } else { + setBackgroundError(false); + setBackgroundColor(backgroundColorInput); + } + }, [backgroundColorInput]); + + return ( + + + {colorArray.map( + (hue: Hue): JSX.Element => { + return ( + setSelectedColor(hue)} + > +

{hue[0]}

+

{hue[1]}

+ + ); + } + )} + + + + +

+ Select a color variable from the palette to check it against WCAG + contrast requirements.{" "} + + See more + {" "} +

+ + + + + + + + + + ); +}; +export default ColorPalette; diff --git a/packages/building-blocks/src/stories/color-stories/ColorPickerInput.story.tsx b/packages/building-blocks/src/stories/color-stories/ColorPickerInput.story.tsx new file mode 100644 index 000000000..6521c1d7c --- /dev/null +++ b/packages/building-blocks/src/stories/color-stories/ColorPickerInput.story.tsx @@ -0,0 +1,81 @@ +import React, { ChangeEventHandler, ReactElement } from "react"; +import styled from "styled-components"; +import grey from "../../colors/grey"; +import red from "../../colors/red"; + +interface Props { + handleChange: ChangeEventHandler; + colorInPalette: string | null; + inputLabel: string; + colorInput: string; + error: boolean; +} + +const ColorPicker = styled.div` + position: relative; + width: 50%; + label span { + color: ${grey[700]}; + font-size: 12px; + background-color: white; + z-index: 10; + margin-left: 8px; + padding: 0 7px; + } +`; + +const InputError = styled.div` + margin: 5px 0 0 8px; + color: ${red[800]}; + font-size: 12px; +`; + +const InputContainer = styled.div` + border: 1px solid ${grey[100]}; + border-radius: 7px; + display: flex; + align-items: center; + padding: 5px; + margin-top: -8px; + + input { + border: none; + background: transparent; + } + + input[type="text"] { + height: 27px; + padding: 0 5px; + min-width: 70px; + width: 80%; + } +`; + +const ColorPickerInput = ({ + colorInPalette, + handleChange, + colorInput, + error, + inputLabel +}: Props): ReactElement => { + return ( + + + {error ? "Please enter a valid hex code" : ""} + + ); +}; + +export default ColorPickerInput; diff --git a/packages/building-blocks/src/stories/color-stories/SelectedColorOptions.story.tsx b/packages/building-blocks/src/stories/color-stories/SelectedColorOptions.story.tsx new file mode 100644 index 000000000..3cf41e350 --- /dev/null +++ b/packages/building-blocks/src/stories/color-stories/SelectedColorOptions.story.tsx @@ -0,0 +1,108 @@ +import React, { Dispatch, ReactElement, SetStateAction } from "react"; +import styled from "styled-components"; +import grey from "../../colors/grey"; +import { Hue } from "../../types/hue"; + +interface Props { + selectedColorLabel: string; + selectedColor: Hue; + setForegroundColor: Dispatch>; + setBackgroundColor: Dispatch>; + setForegroundColorInput: Dispatch>; + setBackgroundColorInput: Dispatch>; +} + +const SelectedColorContainer = styled.div` + border: 1px solid ${grey[100]}; + border-radius: 7px; + justify-content: center; + padding: 10px 15px; + margin-bottom: 15px; +`; + +const SelectedColor = styled.div<{ color: string }>` + width: 100xpx; + height: 50px; + background-color: ${props => props.color}; + border-radius: 5px 5px 0 0; +`; + +const SelectedColorSwatch = styled.div` + border: 1px solid grey; + border-radius: 5px; + min-width 85px; + + p { + padding: 10px; + margin: 0; + } +`; + +const SelectedColorControls = styled.div` + display: flex; + align-items: center; + justify-content: center; + gap: 10px; +`; + +const ButtonContainer = styled.div` + display: flex; + flex-direction: column; + gap: 3px; + button { + background: #fff; + border: 1px solid ${grey[600]}; + border-radius: 5px; + padding: 5px 10px; + + &:hover { + background-color: ${grey[50]}; + cursor: pointer; + } + } +`; + +const SelectedColorOptions = ({ + selectedColorLabel, + selectedColor, + setForegroundColor, + setBackgroundColor, + setForegroundColorInput, + setBackgroundColorInput +}: Props): ReactElement => { + const handleSetForegroundColor = () => { + setForegroundColor(selectedColor[1]); + setForegroundColorInput(selectedColor[1]); + }; + const handleSetBackgroundColor = () => { + setBackgroundColor(selectedColor[1]); + setBackgroundColorInput(selectedColor[1]); + }; + return ( + + {selectedColor ? ( + + + +

+ {selectedColorLabel} {selectedColor[0]} +

+ + + + + + + + ) : ( + "Please choose a color from the left" + )} + + ); +}; + +export default SelectedColorOptions; diff --git a/packages/building-blocks/src/stories/color-stories/WCAGChecker.story.tsx b/packages/building-blocks/src/stories/color-stories/WCAGChecker.story.tsx new file mode 100644 index 000000000..c37c9b2d0 --- /dev/null +++ b/packages/building-blocks/src/stories/color-stories/WCAGChecker.story.tsx @@ -0,0 +1,97 @@ +import React from "react"; +import colorContrast from "color-contrast"; +import styled from "styled-components"; +import grey from "../../colors/grey"; +import red from "../../colors/red"; + +interface Props { + hue: string; + background: string; +} + +const ScoreCard = styled.div` + border: 1px solid ${grey[100]}; + border-radius: 7px; + padding: 10px 15px; +`; + +const ScoreCardHeader = styled.p` + font-size: 16px; + font-weight: bolder; +`; + +const ScoreBlock = styled.div` + align-items: center; + display: flex; + gap: 5px; + + p { + margin: 0; + } +`; + +const ScorePill = styled.div` + color: white; + display: flex; + font-size: 13px; + align-items: center; + border-radius: 20px; + padding: 5px 15px; + margin: 3px 0; +`; + +const PassContainer = styled(ScorePill)` + background-color: green; +`; + +const FailContainer = styled(ScorePill)` + background-color: ${red[800]}; +`; + +const pass = Pass; +const fail = Fail; + +// const wcagPassOrFail = () => {}; + +const WcagChecker = ({ hue, background }: Props): any => { + const wcagScore = colorContrast(hue, background); + + const returnPassFail = (benchmark: number) => { + const sufficientContrast = wcagScore >= benchmark; + return sufficientContrast ? pass : fail; + }; + + return ( + + Normal Text + +

WCAG AA:

+

{returnPassFail(4.1)}

+ + +

WCAG AAA:

+

{returnPassFail(7.1)}

+ + + Large Text (at least 18 point or 14 point bold) + + +

WCAG AA:

+

{returnPassFail(3.1)}

+ + +

WCAG AAA:

+

{returnPassFail(4.5)}

+ + + Graphical Objects and User Interface Components + + +

WCAG AA:

+

{returnPassFail(3)}

+ + + ); +}; + +export default WcagChecker; diff --git a/packages/building-blocks/src/stories/index.story.tsx b/packages/building-blocks/src/stories/index.story.tsx index 642bc7835..274caff3d 100644 --- a/packages/building-blocks/src/stories/index.story.tsx +++ b/packages/building-blocks/src/stories/index.story.tsx @@ -1,5 +1,5 @@ import React, { ReactElement } from "react"; -import ColorPalette from "./ColorPalette"; +import ColorPalette from "./color-stories/ColorPalette"; import grey from "../colors/grey"; import blue from "../colors/blue"; @@ -10,13 +10,13 @@ export default { }; export const Grey = (): ReactElement => { - return ; + return ; }; export const Blue = (): ReactElement => { - return ; + return ; }; export const Red = (): ReactElement => { - return ; + return ; }; diff --git a/packages/building-blocks/src/types/hue.ts b/packages/building-blocks/src/types/hue.ts new file mode 100644 index 000000000..14b85af21 --- /dev/null +++ b/packages/building-blocks/src/types/hue.ts @@ -0,0 +1,3 @@ +export interface Hue { + [key: number]: string; +} diff --git a/yarn.lock b/yarn.lock index 917932aaa..2e2aaa3d0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3241,6 +3241,25 @@ resolved "https://registry.yarnpkg.com/@open-draft/until/-/until-1.0.3.tgz#db9cc719191a62e7d9200f6e7bab21c5b848adca" integrity sha512-Aq58f5HiWdyDlFffbbSjAlv596h/cOnt2DO1w3DOC7OJ5EHs0hd/nycJfiu9RJbT6Yk6F1knnRRXNSpxoIVZ9Q== +"@opentripplanner/core-utils@9.0.3": + version "9.0.3" + resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-9.0.3.tgz#c1ebdcc3ad5999fb28427102c9be7d7268f6bd37" + integrity sha512-8P3Bi41jF7z18P/soo6lEw+nrqarsyGMAxivsF1/kMJdRo4wnakp0zcrVZjDXTxoR6LPtj6Kkuxv3JQFO9jKiw== + dependencies: + "@conveyal/lonlat" "^1.4.1" + "@mapbox/polyline" "^1.1.0" + "@opentripplanner/geocoder" "^1.4.1" + "@styled-icons/foundation" "^10.34.0" + "@turf/along" "^6.0.1" + bowser "^2.7.0" + chroma-js "^2.4.2" + date-fns "^2.28.0" + date-fns-tz "^1.2.2" + graphql "^16.6.0" + lodash.clonedeep "^4.5.0" + lodash.isequal "^4.5.0" + qs "^6.9.1" + "@opentripplanner/types@7.0.0-alpha.2": version "7.0.0-alpha.2" resolved "https://registry.yarnpkg.com/@opentripplanner/types/-/types-7.0.0-alpha.2.tgz#d10c69f99b2da6d1e80ab5989520bde8e558627b" @@ -6564,6 +6583,11 @@ bottleneck@^2.18.1: resolved "https://registry.yarnpkg.com/bottleneck/-/bottleneck-2.19.5.tgz#5df0b90f59fd47656ebe63c78a98419205cadd91" integrity sha512-VHiNCbI1lKdl44tGrhNfU3lup0Tj/ZBMJB5/2ZbNXRCPuRCO7ed2mgcK4r17y+KB2EfuYuRaVlwNbAeaWGSpbw== +bowser@^2.7.0: + version "2.11.0" + resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f" + integrity sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA== + boxen@^5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/boxen/-/boxen-5.1.2.tgz#788cb686fc83c1f486dfa8a40c68fc2b831d2b50" @@ -7320,6 +7344,13 @@ collection-visit@^1.0.0: map-visit "^1.0.0" object-visit "^1.0.0" +color-contrast@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/color-contrast/-/color-contrast-1.0.0.tgz#8c29624a42d2857627c9b514773a69f72f3c93f0" + integrity sha512-KmBPaZwdpVE84EZjvKiJjMZj8U7ZBEDOJ8W90IgjIZRjqdhMf3rfwnpW1lM2GHuGz3Mk/0SYpOvf31AwEh1H6A== + dependencies: + onecolor "^3.1.0" + color-convert@^1.9.0: version "1.9.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" @@ -14404,6 +14435,11 @@ once@^1.3.0, once@^1.3.1, once@^1.4.0: dependencies: wrappy "1" +onecolor@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/onecolor/-/onecolor-3.1.0.tgz#b72522270a49569ac20d244b3cd40fe157fda4d2" + integrity sha512-YZSypViXzu3ul5LMu/m6XjJ9ol8qAy9S2VjHl5E6UlhUH1KGKWabyEJifn0Jjpw23bYDzC2ucKMPGiH5kfwSGQ== + onetime@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4" From 6fc010701760c8d65dbdb956218d7d33350d428d Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Tue, 14 Nov 2023 16:25:57 -0600 Subject: [PATCH 2/6] fix(building-blocks): stop exporting story to npm --- .../color-stories/{ColorPalette.tsx => ColorPalette.story.tsx} | 0 packages/building-blocks/src/stories/index.story.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename packages/building-blocks/src/stories/color-stories/{ColorPalette.tsx => ColorPalette.story.tsx} (100%) diff --git a/packages/building-blocks/src/stories/color-stories/ColorPalette.tsx b/packages/building-blocks/src/stories/color-stories/ColorPalette.story.tsx similarity index 100% rename from packages/building-blocks/src/stories/color-stories/ColorPalette.tsx rename to packages/building-blocks/src/stories/color-stories/ColorPalette.story.tsx diff --git a/packages/building-blocks/src/stories/index.story.tsx b/packages/building-blocks/src/stories/index.story.tsx index 274caff3d..3f6410e96 100644 --- a/packages/building-blocks/src/stories/index.story.tsx +++ b/packages/building-blocks/src/stories/index.story.tsx @@ -1,5 +1,5 @@ import React, { ReactElement } from "react"; -import ColorPalette from "./color-stories/ColorPalette"; +import ColorPalette from "./color-stories/ColorPalette.story"; import grey from "../colors/grey"; import blue from "../colors/blue"; From 41df6d8083dac98f17c18fd6bf59275bfc4b8b79 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Wed, 29 Nov 2023 18:43:11 -0600 Subject: [PATCH 3/6] replace color contrast package --- packages/building-blocks/package.json | 2 +- .../color-stories/WCAGChecker.story.tsx | 4 +-- yarn.lock | 28 ++++--------------- 3 files changed, 8 insertions(+), 26 deletions(-) diff --git a/packages/building-blocks/package.json b/packages/building-blocks/package.json index 106e90216..507e17a3a 100644 --- a/packages/building-blocks/package.json +++ b/packages/building-blocks/package.json @@ -9,7 +9,7 @@ "module": "esm/index.js", "private": false, "dependencies": { - "color-contrast": "^1.0.0", + "chroma-js": "^2.4.2", "mapbox-gl": "npm:empty-npm-package@1.0.0", "maplibre-gl": "^2.1.9", "react-map-gl": "^7.0.15", diff --git a/packages/building-blocks/src/stories/color-stories/WCAGChecker.story.tsx b/packages/building-blocks/src/stories/color-stories/WCAGChecker.story.tsx index c37c9b2d0..5aa482196 100644 --- a/packages/building-blocks/src/stories/color-stories/WCAGChecker.story.tsx +++ b/packages/building-blocks/src/stories/color-stories/WCAGChecker.story.tsx @@ -1,5 +1,5 @@ import React from "react"; -import colorContrast from "color-contrast"; +import chroma from "chroma-js"; import styled from "styled-components"; import grey from "../../colors/grey"; import red from "../../colors/red"; @@ -54,7 +54,7 @@ const fail = Fail; // const wcagPassOrFail = () => {}; const WcagChecker = ({ hue, background }: Props): any => { - const wcagScore = colorContrast(hue, background); + const wcagScore = chroma.contrast(hue, background); const returnPassFail = (benchmark: number) => { const sufficientContrast = wcagScore >= benchmark; diff --git a/yarn.lock b/yarn.lock index 2e2aaa3d0..cde8ef964 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3241,17 +3241,16 @@ resolved "https://registry.yarnpkg.com/@open-draft/until/-/until-1.0.3.tgz#db9cc719191a62e7d9200f6e7bab21c5b848adca" integrity sha512-Aq58f5HiWdyDlFffbbSjAlv596h/cOnt2DO1w3DOC7OJ5EHs0hd/nycJfiu9RJbT6Yk6F1knnRRXNSpxoIVZ9Q== -"@opentripplanner/core-utils@9.0.3": - version "9.0.3" - resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-9.0.3.tgz#c1ebdcc3ad5999fb28427102c9be7d7268f6bd37" - integrity sha512-8P3Bi41jF7z18P/soo6lEw+nrqarsyGMAxivsF1/kMJdRo4wnakp0zcrVZjDXTxoR6LPtj6Kkuxv3JQFO9jKiw== +"@opentripplanner/core-utils@11.1.2": + version "11.1.2" + resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-11.1.2.tgz#a99d1fa4fb1f587d58fae8fcfd70a3bfe4eed424" + integrity sha512-Rn1tBm5F+nt/A4/0cpq6cyNTprSsxfFslujMoZ4P4r6fZ7YTx0d25di+MZ/CZgSlCzHJIiGAfi8DsfJ7yStcTA== dependencies: "@conveyal/lonlat" "^1.4.1" "@mapbox/polyline" "^1.1.0" - "@opentripplanner/geocoder" "^1.4.1" + "@opentripplanner/geocoder" "^1.4.2" "@styled-icons/foundation" "^10.34.0" "@turf/along" "^6.0.1" - bowser "^2.7.0" chroma-js "^2.4.2" date-fns "^2.28.0" date-fns-tz "^1.2.2" @@ -6583,11 +6582,6 @@ bottleneck@^2.18.1: resolved "https://registry.yarnpkg.com/bottleneck/-/bottleneck-2.19.5.tgz#5df0b90f59fd47656ebe63c78a98419205cadd91" integrity sha512-VHiNCbI1lKdl44tGrhNfU3lup0Tj/ZBMJB5/2ZbNXRCPuRCO7ed2mgcK4r17y+KB2EfuYuRaVlwNbAeaWGSpbw== -bowser@^2.7.0: - version "2.11.0" - resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f" - integrity sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA== - boxen@^5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/boxen/-/boxen-5.1.2.tgz#788cb686fc83c1f486dfa8a40c68fc2b831d2b50" @@ -7344,13 +7338,6 @@ collection-visit@^1.0.0: map-visit "^1.0.0" object-visit "^1.0.0" -color-contrast@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/color-contrast/-/color-contrast-1.0.0.tgz#8c29624a42d2857627c9b514773a69f72f3c93f0" - integrity sha512-KmBPaZwdpVE84EZjvKiJjMZj8U7ZBEDOJ8W90IgjIZRjqdhMf3rfwnpW1lM2GHuGz3Mk/0SYpOvf31AwEh1H6A== - dependencies: - onecolor "^3.1.0" - color-convert@^1.9.0: version "1.9.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" @@ -14435,11 +14422,6 @@ once@^1.3.0, once@^1.3.1, once@^1.4.0: dependencies: wrappy "1" -onecolor@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/onecolor/-/onecolor-3.1.0.tgz#b72522270a49569ac20d244b3cd40fe157fda4d2" - integrity sha512-YZSypViXzu3ul5LMu/m6XjJ9ol8qAy9S2VjHl5E6UlhUH1KGKWabyEJifn0Jjpw23bYDzC2ucKMPGiH5kfwSGQ== - onetime@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4" From f062d8817034158341e700755bcc8ef738e6bda7 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Thu, 30 Nov 2023 09:15:44 -0600 Subject: [PATCH 4/6] clean up --- packages/building-blocks/package.json | 3 ++- .../src/stories/color-stories/WCAGChecker.story.tsx | 2 -- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/building-blocks/package.json b/packages/building-blocks/package.json index fd19b6e14..d0772a4ca 100644 --- a/packages/building-blocks/package.json +++ b/packages/building-blocks/package.json @@ -9,7 +9,8 @@ "module": "esm/index.js", "private": false, "dependencies": { - "chroma-js": "^2.4.2", + "chroma-js": "^2.4.2" + }, "devDependencies": { "@opentripplanner/types": "^6.2.1", "@opentripplanner/core-utils": "^11.1.3" diff --git a/packages/building-blocks/src/stories/color-stories/WCAGChecker.story.tsx b/packages/building-blocks/src/stories/color-stories/WCAGChecker.story.tsx index 5aa482196..1117eb821 100644 --- a/packages/building-blocks/src/stories/color-stories/WCAGChecker.story.tsx +++ b/packages/building-blocks/src/stories/color-stories/WCAGChecker.story.tsx @@ -51,8 +51,6 @@ const FailContainer = styled(ScorePill)` const pass = Pass; const fail = Fail; -// const wcagPassOrFail = () => {}; - const WcagChecker = ({ hue, background }: Props): any => { const wcagScore = chroma.contrast(hue, background); From 9f0143e2a472a6218799014b87a59269b5857990 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Thu, 30 Nov 2023 09:32:23 -0600 Subject: [PATCH 5/6] fix linting errors --- .../src/stories/color-stories/SelectedColorOptions.story.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/building-blocks/src/stories/color-stories/SelectedColorOptions.story.tsx b/packages/building-blocks/src/stories/color-stories/SelectedColorOptions.story.tsx index 3cf41e350..bc61599b3 100644 --- a/packages/building-blocks/src/stories/color-stories/SelectedColorOptions.story.tsx +++ b/packages/building-blocks/src/stories/color-stories/SelectedColorOptions.story.tsx @@ -21,7 +21,7 @@ const SelectedColorContainer = styled.div` `; const SelectedColor = styled.div<{ color: string }>` - width: 100xpx; + width: 100px; height: 50px; background-color: ${props => props.color}; border-radius: 5px 5px 0 0; @@ -30,7 +30,7 @@ const SelectedColor = styled.div<{ color: string }>` const SelectedColorSwatch = styled.div` border: 1px solid grey; border-radius: 5px; - min-width 85px; + min-width: 85px; p { padding: 10px; From c022fd59434bfe6ed68d53904d4d968dc5e8eb50 Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Thu, 30 Nov 2023 09:53:28 -0600 Subject: [PATCH 6/6] test: update snapshots --- __snapshots__/storybook.test.ts.snap | 2558 +++++++++++++++++++++----- 1 file changed, 2086 insertions(+), 472 deletions(-) diff --git a/__snapshots__/storybook.test.ts.snap b/__snapshots__/storybook.test.ts.snap index 91c269215..fa7c40510 100644 --- a/__snapshots__/storybook.test.ts.snap +++ b/__snapshots__/storybook.test.ts.snap @@ -26,24 +26,219 @@ exports[`Storyshots Building-Blocks/Colors Blue 1`] = ` "900": "#004686", } } + label="Blue" /> `; exports[`Storyshots Building-Blocks/Colors Blue 2`] = ` -Array [ - .c0 { +.c22 { + border: 1px solid #D9D9D9; + border-radius: 7px; + padding: 10px 15px; +} + +.c23 { + font-size: 16px; + font-weight: bolder; +} + +.c24 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + gap: 5px; +} + +.c24 p { + margin: 0; +} + +.c25 { + color: white; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 13px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 20px; + padding: 5px 15px; + margin: 3px 0; +} + +.c26 { + background-color: #B72620; +} + +.c19 { + position: relative; + width: 50%; +} + +.c19 label span { + color: #666666; + font-size: 12px; + background-color: white; + z-index: 10; + margin-left: 8px; + padding: 0 7px; +} + +.c21 { + margin: 5px 0 0 8px; + color: #B72620; + font-size: 12px; +} + +.c20 { + border: 1px solid #D9D9D9; + border-radius: 7px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; + padding: 5px; + margin-top: -8px; +} + +.c20 input { + border: none; + background: transparent; +} + +.c20 input[type="text"] { + height: 27px; + padding: 0 5px; + min-width: 70px; + width: 80%; +} + +.c13 { + border: 1px solid #D9D9D9; + border-radius: 7px; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding: 10px 15px; + margin-bottom: 15px; +} + +.c16 { + width: 100px; + height: 50px; background-color: #E5ECF3; - color: #000000; + border-radius: 5px 5px 0 0; +} + +.c15 { + border: 1px solid grey; + border-radius: 5px; + min-width: 85px; +} + +.c15 p { + padding: 10px; + margin: 0; +} + +.c14 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + gap: 10px; +} + +.c17 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + gap: 3px; +} + +.c17 button { + background: #fff; + border: 1px solid #797979; + border-radius: 5px; + padding: 5px 10px; +} + +.c17 button:hover { + background-color: #ECECEC; + cursor: pointer; +} + +.c12 { + background-color: #E5ECF3; + line-height: 1.5; + padding: 10px; + border-radius: 5px; + margin-bottom: 15px; + text-align: center; +} + +.c12 p { + margin: 0; +} + +.c12 a { + color: #336B9E; + font-weight: 700; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c12 a:hover { + color: #004686; +} + +.c0 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; + gap: 15px; font-family: Arial,Helvetica,sans-serif; + margin: 0 auto; +} + +.c1 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #E5ECF3; + color: #000000; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -51,28 +246,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c1:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c1:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 50 -

-

- #E5ECF3 -

-
, - .c0 { +.c1:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c2 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -83,7 +279,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -91,28 +286,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c2:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c2:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 100 -

-

- #CCDAE7 -

-
, - .c0 { +.c2:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c3 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -123,7 +319,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -131,28 +326,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c3:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c3:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 200 -

-

- #B2C7DB -

-
, - .c0 { +.c3:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c4 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -163,7 +359,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -171,28 +366,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c4:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c4:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 300 -

-

- #99B5CF -

-
, - .c0 { +.c4:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c5 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -204,7 +400,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -212,28 +407,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c5:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c5:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 400 -

-

- #7FA2C2 -

-
, - .c0 { +.c5:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c6 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -245,7 +441,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -253,28 +448,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c6:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c6:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 500 -

-

- #6690B7 -

-
, - .c0 { +.c6:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c7 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -286,7 +482,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -294,28 +489,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c7:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c7:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 600 -

-

- #4D7EAB -

-
, - .c0 { +.c7:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c8 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -327,7 +523,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -335,28 +530,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c8:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c8:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 700 -

-

- #336B9E -

-
, - .c0 { +.c8:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c9 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -368,7 +564,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -376,28 +571,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c9:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c9:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 800 -

-

- #1A5992 -

-
, - .c0 { +.c9:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c10 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -409,7 +605,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -417,28 +612,375 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c10:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c10:last-of-type { border-radius: 0 0 8px 8px; } +.c10:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c18 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + gap: 15px; + margin-bottom: 15px; +} + +.c11 { + max-width: 425px; +} +
+
-

- 900 -

-

- #004686 -

-
, -] +
+

+ 50 +

+

+ #E5ECF3 +

+
+
+

+ 100 +

+

+ #CCDAE7 +

+
+
+

+ 200 +

+

+ #B2C7DB +

+
+
+

+ 300 +

+

+ #99B5CF +

+
+
+

+ 400 +

+

+ #7FA2C2 +

+
+
+

+ 500 +

+

+ #6690B7 +

+
+
+

+ 600 +

+

+ #4D7EAB +

+
+
+

+ 700 +

+

+ #336B9E +

+
+
+

+ 800 +

+

+ #1A5992 +

+
+
+

+ 900 +

+

+ #004686 +

+
+
+
+
+

+ Select a color variable from the palette to check it against WCAG contrast requirements. + + + See more + + +

+
+
+
+
+
+

+ Blue + + 50 +

+
+
+ + +
+
+
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+

+ Normal Text +

+
+

+ WCAG AA: +

+

+

+ Fail +
+

+
+
+

+ WCAG AAA: +

+

+

+ Fail +
+

+
+

+ Large Text (at least 18 point or 14 point bold) +

+
+

+ WCAG AA: +

+

+

+ Fail +
+

+
+
+

+ WCAG AAA: +

+

+

+ Fail +
+

+
+

+ Graphical Objects and User Interface Components +

+
+

+ WCAG AA: +

+

+

+ Fail +
+

+
+
+
+
`; exports[`Storyshots Building-Blocks/Colors Grey 1`] = ` @@ -467,24 +1009,219 @@ exports[`Storyshots Building-Blocks/Colors Grey 1`] = ` "900": "#404040", } } + label="Grey" /> `; exports[`Storyshots Building-Blocks/Colors Grey 2`] = ` -Array [ - .c0 { +.c22 { + border: 1px solid #D9D9D9; + border-radius: 7px; + padding: 10px 15px; +} + +.c23 { + font-size: 16px; + font-weight: bolder; +} + +.c24 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + gap: 5px; +} + +.c24 p { + margin: 0; +} + +.c25 { + color: white; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 13px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 20px; + padding: 5px 15px; + margin: 3px 0; +} + +.c26 { + background-color: #B72620; +} + +.c19 { + position: relative; + width: 50%; +} + +.c19 label span { + color: #666666; + font-size: 12px; + background-color: white; + z-index: 10; + margin-left: 8px; + padding: 0 7px; +} + +.c21 { + margin: 5px 0 0 8px; + color: #B72620; + font-size: 12px; +} + +.c20 { + border: 1px solid #D9D9D9; + border-radius: 7px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; + padding: 5px; + margin-top: -8px; +} + +.c20 input { + border: none; + background: transparent; +} + +.c20 input[type="text"] { + height: 27px; + padding: 0 5px; + min-width: 70px; + width: 80%; +} + +.c13 { + border: 1px solid #D9D9D9; + border-radius: 7px; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding: 10px 15px; + margin-bottom: 15px; +} + +.c16 { + width: 100px; + height: 50px; background-color: #ECECEC; - color: #000000; + border-radius: 5px 5px 0 0; +} + +.c15 { + border: 1px solid grey; + border-radius: 5px; + min-width: 85px; +} + +.c15 p { + padding: 10px; + margin: 0; +} + +.c14 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + gap: 10px; +} + +.c17 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + gap: 3px; +} + +.c17 button { + background: #fff; + border: 1px solid #797979; + border-radius: 5px; + padding: 5px 10px; +} + +.c17 button:hover { + background-color: #ECECEC; + cursor: pointer; +} + +.c12 { + background-color: #E5ECF3; + line-height: 1.5; + padding: 10px; + border-radius: 5px; + margin-bottom: 15px; + text-align: center; +} + +.c12 p { + margin: 0; +} + +.c12 a { + color: #336B9E; + font-weight: 700; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c12 a:hover { + color: #004686; +} + +.c0 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; + gap: 15px; font-family: Arial,Helvetica,sans-serif; + margin: 0 auto; +} + +.c1 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #ECECEC; + color: #000000; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -492,28 +1229,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c1:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c1:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 50 -

-

- #ECECEC -

-
, - .c0 { +.c1:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c2 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -524,7 +1262,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -532,28 +1269,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c2:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c2:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 100 -

-

- #D9D9D9 -

-
, - .c0 { +.c2:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c3 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -564,7 +1302,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -572,28 +1309,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c3:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c3:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 200 -

-

- #C5C5C5 -

-
, - .c0 { +.c3:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c4 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -604,7 +1342,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -612,28 +1349,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c4:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c4:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 300 -

-

- #B3B3B3 -

-
, - .c0 { +.c4:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c5 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -645,7 +1383,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -653,28 +1390,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c5:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c5:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 400 -

-

- #9F9F9F -

-
, - .c0 { +.c5:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c6 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -686,7 +1424,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -694,28 +1431,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c6:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c6:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 500 -

-

- #8C8C8C -

-
, - .c0 { +.c6:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c7 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -727,7 +1465,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -735,28 +1472,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c7:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c7:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 600 -

-

- #797979 -

-
, - .c0 { +.c7:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c8 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -768,7 +1506,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -776,28 +1513,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c8:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c8:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 700 -

-

- #666666 -

-
, - .c0 { +.c8:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c9 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -809,7 +1547,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -817,28 +1554,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c9:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c9:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 800 -

-

- #535353 -

-
, - .c0 { +.c9:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c10 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -850,7 +1588,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -858,28 +1595,375 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c10:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c10:last-of-type { border-radius: 0 0 8px 8px; } +.c10:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c18 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + gap: 15px; + margin-bottom: 15px; +} + +.c11 { + max-width: 425px; +} +
+
-

- 900 -

-

- #404040 -

-
, -] +
+

+ 50 +

+

+ #ECECEC +

+
+
+

+ 100 +

+

+ #D9D9D9 +

+
+
+

+ 200 +

+

+ #C5C5C5 +

+
+
+

+ 300 +

+

+ #B3B3B3 +

+
+
+

+ 400 +

+

+ #9F9F9F +

+
+
+

+ 500 +

+

+ #8C8C8C +

+
+
+

+ 600 +

+

+ #797979 +

+
+
+

+ 700 +

+

+ #666666 +

+
+
+

+ 800 +

+

+ #535353 +

+
+
+

+ 900 +

+

+ #404040 +

+
+
+
+
+

+ Select a color variable from the palette to check it against WCAG contrast requirements. + + + See more + + +

+
+
+
+
+
+

+ Grey + + 50 +

+
+
+ + +
+
+
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+

+ Normal Text +

+
+

+ WCAG AA: +

+

+

+ Fail +
+

+
+
+

+ WCAG AAA: +

+

+

+ Fail +
+

+
+

+ Large Text (at least 18 point or 14 point bold) +

+
+

+ WCAG AA: +

+

+

+ Fail +
+

+
+
+

+ WCAG AAA: +

+

+

+ Fail +
+

+
+

+ Graphical Objects and User Interface Components +

+
+

+ WCAG AA: +

+

+

+ Fail +
+

+
+
+
+
`; exports[`Storyshots Building-Blocks/Colors Red 1`] = ` @@ -908,24 +1992,219 @@ exports[`Storyshots Building-Blocks/Colors Red 1`] = ` "900": "#AF0E08", } } + label="Red" /> `; exports[`Storyshots Building-Blocks/Colors Red 2`] = ` -Array [ - .c0 { +.c22 { + border: 1px solid #D9D9D9; + border-radius: 7px; + padding: 10px 15px; +} + +.c23 { + font-size: 16px; + font-weight: bolder; +} + +.c24 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + gap: 5px; +} + +.c24 p { + margin: 0; +} + +.c25 { + color: white; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 13px; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; + border-radius: 20px; + padding: 5px 15px; + margin: 3px 0; +} + +.c26 { + background-color: #B72620; +} + +.c19 { + position: relative; + width: 50%; +} + +.c19 label span { + color: #666666; + font-size: 12px; + background-color: white; + z-index: 10; + margin-left: 8px; + padding: 0 7px; +} + +.c21 { + margin: 5px 0 0 8px; + color: #B72620; + font-size: 12px; +} + +.c20 { + border: 1px solid #D9D9D9; + border-radius: 7px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 5px; + margin-top: -8px; +} + +.c20 input { + border: none; + background: transparent; +} + +.c20 input[type="text"] { + height: 27px; + padding: 0 5px; + min-width: 70px; + width: 80%; +} + +.c13 { + border: 1px solid #D9D9D9; + border-radius: 7px; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding: 10px 15px; + margin-bottom: 15px; +} + +.c16 { + width: 100px; + height: 50px; background-color: #F7E7E6; - color: #000000; + border-radius: 5px 5px 0 0; +} + +.c15 { + border: 1px solid grey; + border-radius: 5px; + min-width: 85px; +} + +.c15 p { + padding: 10px; + margin: 0; +} + +.c14 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + gap: 10px; +} + +.c17 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + gap: 3px; +} + +.c17 button { + background: #fff; + border: 1px solid #797979; + border-radius: 5px; + padding: 5px 10px; +} + +.c17 button:hover { + background-color: #ECECEC; + cursor: pointer; +} + +.c12 { + background-color: #E5ECF3; + line-height: 1.5; + padding: 10px; + border-radius: 5px; + margin-bottom: 15px; + text-align: center; +} + +.c12 p { + margin: 0; +} + +.c12 a { + color: #336B9E; + font-weight: 700; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c12 a:hover { + color: #004686; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + gap: 15px; font-family: Arial,Helvetica,sans-serif; + margin: 0 auto; +} + +.c1 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #F7E7E6; + color: #000000; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -933,28 +2212,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c1:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c1:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 50 -

-

- #F7E7E6 -

-
, - .c0 { +.c1:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c2 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -965,7 +2245,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -973,28 +2252,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c2:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c2:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 100 -

-

- #EFCFCE -

-
, - .c0 { +.c2:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c3 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1005,7 +2285,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -1013,28 +2292,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c3:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c3:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 200 -

-

- #E7B6B4 -

-
, - .c0 { +.c3:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c4 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1045,7 +2325,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -1053,28 +2332,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c4:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c4:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 300 -

-

- #DF9E9C -

-
, - .c0 { +.c4:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c5 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1086,7 +2366,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -1094,28 +2373,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c5:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c5:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 400 -

-

- #D78683 -

-
, - .c0 { +.c5:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c6 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1127,7 +2407,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -1135,28 +2414,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c6:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c6:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 500 -

-

- #CF6E6B -

-
, - .c0 { +.c6:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c7 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1168,7 +2448,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -1176,28 +2455,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c7:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c7:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 600 -

-

- #C75652 -

-
, - .c0 { +.c7:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c8 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1209,7 +2489,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -1217,28 +2496,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c8:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c8:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 700 -

-

- #BF3E3A -

-
, - .c0 { +.c8:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c9 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1250,7 +2530,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -1258,28 +2537,29 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c9:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c9:last-of-type { border-radius: 0 0 8px 8px; } -
-

- 800 -

-

- #B72620 -

-
, - .c0 { +.c9:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c10 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1291,7 +2571,6 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; - font-family: Arial,Helvetica,sans-serif; height: 40px; -webkit-box-pack: justify; -webkit-justify-content: space-between; @@ -1299,28 +2578,375 @@ Array [ justify-content: space-between; margin: 0; padding: 10px; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; width: 300px; } -.c0:first-of-type { +.c10:first-of-type { border-radius: 8px 8px 0 0; } -.c0:last-of-type { +.c10:last-of-type { border-radius: 0 0 8px 8px; } +.c10:hover { + -webkit-transform: scale(1.012); + -ms-transform: scale(1.012); + transform: scale(1.012); + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + cursor: pointer; +} + +.c18 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + gap: 15px; + margin-bottom: 15px; +} + +.c11 { + max-width: 425px; +} +
+
-

- 900 -

-

- #AF0E08 -

-
, -] +
+

+ 50 +

+

+ #F7E7E6 +

+
+
+

+ 100 +

+

+ #EFCFCE +

+
+
+

+ 200 +

+

+ #E7B6B4 +

+
+
+

+ 300 +

+

+ #DF9E9C +

+
+
+

+ 400 +

+

+ #D78683 +

+
+
+

+ 500 +

+

+ #CF6E6B +

+
+
+

+ 600 +

+

+ #C75652 +

+
+
+

+ 700 +

+

+ #BF3E3A +

+
+
+

+ 800 +

+

+ #B72620 +

+
+
+

+ 900 +

+

+ #AF0E08 +

+
+
+
+
+

+ Select a color variable from the palette to check it against WCAG contrast requirements. + + + See more + + +

+
+
+
+
+
+

+ Red + + 50 +

+
+
+ + +
+
+
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+

+ Normal Text +

+
+

+ WCAG AA: +

+

+

+ Fail +
+

+
+
+

+ WCAG AAA: +

+

+

+ Fail +
+

+
+

+ Large Text (at least 18 point or 14 point bold) +

+
+

+ WCAG AA: +

+

+

+ Fail +
+

+
+
+

+ WCAG AAA: +

+

+

+ Fail +
+

+
+

+ Graphical Objects and User Interface Components +

+
+

+ WCAG AA: +

+

+

+ Fail +
+

+
+
+
+
`; exports[`Storyshots EndpointsOverlay Endpoints Overlay With Custom Map Markers 1`] = ` @@ -223684,19 +225310,10 @@ exports[`Storyshots PrintableItinerary Walk Transit Transfer With A 11 Y Itinera `; exports[`Storyshots PrintableItinerary Walk Transit Transfer With A 11 Y Itinerary 2`] = ` -.c8 { - display: inline-block; - vertical-align: middle; - overflow: hidden; -} - .c7 { display: inline-block; - grid-row-start: 2; - grid-column-start: 1; - height: 0; + vertical-align: middle; overflow: hidden; - width: 0; } .c20 { @@ -223740,16 +225357,21 @@ exports[`Storyshots PrintableItinerary Walk Transit Transfer With A 11 Y Itinera word-wrap: anywhere; } -.c9 { +.c8 { -webkit-flex: 1; -ms-flex: 1; flex: 1; } -.c9 span { +.c8 span { display: block; } +.c9 { + padding-top: 3px; + font-weight: 600; +} + .c0 { margin-bottom: 10px; border-top: 1px solid grey; @@ -223862,16 +225484,11 @@ exports[`Storyshots PrintableItinerary Walk Transit Transfer With A 11 Y Itinera
- - otpUi.ItineraryBody.tripAccessibility.itineraryAccessibilityotpUi.ItineraryBody.tripAccessibility.likelyAccessible - - ✅ + + ✅ +
@@ -223984,16 +225604,11 @@ exports[`Storyshots PrintableItinerary Walk Transit Transfer With A 11 Y Itinera
- - otpUi.ItineraryBody.tripAccessibility.itineraryAccessibilityotpUi.ItineraryBody.tripAccessibility.unclear - - ？ + + ？ +
@@ -224196,16 +225814,11 @@ exports[`Storyshots PrintableItinerary Walk Transit Transfer With A 11 Y Itinera
- - otpUi.ItineraryBody.tripAccessibility.itineraryAccessibilityotpUi.ItineraryBody.tripAccessibility.inaccessible - - ❌ + + ❌ +
@@ -224310,16 +225926,11 @@ exports[`Storyshots PrintableItinerary Walk Transit Transfer With A 11 Y Itinera
- - otpUi.ItineraryBody.tripAccessibility.itineraryAccessibilityotpUi.ItineraryBody.tripAccessibility.inaccessible - - ❌ + + ❌ +