How to use in your project

Add an enviroment variable to get the correct link per environment. The development link will be for development testing, static filenames ensure you're not updating the link all the time. The versioned links will be for production to provide a conscious effort to update, which ideally should be tested in a lower environment.

Current themes are rdg, icpsr, and neutral.

Versioned

Current versioned URL for dev environment is:

https://mosaic.dev.icpsr.umich.edu/static/mosaic/styles/[theme]-7.5.0.css

Changelog

11/19/2024

v7.5.0

Minor changes (new components or variations)

  • ACW-11378 News Index Page - New mockup for Archive as a Product News Index page.

  • ACW-15826 Filter Bar - Update Filter component design.

Patch changes (component variations or bug fixes)

  • ACW-16453 Images - On Archive as a Product pages images now don't automatically display full-width.

  • ACW-16091 Featured Container - Add archive color option for background gradient.

  • ACW-16223 Cards - Fix Card width in the limited card group.

11/01/2024

v7.4.0

Minor changes (new components or variations)

  • ACW-15075 Hero - Add variant for image on right.

  • ACW-15827 Accordion - Add Accordion variant for Filter.

Documentation update

  • ACW-15850 Featured Container - Update Featured Container mockup with clickable and non-clickable cards. Fix link to mockup.

10/25/2024

v7.3.0

Minor changes (new components or variations)

Patch changes (component variations or bug fixes)

  • ACW-15765 Progress Indicator - Remove line after final step.

  • ACW-16065 Header - Increase height of Global nav to make logo larger.

  • ACW-15787 Site Banner - Change link color to fix accessibility contrast issue.

Documentation updates

  • ACW-16058 News - Update required/optional fields.

09/25/2024

v7.2.1

Patch changes (component variations or bug fixes)

  • ACW-15493 Pagination - Previous and Next buttons now hide based on the width of the Pagination component, not viewport.

  • ACW-15762 Modals - Update modal-title to always be h2 font size.

  • ACW-15760 Typography - Change brow text color. Update $grey-200 token value to match Figma. Add documentation for brow text.

  • ACW-15533 News Post - Update News component to be a reusable pattern with more optional content.

  • ACW-15431 Header - Fix navigation dropdown menus from breaking the viewport bounds.

08/26/2024

v7.2.0

Minor changes (new components)

08/20/2024

v7.1.1

Patch changes

  • ACW-15236 Find Data - Make body text in Card React component optional. Update mockup data to remove brow text on some cards.

08/16/2024

v7.1.0

Minor changes (new components)

  • ACW-14243 Progress Indicator - New component for tracking where a user is in a multi-step process.

Patch changes

  • ACW-15022 Search - Fix Basic Search height

  • CNSS-5342 Footer - Correct UM logo vertical bar color

  • ACW-15115 Footer - Align footer links when there is no newsletter button or no social media

  • ACW-14782 File Upload - Multiple updates:

    • Adds an ellipsis animation for file items that are processing
    • Updates out of date documentation
    • updates mobile view
    • updates file item upload progress bar
    • removes multi-select from the documentation
  • ACW-15066 Typography - Add text-brow as a utility class for text styling

  • ACW-11382 Cards - Add `.card-group-limited` style.

Documentation updates

  • ACW-14788 Colors - Add :visited link color as a color token

Mockups

07/30/2024

v7.0.0

💥 MAJOR (BREAKING) CHANGES

  • ACW-14867 Footer - Refactor of the markup and styles. The footer now allows for archive logos, and has more flexibility for content.

    Please note the parts of the footer that are required as minimum for the Footer.

07/25/2024

v6.0.1

Patch changes (component variations or bug fixes)

07/03/2024

v6.0.0

💥 MAJOR (BREAKING) CHANGES

  • ACW-13908 Colors and Badges - Remove icpsr-secondary-200 color token, and Badge color. Add Notice color ramp, which is the ICPSR secondary color ramp, but available in every theme.

    • To fix: Change badge classes class="badge badge-icpsr-secondary-200"class="badge badge-notice"
  • ACW-12600 Buttons - Refactor Button styles, removing all extraneous button colors. Only use primary and danger colors. Remove transparent button variant.

  • ACW-13806 Cards - Remove RDG/Redmas cards styles.

