Orbit Multitheme 🚀

Create amazing experiences with the digital design system. This project contains the multitheme setup for the front-end code.

🛠 Install

Read the instructions on how to install the Orbit Package.

Run the following command, this will install the components in your node_modules folder.

npm i @randstad-design/orbit-multitheme

🔄 Updates

Once a new version has been released, we will update you via our distribution list.

📝 Documentation

Randstad.design is the public environment where all documentation, styleguides and live components can be found. Use this please also to get started as a developer.

Architecture

Depending on the architecture of your project, you can import from the /dist or /src folder. For Randstad, the dist folder has a compiled assets/theme-randstad/orbit-randstad.css and assets/js/human-forward.js file ready to use. If you want to use another brand, for example Spherion, use assets/theme-randstad/orbit-spherion.css, the JS file remains the same. The CSS files contain all the styling. When you only want to load components please read the section CSS component split below.

You can also use the unpkg cdn to bring in the JS file: https://unpkg.com/@randstad-design/orbit-multitheme/dist/assets/js/human-forward.js, if you want a specific version, use the following link: https://unpkg.com/@randstad-design/orbit-multitheme@4.10.0/dist/assets/js/human-forward.js (and update the version accordingly). The JS file remains the same for Spherion and Randstad.

Or the CSS file: https://unpkg.com/@randstad-design/orbit-multitheme/dist/assets/theme-randstad/orbit-randstad.css For Spherion: https://unpkg.com/@randstad-design/orbit-multitheme@4.10.0/dist/assets/theme-spherion/orbit-spherion.css

Tailwind

From version 1.2.0 on we are using a separate CSS file for the utility classes. Please include 'tailwind.css' found in src/assets/theme-[theme]/tailwind.css or dist/assets/theme-[theme]/tailwind.css into your project. Or use the unpkg cdn https://unpkg.com/@randstad-design/orbit-multitheme/dist/assets/theme-[theme]/tailwind.css. The orbit components are making use of the Tailwind utility classes. So it is mandatory to include this into your project. Feel free to use these utility classes in your project too. We are going to expand this with new utility classes later on.

CSS component split

The CSS had been set up in a way that it's not necessary to include all the styling by importing the complete assets/theme-[brand]/orbit-[brand].css files. It's possible to only load the general.css file from the __bundles folder. The components can be found in the __components folder. For more information about the set up please go to https://randstad.design/getting-started/developers/css-component-split/.

Readme for developers

Developers who would like to know more about the choices and architecture of the multitheme setup, feel free to take a look at our confluence page (request access first). https://randstadglobal.atlassian.net/wiki/spaces/ODS/pages/1109721103/Read+me+for+developers

✅ Release notes

7.6.0

7 February 2024

SVG → Randstad - Job Card(RXPIP-14348) : updates more illustration
HTML/SCSS → Randstad - Header 404(RXPIP-14351) : updates color and text alignment, removes media
SCSS → Randstad - Header Text(RXPIP-14423) : updates text alignment
SCSS → Randstad - CTA Box - Variation 2(RXPIP-14423) : updates text alignment

7.5.0

23 October 2023

HTML/SCSS → Randstad - Split View(GLODS-912) : add bullet list and non scalable image option
HTML/SCSS → Randstad - Body Copy(GLODS-933) : add yellow accents for enterprise
HTML/SCSS → Randstad - Topic Overview(GLODS-932) : add enterprise variant
HTML/SCSS → Randstad - Side Navigation(GLODS-0930) : add variant for unordered list
HTML/SCSS → Randstad - Category Overview(GLODS-930) : add new variants
HTML/SCSS → Randstad - CTA(GLODS-931) : add enterprise version

7.4.2

25 September 2023

SVG → Randstad - icons(GLODS-1002) : removes fill in X icon

7.4.0

4 September 2023

SVG → Randstad - icons(GLODS-890) : adds X icon

7.3.0

5 July 2023

HTML → Randstad - Speech Bubbles(GLODS-715) : removes unused variants
HTML/JS → Randstad - Charts(GLODS-718) : adds space to charts with horizontal axis label
SCSS → Randstad - Rating(GLODS-505) : keyboard navigation fix
HTML/SCSS/JS → Randstad - Autosuggest(GLODS-627) : adds search feature
HTML/SCSS → Randstad - Jobs(GLODS-708) : fixes image tag positioning for logo

7.2.0

13 March 2023

SCSS → Randstad - Rating → fix(426) : per star hover indicator
HTML/SCSS/JS → Randstad - Charts → update(GLODS-166) : Chart improvements
JS → Randstad/Spherion - Input Password → fix(GLODS-460) : Fix console error on space/enter of visibile toggle button
HTML → Randstad - Teaser → update(GLODS-165) : Create an 8-column variant of side by side teasers.

7.0.0

10 November 2022

JS → Randstad/Spherion - Donut/Pie Chart Section Borders → update(RBL-660) : Making borders for sections on pie charts/donut charts white
HTML/JS → Randstad/Spherion - Enable Decimals (float) Values on Charts → update(RBL-659) : Updating chart value function to allow float values. Added decimal values to the component data for confirmation and testing
HTML/SCSS → Randstad/Spherion - Check body-copy value rendered for typography → update(RBL-639) : Copy title class styles to be in heading selector rules as well and remove classes from html css/html
SCSS → Randstad/Spherion - Update font files → update(RBL-638) : Removed old ttf font files and replaced with woff2 for spherion
HTML/SCSS/JS → Randstad - Switch → new(RBL-634) : Added new switch component with color mixins for light and dark variant
HTML/SCSS → Randstad/Spherion - Update tooltip → update(RBL-643) : added primary brand color to tool tip

6.0.0

28 September 2022

SVG → Randstad/Spherion - Icons → update(RBL-590) : update icon-download and icon-download-30
HTML/CSS → Randstad - Preview → new(RBL-589) : Content preview: create a variant with a simple link
SCSS → Randstad - Navigation mobile → update(RBL-588) : Fix misalignment with Randstad logo and hamburger menu
HTML/CSS → Randstad - Navigation → new(RBL-587) : Navigation lang switcher: focus state not visible

