UI redesign & enhancements #155
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…rData function in detail panel
…he apca branch. Typography will not be included in this redesign
… Source Sans Pro with manual change to font weight bold
…y outputs colors as expected, however this breaks some tests
…n smoothing is true
…upon entry order, which is bad
…p dots still dont position properly
…ing for all colorspaces
Merging in main branch to ensure up-to-date and for resolving conflicts
Open
thierryc
pushed a commit
to thierryc/leonardo
that referenced
this pull request
Mar 29, 2024
* enhancements to homepage content * Basic URL theme parameter processing added * added copy parameter url button. param setup still buggy * attempting to fix params * updated copy params, cant get tinyURL to work * fix: removed trailing argument that needed to be removed from getColorData function in detail panel * RETRO: Removed all typography content, which was originally made in the apca branch. Typography will not be included in this redesign * feat: added posthtml and modularized theme.html into partials * minor formatting * modularized homepage to be more like command+n start screen * scaffolding additional pages * modularized html head. Updated CSS and references to use ttypekit for Source Sans Pro with manual change to font weight bold * Added basic scaffolding for color scales with dynamic partials * added initial work to get sequential scales displaying * Fix: corrections to createScale for non-function outputs. Now properly outputs colors as expected, however this breaks some tests * copied chroma-plus; cant import it from Leo * got sequential scales working except for dot placements * removed console logs from contrast-colors utils * reformatted scales page, added structure for color wheel and output tab * added dummy content to panel for additional controls to add to scales pages * fix: contrast-colors createScale now properly returns color array when smoothing is true * got smooth toggle working * got shift visuals working, although inversed direction * corrected directionality of sequential ramp but key colors dependent upon entry order, which is bad * placed luminosity and domain functions in sequential scale class. Ramp dots still dont position properly * added support for lightness shift and correct lightness control, working for all colorspaces * un-hid ramp key color dots * updates to SVG gradient download to support sequential scale * fixed key color inputs, adding and removing key colors * corrected direction of RGB chart data for datavis scales * Added feature to disable/toggle and enable smooth switch control based on number of keycolors * added sample swatch outputs * modularized createSamples function, moved color wheel to panel (placeholder) * added heatmap demo * added choropleth demo * added scatterplot demo, updated layout and finished workingdemos * added basic color wheel to sequential scales. Breaks theme color key dots in color wheel * fixed download gradient button in sequential scales to update with changes * fixed color wheel and color dots for sequential and theme colors * updated default sequential scale to Leonardo brand scale, updated logo.svg. Corrected chart width in demo to wrap properly * stylistic layout updates to home page content. Added initial tab activation to index.js * added reverse sort for rgb values in sample output to be in same order as swatches and colorscale (dark to light) * correction to delete key color for sequential scales to update sample color quantity by sample value input * updated charts to use curveBasis * fixed random generated tint for adding key colors * added polar interpolation paths to sequential and theme colors * added switch to toggle display of harmony lines in theme palette, not currently working * added other htmls to build script * added padding to the panel color wheel * initial construction of DivergingScale class function * feat: Added condition to support passing updateColor params as an array of parameters for bulk color updates to a theme * Fixed paramSetup function, added some performance enhancements * added token output in theme tab. Added placeholder picker for changing color format * added functionality to color format output picker in themes * added faux page loader for better refresh/loading experience * interp paths and harmony lines toggles now working * renamed option for displaying colors on colorwheel * removed placeholder text from debugging loader on homepage * rough scaffolding for tools page and tabs * added default theme name, updated how name appears in header * corrected themeUpdate function to themeUpdateParams * fixed button variant and changed download SVG button tilabels * updated download svg button title in color scale view * changed defaut title for new themes to Untitled * fixed height and overflow issue with colors in palette panel * fix: adding call to _generateScale after updateParams is called in theme (for each color) to ensure scales are updated with new args * added throttle to keyColor inputs, updated params to copy ttheme url button (now working properly for themes) * removed unnecessary nullifying and comments from theme and color.js * got params for single color to work, using theme.html extension * initial work on diverging scale * added 3d model and enhanced output features for scales. d3 functions are dummy-content * chart style update. Corrected direction of datavis colors in RGB charts * added precision slider for svg download. Fixed wheel placement to bottom of panel * added demo for density, not working * small incremental changes to diverging scale UI and shared functions for creating/populating content in app * pass chart type to color details panel 3d model. still not rendering * added article cards, article links, and a pleasant footer for content pages * Initial work creating a colorpicker component with demo page for development * added initial color extract from image to themes * added grouping function so extracted image colors can inform the same color key when similar * refined algorithm for color extraction to scales plus naming * added longer timeout for updating dots from swatch input on color detail panel * Design refinements to swatch and theme tabs * updgraded and fixed styling for toasts * fixed output colors function to only clear relevant destinations * chart styling, fixed bug to ensure unique color names on image extract * removed console.logs * added submodule for StanfordHCI categorical color components (naming library) for future use * updated style of swatches view to be more immersive in the swatch outputs, growing height and width to fill space * replaced octocat png with svg * vertically, optically centered color wheel in palettes * Fixed issue with updateColorDots in theme palette, changed colorDisc to colorWheel * added workaround in color smoothing setter to accept strings, as boolean args would not properly set the smoothing to false * fixed smoothing toggles * updated default ratios to more options than just 3 and 4.5 * fixed distribute and sort ratios * refinements to sort and distribute functions * replaced color name resources with new json list. Enhanced precision for closest color name function * minor styling updates * reset distribution select once selection is made to mirror more of an action menu behavior * updated color wheel and getConvertedColorCoodrindates to use Chroma.js rather than d3.color * replaced d3-3d with Plotly * added model references in palette * performance enhancement for throttling 3d model creation on swatch input for key colors * fixed predefined color name random name function * added specificity to only fire certain tasks for themes in create3dModel * Added preformatter to convert Leo's css Module 4 color strings into hex for processing internally for theme color outputs and cvd simulation * added taborder and role to header, updated focus blue alias * added swatch download for datavis colors * added capitalize first letter function to utils and passed to all random name generation * widened input for color scale names * fixed saturation adjustment in cssColorToRgb function * corrected samples output when css color formats selected. Updated default sequential colors * modularized dataVisColorScale into separate functions colorScaleDiverging and colorScaleSequential * Refinements to diverging scale; still needs work * fixed smoothing again, updated smoothing parameter in updateParams and removed duplicate function updatParams * fixed keycolor and domain issue with sequential scale. Began work to apply fix to diverging as well * added polynomial and parabolic lightness correction to createScale * got diverging themes scales and dots correctly displaying * diverging scale modifications * fixed diverging ramp dots (except polynomial is still not qquite right) * Added flag to createScale to NOT sort key colors (needed for diverging). Fixed diverging scale function, and added demo finessing * corrected key color inputs for diverging scale * added qualitative color scale tab * removed console log from qual * added qualitative demos, updated layout * added output & svg download for qualitative. Updated formatfor svg swatches. Made qualitative into class instance * fixed sample color input function * hooked up contrast switch and added bg input field * added default fill for cvd demo charts * fixed diverging output format support * added more homepage visuals. Changed adaptive theme sliders to show value as a % * lowered specificity of fill default for qualitative demos so it can be overridden * fixed sequential scale key color dots * swapped polynomial function with alternative * updated formula for polynomial curve. Actually quadratic root formula * changed default diverging scale, removed copyURL from datavis header * Updated updateColor to retain original color's index * added color scale sort feature to theme * added filter in theme swatch name outputs to remove any spaces from the name * removed bodily-fluid-named colors from list * highly refined color from image extraction * removed gunmetal name from color name list * added missing set function to make new image extracted color as the backgroundColor of the theme * less default ratios. Add dispatch input event when creating new ratio * formatting for expected token name in SVG ui kit * Updated add bulk, new CSS dialog, added clearColors as well * changed default gray from #cacaca to black #000000 * added color wheel with interpolation path to color scale detail panel * removed console.log * hid harmony lines from theme color scale details panel * Added correction to find updated color name in case where user changes name of color in details panel * Fix: reset output format after returning the theme outputs so to avoid translation errors with chroma.js and css module 4 formats * commented out todo items for future simulation modes * corrected width and max width for 3d model * fix: 3d model changes in detail view when interp/smoothing changed * fix: call updateRatio during syncInputs regardless of input type/id" * fix: only copies unique color values when copy theme colors * fixed min contrast for qualitative. Added value label to DeltaE * added empty state for when no CVD qual colors available * added description to color space interpolation on detail view * updated homepage with marketing * minor design change to homepage * added datavis marketing to home page * update to homepage copy * added duplicate copy on interpolation to scales * added theme config as global panel. Updated layout for panels in theme sub-tabs * removed tabs from homepage, updated content and github link to open new tab * initial work on color compare for contrast * small additions to test color picker * added color difference report with cvd ratings and previews * only have one threshold for cvd delta e reporting * changed status to safe/unsafe for cvd report * finished opacity slider functionality in contrast checker * fix: final fixes to opacity slider * updated ramp dots style. Removed lightness options for scales, updated Demo tab to Visualize" * fixed incorrect scale generation by manually inserting first and last color to sequential scales * formatting updates and XML download added * updated createScale to distribute by JCH lightness. BackgroundColorScale still generates HSLuv (L*) values for a background scale * report table component & accordion. Updated sequential tab design * updated diverging to house report table. Updated report table headers and refined default diverging scale * added Color scales label to color scales panel in palette tab * redesign for diverging and qualitative scales layout * reformatted tab for color detail panel. Updated 3d model to normalize sizes * moved 98% of swatches tab content into Palette tab. Added grayscale preview for value stops and added curveStep option for contrast charts * began framing second tab for housing accessibility evaluation tools, then commented it out to do later * minor design updates to color details panel for clearer UX * Renamed header tab and palette tabs * fix: extract colors from image bug in key color creation * updated homepage images and content * added readme to getting started as Leonardo API docs * updated readme content in getting started page * changed luminosity to lightness in learn content * fix: workaround to correct keycolor index when removing colors by regenerating color details panel * began bulk feature for scales. Commented out the button for now, indexing issues remain * temporarily removed sidenav anchor links from API docs page * feat: added lightness charts to color details panels, integrated slider inputs for adaptive theme to update lightness and contrast charts * updated design token output * updated headings for output preview for lightness charts * added disabled states for keycolor inputs to ensure minimum key colors retained for sequential and diverging scales * implemented single color converter * added bulk conversion dialog & csv download * removed unused code and unnecessary comments * updated cvd sim package and added color inputs to comparison tab * enhancements to qual scale, params, and updated tab name for code * moved theme configs into header, removed one sidebar in theme layouts * synced lightness slider to update ratio inputs and gradient dot positions * added popovers to header with enhanced usability. Added framing for accessibility page on themes * created content tabs for a11y page. Removed from nav as it will be added in future * fix: filename for gradients in themes has colorspace * formatting updates to charts * fix: panel overflow issue * fix: distribute by luminosity respects directionality based on theme background lightness * added bulk import for contrast ratio/lightness stops * moved background dropdown in header to end of header group: * feat: added enter keypress for submitting title update * updated header option icons * feat: enhanced saturation feature to retain saturation values when modifying contrast or lightness * fix: changed homepage item to Leonardo JS API * added helper table with color input formats for converter * chore: updated to latest chroma-js in contrast-colors package * feat: initial support for OKLab and OKLch * feat: UI support for OKLAB and OKLCH interpolation and conversion options * feat: added OKLab and OKLch analysis support * fix: fixed analysis picker for qualitative scales * moved background scale dropdown into settings popover * added theme title to UI kit * fix: performance enhancement for slider inputs and lightness stop inputs * stylistic update to header * added latest chroma-js as dependency for UI * feat: added more default swatches to UI when no params are found * added visualization of OKLAB colorspace for 3d model * updated demo copy, added saturation, updated with latestAPI * removed WIP color picker component * fix: CSS for conversion table overflow * fix: updated backgroundColor tests with new expected values * removed APCA WIP work from contrast-colors * fix: corrected tests that had expected changes * added color picker to convert color tab * removed unused html/js from source * removed console.log from createOutputColors.js * fix: key color setter for Color now updates modifiedKeys with saturation * fix: all tests except two cases that need investigating * fix: syntax highlighting for code outputs, updated typeface to support * fix: backgroundColorScale only sets length to 100 if greater than 101 to avoid empty items in array * feat: added WCAG AA status beside ratio inputs * fix: removed console.log in backgroundcolor.js * added titles to header action buttons * updated datavis scale RGB chart height/width
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Full redesign of the UI and UX for the Leonardo web tool. In the process of rebuilding the experience, several updates were added to the core
contrast-colorspackage.This is a draft PR as I will be adding more details to the specifics of what is changing
@adobe/leonardo-contrast-colors package
BackgroundColorscale functionsaturationparameter toColorwith function_updateColorSaturationto desaturate colors uniformly by percent.updateColorsetter forThemewith specific parameter support, single or multiple color updatesThemesaturation function to pass parameter toColors for better maintenancedistributeLightnessparameter tocreateScalewith optionslinearandpolynomial(for diverging scales)createScalecreateScaleto use CAM02 lightness distribution rather than HSLUV🚨 BREAKING CHANGES 🚨
The
searchColorfunction has been enhanced to return optimal color results. In many cases, multiple rgb color values will meet the same WCAG contrast ratio. In those cases, the color that is has the highest color difference from the background color will be returned. Previously, the first matching value was returned, which resulted in the color with the least difference from the background.The
createScalefunction has been updated to use the L* value from CIECAM02-UCS, as opposed to the original use of HSLUV. This alters the color values returned for each color scale by a small degree. For example, from one of the test suites:Leonardo UI package
🛠 Tools
🎨 Theme
📈 Scales
Motivation
Screenshots
To-do list