Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
UI redesign & enhancements (adobe#155)
* 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
- Loading branch information
1 parent
c6b0335
commit a9f88bf