5.9.0

15 September 2022

HTML/CSS → Randstad - Meta-location → update(RBL-550) : Meta-location: show lunch break in office hours
SCSS → Randstad - Checkbox Focus → update(RBL-520) : Blog filter: checkbox focus ring on checked state

5.8.0

17 Augustus 2022

SVG → Randstad/Spherion - Icons → new(1360) : added TikTok Icon
HTML/CSS → Randstad - Carousel Photo Speech Bubble 3 → new(1360) : Carousel photo component with 3 speech bubbles

5.7.0

2 Augustus 2022

SCSS → Randstad - Secondary Search Link → update(RBL-470) : Accessibility fix with link underline
SCSS → Randstad/Spherion - Cookie Button → update(1346) : Bottom margin fxed
JS → Randstad/Spherion - Overlay → update(1356) : Add focus on trigger element after closing video modal with escape
HTML/JS → Randstad/Spherion - Cards(1359) : Add tabindex -1 to hidden non tabbable items
HTML/JS → Randstad - Date Picker(1343) : Tab focuses on the actual date picker

5.6.0

5 July 2022

HTML/CSS → Randstad/Spherion - Secondary Search → update(1330) : Fix tabbing order in secondary search, button is last focused now
HTML → Randstad - Blog Articles → update(1312) : Update CTA to use body-copy class to support links
HTML → Randstad - Cookie → update(1311) : Updating cookie with body copy class
HTML → Randstad - Meta Content → update(1313) : Add link class to button in location component
HTML → Randstad- Related Jobs → update(1315) : Add link class to tag for related jobs
HTML → Randstad- Header Text → update(1315) : Add body-copy class for header text
HTML → Randstad - Track and Trace Timeline → update(1317) : Update track and trace for right link colors
HTML → Randstad - Pagination → update(1329) : Update pagination numbers to use link class
CSS → Randstad - List Items → update(1322) : add link styling to text alternative class
HTML → Randstad - Link Tags → update(1328) : update link color on tag for meta link tags
CSS → Randstad - Forms - Helper Text → update(1321) : Forms helper texts link affordance
HTML → Randstad - Modal → update(1344) : Add link and body-copy class for modal to show right link colors
HTML/JS/CSS → Randstad/Spherion - Password Field → bugfix(1341) : when tabbing through password field it doesn't show the password anymore

5.5.0

10 June 2022

SCSS → Randstad - Header Selector → update(1301) : Avoid tabbing through closed dropdown items in header selector
HTML → Randstad/Spherion - Blog Articles → update(1307) : Fix HTML order for tabbing order
SCSS → Randstad - Photo Carousel / Photo Header / Video Header / Boxed large / Video Full width → update(782) : light font color changed to white
HTML/SCSS → Randstad - Category Overview → new(1310) : added missing category overview component to prototype

5.4.0

25 May 2022

HTML/CSS → Randstad/Spherion - Article Overview → update(1294) : Visible focus on interactive carousel elements
HTML/CSS → Randstad/Spherion - Rating → update(971) : Makes rating component accessible
HTML/CSS → Randstad - Notice in Page → update(1308) : Updating border color\
JS → Randstad/Spherion - Video Overlays → update(1298) : Add trap focus to video popover components
HTML/CSS/JS → Randstad - Tags → update(1287) : adding keyboard focus states to tags for accessibility
CSS/HTML → Randstad - Input Field → update(1229) : added required asterisk to input field
CSS → Randstad - My Environment Cards → update(1272) : changed my environment item card header title to brand-secondary color
HTML → Randstad - Video Boxed Large Speech Bubble → update(1309) : fix mobile version alignment
HTML/JS → Randstad/Spherion - Maps → update(1320) : Fix missing marker/cluster icons in prototype

5.3.0

11 May 2022

HTML/CSS → Randstad/Spherion - Rating → update(971) : Makes rating component accessible
HTML/CSS → Randstad - Jobs Nearby → update(1267) : Links now have the right color on brand-tertiary background
HTML/JS → Randstad - Navigation → update(212) : Added aria labels that are localizable to mobile menu button
HTML/CSS → Randstad/Spherion - Logos → update(981) : Making logos tababble and link selectable
CSS → Randstad - Ghost Button → update(1257) : Updating ghost button on tertiary background
CSS → Randstad/Spherion - Input with Currency → update(1265) : Updating color contrast of Input with currency
CSS/HTML → Randstad - Charts Line → update(1268) : Fixing table error and darkening axis legends
CSS/HTML → Randstad - Notice in Page → update(1269) : Updated links to secondary color
CSS/HTML → Randstad - Notice Text Only → update(1270) : Updated links to secondary color
CSS → Randstad/Spherion - Tags → update(1277) : Updating tinted tags to use secondary text
CSS/HTML → Randstad- Tags → update(1259) : Button--clean class is now color mapped. Removed button-clean--link class
JS → Randstad/Spherion - Maps → update(1296) : Removed custom road featureType for maps, so that road labels are visible again
CSS → Randstad - Avatar → update(1261) : Removed transparency from avatar colors
CSS → Randstad - Popover Large / Avatar → update(765) : Background color change on brand-tertiary
CSS → Randstad/Spherion - Article/Topic overview → update(773) : changing arrow color to white
HTML/CSS → Randstad - Cards → update(1275) : background color mapping for brand-tertiary
CSS → Randstad/Spherion - Image gallery → update(766) : icons to white on modal
JS → Randstad/Spherion - Video Overlay → update(1297) : accessibility fix closing the modal with escape button or enter is now possible
HTML/CSS → Randstad - Carousel Photo / Video Boxed Large / Video Full Width → update(1299) : accessibility and SEO fixes for new Rebranded Components
CSS → Randstad/Spherion - Radio Buttons → update(1273) : changing color contrast for disabled