Patch changes (component variations or bug fixes)

  • ACW-14606 & ACW-6351 Lists - Fix comma-separated lists, remove rounded corners on List Group.

06/17/2024

v5.2.1

Patch changes (component variations or bug fixes)

  • ACW-14003 Header - Remove background color behind logo on hover

  • ACW-13830 Alerts - Update background colors to use new color ramps

05/31/2024

v5.2.0

Minor changes (theme changes)

  • ACW-13592 Neutral theme - Change Neutral theme accent color to grey color ramp

Patch changes (component variations or bug fixes)

  • ACW-13762 Badges - Create default style for Badges, remove specific Badges styles in Complex Cards

  • ACW-13620 Site Banner - Add Full-Width variant

  • ACW-13557 Hero - Update styling in Hero sidebar

  • ACW-13604 File Browser - Remove utility classes and inline styles

  • ACW-13529 Header - Fix Logos in Navbar

  • ACW-13079 Alerts - Fix size of inline SVGs

Documentation changes

  • ACW-13079 Links - Update standard text for links with target="_blank".

05/16/2024

v5.1.4

Patch changes (component variations or bug fixes)

  • ACW-13349 Tables - Add .table-v-lines-none variant for no vertical lines

  • ACW-12821 Forms - Adjust .header-bg, legend, and other form stylings

  • ACW-12629 Sidebar Nav - Add more specificity to the anchored sidebar nav

  • ACW-13403 Buttons - Remove transition for focus to support visual accessibility

  • ACW-13079 Alerts - Change the name from Banners to Alerts, update the styling

Documentation changes

Dev changes

  • ACW-13449 Astro Prettier Plugin - Update Prettier config to work with Astro files

05/06/2024

v5.1.3

Patch changes (component variations or bug fixes)

  • ACW-13138 Typography - Fix IBM Plex Bold. Also refactors the way theme files are formatted and the build process.

  • ACW-13173 Badges - Create special .icpsr-secondary-200 badge variation. Also adds the $icpsr-secondary-200 token, specifically for this element.

  • ACW-12667 Focus state - Focus state update on Close button in modal, hamburger icon for and close button in offcanvas (main nav shown on small screens).

05/01/2024

v5.1.2

Patch changes (component variations or bug fixes)

  • ACW-12794 Form Output - Styling updates, fix the icons overlapping

  • ACW-12784 Tables - Remove AG-grid, replace with Tanstack

  • ACW-12667 Buttons - Change white .btn-close variation styling to fix hover/focus styles

  • ACW-12919 Form Labels - Nested Fieldsets inherit styles like normal labels

04/17/2024

v5.1.1

Patch changes (component variations or bug fixes)

  • ACW-11702 Form Output - <dt> text content will break if it doesn't fit the space

  • ACW-12466 Site Banner - Update font size, remove utility classes

  • ACW-11693 Search Input - Add Search Input Group with Select option

  • ACW-12103 Hero - Add full-width Hero variation

  • ACW-12287 Sidebar Navigation - Fix Sidebar Header example link

  • ACW-12346 Radio Buttons - Fix labels

03/28/2024

v5.1.0

Minor changes (new components)

  • Site Banner - Add a component to be seen at the top of a page, across many pages

Patch changes (component variations or bug fixes)

  • ACW-11891 Sidebar - Add anchored sidebar nav variant that sticks the sidebar to the left side of the screen while keeping the content contained and centered within the Bootstrap widths

  • ACW-11610 Badges - Update color classes for badges, .badge-secondary uses secondary-200 color

  • ACW-12046 Buttons - Fix margin issue with close button in modals

  • ACW-10563 Links - Update visited link color

  • ACW-11611 Form labels - Update form label font family and size