5.2.0

29 April 2022

JS → Randstad - Chat → update(1228): the chat is now fully accessible with a keyboard
HTML/CSS → Randstad/Spherion - Forms → update(969): all form elements have a focus state and are accessible with a keyboard
HTML/CSS → Randstad/Spherion - Tooltip → update(976): the tooltip is now accessible with a keyboard
HTML/CSS → Randstad - Tooltip → update(769): changed the color contrast of the tooltip for accessibility
HTML → Randstad/Spherion - Data Table → update(968): sorting is now accessible in the data table
HTML/JS → Randstad/Spherion - Input Password → update(1289): adding dynamic amount of mandatory characters for password, with a fallback to 8
HTML/JS → Randstad/Spherion - Input → update(1260): Optional labels for input fields have now a sufficient color contrast
CSS → Randstad/Spherion - Job Cards → update(1266): Changed the color contrast of the description on the job cards for accessibility
HTML/CSS → Randstad - Chat → update(1263): changed the contrast of the links in the speech bubble made by the bot for accessibility

5.1.0

14 April 2022

HTML → Randstad/Spherion - Tags → update(975) : added tabindex to tags
JS → Randstad/Spherion - Header Selector / Toast / Popover / Modal → update(979) : made header selector keyboard accessible, made trapfocus a global function
HTML → Randstad/Spherion - Video Full Width / Video Boxed Large → update(984) : added aria-labels
HTML → Randstad/Spherion - Video Small→ update(985) : added aria-labels
HTML → Randstad/Spherion - Meta Content Location → update(982): made the collapsible link accessible with keyboard
SVG → Randstad/Spherion - Icon → new(1291): cookie icon
HTML/CSS → Randstad/Spherion - Body Copy → update(1274): links in body copy have now an underline
HTML/CSS → Randstad- Charts → update(1274): links in charts have now an underline and the color of the links on a brand-tertiary background are now brand-secondary
HTML/CSS → Randstad/Spherion - Content Table → update(1279): links have now an underline and the color of the links on a brand-tertiary background are now brand-secondary
HTML/CSS → Randstad - Filter → update(1280): links have now an underline and the color of the links on a brand-tertiary background are now brand-secondary
CSS → Randstad/Spherion - Accordion → update(1281): links have now an underline and the color of the links on a brand-tertiary background are now brand-secondary

5.0.0

14 March 2022

HTML/CSS → Randstad → Carousel Photo → update(1232) - Brand refresh
HTML/CSS → Randstad → Video Full Width → update(1237) - Brand refresh
HTML/CSS → Randstad → Video Boxed Large → update(1239) - Brand refresh
HTML/CSS → Randstad → Header Illustration → update(1233) - Brand refresh
HTML/CSS → Randstad → Meta Sharing → update(1234) - Brand refresh
HTML/CSS → Randstad → Header Multiple CTA → update(1235) - Brand refresh
HTML/CSS → Randstad → Split View Illustration → feature(1238) - Brand refresh
HTML/CSS → Randstad → Carousel Photo → update(1245) - Brand refresh optimizations
HTML/CSS → Randstad → Input Fields → bugfix(1249) - Removed nowrap on form label and fixed the password field with a tailwind utility
CSS → Randstad → Tab bar → bugfix(1244) - when using the 'bg-variant-{color}' background colors this component now also shows the right link colors

4.11.0

14 February 2022

CSS → Randstad/Spherion → Popover Large→ bugfix(1224) - Removed the overflow hidden, so autosuggest box will overflow over the popover
HTML/CSS → Randstad/Spherion → Input Field → bugfix(1225) - Forget password now has a flexible width, while the label has a fixed width
JS → Randstad/Spherion → Navigation→ bugfix(1226) - Removed the icon-toggler__active class on every collapsible item when closing the mobile navigation
HTML/CSS→ Randstad/Spherion → Tab bar → bugfix(1227) - made the clickable area of the tab bigger
HTML → Randstad/Spherion → Content Items Preview → chore(977) - Fixed button to make it accessible with a keyboard
JS → Randstad/Spherion → Toast → feature(973) - Accessibility: Tabindex for toast

4.10.0

26 January 2022

JS/HTML→ Randstad/Spherion → Popover/Modal → chore(947) - Popover and Modal are now fully accessible with keyboard
JS → Randstad/Spherion → Collapsible → chore(1175) - Overrides fix for FFW
JS → Randstad/Spherion → Carousel → chore(1168) - Overrides fix for FFW
JS/HTML → Randstad → Character Count → chore(1170) - Fix overrides for FFW
JS/HTML → Randstad → Chat → feature(1219) - Selectable tags with a new input dialog and refactored some code for overrides FFW
SVG → Randstad→ Icons → new(1220) - Factory Icon

4.9.1

6 January 2022

JS/HTML/CSS → Randstad → Audio Box → bugfix(1223) - Audio Box not collapsing anymore because previous accessibility fixes

4.9.0

3 January 2022

JS → Randstad/Spherion - Maps → update(1152) : added maximum zoom level for clusters, so there are no clusters on the lowest zoom level
HTML → Randstad/Spherion - Tooltip → bugfix(1012) : it's possible to open the tooltip now on an iOS device
HTML → Randstad/Spherion - Image gallery → bugfix(1207) : Align arrows on bottom at image gallery for mobile
HTML → Randstad/Spherion - Split View Illustration → update(993) : Removed top padding of the illustration
CSS → Randstad/Spherion - Forms Input Field → update(1136) : Removed truncation at form group action link (e.g. password forgotten link)
CSS/HTML → Randstad/Spherion - Text Source → new(1218) : text source is now a separate component from body copy
CSS/HTML → Spherion - Content Table → new(1217) : content table component is now also available for Spherion
CSS/HTML → Randstad/Spherion - Body Copy → update(1215) : Fix heading sizes h3 and h4 for body copy
HTML/JS → Randstad/Spherion - Accordion → update(966) : Made accessible with a keyboard
CSS/HTML → Randstad/Spherion - Cards → update(983) : Made accessible with a keyboard