Documentation updates

  • ACW-10469 Header - Add <main> element to code example

Dev updates

  • ACW-12219 Upgrade dependencies - All Mosaic package dependencies updated

    You will need to run npm install for this update.
03/06/20204

v5.0.0

💥 Major changes (breaking changes)

  • ACW-11772 New CSS file path - Remove major version in path, remove immutable link. See Use page for more info.

  • ACW-9334 Buttons - Link-styled Button (.btn-link) receives zero padding to match anchor tags. Spacing will need to be re-assessed around these buttons.

  • ACW-1128 Colors - The algorithm for creating color ramps has been changed. color-mix() and OKLab were to create more perceptually consistent gradiations of ICPSR theme colors. The Sass-created color ramp algorithm was set as default, to be overridden by the colors in any theme. Color ramps were added for all the non-theme colors, e.g. "danger," "warning," etc.

  • ACW-5618 Font sizes and Spacing

    • Use Utopia for responsive font sizing.
    • Add a new size 6 to the sizing options. This allows you to use $spacing-6 Sass variable or .mt-6 utility class.
    • 6 represents 5rem.

Minor changes (new components)

Patch changes

  • ACW-8972, ACW-Icons - Add icon inventory to documentation

  • ACW-8963 Tabs - Update tab styling

Dev changes

  • ACW-10007, ACW-11701 Upgrade Astro, Sass - Astro v4.4.11, Sass v1.71.1

    • Sass update adds pkg: importer option for node modules
  • ACW-10648 Remove deprecated code and components - Remove all the old Parcel files, including the build files. Remove old RDG components.

01/03/2024

v4.2.0

Minor changes (new components)

Patch changes

  • ACW-8965 Sidebar - removed border bottom, added header.

  • ACW-7899 Add primary color header - for fieldset headers and anywhere else.

  • ACW-8979 Cards - Brow font fix.

  • ACW-8976 Button audit - add .btn-icon class for buttons with icons and no text. Remove _buttons_old.scss file.

Dev changes

  • ACW-9858 New mixins - new Sass mixins were created to facilitate automated creation of component variants:

    • @mixin make-color-variants
    • @mixin make-background-variants
    • @mixin make-spacing-variants
11/13/2023

v4.1.0

Minor changes

  • ACW-8733 Toast - Add toast component

Patch changes

  • ACW-9060 AG-Grid - ag-cell overflow visible

  • ACW-8677 Navigation - Fix specificity for offcanvas by removing from Sass nesting

  • ACW-8978 Text Input - Minor updates found during audit

  • ACW-6350-2 Accordions - Fix accordion header styling when placed inside .card-bucket

  • ACW-7945 Badges - Updates to badge text styling

  • ACW-9490 Fix CSS files - Dev fix for gitignore in /styles folder

10/13/2023

v4.0.3

Patch changes

  • ACW-8177 - File Download - Update to ag-grid styles with higher specifity.

10/13/2023

v4.0.2

Patch changes

  • ACW-8177 - File Download - Update File Download CSS import.

10/09/2023

v4.0.1

Patch changes

  • ACW-6949 File Download - Update File Download for testing in archive-ui.

10/04/2023

v4.0.0

💥 BREAKING CHANGE

  • ACW-8149 Cards - Redesign of cards, including new default card and Complex cards

    Markup has changed for cards, which is the reason for the breaking change. Cards shouldn't look terribly bad, but they won't look quite right.

Dev changes

  • ACW-8681 Font Awesome - Update Font Awesome to private npm package

v3.2.1

9/29/2023

Patch Change

  • ACW-8279 Footer - making footer stick to the bottom of the browser screen

v3.2.0

9/18/2023

Minor Change

Patch Changes

  • ACW-8075 Sidebar - Active sidebar text did not have correct contrast color.

  • ACW-6104 Pagination - Pagination audit fixes.

  • ACW-7669 Hero - Add line above Hero actionbar section, other small design changes.

Dev Change

  • ACW-7429 - Upgrade Bootstrap and Astro

    You will need to run npm install for this update.

Mockups

v3.1.0

8/7/2023

Minor Changes

Patch Changes

  • ACW-6343 Typography - Design audit to remove IBM Plex 700.

Documentation Changes

Dev Changes

  • ACW-7305 Watch - Implement watch feature for Mosaic development

    You will need to run npm install for this update.

    This update adds a tool to run Sass build and Astro at the same time. When you make Sass updates, you will need to reload the page, but you don't need to stop and restart the process. Please run npm clean-code before you merge to lint and prettify your code.

  • ACW-7492 mosaic.icpsr.umich.edu - Update links and URLS for mosaic subdomain

Mockups

v3.0.1

7/21/2023

Dev Changes

  • ACW-7249 Width utility classes - Add responsive breakpoints to width utility classes

  • ACW-7237 Mocks Layout - Create a MocksLayout that uses the theme switcher. Now your mockup pages can easily have any theme on them.

    This layout works the same as the ComponentLayout, except the theme switcher is moved above the header to not interrupt the mockup.

    The page title can be dynamically added by hooking into the {title} prop in the MocksLayout component, like so:

    ---
    const data = await response.json();
    const title = data.projectTitle;
    ---
    <MocksLayout title={title}>
                        

Mockups

  • ACW-7249 Study Homepage - Updates to hero section and first draft of Associated/Data-Related Publications.

v3.0.0

7/17/2023

💥 Major (Breaking) Changes

Please run npm install after upgrading to this version to get the latest packages installed for compatibility.

  • ACW-5626 Turbocurator Prototype Health Check results - Added a React component for sidebarnav tab functionality.

  • ACW-6103 DS Audit Sidebarnav - Cleaned up markup and improved flexibility of component. White icon SVG path on active state.

  • ACW-6349 Update Banners and Colors for Icons
    The banner aspect of this introduces breaking changes:
    💥 Banner icons lose padding in favor of flex gap. The whole banner also has flex applied, so if there are multiple elements in the banner meant to be flow content (vertical), utility class .flex-column will need to be used. Create ‑‑icon‑height custom CSS property for overriding icon sizing.

    The colors aspect of this introduces breaking changes:
    💥 💄 Removes background color utility using only color name and value, eg .primary-20.

    Background colors can only be implemented with the bootstrap standard, using the bg prefix, eg .bg-primary-20. Other custom color utilities are removed:

    • .bg-light-purple-grey
    • .bg-success-color
    • .bg-special-color
    • .bg-error-color
    • .bg-info-color
    • .bg-field-color
    • .bg-h1

    (Most of these are custom and removed for the -color aspect of the name. .bg‑success is still a valid utility class.)

Patch Changes

  • ACW-6348 Accordions - Bring accordions up to date with Figma.

  • ACW-6352 Modals - Bring modals up to date with Figma.

  • ACW-6346 Toggle Switches - Update toggle to be inline with Figma.

  • ACW-6106 Focus states - Replace yellow focus state with blue ring on all components.

  • ACW-1124 Button Badge - added documentation for aria-label.

Dev/Doc Changes

  • ACW-6798 Change Documentation Component Organization - Puts componet docs pages and their example components into the same directory. Changes sidebar organization from "atoms/molecules" to "foundations/components".

  • ACW-6914 Flexible Theme Switcher Test - Dropdown now has colors to test CSS custom properties overriding a new neutral theme.

  • ACW-5904 Icons - New documentation page.

  • ACW-6288 Update Readme - Updates info about Astro, build scripts, and deploying.

Mockups

v2.2.0

5/23/2023

Dev Changes

Please run npm install after upgrading to this version to get the latest packages installed for compatibility.

  • ACW-5366 Astro Updates - Update major version of Astro. See Astro docs for more info.

  • ACW-5827 Implemented Stylelint and Prettier - These code quality tools were added to the build system. See the readme to learn more about it.