4.8.0

6 December 2021

HTML/CSS → Randstad - Filter → chore(1042) : color mapped
HTML/CSS → Randstad/Spherion - Avatar → bugfix(1142) : aspect ratio images fix
JS/CSS → Randstad/Spherion - Filter → bugfix(1118) : Accordion not collapsing when initially expanded. Fixed the initially expanded functionality
HTML/CSS → Randstad - Job Card → feature(988) : added tabbing for accessibility on job cards
JS → Randstad / Spherion - Maps → feature(1127) : added position option to the datepicker
CSS → Randstad / Spherion - Buttons → bugfix(652) : minor color fixes to button in chat button group and datatable
CSS → Randstad/Spherion - Other → chore(1144) : fixed w3.org CSS validation errors
CSS → Randstad - My Environment→ chore(1210) : color mapped
HTML/CSS → Randstad - Buttons → feature(937) : added new focus state to buttons

4.7.0

22 November 2021

CSS → Spherion - Social icons → bugfix(1153) : fix hover color header/meta
HTML/CSS → Randstad - Filter → chore(1042) : color mapped
HTML/CSS → Randstad - Meta Content → chore(1047) : color mapped
HTML → Randstad - Secondary Search → chore(1054) : color mapped
HTML/CSS → Randstad - Show More → chore(1056) : color mapped
HTML → Randstad - Related Jobs → chore(1053) : color mapped
HTML/CSS → Randstad - Video → chore(1058) : color mapped
HTML/CSS → Randstad - Footer → chore(1043) : color mapped
HTML → Randstad/Spherion - Form Groups → feature(1140) : accessibility update grouped checkboxes and input fields
CSS → Randstad/Spherion - SVG → chore(1151) : new disabled icon
HTML/CSS → Randstad - Accessibility → new(1143) : skip content link
SVG → Randstad/Spherion → new(1154) : half-filled star icon
CSS → Randstad - Modal → bugfix(1135) : mobile view color map fix
HTML → Randstad - Content table → chore(1133) : added content

4.6.0

8 November 2021

HTML → Randstad/Spherion - Accessibility → chore(1137) : add aria-label and/or role properties to icon buttons
HTML/CSS → Randstad - Notification in page → feature(1005) : new variant 'subtle'
HTML/CSS → Randstad - Button → chore(917) : deprecate button--l
CSS → Randstad/Spherion - Autosuggest → chore(991) : adjust vertical spacing autosuggest options
CSS → Randstad - Navigation → bugfix(1132) : fix breadcrumb icon color
CSS → Randstad - Cards → bugfix(1105) : fix Cards background dependencies for old and new color map
CSS → Randstad - Cards → bugfix(1148) : fix gradient of backside
CSS → Randstad - Navigation → bugfix(1147) : Fixed height issue in top navigation at My Randstad service link

4.5.0

26 October 2021

HTML/CSS → Randstad - Button Filled → bugfix(905) : SVG color fix
HTML/CSS → Randstad - My Environment → chore(1049) : color mapped
HTML/CSS → Randstad - Person Profile → chore(1040) : color mapped
HTML/CSS → Randstad - Call To Action → chore(1036) : color mapped
HTML/CSS → Randstad - Carousels → chore(1038) : color mapped
HTML/CSS → Randstad - Promotional Text → chore(1052) : color mapped
HTML/CSS → Randstad - Cards → chore(1037) : color mapped
HTML/CSS → Randstad - Charts → chore(1039) : color mapped
HTML/CSS → Randstad - Content Items → chore(1041) : color mapped

4.4.0

11 October 2021

HTML/JS/SVG → Randstad/Spherion - Maps → update(1114) : addition of cluster and new svg markers
CSS → Randstad/Spherion - Category Overview → update(1108): added a line clamp mixin
HTML/CSS → Randstad - Link list → update(1087) : added a card version
HTML/CSS/JS → Randstad - Chapter Navigation → new(1086) : navigation for chapters on content page, makes use of selector component (header). Which is a separate component now too.
HTML/CSS → Randstad - Content Table → new(1010) : new content table component
HTML/CSS → Randstad - Teaser → update(1007) : small version
CSS → Randstad - Icon → bugfix(1123) : hover fix when color overrides are applied
HTML/CSS → Randstad - Link List - Location → bugfix(1125) : fix on color of icon

4.3.0

27 September 2021

Other → Randstad/Spherion → chore(1101) : addition of a license fill since Orbit is now public
HTML/CSS → Randstad - Data Table → chore(1023) : color mapped
HTML/CSS → Randstad - Sortbar → chore(1030) : color mapped
HTML/CSS → Randstad - Tab Bar → chore(1031) : color mapped
HTML/CSS → Randstad - Link Lists → chore(1044) : color mapped
HTML/CSS → Randstad - Split View → chore(1057) : color mapped
HTML/CSS → Randstad - Headers → chore(1021) : color mapped

4.2.1

1 September 2021

CSS → Randstad/Spherion - Badge → bugfix(1099) : icon shrink fix
CSS → Randstad/Spherion - Carousel → bugfix(1111) : lower z-index for dots
CSS → Randstad/Spherion - Tailwind → chore(1107) : Add gap-0 to tailwind and responsive width
CSS → Randstad - Masked SVG → bugfix(1110) : no repeat fix

4.2.0

30 August 2021

HTML/CSS → Randstad - Badge → chore(1026) : Background Variant color mapping
HTML/CSS → Randstad - Forms → bugfix(1078) : removed line-height 0 from form-group, fixed with flexbox
HTML/CSS → Randstad/Spherion - Avatar → chore(1074) : Background Variant color mapping
CSS → Randstad/Spherion - Indicator → chore(1024) : Background Variant color mapping
CSS → Randstad/Spherion - Track & Trace Timeline → chore(1077) : Background Variant color mapping
HTML/CSS → Randstad/Spherion - Location details → chore(1026) : Background Variant color mapping
HTML/CSS → Randstad - Notifications/toast → chore(1028) : Background Variant color mapping
HTML/CSS → Randstad - Tags → chore(1032) : Background Variant color mapping
CSS → Randstad - Checkbox → bugfix(1091) : Fix overflow text with hyphenation when used in meta content.
CSS → Randstad - Modal → bugfix(1106) : fixed missing comment symbol and class

4.1.2

16 August 2021

HTML/CSS → Randstad - Audio Box → new(707) : audio component
HTML/CSS → Randstad/Spherion - Badge → new(1015) : XL version for job card & color classes
HTML/CSS → Spherion - Split View Photo → update(1008) : add caption
HTML/CSS → Randstad/Spherion - Popup → new(622) : Form popup
HTML/CSS → Randstad - Notifications → chore(1050): Background Variant color mapping

4.0.2

6 August 2021

HTML/CSS → Randstad - Overlays → bugfix(1070) : fix the transparent background

4.0.1

3 August 2021

HTML/CSS → Randstad - Overlays → bugfix(1070) : fix the transparent background
CSS → Randstad - Buttons → bugfix(1067) : fix the hover state of the filled button

4.0.0

2 August 2021

HTML/CSS → Randstad/Spherion - Forms → chore(1022) : Background Variant color mapping
HTML/CSS/JS → Randstad/Spherion - Overlays → chore(1051) : Background Variant color mapping
HTML/CSS → Randstad/Spherion - Pagination → chore(1029) : Background Variant color mapping
HTML/CSS → Randstad - Body Copy → chore(1035) : Background Variant color mapping
HTML/CSS → Randstad - Buttons → chore(1063) : Background Variant color mapping
HTML/CSS → Randstad/Spherion - Content Items / Overviews → chore(1024) : Background Variant color mapping
JS → Randstad / Spherion - carousel.js → update(1062) : Update loading order of slick elements

3.0.0

12 July 2021

HTML/CSS/JS → Randstad/Spherion - Carousel photo → update(654) : Make carousel dot color dependent on text color per slide
HTML/CSS → Randstad/Spherion - Notifications/Toast → update(940) : style spacing and buttons
HTML → Randstad - Sticky Nav → update(948) : Added extra padding when used in combination with content item (tailwind class)
HTML/CSS → Randstad - Navigation - Popover Account only → update(1000) : Class added navigation\_\_service--minimal so popover points to account when service nav does not include language toggle
SVG → Randstad/Spherion → new(1006) : wechat filled icon
HTML/CSS/JS → Randstad - Chatbot → update(933) : bubble on enter, removed and reordered data attributes, fixed spelling mistakes
HTML/CSS/JS → Randstad - Chatbot → update(997) : settings section for both embedded and normal chat
CSS → Randstad/Spherion - chore(840) : SCSS folder structure adjusted, removed one layer /theme to fix scss font issue with external compilers
HTML/CSS/JS → Randstad/Spherion - Carousel Photo & Quote → bugfix(1016) : fixed spacing issues and height of dots

2.3.0

28 June 2021

HTML/CSS → Randstad - Accordion → chore(914) : Implementation of new color map base and accordion
HTML/CSS/JS → Randstad - SEO Teaser → new(934) : Teaser cards for SEO
HTML/CSS → Randstad - 404, Article Overview, Author, Account Settings (ME) → chore(989) : Implementation of new color map
CSS → Spherion - chore(880) : Implementation of Tailwind for Spherion

2.2.1

14 June 2021

CSS → Randstad - Job Card → feature(952) : Fix color bug for favorites icon
HTML/CSS → Randstad/Spherion - Avatar → feature(615) : Unified approach to Avatar HTML & CSS throughout Orbit
HTML → Randstad/Spherion → feature(928/615) - Avatar : Implement Avatar HTML on: modal, popover-large, author, carousel quote, contact-person, meet-the-team, my-environment-profile, RCE-header, RCE-Speech-bubble.
HTML → Randstad/Spherion - Image → update(954) : remove HTML to serve second image .This component now has 1 image and 1 aspect ratio
HTML/CSS → Randstad/Spherion → deprecate(827) : Deprecate Blog Article Items: image, quote, video. Blog-Article items is replaced by Content Items (image, quote, video, author, download, meta, related).
HTML/CSS → Randstad - My Environment → update(963) : remove title--L HTML/CSS for My Environment - account settings and replaced with title--M

2.1.1

04 June 2021

HTML → Randstad - Infographic → new(935) : infographic component with optional title and content. Example PNGs included

2.1.0

31 May 2021

HTML/CSS/JS → Randstad - Sticky navigation → new(926/805) : sticky side/top navigation Table of Contents with scrolling functionality
HTML/CSS → Randstad - Chatbot embedded → update(922) : Create HTML chatbot embedded version. Embedded on destkop, controlled by button on mobile.
HTML/CSS → Randstad/Spherion - Content-item video → update(942) : adjust fontsize for video subscripts with new CSS class
CSS → Randstad/Spherion - Card & My Environment meta items → update(946) : add word wrap CSS rules for links in meta items & timeline

2.0.0

17 May 2021

This is a major version upgrade, since there is a breaking change, please read https://randstad.design/getting-started/developers/releases/ for more information.

HTML → Randstad/Spherion - SVG renaming/delete → update(916) : rename SVG's and delete unused ones.
CSS → Randstad/Spherion - Button → bugfix(927) : Safari and iphone alignment of the icons on the button tag
CSS → Randstad - modal color mapping → bugfix(920) : adjust CSS so the text color setting within a modal is restricted to the modal color setting, not to the color setting of its parent page.

1.6.0

07 May 2021

HTML/CSS/JS → Randstad → feature(858/931) : Randstad Conversation Engine (RCE)

1.5.0