Patch Changes

  • ACW-4559 Tables - Complex header table (crosstabs) examples and CSS updated.

  • ACW-4559 Colors - Greys brought up to same level of tokens as primary and secondary colors. Token names have been adjusted to accomodate more options (see code below). See _tokens.scss for all grey colors.

    $grey-20: #f2f2f2; -> $grey-10
    $grey-50: #d1d1d1; -> $grey-20
    $grey-100: #a0a0a0; -> $grey-50
    $grey-300: #6e6e6e; -> $grey-200

    The grey colors are now easy to know accessbile combinations—with three step between, the two values have accessible contrast.

  • ACW-4740 Header - Change header badge to secondary color

  • ACW-5890 Sidebar - Fix bug with sidebar nav and z-index

  • ACW-5809 Footer - Change ICPSR logo in footer

Deprecation

  • ACW-6005 Stepper - Noted as deprecated, will be removed from code in the future. Replaced with vertical tabbed navigation.

v2.1.0

4/27/2023

Minor Change

  • ACW-2469 Simple File Upload - Changes from React Uploady integration. SVGs and icon buttons.

v2.0.0

4/21/2023

💥 Major (Breaking) Changes

  • ACW-1125 Buttons - Refactor buttons to be inline with Bootstrap standards, and Figma designs.

    Elements styled as buttons (could be links) now all need to have a `btn` class and whatever visual variants. This includes nav-link buttons (but not anchors).

  • ACW-5266 Footer - Refactor footer for new design, including new content and sections.

Patch Changes

  • ACW-5119 Table header buttons - Adjust button styles in table headers

  • ACW-5321 Header - Add styles for counter badge in header navigation

Mockups

v1.0.1

4/14/2023

Patch Changes

  • ACW-5322 Header - Add basket icon to header

  • ACW-4637 Buttons - Adjust size of close button

v1.0.0

4/4/2023

💥 Major (Breaking) Changes

  • ACW-1124 Badges - Badge refactor. Removed lozenges and pills

  • ACW-4826 Header - Header refactor. Simplifies classes and creates consistency in header.

Patch Changes

  • ACW-5228 Tables - Adjusts gradient for overflow table content

Changelog
Date Change Note Products Branch Local tested
3/27/2023 v0.9.9
Tables ACW-4764
  • Create class col-fixed-width to make table columns not change size based on content
ACW-4764
3/13/2023 v0.9.8
Focus States - ACW-4191
  • Update focus state styles for many components
Filter Bar Review - ACW-1130
  • Refine design with accordion
Grid Update Align Toggle Switch - ACW-4545 Pagination Review - ACW-1136 Table UI Fixes - ACW-4420 Table UI Fixes - ACW-4420
ACW-4425
ACW-4193
2/24/2023 v0.9.7
Tab Navigation
  • Create Vertical Lineary and Non-Linear Tab Navigation variants, updating documention to reflect all the variants
  • Update hover and focus state styles
Pagination
  • Update Pagination background and hover state colors
ACW-4425
ACW-4193
2/17/2023 Docs updates
Forms Study Homepage mockups revised
ACW-3991
ACW-4350
2/14/2023 v0.9.6
Bug fixes
  • Fix secondary outline button background color
All ACW-4350
2/10/2023 v0.9.5
Patch changes
  • Extend width utility to include keywords using w-fit, w-max, w-min
  • Add spacing info in documentation
  • Change StatSnap snowflake card to .card-bucket for wider use
  • Mosaic homepage redesign
  • Add .complex-header variant to tables for crosstabs
  • Form updates
  • Footer and body spacing
Bug fixes
  • Clean up footer component
  • Link focus underline fix
  • Re-add header component
All ACW-4188
ACW-1131
ACW-1131
ACW-3789-3
ACW-4113
ACW-3951
ACW-1138-2
ACW-4112
ACW-3750-2
ACW-3734
1/20/2023 v0.9.4
Patch changes
  • Update tabs styles
  • Add dismissable banner
  • Links and Button focus state updates
  • Select input documentation
  • Form validation documentation update