03 May 2021

CSS → Randstad/Spherion - images → update(692) : replaced prototype images in repo with updated ones (names of image assets are unchanged), added CSS rules to better enforce aspect ratios for image related components
HTML/CSS → Randstad - color variables + badge → update(814) : CSS color blue-10 changed to blue-7. This changes TW class in badge.html
HTML → Randstad - notifications/toast → fix(837) : minor content change: lowercase letter to uppercase letter
HTML/CSS → Randstad/Spherion - notifications/notice-in-page → update(870) : Add warning variation to notification-in-page components, introducing 2 new yellow warning colors in CSS setup

1.4.0

19 April 2021

HTML/CSS → Randstad/Spherion - Extensive Link List, Navigation, Data Table, Accordion → update(468) : removed collapsible__button class, replaced with toggle-arrow class, use chevron.svg. Added 'chevron-30.svg' to Accordion for larger screens.
CSS → Randstad → update(774) : removed color for text--emphasis class for dark blue backgrounds
HTML/CSS → Randstad/Spherion - Tag → update(815) : introducing new tag--s. Uses icon close-8.svg. Tailwind class for text size.
CSS → Randstad - Tailwind → update(894) : added !important tags to Tailwind classes for higher specificity.
HTML → Randstad - Modal - Version 2 → update(883) : adjusted two margin utilities on person and button-group components.
HTML/CSS → Randstad - My Environment → update(884) : fixes specificity issue with Tailwind. Adds Tailwind margin utilities to HTML. Removes CSS for My Environment that is now handled with Tailwind.
HTML/CSS → Randstad/Spherion - Indicator - track-and-trace-timeline → new(709) : new Track and Trace Timeline component. New img ‘clock.svg'. Component created on full width, can be placed on page using grid utilities from Tailwind.
HTML → Randstad/Spherion - Button → update(862) : adds small versions of button--plain in button library (with and without icon).
CSS → Randstad - Contact Component → bugfix(733) : undo color rule for icons so they are now dark-blue.
HTML/CSS → Randstad - Badges → update(796) : removed red and turquoise badges.
HTML/CSS → Randstad/Spherion - Badges → update(797) : adds blue-10 positive and negative as color versions.
CSS → Randstad - Card → bugfix(614) : CSS change to prevent icon from moving outside of parent in Card component.
SVG → Randstad/Spherion → update(836) : adds new SVG's, update thumb-up.svg
CSS → Spherion - Navigation → update(911) : relate grey separator to bottom-nav and breadcrumb instead of top-nav, so it does not show when only top nav is visible.

1.3.0

02 April 2021

HTML/CSS → Randstad/Spherion - Forms - Input field currency → update(799) : Remove obsolete css classes and add one new in HTML for currency Input field. Changed CSS to enable character field for currency. Also accommodates icons.
HTML/CSS → Randstad/Spherion - Content Items - Content Video → new(858) : Allows to have content over background image with a video modal trigger button. NOTE: On dekstop, the image is a background URL with content
HTML/CSS → Randstad/Spherion - Content Items - Content Video → new(858) : Allow for content over image with video modal trigger button. On small viewports image and content are separated. NOTE: On dekstop, the image is a background URL with content over it. Image changeable directly in the HTML
HTML/CSS → Randstad/Spherion - Accordion → update(848) : Add optional <p> to idle accordion title, creates standalone version without header change. Collapsible button from a plus to a chevron
HTML/CSS → Randstad - Content Items - track-and-trace-card → new(664) : job-card variation for track and trace content. Logo version included. Same structure as job-card, but with less options/functionalities. over it. Image changeable directly in the HTML
JS → Randstad/Spherion → update(891) : added tailwind.config to the NPM package
SVG → Randstad/Spherion → add(889) : added thumbs up and thumps down icon
CSS → Randstad/Spherion → update(794) : New font size of 14px added to SCSS files
CSS → Randstad → update(745) : changed the positive5 and negative5 color
CSS → Randstad → update(861) : Font sizes, font colors, border radius, grid, width and text-align added to Tailwind

1.2.1

22 March 2021

HTML → Randstad/Spherion → Content Items - Preview → class update in HTML
HTML → Randstad → My Environment - Profile → class update in HTML
HTML → Randstad → My Environment - Edit Badge → class update in HTML
HTML → Randstad → My Environment - Job Preferences → class update in HTML

1.2.0

Introduction of Tailwind.css!

22 March 2021

CSS → Randstad → add(DF909-877) : Flexbox utilities to Tailwind
CSS → Randstad → My Environment → add(DF909-803) : a smaller view for the block__content(block__content--xs) to realise 3/7/2 grid
HTML/CSS → Randstad/Spherion - Content Item - Highlight → new(DF909-851) : New Highlight component. Added .title--xs for main title in body copy. Added bg-brand-tertiary for off-white background. Ranstad component uses Tailwind, Spherion component does not.
HTML/CSS → Randstad/Spherion - Content Item - Quote → update(DF909-852) : HTML based on existing Quote HTML, introducing new .title-xs class for main content. Ranstad component uses Tailwind, Spherion component does not.
HTML/CSS → Randstad/Spherion - Content Item - Image → update(DF909-853) : HTML based on existing article item Image HTML. Note: Two images are served depending on aspect ratio needed per viewport. Ranstad component uses Tailwind, Spherion component does not.
HTML/CSS → Randstad/Spherion - Content Item - Video → update(DF909-854) : HTML based on existing article item video HTML, HTML tags SEO approved. Note: Two images are served depending on aspect ratio needed per viewport. Playing video opens a modal. Ranstad component uses Tailwind, Spherion component does not.
CSS → Randstad → new(DF909-850) : additional stylesheet (tailwind.css) with utilities for spacing, background colors and position
HTML/CSS → Randstad - My Environment → bugfix(DF909-859) : Assign block__title HTML and CSS to standalone H2 headers in My Environment. (currently present in: dashboard, overview empty, overview filled). Component uses Tailwind.
CSS/HTML → Spherion → new(DF909-843) : addition of purple gradient sub brand color to call to action box, link list categories, split view photo and link list featured
CSS → Randstad/Spherion → add(DF909-863) : CSS for placeholder pseudo element so AA color is compatible with default Firefox browser placeholder.
HTML/CSS → Randstad/Spherion - Content Item - Section Title → new(DF909-855) : New HTML, new CSS class title--xs for paragraph header. Ranstad component uses Tailwind, Spherion component does not.
HTML/CSS → Randstad/Spherion - Content Item - Preview → new(DF909-856) : New component HTML and CSS media preview. Image is optional. Randstad component uses Tailwind, Spherion component does not. Note: different version for modal link and regular link.
HTML/CSS → Randstad - Content Items - Tailwind → update(DF909-867) : Implemented Tailwind classes for Randstad Content Item components within this release. Spherion uses Orbit CSS, but naming structure equal to Tailwind to enable possible future Tailwind integration Spherion.

1.1.6

8 March 2021

SVG → Randstad/Spherion - Icons → new(DF909-833) : eye strikethrough icon added
HTML → Randstad/Spherion → Uploads → update(DF909-528) : added uploaded state, removed read-only limit reached and error exhausted state
JS/HTML/CSS → Randstad/Spherion → datepicker → update(DF909-793) : added data-attribute for localisation of 'clear' and CSS fix for the width of the box of the calendar month
HTML/CSS → Randstad - My Environment → update(DF909-832) : removable-cards component closable updated, created My Environment page examples in _06/pages folder
HTML/CSS → Randstad - My Environment → update(DF909-829) : randstad logged in variant of the navigation my-environment/navigation.html.
HTML → Randstad - My Environment → new(DF909-830) : example of Randstad homepage logged out/logged in state 06_pages/my-environment.
HTML/CSS → Randstad/Spherion → My Randstad → deprecate(DF909-727) : removed My Randstad HTML and added deprecate notification for related CSS and images
HTML/CSS → Randstad/Spherion → popover large initials/video → update(DF909-844) : removed CSS and added custom greeting to eyebrow
HTML/CSS → Randstad → secondary search → bugfix(DF909-846) : add (existing) classnames for button color in secondary search HTML
CSS → Randstad → modal / popover → bugfix(DF909-834) : fixed the font color issue in the button
CSS → Randstad/Spherion → datepicker → bugfix(DF909-835) : upgrade of flatpickr and removed default html5 calendar icon from input type="date"

1.1.5

22 February 2021

HTML/CSS → Randstad - My Environment → new: Edit Avatar component for My Environment
HTML/CSS → Randstad - My Environment - Dashboard → new: dashboard card component
HTML/CSS → Randstad - My Environment - Job Alerts → update: New HTML / CSS for Job Alerts component
HTML/CSS → Randstad/Spherion → Overlays → added: photo and buttons to modal
HTML/CSS → Randstad/Spherion - Notifications → update: Notice Text-only component (readonly, closable and closable + icon)
HTML/CSS → Randstad/Spherion Notice → rename: notice-text-only to notice-alert
HTML/CSS → Randstad/Spherion - Related Jobs → update: add tooltip text to related jobs component
SVG → Randstad/Spherion - Icons → new: 8 new icons added

1.1.4

9 February 2021

orbit.randstad.scss hotfix

1.1.3

8 February 2021

HTML/SVG → Randstad/Spherion → Icons → update/bugfix : update icons for aligment + update icon name
HTML/CSS → Randstad - My Environment → new Edit Avatar component for My Environment
HTML/CSS → Randstad - My Environment → Editable list component for Rating content My Environment
HTML/CSS → Randstad - My Environment → Editable list component for Link content My Environment
HTML/CSS → Randstad - Tab Bar → new: Tab bar with icons
HTML/CSS → Randstad - Tab Bar → update: now available with three background color options (this, grey and off-white)
HTML/CSS → Randstad - My Environment - Settings → update : change current account delete component My Randstad to new HTML & CSS for My Environment
HTML/CSS → Randstad - My Environment - settings → new: component for Consent in My Environment Settings page
HTML/CSS → Randstad - My Environment - Removable card → new component for My Environment
HTML/CSS → Randstad - My Environment → Editable list component for Badge content My Environment
HTML/CSS → Randstad - My Environment → HTML and CSS for My Environment listed content plus header
HTML/CSS → Randstad overlays - Poll → bugfix: enable color scheme for all poll variants
SCSS → Randstad/Spherion → Fixed scss deprecations and extend loops
CSS → Randstad/Spherion → Font size and padding adjustments to the button small
JS → Accessibility → Tooling for test automation on Accessibility added

1.1.2

25 January 2021

JS → gulpfile → fixed some issues in the gulpfile and improved the performance
JS → backstop → upgraded backstopjs package and improved backstopjs setup for testing on Apple M1 machines

1.1.1

18 January 2021

CSS → multitheme → banner → update → increased the column width of the content by 1 for default and small modifier
CSS → multitheme → banner → update → long words will not break anymore by adding an overflow wrap to it
CSS → multitheme → header → update → increased the column width of the content by 1
CSS → multitheme → header → update → long words will not break anymore by adding an overflow wrap to it
CSS → multitheme → video → update → video boxed large has now a smaller font size
CSS → multitheme → header → fix → when header was used in combination with full width media block and small modifier the picture was cut in half
CSS → multitheme → cards → bugfix : padding
HTML/CSS → multitheme → fix → fixed the line-heights of the button text for all buttons
HTML/CSS → multitheme → Button Small → Added a button small for all themes
HTML/CSS → multitheme → footer → update : new content + styling
CSS → Spherion → modal-cookie → updatex → enable cookie for spherion and adjust styling
HTML/CSS → Randstad → general → update → AA accessibility update for Randstad Designs, HTML button, toast, upload, list-items classname changes

1.1.0