All ACW-1139
ACW-3895
ACW-3750
ACW-1129
ACW-1138
1/12/2023 v0.9.3
Patch changes
  • Update form documentation
  • Form style updates
All ACW-1139-forms
ACW-1129
1/10/2023 v0.9.2
Patch changes
  • Update Font Awesome link in sass build, to load properly
All ACW-3785
1/9/2023 v0.9.1
Patch changes
  • Update Links documentation and colors
  • Update .warning banner color and $warning token
All ACW-3750
ACW-3788
12/19/2022 v0.9.0
Minor changes
  • Change to Astro for docs creation
  • Change CSS build process to SCSS and LightningCSS
Patch changes
  • Fix table component text wrapping
All ACW-2243
ACW-3143
ACW-2973
11/18/2022 v0.8.1
Patch changes
  • Update navigation/header component
  • Fix mobile menu close icon getting covered by mobile menu
  • Button docs update
All ACW-2243
ACW-3143
ACW-2973
10/26/2022 v0.8.0
Minor changes
  • New Hero component
Patch changes
  • Fix bug with the table lines in Safari and Firefox
All ACW-2711
10/21/2022 v0.7.8
Patch changes
  • Changes to table component to support BS5 utility classes and variants.
All ACW-2711
10/18/2022 v0.7.7
Patch changes
  • Changed text input box shadow upon focus from primary to grey to match figma design
All ACW-1140-2
10/17/2022 v0.7.6
Patch changes
  • Added color utilities for all variations of Primary, Secondary, and Accent colors.
    For example, these include .bg-[color]-10 and .text-[color]-500.
  • Switch the @extends in footer to regular property declarations to reduce specificity. This way, we can override them with utility classes as necessary, not fight against them.
  • Updated Checkbox documentation.
  • Added .sub-item class back in to not break elements with this class
All ACW-2573
10/17/2022 v0.7.5
Patch
  • Refactored text inputs markup to have more bootstrap code and match Figma design
All ACW-1140
10/13/2022 v0.7.3
Patch fixes
  • Updated tables.scss for better presentation in modal.
All ACW-2711
10/03/2022 v0.7.2
Patch fixes
  • Updated JS for tables to work on load
All ACW-2217 tested in statsnap
9/26/2022 v0.7.1
Patch fixes
  • Change focus and active background color for List Items component
All ACW-1056
9/26/2022 v0.7.0
Minor updates
  • Add List Items component
Patch fixes
  • Add grey color tokens
  • Clean up lozenges scss file
  • Change accent-color lozenges to use warning (yellow) instead
  • Make lozenge text color dynamic with color-contrast function for theme options
All ACW-1056
9/19/2022 v0.6.1
  • Remove CSS custom property for RDG footer property
RDG ACW-1821 RDG, ReDMAS
9/14/2022 v0.6.0
  • Sidebar Navigation
Researcher Passport ACW-958
9/10/2022 v0.5.2
  • Add Typography section
  • Add Text Utility section
ACW-1141
9/7/2022 v0.5.1
  • Add .btn-wide class
  • Add .badge-sm class
  • Add back in .card classes
  • Fix Chrome issue with Wizard
ACW-1202
9/6/2022 v0.5.0
Update Card component
8/30/2022 v0.4.3
Cards with Statsnap variant
ACW-1126
8/30/2022 v0.4.2
Stepper added to docs
8/29/2022 v0.4.1
Fixed Navbar bug
ACW-772
8/25/2022 v0.4.0
Add Wizard component
ACW-953
8/23/2022 v0.3.2
Modify Bootstrap header utility classes, clean up table componenet code
ACW-1141
8/22/2022 v0.3.1
Add Navbar component
ACW-772
8/22/2022 v0.3.0
Add Font Awesome to the SCSS build, many smaller changes with lists and buttons.
ACW-611-C
7/20/2022 Move to static stylesheet. Refactor Modal styles and buttons for ReactBootstrap RDG-UI ACW-663 rdg, redmas, static