22 December 2020

JS → flatpickr version update
REPO → icons → new : two new icons have been added: 'shield' and 'whatsapp'
HTML/CSS → footer, meta-content, contact-person, meet-the-team → new : social icons have been renamed to --filled
CSS → meta location → update : updated styling to fit US time notation

1.0.0

14 December 2020

CSS → multitheme → forms - selection control → update : Multitheme CSS adjustment for alignment of form elements like checkboxes and labels
CSS → multitheme → forms - labels → update : remove ellipsis from styling
CSS → Randstad → my Randstad - profile → update: 2 to 3 column width
CSS → Spherion → footer → update : CSS change text--alternative value
HTML/CSS → Spherion → assets → update : provide new favicons on central location assets/image/favicons for developers

0.9.0

7 December 2020

HTML/CSS → Randstad/Spherion Image gallery → update: add close button in html and rename stylesheet
HTML/CSS → Spherion → colors → update: classname change and add HTML for each bg color
HTML/CSS → Spherion → colors → update: CSS color change for button classes
HTML/CSS → Spherion → Notification - notice-text-only → update: class name change + css color mapping
HTML/CSS → Randstad/Spherion → navigation - logo → update: replace class name logo-randstad with logo
HTML → Spherion → Split view - illustration → update: class name change + illustration change
HTML → Spherion → Accordion → update: remove class name button
HTML → Spherion → Notifications - Toast → update: class name change
HTML → Spherion → headers - photo, carousels - photo, call-to-action - variation-2, promotional-text → update: class name change
CSS → Spherion → colors → update: new color hex for ultra dark grey
CSS → Spherion → fonts → update: add fallback font to css

0.8.0

30 November 2020

REPO → BackstopJS → update : multi-theme changes
HTML → Spherion badge group → update: class name change
HTML/CSS → Spherion button white → update - class name change
CSS → Spherion/Randstad color mapping theme folder → update: remove redundant specific background colors which are not applicable for that theme
CSS → Randstad → update - CSS merge old Orbit 5.2 release into Multitheme 0.8.0
CSS → show more → update : add component CSS
CSS → tags → update : add component CSS
CSS → tag group → update : add component CSS
CSS → rating → update : add component CSS
CSS → Spherion modal → update - css variable update
CSS → Spherion popover → update - css variable update

0.7.0

23 November 2020

HTML/CSS → Spherion header photo → update - class name change
HTML/CSS → Spherion header video → update - class name change
HTML/CSS → Spherion video full width → update - class name change
HTML/CSS → Spherion video boxed large → update - class name change
HTML/CSS → Spherion carousel photo → update - gradient and class name change
HTML/CSS → Spherion jobs nearby → update : class name change
HTML/CSS → Spherion notification - notice action → update : class name change
HTML/CSS → Spherion carousels quote → update : class name change
REPO → .editorconfig → update : add/refactor settings
CSS → Spherion/Randstad color mapping atoms + molecules → update : mixins for specific background colors
CSS → Spherion/Randstad color mapping organisms → update : mixins for specific background colors

0.6.0

15 November 2020

HTML → Spherion extensive link list → update : class name change
CSS → Spherion cards jobs → update : class name change
CSS → Spherion color mapping → new : class name change
HTML/CSS → Spherion blogs - topic overview : class name change
HTML/CSS → Spherion cards - events : class name change
HTML/CSS → Spherion header compact text → update: class name change
HTML/CSS → Spherion header multiple CTA → update: class name change
HTML/CSS → Spherion header selector → update: class name change
HTML/CSS → Spherion header text → update: class name change
HTML/CSS → Spherion indicators - rating → update : class name change
HTML/CSS → Spherion list item - location → update : class name change
HTML/CSS → Spherion notifications - notice in page → update : class name change
HTML/CSS → Spherion notification - notice confirmed → update : class name change
HTML/CSS → Spherion popups - cta → update : class name change
HTML/CSS → Spherion popups - poll → update : class name change
HTML/CSS → Spherion secondary search → update : class name change

0.5.0

10 November 2020

HTML → Spherion headers → update: html navigation outside the html of the header
HTML/CSS - Spherion CTA box variation 1 and 2 - class name change
HTML/CSS → Spherion show more → update : class name change
HTML/CSS → Spherion link list - featured → update : class name change
HTML/CSS → Spherion data table → update : class name change
HTML/CSS → Spherion video - boxed small → update : class name change
HTML/CSS → Spherion header 404 → update: class name change
HTML/CSS → Spherion header Meta → update: class name change
HTML/CSS → Spherion indicators - strength → update : sentence casing + class name changes
HTML/CSS → Spherion notification - text only → update : class name change
HTML/CSS → Spherion charts → update : class name change
HTML/CSS → Spherion meta-content → update : class name change
HTML/CSS → Spherion blog components → update : class name change
HTML/CSS → Spherion pagination → update : class name change
HTML → Spherion popover - small → update : sentence casing of content
CSS → Spherion color scheme → update
CSS → Spherion tooltip → update
CSS → Spherion indicator - step → update
CSS → Spherion filter (all variations) → update
CSS → Spherion sortbar → update
NONE → Spherion indicators - percentage
REPO → Spherion favicon → update
REPO → Spherion logo → update
REPO → Spherion maps → update : new marker.png
REPO → Spherion blog components → update : new images

0.4.0

2 November 2020

Meta content
Color mapping
Footer
Form elements
Popover large
Modals
Link list
Promotional text
Badges
Contact person
Notification toast

0.3.0

26 October 2020

Meet the Team

0.2.0

23 October 2020

Colors
Buttons
Navigation
Blocks
Image assets
Typography and Fonts
Body Copy
Meta content location
Accordion
Blogs - article overview
Cards - job
Related jobs
Split view - photo

💙 Shout out

A large shout out to the team who created this package with ultimate care, 'gewoon keigoed & skoftig mooi'! 🤗

@randstad-design/orbit-multitheme